:root {
  --bg: #17110d;
  --panel: rgba(34, 24, 17, 0.94);
  --panel-2: rgba(52, 37, 26, 0.95);
  --line: #4a3726;
  --text: #fff6ea;
  --muted: #d6c2a8;
  --accent: #ff8a3d;
  --accent-2: #ffd35a;
  --good: #8fe070;
  --bad: #ff6a55;
  --radius: 14px;
  --header-h: 48px;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out or the home indicator. What the player reads or touches stays
     inside them. The tests set these to try insets the browsers here lack. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone. */
  --t-min: 14px;
  /* The HUD's distance from the stage's sides: 24 px on a touch screen, clear
     of a phone's rounded corners in full screen. */
  --hud-x: 12px;
  color-scheme: dark;
}

/* A tablet: a touch screen at least 600 px each way. */
@media (pointer: coarse) {
  :root {
    --t-min: 15px;
    --hud-x: 24px;
  }
}

/* A phone: a touch screen under 600 px one way or the other. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --t-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent-2);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.4em;
  border: 1px solid rgba(255, 246, 234, 0.35);
  border-bottom-width: 2px;
  border-radius: 5px;
  font: 700 0.82em/1.5 system-ui, sans-serif;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
}

.game-root kbd {
  font-size: max(var(--t-min), 0.82em);
}

/* Hints follow the last input used (main.js, html.nr-touch): a touch talks
   about swipes and hides the key names, a key or the mouse names the keys. */
.nr-touch .k-only,
html:not(.nr-touch) .t-only {
  display: none;
}

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

/* The page keeps the game inside the side insets (a phone held sideways);
   the site header takes the top one. */
.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

/* ---------- Game area ---------- */

/* No scrolling, zooming, selection or long-press menu mid-play
   (docs/PLATFORMS.md): the canvas takes no touch gestures, the menus scroll
   their own list (.screen), and main.js prevents Safari's pinch and the
   context menu over the game.

   The game draws edge to edge; what the player reads or touches keeps inside
   the insets that reach into the game (--in-*): on the page only the bottom
   one (the home indicator of a home-screen app), in full screen all four.
   --clear-top keeps the top middle clear for the site's "Leave full screen",
   and the HUD reserves that middle spot at every width. */
