/* =========================================================
   PROOF OF BONK — Terra Hosting arcade
   The palette is terrahosting.io's own custom-property set, copied verbatim,
   so the game and the site read as one brand. Cyan is the primary accent and
   the house gradient runs cyan to violet to magenta, exactly as the logo does.
   ========================================================= */

:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Terra ground */
  --bg: #070a16;
  --bg-deep: #04050c;
  --bg-raised: #0a0e20;
  --surface: rgba(10, 14, 32, 0.86);
  --surface-2: rgba(18, 24, 48, 0.74);
  --border: rgba(34, 228, 255, 0.18);
  --border-soft: rgba(148, 163, 204, 0.13);

  --text: #eef1fb;
  --text-dim: #8d97b6;
  --text-faint: #8490ad;
  --hud-surface: rgba(7,6,13,0.94);

  /* Terra accents. --lime keeps its name so existing rules keep working, but
     it now carries Terra's green. */
  --lime: #3cf5a7;
  --lime-deep: #18c8a0;
  --magenta: #ff2dbf;
  --cyan: #22e4ff;
  --amber: #ffbd2e;
  --violet: #8b5cf6;
  --brand-grad: linear-gradient(90deg, #22e4ff 0%, #8b5cf6 55%, #ff2dbf 100%);

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 30px;
  --text-2xl: 46px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius: 10px;
  --radius-sm: 6px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 180ms var(--ease);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app { position: fixed; inset: 0; min-height: 100dvh; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.layer { position: absolute; inset: 0; z-index: 10; }
/* Must be !important and must also cover .screen, whose display:flex would
   otherwise override the user-agent rule for the `hidden` attribute and leave
   a blurred full-screen overlay compositing every frame. */
.layer[hidden], .screen[hidden] { display: none !important; }
/* Any rule that sets `display` outranks the UA stylesheet's `hidden`, which
   is how a folded-away panel ends up on screen anyway. One rule, applied
   everywhere, so `hidden` means hidden. */
[hidden] { display: none !important; }

/* ================= HUD ================= */
#hud { pointer-events: none; }
#hud button, #hud [data-interactive] { pointer-events: auto; }

.hud-top {
  position: absolute; top: calc(var(--space-4) + env(safe-area-inset-top)); left: 0; right: 0; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  width: min(520px, 90vw);
}
.hud-timer { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--hud-surface); border-radius: 8px; padding: 2px 8px; }
.hud-time {
  font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 26px rgba(176,123,255,0.35);
}
/* ENRAGED replaces the countdown once the deadline passes. It is wider than
   a m:ss, so the size drops to keep it inside the HUD's top row on a phone,
   and the pulse is slow enough to read rather than nag. Reduced-motion turns
   the animation off and keeps the colour, which is what carries the meaning. */
.hud-time.enraged {
  font-size: 26px; letter-spacing: 0.04em;
  color: var(--magenta);
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 26px rgba(255,45,191,0.55);
  animation: enrage-pulse 1.4s ease-in-out infinite;
}
@keyframes enrage-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }

