/* ==========================================================================
   FFX Runner Remaster — site + game chrome
   --------------------------------------------------------------------------
   DESIGN SYSTEM DECLARATION
   Recipe: y2k-retrofuturism (Specialty / Genre school), dark-first.
     skills/UItimate Lander Page/landing-page-system/style-recipes/y2k-retrofuturism.md
   The palette is taken from the game's own 2001 artwork first (Asset > Spec):
     the accent is the same yellow as the original gauge art (#ffd21e), the
     ground is asphalt navy, and the chrome/ice-blue iridescence is the Y2K
     layer that frames the original splash art instead of replacing it.
   Fonts: display = Avenir Next Condensed / Futura (Frutiger-era humanist
     grotesques, both era-correct and locally available, so the page needs no
     webfont request and has no font-swap CLS). Body = Avenir Next. Readouts
     use tabular monospace for the LCD feel of the original gauges.
   Radius: gummy (16 / 24 / 32 / 9999). Depth: dark-mode elevation (lighter
     surfaces), plus one heavy coloured shadow on the primary CTA.
   ========================================================================== */

:root {
  /* palette */
  --ground: #070c13;
  --surface: #0d1622;
  --surface-2: #121e2d;
  --surface-3: #17263a;
  --chrome: #c8d2df;
  --chrome-hi: #f2f5fa;
  --ink: #eaf2fb;
  --ink-dim: #9fb2c8;
  --accent: #ffd21e;
  --accent-ink: #201800;
  --accent-2: #5fc9f8;
  --magenta: #ff66c4;
  --acid: #a8ff00;
  --danger: #ff5a4d;
  --good: #6ee87a;

  --hairline: rgba(200, 210, 223, .16);
  --hairline-soft: rgba(200, 210, 223, .09);
  --panel: rgba(9, 15, 24, .88);
  /* Same colour, no blur needed: used by the HUD, which is drawn over the
     live canvas. --panel stays for the dialogs, where the frame behind is static. */
  --panel-solid: rgba(9, 15, 24, .92);

  /* type */
  --font-display: "Avenir Next Condensed", "Avenir Next", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* geometry */
  --header-h: 56px;
  /* Stage floor, in vh first then svh where supported: an invalid unit would
     otherwise drop the declaration and collapse the stage. The stage itself
     grows to fill the rest of the first viewport (see .stage). */
  --stage-min-h: 340px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* reserved ad heights: fixed, so filling them never shifts layout (CLS 0) */
  --ad-h-title: 90px;
  --ad-h-inline: 140px;

  /* HUD sizing: viewport first, container units where supported (see .stage) */
  --gauge-size: clamp(76px, 15vmin, 150px);
}
@supports (width: 1cqmin) {
  :root { --gauge-size: clamp(64px, 17cqmin, 150px); }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ground);
  scrollbar-color: var(--surface-3) var(--ground);
}
body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.playing { overflow: hidden; }

img { max-width: 100%; }
a { color: var(--accent-2); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
code {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(95, 201, 248, .1);
  color: var(--chrome-hi);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease-out;
}
.skip-link:focus-visible { top: 8px; }

/* ==========================================================================
   Buttons — Default / Hovered / Active / Disabled / Loading
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(200, 210, 223, .3);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.5vmin, 15px);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform .12s ease-out, box-shadow .18s ease-out, background-color .18s ease-out, color .18s ease-out;
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.btn.loading { color: transparent; }
.btn.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--ink);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); background-color: rgba(255, 255, 255, .1); }
  .btn:active { transform: scale(.97); }
}

.btn.primary {
  border-color: transparent;
  background: linear-gradient(180deg, #ffe066, var(--accent) 55%, #e8b400);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 14px 28px rgba(255, 210, 30, .26);
}
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { background: linear-gradient(180deg, #fff0a3, #ffe066 55%, var(--accent)); }
}
.btn.primary:active { box-shadow: inset 0 2px 6px rgba(120, 80, 0, .35); }

.btn.ghost {
  background: rgba(255, 255, 255, .04);
  border-color: var(--hairline);
  color: var(--chrome);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn.ghost:hover { background: rgba(95, 201, 248, .15); color: var(--chrome-hi); }
}

.btn-sm { min-height: 36px; padding: 8px 16px; font-size: 12px; }
.btn-hero { min-height: 58px; padding: 18px 48px; font-size: clamp(14px, 1.8vmin, 18px); letter-spacing: .12em; }

.link-btn {
  border: 0;
  background: none;
  padding: 4px 2px;
  color: var(--accent-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 32px;
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: rgba(7, 12, 19, .78);
  border-bottom: 1px solid var(--hairline-soft);
  backdrop-filter: blur(10px) saturate(1.2);
}
.site-nav {
  max-width: 1360px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: 800; }
.brand-mark { border-radius: 7px; }
.brand-name { font-size: clamp(12px, 3.2vw, 16px); }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 22px);
  margin: 0;
  margin-left: auto;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--chrome-hi); border-bottom-color: var(--accent); }

/* The nav collapses on narrow screens, but the Play call to action stays: it is
   the whole point of the landing page, and it is the only route into play.html
   above the fold on a phone. */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}

