:root {
  color-scheme: only light;
  --cream: #fff7e8;
  --ink: #493126;
  --orange: #ed8a3c;
  --orange-deep: #cf6428;
  --green: #617e46;
  --glass: rgba(255, 250, 238, .88);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #172a29;
  font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif;
}

body {
  overflow-x: hidden;
}

#game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #f4b36a;
  touch-action: none;
  user-select: none;
}

#game {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  display: block;
  transform: translate(-50%, -50%);
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 227, 167, .15), transparent 42%),
    rgba(32, 45, 40, .44);
  backdrop-filter: blur(4px);
  transition: opacity .28s ease, visibility .28s ease;
}

.overlay.visible {
  opacity: 1;
  visibility: visible;
}

.card {
  width: min(520px, 92vw);
  padding: clamp(26px, 5vw, 48px);
  text-align: center;
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 241, 214, .93));
  box-shadow:
    0 28px 70px rgba(53, 38, 23, .28),
    inset 0 2px 0 #fff;
}

.card.compact {
  width: auto;
  padding: 24px 32px;
}

#start-screen {
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 230, 153, .38), transparent 25%),
    radial-gradient(circle at 84% 74%, rgba(141, 201, 163, .3), transparent 28%),
    linear-gradient(145deg, rgba(38, 70, 58, .48), rgba(91, 78, 55, .25));
  backdrop-filter: blur(6px) saturate(1.08);
}

#start-screen::before,
#start-screen::after {
  position: absolute;
  z-index: -1;
  width: min(30vw, 360px);
  height: min(30vw, 360px);
  border: 2px solid rgba(255, 248, 218, .18);
  border-radius: 48% 52% 58% 42%;
  content: "";
  animation: menu-drift 8s ease-in-out infinite alternate;
}

#start-screen::before {
  top: -12%;
  left: -5%;
  background: rgba(255, 213, 128, .08);
  transform: rotate(18deg);
}

#start-screen::after {
  right: -4%;
  bottom: -14%;
  background: rgba(124, 174, 137, .11);
  transform: rotate(-24deg);
  animation-delay: -3s;
}

.start-card {
  position: relative;
  width: min(920px, 94vw);
  min-height: min(570px, 88vh);
  display: grid;
  grid-template-columns: minmax(310px, .88fr) minmax(390px, 1.12fr);
  align-items: stretch;
  gap: 18px;
  overflow: hidden;
  padding: 20px;
  border: 3px solid rgba(255, 255, 255, .86);
  border-radius: 42px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .95), transparent 30%),
    linear-gradient(135deg, rgba(255, 249, 227, .97), rgba(246, 228, 184, .96));
  box-shadow:
    0 30px 90px rgba(30, 39, 30, .38),
    0 8px 0 rgba(113, 87, 52, .17),
    inset 0 2px 0 #fff;
}

.start-card::before {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px dashed rgba(116, 139, 82, .2);
  border-radius: 31px;
  content: "";
}

.menu-art {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 30%, #fff8d6 0 15%, transparent 48%),
    linear-gradient(180deg, #bde0c6 0%, #dcebc7 52%, #a7c78d 53%, #729364 100%);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, .22),
    0 12px 30px rgba(75, 86, 56, .17);
}

.menu-art::before,
.menu-art::after {
  position: absolute;
  top: -35px;
  width: 72px;
  height: 230px;
  border-radius: 70% 20% 70% 20%;
  background: linear-gradient(90deg, #527857, #7fa26b);
  box-shadow:
    38px 58px 0 -10px #638b5d,
    14px 130px 0 -18px #87a970;
  content: "";
  opacity: .72;
}

.menu-art::before {
  left: -28px;
  transform: rotate(-20deg);
}

.menu-art::after {
  right: -30px;
  transform: scaleX(-1) rotate(-16deg);
}

.mascot-halo {
  position: absolute;
  z-index: 3;
  top: 82px;
  left: 50%;
  width: 290px;
  height: 290px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 250, 220, .96), rgba(246, 198, 117, .62) 62%, rgba(255, 255, 255, .18) 63%);
  box-shadow:
    0 18px 45px rgba(81, 75, 46, .18),
    inset 0 0 0 10px rgba(255, 255, 255, .18);
  transform: translateX(-50%);
}