.game-root {
  --in-t: 0px;
  --in-r: 0px;
  --in-b: var(--safe-b);
  --in-l: 0px;
  --clear-top: 0px;
  --band: 0px;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  height: calc(100vh - var(--header-h) - var(--safe-t) - 16px);
  height: calc(100dvh - var(--header-h) - var(--safe-t) - 16px);
  max-height: 860px;
  min-height: 240px;
  background: #0d0a08;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Full screen through the site's button: the game fills the screen edge to
   edge. The sides take the larger inset both ways (a phone held sideways has
   its camera on one side), so the stage's middle is the screen's, where the
   site puts "Leave full screen" (44 px, 8 px from the top or under a notch). */
.game-root:fullscreen {
  --safe-x: max(var(--safe-l), var(--safe-r));
  --in-t: var(--safe-t);
  --in-r: var(--safe-x);
  --in-l: var(--safe-x);
  --clear-top: calc(max(8px, var(--safe-t)) + 52px);
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.game-root:-webkit-full-screen {
  --safe-x: max(var(--safe-l), var(--safe-r));
  --in-t: var(--safe-t);
  --in-r: var(--safe-x);
  --in-l: var(--safe-x);
  --clear-top: calc(max(8px, var(--safe-t)) + 52px);
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
}

.stage {
  position: absolute;
  inset: 0;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- HUD ---------- */

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: calc(var(--in-t) + 10px + var(--band)) calc(var(--in-r) + var(--hud-x)) 0 calc(var(--in-l) + var(--hud-x));
  pointer-events: none;
  z-index: 3;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 0 8px rgba(0, 0, 0, 0.35);
}

/* Keep the top centre free for the site's 44 px exit button. */
.game-root:fullscreen .hud-left,
.game-root:fullscreen .hud-right,
.game-root:-webkit-full-screen .hud-left,
.game-root:-webkit-full-screen .hud-right {
  max-width: calc(50% - 30px - var(--hud-x) - var(--in-l));
}

/* On an upright phone the pause button takes the top right corner. The
   acorns sit just below it, where even a six-digit count can cross the
   centre without touching the exit button. */
@media (max-width: 599px) {
  .game-root:fullscreen .hud-right,
  .game-root:-webkit-full-screen .hud-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .game-root:fullscreen #btn-pause,
  .game-root:-webkit-full-screen #btn-pause {
    order: -1;
  }
}

.hud-left,
.hud-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The left half gives way: the power-ups wrap rather than run under the
   hawk alert in the middle. */
.hud-left {
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
}

.hud-right {
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* The distance is the main number: there is no score. */
.hud-dist {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 900;
  font-size: clamp(22px, 4.2vmin, 34px);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hud-unit {
  font-size: max(var(--t-min), 0.6em);
  font-weight: 800;
  color: #fff1d6;
}

.hud-acorns {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: clamp(18px, 3.4vmin, 26px);
  padding: 3px 12px 3px 8px;
  border-radius: 999px;
  background: rgba(20, 12, 6, 0.45);
  white-space: nowrap;
}

/* What the next acorn adds: one more each kilometre, and twice that with Twin
   Acorns. A tag hung from the counter's lower right, so a long count keeps
   its width; it pops when it changes. */
.hud-worth {
  position: absolute;
  right: 6px;
  top: calc(100% - 7px);
  font-size: max(var(--t-min), 0.6em);
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd35a, #f0a020);
  color: #3a1d02;
  text-shadow: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  transform-origin: 70% 30%;
}

.hud-worth.pop {
  animation: worth-pop 0.7s ease-out;
}

@keyframes worth-pop {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5);
    box-shadow:
      0 0 0 4px rgba(255, 211, 90, 0.55),
      0 2px 0 rgba(0, 0, 0, 0.35);
  }
  100% {
    transform: scale(1);
  }
}

/* Worth changes record the pickup result, including in calm mode. */

/* Twin Acorns (#1062): while it lasts the counter wears a badge of a pair of
   acorns on one stalk over its acorn, taking no width; its tag, the doubled
   value, pops as each pair arrives (main.js). */
/* Over the acorn, its right edge just past the acorn's, clear of the count. */
.hud-twin {
  position: absolute;
  left: calc(9px + 0.25em);
  top: 50%;
  width: 1.42em;
  height: 1.42em;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cpath d='M30 2c-1 4 0 8 0 11M30 13l-10 7M30 13l10 7' stroke='%233b2410' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cg transform='rotate(14 20 20) translate(6 17) scale(0.7)'%3E%3Cpath d='M4 17C4 9 11 5 20 5s16 4 16 12z' fill='%23704623' stroke='%233b2410' stroke-width='2.4'/%3E%3Cpath d='M6 17h28c0 14-7 23-14 26C13 40 6 31 6 17z' fill='%23c98a42' stroke='%236b3f17' stroke-width='2.4'/%3E%3Cpath d='M12 22c0 6 2 11 5 14' stroke='%23f2c890' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='rotate(-14 40 20) translate(26 17) scale(0.7)'%3E%3Cpath d='M4 17C4 9 11 5 20 5s16 4 16 12z' fill='%23704623' stroke='%233b2410' stroke-width='2.4'/%3E%3Cpath d='M6 17h28c0 14-7 23-14 26C13 40 6 31 6 17z' fill='%23c98a42' stroke='%236b3f17' stroke-width='2.4'/%3E%3Cpath d='M12 22c0 6 2 11 5 14' stroke='%23f2c890' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center 46% / 86% no-repeat,
    radial-gradient(circle at 35% 30%, #fff3c4, #ffcf3a 55%, #d68a10);
  box-shadow:
    0 0 0 2px rgba(255, 246, 214, 0.9),
    0 2px 0 rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.18s ease-in;
  pointer-events: none;
}

.hud-acorns.twin .hud-twin {
  transform: translate(-50%, -50%) scale(1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .hud-twin {
    transition: none;
  }
}

.ico {
  display: inline-block;
  width: 1em;
  height: 1.15em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -0.2em;
}

.ico-acorn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Cpath d='M4 17C4 9 11 5 20 5s16 4 16 12z' fill='%23704623' stroke='%233b2410' stroke-width='2'/%3E%3Cpath d='M6 17h28c0 14-7 23-14 26C13 40 6 31 6 17z' fill='%23c98a42' stroke='%236b3f17' stroke-width='2'/%3E%3Cpath d='M20 5V1' stroke='%233b2410' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12 22c0 6 2 11 5 14' stroke='%23f2c890' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ico-golden {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Cpath d='M4 17C4 9 11 5 20 5s16 4 16 12z' fill='%23b8861b' stroke='%236b4a05' stroke-width='2'/%3E%3Cpath d='M6 17h28c0 14-7 23-14 26C13 40 6 31 6 17z' fill='%23ffd23f' stroke='%23a07400' stroke-width='2'/%3E%3Cpath d='M20 5V1' stroke='%236b4a05' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12 22c0 6 2 11 5 14' stroke='%23fff6c8' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 12, 6, 0.5);
  color: var(--text);
  cursor: pointer;
}

.icon-btn svg {
  fill: currentColor;
}

.icon-btn:hover {
  background: rgba(50, 30, 16, 0.7);
}

.hud-powers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  margin-top: 4px;
}