/* ==========================================================================
   Play section: document hero + game stage
   ========================================================================== */

/* Hero + stage together fill the first viewport, so the title screen is one
   complete screen instead of something you scroll to reach. The stage takes the
   leftover height; main.js then fits the renderer to that exact box. */
.play-section {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Header + hero + stage + note = exactly one viewport. min-height (not height)
     so a very short or very narrow viewport grows the section and scrolls
     instead of clipping the stage. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  border-bottom: 1px solid var(--hairline-soft);
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(95, 201, 248, .16), transparent 70%),
    radial-gradient(760px 380px at 88% 8%, rgba(255, 102, 196, .1), transparent 72%),
    var(--ground);
}
.page-hero {
  flex: 0 0 auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(12px, 1.8vw, 22px) clamp(16px, 4vw, 32px) clamp(8px, 1vw, 12px);
  text-align: center;
}
.eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.page-hero h1 {
  margin: 0 auto clamp(6px, 1vw, 10px);
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  background: linear-gradient(180deg, var(--chrome-hi) 30%, var(--chrome) 70%, #8fa3bb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin: 0 auto;
  max-width: 68ch;
  color: var(--ink-dim);
  font-size: clamp(14px, 1.15vw, 17px);
  text-wrap: pretty;
}
.hero-proof {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* --- the cabinet screen ------------------------------------------------- */

.stage {
  position: relative;
  width: 100%;
  /* Fills the rest of the first viewport, with a floor for short viewports and
     a ceiling so a 4K screen does not rasterise a 14-megapixel canvas. */
  flex: 1 1 auto;
  height: auto;
  min-height: var(--stage-min-h);
  max-height: 1400px;
  overflow: hidden;
  background: #05080e;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  isolation: isolate;
  container-type: size;
  container-name: stage;
}
#scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* CRT chrome: vignette + faint scanlines, under the HUD and under every dialog.
   Purely decorative, so it can never intercept a click. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Scanlines were painted over the live game permanently; they now belong to
     the retro option only. */
  background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(3, 6, 12, .45) 100%);
  opacity: .5;
}
.stage[data-retro="true"]::before {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3, 6, 12, .72) 100%);
  opacity: .9;
}
.stage[data-quality="low"]::before { background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(3, 6, 12, .6) 100%); }

.stage-note {
  flex: 0 0 auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 32px) clamp(14px, 2vw, 22px);
  color: var(--ink-dim);
  font-size: 13px;
  text-align: center;
}

/* ==========================================================================
   HUD (IDs are written by src/hud.js — never rename)
   ========================================================================== */

#hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

.gauge {
  position: absolute;
  top: clamp(8px, 1.6vmin, 20px);
  left: clamp(8px, 1.6vmin, 20px);
  width: var(--gauge-size);
  height: var(--gauge-size);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}
.gauge-right { left: auto; right: clamp(8px, 1.6vmin, 20px); }
.gauge img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --fill (0..1) reveals the lit band of the 128x128 original artwork. */
.gauge-fill {
  --fill: 1;
  clip-path: inset(36% calc(94% - var(--fill) * 88%) 37% 6%);
}
.gauge.low { animation: gaugeBlink .45s steps(1) infinite; }
@keyframes gaugeBlink { 50% { opacity: .25; } }