.mascot-halo img {
  width: 265px;
  height: 265px;
  object-fit: contain;
  filter: drop-shadow(0 16px 12px rgba(69, 57, 41, .2));
  animation: mascot-bob 2.8s ease-in-out infinite;
}

.menu-pool {
  position: absolute;
  z-index: 2;
  right: -25px;
  bottom: -42px;
  left: -25px;
  height: 155px;
  overflow: hidden;
  border: 12px solid #7c7968;
  border-radius: 50% 50% 18% 18%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, .72), transparent 35%),
    linear-gradient(#8dd7d0, #60aaa8);
  box-shadow: inset 0 16px 0 rgba(255, 255, 255, .2);
}

.menu-pool span {
  position: absolute;
  top: 36px;
  left: 15%;
  width: 64px;
  height: 12px;
  border: 3px solid rgba(255, 255, 255, .56);
  border-color: rgba(255, 255, 255, .56) transparent transparent;
  border-radius: 50%;
}

.menu-pool span:nth-child(2) {
  top: 69px;
  left: 56%;
  width: 92px;
}

.menu-pool span:nth-child(3) {
  top: 92px;
  left: 31%;
  width: 44px;
}

.steam-puff {
  position: absolute;
  z-index: 4;
  width: 26px;
  height: 54px;
  border: 8px solid rgba(255, 255, 255, .65);
  border-top: 0;
  border-bottom: 0;
  border-radius: 50%;
  filter: blur(.4px);
  animation: steam-rise 2.7s ease-in-out infinite;
}

.steam-one {
  top: 41px;
  left: 34%;
}

.steam-two {
  top: 26px;
  left: 49%;
  animation-delay: -.9s;
}

.steam-three {
  top: 48px;
  left: 63%;
  animation-delay: -1.7s;
}

.floating-yuzu {
  position: absolute;
  z-index: 5;
  width: 37px;
  height: 37px;
  border: 3px solid rgba(188, 116, 30, .24);
  border-radius: 48% 52% 50% 50%;
  background: radial-gradient(circle at 34% 28%, #fff19b 0 8%, #ffc84f 21%, #e98a2f 80%);
  box-shadow: 0 8px 14px rgba(103, 72, 33, .18);
  animation: yuzu-float 3s ease-in-out infinite;
}

.floating-yuzu::before {
  position: absolute;
  top: -9px;
  left: 19px;
  width: 17px;
  height: 9px;
  border-radius: 100% 0 100% 0;
  background: #5f8c4c;
  content: "";
  transform: rotate(-22deg);
}

.yuzu-one {
  top: 87px;
  right: 21px;
}

.yuzu-two {
  top: 248px;
  left: 19px;
  width: 29px;
  height: 29px;
  animation-delay: -1.4s;
}

.mascot-speech {
  position: absolute;
  z-index: 6;
  top: 302px;
  right: 16px;
  margin: 0;
  padding: 9px 13px;
  color: #61724d;
  border: 2px solid rgba(112, 126, 83, .18);
  border-radius: 16px 16px 16px 5px;
  background: rgba(255, 254, 236, .94);
  box-shadow: 0 7px 14px rgba(74, 66, 46, .12);
  font-size: 13px;
  font-weight: 1000;
  transform: rotate(-4deg);
}

.menu-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 24px clamp(18px, 3vw, 34px);
  text-align: left;
}

.menu-copy .eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid rgba(98, 126, 70, .18);
  border-radius: 999px;
  background: rgba(120, 153, 88, .1);
  letter-spacing: .15em;
}

.start-card h1 {
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: .9;
  text-shadow: 0 3px 0 #fff, 0 8px 18px rgba(99, 68, 38, .09);
}

.start-card h1 small {
  display: block;
  margin-bottom: 8px;
  color: #4f694b;
  font-size: .34em;
  letter-spacing: .22em;
}