.hud-phase {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em;
  color: var(--text-dim); text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.hud-phase.danger { color: var(--magenta); }

.boss-bar { width: 100%; margin-top: var(--space-2); }
.boss-label {
  background: var(--hud-surface); border-radius: 6px; padding: 3px 6px;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 0.2em; color: var(--magenta); text-align: center;
  margin: 0 0 var(--space-2);
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
/* While a boss is up its name replaces the phase caption, which would
   otherwise print a near-duplicate string directly on top of it. */
.hud-top.boss-active .hud-phase { display: none; }
.boss-track {
  height: 10px; border-radius: 5px; background: rgba(8,6,16,0.8);
  border: 1px solid rgba(255,46,99,0.45); overflow: hidden;
}
.boss-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff2e63, #ff8a5c);
  transition: width 120ms linear;
}

.hud-left {
  position: fixed;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  left: calc(var(--space-4) + env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: 12px;
  /* Keep every label legible over both the floor and bright effects. */
  background: var(--hud-surface);
}
.hud-left .stat-line { display: flex; align-items: baseline; gap: var(--space-2); }
.stat-line { display: flex; align-items: baseline; gap: var(--space-2); }
.stat-key { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; color: var(--text-faint); min-width: 44px; }
.stat-val { font-size: var(--text-sm); font-weight: 900; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.curse-chip {
  margin-top: var(--space-2); align-self: flex-start;
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em;
  color: var(--amber); background: rgba(255,179,64,0.12);
  border: 1px solid rgba(255,179,64,0.4); border-radius: 999px;
  padding: 2px var(--space-2);
}

.hud-loadout {
  position: absolute;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  right: calc(var(--space-4) + env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-end;
}
.lo-item {
  display: flex; align-items: center; gap: var(--space-2);
  background: rgba(11,10,20,0.62); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 3px var(--space-2);
  font-size: var(--text-xs); font-weight: 700; color: var(--text-dim);
}
.lo-item.evo { border-color: rgba(200,255,77,0.5); color: var(--lime); }
.lo-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--violet); }
.lo-item.evo .lo-dot { background: var(--lime); }
.lo-lv { font-variant-numeric: tabular-nums; color: var(--text); }

.hud-bottom {
  position: absolute; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(560px, 92vw); display: flex; flex-direction: column; gap: var(--space-2);
}
.hp-wrap { position: relative; display: flex; align-items: center; gap: var(--space-3); }
.hp-track {
  flex: 1; height: 14px; border-radius: 7px; overflow: hidden;
  background: rgba(8,6,16,0.82); border: 1px solid rgba(255,255,255,0.14);
}
.hp-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--lime-deep), var(--lime));
  transition: width 120ms linear;
}
.hp-fill.low { background: linear-gradient(90deg, #d41d43, var(--magenta)); }
.hp-text {
  background: var(--hud-surface); border-radius: 5px; padding: 2px 4px;
  font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums lining-nums;
  color: var(--text); min-width: 78px; text-align: right; text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.xp-track {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(8,6,16,0.82); border: 1px solid rgba(70,224,255,0.22);
}
.xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #1f8fb0, var(--cyan)); transition: width 90ms linear; }

.debug {
  background: var(--hud-surface); border-radius: 4px; padding: 2px 4px;
  position: absolute;
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  right: calc(88px + env(safe-area-inset-right));
  display: flex; gap: var(--space-3);
  font-family: ui-monospace, monospace; font-size: var(--text-xs);
  color: var(--text-faint); text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.touch-stick {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 118px; border-radius: 50%;
  border: 1px solid var(--border-soft); background: rgba(11,10,20,0.35);
}
.touch-knob {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(200,255,77,0.28); border: 1px solid var(--lime);
}

/* ================= screens ================= */
.screen {
  z-index: 20; display: flex; align-items: flex-start; justify-content: center;
  padding:
    calc(var(--space-6) + env(safe-area-inset-top))
    calc(var(--space-6) + env(safe-area-inset-right))
    calc(var(--space-6) + env(safe-area-inset-bottom))
    calc(var(--space-6) + env(safe-area-inset-left));
  background:
    radial-gradient(1000px 620px at 50% 8%, rgba(176,123,255,0.14), transparent 70%),
    radial-gradient(760px 520px at 88% 96%, rgba(255,46,99,0.10), transparent 70%),
    var(--bg);
  overflow-y: auto;
}
.screen.overlay { background: rgba(7,6,13,0.9); backdrop-filter: blur(5px); }
/* Applied while the sim is live behind a transparent overlay; drops the
   per-frame blur so the level-up screen cannot cost frames. */
.screen.overlay.noblur { backdrop-filter: none; background: rgba(7,6,13,0.93); }

.scr-inner { width: min(760px, 100%); display: flex; flex-direction: column; gap: var(--space-6); margin-block: auto; }
.scr-inner.narrow { width: min(430px, 100%); align-items: center; text-align: center; }

.logo-row { display: flex; align-items: center; gap: var(--space-4); }
.logo { width: 58px; height: 58px; color: var(--lime); flex-shrink: 0; }
.title {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800;
  letter-spacing: -0.02em; line-height: 0.95; color: var(--text);
  text-shadow: 0 0 40px rgba(200,255,77,0.24);
}
.subtitle { font-size: var(--text-sm); color: var(--text-dim); margin-top: 2px; }

.seed-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-4);
}
.seed-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.seed-field { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.seed-field label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.18em; color: var(--lime); }
.seed-field input {
  min-height: 44px;
  width: 100%; background: rgba(7,6,13,0.75); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: var(--space-3);
  color: var(--text); font-family: ui-monospace, monospace; font-size: var(--text-sm);
}
.seed-field input:focus { outline: none; border-color: var(--lime); }
.seed-note { font-size: var(--text-xs); color: var(--text-dim); margin-top: var(--space-3); line-height: 1.5; }

.pick-group { display: flex; flex-direction: column; gap: var(--space-3); }
.pick-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.18em; color: var(--text-faint); }
.pick-hint { font-weight: 500; letter-spacing: 0.02em; color: var(--text-faint); text-transform: none; }

.char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--space-3); }
.char-card {
  text-align: left; cursor: pointer; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: var(--space-3);
  transition: border-color var(--t), transform var(--t), background var(--t);
}
.char-card:hover { transform: translateY(-2px); border-color: rgba(200,255,77,0.4); }
.char-card.sel { border-color: var(--lime); background: rgba(200,255,77,0.09); }
.char-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 800; color: var(--text); }
.char-tag { font-size: var(--text-xs); color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.char-perk { font-size: var(--text-xs); color: var(--lime); margin-top: var(--space-2); line-height: 1.45; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  min-width: 44px; min-height: 44px;
  cursor: pointer; font-family: inherit; font-size: var(--text-xs); font-weight: 700;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: var(--space-2) var(--space-3); color: var(--text-dim);
  transition: all var(--t);
}
.chip:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
.chip.sel { border-color: var(--lime); background: rgba(200,255,77,0.12); color: var(--lime); }
.chip.curse.sel { border-color: var(--amber); background: rgba(255,179,64,0.13); color: var(--amber); }
.chip-mult { opacity: 0.75; margin-left: var(--space-1); }

.btn {
  min-width: 44px; min-height: 44px;
  cursor: pointer; font-family: var(--font-body); font-weight: 800;
  font-size: var(--text-sm); letter-spacing: 0.04em;
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-6);
  border: 1px solid transparent; transition: all var(--t);
}
.btn.sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-primary { background: var(--lime); color: #0c1400; }
.btn-primary:hover { background: #d9ff7a; transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border-soft); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.start-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
#btnStart {
  font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-10);
}
.start-meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--text-dim); }
.start-meta strong { color: var(--amber); }
.dim { color: var(--text-faint); }
.music-credit { font-size: 11px; color: var(--text-faint); line-height: 1.4; }
.foot-note { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.6; border-top: 1px solid var(--border-soft); padding-top: var(--space-4); }

