/* Astrillion — a night launch in pixels.
   Midnight panels with notched pixel corners (9-slice SVG border-images below), two pixel
   fonts, one warm accent (amber) for actions and numbers, twilight colours for the sky. */
:root {
  --bg: #070a1f;           /* night */
  --panel: #10163d;        /* panel fill (also baked into the frames) */
  --panel-2: #0a0e2c;      /* inset fill */
  --raise: #161e52;        /* raised tile */
  --edge: #2c3a86;         /* panel edge */
  --edge-hi: #5d74d6;
  --ink: #eef1ff;
  --muted: #a2acd9;
  --dim: #6c76ad;
  --amber: #ffc857;        /* the one accent: actions, numbers, the wordmark */
  --amber-deep: #b8742a;   /* button underside */
  --rose: #ff7a9c;
  --cyan: #7ce8ff;
  --ok: #7dffb0;
  --bad: #ff6b81;
  --dup: #ffd23f;
  --shadow: rgba(0, 0, 8, .55);
  --p1: #8fd3ff;           /* common */
  --p2: #ffd23f;           /* uncommon */
  --p3: #ff8ae6;           /* rare */
  --p4: #ff7a2e;           /* legendary */
  --p5: #f4f0ff;           /* astrillion (glows in rainbow, see below) */
  --pixel: "Press Start 2P", ui-monospace, Menlo, monospace;
  --term: "VT323", ui-monospace, Menlo, monospace;
  color-scheme: dark;
  /* notched pixel frames (9-slice): edge colour + fill baked in, generated from 7x7 / 5x5 pixel grids */
  --frame: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='3'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='2'%20y='1'%20width='3'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='1'%20y='2'%20width='5'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='6'%20y='2'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='1'%20y='3'%20width='5'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='6'%20y='3'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='1'%20y='4'%20width='5'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='6'%20y='4'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='2'%20y='5'%20width='3'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%232c3a86'/%3E%3Crect%20x='2'%20y='6'%20width='3'%20height='1'%20fill='%232c3a86'/%3E%3C/svg%3E");
  --frame-hi: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='2'%20y='1'%20width='3'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='2'%20width='5'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='6'%20y='2'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='3'%20width='5'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='6'%20y='3'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='4'%20width='5'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='6'%20y='4'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='2'%20y='5'%20width='3'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='2'%20y='6'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3C/svg%3E");
  --frame-raise: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='3'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='2'%20y='1'%20width='3'%20height='1'%20fill='%23161e52'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='1'%20y='2'%20width='5'%20height='1'%20fill='%23161e52'/%3E%3Crect%20x='6'%20y='2'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='1'%20y='3'%20width='5'%20height='1'%20fill='%23161e52'/%3E%3Crect%20x='6'%20y='3'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='1'%20y='4'%20width='5'%20height='1'%20fill='%23161e52'/%3E%3Crect%20x='6'%20y='4'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='2'%20y='5'%20width='3'%20height='1'%20fill='%23161e52'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%2334459a'/%3E%3Crect%20x='2'%20y='6'%20width='3'%20height='1'%20fill='%2334459a'/%3E%3C/svg%3E");
  --frame-field: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='3'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='2'%20y='1'%20width='3'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='1'%20y='2'%20width='5'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='6'%20y='2'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='1'%20y='3'%20width='5'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='6'%20y='3'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='1'%20y='4'%20width='5'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='6'%20y='4'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='2'%20y='5'%20width='3'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%233b4ba0'/%3E%3Crect%20x='2'%20y='6'%20width='3'%20height='1'%20fill='%233b4ba0'/%3E%3C/svg%3E");
  --frame-field-on: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%20shape-rendering='crispEdges'%3E%3Crect%20x='2'%20y='0'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='1'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='2'%20y='1'%20width='3'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='5'%20y='1'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='2'%20width='5'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='6'%20y='2'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='3'%20width='5'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='6'%20y='3'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='4'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='4'%20width='5'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='6'%20y='4'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='5'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='2'%20y='5'%20width='3'%20height='1'%20fill='%230a0e2c'/%3E%3Crect%20x='5'%20y='5'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='2'%20y='6'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3C/svg%3E");
  --frame-btn: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='5'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='0'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='1'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='2'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='3'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%23ffc857'/%3E%3Crect%20x='1'%20y='4'%20width='3'%20height='1'%20fill='%23ffc857'/%3E%3C/svg%3E");
  --frame-btn-on: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='5'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='0'%20width='3'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='1'%20y='1'%20width='3'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='1'%20y='2'%20width='3'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='1'%20y='3'%20width='3'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%23ffd98a'/%3E%3Crect%20x='1'%20y='4'%20width='3'%20height='1'%20fill='%23ffd98a'/%3E%3C/svg%3E");
  --frame-ghost: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='5'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='0'%20width='3'%20height='1'%20fill='%235d74d6'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%235d74d6'/%3E%3Crect%20x='1'%20y='1'%20width='3'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%235d74d6'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%235d74d6'/%3E%3Crect%20x='1'%20y='2'%20width='3'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%235d74d6'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%235d74d6'/%3E%3Crect%20x='1'%20y='3'%20width='3'%20height='1'%20fill='%2310163d'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%235d74d6'/%3E%3Crect%20x='1'%20y='4'%20width='3'%20height='1'%20fill='%235d74d6'/%3E%3C/svg%3E");
  --frame-ghost-on: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='5'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='0'%20width='3'%20height='1'%20fill='%238fa8ff'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%238fa8ff'/%3E%3Crect%20x='1'%20y='1'%20width='3'%20height='1'%20fill='%231b2463'/%3E%3Crect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%238fa8ff'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%238fa8ff'/%3E%3Crect%20x='1'%20y='2'%20width='3'%20height='1'%20fill='%231b2463'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%238fa8ff'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%238fa8ff'/%3E%3Crect%20x='1'%20y='3'%20width='3'%20height='1'%20fill='%231b2463'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%238fa8ff'/%3E%3Crect%20x='1'%20y='4'%20width='3'%20height='1'%20fill='%238fa8ff'/%3E%3C/svg%3E");
  --frame-danger: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='5'%20shape-rendering='crispEdges'%3E%3Crect%20x='1'%20y='0'%20width='3'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='0'%20y='1'%20width='1'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='1'%20y='1'%20width='3'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='4'%20y='1'%20width='1'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='0'%20y='2'%20width='1'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='1'%20y='2'%20width='3'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='4'%20y='2'%20width='1'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='0'%20y='3'%20width='1'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='1'%20y='3'%20width='3'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='4'%20y='3'%20width='1'%20height='1'%20fill='%23ff6b81'/%3E%3Crect%20x='1'%20y='4'%20width='3'%20height='1'%20fill='%23ff6b81'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 22px/1.3 var(--term);
  background-color: var(--bg);
  background-image: var(--stars-b, none), var(--stars-a, none),
    radial-gradient(60% 40% at 12% 0%, rgba(124, 74, 196, .30), transparent 70%),
    radial-gradient(45% 35% at 100% 100%, rgba(255, 122, 156, .10), transparent 70%),
    linear-gradient(#0b0f2e, var(--bg) 55%);
  background-attachment: fixed;
  padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
  min-height: 100vh; display: flex; flex-direction: column;
}
/* faint CRT scanlines */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 16, .10) 0 1px, transparent 1px 3px);
}
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.5; margin: 0; letter-spacing: .02em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
code, kbd { font-family: var(--term); font-size: 1em; background: var(--panel-2); padding: 0 6px; border: 1px solid var(--edge); }
.px { display: block; image-rendering: pixelated; height: auto; }
.muted { color: var(--muted); }
.small { font-size: 18px; }
.err { color: var(--bad); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber); color: var(--bg); padding: 8px 12px; z-index: 200; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- the sky behind the pages (see ambientSky in app.js) ---------- */
.topbar, main, .footer { position: relative; z-index: 1; }
.sky-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.twinkle { position: absolute; width: 2px; height: 2px; background: #fff; box-shadow: 0 0 4px rgba(200, 230, 255, .8); opacity: .15; animation: twinkle 4s steps(4) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .1; } 50% { opacity: .9; } }
.sky-fx > :not(.twinkle) { position: absolute; left: 0; top: 0; will-change: transform, opacity; transform-origin: 0 50%; }
.sky-fx > .sprite { transform-origin: 50% 50%; }
/* a meteor: a streak drawn along its direction of travel (the head is the right end) */
.streak { height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(207, 227, 255, .85) 80%, #fff); transform-origin: 0 50%; }
.comet-tail { height: 5px; border-radius: 0 3px 3px 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(124, 232, 255, 0), rgba(124, 232, 255, .5) 70%, #fff); box-shadow: 0 0 10px rgba(124, 232, 255, .55); }
.sat-dot { width: 4px; height: 4px; background: #e8ecff; box-shadow: 0 0 3px rgba(232, 236, 255, .8); }
.sprite { image-rendering: pixelated; opacity: .9; }
.sprite .px { width: 100%; }
.puff { width: 4px; height: 4px; background: #ffd9a8; }

/* ---------- layout ---------- */
.topbar, main, .footer { width: 100%; max-width: 720px; margin-inline: auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 20px 0 12px; }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 4px 0; }
.logo .px { width: 18px; }
.wordmark {
  font: 15px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffe3a3 0 40%, var(--amber) 40% 70%, var(--rose) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 2px 0 #000010);
}
nav { display: flex; gap: 2px; }
.nav-btn { background: none; border: 0; padding: 8px 10px 6px; cursor: pointer; color: var(--muted); font: 9px/1.4 var(--pixel); text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid transparent; }
.nav-btn:hover { color: var(--ink); }
.nav-btn[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amber); }
.sound-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 8px; padding: 0; cursor: pointer;
  background: var(--panel-2); color: var(--amber); border: 2px solid var(--edge-hi); border-radius: 0;
  box-shadow: inset -2px -2px 0 var(--edge), 3px 3px 0 var(--shadow);
}
.sound-btn svg { display: block; image-rendering: pixelated; }
.sound-btn:hover, .sound-btn:focus-visible { border-color: var(--amber); }
.sound-btn:active { transform: translate(2px, 2px); box-shadow: inset -2px -2px 0 var(--edge), 1px 1px 0 var(--shadow); }
.sound-btn[aria-pressed="false"] { color: var(--dim); }
main { flex: 1; padding: 6px 0 40px; }
.page-title { font-size: 15px; margin: 14px 0 18px; color: var(--amber); text-shadow: 2px 2px 0 #000010; }
.footer { padding: 16px 0 24px; color: var(--dim); font-size: 18px; border-top: 2px dotted rgba(93, 116, 214, .35); }
.notice { background: var(--amber); color: var(--bg); padding: 8px 14px; margin-bottom: 12px; }
body.launching { overflow: hidden; }

/* ---------- panels: notched pixel frames ---------- */
.panel {
  margin-bottom: 18px; background: none;
  border: 6px solid var(--edge); border-image: var(--frame) 3 fill / 6px / 0 stretch;
  filter: drop-shadow(0 6px 0 var(--shadow));
}
.panel.hi { border-image-source: var(--frame-hi); }
.titlebar {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font: 8px/1.6 var(--pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  padding: 10px 14px 9px; margin: 0 0 0; border-bottom: 2px dotted rgba(93, 116, 214, .45);
}
.titlebar span:first-child { color: var(--ink); }
.panel-body { padding: 16px 14px; }
.eyebrow { font: 8px/1.6 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.lead { color: var(--ink); font-size: 24px; }

/* ---------- buttons ---------- */
.btn {
  font: 10px/1.4 var(--pixel); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: 10px 14px;
  color: var(--ink); background: none;
  border: 4px solid var(--edge-hi); border-image: var(--frame-ghost) 2 fill / 4px / 0 stretch;
  filter: drop-shadow(0 4px 0 var(--shadow)); transition: transform .06s steps(2);
}
.btn:hover { border-image-source: var(--frame-ghost-on); }
.btn:active { transform: translateY(2px); filter: drop-shadow(0 2px 0 var(--shadow)); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { color: #2a1606; border-image-source: var(--frame-btn); filter: drop-shadow(0 4px 0 var(--amber-deep)); }
.btn-primary:hover { border-image-source: var(--frame-btn-on); }
.btn-primary:active { filter: drop-shadow(0 2px 0 var(--amber-deep)); }
.btn-danger { color: #2a0008; border-image-source: var(--frame-danger); }
.btn-danger:hover { border-image-source: var(--frame-danger); filter: brightness(1.08) drop-shadow(0 4px 0 var(--shadow)); }
.btn-lg { padding: 14px 20px; font-size: 12px; }
.btn-sm { padding: 8px 10px; font-size: 9px; }
.btn-ghost { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.chip { display: inline-block; font: 7px/1.8 var(--pixel); padding: 2px 8px; background: var(--panel-2); color: var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.chip-done { color: var(--ok); }
.chip-bad { color: var(--bad); }
.pill { display: inline-block; font: 8px/1.9 var(--pixel); padding: 1px 7px; border: 2px solid currentColor; text-transform: uppercase; white-space: nowrap; letter-spacing: .04em; }
.p1 { color: var(--p1); } .p2 { color: var(--p2); } .p3 { color: var(--p3); } .p4 { color: var(--p4); } .p5 { color: var(--p5); }

/* ---------- Astri: dialog boxes ---------- */
.dialog { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.portrait {
  width: 64px; padding: 4px; background: none;
  border: 6px solid var(--edge); border-image: var(--frame-raise) 3 fill / 6px / 0 stretch;
}
.portrait .px { width: 100%; }
.portrait .blink { display: none; }
.portrait.blinking .open { display: none; }
.portrait.blinking .blink { display: block; }
.speech { min-width: 0; }
.speaker { display: block; font: 8px/1.6 var(--pixel); letter-spacing: .12em; color: var(--amber); margin: 2px 0 4px; }
.speech p { font-size: 22px; line-height: 1.25; min-height: 2.5em; }
.speech .more { color: var(--amber); animation: blink 1s steps(2) infinite; margin-left: 4px; font-size: 16px; }

/* ---------- Home ---------- */
.mission { margin-bottom: 18px; }
.mission-body { padding: 16px 14px 18px; display: grid; gap: 14px; }
.mission-title { font-size: clamp(20px, 6vw, 30px); color: var(--amber); text-shadow: 3px 3px 0 #000010; line-height: 1.25; }
.today-score { font-size: 24px; }
.today-score strong { color: var(--amber); font-weight: 400; }
.today-score .pts { font: 12px/1.6 var(--pixel); }
.mission-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mission-actions .muted { font-size: 19px; }

/* the launch pad at twilight (home) */
.pad-window { position: relative; height: 200px; overflow: hidden; background: #070a22; image-rendering: pixelated; }
.pw-sky { position: absolute; inset: 0; background: linear-gradient(to top, #ffb07a 0%, #ff8a8a 10%, #c8649e 24%, #6f4aa4 42%, #2f2f7d 62%, #121845 82%, #0a0d2c 100%); }
.pad-window.flown .pw-sky { background: linear-gradient(to top, #4a3a8f 0%, #262866 22%, #121845 50%, #080b26 100%); }
.pw-stars { position: absolute; inset: 0 0 40% 0; background-image: var(--stars-a); opacity: .8; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.pw-ridge { position: absolute; left: 0; right: 0; background-repeat: repeat-x; background-position: 0 100%; }
.pw-ridge.far { bottom: 22px; height: 56px; background-image: var(--ridge-far); background-size: auto 56px; }
.pw-ridge.near { bottom: 22px; height: 34px; background-image: var(--ridge-near); background-size: auto 34px; }
.pw-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(#3a2f72 0 2px, #181540 2px 8px, #100e2e 8px); }
.pw-ground::after { content: ""; position: absolute; left: calc(50% - 40px); top: 0; width: 80px; height: 4px; background: repeating-linear-gradient(90deg, var(--amber) 0 8px, #1b1640 8px 16px); }
.pw-city { position: absolute; bottom: 22px; width: 120px; }
.pw-city.l { left: 4%; } .pw-city.r { right: 3%; width: 96px; }
.pw-tower { position: absolute; bottom: 22px; left: calc(50% - 46px); width: 24px; }
.pw-rocket { position: absolute; bottom: 26px; left: 50%; width: 34px; transform: translateX(-50%); animation: idle 1.6s steps(2) infinite; }
.pw-rocket .px { width: 34px; }
.pw-steam { position: absolute; bottom: 22px; left: calc(50% - 30px); width: 60px; height: 12px; background: radial-gradient(closest-side, rgba(230, 222, 250, .55), transparent); animation: steam 2.4s steps(4) infinite; }
.pw-astri { position: absolute; bottom: 22px; left: calc(50% + 30px); width: 22px; }
.pw-astri .px { width: 22px; }
.pw-astri .wave { display: none; }
.pad-window:hover .pw-astri .wave, .pw-astri.waving .wave { display: block; }
.pad-window:hover .pw-astri .still, .pw-astri.waving .still { display: none; }
.pw-dest { position: absolute; top: 18px; right: 12%; display: grid; justify-items: center; gap: 4px; animation: bob 3s steps(2) infinite; }
.pw-dest .px { filter: drop-shadow(0 0 8px rgba(255, 220, 160, .35)); }
.pw-trail { position: absolute; left: 50%; bottom: 30px; width: 38%; height: 55%; border-top: 3px dotted rgba(255, 200, 87, .55); border-right: 3px dotted rgba(255, 200, 87, .55); border-radius: 0 100% 0 0; }

.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; }
.stat {
  padding: 10px 6px; display: grid; justify-items: center; align-content: center; text-align: center; gap: 4px; background: none;
  border: 6px solid var(--edge); border-image: var(--frame-raise) 3 fill / 6px / 0 stretch;
}
.stat-val { font: 11px/1.6 var(--pixel); color: var(--amber); }
.stat-label { font-size: 17px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-strip.big { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.loading { display: flex; align-items: center; gap: 12px; padding: 60px 0; color: var(--muted); justify-content: center; }
.spinner { width: 14px; height: 14px; background: var(--amber); animation: blink .6s steps(2) infinite; }
.error-card h2 { font-size: 12px; margin-bottom: 10px; color: var(--bad); }
.error-card .panel-body { display: grid; gap: 12px; justify-items: start; }

/* ---------- Flight manual ---------- */
.manual-intro { margin-bottom: 18px; }
.rules { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.rules li { padding-left: 22px; position: relative; }
.rules li::before { content: "▸"; position: absolute; left: 0; color: var(--amber); }
.fuel-table { width: 100%; border-collapse: collapse; }
.fuel-table th, .fuel-table td { text-align: left; padding: 8px 4px; border-bottom: 2px dotted rgba(93, 116, 214, .35); vertical-align: middle; }
.fuel-table td.km { color: var(--amber); white-space: nowrap; }
.fuel-table td.what { color: var(--muted); }
.fuel-table tr:last-child th, .fuel-table tr:last-child td { border-bottom: 0; }
.route-list { list-style: none; margin: 0; padding: 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 8px; }
.route-list li { display: grid; justify-items: center; align-content: end; gap: 4px; text-align: center; }
.route-name { font-size: 18px; line-height: 1; }
.route-pts { font-size: 18px; line-height: 1; color: var(--amber); }
.route-ly { font-size: 16px; line-height: 1; color: var(--muted); }
.faq { display: grid; gap: 6px; }
.faq details { border-bottom: 2px dotted rgba(93, 116, 214, .35); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▼"; font-size: 14px; color: var(--muted); }
.faq details[open] summary::after { content: "▲"; }
.faq details p { margin: 0 0 10px; color: var(--muted); }
.manual-actions { display: flex; gap: 12px; align-items: center; margin: 4px 0 22px; }

/* ---------- Game ---------- */
.screen.narrow { max-width: 600px; margin-inline: auto; }
.game-panel .panel-body { position: relative; }
.game-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.game-head h2 { font-size: clamp(11px, 3.1vw, 13px); line-height: 1.8; }
.timer { display: grid; justify-items: center; padding: 6px 10px; min-width: 84px; background: none; border: 6px solid var(--edge); border-image: var(--frame-raise) 3 fill / 6px / 0 stretch; }
#timer-num { font: 26px/1 var(--pixel); color: var(--amber); }
#timer-num.pulse { animation: timer-pulse .45s ease-out; }
@keyframes timer-pulse { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #timer-num.pulse { animation: none; } }
.timer-label { font: 7px/1.8 var(--pixel); color: var(--muted); text-transform: uppercase; }
.timer.urgent #timer-num { color: var(--bad); animation: blink 1s steps(2) infinite; }
.timer-track { height: 8px; background: var(--panel-2); margin: 14px 0 14px; box-shadow: inset 0 0 0 2px var(--edge); padding: 2px; }
#timer-bar { height: 100%; background: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 8px); transform-origin: left; }
.game-panel:has(.timer.urgent) #timer-bar { background: repeating-linear-gradient(90deg, var(--bad) 0 6px, transparent 6px 8px); }
.answer-form { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 6px; border: 6px solid var(--edge); border-image: var(--frame-field) 3 fill / 6px / 0 stretch; }
.answer-form:focus-within { border-image-source: var(--frame-field-on); }
.caret { padding: 0 2px; color: var(--amber); font-size: 28px; animation: blink 1s steps(2) infinite; }
.answer-form input { flex: 1; min-width: 0; font: 28px/1 var(--term); color: var(--ink); background: transparent; border: 0; padding: 8px 4px; outline: none; caret-color: var(--amber); }
.answer-form input::placeholder { color: var(--dim); }
.answer-form .btn { filter: none; }
.feedback { min-height: 1.5em; margin: 12px 0 0; padding: 4px 10px; font-size: 24px; display: flex; align-items: center; border-left: 4px solid transparent; }
.feedback.correct { color: var(--ok); border-left-color: var(--ok); background: rgba(125, 255, 176, .07); }
.feedback.duplicate { color: var(--dup); border-left-color: var(--dup); background: rgba(255, 210, 63, .07); }
.feedback.invalid { color: var(--bad); border-left-color: var(--bad); background: rgba(255, 107, 129, .08); }
.feedback.late { color: #2a1606; background: var(--amber); justify-content: center; font: 10px/1.6 var(--pixel); text-transform: uppercase; border-left-color: var(--amber); }
.feedback.pop { animation: pop .18s steps(3); }
.feedback.invalid.pop { animation: shake .3s steps(4); }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; background: rgba(10, 14, 44, .92); text-align: center; z-index: 2; }
.countdown .cd-say { font-size: 20px; color: var(--muted); }
.countdown .cd-num { font: 44px/1 var(--pixel); color: var(--amber); text-shadow: 4px 4px 0 #000010; animation: pop .25s steps(3); }
.fuel-bay { margin-top: 4px; }
.bay-label { font: 8px/1.6 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 2px 8px; }
.accepted { list-style: none; margin: 0; padding: 0; max-height: 32vh; min-height: 2.6rem; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; overscroll-behavior: contain; }
.accepted:empty::before { content: "Every answer you name loads a fuel cell here."; color: var(--dim); padding: 2px; }
.accepted li { background: var(--raise); box-shadow: inset 0 0 0 2px rgba(125, 255, 176, .55); color: var(--ink); padding: 2px 10px; animation: pop .18s steps(3); }
.accepted li.flash { animation: flash .6s steps(4); }
.game-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
#screen-game.over .answer-form { opacity: .5; }

/* ---------- Launch (full screen) ---------- */
.launch { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #05061a; --base: 120px; }
.scene { position: absolute; inset: 0; background: #05061a; }
.stars { position: absolute; inset: 0; background-repeat: repeat; }
.stars.s1 { background-image: var(--stars-a); background-position: 0 var(--star-y1, 0); }
.stars.s2 { background-image: var(--stars-b); background-position: 0 var(--star-y2, 0); }
.world { position: absolute; left: 0; right: 0; bottom: 0; height: 0; will-change: transform; }
.atmo { position: absolute; left: 0; right: 0; bottom: var(--base); background: linear-gradient(to top, #ffb07a 0%, #ff8a8a 5%, #c8649e 12%, #6f4aa4 24%, #3a378a 38%, #1d2463 56%, rgba(13, 17, 52, .7) 76%, rgba(5, 6, 26, 0) 100%); }
.ridge { position: absolute; left: 0; right: 0; bottom: var(--base); background-repeat: repeat-x; background-position: 0 100%; }
.ridge.far { height: 84px; background-image: var(--ridge-far); background-size: auto 84px; }
.ridge.near { height: 52px; background-image: var(--ridge-near); background-size: auto 52px; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--base); background: linear-gradient(#3a2f72 0 3px, #1b1846 3px 14px, #110f30 14px); }
.pad { position: absolute; left: 50%; top: 0; width: 120px; height: 6px; transform: translateX(-50%); background: repeating-linear-gradient(90deg, var(--amber) 0 10px, #1b1640 10px 20px); }
.tower { position: absolute; bottom: var(--base); left: calc(50% - 92px); width: 44px; }
.tower-light { position: absolute; bottom: calc(var(--base) + 134px); left: calc(50% - 92px); width: 6px; height: 6px; background: #ff5f6d; animation: blink 1.2s steps(2) infinite; }
.city { position: absolute; bottom: var(--base); width: 180px; }
.city.l { left: 0; } .city.r { right: 0; width: 150px; }
.cloud { position: absolute; width: 120px; opacity: .9; }
.dest { position: absolute; display: grid; justify-items: center; gap: 3px; transform: translateY(50%); text-align: center; max-width: 42%; }
.dest.left { left: max(10px, 5%); }
.dest.right { right: max(10px, 5%); }
.dest .px { filter: drop-shadow(0 0 10px rgba(255, 230, 190, .18)); }
.dest-name { font: 9px/1.5 var(--pixel); color: var(--ink); text-shadow: 2px 2px 0 #000010; text-transform: uppercase; margin-top: 4px; }
.dest-pts { font-size: 18px; color: var(--amber); line-height: 1; }
.dest-ly { font-size: 16px; line-height: 1; color: var(--muted); }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.rocket { position: absolute; left: 50%; bottom: var(--base); width: 56px; margin-left: -28px; --flame: 1; will-change: transform; }
.rocket .rocket-body { width: 56px; position: relative; z-index: 1; }
.rocket .flame { position: absolute; left: 50%; top: 100%; width: 34px; transform: translate(-50%, -6px) scaleY(var(--flame)); transform-origin: top center; display: none; }
.rocket .flame .px { width: 34px; }
.rocket .flame-1 { position: absolute; top: 0; left: 0; animation: flicker .16s steps(1) infinite; }
.rocket.thrust .flame { display: block; }
.rocket.thrust.boost .rocket-body { animation: shake-x .12s steps(2) infinite; }

/* HUD */
.launch-hud { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 2; max-width: 720px; margin: 0 auto; display: grid; gap: 8px; pointer-events: none; }
.hud-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hud-top > * { pointer-events: auto; }
.hud-stage { display: flex; align-items: center; gap: 8px; background: rgba(10, 14, 44, .78); padding: 6px 10px; box-shadow: inset 0 0 0 2px var(--edge); min-width: 0; }
.hud-label { font: 7px/1.6 var(--pixel); color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; }
#hud-stage { font: 400 20px/1 var(--term); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: flex; gap: 3px; }
.pip { width: 8px; height: 8px; box-shadow: inset 0 0 0 2px currentColor; opacity: .5; }
.pip.on { background: currentColor; opacity: 1; }
.launch-skip { background: rgba(10, 14, 44, .6); }
.odometer { justify-self: center; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 8px 16px 10px; background: rgba(10, 14, 44, .72); box-shadow: inset 0 0 0 2px var(--edge); max-width: 100%; }
#hud-km { font-weight: 400; color: var(--amber); white-space: nowrap; }
#hud-km .odo-num { font: 20px/1.1 var(--pixel); text-shadow: 2px 2px 0 #000010; }
#hud-km .odo-unit { font: 22px/1 var(--term); color: var(--ink); }
.odo-cp { font-size: 19px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.odo-cp .hud-label { color: var(--dim); }
#hud-cp { color: var(--ink); }
.launch-banner { position: absolute; left: 50%; top: 31%; transform: translateX(-50%); z-index: 3; width: max-content; max-width: calc(100% - 32px); text-align: center;
  font: 12px/1.6 var(--pixel); color: var(--amber); text-shadow: 2px 2px 0 #000010; text-transform: uppercase; opacity: 0; pointer-events: none; }
.launch-banner.show { opacity: 1; animation: banner-pop .25s steps(3); }
.launch-banner.count { font-size: 40px; top: 36%; }
.launch-banner.reach { color: var(--ink); background: rgba(10, 14, 44, .85); padding: 8px 12px; box-shadow: inset 0 0 0 2px var(--amber); }
.launch-banner.stage { color: var(--cyan); }

/* the stage being burned: Astri on comms + all of its answers at once; earlier stages recapped */
.fuel { position: absolute; left: 10px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 2; display: flex; flex-direction: column; gap: 4px;
  width: min(calc(100% - 20px), 460px); max-height: max(110px, calc(var(--base) - 16px)); overflow: hidden; }
.fuel:empty { display: none; }
.fuel-done { flex: none; display: flex; flex-wrap: wrap; gap: 2px 12px; background: rgba(10, 14, 44, .82); padding: 2px 8px; font-size: 17px; line-height: 1.2; }
.fuel-done b { font-weight: 400; color: var(--ink); white-space: nowrap; }
.fuel-now { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; background: rgba(10, 14, 44, .92); box-shadow: inset 0 0 0 2px var(--p1); padding: 8px 10px; animation: pop .2s steps(3); }
.fuel-say { display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 1.1; color: var(--ink); }
.fuel-say .px { width: 26px; flex: none; }
.fuel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; font-size: 20px; line-height: 1.1; }
.fuel-head b { font-weight: 400; color: var(--amber); white-space: nowrap; }
.fuel-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; overflow: hidden; }
.fuel-chips li { background: var(--raise); box-shadow: inset 0 0 0 2px var(--p1); padding: 0 8px; font-size: 19px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuel-done.r2 { border-left-color: var(--p2); } .fuel-done.r3 { border-left-color: var(--p3); } .fuel-done.r4 { border-left-color: var(--p4); } .fuel-done.r5 { border-left-color: var(--p5); }
.fuel-now.r2, .fuel-now.r2 .fuel-chips li { box-shadow: inset 0 0 0 2px var(--p2); }
.fuel-now.r3, .fuel-now.r3 .fuel-chips li { box-shadow: inset 0 0 0 2px var(--p3); }
.fuel-now.r4, .fuel-now.r4 .fuel-chips li { box-shadow: inset 0 0 0 2px var(--p4); }
.fuel-now.r5, .fuel-now.r5 .fuel-chips li { box-shadow: inset 0 0 0 2px var(--p5), 0 0 12px rgba(214, 160, 255, .6); }
.fuel-chips li.more { box-shadow: none !important; color: var(--muted); }
/* chips light up one by one as the rocket burns them */
.fuel-now { --pc: var(--p1); } .fuel-now.r2 { --pc: var(--p2); } .fuel-now.r3 { --pc: var(--p3); } .fuel-now.r4 { --pc: var(--p4); } .fuel-now.r5 { --pc: var(--p5); }
.fuel-chips li { opacity: .45; }
.fuel-chips li.burnt { opacity: 1; background: color-mix(in srgb, var(--pc) 32%, var(--raise)); animation: pop .18s steps(3); }
.launch-final { position: absolute; inset: 0; z-index: 4; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; background: rgba(5, 6, 26, .62); }
.launch-final:not([hidden]) { animation: fade-in .7s ease-out both; }
.final-panel { width: min(100%, 480px); margin: 0; animation: rise-in .7s ease-out .15s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.final-panel .panel-body { display: grid; justify-items: center; gap: 8px; text-align: center; }
.final-panel .dialog { text-align: left; justify-self: stretch; margin-bottom: 6px; }
.final-art { min-height: 60px; display: grid; place-items: center; margin: 4px 0; }
.final-art .px { filter: drop-shadow(0 0 14px rgba(255, 230, 190, .25)); }
.final-dest { font-size: clamp(15px, 4.6vw, 20px); color: var(--amber); text-shadow: 3px 3px 0 #000010; text-transform: uppercase; }
.final-score { font-size: 26px; }
.final-score strong { font: 20px var(--pixel); color: var(--amber); font-weight: 400; }
.final-panel .btn-row { justify-content: center; margin-top: 10px; }

/* stage breakdown */
.stage-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 20px; }
.stage-table th, .stage-table td { padding: 6px 4px; border-bottom: 2px dotted rgba(93, 116, 214, .35); text-align: left; }
.stage-table td:last-child { text-align: right; color: var(--amber); }

/* ---------- Mission report ---------- */
.hero-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-dest { font: 14px/1.5 var(--pixel); color: var(--ink); text-transform: uppercase; }
.big-score { font: clamp(26px, 8vw, 36px)/1.3 var(--pixel); color: var(--amber); text-shadow: 3px 3px 0 #000010; }
.big-score span { font: 22px var(--term); color: var(--muted); text-shadow: none; }
.mode-note { color: var(--muted); margin: 10px 0 6px; }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.rstat { display: grid; background: var(--panel-2); padding: 8px 10px; box-shadow: inset 0 0 0 2px rgba(44, 58, 134, .8); }
.rstat strong { font: 11px/1.7 var(--pixel); color: var(--amber); font-weight: 400; }
.rstat span { font-size: 18px; color: var(--muted); text-transform: uppercase; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.result-actions .btn { flex: 1 1 160px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-ans { background: var(--raise); box-shadow: inset 0 0 0 2px var(--p1); padding: 2px 10px; }
.chip-ans.r2 { box-shadow: inset 0 0 0 2px var(--p2); } .chip-ans.r3 { box-shadow: inset 0 0 0 2px var(--p3); } .chip-ans.r4 { box-shadow: inset 0 0 0 2px var(--p4); } .chip-ans.r5 { box-shadow: inset 0 0 0 2px var(--p5), 0 0 10px rgba(214, 160, 255, .55); }
.found-group + .found-group { margin-top: 16px; }
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.missed { margin-top: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 2px rgba(44, 58, 134, .8); }
.missed summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; list-style: none; gap: 10px; }
.missed summary::-webkit-details-marker { display: none; }
.missed summary::after { content: "▼"; font-size: 14px; color: var(--muted); }
.missed[open] summary::after { content: "▲"; }
.missed-list { list-style: none; margin: 0; padding: 4px 12px 10px; max-height: 380px; overflow-y: auto; display: grid; grid-template-columns: 1fr; }
.missed-list li { padding: 5px 0; border-bottom: 1px dotted rgba(93, 116, 214, .3); }
.missed-list li:last-child { border-bottom: 0; }
.share-text { width: 100%; font: 18px/1.25 var(--term); color: var(--ink); background: var(--panel-2); border: 2px solid var(--edge-hi); padding: 6px 8px; resize: vertical; }

/* How you compare: bell curve of every player's distance */
.compare { justify-self: stretch; display: grid; gap: 4px; margin-top: 8px; }
.compare-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.compare-head .eyebrow { margin: 0; }
.chip.sample { color: var(--dup); box-shadow: inset 0 0 0 1px currentColor; }
.compare-line { font-size: 24px; }
.compare-line strong { font: 14px/1.5 var(--pixel); color: var(--amber); font-weight: 400; }
.bc-figure { margin: 6px 0 0; }
.bc { position: relative; }
.bc:focus-visible { outline-offset: 6px; }
.bc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bc-area { fill: rgba(124, 232, 255, .08); }
.bc-beaten { fill: rgba(124, 232, 255, .30); }
.bc-line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bc-axis, .bc-tick { stroke: rgba(162, 172, 217, .4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bc text { font: 16px var(--term); fill: var(--muted); }
.bc .bc-you-label { font: 7px var(--pixel); fill: var(--ink); }
.bc-you-line { stroke: var(--amber); stroke-width: 2; }
.bc-you { fill: var(--amber); stroke: var(--panel); stroke-width: 2; }
.bc-cross { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bc-tip { position: absolute; top: -6px; transform: translateX(-50%); display: grid; background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--edge-hi); padding: 2px 8px;
  font-size: 17px; line-height: 1.15; text-align: left; white-space: nowrap; pointer-events: none; }
.bc-tip span { color: var(--muted); }
.bc-figure figcaption { margin-top: 2px; }

/* ---------- Stats ---------- */
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 6px 0; border-bottom: 1px dotted rgba(93, 116, 214, .3); align-items: baseline; }
.h-dest { color: var(--cyan); }
.history strong { font-weight: 400; color: var(--amber); }
.reset { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Dev ---------- */
.dev-card ul { margin: 8px 0; padding-left: 20px; font-size: 18px; }
.dev-err li { color: var(--bad); } .dev-warn li { color: var(--dup); } .dev-note li { color: var(--muted); }
.tests { list-style: none; padding: 0 !important; }
.tests .ok { color: var(--ok); } .tests .fail { color: var(--bad); }

/* ---------- motion (stepped, to feel 8-bit) ---------- */
@keyframes blink { 50% { opacity: 0; } }
@keyframes pop { from { transform: scale(.94); } to { transform: none; } }
@keyframes banner-pop { from { transform: translateX(-50%) scale(.85); } to { transform: translateX(-50%); } }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes shake-x { 50% { transform: translateX(1px); } }
@keyframes flash { 50% { background: var(--ok); color: var(--panel-2); } }
@keyframes idle { 50% { transform: translate(-50%, -2px); } }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes flicker { 50% { opacity: 0; } }
@keyframes steam { 0% { opacity: .2; transform: scaleX(.8); } 50% { opacity: .7; transform: scaleX(1.1); } 100% { opacity: .2; transform: scaleX(.8); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (min-width: 640px) { .missed-list { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
@media (max-width: 520px) {
  body { font-size: 20px; }
  .topbar { padding-top: 14px; }
  .wordmark { font-size: 13px; }
  .nav-btn { padding: 8px 6px 6px; font-size: 8px; }
  .stat-val { font-size: 9px; }
  .stat-label { font-size: 15px; }
  .pad-window { height: 176px; }
  .pw-city.l { width: 96px; } .pw-city.r { width: 76px; }
  .history li { grid-template-columns: 1fr auto; }
  .history li .muted { grid-column: 1 / -1; }
  .dest-name { font-size: 7px; }
  #hud-km .odo-num { font-size: 16px; }
  .portrait { width: 54px; }
  .speech p { font-size: 20px; }
  /* fuel grades: grade + distance on one line, what it means underneath */
  .fuel-table tr { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; border-bottom: 2px dotted rgba(93, 116, 214, .35); padding: 6px 0; }
  .fuel-table tr:last-child { border-bottom: 0; }
  .fuel-table th, .fuel-table td { border-bottom: 0; padding: 2px 4px; }
  .fuel-table td.what { grid-column: 1 / -1; font-size: 18px; }
}


/* ---------- Astrillion: the rarest fuel, and leaving the observable universe ---------- */
.pill.p5, .pip.p5 { animation: astrillion-hue 2.4s linear infinite; text-shadow: 0 0 6px rgba(214, 160, 255, .8); }
.launch-banner.astrillion { color: #fff; text-shadow: 0 0 8px #d58bff, 0 0 18px #6cffd2; animation: astrillion-hue 1.6s linear infinite; }
.scene.warp { animation: warp 1.2s steps(8) 2; }
.scene.beyond { animation: beyond 3.2s steps(16) forwards; }
.scene.beyond .stars { animation: astrillion-hue 4s linear infinite; }
@keyframes astrillion-hue { to { filter: hue-rotate(360deg); } }
@keyframes warp { 50% { filter: brightness(1.8) saturate(1.6); } }
@keyframes beyond {
  0% { filter: none; }
  15% { filter: brightness(3) saturate(0); }
  40% { filter: hue-rotate(120deg) saturate(1.8); }
  70% { filter: hue-rotate(260deg) saturate(1.5); }
  100% { filter: hue-rotate(320deg) saturate(1.3) brightness(1.1); }
}
/* the rocket shakes while Astrillion fuel charges */
.rocket.charging .rocket-body { animation: charge-shake .09s steps(2) infinite; filter: drop-shadow(0 0 6px #d58bff) drop-shadow(0 0 14px #6cffd2); }
@keyframes charge-shake { 50% { transform: translate(2px, -1px); } }
.compare-part { display: grid; gap: 4px; padding-top: 10px; }
.compare-part + .compare-part { margin-top: 8px; border-top: 2px dotted rgba(93, 116, 214, .35); padding-top: 14px; }
.compare-sub { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 18px; }
/* answers found per rarity, in one row */
.rarity-row { list-style: none; margin: 10px 0; padding: 0; width: 100%; justify-self: stretch; align-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.rarity-row li { display: grid; justify-items: center; gap: 6px; padding: 8px 2px; background: var(--raise); box-shadow: inset 0 0 0 2px var(--edge); }
.rarity-row li strong { font: 16px/1 var(--pixel); }
.rarity-row li.none { opacity: .45; }
.rarity-row .pill { font-size: 6px; padding: 1px 4px; }
.rarity-row li.r5:not(.none) { box-shadow: inset 0 0 0 2px var(--p5), 0 0 10px rgba(214, 160, 255, .55); }
/* visit-statistics consent (consent.js): a small popup, centred in the upper middle of the screen, over a dimmed page */
.consent-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; padding: 22vh 16px 16px; /* upper middle */
  background: rgba(3, 4, 18, .62); }
.consent { width: min(100%, 340px); padding: 18px 16px 16px; display: grid; gap: 14px; justify-items: center; text-align: center;
  background: var(--panel); box-shadow: inset 0 0 0 2px var(--amber), 4px 4px 0 var(--shadow); animation: pop .2s steps(3); }
.consent-cookie { font-size: 56px; line-height: 1; margin-bottom: -6px; }
.consent p { margin: 0; font-size: 22px; line-height: 1.2; color: var(--ink); }
.consent-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* phones: a little lower than on computers, still above the middle */
@media (max-width: 520px) { .consent-backdrop { padding-top: 28vh; } }
.site-foot { text-align: center; border-top: 0; padding: 4px 0 18px; }
.link-btn { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--dim); font: inherit; font-size: 16px; text-decoration: underline; }
.link-btn:hover { color: var(--ink); }
.rarity-row li small { font-size: 13px; line-height: 1; }
.fuel-table thead th { font: 8px/1.6 var(--pixel); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.fuel-table td.pts { color: var(--amber); font: 12px/1 var(--pixel); }
.fuel-table td.pts { padding-right: 14px; white-space: nowrap; }
.fuel-table td.pts::after { content: " pts"; font: 16px/1 var(--term); color: var(--muted); }
@media (min-width: 521px) { .fuel-table td.pts::after { content: none; } }
@media (max-width: 520px) { .fuel-table thead, .fuel-table td.what { display: none; } }
.fuel-table thead th:nth-child(2) { padding-right: 14px; }