#readout {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 2vmin, 22px);
  transform: translateX(-50%);
  display: flex;
  gap: clamp(10px, 2.4vmin, 34px);
  padding: 8px 20px;
  /* Opaque enough that a live backdrop blur added nothing but cost: three of
     these sit over a canvas that repaints every frame (performance.md). */
  background: var(--panel-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}
.stat { display: flex; align-items: baseline; gap: 6px; }
.stat .k { font-size: 10px; letter-spacing: .14em; opacity: .6; }
.stat .v {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2.4vmin, 26px);
  font-weight: 700;
  color: var(--accent);
}
.stat .u { font-size: 10px; opacity: .55; }

#objective {
  position: absolute;
  top: clamp(8px, 1.6vmin, 20px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--panel-solid);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-pill);
  font-size: clamp(11px, 1.5vmin, 14px);
  letter-spacing: .04em;
  white-space: nowrap;
}

#compass {
  position: absolute;
  right: clamp(8px, 1.6vmin, 20px);
  bottom: clamp(8px, 2vmin, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
#compass .dial {
  width: clamp(48px, 6.5vmin, 76px);
  height: clamp(48px, 6.5vmin, 76px);
  border-radius: 50%;
  background: var(--panel-solid);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
}
#compass .needle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 22px solid var(--accent);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  transform-origin: 50% 62%;
}
#compass span { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }

#toast {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(18px, 3vmin, 34px);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity .18s ease;
}
#toast.show { opacity: 1; }

/* ==========================================================================
   Overlays / dialogs
   ========================================================================== */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(8px, 1.6vmin, 18px);
  background: radial-gradient(ellipse at center, rgba(6, 12, 22, .74), rgba(3, 6, 12, .95));
  backdrop-filter: blur(3px);
}
#menu, #setup, #help, #pause, #gameover, #win {
  overflow-y: auto;
  overscroll-behavior: contain;
}
#unsupported { text-align: center; }

.panel {
  position: relative;
  width: min(94vw, 460px);
  padding: clamp(18px, 3vmin, 34px) clamp(18px, 3.6vmin, 44px);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.panel.wide { width: min(94vw, 560px); }
.panel h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vmin, 34px);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.panel h2.good { color: var(--good); }
.panel h3.sub-title { margin: 18px 0 10px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.panel p { margin: 12px 0 0; color: var(--ink); opacity: .9; line-height: 1.55; font-size: clamp(13px, 1.6vmin, 15px); }
.panel-sub { margin: 0 0 14px !important; color: var(--ink-dim) !important; font-size: 13px !important; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.noscript-panel { margin: auto; }
.unlock-note { color: var(--acid) !important; font-size: 13px !important; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head h2 { margin: 0; }

.bar {
  width: min(70vw, 340px);
  height: 10px;
  margin: 14px auto 0;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--good));
  transition: width .2s ease;
}

/* ==========================================================================
   Title screen
   ========================================================================== */

#menu {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: radial-gradient(ellipse at 30% 20%, rgba(9, 20, 34, .96), rgba(3, 6, 12, .99));
}

.title-shell {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1.02fr) minmax(330px, .98fr);
  gap: clamp(8px, 1.4vw, 20px);
  padding: clamp(8px, 1.4vw, 18px);
}

.title-art {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.splash-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.title-splash { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Targeted gradient, not a full-screen wash: the art stays visible and the
   wordmark always sits on a readable ground. */
.title-lockup {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: clamp(14px, 3vmin, 30px) clamp(14px, 3vmin, 30px) clamp(12px, 2.4vmin, 22px);
  background: linear-gradient(to top, rgba(4, 8, 14, .97) 12%, rgba(4, 8, 14, .72) 52%, rgba(4, 8, 14, 0));
}
.title-logo { width: clamp(28px, 4vmin, 44px); height: auto; }
.title-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 5.4vmin, 62px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--chrome-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .6);
}
.title-wordmark span {
  margin-left: .28em;
  color: var(--accent);
  -webkit-text-stroke: 1px rgba(255, 255, 255, .35);
}
.title-wordmark.small { font-size: clamp(22px, 4vmin, 34px); text-align: center; }
.title-tag {
  margin-top: 4px;
  font-size: clamp(11px, 1.5vmin, 14px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chrome);
}