.music-toggle {
  position: absolute;
  right: calc(var(--space-3) + env(safe-area-inset-right));
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index: 50;
  min-width: 48px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(7, 6, 13, 0.88);
  color: var(--lime);
  font: 800 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.music-toggle[aria-pressed="false"] { color: var(--text-faint); }
.music-toggle.off { color: var(--text-faint); }
.results-audio { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.results-audio .music-toggle { position: static; }

/* ---- the mixer ----
   Hangs off the sound button, which is the one control present on every
   screen, so music and effects can be balanced from the title, mid-run from
   the pause screen, or on the results screen without hunting for a menu. */
.audio-panel {
  position: absolute;
  right: calc(var(--space-3) + env(safe-area-inset-right));
  bottom: calc(var(--space-3) + 52px + env(safe-area-inset-bottom));
  z-index: 51;
  width: min(268px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(7, 6, 13, 0.97);
  backdrop-filter: blur(8px);
}
.audio-panel[hidden] { display: none; }
.vol-row { display: grid; grid-template-columns: 58px 1fr 28px; align-items: center; gap: var(--space-3); }
.vol-key { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; color: var(--text-dim); }
.vol-val {
  font-size: 11px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums lining-nums; text-align: right;
}
/* A 44px-tall track so a thumb can find it, with a slim visible rail inside. */
.vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer;
}
.vol-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14);
}
.vol-slider::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--lime); border: none;
}
.vol-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--lime); border: none; }
.vol-slider:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.vol-mute { width: 100%; min-height: 44px; }
.vol-note { font-size: 10px; line-height: 1.4; color: var(--text-faint); margin: 0; }

/* On a phone the button sits at the TOP right, so the panel drops below it
   rather than off the bottom of the screen. */
@media (max-width: 640px) {
  .audio-panel {
    top: calc(var(--space-3) + 52px + env(safe-area-inset-top));
    bottom: auto;
  }
}

/* ================= level up ================= */
.lvl-inner { width: min(860px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.lvl-head { text-align: center; }
.lvl-kicker { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.24em; color: var(--cyan); }
.lvl-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.01em; margin-top: var(--space-1); }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: var(--space-3); width: 100%; }
.choice {
  /* `color: inherit` is load-bearing, not tidiness. These cards are <button>
     elements, and a button does not inherit colour — the UA forces
     `color: buttontext`, which resolved to pure black here. `.choice-sub`,
     `.choice-key` and `.choice-body` all set their own colour and so looked
     fine; `.choice-name` did not, and the name of the upgrade you are picking
     rendered black on a near-black card at a contrast ratio of 1.1:1 on every
     platform. Setting it on the button fixes the whole subtree at once. */
  cursor: pointer; font-family: inherit; color: inherit; text-align: left;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.choice:hover { transform: translateY(-3px); border-color: var(--lime); background: rgba(200,255,77,0.07); }
.choice-key {
  font-size: var(--text-xs); font-weight: 900; color: var(--text-faint);
  border: 1px solid var(--border-soft); border-radius: 4px;
  width: 20px; height: 20px; display: grid; place-items: center;
}
.choice-sub { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.14em; }
.choice-sub.new { color: var(--cyan); }
.choice-sub.up { color: var(--lime); }
.choice-sub.evo { color: var(--magenta); }
.choice-sub.heal { color: var(--amber); }
.choice-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 800; color: var(--text); }
.choice-body { font-size: var(--text-xs); color: var(--text-dim); line-height: 1.5; }
.lvl-hint { font-size: var(--text-xs); color: var(--text-faint); }