.start-card h1 span {
  display: block;
  color: #d76b2d;
}

.menu-copy .lede {
  margin: 20px 0 15px;
  color: #675143;
  font-size: 15px;
}

.adventure-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 17px;
}

.adventure-badges span {
  padding: 7px 10px;
  color: #526548;
  border: 1px solid rgba(87, 111, 71, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  font-size: 11px;
  font-weight: 900;
}

.menu-copy .controls-copy {
  justify-content: flex-start;
  margin-bottom: 18px;
}

.menu-copy .controls-copy span {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 4px 10px rgba(69, 57, 40, .07);
}

.menu-copy .asset-status {
  margin: -4px 0 12px;
}

.menu-copy .primary {
  position: relative;
  min-width: 238px;
  padding-right: 54px;
  overflow: hidden;
  text-align: left;
}

.menu-copy .primary::after {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  content: "➜";
  transform: translateY(-50%);
}

.menu-copy .tiny {
  margin-top: 16px;
}

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes steam-rise {
  0%, 100% { opacity: .25; transform: translateY(12px) scale(.82); }
  50% { opacity: .78; transform: translateY(-8px) scale(1.05); }
}

@keyframes yuzu-float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(7deg); }
}

@keyframes menu-drift {
  to { transform: translateY(22px) rotate(30deg); }
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

h1,
h2 {
  margin: 0;
  font-size: clamp(44px, 8vw, 78px);
  line-height: .87;
  letter-spacing: -.055em;
  text-shadow: 0 3px 0 #fff;
}

h1 span,
h2 span {
  color: var(--orange-deep);
}

.lede {
  max-width: 390px;
  margin: 24px auto 20px;
  font-size: 17px;
  line-height: 1.5;
}

.controls-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.controls-copy span {
  padding: 8px 12px;
  border: 1px solid rgba(80, 61, 43, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .63);
  font-size: 12px;
  font-weight: 800;
}

kbd {
  display: inline-grid;
  min-width: 23px;
  height: 23px;
  margin-right: 3px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: #5d493b;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
  font: inherit;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.primary {
  min-width: 210px;
  padding: 15px 28px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(#f49a4c, #d96f2e);
  box-shadow: 0 8px 0 #9e4721, 0 14px 28px rgba(130, 64, 31, .25);
  font-size: 17px;
  font-weight: 900;
  transition: transform .12s ease, box-shadow .12s ease;
}

.primary:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #9e4721;
}

.primary:disabled {
  cursor: wait;
  opacity: .58;
  transform: none;
  box-shadow: 0 4px 0 #9e4721;
}

.asset-status {
  min-height: 18px;
  margin: -8px 0 14px;
  color: #6c593f;
  font-size: 12px;
  font-weight: 800;
}

.asset-status.error {
  color: #a94332;
}

.tiny {
  margin: 18px 0 0;
  opacity: .66;
  font-size: 11px;
}

.loader {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border: 5px solid rgba(207, 100, 40, .18);
  border-top-color: var(--orange-deep);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.sound-button,
.round-button {
  position: absolute;
  z-index: 8;
  top: max(14px, env(safe-area-inset-top));
  width: 46px;
  height: 46px;
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: var(--glass);
  box-shadow: 0 7px 18px rgba(44, 35, 24, .18);
  font-size: 21px;
  font-weight: 900;
}

.sound-button {
  right: max(14px, env(safe-area-inset-right));
}

.pause-button {
  right: max(70px, calc(env(safe-area-inset-right) + 70px));
  font-size: 17px;
}

.sound-button.muted {
  opacity: .55;
}

#touch-controls {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  justify-content: space-between;
  padding:
    0 max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  pointer-events: none;
}

.touch-group {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.touch-group button {
  width: 68px;
  height: 68px;
  color: #513626;
  border: 2px solid rgba(255, 255, 255, .76);
  border-radius: 50%;
  background: rgba(255, 246, 225, .79);
  box-shadow: 0 8px 20px rgba(55, 38, 25, .21), inset 0 2px 0 #fff;
  font-size: 22px;
  font-weight: 1000;
  backdrop-filter: blur(6px);
}

.touch-group button.active {
  transform: translateY(4px) scale(.95);
  background: rgba(255, 194, 112, .92);
}

.touch-group .roll {
  width: 72px;
  height: 72px;
  color: #fff;
  background: rgba(91, 126, 68, .88);
  font-size: 12px;
  letter-spacing: .04em;
}

.touch-group .jump {
  width: 82px;
  height: 82px;
  color: #fff;
  background: rgba(225, 119, 51, .9);
  font-size: 32px;
}

#win-screen {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 226, 132, .42), transparent 31%),
    radial-gradient(circle at 15% 80%, rgba(123, 189, 161, .27), transparent 28%),
    linear-gradient(145deg, rgba(38, 67, 56, .56), rgba(86, 64, 48, .34));
  backdrop-filter: blur(7px) saturate(1.12);
}

.win-card {
  position: relative;
  width: min(850px, 94vw);
  min-height: min(510px, 88vh);
  display: grid;
  grid-template-columns: minmax(290px, .88fr) minmax(390px, 1.12fr);
  align-items: stretch;
  gap: 20px;
  overflow: hidden;
  padding: 18px;
  border: 3px solid rgba(255, 255, 255, .88);
  border-radius: 40px;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .96), transparent 28%),
    linear-gradient(135deg, rgba(255, 250, 230, .98), rgba(242, 226, 184, .97));
  box-shadow:
    0 32px 95px rgba(29, 39, 30, .4),
    0 8px 0 rgba(105, 78, 48, .17),
    inset 0 2px 0 #fff;
}