.title-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.config-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 8px 4px 2px;
  scrollbar-width: thin;
}
.config-block {
  padding: clamp(10px, 1.6vmin, 16px);
  background: linear-gradient(180deg, rgba(23, 38, 58, .72), rgba(13, 22, 34, .72));
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
}
.config-title {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.config-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.config-note { margin: 0; color: var(--ink-dim); font-size: 12.5px; }

.title-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.title-actions .btn-hero { flex: 1 1 190px; }
.title-hint, .credit { margin: 0; color: var(--ink-dim); font-size: 11.5px; }
.credit { opacity: .75; }

/* --- car picker ---------------------------------------------------------- */

.car-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.car-chip {
  width: 100%;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-soft);
  background: rgba(255, 255, 255, .035);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease-out, border-color .18s ease-out, background-color .18s ease-out;
}
.car-chip strong { font-size: 14px; letter-spacing: .02em; }
.car-chip small { color: var(--ink-dim); font-size: 11.5px; line-height: 1.35; }
.car-chip .chip-state {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acid);
}
.car-chip[aria-checked="true"] {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(255, 210, 30, .2), rgba(255, 210, 30, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px rgba(255, 210, 30, .16);
}
.car-chip[aria-checked="true"] strong { color: var(--accent); }
.car-chip[disabled] { opacity: .55; cursor: not-allowed; }
.car-chip[disabled] .chip-state { color: var(--ink-dim); }
@media (hover: hover) and (pointer: fine) {
  .car-chip:not([disabled]):hover { transform: translateY(-1px); border-color: var(--accent-2); }
}
.car-inline-detail { margin: 10px 0 0; color: var(--ink-dim); font-size: 12.5px; line-height: 1.5; }

.paint-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.swatches { display: flex; gap: 8px; }
.swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(200, 210, 223, .4);
  cursor: pointer;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .5), 0 4px 10px rgba(0, 0, 0, .4);
  transition: transform .12s ease-out, border-color .15s ease-out;
}
.swatch[aria-checked="true"] { border-color: var(--accent); transform: scale(1.1); }
@media (hover: hover) and (pointer: fine) { .swatch:hover { transform: scale(1.08); } }

/* --- settings form ------------------------------------------------------- */

.options-form { display: flex; flex-direction: column; gap: 10px; }
.opt-row { display: flex; flex-direction: column; gap: 5px; }
.opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.opt-label { font-size: 13px; font-weight: 600; }
.opt-impact { font-size: 11.5px; color: var(--ink-dim); }

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--hairline-soft);
  align-self: flex-start;
  max-width: 100%;
  flex-wrap: wrap;
}
.seg-btn {
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, transform .1s ease-out;
}
.seg-btn[aria-checked="true"] {
  background: linear-gradient(180deg, #ffe066, var(--accent));
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.seg-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .seg-btn:not([aria-checked="true"]):hover { color: var(--chrome-hi); background: rgba(255, 255, 255, .08); }
}

.opt-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 40px; }
.opt-toggle input {
  appearance: none;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--hairline);
  position: relative;
  cursor: pointer;
  transition: background-color .18s ease-out;
}
.opt-toggle input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, var(--chrome));
  transition: transform .18s ease-out;
}
.opt-toggle input:checked { background: linear-gradient(180deg, #ffe066, var(--accent)); border-color: transparent; }
.opt-toggle input:checked::after { transform: translateX(20px); }
.opt-toggle-text { display: flex; flex-direction: column; }

/* ==========================================================================
   Garage (optional deep-dive with the live 3D preview)
   ========================================================================== */

.setup-panel {
  width: min(96vw, 900px);
  max-height: min(92vh, 820px);
  max-height: min(92svh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  margin-top: 14px;
  text-align: left;
}
.car-column, .options-column { min-width: 0; }
.preview-frame {
  position: relative;
  aspect-ratio: 11 / 7;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(80% 60% at 50% 18%, rgba(95, 201, 248, .22), transparent 70%),
    linear-gradient(180deg, #101c2b, #070d15);
}
#carPreview { display: block; width: 100%; height: 100%; }
.preview-status {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--ink-dim);
  background: rgba(4, 8, 14, .8);
  text-align: center;
}
.car-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.car-list .car-chip { min-height: 52px; }
.car-detail {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 210, 30, .07);
  color: var(--ink);
  font-size: 13px;
  text-align: left;
}
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (max-width: 820px) {
  .setup-grid { grid-template-columns: 1fr; }
  .setup-panel { max-height: 94svh; }
}

/* ==========================================================================
   Keyboard help
   ========================================================================== */

.keys { margin: 0 auto 6px; border-collapse: collapse; font-size: clamp(12px, 1.7vmin, 15px); }
.keys th, .keys td { padding: 6px 10px; text-align: left; }
.keys th { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink-dim); }
.keys.compact th, .keys.compact td { padding: 4px 8px; }
kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  margin: 0 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: 6px;
  font: inherit;
  font-size: .9em;
}
.hint { max-width: 46ch; margin-left: auto; margin-right: auto; }
.hint b { color: var(--accent); }