.pause-loadout { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.pl-row { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-dim); border-bottom: 1px solid var(--border-soft); padding-bottom: var(--space-2); }
.pl-row strong { color: var(--text); }
.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* THE RETRY IS THE GAME LOOP, so it cannot be below the fold.

   Measured after a real death, "Run it again" sat at y=1548 in an 844px phone
   viewport, y=1578 in a 640px one — and y=1275 on a 1280x800 DESKTOP. On every
   device the player had to scroll past a score table and a replay-hash readout
   to reach the button that starts another run. In a horde survivor that is the
   whole retention loop, gated behind a scroll nobody makes.

   The results still scroll — the score breakdown and the proof box are worth
   reading — but the actions ride along at the bottom of the screen the entire
   time, so another run is always one tap away. */
#screenOver .btn-row {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-inline: calc(-1 * var(--space-4));
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: linear-gradient(180deg, rgba(7,6,13,0) 0%, rgba(7,6,13,0.97) 16%, rgba(7,6,13,0.99) 100%);
}
/* 42px missed the 44px touch minimum on the one control the game most wants
   pressed. */
#screenOver .btn-row .btn { min-height: 44px; }

/* ================= results ================= */
.over-inner { width: min(660px, 100%); display: flex; flex-direction: column; gap: var(--space-6); }
.over-head { text-align: center; }
.over-title {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800;
  letter-spacing: -0.02em; color: var(--magenta);
}
.over-title.clear { color: var(--lime); }
.over-sub { font-size: var(--text-sm); color: var(--text-dim); margin-top: var(--space-1); }

.beat { display: flex; flex-direction: column; gap: var(--space-3); }
.beat-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.2em; color: var(--text-faint); }

.score-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.score-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); }
.score-table td:last-child { text-align: right; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.score-table tr.score-total td {
  border-bottom: none; border-top: 1px solid var(--border); padding-top: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--lime);
}

.proof-box { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space-4); }
.proof-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-xs); border-bottom: 1px solid rgba(255,255,255,0.05); }
.proof-key { color: var(--text-dim); }
.proof-val { color: var(--text); font-weight: 700; }
.proof-val.mono { font-family: ui-monospace, monospace; }
.proof-val.ok { color: var(--lime); }
.proof-val.bad { color: var(--magenta); }
.verdict {
  margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 900; letter-spacing: 0.12em; text-align: center;
}
.verdict.pending { background: rgba(255,255,255,0.05); color: var(--text-faint); }
.verdict.ok { background: rgba(200,255,77,0.14); color: var(--lime); border: 1px solid rgba(200,255,77,0.4); }
.verdict.bad { background: rgba(255,46,99,0.14); color: var(--magenta); border: 1px solid rgba(255,46,99,0.4); }
.proof-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.proof-explain { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.55; margin-top: var(--space-3); }

.lb-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.lb-list li {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: var(--space-3); align-items: center;
  font-size: var(--text-xs); padding: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-dim);
}
.lb-list li.you { border-color: var(--lime); color: var(--text); }
.lb-rank { font-weight: 900; color: var(--text-faint); }
.lb-score { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); }
.lb-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--lime); }
.lb-badge.fail { color: var(--magenta); }
.lb-note { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.5; }

.toast {
  position: absolute; bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 40; background: rgba(7,6,13,0.94); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs); font-weight: 700; color: var(--lime);
  width: max-content; max-width: min(560px, 88vw); box-sizing: border-box;
}

/* Make optional upgrade pacing discoverable once the first three picks teach it. */
#btnManualUpgrades:not([hidden]) { border-color: #54c9b6; background: #163934; color: #ddfff3; white-space: normal; }
.toast.playing-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
  .title { font-size: var(--text-xl); }
  .hud-time { font-size: 30px; }
  .hud-loadout { display: none; }

  /* PHONE HUD STACK.

     On a desktop the run stats sit in the left margin and the timer and boss
     bar are a 520px island in the middle, so they never meet. On a 390px
     phone the island is 90vw and the stats are the same four stacked lines,
     so they landed on top of each other: "$BONK 1,174" printed straight
     through the boss's health bar and "THE AUDITOR" ran under "SCORE".

     The phone gets a stack instead of a margin — timer, then the stats as one
     wrapping row, then the boss bar underneath in normal document flow. */
  .hud-left {
    position: static; width: 100%;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--hud-surface);
  }
  .hud-left .stat-line { gap: 5px; }
  .hud-left .stat-key { min-width: 0; font-size: 10px; }
  .hud-left .stat-val { font-size: 13px; }
  .hud-left .curse-chip, .hud-left .epoch-chip { margin-top: 0; }
  /* The shared column grows when stats/chips wrap; no guessed pixel spacer. */
  .boss-bar { margin-top: 0; }
  .screen {
    padding:
      calc(var(--space-4) + env(safe-area-inset-top))
      calc(var(--space-4) + env(safe-area-inset-right))
      calc(var(--space-4) + env(safe-area-inset-bottom))
      calc(var(--space-4) + env(safe-area-inset-left));
  }
  #btnStart { width: 100%; }
  /* the one thing a phone player should be able to hit without aiming */
  #screenOver .btn-row { gap: var(--space-2); }
  #screenOver #btnAgain { flex: 1 1 100%; }
  .start-row { flex-direction: column; align-items: stretch; }
  .music-toggle {
    top: calc(var(--space-3) + env(safe-area-inset-top));
    bottom: auto;
  }

  /* The sound toggle moves to the TOP RIGHT on phones, which put it straight
     through the end of any centred heading wide enough to reach it — "PICK
     YOUR POISON" had its last letters printed under the button. Reserving the
     corner makes a long heading wrap instead of collide. */
  .title, .lvl-title, .over-title, .scr-inner > h2 {
    padding-inline: 58px;
  }
}