.win-card::before {
  position: absolute;
  inset: 11px;
  pointer-events: none;
  border: 1px dashed rgba(112, 135, 81, .2);
  border-radius: 30px;
  content: "";
}

.win-art {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 29px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 250, 203, .96), transparent 36%),
    linear-gradient(180deg, #f8d88c 0%, #f1c478 43%, #b5d3a1 44%, #6c9570 100%);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, .18),
    0 12px 28px rgba(78, 79, 48, .16);
}

.win-art::before,
.win-art::after {
  position: absolute;
  top: -50px;
  width: 70px;
  height: 245px;
  border-radius: 70% 25% 70% 25%;
  background: linear-gradient(90deg, #4d795a, #82a66c);
  box-shadow:
    35px 64px 0 -13px #688f60,
    9px 143px 0 -20px #94b278;
  content: "";
  opacity: .7;
}

.win-art::before {
  left: -23px;
  transform: rotate(-17deg);
}

.win-art::after {
  right: -25px;
  transform: scaleX(-1) rotate(-18deg);
}

.victory-halo {
  position: absolute;
  z-index: 3;
  top: 63px;
  left: 50%;
  width: 275px;
  height: 275px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .28) 0 10deg, transparent 10deg 22deg),
    radial-gradient(circle, #fff9d4 0 42%, #f4ba5f 73%, rgba(255, 255, 255, .18) 74%);
  box-shadow:
    0 18px 38px rgba(91, 71, 38, .18),
    inset 0 0 0 10px rgba(255, 255, 255, .18);
  transform: translateX(-50%);
  animation: victory-glow 3s ease-in-out infinite;
}

.victory-halo img {
  position: relative;
  z-index: 2;
  width: 250px;
  height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 15px 11px rgba(71, 55, 37, .2));
  animation: victory-bounce 1.9s ease-in-out infinite;
}