/* ==========================================================================
   Pause
   ========================================================================== */

.pause-panel {
  width: min(94vw, 520px);
  max-height: min(92vh, 780px);
  max-height: min(92svh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pause-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pause-sub {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  text-align: left;
}
.pause-sub .options-form { gap: 12px; }

/* ==========================================================================
   Ad slots — reserved height, labelled, never over the HUD or the canvas
   ========================================================================== */

.ad-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: var(--ad-h-inline);
  min-height: var(--ad-h-inline);
  padding: 8px 10px 10px;
  border: 1px dashed var(--hairline-soft);
  border-radius: var(--radius);
  background: rgba(9, 15, 24, .5);
  /* size + layout containment: the unit can never change this box's height */
  contain: strict;
  overflow: hidden;
}
.ad-title { height: var(--ad-h-title); min-height: var(--ad-h-title); }
.ad-inline {
  max-width: 970px;
  margin: 0 auto;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
.ad-label {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: .8;
}
.ad-ins { flex: 1 1 auto; width: 100%; min-height: 0; display: block; background: transparent; }

/* ==========================================================================
   Landing content
   ========================================================================== */

.content-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 92px) clamp(16px, 4vw, 32px);
}
.content-section.alt {
  max-width: none;
  background:
    linear-gradient(180deg, rgba(95, 201, 248, .05), transparent 55%),
    var(--surface);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.content-section.alt > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.content-section h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.impact {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--chrome);
  text-wrap: pretty;
}
.prose { max-width: 68ch; }
.prose p { margin: 0 0 16px; color: var(--ink-dim); text-wrap: pretty; }
.note { max-width: 72ch; margin: 18px 0 0; color: var(--ink-dim); font-size: 14px; }
.note.small { font-size: 12.5px; }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 22px 0 0;
}
.fact {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
}
.fact dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.fact dd { margin: 4px 0 0; font-size: 14.5px; }