/* Short landscape phones keep every screen scrollable while bringing the
   first action and the gameplay HUD into view sooner. */
@media (max-height: 520px) and (orientation: landscape) {
  .screen {
    padding:
      calc(var(--space-2) + env(safe-area-inset-top))
      calc(var(--space-3) + env(safe-area-inset-right))
      calc(var(--space-2) + env(safe-area-inset-bottom))
      calc(var(--space-3) + env(safe-area-inset-left));
  }
  .scr-inner { gap: var(--space-3); margin-block: 0; }
  .brand-lockup { width: min(108px, 24vw); margin-bottom: 0; }
  .logo { width: 42px; height: 42px; }
  .title { font-size: var(--text-xl); }
  .subtitle, .brand-foot, .foot-note { font-size: 11px; }
  .seed-block { padding: var(--space-3); }
  .seed-note { display: none; }
  .hud-time { font-size: 28px; }
  .hud-left { top: calc(var(--space-2) + env(safe-area-inset-top)); }
  .hud-top { top: calc(var(--space-2) + env(safe-area-inset-top)); }
  .hud-bottom { bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .debug { display: none; }
  /* The loadout list is already hidden on narrow phones, but a phone held
     SIDEWAYS is 844px wide and misses that rule — so the weapon list came back
     and ran straight under the sound toggle in the top right corner. Short and
     landscape is still a phone, and 390px of height has no room to spare. */
  .hud-loadout { display: none; }
  .hero-call { top: 30%; }
  .music-toggle {
    top: calc(var(--space-2) + env(safe-area-inset-top));
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
body.minimal-effects * { transition: none !important; animation: none !important; }

/* ============================================================
   $BONK economy, buff timers, black market shop
   ============================================================ */

.stat-line.bonk .stat-key { color: var(--lime); }
.stat-line.bonk .stat-val {
  color: var(--lime);
  text-shadow: 0 0 12px rgba(200, 255, 77, 0.45);
}

.bracket-chip {
  margin-top: 6px;
  align-self: flex-start;
  font: 700 9px/1 'Satoshi', system-ui, sans-serif;
  letter-spacing: 0.16em;
  padding: 4px 7px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
.bracket-chip.funded {
  color: var(--amber);
  border-color: rgba(255, 179, 64, 0.45);
  background: rgba(255, 179, 64, 0.09);
}

/* ---- active power-up timers ---- */
.hud-buffs {
  position: absolute;
  right: 16px;
  bottom: 78px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  pointer-events: none;
}
.buff-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  padding: 5px 9px 6px;
  border-radius: 5px;
  background: var(--hud-surface);
  border: 1px solid var(--bc, rgba(255, 255, 255, 0.2));
  border-left-width: 3px;
  backdrop-filter: blur(6px);
  animation: buffIn 0.18s ease-out;
}
@keyframes buffIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
.buff-chip.expiring { animation: buffPulse 0.5s steps(2, end) infinite; }
@keyframes buffPulse { 50% { box-shadow: inset 0 0 0 1px var(--bc, #fff); } }
.buff-name {
  flex: 1;
  font: 800 9.5px/1 'Cabinet Grotesk', system-ui, sans-serif;
  letter-spacing: 0.11em;
  color: var(--bc, #fff);
}
.buff-secs {
  font: 700 10px/1 'Satoshi', system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  color: rgba(255, 255, 255, 0.75);
}
.buff-track {
  position: absolute;
  left: 3px; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}
.buff-fill {
  height: 100%;
  background: var(--bc, #fff);
  transition: width 0.1s linear;
}

/* ---- black market ---- */
.shop {
  width: 100%;
  max-width: 820px;
  margin: 18px auto 0;
  padding: 13px 15px 15px;
  border-radius: 8px;
  border: 1px solid rgba(200, 255, 77, 0.2);
  background:
    linear-gradient(180deg, rgba(200, 255, 77, 0.045), rgba(200, 255, 77, 0));
}
.shop-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
}
.shop-title {
  font: 800 10px/1 'Cabinet Grotesk', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: var(--lime);
}
.shop-bal {
  font: 700 11px/1 'Satoshi', system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  color: rgba(255, 255, 255, 0.62);
}
.shop-bal span { color: var(--lime); }
.shop-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.shop-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 11px 11px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: border-color 0.14s, background 0.14s, transform 0.14s;
}
.shop-btn:hover:not(:disabled) {
  border-color: rgba(200, 255, 77, 0.6);
  background: rgba(200, 255, 77, 0.09);
  transform: translateY(-1px);
}
.shop-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.shop-btn:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}
.shop-btn-name {
  font: 700 12px/1.25 'Satoshi', system-ui, sans-serif;
}
.shop-btn-name em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.shop-btn-cost {
  font: 700 10px/1 'Satoshi', system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.05em;
  color: var(--lime);
}
.shop-btn:disabled .shop-btn-cost { color: rgba(255, 255, 255, 0.4); }

/* ---- meta upgrades on the title screen ---- */
.meta-panel {
  margin-top: 18px;
  padding: 14px 16px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 179, 64, 0.22);
  background: linear-gradient(180deg, rgba(255, 179, 64, 0.05), rgba(255, 179, 64, 0));
}
.meta-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.meta-title {
  font: 800 10px/1 'Cabinet Grotesk', system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: var(--amber);
}
.meta-bal {
  font: 700 11px/1 'Satoshi', system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lime);
}
.meta-note {
  margin: 0 0 12px;
  font: 400 10.5px/1.5 'Satoshi', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.42);
}
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 9px;
}
.meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px 11px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.14s, background 0.14s;
}
.meta-item:hover:not(:disabled) {
  border-color: rgba(255, 179, 64, 0.55);
  background: rgba(255, 179, 64, 0.08);
}
.meta-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.meta-item:disabled { opacity: 0.36; cursor: not-allowed; }
.meta-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.meta-name {
  font: 700 10.5px/1.2 'Cabinet Grotesk', system-ui, sans-serif;
  letter-spacing: 0.06em;
}
.meta-pips { display: flex; gap: 3px; flex: 0 0 auto; }
.meta-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.meta-pip.on { background: var(--amber); box-shadow: 0 0 6px rgba(255, 179, 64, 0.7); }
.meta-desc {
  font: 400 10px/1.4 'Satoshi', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
.meta-cost {
  font: 700 9.5px/1 'Satoshi', system-ui, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--lime);
}
.meta-cost.maxed { color: var(--amber); }