.hud-power {
  position: relative;
  width: 38px;
  height: 38px;
}

.hud-power canvas {
  width: 38px;
  height: 38px;
}

.hud-power svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.hud-power circle {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}

/* ---------- In-run overlays ---------- */

.toasts {
  position: absolute;
  top: max(calc(18% + var(--band)), var(--clear-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 4;
  width: min(92%, 440px);
}

/* Clear the lesson even at its 1.06 pulse peak and while an old toast moves
   8px up as it fades: 3% of the lesson's height plus 16px leaves an 8px gap. */
.stage.teaching .toasts {
  top: calc(max(calc(19% + var(--band)), var(--clear-top)) + var(--teach-h, 80px) * 1.03 + 16px);
}

.toast {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(24, 14, 6, 0.78);
  border: 1px solid rgba(255, 211, 90, 0.55);
  color: #fff3d0;
  font-weight: 800;
  font-size: clamp(var(--t-min), 2.4vmin, 17px);
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  animation: toast-in 0.25s ease-out;
}

.toast.big {
  font-size: clamp(18px, 3.6vmin, 26px);
  padding: 9px 20px;
  border-color: rgba(255, 138, 61, 0.8);
}

/* A second line: what an acorn is worth from a gate on. */
.toast small {
  display: block;
  font-size: max(var(--t-min), 0.62em);
  font-weight: 800;
  color: var(--accent-2);
}

.toast.two {
  border-radius: 18px;
}

.toast.out {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.4s,
    transform 0.4s;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
}

.teach {
  position: absolute;
  left: 50%;
  top: max(calc(19% + var(--band)), var(--clear-top));
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(24, 14, 6, 0.8);
  border: 2px solid var(--accent-2);
  font-weight: 900;
  font-size: clamp(16px, 3.4vmin, 24px);
  text-align: center;
  pointer-events: none;
  z-index: 4;
  animation: pulse 0.9s ease-in-out infinite alternate;
  white-space: nowrap;
}

.teach small {
  display: block;
  font-size: max(var(--t-min), 0.62em);
  font-weight: 700;
  color: var(--muted);
}

/* A dot that slides the way to swipe. */
.swipe-hint {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  margin: 6px auto 0;
}

.swipe-hint::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 12px rgba(255, 211, 90, 0.8);
  animation: swipe-x 0.9s ease-in infinite;
  --dx: 0px;
  --dy: 0px;
}

.swipe-hint.left::before {
  --dx: -26px;
}

.swipe-hint.right::before {
  --dx: 26px;
}

.swipe-hint.up::before {
  --dy: -26px;
}

.swipe-hint.down::before {
  --dy: 26px;
}

@keyframes swipe-x {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy));
    opacity: 0;
  }
}