.victory-pool {
  position: absolute;
  z-index: 2;
  right: -25px;
  bottom: -47px;
  left: -25px;
  height: 145px;
  overflow: hidden;
  border: 11px solid #777668;
  border-radius: 52% 52% 16% 16%;
  background:
    radial-gradient(ellipse at 52% 13%, rgba(255, 255, 255, .68), transparent 34%),
    linear-gradient(#90d8d0, #5ea7a7);
  box-shadow: inset 0 14px 0 rgba(255, 255, 255, .2);
}

.victory-pool span {
  position: absolute;
  top: 32px;
  left: 18%;
  width: 72px;
  height: 12px;
  border: 3px solid rgba(255, 255, 255, .56);
  border-color: rgba(255, 255, 255, .56) transparent transparent;
  border-radius: 50%;
}

.victory-pool span:nth-child(2) {
  top: 63px;
  left: 57%;
  width: 88px;
}

.victory-pool span:nth-child(3) {
  top: 86px;
  left: 34%;
  width: 42px;
}

.victory-ribbon {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 25px;
  left: 18px;
  margin: 0;
  padding: 10px 12px;
  color: #fff9e8;
  border: 2px solid rgba(255, 255, 255, .54);
  border-radius: 999px;
  background: linear-gradient(90deg, #6d925b, #e68a3e);
  box-shadow: 0 8px 18px rgba(76, 58, 36, .2);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.celebration-dot {
  position: absolute;
  z-index: 5;
  width: 15px;
  height: 15px;
  border: 3px solid rgba(255, 255, 255, .68);
  border-radius: 4px;
  background: #f49a45;
  box-shadow: 0 5px 10px rgba(89, 61, 34, .15);
  animation: confetti-float 2.6s ease-in-out infinite;
}

.dot-one {
  top: 40px;
  left: 39px;
  transform: rotate(18deg);
}

.dot-two {
  top: 83px;
  right: 27px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #79a868;
  animation-delay: -.8s;
}

.dot-three {
  top: 244px;
  left: 24px;
  width: 11px;
  height: 20px;
  background: #f0cb58;
  animation-delay: -1.4s;
}

.dot-four {
  top: 278px;
  right: 31px;
  width: 18px;
  height: 10px;
  background: #e76e59;
  animation-delay: -2s;
}

.win-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 22px clamp(15px, 3vw, 30px);
  text-align: left;
}

.win-copy .eyebrow {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 7px 11px;
  border: 1px solid rgba(97, 126, 70, .18);
  border-radius: 999px;
  background: rgba(120, 153, 88, .1);
}

.win-copy h2 {
  font-size: clamp(48px, 5.5vw, 68px);
  line-height: .91;
  text-shadow: 0 3px 0 #fff, 0 8px 18px rgba(99, 68, 38, .09);
}

.win-message {
  margin: 18px 0 14px;
  color: #675143;
  font-size: 14px;
  line-height: 1.5;
}

.win-copy .win-stats {
  margin: 14px 0 18px;
  padding: 13px;
  border: 1px solid rgba(99, 120, 72, .12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 247, 218, .66));
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(83, 67, 45, .07);
}

.win-copy .rank-badge {
  width: 62px;
  height: 62px;
  margin-bottom: 7px;
  border-color: rgba(255, 255, 255, .92);
  background: linear-gradient(145deg, #71945e, #ef9345);
  box-shadow: 0 7px 16px rgba(73, 49, 38, .18);
  font-size: 32px;
}

.win-copy .end-actions {
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: start;
  gap: 18px;
}

.win-copy .primary {
  min-width: 175px;
}

.win-copy .secondary {
  padding: 10px 0;
}

.win-copy .secondary::after {
  display: inline-block;
  margin-left: 6px;
  content: "↗";
  font-size: .9em;
  transition: transform .15s ease;
}

.win-copy .secondary:hover::after {
  transform: translate(2px, -2px);
}

@keyframes victory-bounce {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes victory-glow {
  0%, 100% { box-shadow: 0 18px 38px rgba(91, 71, 38, .18), inset 0 0 0 10px rgba(255, 255, 255, .18); }
  50% { box-shadow: 0 20px 48px rgba(242, 177, 72, .34), inset 0 0 0 14px rgba(255, 255, 255, .25); }
}

@keyframes confetti-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -11px; }
}

.win-stats {
  margin: 24px 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
  font-weight: 900;
}

.rank-badge {
  display: grid;
  width: 68px;
  height: 68px;
  margin: 0 auto 10px;
  place-items: center;
  color: #fff;
  border: 4px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: linear-gradient(145deg, #7f9a59, #e98c3f);
  box-shadow: 0 8px 20px rgba(73, 49, 38, .2);
  font-size: 35px;
}

.win-stats p {
  margin: 6px 0;
}

.win-stats small {
  color: #765c43;
}

.end-actions {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.secondary {
  color: #5d7146;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.secondary:hover {
  text-decoration: underline;
}

@media (hover: none), (pointer: coarse) {
  #touch-controls {
    display: flex;
  }
}

@media (max-height: 620px) {
  .card {
    padding: 20px 28px;
  }

  h1,
  h2 {
    font-size: 46px;
  }

  .lede {
    margin: 14px auto;
    font-size: 14px;
  }

  .controls-copy {
    margin-bottom: 14px;
  }

  .tiny {
    display: none;
  }

  .touch-group button {
    width: 58px;
    height: 58px;
  }

  .touch-group .roll {
    width: 62px;
    height: 62px;
  }

  .touch-group .jump {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 820px) {
  .start-card {
    grid-template-columns: minmax(220px, .72fr) minmax(360px, 1.28fr);
  }

  .mascot-halo {
    width: 230px;
    height: 230px;
  }

  .mascot-halo img {
    width: 215px;
    height: 215px;
  }

  .mascot-speech {
    top: 280px;
  }
}

@media (max-width: 660px) {
  .overlay {
    padding: 10px;
  }

  .start-card {
    width: min(470px, 96vw);
    min-height: 0;
    max-height: 96vh;
    grid-template-columns: 1fr;
    gap: 5px;
    overflow-y: auto;
    padding: 12px;
    border-radius: 30px;
  }

  .start-card::before {
    inset: 7px;
    border-radius: 24px;
  }

  .menu-art {
    min-height: 150px;
    border-radius: 22px;
  }

  .menu-art::before,
  .menu-art::after {
    height: 150px;
  }

  .mascot-halo {
    top: 8px;
    width: 155px;
    height: 155px;
  }

  .mascot-halo img {
    width: 145px;
    height: 145px;
  }

  .menu-pool {
    bottom: -88px;
  }

  .steam-puff,
  .mascot-speech,
  .yuzu-two {
    display: none;
  }

  .yuzu-one {
    top: 38px;
    right: 25px;
  }

  .menu-copy {
    padding: 13px 17px 18px;
    text-align: center;
  }

  .menu-copy .eyebrow {
    margin-bottom: 9px;
  }

  .start-card h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .start-card h1 small {
    margin-bottom: 5px;
  }

  .menu-copy .lede {
    margin: 12px auto;
    font-size: 13px;
  }

  .adventure-badges,
  .menu-copy .controls-copy {
    justify-content: center;
  }

  .adventure-badges {
    margin-bottom: 11px;
  }

  .menu-copy .controls-copy {
    margin-bottom: 12px;
  }

  .menu-copy .asset-status {
    margin-bottom: 9px;
  }

  .menu-copy .primary {
    min-width: 220px;
  }
}

@media (max-height: 650px) and (min-width: 661px) {
  .start-card {
    min-height: 0;
    height: min(530px, 94vh);
  }

  .menu-art {
    min-height: 0;
  }

  .mascot-halo {
    top: 54px;
    width: 245px;
    height: 245px;
  }

  .mascot-halo img {
    width: 225px;
    height: 225px;
  }

  .mascot-speech {
    top: 262px;
  }

  .menu-copy {
    padding-block: 12px;
  }

  .start-card h1 {
    font-size: 52px;
  }

  .menu-copy .lede {
    margin-block: 12px;
    font-size: 13px;
  }

  .adventure-badges {
    margin-bottom: 10px;
  }

  .menu-copy .controls-copy {
    margin-bottom: 11px;
  }

  .menu-copy .tiny {
    display: none;
  }
}

@media (max-width: 700px) {
  .win-card {
    width: min(470px, 96vw);
    min-height: 0;
    max-height: 96vh;
    grid-template-columns: 1fr;
    gap: 5px;
    overflow-y: auto;
    padding: 12px;
    border-radius: 30px;
  }

  .win-card::before {
    inset: 7px;
    border-radius: 23px;
  }

  .win-art {
    min-height: 174px;
    border-radius: 22px;
  }

  .victory-halo {
    top: 5px;
    width: 165px;
    height: 165px;
  }

  .victory-halo img {
    width: 152px;
    height: 152px;
  }

  .victory-pool {
    bottom: -94px;
  }

  .victory-ribbon {
    right: auto;
    bottom: 8px;
    left: 50%;
    width: 210px;
    padding: 7px 9px;
    font-size: 9px;
    transform: translateX(-50%);
  }

  .celebration-dot {
    display: none;
  }

  .win-copy {
    padding: 14px 17px 18px;
    text-align: center;
  }

  .win-copy .eyebrow {
    margin-bottom: 8px;
  }

  .win-copy h2 {
    font-size: clamp(42px, 12vw, 56px);
  }

  .win-message {
    margin: 11px auto;
    font-size: 12px;
  }

  .win-copy .win-stats {
    margin-block: 10px 13px;
  }

  .win-copy .end-actions {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
  }
}

@media (max-height: 650px) and (min-width: 701px) {
  .win-card {
    min-height: 0;
    height: min(500px, 94vh);
  }

  .win-art {
    min-height: 0;
  }

  .victory-halo {
    top: 42px;
    width: 235px;
    height: 235px;
  }

  .victory-halo img {
    width: 215px;
    height: 215px;
  }

  .win-copy {
    padding-block: 10px;
  }

  .win-copy h2 {
    font-size: 50px;
  }

  .win-message {
    margin-block: 10px;
    font-size: 12px;
  }

  .win-copy .win-stats {
    margin-block: 9px 12px;
  }
}

/* Search-readable game guide below the full-screen adventure. */
.game-info {
  width: min(980px, calc(100% - 28px));
  margin: 0 auto;
  padding: 58px 0 64px;
  color: #493126;
  user-select: text;
  touch-action: auto;
}

.game-info a { color: #386532; font-weight: 850; }
.game-info .crumbs { margin: 0 0 14px; color: #7a685d; font-size: 13px; }
.game-info .crumbs a { text-decoration: none; }
.game-info article {
  padding: clamp(23px, 5vw, 48px);
  border: 1px solid rgba(91, 74, 54, .18);
  border-radius: 30px;
  background: #fffaf0;
  box-shadow: 0 20px 55px rgba(19, 36, 34, .22);
}
.game-info h2,
.game-info h3 {
  margin: 26px 0 9px;
  color: #526b45;
  letter-spacing: normal;
  line-height: 1.2;
  text-shadow: none;
}
.game-info h2 { margin-top: 0; font-size: clamp(28px, 4vw, 42px); }
.game-info h3 { font-size: 21px; }
.game-info p,
.game-info li { line-height: 1.72; }
.game-info ul,
.game-info ol { padding-left: 24px; }
.game-info .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.game-info .guide-card { padding: 16px; border: 1px solid #ead8bb; border-radius: 18px; background: #fff3dc; }
.game-info .guide-card strong { display: block; margin-bottom: 4px; color: #c45c27; }
.game-info details { padding: 13px 0; border-top: 1px solid #ead8bb; }
.game-info summary { color: #526b45; font-weight: 900; cursor: pointer; }
.game-info details p { margin: 8px 0 0; }
.game-info .related { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.game-info .related a { padding: 8px 13px; border-radius: 999px; background: #ffe5bf; text-decoration: none; }
.game-footer { padding: 24px 14px; color: #e8e0cf; background: #102120; text-align: center; font-size: 13px; }
.game-footer a { color: #ffd18b; font-weight: 800; }

@media (max-width: 700px) {
  #game-shell { min-height: 560px; }
  .game-info { padding-block: 34px 42px; }
  .game-info article { border-radius: 22px; }
  .game-info .guide-grid { grid-template-columns: 1fr; }
}