@media (max-width: 640px) {
  .shop-row { grid-template-columns: 1fr; }
  .shop { margin-top: 13px; padding: 11px 12px 12px; }
  .hud-buffs { bottom: 92px; right: 10px; }
  .buff-chip { min-width: 108px; }
  /* The health and XP bars are 92vw on a phone, so a bottom-right debug line
     is printed straight across them. It is a developer readout, and the one
     thing on screen a player has no use for, so it goes on small screens. */
  .debug { display: none; }
  /* Touch targets. The small buttons measured 32px tall, which is comfortable
     under a mouse pointer and fiddly under a thumb; 44px is the figure both
     Apple and Google publish, and the results screen is nothing but buttons. */
  .btn.sm, .chip {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ================= cinema mode ================= */
/* Stands in for the Fullscreen API, which the embedded preview iframe blocks.
   The canvas already fills the viewport, so this just clears the chrome. */
body.cinema #debugOverlay,
body.cinema .hud-left,
body.cinema .hud-loadout { opacity: 0; transition: opacity 180ms ease; }
body.cinema .hud-top { opacity: 1; }

/* =========================================================
   Terra Hosting brand
   ========================================================= */

.brand-lockup {
  display: block;
  width: min(230px, 56vw);
  height: auto;
  margin: 0 auto var(--space-4);
  opacity: .96;
}

.brand-foot {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--text-dim);
}
.brand-foot strong {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.brand-site {
  font-family: var(--font-mono);
  color: var(--cyan);
}

/* the hero banner that crashes in when a crew pickup is taken */
.hero-call {
  position: relative;
  display: none;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  transform-origin: center top;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md, 16px);
  background: rgba(4, 5, 12, .82);
  border: 1px solid var(--border);
  box-shadow: 0 0 34px rgba(34, 228, 255, .22);
  pointer-events: none;
  opacity: 0;
  z-index: 40;
}
.hero-call.show { display: flex; animation: heroCall 2.6s ease forwards; }
.hero-call > div { min-width: 0; overflow-wrap: anywhere; }
.hero-call img,
.hero-call canvas {
  width: 54px;
  height: 78px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}
.hero-call-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: .06em;
  color: var(--text);
}
.hero-call-super {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}
.hero-call-desc {
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-top: 2px;
}