@keyframes pulse {
  to {
    transform: translateX(-50%) scale(1.06);
  }
}

.hawk-alert {
  position: absolute;
  top: max(calc(16% + var(--band)), var(--clear-top), var(--hud-b, 0px));
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8322a;
  color: #fff;
  font-weight: 900;
  font-size: 30px;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.85),
    0 6px 16px rgba(0, 0, 0, 0.4);
  z-index: 4;
  pointer-events: none;
  animation: blink 0.25s steps(2) infinite;
}

@keyframes blink {
  50% {
    opacity: 0.55;
  }
}

/* A play control: 16 px inside the bottom inset, clear of the home gesture. */
.headstart-btn {
  position: absolute;
  left: 50%;
  bottom: max(6%, calc(var(--in-b) + 16px));
  transform: translateX(-50%);
  z-index: 5;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid #bdf0a0;
  background: linear-gradient(180deg, #62c254, #2e8a3a);
  color: #fff;
  font-weight: 900;
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.headstart-btn kbd {
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Screens (menus, results) ---------- */

/* The menus: a list that scrolls inside the game (and not the page behind it
   once it reaches an end), kept inside the insets, with buttons 16 px inside
   the side and bottom ones, and in full screen under "Leave full screen". */
.screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  overflow: auto;
  padding: max(14px, calc(var(--in-t) + 14px), var(--clear-top)) max(14px, calc(var(--in-r) + 16px)) max(14px, calc(var(--in-b) + 16px)) max(14px, calc(var(--in-l) + 16px));
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  overscroll-behavior: contain;
}

.screen.show {
  display: flex;
}

.screen.dim {
  background: rgba(14, 9, 6, 0.72);
}

.screen.clear {
  background: linear-gradient(180deg, rgba(14, 9, 6, 0.55), rgba(14, 9, 6, 0.1) 30%, rgba(14, 9, 6, 0.15) 60%, rgba(14, 9, 6, 0.7));
}

.panel {
  --pad: 18px;
  width: min(560px, 100%);
  margin: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--pad);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.panel.wide {
  width: min(760px, 100%);
}

.panel h2 {
  margin: 0 0 10px;
  font-size: clamp(20px, 3.6vmin, 28px);
}

.panel h3 {
  margin: 16px 0 8px;
  font-size: max(15px, var(--t-min));
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.panel p {
  margin: 6px 0;
  color: var(--muted);
  line-height: 1.45;
}

.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.row.center {
  justify-content: center;
}

.row.split {
  justify-content: space-between;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  border-color: #7a5a3e;
  background: rgba(70, 50, 34, 0.95);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.headstart-btn:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-primary {
  background: linear-gradient(180deg, #ffa24f, #f06a25);
  border-color: #ffb877;
  color: #2b1103;
  font-size: 18px;
  min-height: 52px;
  padding: 12px 26px;
  box-shadow: 0 4px 0 #a8420f;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #ffb266, #f57a36);
  border-color: #ffd0a0;
}

.btn-daily {
  background: linear-gradient(180deg, #5a7bd8, #3a53a8);
  border-color: #8aa8ff;
  color: #fff;
}

.btn-daily:hover {
  background: linear-gradient(180deg, #6a8be8, #4a63b8);
}

/* Thumb-sized on every screen: 44 px, like every other button. */
.btn-small {
  min-height: 44px;
  padding: 8px 14px;
  font-size: max(14px, var(--t-min));
}

.btn kbd {
  font-size: max(var(--t-min), 0.75em);
  opacity: 0.8;
}

/* A panel's last row of buttons (Resume, Run again, Back) stays in view at
   the foot of a menu that scrolls, as on a phone held sideways. */
.panel > .actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: 12px var(--pad) var(--pad);
  border-radius: 0 0 17px 17px;
  /* Opaque, so a list scrolled under it doesn't show through. */
  background: rgb(34, 24, 17);
  box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, 0.6);
}

/* Title */

.title-wrap {
  width: min(560px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.title-info,
.title-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.logo {
  text-align: center;
  font-weight: 900;
  font-size: clamp(38px, 9vmin, 76px);
  line-height: 0.95;
  letter-spacing: 1px;
  color: #ffe2b8;
  text-shadow:
    0 4px 0 #8a3a12,
    0 8px 18px rgba(0, 0, 0, 0.55);
  transform: rotate(-2deg);
  margin: 4px 0 2px;
}

.logo span {
  color: #ff8a3d;
}

.balances {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 12, 6, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
}

.missions-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  margin-bottom: 6px;
}

/* The set's number, with the missions. */
.set-badge {
  font-size: max(var(--t-min), 14px);
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb347, #ff7a2f);
  color: #3a1602;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.mission {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 4px 8px;
  align-items: center;
  padding: 5px 0;
  font-size: max(14px, var(--t-min));
}

.mission .tick {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #7a5a3e;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.mission.done .tick {
  background: var(--good);
  border-color: var(--good);
  color: #1b3a10;
}

.mission.done .m-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(143, 224, 112, 0.7);
}

.mission .m-num {
  font-size: var(--t-min);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bar {
  grid-column: 2 / 4;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb347, #ff7a2f);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.menu-grid .btn {
  flex-direction: column;
  gap: 2px;
  font-size: max(14px, var(--t-min));
  padding: 8px 4px;
}

.hint {
  text-align: center;
  font-size: var(--t-min);
  color: var(--muted);
}

/* Before the game has loaded (index.html): its name at once, over the same
   light as the title screen, and a quiet note. The title screen replaces it. */
.screen.boot {
  background: radial-gradient(120% 80% at 50% 30%, #3a2a1c 0%, #1b1410 55%, #0d0a08 100%);
}

.boot-note {
  margin: 4px 0 0;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-size: max(14px, var(--t-min));
}

.boot-dots::after {
  content: '...';
  display: inline-block;
  width: 1.4em;
  text-align: left;
  animation: boot-dots 1.2s steps(4, end) infinite;
  overflow: hidden;
  vertical-align: bottom;
}

@keyframes boot-dots {
  from {
    width: 0;
  }
  to {
    width: 1.4em;
  }
}

.best-line {
  text-align: center;
  font-weight: 700;
  color: #fff0d8;
  font-size: max(14px, var(--t-min));
}

/* Results */

.result-cause {
  text-align: center;
  font-weight: 900;
  font-size: clamp(20px, 4vmin, 28px);
  margin: 0 0 4px;
}

.big-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.big-stats div {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
}

.big-stats b {
  display: block;
  font-size: clamp(20px, 4.4vmin, 30px);
  font-variant-numeric: tabular-nums;
}

.big-stats small {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-min);
  letter-spacing: 1px;
}

/* A run's results: the distance first and biggest, then the acorns. */
.result-stats {
  grid-template-columns: 3fr 2fr;
}

.result-stats .r-main b {
  font-size: clamp(26px, 6vmin, 40px);
}

.banner {
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 179, 71, 0.2), rgba(255, 122, 47, 0.35), rgba(255, 179, 71, 0.2));
  color: #ffe0a0;
  margin: 6px 0;
}

@keyframes pop {
  50% {
    transform: scale(1.12);
  }
}

/* Shop, runners, trophies */

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tabs .btn[aria-pressed='true'] {
  border-color: var(--accent);
  background: rgba(255, 138, 61, 0.2);
}

.shop-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.shop-item canvas {
  width: 52px;
  height: 52px;
}

.shop-item h4 {
  margin: 0;
  font-size: 16px;
}

.shop-item p {
  margin: 2px 0 0;
  font-size: var(--t-min);
}

.pips {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

.pips i {
  width: 18px;
  height: 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.pips i.on {
  background: linear-gradient(90deg, #ffb347, #ff7a2f);
}

.chars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.char {
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.char.selected {
  border-color: var(--accent);
  background: rgba(255, 138, 61, 0.12);
}

.char canvas {
  width: 110px;
  height: 130px;
}

.char h4 {
  margin: 0;
  font-size: 16px;
}

.char p {
  margin: 0;
  font-size: var(--t-min);
  min-height: 3em;
}

.trophy {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.trophy .medal {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  color: var(--muted);
}

.trophy.got .medal {
  background: radial-gradient(circle at 35% 30%, #fff2b0, #f2b43a 60%, #b07a10);
  color: #5a3a00;
}

/* Check marks drawn with borders, so they never depend on a font. */
.mission.done .tick::after,
.trophy.got .medal::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  transform: translateY(-1px) rotate(45deg);
}

.trophy.got .medal::after {
  width: 7px;
  height: 14px;
  border-width: 0 4px 4px 0;
}

.stat-grid b {
  font-size: clamp(17px, 3.4vmin, 24px);
}

.trophy b {
  font-size: max(15px, var(--t-min));
}

.trophy small {
  color: var(--muted);
  font-size: var(--t-min);
}

.trophy:not(.got) b {
  color: var(--muted);
}

/* Settings */

/* Each row is pressed whole (a label), 48 px tall and 8 px from the next. */
.setting {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.setting input[type='range'] {
  width: min(200px, 40vw);
  height: 44px;
  margin: 0;
  accent-color: var(--accent);
}

.setting input[type='checkbox'] {
  width: 24px;
  height: 24px;
  margin: 0 10px;
  accent-color: var(--accent);
}

.help-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.help-list strong {
  color: var(--text);
}

/* Revive */

.revive {
  text-align: center;
}

.ring {
  width: 86px;
  height: 86px;
  margin: 8px auto;
  position: relative;
}

.ring svg {
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 7;
}

.ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
}

/* ---------- Below the game ---------- */

.ad-slot {
  margin: 12px auto 0;
  max-width: 970px;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 0 8px;
  line-height: 1.6;
  color: var(--muted);
}

.about h1,
.about h2 {
  color: var(--text);
}

.about strong {
  color: var(--text);
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-item {
    grid-template-columns: 52px 1fr;
  }

  .shop-item > .btn {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .page {
    padding: 4px var(--safe-r) 30px var(--safe-l);
  }

  .game-root {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    height: calc(100vh - var(--header-h) - var(--safe-t) - 4px);
    height: calc(100dvh - var(--header-h) - var(--safe-t) - 4px);
  }

  .panel {
    --pad: 14px;
  }

  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .big-stats b {
    font-size: 22px;
  }
}

/* Short screens (phones held sideways): the game takes all the height under
   the header. An iPhone 14 held sideways in Safari has 340 px, and the game
   at its old 300 px minimum ran 16 px off the foot of the screen. */
@media (max-height: 520px) {
  .page {
    padding-top: 4px;
  }

  .game-root {
    height: calc(100vh - var(--header-h) - var(--safe-t) - 8px);
    height: calc(100dvh - var(--header-h) - var(--safe-t) - 8px);
  }

  .logo {
    font-size: 34px;
  }

  .title-wrap,
  .title-info,
  .title-actions {
    gap: 8px;
  }

  .mission {
    padding: 2px 0;
  }

  .balances {
    gap: 8px;
  }

  .pill {
    padding: 3px 10px;
    font-size: max(14px, var(--t-min));
  }
}

/* Short, wide screens (phones held sideways): missions on the left, buttons
   on the right, at the top, so every button shows while the missions scroll. */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  .title-wrap {
    width: min(860px, 100%);
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }

  .title-info,
  .title-actions {
    flex: 1 1 0;
  }

  .title-actions .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-grid .btn {
    padding: 6px 4px;
  }
}

/* A touch has no keyboard to hint at (the last input used, main.js). */
.nr-touch .btn kbd,
.nr-touch .headstart-btn kbd {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .teach,
  .hawk-alert,
  .toast,
  .boot-dots::after {
    animation: none;
  }
}