.steps { list-style: none; counter-reset: step; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.steps li {
  position: relative;
  counter-increment: step;
  padding: 16px 18px 16px 62px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.steps h3 { margin: 0 0 4px; font-size: 17px; }
.steps p { margin: 0; color: var(--ink-dim); font-size: 14.5px; }

.pickup-table, .wide-table {
  width: 100%;
  margin: 22px 0 0;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pickup-table caption, .wide-table caption {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.pickup-table th, .pickup-table td, .wide-table th, .wide-table td {
  padding: 10px 12px;
  text-align: left;
  border-top: 1px solid var(--hairline-soft);
}
.pickup-table thead th, .wide-table thead th {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.wide-table tbody th { font-weight: 600; white-space: nowrap; }
.wide-table td:last-child { color: var(--ink-dim); font-size: 13px; }

.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.car-card {
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--hairline-soft);
}
.car-card h3 { margin: 0 0 6px; font-size: 18px; font-family: var(--font-display); letter-spacing: .01em; }
.car-card p { margin: 8px 0 0; color: var(--ink-dim); font-size: 14px; }
.car-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(95, 201, 248, .14);
  color: var(--accent-2) !important;
  font-size: 11px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.car-card.is-original { border-color: rgba(255, 210, 30, .5); }
.car-card.is-original .car-tag { background: rgba(255, 210, 30, .18); color: var(--accent) !important; }
.car-card.is-locked { opacity: .78; }
.car-card.is-locked .car-tag { background: rgba(168, 255, 0, .12); color: var(--acid) !important; }

.faq-list { display: grid; gap: 0; margin: 24px 0 0; }
.faq-item { padding: 18px 0; border-top: 1px solid var(--hairline-soft); }
.faq-item:first-child { border-top: 0; padding-top: 4px; }
.faq-item h3 { margin: 0 0 8px; font-size: 17px; }
.faq-item p { margin: 0; max-width: 78ch; color: var(--ink-dim); text-wrap: pretty; }

.cta-banner {
  padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 32px);
  text-align: center;
  background:
    radial-gradient(720px 320px at 50% 0%, rgba(255, 210, 30, .16), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--ground));
  border-top: 1px solid var(--hairline-soft);
}
.cta-banner h2 {
  margin: 0 auto 10px;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.cta-banner p { margin: 0 0 18px; color: var(--ink-dim); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 32px) 28px;
  background: var(--surface);
  border-top: 1px solid var(--hairline-soft);
}
.footer-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}
.footer-heading {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.footer-copy { margin: 0; color: var(--ink-dim); font-size: 14px; max-width: 46ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink-dim); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-legal {
  max-width: 1120px;
  margin: 26px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink-dim);
  font-size: 12.5px;
}
.footer-date { display: block; margin-top: 6px; opacity: .8; }

/* ==========================================================================
   Responsive: 360px phones up to 4K
   ========================================================================== */

@media (max-width: 1000px) {
  .title-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, .8fr) minmax(0, 1.2fr);
  }
  .title-art { flex-direction: row; align-items: stretch; }
  .splash-frame { flex: 1 1 60%; }
  .ad-title { flex: 0 0 34%; height: auto; min-height: 0; }
}

@media (max-width: 620px) {
  :root {
    --header-h: 52px;
    --stage-min-h: 400px;
    --ad-h-inline: 120px;
  }
  .stage { min-height: var(--stage-min-h); max-height: 820px; }
  /* One scroll area instead of two, and CTA-first: on a phone the primary
     action sits directly under the key art instead of below the settings. */
  .title-shell { height: auto; min-height: 100%; grid-template-rows: none; gap: 10px; }
  .title-art { display: contents; }
  .splash-frame { order: 1; min-height: 180px; max-height: 32vh; max-height: 32svh; }
  .title-config { order: 2; }
  .title-actions { order: -1; }
  .ad-title { order: 3; height: var(--ad-h-title); min-height: var(--ad-h-title); }
  .config-scroll { overflow: visible; }
  .car-picker { grid-template-columns: 1fr; }
  .title-actions .btn-hero { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: 26ch; font-size: clamp(26px, 7.4vw, 34px); }
  .hero-proof { display: none; }
  .steps li { padding-left: 52px; }
}

@media (max-width: 420px) {
  .panel { padding: 16px 14px; }
  .segmented { width: 100%; }
  .seg-btn { flex: 1 1 auto; }
}

@media (min-width: 2000px) {
  .stage { min-height: 620px; }
  .content-section, .page-hero, .stage-note, .footer-grid, .footer-legal { max-width: 1360px; }
  body { font-size: 17px; }
}

/* ==========================================================================
   Preference queries (three independent ones, baked in)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Decorative motion is scoped to the screens that are standing still: the
     title screen, the garage and the pause menu. `body.playing` turns it off, so
     the gameplay frame has nothing moving except the game itself. That is what
     motion.md ("no full-viewport looping backgrounds") and performance.md
     ("only animate transform and opacity", stacked live blurs are not fine) ask
     for, and it keeps the software-rasteriser path in the headless harnesses as
     cheap as it can be. */
  body:not(.playing) .stage::after {
    content: "";
    position: absolute;
    inset: -20% -10%;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(closest-side, rgba(95, 201, 248, .17), transparent) 12% 22% / 34% 46% no-repeat,
      radial-gradient(closest-side, rgba(255, 102, 196, .13), transparent) 82% 68% / 40% 52% no-repeat;
    animation: drift 26s ease-in-out infinite alternate;
  }
  @keyframes drift {
    from { transform: translate3d(-1.2%, -1%, 0) scale(1.02); }
    to { transform: translate3d(1.2%, 1.4%, 0) scale(1.06); }
  }
  body:not(.playing) .btn.primary { animation: jelly 5.5s ease-in-out infinite; }
  @keyframes jelly {
    0%, 88%, 100% { transform: translateY(0) scale(1); }
    92% { transform: translateY(-2px) scale(1.015); }
    96% { transform: translateY(0) scale(.995); }
  }
  .btn.primary:active, .btn.primary:hover { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header, .overlay, .panel {
    backdrop-filter: none;
    background: var(--surface);
  }
  .overlay { background: rgba(4, 8, 14, .98); }
}