@keyframes heroCall {
  0%   { opacity: 0; transform: scale(.82); }
  12%  { opacity: 1; transform: scale(1.04); }
  20%  { transform: scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: scale(.98); }
}
@media (max-height: 500px) {
  .hero-call { padding: 6px 10px; gap: 8px; align-self: flex-end; max-width: calc(50% - 48px); }
  .hero-call canvas { width: 31px; height: 44px; }
  .hero-call-name { font-size: 10px; }
  .hero-call-super { font-size: 14px; }
  .hero-call-desc { font-size: 11px; }
}
@media (max-width: 420px) and (min-height: 501px) {
  .hero-call { padding: 4px 10px; gap: 8px; }
  .hero-call canvas { width: 31px; height: 44px; }
  .hero-call-name { font-size: 11px; }
  .hero-call-super { font-size: 16px; }
  .hero-call-desc { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-call.show { opacity: 1; }
}
body.minimal-effects .hero-call.show { opacity: 1; }

/* =========================================================
   Front door, folded down
   A first-time player gets one decision: press BONK. Seed, operator, mode,
   curses and the garage are all real and all noise before a first run, so
   they live behind `Change setup` until one has been finished.
   ========================================================= */
.daily-row {
  display: flex; gap: var(--space-4); align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}
.seed-label {
  font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600;
  color: var(--cyan); letter-spacing: 0.04em; margin-top: 4px;
}
.seed-label.custom { color: var(--amber); }
.operator-card {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  min-width: 190px;
}
.op-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; color: var(--text-faint); }
.op-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--text); }
.op-perk { font-size: var(--text-xs); color: var(--text-dim); line-height: 1.4; }
.setup-toggle { margin-top: var(--space-3); }
.advanced {
  display: flex; flex-direction: column; gap: var(--space-4);
  border-left: 2px solid var(--border); padding-left: var(--space-4);
}

/* =========================================================
   First-minute coaching
   One line at a time, centred low enough to stay clear of the action, and
   never the same line twice in a run.
   ========================================================= */
.coach {
  position: absolute; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(10px);
  width: max-content; max-width: min(560px, 82vw); box-sizing: border-box; text-align: center;
  background: rgba(7, 10, 22, 0.92); border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: 1.45; color: var(--text);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}
.coach.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px) {
  .daily-row { flex-direction: column; align-items: stretch; }
  .operator-card { min-width: 0; }
  /* The player is pinned to the centre of a phone screen, so a tip anywhere in
     the lower middle lands on top of them — at 360x640 this box sat directly
     over the operator and the thumb stick. It tucks in just above the health
     bar instead. */
  .coach { font-size: var(--text-xs); max-width: 88vw; }
}
@media (prefers-reduced-motion: reduce) {
  .coach { transition: none; }
  /* The colour is what carries "enraged"; the pulse is only emphasis, so it
     goes and the meaning stays. Kept in this block rather than next to the
     rule so there is one place to read what reduced motion actually turns off. */
  .hud-time.enraged { animation: none; }
}


/* ================= difficulty epochs ================= */
.btn-sub {
  display: block; font-size: var(--text-xs); font-weight: 600;
  opacity: 0.68; letter-spacing: 0.04em; margin-top: 2px;
}
#btnEndless { margin-top: var(--space-2); width: 100%; }
.epoch-chip {
  margin-top: var(--space-2); align-self: flex-start;
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em;
  color: var(--cyan); background: rgba(34, 228, 255, 0.12);
  border: 1px solid rgba(34, 228, 255, 0.42); border-radius: 999px;
  padding: 2px var(--space-3);
}
.epoch-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  width: 100%; margin: var(--space-4) 0;
}
.epoch-cell {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: var(--space-3);
}
.epoch-k { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; color: var(--text-faint); }
.epoch-cell strong { font-family: var(--font-display); font-size: var(--text-base); color: var(--text); }
@media (max-width: 640px) { .epoch-grid { grid-template-columns: 1fr; } }

/* Optional run-file controls stay behind a disclosure on the title screen. */
.run-files { margin: 18px 0; color: #aab9c8; font-size: 13px; line-height: 1.5; }
.run-files summary { cursor: pointer; min-height: 44px; display: list-item; padding: 12px 0; }
.run-files input { display: block; max-width: 100%; min-height: 44px; margin: 10px 0; }
.run-files p { overflow-wrap: anywhere; }

/* Above the health bar: does not displace the mobile timer, boss bar or stats. */
.hud-streak { align-self: flex-start; max-width: 100%; padding: 4px 8px;
  background: rgba(8,6,16,0.88); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px; color: var(--text); font: 700 11px var(--font-mono); }
.streak-track { height: 3px; margin-top: 4px; background: rgba(255,255,255,0.2); }
#hudStreakFill { height: 100%; background: var(--lime); transform-origin: left; }

/* Session-only comfort controls share the existing accessible settings panel. */
.audio-panel { max-height: calc(100dvh - 100px); overflow-y: auto; }
.comfort-row { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 13px; color: var(--text); }
.comfort-row input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--lime); }
.comfort-row:focus-within { outline: 2px solid var(--cyan); outline-offset: 3px; }

#choiceQueue { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }

/* Optional upgrade delivery stays in the measured HUD column. */
.upgrade-queue-btn { min-width: 120px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--cyan); border-radius: 8px; background: #101b24; color: #c8fbff; font: 700 12px var(--font-body); cursor: pointer; }
.upgrade-delivery { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 560px; text-align: center; }
.upgrade-delivery p { font-size: 13px; line-height: 1.5; }

