@font-face {
  font-family: "Jua";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jua-regular.ttf");
}
:root {
  font-family: "Jua", sans-serif;
  --ink: #183b65;
  --teal: #167ed0;
  --game-outline: #153654;
}
button {
  font-family: "Jua", sans-serif;
}
.topbar {
  top: calc(14px + var(--safe-top));
}
.topbar, .play-top, .progress-track, .run-meta {
  left: max(16px, calc(50% - 230px));
  right: max(16px, calc(50% - 230px));
}
.top-actions {
  gap: 8px;
}
.wallet {
  min-width: 112px;
  height: 48px;
  padding: 4px 12px 4px 6px;
  gap: 7px;
  position: relative;
  border-radius: 12px;
  background: #163758df;
  border: 2px solid #d4f0ff;
  box-shadow:
    0 3px 0 #12304d,
    inset 0 2px 0 #ffffff30;
  color: white;
}
.wallet img {
  flex: 0 0 32px;
  width: 32px;
  height: 36px;
  filter: drop-shadow(0 2px 0 #8b4c22);
}
.wallet b {
  font:
    800 24px/1 "Barlow Condensed",
    sans-serif;
  text-shadow: 0 2px #092942;
}
.coin-counters { min-width: 0; margin-right: 12px; }
.wallet-copy { display: grid; gap: 1px; min-width: 0; }
.wallet-copy small { font-size: 10px; line-height: 1; color: #c9eaff; white-space: nowrap; }
.wallet-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet.run-wallet, #pause-btn { display: none; }
#game[data-screen="play"][data-phase="running"] .balance-wallet,
#game[data-screen="play"][data-phase="running"] #menu-btn { display: none; }
#game[data-screen="play"][data-phase="running"] .run-wallet { display: flex; }
#game[data-screen="play"][data-phase="running"] #pause-btn { display: grid; }
.top-actions { flex: 0 0 auto; }
.icon-button {
  width: 48px;
  height: 48px;
  padding: 0;
  flex: 0 0 48px;
  line-height: 0;
  border-radius: 13px;
  background: linear-gradient(#8edbff, #2aa8ec);
  color: white;
  border: 2px solid #153b66;
  box-shadow:
    inset 0 2px #e8faff,
    0 4px #163b65;
}
.icon-button svg {
  width: 24px;
  height: 24px;
  display: block;
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 0 #125b9c);
}
#pause-btn svg { stroke-width: 4; }
.icon-button:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px #e8faff,
    0 1px #163b65;
}
#game[data-screen="play"] .home-tool {
  display: none;
}
#game[data-phase="finished"] .play-top,
#game[data-phase="finished"] .progress-track,
#game[data-phase="finished"] .run-meta,
#game[data-phase="finished"] .drive-controls,
#game[data-phase="finished"] .action-toast {
  visibility: hidden;
}
#world:focus {
  outline: none;
}
#game[data-phase="ready"] .play-top { justify-content: flex-end; }
#game[data-phase="ready"] .play-top > div,
#game[data-phase="ready"] .progress-track,
#game[data-phase="ready"] .run-meta { visibility: hidden; }
#game[data-phase="ready"] .launch-guide { top: calc(100px + var(--safe-top)); }
.scene-shade {
  background: linear-gradient(
    #b3e3ff26,
    transparent 30%,
    transparent 65%,
    #3d90ad30
  );
}
.game-logo {
  position: absolute;
  top: calc(110px + var(--safe-top));
  left: 0;
  right: 0;
  text-align: center;
}
.game-logo h1 {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  column-gap: 6px;
  transform: rotate(-6deg);
  margin: 0;
  font:
    400 clamp(42px, 12vw, 62px) / 1.1 "Jua",
    sans-serif;
  letter-spacing: -1px;
  -webkit-text-stroke: 6px #173c65;
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 #173c65) drop-shadow(0 2px 0 #ffffff);
}
.game-logo h1 span {
  color: #fff;
}
.game-logo h1 em {
  color: #ffdc50;
  font-style: normal;
  font-size: 1.3em;
}
.course-banner {
  position: absolute;
  top: calc(225px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  display: flex;
  gap: 9px;
  align-items: center;
  white-space: nowrap;
  padding: 6px 12px;
  color: #fff;
  background: #267abccc;
  border: 2px solid #d4f3ff;
  border-radius: 8px;
  box-shadow: 0 3px #1e5279;
}
.course-banner > span:first-child {
  color: #ffe46d;
  font:
    800 14px "Barlow Condensed",
    sans-serif;
}
.course-banner h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 400;
}
.course-target {
  font-size: 12px;
  opacity: 0.85;
}
.home-best {
  position: absolute;
  top: calc(275px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font:
    800 19px "Barlow Condensed",
    sans-serif;
  text-shadow:
    0 2px #1d466c,
    1px 0 #1d466c,
    -1px 0 #1d466c;
  white-space: nowrap;
}
.home-best > span {
  color: #ffcd42;
}
.home-best b {
  margin-left: 6px;
}
.home-bottom {
  bottom: calc(194px + var(--safe-bottom));
  left: 50%;
  right: auto;
  width: min(58%, 250px);
  transform: translateX(-50%);
}
.primary {
  padding: 14px 20px;
  min-height: 56px;
  border-radius: 15px;
  border: 3px solid #17395b;
  background: linear-gradient(#5dcdff 0%, #24a1ed 70%, #1789da 100%);
  box-shadow:
    inset 0 3px #c8f2ff,
    0 5px #153b65;
  color: #fff;
  font-size: 25px;
  font-weight: 400;
  text-shadow: 0 2px #226294;
}
.primary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px #c8f2ff,
    0 2px #153b65;
}
.play-button {
  background: linear-gradient(#ffe66b, #ffc02f 75%, #ffae1c);
  border-color: #6e411d;
  box-shadow:
    inset 0 3px #fff6ba,
    0 5px #985520;
  color: #6e411d;
  text-shadow: 0 2px #ffe99b;
  font-size: 29px;
}
.play-button span {
  font-size: 22px;
}
.play-button:active:not(:disabled) {
  box-shadow:
    inset 0 2px #fff6ba,
    0 2px #985520;
}
.upgrade-dock {
  position: absolute;
  z-index: 5;
  bottom: calc(16px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 400px);
  pointer-events: none;
  transition:
    opacity 0.15s,
    visibility 0.15s;
}
.is-pulling .upgrade-dock {
  opacity: 0;
  visibility: hidden;
}
.dock-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  text-shadow:
    0 2px #1e4667,
    1px 0 #1e4667,
    -1px 0 #1e4667;
  color: white;
}
.dock-heading span {
  color: #ffdc59;
  font:
    900 18px "Barlow Condensed",
    sans-serif;
}
.dock-heading b {
  font-size: 13px;
  font-weight: 400;
}
.launch-upgrades {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.launch-upgrade {
  pointer-events: auto;
  position: relative;
  min-width: 0;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 6px 6px;
  border: 3px solid #193f65;
  border-radius: 15px;
  color: white;
  background: linear-gradient(#78d6ff, #258ed7 70%);
  box-shadow:
    inset 0 3px #c8f4ff,
    0 5px #163d64;
}
.upgrade-glide {
  background: linear-gradient(#65e3d9, #229fbb 70%);
}
.upgrade-income {
  background: linear-gradient(#b1a1ff, #755aca 70%);
}
.launch-upgrade:disabled {
  opacity: 1;
  cursor: default;
}
.launch-upgrade:disabled .upgrade-price {
  background: #4c6c86;
  border-color: #254d6c;
  color: #d7e3ef;
  box-shadow: inset 0 2px #7190a5;
}
.launch-upgrade:disabled .upgrade-price i {
  opacity: 0.4;
}
.launch-upgrade:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px #c8f4ff,
    0 2px #163d64;
}
.upgrade-level {
  position: relative;
  justify-self: start;
  align-self: center;
  height: 16px;
  padding: 0 5px;
  border: 0;
  border-radius: 5px;
  background: #174779aa;
  color: #effaff;
  font: 800 12px/16px "Barlow Condensed", sans-serif;
}
.upgrade-art {
  height: 51px;
  display: grid;
  place-items: center;
}
.upgrade-art :is(svg, img) {
  width: 57px;
  height: 57px;
  stroke: none;
  filter: drop-shadow(0 2px 0 #193e6355);
}
.launch-upgrade strong {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 2px #1b4c75;
}
.upgrade-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin-top: 5px;
  min-height: 29px;
  border-radius: 8px;
  border: 2px solid #216749;
  color: #fff;
  background: linear-gradient(#a2ed66, #43b64f);
  box-shadow: inset 0 2px #d6ff94;
  font:
    800 20px/1 "Barlow Condensed",
    sans-serif;
  text-shadow: 0 1px #346141;
}
.upgrade-price img {
  width: 20px;
  height: 22px;
}
.upgrade-price i {
  font:
    400 18px "Jua",
    sans-serif;
  margin-left: auto;
  color: #e6ffd5;
}
.leveled-up {
  animation: level-pop 0.45s ease-out;
}
@keyframes level-pop {
  40% {
    transform: translateY(-8px) scale(1.07);
    filter: brightness(1.3);
  }
}
.play-top {
  top: calc(75px + var(--safe-top));
}
.distance,
.run-meta,
.speed,
#flight-status {
  color: white;
  text-shadow:
    0 2px #234f78,
    1px 0 #234f78,
    -1px 0 #234f78;
}
.distance b {
  font-size: 58px;
}
.tiny-label {
  color: #214d76;
  font-family: "Jua", sans-serif;
  letter-spacing: 0;
  font-weight: 400;
}
.run-meta {
  font-size: 18px;
}
.run-meta > span:first-child {
  color: #ff756b;
  text-shadow:
    0 2px #6b3850,
    1px 0 #6b3850,
    -1px 0 #6b3850;
}
.progress-track {
  background: #16446d66;
  border: 1px solid #e9faff;
  height: 7px;
}
.progress-track i {
  background: #ffc943;
}
.launch-guide {
  top: calc(220px + var(--safe-top));
  color: white;
  text-shadow:
    0 2px #234f78,
    1px 0 #234f78,
    -1px 0 #234f78;
}
.launch-guide .tiny-label {
  color: #fff;
  font:
    800 16px "Barlow Condensed",
    sans-serif;
}
#power-value {
  color: #ffe160;
  font-size: 48px;
}
.power-track {
  border: 2px solid #234d73;
  height: 12px;
  box-shadow: 0 2px #d8f3ff;
}
.launch-guide h2 {
  font-family: "Jua", sans-serif;
  color: white;
  font-weight: 400;
  font-size: 23px;
}
.launch-guide p {
  color: white;
  font-size: 14px;
}
.aim-value {
  background: #1c5b86c9;
  border: 1px solid #c7efff;
  border-radius: 7px;
  color: #ffdf63;
  font-size: 13px;
  font-weight: 400;
}
.pull-arrow {
  color: #fff;
  text-shadow: 0 3px #236293;
  top: 68dvh;
}
.drive-controls button {
  background: linear-gradient(#7cdbff, #349de0);
  border: 3px solid #1a456e;
  color: #fff;
  box-shadow:
    inset 0 2px white,
    0 4px #1a456e;
}
.speed span,
.steer-hint {
  color: #fff;
  text-shadow: 0 2px #234f78;
}
.action-toast {
  font-family: "Jua", sans-serif;
  font-weight: 400;
  color: #ffe155;
  -webkit-text-stroke: 3px #21486c;
  paint-order: stroke fill;
  font-size: 34px;
}
.sheet-backdrop {
  align-items: center;
  justify-content: center;
  background: #092b5173;
  backdrop-filter: none;
  padding: 20px 16px;
}
.sheet {
  border: 3px solid #163759;
  border-radius: 23px;
  padding: 22px;
  background: linear-gradient(#78bde7, #327ab3);
  color: #fff;
  box-shadow:
    inset 0 3px #d1f5ff,
    0 7px #163759,
    0 18px 40px #112e5944;
  max-width: 410px;
  max-height: calc(100dvh - 50px - var(--safe-top) - var(--safe-bottom));
}
.sheet:before {
  display: none;
}
.sheet h2 {
  font-weight: 400;
  text-shadow: 0 2px #24557b;
}
.sheet h3 {
  font-weight: 400;
  color: #ffe785;
}
.sheet p {
  font-family: "Jua", sans-serif;
  color: #e5f6ff;
  font-size: 13px;
}
.close-button,
.result-close {
  display: grid;
  place-items: center;
  padding: 0;
  flex: 0 0 44px;
  border: 2px solid #71404a;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(#ff978a, #ea5a65);
  box-shadow:
    inset 0 2px #ffdbb7,
    0 3px #693c53;
  width: 44px;
  height: 44px;
  line-height: 0;
}
.close-button svg, .result-close svg { display: block; width: 24px; height: 24px; stroke-width: 3; }
.sheet-head { gap: 12px; }
.sheet-head h2 { min-width: 0; }
.sheet[data-kind="pause"] .settings-row { padding: 12px 0; margin-bottom: 16px; border-color: #c9eaff66; }
.toggle, .toggle.on { position: relative; flex: 0 0 52px; width: 52px; height: 44px; padding: 0; border-radius: 0; background: transparent; }
.toggle:before { content: ""; position: absolute; inset: 8px 0; border-radius: 20px; background: #a5bdcb; box-shadow: inset 0 2px #174f7433; }
.toggle.on:before { background: #34c895; }
.toggle i { position: absolute; top: 12px; left: 4px; box-shadow: 0 1px 2px #16446d44; }
.toggle.on i { transform: translateX(24px); }
.upgrade-row {
  background: #def4ff;
  border: 2px solid #235783;
  color: #254f70;
  border-radius: 14px;
}
.upgrade-copy small {
  color: #537591;
}
.price-button {
  border: 2px solid #346d49;
  background: linear-gradient(#b9ef88, #64cb65);
  color: #254b42;
  font-family: "Jua", sans-serif;
}
.skin-card {
  background: #e0f5ff;
  color: #24516d;
  border-color: #2c688e;
  box-shadow: 0 3px #22557b;
}
.skin-card.equipped {
  border-color: #6acdb7;
  background: #c3f1e4;
}
.secondary {
  background: #286897;
  border: 2px solid #174b73;
  color: #fff;
  font-size: 16px;
  box-shadow: inset 0 2px #599ac8;
}
.stat-card,
.mission {
  background: #e0f4ff;
  color: #285b80;
}
.stat-card span,
.mission p {
  color: #3d7496;
}
.record-row {
  border-bottom-color: #ffffff30;
}
.record-row small {
  color: #c5eaff;
}
.sheet[data-kind="result"] {
  display: block;
  padding: 27px 23px 16px;
  max-width: 360px;
  max-height: calc(100dvh - 60px - var(--safe-top) - var(--safe-bottom));
  overflow: auto;
  border: 3px solid #173e65;
  background: linear-gradient(#76c8f0ef, #338cc7f5);
  border-radius: 24px;
  box-shadow:
    inset 0 4px #d5f7ff,
    0 7px #14395c,
    0 20px 50px #092b5155;
}
.sheet[data-kind="result"] .result {
  display: block;
  position: relative;
}
.result-close {
  position: absolute;
  right: -15px;
  top: -19px;
  z-index: 1;
}
.result-ribbon {
  margin: 0 auto 17px;
  width: fit-content;
  padding: 6px 22px;
  background: #ffce48;
  color: #714821;
  border: 3px solid #8b5624;
  border-radius: 7px;
  box-shadow:
    inset 0 2px #fff3ad,
    0 4px #865328;
  transform: rotate(-4deg);
  font:
    900 30px/1 "Barlow Condensed",
    sans-serif;
}
.result h2 {
  color: #fff;
  font-size: 20px;
  margin: 10px 0 0;
}
.result-distance {
  font:
    900 92px/1 "Barlow Condensed",
    sans-serif;
  color: white;
  margin: 0 0 16px;
  -webkit-text-stroke: 5px #173e65;
  paint-order: stroke fill;
  text-shadow: 0 5px #173e65;
}
.result-distance small {
  font:
    400 25px "Jua",
    sans-serif;
  -webkit-text-stroke: 3px #173e65;
}
.result-loot {
  border-radius: 17px;
  padding: 12px;
  background: #144a7b58;
  border: 2px solid #bdeeffaa;
  box-shadow: inset 0 2px #1b5a8844;
  margin-bottom: 18px;
}
.result-loot > span {
  color: #e7f9ff;
  font-size: 15px;
}
.result-loot > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font:
    900 56px/1.15 "Barlow Condensed",
    sans-serif;
  color: #fff1ac;
  text-shadow: 0 3px #72501f;
}
.result-loot img {
  width: 47px;
  height: 51px;
  filter: drop-shadow(0 2px #805325);
}
.result-loot small {
  color: #c4eaff;
  font-size: 11px;
}
.reward-ad {
  border: 3px solid #80501c;
  border-radius: 15px;
  min-height: 60px;
  gap: 8px;
  background: linear-gradient(#ffe674, #ffc33b 72%, #ffb22c);
  box-shadow:
    inset 0 3px #fff8b9,
    0 5px #845024;
  color: #62421a;
}
.reward-ad strong {
  font-size: 21px;
  font-weight: 400;
  text-shadow: 0 2px #fff0a5;
}
.reward-ad b {
  font:
    900 29px/1 "Barlow Condensed",
    sans-serif;
  padding: 5px;
  color: #fff;
  background: #e28b21;
  border: 2px solid #fff0b2;
  border-radius: 10px;
  text-shadow: 0 2px #9a5d20;
  transform: rotate(7deg);
}
.reward-ad:disabled {
  opacity: 0.65;
}
.ad-play {
  font-size: 19px;
}
.result p#ad-status {
  font-size: 11px;
  line-height: 1.4;
  min-height: 30px;
  margin: 12px 0 7px;
  color: #e3f6ff;
}
.continue-button {
  font-size: 25px;
}
.result p.continue-hint {
  margin: 11px 0 0;
  font-size: 11px;
  color: #d1efff;
}
#notice {
  font-family: "Jua", sans-serif;
  background: #183f68;
  border: 2px solid #e0f7ff;
  box-shadow: 0 3px #123354;
  color: #fff;
  z-index: 40;
}
@media (max-height: 740px) {
  .game-logo {
    top: calc(100px + var(--safe-top));
  }
  .game-logo h1 {
    font-size: clamp(42px, 12vw, 54px);
  }
  .course-banner {
    top: calc(184px + var(--safe-top));
  }
  .home-best {
    top: calc(231px + var(--safe-top));
    font-size: 17px;
  }
  .home-bottom {
    bottom: calc(168px + var(--safe-bottom));
  }
  .play-button {
    min-height: 50px;
    padding: 9px 18px;
  }
  .upgrade-dock {
    bottom: calc(12px + var(--safe-bottom));
  }
  .launch-upgrade {
    height: 116px;
  }
  .upgrade-art {
    height: 42px;
  }
  .upgrade-art :is(svg, img) {
    width: 50px;
    height: 50px;
  }
  .dock-heading {
    margin-bottom: 9px;
  }
  .launch-guide {
    top: calc(209px + var(--safe-top));
  }
  .launch-guide h2 {
    font-size: 19px;
  }
  #power-value {
    font-size: 38px;
  }
  .sheet[data-kind="result"] {
    padding: 20px 22px 15px;
  }
  .result-distance {
    font-size: 76px;
    margin-bottom: 10px;
  }
  .result-ribbon {
    font-size: 27px;
    margin-bottom: 12px;
  }
  .result-loot {
    margin-bottom: 13px;
    padding: 9px;
  }
}
@media (max-height: 560px) and (min-width: 600px) {
  .game-logo {
    left: 24px;
    right: auto;
    top: 80px;
  }
  .game-logo h1 {
    font-size: 55px;
  }
  .course-banner {
    left: 110px;
    top: 185px;
  }
  .home-best {
    top: 230px;
    left: 105px;
  }
  .upgrade-dock {
    left: auto;
    right: 14px;
    width: 290px;
    transform: none;
  }
  .home-bottom {
    left: auto;
    right: 40px;
    width: 230px;
    transform: none;
  }
  .launch-guide {
    left: 20px;
    right: auto;
    top: 200px;
    width: 260px;
    transform: none;
  }
  .result-distance {
    font-size: 55px;
  }
  .result-ribbon {
    margin-bottom: 8px;
  }
  .result-loot {
    padding: 4px;
  }
  .result-loot > div {
    font-size: 38px;
  }
  .result-loot img {
    width: 32px;
    height: 35px;
  }
  .reward-ad,
  .continue-button {
    min-height: 44px;
    padding: 5px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .leveled-up {
    animation: none;
  }
}

/* Compact touch instructions with the same raised controls as the game HUD. */
.touch-help { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 8px; }
.touch-help > div { display: grid; justify-items: center; gap: 5px; padding: 12px 6px; border: 2px solid #3a729f; border-radius: 13px; background: #d8efff; box-shadow: inset 0 2px #fff, 0 3px #2c6289; }
.touch-help b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(#72d7ff, #239ce0); color: white; font-size: 26px; text-shadow: 0 2px #205788; }
.touch-help strong { color: #19486e; font-size: 17px; font-weight: 400; }
.touch-help span { color: #47718e; font-size: 12px; text-align: center; }
.speed { min-width: 68px; padding: 9px 12px 7px; border: 2px solid #e4f7ff; border-radius: 18px; background: #16446dc9; box-shadow: 0 3px #16446d, inset 0 2px #ffffff26; text-align: center; }
.speed b { font-variant-numeric: tabular-nums; }
.launch-guide p { margin-bottom: 7px; }

/* Flight instructions are passive so the whole course remains a touch surface. */
.drive-controls { gap: 10px; }
.drive-controls .steer-hint { flex: 1; text-align: right; }
.trick-cue { display: block; margin-top: 7px; color: #ffe878; font-size: 15px; text-shadow: 0 2px #234f78; pointer-events: none; }
.drive-controls[data-trick="complete"] .trick-cue { color: #bffff2; }
.trick-bonus { position: absolute; z-index: 5; bottom: calc(180px + var(--safe-bottom)); left: 50%; width: min(296px, calc(100% - 42px)); padding: 13px 14px 12px; transform: translateX(-50%) rotate(-3deg); border: 3px solid #955c26; border-radius: 19px; background: linear-gradient(#fff3ab, #ffd65a); color: #764319; text-align: center; box-shadow: inset 0 3px #fffbe0, 0 5px #955c26, 0 8px 24px #634d2933; pointer-events: none; }
.trick-bonus:not([hidden]) { animation: trick-pop .35s cubic-bezier(.2,.9,.3,1.3); }
.trick-bonus small { display: block; font: 800 19px/1 "Barlow Condensed", sans-serif; letter-spacing: 1px; }
.trick-bonus > strong { display: block; margin: 5px 0 9px; font-size: 29px; font-weight: 400; color: #fff; -webkit-text-stroke: 3px #8c5121; paint-order: stroke fill; text-shadow: 0 3px #8c5121; }
.trick-bonus-star { position: absolute; left: -12px; top: -17px; color: #ffe664; font-size: 43px; -webkit-text-stroke: 2px #985e23; paint-order: stroke fill; transform: rotate(-16deg); }
.trick-bonus-value { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #fff5ce; font-size: 14px; }
.trick-bonus-value b { color: #167e91; font: 800 24px/1 "Barlow Condensed", sans-serif; }
.has-trick-bonus .action-toast { visibility: hidden; }
.speed.trick-boost { border-color: #ffe36b; background: #1d7189; box-shadow: 0 3px #16446d, 0 0 18px #ffdf5dbb; }
@keyframes trick-pop { from { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(.7); } to { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); } }
@media (max-height: 700px) { .trick-bonus { padding: 9px 12px; } .trick-bonus > strong { font-size: 25px; margin: 4px 0 6px; } }

/* Clear upgrade outcomes, with room for one short explanation per card. */
.launch-upgrade { height: 142px; }
.upgrade-effect { font-size: 11px; line-height: 1.2; color: #effaff; margin-top: 3px; white-space: nowrap; }
.launch-upgrade .upgrade-price { margin-top: auto; }
.home-bottom { bottom: calc(207px + var(--safe-bottom)); }
#game:has(.upgrade-dock:not([hidden])) #notice { bottom: calc(201px + var(--safe-bottom)); left: max(18px, calc(50% - 200px)); right: max(18px, calc(50% - 200px)); background: #fff1a8; color: #65471c; border-color: #986125; font-size: 15px; }
.launch-guide h2, .launch-guide p { width: fit-content; margin-left: auto; margin-right: auto; padding: 5px 12px; background: #164872ed; border-radius: 9px; text-shadow: none; }
.launch-guide p { padding-top: 0; margin-top: -5px; border-radius: 0 0 9px 9px; }
.pull-demo { position: absolute; left: 50%; top: calc(49dvh - 100px - var(--safe-top)); width: 180px; height: 146px; transform: translateX(-50%); pointer-events: none; }
.pull-demo i { display: block; position: absolute; left: 88px; top: 0; height: 92px; border-left: 3px dashed #367da4; opacity: .8; }
.pull-demo svg { position: absolute; left: 67px; top: 0; width: 46px; height: 54px; fill: #fff3ca; stroke: #205176; stroke-width: 3; filter: drop-shadow(0 3px 0 #16446d55); animation: pull-hand 2.2s ease-in-out infinite; }
.pull-demo span { position: absolute; top: 111px; left: 0; width: 180px; padding: 6px 8px; border: 2px solid #784c22; border-radius: 12px; background: #ffe57a; color: #6b431d; font-size: 14px; text-shadow: none; }
.launch-guide[data-tutorial="false"] .pull-demo, .is-pulling .pull-demo { display: none; }
.launch-guide[data-tutorial="false"] p { display: none; }
@keyframes pull-hand { 0%,15% { transform: translateY(0) scale(.9); opacity: 0; } 25% { opacity: 1; } 75% { transform: translateY(60px) scale(1); opacity: 1; } 95%,100% { transform: translateY(60px) scale(.9); opacity: 0; } }
.trick-bonus { transition: width .2s, padding .2s, bottom .2s, border-radius .2s; }
.trick-bonus.is-compact { width: 238px; padding: 6px 9px; bottom: calc(151px + var(--safe-bottom)); border-radius: 14px; transform: translateX(-50%); }
.trick-bonus.is-compact > small, .trick-bonus.is-compact > strong, .trick-bonus.is-compact .trick-bonus-star { display: none; }
.trick-bonus.is-compact .trick-bonus-value { background: none; padding: 3px; }
.reward-flight-coin { position: fixed; left: 0; top: 0; width: 28px; height: 30px; z-index: 60; pointer-events: none; filter: drop-shadow(0 2px 2px #73522966); }
.result-loot b { font: inherit; font-variant-numeric: tabular-nums; }
.result[data-reveal="collecting"] .result-loot { border-color: #ffe478; box-shadow: 0 0 20px #ffd84966; }
@media (max-height: 740px) {
  .launch-upgrade { height: 128px; }
  .upgrade-art { height: 34px; }
  .upgrade-art :is(svg, img) { width: 43px; height: 39px; }
  .launch-upgrade strong { font-size: 18px; }
  .upgrade-effect { font-size: 10px; }
  .home-bottom { bottom: calc(184px + var(--safe-bottom)); }
  #game:has(.upgrade-dock:not([hidden])) #notice { bottom: calc(177px + var(--safe-bottom)); }
  .pull-demo { top: calc(44dvh - 100px - var(--safe-top)); height: 130px; }
  .pull-demo span { top: 100px; }
}
@media (prefers-reduced-motion: reduce) { .pull-demo svg { animation: none; transform: translateY(35px); } .trick-bonus { transition: none; } }
.sheet[data-kind="garage"] { max-width: 460px; padding: 18px; }
.wardrobe-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 12px; color: #e4f7ff; }
.wardrobe-status strong { padding: 6px 10px; background: #214e7f; border-radius: 20px; color: #ffe989; white-space: nowrap; }
.wardrobe-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 13px; }
.wardrobe-tabs button { min-height: 44px; border: 2px solid #245780; border-radius: 12px; color: #e9faff; background: #397fae; box-shadow: 0 3px #235278; font-size: 17px; }
.wardrobe-tabs button[aria-selected="true"] { background: linear-gradient(#fff4b0,#ffc84c); color: #69401c; border-color: #b27724; box-shadow: 0 3px #805620,inset 0 2px white; }
.wardrobe-tabs small { font-size: 11px; margin-left: 5px; }
.preview-figure { width: 46%; flex-shrink: 0; aspect-ratio: 1; }
.preview-figure canvas, .preview-figure img { width: 100%; height: 100%; display: block; object-fit: contain; }
.equipped-combination { padding: 9px 5px 0; color: #e5f9ff; font-size: 11px; text-align: center; line-height: 1.5; }
.costume-preview { display: flex; align-items: center; gap: 8px; padding: 8px; border: 2px solid #295c88; border-radius: 18px; background: radial-gradient(ellipse at 25% 45%, #f6ffff, #a8e5ff 65%, #71b6e5); box-shadow: inset 0 2px #fff; min-height: 150px; }
.costume-preview > img { width: 46%; height: 155px; object-fit: contain; }
.costume-preview > div { flex: 1; min-width: 0; }
.costume-preview .costume-kicker { color: #336b95; font: 9px "Jua", sans-serif; letter-spacing: 1px; }
.costume-preview h3 { margin: 7px 0; color: #173d64; font-size: 24px; }
.costume-preview p { color: #346081; font-size: 12px; line-height: 1.5; margin: 0 0 8px; }
.costume-preview small { color: #38627f; font-size: 10px; }
.costume-purchase { margin: 12px 0; }
.costume-purchase .primary { width: 100%; font-size: 16px; min-height: 48px; }
.costume-purchase p { text-align: center; margin: 8px 0 0; min-height: 16px; font-size: 11px; }
.costume-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.costume-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 17px 3px 9px; border: 2px solid #2b6089; border-radius: 15px; background: linear-gradient(#d4f4ff,#8cc9ed); box-shadow: 0 3px #245782,inset 0 2px #fff; color: #214669; min-width: 0; }
.costume-card.selected { border-color: #70d5c0; box-shadow: 0 3px #24546c; background: linear-gradient(#d5fff4,#8edbd1); }
.costume-card img { width: 100%; height: 92px; object-fit: contain; }
.costume-card strong { font-size: 13px; margin-top: 3px; }
.costume-card small { font-size: 10px; margin-top: 4px; color: #315c7a; }
.costume-badge { position: absolute; top: 5px; left: 6px; padding: 2px 5px; font-size: 9px; border-radius: 6px; color: white; background: #326ea2; }
.sheet .attendance-note { font-size: 11px; line-height: 1.6; margin: 16px 2px 10px; text-align: center; }
.garage-gear { border-top: 1px solid #c4ebff70; padding-top: 10px; margin-top: 12px; }
.garage-gear summary { min-height: 44px; cursor: pointer; display: list-item; padding: 12px 4px; color: #ffec9e; }
@media (max-width: 370px) {
  .sheet[data-kind="garage"] { padding: 13px; }
  .costume-card img { height: 77px; }
  .costume-card strong { font-size: 12px; }
  .costume-card small { font-size: 9px; }
  .costume-preview h3 { font-size: 21px; }
}

/* Final touch layout: comparable upgrades, a quiet ground HUD and clear run results. */
.home-bottom { bottom: calc(210px + var(--safe-bottom)); }
.launch-upgrade { height: 144px; }
.upgrade-art { height: 35px; flex-shrink: 0; }
.upgrade-art :is(svg, img) { width: 43px; height: 43px; }
.launch-upgrade strong { font-size: 18px; }
.upgrade-effect { font-size: 10px; line-height: 13px; }
.upgrade-comparison { display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;font:700 13px/17px "Barlow Condensed",sans-serif;white-space:nowrap;color:#e2f5ff; }
.upgrade-comparison i {font-style:normal;font-size:11px;opacity:.8;}
.upgrade-comparison b {color:#fff2a8;font-size:14px;}
.can-upgrade {border-color:#a5dfed;box-shadow:inset 0 2px #e8ffff99,0 4px #163d64;}
.launch-upgrade .upgrade-price {margin-top:auto;}
#steer-instruction { display:block;font-size:10px;line-height:1.5;margin-top:3px; }
.progress-track {overflow:visible;}
#best-progress {position:absolute;top:-8px;transform:translateX(-50%);font-size:20px;line-height:20px;color:#ffdc4f;text-shadow:0 1px #22557c,1px 0 #22557c,-1px 0 #22557c;}
.record-celebration {position:absolute;top:calc(215px + var(--safe-top));left:50%;transform:translateX(-50%);width:max-content;max-width:85%;padding:10px 18px 10px 44px;border:2px solid #946022;border-radius:15px;color:#664117;background:linear-gradient(#fff2a4,#ffd146);box-shadow:0 4px #79501e,inset 0 2px white;text-align:center;pointer-events:none;}
.record-celebration > span {position:absolute;left:12px;top:12px;font-size:25px;}
.record-celebration strong {display:block;font-size:21px;font-weight:400;}
.record-celebration small {display:block;font-size:11px;margin-top:3px;}
.result-reason {margin:3px 0 5px!important;font-size:12px!important;color:#e4f6ff!important;}
.result-comparison {margin:8px 0 12px;font-size:13px;color:#e5f7ff;}
.result-comparison.is-best {color:#fff1a0;}
.continue-button {background:linear-gradient(#fff0a1,#ffcd43);color:#65421e;border-color:#805126;text-shadow:0 1px #fff5b7;box-shadow:inset 0 2px white,0 4px #785022;}
.ad-unavailable .reward-ad {min-height:40px;height:40px;font-size:15px;padding:5px 10px;box-shadow:none;}
.ad-unavailable .reward-ad b {font-size:20px;}
@media(max-height:700px) {
 .launch-upgrade {height:126px;padding-top:6px;}
 .upgrade-art {height:29px;}.upgrade-art :is(svg, img){width:37px;height:37px;}
 .launch-upgrade strong {font-size:16px;}.upgrade-effect{font-size:9px;line-height:11px;}
 .upgrade-comparison {font-size:12px;line-height:15px;}.upgrade-comparison b{font-size:13px;}
 .home-bottom {bottom:calc(190px + var(--safe-bottom));}
 .result-reason {font-size:11px!important;margin:0!important;}
 .result-comparison {font-size:11px;margin:4px 0 8px;}
 .record-celebration {top:calc(185px + var(--safe-top));padding:8px 14px 8px 37px;}
 .record-celebration strong {font-size:18px;}.record-celebration small{font-size:10px;}
}
.sheet[data-kind="exit"] .primary,.sheet[data-kind="exit"] .secondary {display:block;width:100%;margin-top:14px;}
.exit-copy {font-size:15px;line-height:1.8;color:#e3f4ff;}
.text-exit {display:block;min-height:44px;margin:12px auto 0;padding:8px 14px;background:transparent;color:#e1f4ff;text-decoration:underline;font-size:13px;}
#steer-instruction[hidden] {display:none;}
.has-record .action-toast {visibility:hidden;}
.orientation-guide {position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#d6f2ff;color:#214e77;text-align:center;padding:24px;}
.orientation-guide > span {font-size:70px;line-height:1;color:#248bd0;}.orientation-guide strong{font-size:24px;font-weight:400;}.orientation-guide p{margin:0;font-size:15px;color:#4f7b97;}
@media(max-height:700px) {
 #game[data-host="onestore"] .game-logo {top:calc(76px + var(--safe-top));}
 #game[data-host="onestore"] .course-banner {top:calc(145px + var(--safe-top));}
 #game[data-host="onestore"] .home-best {top:calc(181px + var(--safe-top));}
 #game[data-host="onestore"] .home-bottom {bottom:calc(166px + var(--safe-bottom));}
 #game[data-host="onestore"] .launch-upgrade {height:116px;}
 #game[data-host="onestore"] .upgrade-art {height:25px;}
 #game[data-host="onestore"] .upgrade-art :is(svg, img) {width:33px;height:33px;}
 #game[data-host="onestore"] .dock-heading {margin-bottom:8px;}
}

@media (prefers-reduced-motion: reduce) { .trick-bonus:not([hidden]) { animation: none; } }

.upgrade-icon img { width: 39px; height: 39px; object-fit: contain; }

/* Icon-first upgrades reserve their own full height, without overlapping copy. */
.launch-upgrade { --upgrade-art-size: 54px; }
#game .launch-upgrade .upgrade-art { height: var(--upgrade-art-size); width: 100%; margin-bottom: 3px; }
#game .launch-upgrade .upgrade-art img { width: var(--upgrade-art-size); height: var(--upgrade-art-size); object-fit: contain; }
.launch-upgrade .upgrade-effect { margin-top: 0; }
@media (max-height: 700px) {
  .launch-upgrade { --upgrade-art-size: 43px; }
  #game[data-host="onestore"] .launch-upgrade { --upgrade-art-size: 36px; }
}

/* Pickup feedback stays off the steering surface and uses the run's clock. */
.coin-pickup { position: absolute; z-index: 5; left: 50%; top: 53%; display: flex; align-items: center; gap: 5px; pointer-events: none; transform: translate(-50%,calc(var(--coin-progress,0) * -30px)) scale(calc(1.12 - var(--coin-progress,0) * .12)); opacity: calc(1 - var(--coin-progress,0) * var(--coin-progress,0)); filter: drop-shadow(0 3px 2px #79450b66); }
.coin-pickup img { width: 35px; height: 35px; }
.coin-pickup b { font: 900 40px/1 "Barlow Condensed",sans-serif; color: #fff3a5; -webkit-text-stroke: 3px #8b4e19; paint-order: stroke fill; text-shadow: 0 3px #8b4e19; }
.run-wallet { transition: transform .12s,box-shadow .12s; transform-origin: top left; }
.run-wallet.pickup-pulse { transform: scale(1.1); border-color: #ffe56b; box-shadow: 0 0 18px #ffe56b99; }
.boost-pickup { position: absolute; z-index: 4; bottom: calc(115px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; width: 217px; padding: 6px 13px 7px 7px; border: 2px solid #c4fff1; border-radius: 18px; background: linear-gradient(#187caaed,#164b7bef); box-shadow: 0 4px #143d62,0 0 18px #51ffe855,inset 0 2px #ffffff44; color: #effffb; pointer-events: none; }
.boost-pickup > img { width: 45px; height: 45px; }
.boost-pickup strong { display: block; color: #fff1a0; font-size: 21px; font-weight: 400; line-height: 1.2; text-shadow: 0 2px #135573; }
.boost-pickup span { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 11px; }
.boost-pickup i { display: block; overflow: hidden; width: 70px; height: 5px; background: #0b3659; border-radius: 3px; }
#boost-meter { display: block; height: 100%; background: #9dfff1; transform-origin: left; }
.boost-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(90deg,#48e9f85c,transparent 16%,transparent 84%,#48e9f85c); transition: opacity .15s; }
.has-item-boost .boost-vignette { opacity: 1; }
.speed.item-boost { background: #116e90e8; border-color: #a4ffed; box-shadow: 0 3px #16446d,0 0 22px #66ffe599; }
@media (prefers-reduced-motion: reduce) {
  .coin-pickup { transform: translateX(-50%); }
  .run-wallet { transition: none; }.run-wallet.pickup-pulse { transform: none; }
  .boost-vignette { display: none; }
}

/* Solid, consistently lit game props inside the existing centred touch targets. */
.icon-button .game-tool-art { width: 33px; height: 33px; stroke: none; filter: drop-shadow(0 1.5px 0 #14344c88); pointer-events: none; }
#pause-btn .game-tool-art { width: 29px; height: 29px; }
.launch-upgrade .upgrade-art img { filter: drop-shadow(0 2px 0 #103c5a70); }

/* Enlarged prop art stays inside its reserved cell, including its shadow. */
#game .launch-upgrade .upgrade-art { overflow: hidden; isolation: isolate; }
#game .launch-upgrade .upgrade-art img { display: block; max-width: 100%; max-height: 100%; }

/* The level owns an internal row, separate from the prop artwork. */

/* Lead with the benefit; keep measurement units next to the values. */
.upgrade-comparison { gap: 2px; }
.upgrade-comparison .upgrade-unit { font-size: 9px; font-weight: 400; }
.upgrade-comparison .upgrade-metric { font-family: "Jua",sans-serif; font-size: 8px; font-weight: 400; color: #c7ffff; }

/* Five internal rows: level, artwork, name, cumulative benefit and price. */
.launch-upgrade { height:162px; display: grid; grid-template-rows:16px minmax(0,1fr) 14px 19px 29px; gap: 2px; justify-items: center; align-items: center; }
#game .launch-upgrade .upgrade-art { height: 100%; min-height: 0; margin: 0; }
.launch-upgrade .upgrade-effect { font-size: 11px; line-height: 14px; }
.launch-upgrade .upgrade-comparison { height: 100%; width: 100%; gap: 4px; line-height: 19px; }
.launch-upgrade .upgrade-comparison b { font-size: 19px; line-height: 19px; font-weight: 800; }
.upgrade-gain-prefix { font-family: "Jua",sans-serif; font-size: 10px; color: #dcffff; }
.launch-upgrade .upgrade-comparison.is-neutral b { font-family: "Jua",sans-serif; font-size: 12px; font-weight: 400; }
.launch-upgrade .upgrade-price { align-self: stretch; margin: 0; min-height: 0; }
.dock-heading > b { font-size: 16px; color: #fff0a0; }
@media (max-height:700px) {
  .launch-upgrade { height:144px; grid-template-rows:16px minmax(0,1fr) 12px 17px 27px; }
  #game[data-host="onestore"] .launch-upgrade { height:134px; }
  .launch-upgrade .upgrade-effect { font-size: 10px; line-height: 12px; }
  .launch-upgrade .upgrade-comparison b { font-size: 17px; line-height: 17px; }
  .upgrade-gain-prefix { font-size: 9px; }
}

.action-toast[data-kind="flip-count"] { color: #fff098; font-size: 41px; }
.trick-bonus[data-multi="true"] > strong { font-size: 26px; }
@media(max-width:360px) { .trick-cue {font-size:13px;} }
@media(max-height:700px) { .trick-bonus[data-multi="true"] > strong {font-size:23px;} }

/* Loading cannot expose actions before account-scoped storage has resolved. */
#game[data-screen="loading"] .topbar { visibility: hidden; }
.game-info p { line-height: 1.7; overflow-wrap: anywhere; }
.game-version { color: #ffe785 !important; }
.info-button { display: block; width: 100%; margin-bottom: 12px; }
@media(max-height:700px) {
  #game[data-host="onestore"] .home-best { top: calc(191px + var(--safe-top)); }
}

/* Cumulative performance has its own row; UP reuses the existing level tag. */
.launch-upgrade .upgrade-comparison { gap: 3px; }
.upgrade-gain-prefix { font-size: 9px; white-space: nowrap; }
.launch-upgrade.upgrade-glide .upgrade-comparison b { font-size: 17px; }
.launch-upgrade .upgrade-comparison.is-long b { font-size: 14px; }
.launch-upgrade.leveled-up { animation: upgrade-glow .7s ease-out; }
.leveled-up .upgrade-level { color: transparent; background: #ffde61; border-color: #fff2b4; }
.leveled-up .upgrade-level::after { content: "UP!"; position: absolute; inset: 0; display: grid; place-items: center; color: #69451b; font: 900 13px/1 "Barlow Condensed",sans-serif; }
.leveled-up .upgrade-art img { animation: upgrade-prop .5s ease-out; }
@keyframes upgrade-glow { 35% { filter: brightness(1.18); } }
@keyframes upgrade-prop { 40% { transform: scale(1.09) rotate(-5deg); } }
@media(max-height:700px) {
  .launch-upgrade.upgrade-glide .upgrade-comparison b { font-size: 16px; }
  .launch-upgrade .upgrade-comparison.is-long b { font-size: 13px; }
  .upgrade-gain-prefix { font-size: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .launch-upgrade.leveled-up, .leveled-up .upgrade-art img { animation: none; }
}
/* A full-width preparation entry with visible item art and equipped state. */
.dock-heading { justify-content: stretch; min-height: 52px; }
.run-items-button { pointer-events:auto; width:100%; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; height:52px; padding:4px 10px; border:2px solid #83c6dd; border-radius:14px; color:#fff; background:linear-gradient(#287fae,#185883); box-shadow:0 4px #173c65,inset 0 2px #ffffff33; text-shadow:0 1px #173c65; }
.run-items-button .items-entry-copy { display:grid; gap:3px; text-align:left; min-width:0; }
.run-items-button strong { font-size:16px; font-weight:400; white-space:nowrap; color:#fff7d2; }
.run-items-button small { font:11px/1.2 sans-serif; color:#d1f8ff; white-space:nowrap; }
.run-items-button .items-entry-icons { display:flex; gap:5px; margin-left:auto; }
.run-items-button .items-entry-slot { position:relative; display:grid; place-items:center; width:38px; height:38px; border:1px solid #9be8ff88; border-radius:10px; background:#103e6366; }
.run-items-button .items-entry-slot.selected { border-color:#fff2a0; background:#3a816c; box-shadow:inset 0 0 7px #d7ff9a66; }
.run-items-button img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 1px #0c354c66); }
.run-items-button .items-entry-slot b { position:absolute; right:-3px; bottom:-3px; width:14px; height:14px; border-radius:50%; background:#fff1a0; color:#255344; font:800 11px/14px sans-serif; text-shadow:none; }
.run-items-button i { font:800 27px/1 sans-serif; font-style:normal; color:#ffe79a; }
.home-bottom { bottom:calc(252px + var(--safe-bottom)); }
#game:has(.upgrade-dock:not([hidden])) #notice { bottom:calc(243px + var(--safe-bottom)); }
@media(max-height:700px) {
 .home-bottom { bottom:calc(232px + var(--safe-bottom)); }
 #game:has(.upgrade-dock:not([hidden])) #notice { bottom:calc(219px + var(--safe-bottom)); }
}
@media(max-height:700px) {
 #game[data-host="onestore"] .home-bottom { bottom:calc(208px + var(--safe-bottom)); }
}
@media(max-width:340px) {
 .run-items-button { gap:5px; padding-inline:8px; }
 .run-items-button strong { font-size:14px; }
 .run-items-button small { font-size:10px; }
 .run-items-button .items-entry-icons { gap:3px; }
 .run-items-button .items-entry-slot { width:34px; height:36px; }
 .run-items-button img { width:33px; height:33px; }
}
.run-item-status { display:flex; gap:4px; align-items:center; }
.run-item-status img { width:27px; height:27px; object-fit:contain; padding:2px; border:1px solid #b3f5ff; border-radius:8px; background:#184c70cc; }
.run-item-status img.spent { opacity:.35; filter:grayscale(1); }
#sheet[data-kind="items"] { max-width:430px; }
#sheet[data-kind="items"] .sheet-head { position:sticky; top:0; z-index:2; padding:5px 0; background:#70b7df; border-radius:10px; }
.sheet .items-intro { margin:4px 0 3px; font-size:16px; color:#fff3a2; text-align:center; }
.sheet .items-gift { margin:0 0 15px; font-size:11px; color:#e2f8ff; text-align:center; }
.run-items-list { display:grid; gap:12px; }
.run-item-card { display:grid; grid-template-columns:64px minmax(0,1fr); gap:7px 10px; padding:11px; border:2px solid #b4efff; border-radius:16px; background:linear-gradient(120deg,#c5f5ff,#75bfe4); color:#1b4c6f; box-shadow:0 4px #235577; }
.run-item-card.equipped { border-color:#62cbb5; background:#b5e9e2; box-shadow:0 3px #24566b66; }
.run-item-art { position:relative; display:grid; place-items:center; }
.run-item-art img { width:64px; height:64px; object-fit:contain; }
.run-item-art b { position:absolute; right:-2px; bottom:-2px; padding:1px 5px; border-radius:7px; background:#1e5276; color:white; font:800 14px/18px 'Barlow Condensed',sans-serif; }
.sheet .run-item-copy h3 { margin:2px 0 5px; font-size:20px; color:#184968; }
.sheet .run-item-copy p { margin:0 0 4px; color:#235779; font-size:13px; }
.run-item-copy small { display:block; color:#376987; font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.item-equip,.item-ad { min-height:38px; border-radius:10px; border:2px solid #2b6689; font-size:13px; padding:6px 3px; }
.item-equip { grid-column:1; font-size:11px; background:linear-gradient(#fff1ac,#ffd15b); color:#644921; border-color:#a4772f; box-shadow:0 2px #805e2a; }
.item-equip[aria-pressed="true"] { background:linear-gradient(#d0fff1,#76e6bb); border-color:#278574; color:#185b4c; }
.item-ad { grid-column:2; background:#277aaf; color:#fff; }
.item-ad:disabled { opacity:.6; }
.sheet .items-hint { margin:14px 0 10px; color:#e0f7ff; font-size:11px; line-height:1.6; text-align:center; }
.items-done { width:100%; font-size:20px; }
@media(max-height:700px) {
  #sheet[data-kind="items"] { padding:14px; }
  .run-items-list { gap:9px; }
  .run-item-card { padding:8px; grid-template-columns:55px minmax(0,1fr); gap:5px 8px; }
  .run-item-art img { width:55px; height:55px; }
  .sheet .run-item-copy h3 { font-size:18px; }
  .item-equip { grid-column:1; font-size:11px; }
  .item-ad { grid-column:2; }
  .sheet .items-intro { font-size:14px; }
  .sheet .items-gift { margin-bottom:10px; font-size:10px; }
}

/* Each course keeps a recognizable sky and banner on both lobby and next start. */
#game[data-biome="ice"] .course-banner { background:#226c9adf; border-color:#d3f8ff; }
#game[data-biome="aurora"] .course-banner { background:#505080e8; border-color:#f9e3ad; }
#game[data-biome="aurora"] .stage-progress { background:#474b7ae8; }

#game[data-biome="desert"] .course-banner,#game[data-biome="beach"] .course-banner {background:#8e6c4de8;border-color:#ffdfa2;}
#game[data-biome="space"] .course-banner,#game[data-biome="mushroom"] .course-banner,#game[data-biome="castle"] .course-banner {background:#625581e8;border-color:#efc8ff;}


/* Adventure trail, unlock stamp and the final flight. */
#courses-btn { width:min(92%,380px); justify-content:center; min-height:36px; }
#courses-btn h2 { min-width:0; overflow:hidden; text-overflow:ellipsis; }
#course-map-hint { position:absolute; right:6px; bottom:-19px; padding:2px 8px; border:1px solid #a2dfff; border-radius:0 0 8px 8px; color:#fff1ad; background:#174a73; font-size:10px; line-height:13px; }
.home-best { top:calc(293px + var(--safe-top)); }
#sheet[data-kind="courses"] { max-width:430px; padding:17px 16px 8px; background:linear-gradient(#337ca8,#174d78); border-color:#c8ebf7; }
#sheet[data-kind="courses"] .sheet-head { margin-bottom:8px; }
.journey-score { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px; padding:8px 11px; background:#123c62; border:1px solid #69a3c3; border-radius:12px; }
.journey-score>span { color:#d9f1fc; font-size:13px; }
.journey-score strong { color:#ffe382; font:800 25px/1 'Barlow Condensed',sans-serif; }
.journey-score small { color:#d5edfa; font:11px/1 'Jua',sans-serif; }
.journey-score>i { grid-column:1/-1; height:6px; background:#0b2f50; border-radius:5px; overflow:hidden; }
.journey-score i b { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#e5ac32,#fff2a1); }
.journey-chapters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin:11px 0; }
.journey-chapters button { min-height:34px; padding:3px; border:2px solid #143d60; border-radius:9px; background:#4a90b8; color:#e7f6ff; box-shadow:0 3px #123450,inset 0 1px #b9e9ff; font:800 13px/1 'Barlow Condensed',sans-serif; }
.journey-chapters [aria-pressed="true"] { background:linear-gradient(#ffe492,#eeb548); color:#644921; border-color:#8c6427; box-shadow:0 3px #694824; }
.course-scenery { display:block; width:100%; height:auto; overflow:hidden; border-radius:12px; }
.journey-preview { position:relative; height:115px; border:2px solid #d6f1ff; border-radius:15px; box-shadow:0 4px #123b5d; overflow:hidden; }
.journey-preview>.course-scenery { height:100%; object-fit:cover; }
.journey-preview>div { position:absolute; inset:auto 0 0; padding:19px 10px 8px; background:linear-gradient(transparent,#173653ed); text-shadow:0 1px #173653; }
.journey-preview small { color:#ffe28c; font-size:10px; }
#sheet .journey-preview h3 { color:white; font-size:21px; margin:3px 0; }
.journey-preview div>span { color:#ddf5ff; font:11px/1.3 sans-serif; }
#sheet .journey-chapter-title { text-align:center; margin:13px 0 2px; font-size:15px; }
.journey-trail { display:grid; grid-template-columns:1fr 1fr; position:relative; gap:2px 12px; padding:5px 7px 10px; }
.journey-trail::before { content:''; position:absolute; inset:35px 20%; border:4px dashed #86bfd1; border-block:0; border-radius:40%; opacity:.55; pointer-events:none; }
.journey-stop { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; padding:6px 0; color:white; background:none; border:0; }
.journey-medallion { position:relative; display:grid; place-items:center; width:53px; height:53px; border-radius:50%; border:3px solid #b4d5e3; background:linear-gradient(145deg,#7ca5bf,#376d98); box-shadow:0 4px #103655,inset 0 2px #d5eeff; }
.journey-medallion b { color:#effaff; font:900 29px/1 'Barlow Condensed',sans-serif; text-shadow:0 2px #244760; }
.journey-medallion i { position:absolute; right:-5px; bottom:-4px; display:grid; place-items:center; width:22px; height:22px; border:2px solid #17435b; border-radius:50%; background:#184966; font:13px/1 sans-serif; color:#a6c3d1; font-style:normal; }
.journey-stop>strong { position:relative; margin-top:7px; max-width:100%; padding:3px 7px; border-radius:5px; background:#123e61; color:#edf8ff; font-size:12px; font-weight:400; white-space:nowrap; }
.journey-stop>small { font-size:9px; color:#d2ebf5; margin-top:3px; }
.journey-stop.cleared .journey-medallion { border-color:#ffe7a0; background:linear-gradient(145deg,#fff0a6,#d99a35); box-shadow:0 4px #8b6225,inset 0 2px #fff7d8; }
.journey-stop.cleared .journey-medallion b { color:#78501d; text-shadow:0 1px #ffe8a1; }
.journey-stop.cleared i { background:#d5972b; color:#fff1ad; border-color:#8b6225; }
.journey-stop.cleared>small { color:#ffe493; }
.journey-stop.open .journey-medallion { background:linear-gradient(#8de7d0,#27a99f); border-color:#c8fff0; }
.journey-stop.open i { background:#2baea0; color:#fff4ac; }
.journey-stop.locked { opacity:.53; }
.journey-stop.selected .journey-medallion::before { content:''; position:absolute; inset:-7px; border:2px solid #9bdfe9; border-radius:50%; box-shadow:0 0 8px #73cddd55; }
.journey-stop.selected>strong { color:#ffe99e; }
.journey-depart { position:sticky; bottom:-8px; padding:10px 0 12px; background:linear-gradient(#174d7800,#174d78 15%); z-index:2; }
.journey-depart .primary { width:100%; min-height:46px; padding:9px; font-size:18px; }
.journey-depart .primary:disabled { color:#c2d8e6; background:#547b95; box-shadow:0 3px #123957; }
.course-victory { position:relative; height:104px; display:grid; justify-items:center; align-content:start; pointer-events:none; margin-top:-9px; }
.victory-rays { position:absolute; inset:-12px 22%; background:repeating-conic-gradient(from 10deg,#ffe79442 0deg 15deg,transparent 15deg 30deg); mask-image:radial-gradient(ellipse,#000,transparent 70%); }
.victory-medal { position:relative; display:grid; place-items:center; width:70px; height:70px; border:5px double #fff5b0; border-radius:50%; background:linear-gradient(135deg,#ffe88e,#e8a52f); color:#fff5bf; font:58px/1 sans-serif; text-shadow:0 3px #a66b25; box-shadow:0 5px #8c5926,0 7px 0 3px #153b61,inset 0 0 0 3px #d6a03b; animation:medal-land .55s cubic-bezier(.2,.8,.3,1.3) both; }
.course-victory>span { position:relative; margin-top:11px; color:#ffe794; letter-spacing:1.5px; font:800 12px/1 'Barlow Condensed',sans-serif; }
.victory-sparkles { position:absolute; inset:0; overflow:hidden; }
.victory-sparkles i { position:absolute; left:calc(var(--n)*8% + 2%); top:60%; width:5px; height:9px; border-radius:2px; background:#ffdf76; transform:rotate(calc(var(--n)*31deg)); animation:clear-spark .95s ease-out both; animation-delay:calc(var(--n)*25ms); }
.victory-sparkles i:nth-child(3n) { background:#b8fff0; }
.is-course-clear .result-ribbon { font-size:22px; margin:0 auto 8px; padding:4px 19px; }
.is-course-clear h2 { font-size:23px; margin:8px 0 0; }
.is-course-clear .result-distance { font-size:52px; margin:0 0 8px; -webkit-text-stroke-width:3px; }
.is-course-clear .result-reason { margin:3px 0; }
.is-course-clear .result-loot { padding:6px; margin-bottom:7px; }
.is-course-clear .result-loot>div { font-size:36px; }
.is-course-clear .result-loot img { width:32px; height:35px; }
.is-course-clear .result-loot>span { font-size:12px; }
.is-course-clear .result-comparison { margin:5px 0 8px; font-size:11px; }
.course-unlock { position:relative; display:flex; align-items:center; gap:9px; padding:7px; margin:9px 0 12px; border:1px solid #77b8d3; border-radius:13px; background:#164b72; box-shadow:0 3px #163957; text-align:left; }
.course-unlock>.course-scenery { flex:0 0 83px; width:83px; height:60px; border-radius:7px; }
.course-unlock>div { display:grid; gap:4px; min-width:0; }
.course-unlock small { font-size:10px; color:#ffe08d; }
.course-unlock strong { font-size:17px; font-weight:400; color:#fff8d7; }
.course-unlock div>span { font:10px/1.3 sans-serif; color:#d1eafb; }
.course-unlock>b { margin-left:auto; color:#ffdf83; font:30px/1 sans-serif; }
.is-course-clear .reward-ad { min-height:45px; }
.is-course-clear .reward-ad strong { font-size:18px; }
.is-course-clear .reward-ad b { font-size:22px; padding:3px; }
.is-course-clear .continue-button { min-height:49px; padding:9px; font-size:22px; }
.is-course-clear p#ad-status { margin:9px 0 4px; min-height:24px; }
.result-map-button { display:flex; justify-content:center; align-items:center; gap:8px; width:100%; color:#d9f4ff; background:#205c89; border:1px solid #8ebbd6; border-radius:8px; min-height:32px; margin-top:10px; font-size:13px; }
.result-map-button span { color:#ffe794; }
.journey-victory .victory-medal { color:#80501c; background:linear-gradient(#fff6bd,#f3bd40); font-size:50px; }
.journey-ending { display:grid; gap:5px; padding:11px 5px; margin:8px 0 12px; background:linear-gradient(135deg,#214c78,#595083); border:1px solid #9aa8d0; border-radius:14px; }
.journey-ending strong { color:#fff0ad; font-size:15px; font-weight:400; }
.journey-ending span { color:#e6e7ff; font-size:11px; }
.journey-ending b { color:#ffe08d; font:900 24px/1.2 'Barlow Condensed',sans-serif; }
.course-arrival { position:absolute; z-index:15; top:29%; left:50%; transform:translateX(-50%); width:min(78%,300px); border:2px solid #a0d5e9; border-radius:18px; background:#1b567e; box-shadow:0 6px #143859,0 10px 32px #102d6380; overflow:hidden; text-align:center; pointer-events:none; animation:arrival-in .4s ease-out both; }
.course-arrival>.course-scenery { height:100px; border-radius:0; }
.course-arrival>small { display:block; margin:9px 0 5px; color:#ffe590; font:800 13px/1 'Barlow Condensed',sans-serif; letter-spacing:1px; }
.course-arrival>strong { display:block; color:#fff8dc; font-size:25px; font-weight:400; }
.course-arrival>span { display:block; color:#d4effb; font-size:11px; padding:6px 3px 12px; }
.has-course-arrival #launch-guide { visibility:hidden; }
@keyframes medal-land { from{transform:scale(.35) rotate(-18deg);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes clear-spark { from{opacity:0;translate:0 10px} 25%{opacity:1} to{opacity:0;translate:0 -70px;rotate:120deg} }
@keyframes arrival-in { from{opacity:0;translate:0 15px} to{opacity:1;translate:0 0} }
@media(max-height:700px) {
 .home-best { top:calc(249px + var(--safe-top)); }
 #game[data-host="onestore"] .home-best { top:calc(209px + var(--safe-top)); }
 #sheet[data-kind="courses"] { padding-inline:12px; }
 .journey-preview { height:98px; }
 .journey-trail { gap:0 8px; }
 .journey-stop { padding:5px 0; }
 .journey-medallion { width:47px; height:47px; }
 .course-victory { height:86px; }
 .victory-medal { width:57px;height:57px;font-size:44px; }
 .course-victory>span { margin-top:10px; }
 .is-course-clear .result-ribbon { font-size:19px; }
 .is-course-clear .result-distance { font-size:42px; }
 .is-course-clear .result-loot>div { font-size:31px; }
 .course-unlock { margin:7px 0 9px; }
 .course-unlock>.course-scenery { height:48px;width:66px;flex-basis:66px; }
}
@media(min-height:701px) { #game[data-host="onestore"] .home-best { top:calc(209px + var(--safe-top)); } }
@media(prefers-reduced-motion:reduce) {
 .victory-medal,.victory-sparkles i,.course-arrival { animation:none; }
 .victory-sparkles { display:none; }
}
#courses-btn:active:not(:disabled) { transform:translateX(-50%) rotate(-2deg) scale(.98); }
.is-course-clear .result-reason,.is-course-clear .result-comparison,.is-course-clear .continue-hint { display:none; }
#sheet[data-kind="courses"],#sheet[data-kind="courses"] button { touch-action:pan-y; }

/* One sign, one instruction and one clear reward hierarchy. */
#courses-btn { flex-direction:column; gap:8px; padding:10px 13px 8px; border-radius:13px; }
#courses-btn .course-sign-main { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; color:#fff; font-family:"Jua",sans-serif; }
#stage-tag { display:grid; place-items:center; flex:0 0 27px; height:27px; border-radius:8px; background:#143c61; color:#ffe594; font:800 18px/1 "Barlow Condensed",sans-serif; }
#courses-btn h2 { font-size:18px; }
#courses-btn .course-target { margin-left:auto; white-space:nowrap; font:600 13px/1 sans-serif; }
.course-sign-footer { display:flex; justify-content:space-between; align-items:center; width:100%; padding-top:7px; border-top:1px solid #c5efff40; }
#courses-btn .course-sign-footer .home-best { position:static; transform:none; font:12px/1.3 "Jua",sans-serif; text-shadow:none; color:#e4f5ff; }
#courses-btn .home-best b { margin-left:3px; color:#fff4bd; font:800 15px/1 "Barlow Condensed",sans-serif; }
#courses-btn #course-map-hint { position:static; padding:0; border:0; background:none; border-radius:0; font-size:12px; line-height:1.3; color:#fff0a4; }

.launch-prompt { position:absolute; top:calc(49dvh - 110px - var(--safe-top)); left:50%; transform:translateX(-50%); width:220px; pointer-events:none; }
.launch-prompt .pull-demo { position:relative; top:auto; left:auto; transform:none; margin:auto; width:80px; height:112px; }
.launch-prompt .pull-demo i { left:39px; height:86px; }
.launch-prompt .pull-demo svg { left:17px; }
.launch-prompt>strong { display:inline-block; padding:7px 14px; border:2px solid #8d6227; border-radius:14px; background:#ffe48b; color:#65461f; font-size:17px; font-weight:400; text-shadow:none; box-shadow:0 3px #875c2a; white-space:nowrap; }
.launch-guide[data-tutorial="false"] .launch-prompt { position:static; transform:none; margin:12px auto 0; }
.launch-guide[data-tutorial="false"] .launch-prompt>strong { padding:5px 12px; font-size:15px; }
.is-pulling .launch-prompt { display:none; }

#sheet[data-kind="items"] { display:flex; flex-direction:column; padding:18px; overflow:hidden; max-height:calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom)); }
#sheet[data-kind="items"] .sheet-head { flex-shrink:0; background:transparent; margin-bottom:8px; }
.sheet .items-intro { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; padding:0 3px; color:#e7f7ff; font-size:14px; }
.items-intro>b { color:#ffe99a; font:800 27px/1 "Barlow Condensed",sans-serif; }
.items-intro small { font:400 15px/1 "Jua",sans-serif; color:#d9f1ff; }
.run-items-list { flex:1 1 auto; min-height:0; gap:12px; grid-auto-rows:max-content; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:2px 4px 6px; margin-inline:-4px; scrollbar-width:thin; }
.run-item-card { grid-template-columns:76px minmax(0,1fr); gap:5px 12px; padding:12px; border-radius:16px; border:1px solid #99d5e7; background:#b8e7f2; box-shadow:0 3px #24566b55; }
.run-item-art { grid-row:1 / 3; }
.run-item-art img { width:76px; height:83px; filter:drop-shadow(0 4px 2px #28516c33); }
.run-item-art b { right:2px; bottom:1px; padding:2px 7px; font-size:16px; }
.sheet .run-item-copy h3 { font-size:20px; margin:1px 0 5px; }
.sheet .run-item-copy p { margin:0 0 4px; font:600 13px/1.4 sans-serif; color:#24516d; }
.item-actions { grid-column:2; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.item-actions.no-ad { grid-template-columns:1fr; }
.item-actions .item-equip,.item-actions .item-ad { grid-column:auto; min-height:42px; padding:5px; font-size:13px; }
.item-ad[hidden],.reward-ad[hidden],#ad-status[hidden] { display:none; }
.sheet .items-hint { font:12px/1.5 sans-serif; margin:15px 0 12px; color:#e3f6ff; }
.items-done { flex-shrink:0; min-height:49px; padding:10px; }

#sheet[data-kind="result"] { padding:25px 21px 18px; }
.result h2 { font-size:31px; margin:7px 12px 9px; text-shadow:0 3px #24577d; }
.result .result-reason { font:12px/1.4 sans-serif; color:#e5f5ff; }
.result-distance { font-size:84px; margin:8px 0 14px; }
.result-loot { border:0; background:transparent; box-shadow:none; padding:9px 0; margin:0 0 6px; }
.result-loot>span { font:12px/1.4 sans-serif; color:#e5f5ff; }
.result-loot>div { font-size:51px; gap:9px; }
.result-loot img { width:39px; height:43px; }
.result-comparison { font-size:13px; margin:5px 0 16px; }
.result .reward-ad { min-height:47px; border:2px solid #a2ddf6; border-radius:13px; background:linear-gradient(#337fb0,#246391); box-shadow:0 3px #193e62,inset 0 2px #ffffff22; color:#fff4c1; }
.result .reward-ad strong { font-size:18px; text-shadow:none; }
.result .ad-play { display:grid; place-items:center; width:27px; height:25px; border-radius:7px; color:#644619; background:#ffe28b; font-size:13px; }
.result p#ad-status { min-height:0; margin:9px 0 12px; font:12px/1.4 sans-serif; }
.result .continue-button { margin-top:12px; width:100%; }
.course-victory { height:84px; margin-top:0; }
.is-course-clear h2 { font-size:28px; margin:7px 0 9px; }
.is-course-clear .result-distance { font-size:59px; margin:0 0 4px; }
.is-course-clear .result-loot { padding:6px 0; margin:0 0 7px; }
.is-course-clear .result-loot>div { font-size:43px; }
.is-course-clear .result-loot img { width:35px; height:38px; }
.result-map-button { background:none; border:0; margin-top:8px; font-size:13px; min-height:34px; }

#sheet[data-kind="settings"] { max-width:350px; padding:20px; }
.settings-row { margin:7px 0 18px; }
.controls-help { margin:0 0 12px; border-bottom:1px solid #c2e8ff55; }
.controls-help summary { list-style:none; display:flex; align-items:center; gap:10px; min-height:53px; cursor:pointer; font-size:17px; }
.controls-help summary::-webkit-details-marker { display:none; }
.controls-help summary>span { color:#ffe89c; font-size:25px; }
.controls-help summary i { margin-left:auto; font-style:normal; transition:transform .15s; }
.controls-help[open] summary i { transform:rotate(180deg); }
.controls-help .touch-help { display:grid; grid-template-columns:1fr; gap:0; margin:0 0 12px; }
.controls-help .touch-help>div { display:flex; justify-items:normal; align-items:center; gap:12px; padding:7px 3px; background:none; border:0; border-radius:0; box-shadow:none; }
.controls-help .touch-help b { flex:0 0 31px; width:31px; height:31px; font-size:21px; }
.controls-help .touch-help span { color:#f0faff; font:14px/1.5 sans-serif; text-align:left; }
#sheet[data-kind="settings"] .info-button { display:flex; justify-content:space-between; align-items:center; min-height:45px; padding:8px 0; margin:0; background:none; border:0; box-shadow:none; color:#dff4ff; font-size:15px; }
#sheet[data-kind="settings"] .info-button>span { font-size:25px; }

@media(max-height:700px) {
 #courses-btn { padding:7px 10px; gap:6px; }
 #courses-btn h2 { font-size:16px; }
 .course-sign-footer { padding-top:5px; }
 .launch-prompt { top:calc(47dvh - 136px - var(--safe-top)); }
 .launch-prompt .pull-demo { height:77px; }
 .launch-prompt .pull-demo i { height:60px; }
 .launch-prompt>strong { padding:5px 10px; font-size:15px; }
 #sheet[data-kind="items"] { padding:14px; }
 .sheet .items-intro { margin-bottom:10px; font-size:13px; }
 .run-items-list { gap:9px; }
 .run-item-card { grid-template-columns:59px minmax(0,1fr); padding:9px; gap:4px 9px; }
 .run-item-art img { width:60px; height:72px; }
 .sheet .run-item-copy h3 { font-size:18px; }
 .sheet .run-item-copy p { font-size:12px; }
 .item-actions .item-equip,.item-actions .item-ad { min-height:44px; font-size:12px; }
 .sheet .items-hint { font-size:11px; margin:11px 0; }
 #sheet[data-kind="result"] { padding:21px 17px 14px; }
 .result h2 { font-size:27px; margin-top:6px; }
 .result-distance { font-size:68px; margin:5px 0 8px; }
 .result-loot>div { font-size:42px; }
 .result-loot img { width:32px; height:35px; }
 .result-comparison { margin:4px 0 12px; }
 .result .continue-button { margin-top:9px; min-height:48px; padding:10px; font-size:21px; }
 .course-victory { height:65px; }
 .is-course-clear h2 { font-size:25px; }
 .is-course-clear .result-distance { font-size:48px; }
 .is-course-clear .result-loot>div { font-size:37px; }
}
@media(prefers-reduced-motion:reduce) { .controls-help summary i { transition:none; } }

/* Keep the next action reachable while optional result details scroll. */
#sheet[data-kind="result"] { display:flex; flex-direction:column; overflow:hidden; }
#sheet[data-kind="result"] .result { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.result-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; margin-bottom:10px; }
.result .result-header h2 { min-width:0; margin:0; font-size:27px; text-align:left; line-height:1.2; }
.result-header .result-close { position:static; flex:0 0 44px; }
.result-content { min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; padding:3px 4px 7px; margin-inline:-4px; scrollbar-width:thin; }
.result-content:focus-visible { outline:2px solid #80e3e6; outline-offset:-2px; border-radius:10px; }
.result-content,.run-items-list { scrollbar-color:#a3d9e8 #184a6b55; }
.result-footer { flex-shrink:0; padding-top:7px; border-top:1px solid #addbf033; }
.result .result-footer .continue-button { margin-top:0; }
.result-footer .result-map-button { min-height:44px; margin-top:3px; }
.result-loot { --reward-max:51px; }
.result-loot>div { min-width:0; font-size:clamp(20px,calc(400px / var(--reward-length,5)),var(--reward-max)); }
.result-loot img { flex-shrink:0; }
.is-course-clear .result-loot { --reward-max:43px; }
.is-course-clear .result-loot>div { font-size:clamp(20px,calc(400px / var(--reward-length,5)),var(--reward-max)); }
@media(max-height:700px) {
 #sheet[data-kind="result"] { padding:14px; }
 .result .result-header h2 { font-size:24px; }
 .result-header { margin-bottom:7px; }
 .result-content { padding-top:0; }
 .result-loot { --reward-max:42px; }
 .is-course-clear .result-loot { --reward-max:37px; }
 .result .result-footer .continue-button { min-height:48px; }
 .result-footer .result-map-button { font-size:12px; min-height:44px; }
}

/* The SDK top inset includes native chrome. Keep its raw value on :root,
   but position game overlays in CSS pixels with room for the corner menu.
   This does not move the canvas or change camera/physics coordinates. */
#game[data-host="onestore"] {
  --safe-top: max(env(safe-area-inset-top, 0px), 40px);
}