@media (prefers-contrast: more) {
  :root { --ink-dim: #cfdcea; --hairline: rgba(255, 255, 255, .5); }
  .overlay, .panel { background: #05080e; }
  .btn { border-color: #fff; }
  .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
}

/* ==========================================================================
   Landing page (index.html) — multi-page split
   --------------------------------------------------------------------------
   The game moved to play.html, so this page is pure marketing + SEO. These
   rules cover the hero, the two-column editorial bands, the feature list and
   the screenshot frames. Everything else (tokens, buttons, content sections,
   fact grid, tables, car cards, FAQ, CTA, footer, ad slot) is shared and
   already defined above.
   ========================================================================== */

/* Buttons are <a> elements on this page, so they must not inherit link
   underlines or the link colour. */
a.btn { text-decoration: none; }
a.btn.primary { color: var(--accent-ink); }
a.btn.ghost { color: var(--chrome); }
a.btn:hover { color: inherit; }
a.btn.primary:hover { color: var(--accent-ink); }
a.btn.ghost:hover { color: var(--chrome-hi); }

.site-header[data-scrolled="true"] {
  background: rgba(7, 12, 19, .94);
  border-bottom-color: var(--hairline);
}
.nav-links a[aria-current="true"] { color: var(--chrome-hi); border-bottom-color: var(--accent); }

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(28px, 5vw, 76px) clamp(16px, 4vw, 32px) clamp(34px, 6vw, 88px);
  border-bottom: 1px solid var(--hairline-soft);
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(95, 201, 248, .16), transparent 70%),
    radial-gradient(760px 380px at 88% 8%, rgba(255, 102, 196, .1), transparent 72%),
    var(--ground);
}
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.hero-copy h1 {
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  max-width: 26ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
  background: linear-gradient(180deg, var(--chrome-hi) 30%, var(--chrome) 70%, #8fa3bb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}

/* --- figures ------------------------------------------------------------- */

.hero-figure, .history-figure, .shot-frame { margin: 0; }
.hero-figure img, .history-figure img, .shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  /* Dark mode elevates with a lighter surface, not a heavy drop shadow — this
     one stays soft and mostly reads as depth against the asphalt ground. */
  box-shadow: 0 22px 55px rgba(0, 0, 0, .5);
}
.hero-figure figcaption, .history-figure figcaption, .shot-frame figcaption {
  margin-top: 10px;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Slight perspective so the artwork reads as a screen, not a flat rectangle
   (prohibitions.md: never flatten product screenshots). Desktop only, and
   transform-only, so it costs nothing at layout time. */
@media (min-width: 900px) {
  .hero-figure { transform: perspective(1500px) rotateY(-4deg) rotateX(1.2deg); }
  .feature-shot { transform: perspective(1500px) rotateY(4deg); }
}

/* --- editorial bands ----------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(20px, 3.4vw, 44px);
  align-items: start;
  margin-top: 24px;
}
.feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(20px, 3.4vw, 44px);
  align-items: start;
  margin-top: 26px;
}
.feature-grid {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--hairline-soft);
}
.feature h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .01em;
}
.feature p { margin: 0; color: var(--ink-dim); font-size: 14.5px; text-wrap: pretty; }

@media (max-width: 900px) {
  .hero-inner, .split, .feature-layout { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
}

@media (max-width: 560px) {
  .cta-row { display: grid; }
  .cta-row .btn { width: 100%; }
  .brand-mark { width: 24px; height: 24px; }
}