/* Field manual lives on the home screen, outside the live playfield. */
.field-guide { margin:20px 0; border:1px solid #416269; border-radius:12px; background:#0c1c24; overflow:hidden; }
.field-guide:not([open]) > :not(summary),
.guide-section:not([open]) > :not(summary) { display:none; }
.field-guide > summary { padding:17px 18px; min-height:56px; cursor:pointer; color:#b8efdd; font-family:var(--font-display, 'Space Grotesk', sans-serif); font-weight:700; }
.guide-summary-note { display:block; padding-top:5px; color:#b4c8ce; font:400 13px Inter,sans-serif; }
.guide-intro { margin:0; padding:12px 18px 16px; font-size:14px; line-height:1.6; color:#b8cbd2; }
.guide-section { border-top:1px solid #29404c; }
.guide-section > summary { cursor:pointer; min-height:48px; padding:15px 18px; color:#e1f1ec; font-weight:700; font-size:14px; }
.guide-section summary:focus-visible,.field-guide > summary:focus-visible { outline:3px solid #99ebca; outline-offset:-4px; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 12px 14px; }

/* The title is a launch screen: one clear action, then optional details. */
#screenTitle .scr-inner { gap: 18px; }
#screenTitle .brand-lockup { width: min(176px, 46vw); margin-bottom: 0; }
#screenTitle .logo-row { justify-content: center; }
#screenTitle .subtitle { line-height: 1.4; }
#screenTitle .start-row {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 20px;
  border: 1px solid rgba(200,255,77,.24); border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(200,255,77,.12), transparent 72%), rgba(15,21,22,.82);
  text-align: center;
}
.start-kicker { margin: 0; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
#screenTitle #btnStart {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: min(340px, 100%); min-height: 70px; padding: 12px 22px;
  box-shadow: 0 0 0 4px rgba(200,255,77,.08), 0 12px 36px rgba(0,0,0,.35);
  text-align: left;
}
#screenTitle #btnStart:hover { box-shadow: 0 0 0 6px rgba(200,255,77,.18), 0 14px 38px rgba(0,0,0,.45); }
#screenTitle #btnStart:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.start-play-icon { font-size: 24px; line-height: 1; }
.start-button-copy { display: flex; flex-direction: column; gap: 2px; }
.start-button-copy strong { font: 900 22px/1 var(--font-display); letter-spacing: .06em; }
.start-button-copy small { font: 700 12px/1.2 var(--font-body); letter-spacing: .01em; }
.start-help { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
#screenTitle #btnEndless {
  width: auto; max-width: 100%; min-height: 44px; margin: 0; padding: 5px 18px;
  border-color: transparent; text-decoration: underline; text-underline-offset: 3px;
}
#screenTitle #btnEndless .btn-sub { text-decoration: none; font-weight: 400; letter-spacing: 0; }
#screenTitle .seed-block { padding: 14px 16px; }
#screenTitle .seed-note { margin: 8px 0 0; }
.seed-score { margin: 6px 0 0; color: var(--text-faint); font-size: 11px; }
.seed-score strong { color: var(--amber); }
#screenTitle .field-guide { margin: 0; }
#screenTitle .field-guide > summary {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px;
  list-style: none;
}
#screenTitle .field-guide > summary::-webkit-details-marker { display: none; }
.guide-symbol {
  display: grid; place-items: center; flex: 0 0 36px; height: 36px;
  border: 1px solid rgba(184,239,221,.5); border-radius: 10px;
  font: 900 21px/1 var(--font-display); color: var(--lime);
}
.guide-summary-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guide-summary-copy strong { font-size: 14px; letter-spacing: .04em; }
#screenTitle .guide-summary-note { padding: 0; font-size: 12px; line-height: 1.35; }
.guide-open { margin-left: auto; flex: 0 0 auto; font: 800 11px var(--font-body); letter-spacing: .08em; color: var(--lime); }
#screenTitle .field-guide[open] .guide-open { visibility: hidden; }
@media (max-width: 640px) {
  #screenTitle .logo-row { justify-content: flex-start; }
  #screenTitle .start-row { padding: 18px 14px; }
  #screenTitle #btnStart { width: 100%; }
  #screenTitle .field-guide > summary { gap: 10px; padding: 12px; }
  .guide-open { font-size: 10px; }
}
.guide-card { display:flex; align-items:flex-start; gap:9px; padding:12px; background:#132731; border:1px solid #314650; border-radius:8px; min-width:0; }
.guide-icon { width:70px; height:70px; flex:0 0 70px; background:#0c1b24; border-radius:8px; }
.guide-copy { min-width:0; }
.guide-card h3 { font-size:14px; line-height:1.4; color:#e0f1e9; margin:0 0 7px; }
.guide-card p { margin:0; font-size:13px; line-height:1.65; color:#bfced5; overflow-wrap:break-word; }
#heroCallDesc:empty { display:none; }
@media(max-width:650px) { .guide-grid {grid-template-columns:1fr;} .guide-icon {width:60px;height:60px;flex-basis:60px;} }