/* Nebula Rush marketing site — Tron theme. The page is one lap of a neon
 * circuit: void black, a deep-blue grid, cyan for you (the player's light),
 * orange for rivals and the hot call to action. Chakra Petch display + Inter
 * body, self-hosted (copied from node_modules at build time). */

@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-display: swap; src: url('/fonts/chakra-petch-500.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url('/fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url('/fonts/chakra-petch-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/fonts/inter.woff2') format('woff2'); }

:root {
  --ink: #000308;          /* the void */
  --ink-2: #020814;
  --panel: rgba(2, 12, 26, 0.78);
  --grid: rgba(40, 140, 220, 0.11);
  --hair: rgba(53, 224, 255, 0.14);
  --hair-2: rgba(53, 224, 255, 0.3);
  --text: #e8f6ff;
  --mute: #8ea8c6;
  --faint: #4d6684;
  --accent: #35e0ff;       /* cyan — you */
  --accent-2: #ff9a1f;     /* orange — rivals, heat, the CTA */
  --orange-hot: #ff6a00;
  --warn: #ff9a1f;
  --ok: #4be3a0;
  --glow: 0 0 6px rgba(53, 224, 255, 0.55), 0 0 22px rgba(53, 224, 255, 0.28);
  --glow-o: 0 0 6px rgba(255, 154, 31, 0.6), 0 0 26px rgba(255, 106, 0, 0.35);
  --display: 'Chakra Petch', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The grid the whole page races over (a fixed, composited layer — cheap to scroll). */
body::before {
  content: ''; position: fixed; inset: -2px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, #000 30%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.narrow { width: min(780px, 100% - 40px); margin-inline: auto; }
@media (max-width: 520px) { .wrap { width: calc(100% - 32px); } .narrow { width: calc(100% - 32px); } }
a { color: var(--accent); text-decoration: none; }
a:hover { text-shadow: 0 0 12px rgba(53, 224, 255, 0.6); }
h1, h2, h3 { font-family: var(--display); line-height: 1.06; margin: 0 0 0.4em; }
h1, h2 { text-transform: uppercase; letter-spacing: 0.015em; }
h1 { font-size: clamp(32px, 5.6vw, 62px); font-weight: 700; }
h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
p { margin: 0 0 1em; }
img, video, canvas { max-width: 100%; display: block; }
::selection { background: rgba(53, 224, 255, 0.35); color: #fff; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--accent); color: var(--ink); padding: 8px 14px; z-index: 100; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Eyebrow: a sector chip + label, like a timing screen ── */
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font: 600 12px/1.2 var(--display); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--mute); margin: 0 0 14px; }
.chip { display: inline-block; padding: 5px 9px 4px; color: var(--accent); border: 1px solid var(--hair-2); background: rgba(53, 224, 255, 0.07);
  letter-spacing: 0.18em; font-weight: 700; box-shadow: inset 0 0 12px rgba(53, 224, 255, 0.12);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
#finish .chip { color: var(--accent-2); border-color: rgba(255, 154, 31, 0.45); background: rgba(255, 154, 31, 0.08); }

/* ── Panels: dark glass, a faint neon edge, HUD corner brackets ── */
.panel, .chamfer {
  --c: var(--accent);
  position: relative; border: 1px solid var(--hair);
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 16px no-repeat,
    linear-gradient(180deg, rgba(53, 224, 255, 0.05), transparent 40%),
    var(--panel);
  /* No backdrop blur here: on many panels it's a scroll-jank source on low-end Android GPUs. */
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.panel:hover { border-color: var(--hair-2); box-shadow: 0 0 0 1px rgba(53, 224, 255, 0.08), 0 0 32px rgba(53, 224, 255, 0.1); }

/* ── Buttons: orange is the hot "go" light; cyan outline is the secondary ── */
.btn-play, .btn-ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 24px; cursor: pointer; text-decoration: none; white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.12s ease, filter 0.2s ease, background 0.2s, color 0.2s;
}
/* Go = an orange light-line: dark glass, bright edge rails, glowing text; it lights up on hover. */
.btn-play { color: #ffb35a; text-shadow: 0 0 10px rgba(255, 140, 30, 0.75);
  background: linear-gradient(var(--accent-2), var(--accent-2)) top left / 100% 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(255, 140, 30, 0.16), rgba(255, 106, 0, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 154, 31, 0.45), inset 0 0 22px rgba(255, 120, 20, 0.18); }
.btn-play:hover { transform: translateY(-2px); color: #fff; background-color: rgba(255, 140, 30, 0.28);
  text-shadow: 0 0 12px rgba(255, 160, 50, 1), 0 0 2px #fff; box-shadow: inset 0 0 0 1px var(--accent-2), inset 0 0 30px rgba(255, 120, 20, 0.35); }
.btn-ghost { color: var(--accent); background: linear-gradient(var(--accent), var(--accent)) top left / 100% 1.5px no-repeat,
  linear-gradient(var(--accent), var(--accent)) bottom right / 100% 1.5px no-repeat, rgba(53, 224, 255, 0.06); }
.btn-ghost:hover { background-color: rgba(53, 224, 255, 0.16); color: #fff; text-shadow: 0 0 10px rgba(53, 224, 255, 0.8); }
.btn-play.big, .btn-ghost.big { padding: 17px 32px; font-size: 16px; }

/* ── Brand (the logo) ── */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 700 19px/1 var(--display); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; }
.brand:hover { text-shadow: 0 0 14px rgba(53, 224, 255, 0.7); }

/* ── Header: a HUD strip with a light-wall underline ── */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(0, 3, 8, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); box-shadow: var(--glow); opacity: 0.7; }
.head-row { display: flex; align-items: center; gap: 20px; padding: 12px 0; }
.head-nav { display: flex; gap: 24px; margin-left: auto; }
.head-nav a { color: var(--mute); font: 600 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 0; position: relative; }
.head-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--accent); box-shadow: var(--glow);
  transform: scaleX(0); transform-origin: left; transition: transform 0.2s; }
.head-nav a:hover { color: var(--text); }
.head-nav a:hover::after { transform: scaleX(1); }
.site-head .btn-play { padding: 11px 18px; font-size: 13px; }
@media (max-width: 760px) { .head-nav { display: none; } .site-head .btn-play { margin-left: auto; } }

/* ── Hero: the start grid — gameplay behind, a neon floor racing to the horizon ── */
.hero { --floor: clamp(150px, 22vw, 290px); position: relative; padding: clamp(80px, 12vw, 150px) 0 var(--floor); overflow: hidden; isolation: isolate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: 0.5; filter: saturate(1.15) hue-rotate(-8deg); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 3, 8, 0.55), rgba(0, 3, 8, 0.75) 55%, var(--ink) 96%),
    radial-gradient(900px 420px at 75% 0%, rgba(53, 224, 255, 0.16), transparent 65%); }
.hero-floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--floor) - 24px); z-index: -1; pointer-events: none; overflow: hidden;
  perspective: 420px; perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent); }
.hero-floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, #fff 50%, var(--accent) 70%, transparent);
  box-shadow: 0 0 12px var(--accent), 0 0 40px rgba(53, 224, 255, 0.6); }
.hero-grid { position: absolute; left: -60%; right: -60%; top: 0; height: 300%; transform-origin: 50% 0;
  background-image: linear-gradient(rgba(53, 224, 255, 0.55) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(53, 224, 255, 0.55) 1.5px, transparent 1.5px);
  background-size: 64px 64px; transform: rotateX(72deg) translateY(0); animation: floor-run 0.9s linear infinite; will-change: transform; }
@keyframes floor-run { to { transform: rotateX(72deg) translateY(64px); } }
.hero-inner { position: relative; max-width: 860px; }
.hero h1 { margin-bottom: 20px; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 28px rgba(53, 224, 255, 0.45); }
.hero-sub { font-size: clamp(17px, 2.1vw, 20px); color: #b9cbe2; max-width: 600px; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.glance { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.glance li { font: 600 11px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 8px 11px;
  border: 1px solid var(--hair); background: rgba(0, 8, 18, 0.6); }
.hero.off .hero-grid { animation-play-state: paused; } /* stars.js: hero scrolled away */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero-grid { animation: none; } }

/* ── Bands (sectors). Each opens with a light wall that draws in as it arrives. ── */
.band { padding: clamp(64px, 10vw, 124px) 0; position: relative; }
.band::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 15%, #c9f6ff 50%, var(--accent) 85%, transparent);
  box-shadow: 0 0 8px rgba(53, 224, 255, 0.8), 0 0 28px rgba(53, 224, 255, 0.35); transform-origin: left; transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .band:not(.in)::before { transform: scaleX(0); }
.band.alt { background: linear-gradient(180deg, rgba(2, 14, 30, 0.55), rgba(2, 10, 22, 0.25)); }
.band-title { max-width: 18ch; margin-bottom: 36px; }
.band-foot { margin-top: 28px; }
.lead { font-size: 18px; color: var(--mute); max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .band::before { transition: none; } .js .band:not(.in)::before { transform: none; } }

/* ── Steps: three checkpoint gates ── */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { padding: 26px 24px 24px; }
.step-n { display: block; font: 700 46px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  text-shadow: 0 0 18px rgba(53, 224, 255, 0.35); letter-spacing: 0.04em; }
.step h3 { margin-top: 14px; }
.step p { color: var(--mute); margin: 0; }

/* ── Reel: a trackside screen showing the live feed ── */
.player { margin-top: 28px; }
.feed { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 12px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.feed-name { color: var(--text); }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: var(--glow-o); animation: rec 1.4s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0.25; } }
.reel-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink);
  border: 1px solid var(--hair-2); box-shadow: 0 0 0 1px rgba(53, 224, 255, 0.08), 0 0 40px rgba(53, 224, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.6); }
.reel-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 14px; }
.reel-tab { position: relative; padding: 0; border: 1px solid var(--hair); overflow: hidden; background: var(--ink); cursor: pointer; color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; }
.reel-tab img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(0.4) saturate(0.6); transition: filter 0.2s; }
.reel-tab span { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 9px; text-align: left; font: 600 11px/1 var(--display);
  letter-spacing: 0.14em; text-transform: uppercase; background: linear-gradient(transparent, rgba(0, 3, 8, 0.9)); }
.reel-tab:hover img, .reel-tab:focus-visible img { filter: brightness(0.85); }
.reel-tab[aria-selected="true"] { border-color: var(--accent); box-shadow: var(--glow); }
.reel-tab[aria-selected="true"] img { filter: none; }
.reel-tab[aria-selected="true"] span { color: var(--accent); }
@media (max-width: 640px) {
  .reel-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 14px -16px 0; padding: 0 16px 6px; scrollbar-width: none; }
  .reel-tabs::-webkit-scrollbar { display: none; }
  .reel-tab { flex: 0 0 44%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .rec { animation: none; } }

/* ── Features / modes / guides: corner boards along the track ── */
.feature-grid, .mode-grid, .guide-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.feature, .mode { padding: 24px; }
.feature h3, .mode h3 { color: var(--text); }
.feature p, .mode p { color: var(--mute); margin: 0; }
.feature h3 { position: relative; padding-left: 16px; }
.feature h3::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; background: linear-gradient(var(--accent), var(--accent-2)); box-shadow: var(--glow); }
.mode { --c: var(--accent-2); }
.mode h3 { color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.08em; font-size: 17px; }

.guide-card { padding: 24px; display: block; color: var(--text); }
.guide-card:hover { text-decoration: none; text-shadow: none; transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow); }
.guide-kicker { font: 600 11px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); }
.guide-card h3 { margin: 12px 0 8px; }
.guide-card p { color: var(--mute); margin: 0 0 14px; }
.guide-more { color: var(--accent); font: 600 13px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }

/* ── FAQ: race control ── */
.faq details { border-bottom: 1px solid var(--hair); padding: 2px 0 2px 14px; position: relative; }
.faq details::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--hair-2); transition: background 0.2s, box-shadow 0.2s; }
.faq details[open]::before { background: var(--accent); box-shadow: var(--glow); }
.faq summary { cursor: pointer; font: 600 17px/1.4 var(--display); padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '[+]'; color: var(--accent); font-weight: 700; flex: none; }
.faq details[open] summary { color: var(--accent); }
.faq details[open] summary::after { content: '[–]'; }
.faq p { color: var(--mute); padding-bottom: 14px; margin: 0; }

/* ── Finish: chequered line + the big orange light ── */
.cta-band { text-align: center; padding-top: clamp(90px, 12vw, 140px);
  background: radial-gradient(700px 360px at 50% 30%, rgba(255, 120, 20, 0.14), transparent 70%); }
.cta-band::before { display: none; }
.finish-line { position: absolute; left: 0; right: 0; top: 0; height: 24px; opacity: 0.85;
  background: repeating-conic-gradient(#e8f6ff 0 25%, #000308 0 50%) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.cta-inner .eyebrow { justify-content: center; }
.cta-inner h2 { margin-bottom: 12px; }
.cta-inner p { color: var(--mute); margin-bottom: 28px; }

/* ── Footer ── */
.site-foot { position: relative; padding: 56px 0 28px; background: rgba(1, 6, 14, 0.9); }
.site-foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2) 30%, var(--accent-2) 70%, transparent); box-shadow: var(--glow-o); opacity: 0.6; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr; }
.foot-brand p { color: var(--mute); max-width: 32ch; margin: 14px 0 18px; }
.foot-col h2 { font-size: 12px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 12px; }
.foot-col a { display: block; color: var(--mute); padding: 5px 0; font-size: 15px; }
.foot-col a:hover { color: var(--text); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair);
  color: var(--faint); font: 500 12px/1.4 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ── Guide pages: telemetry readouts ── */
.crumbs { color: var(--faint); font: 600 12px/1.4 var(--display); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px; }
.crumbs a { color: var(--mute); }
.guide h1 { margin-bottom: 12px; font-size: clamp(30px, 4.6vw, 50px); }
.guide-meta { color: var(--faint); font: 600 12px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px; }
.guide-intro { font-size: 19px; color: #b9cbe2; margin-bottom: 30px; }
.guide .wrap, .guide .narrow { padding-top: 48px; padding-bottom: 48px; }
.toc { border: 1px solid var(--hair); background: var(--panel); padding: 18px 22px; margin: 0 0 32px; border-left: 2px solid var(--accent); }
.toc h2 { font-size: 12px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; color: var(--mute); }
.toc a { color: var(--mute); }
.toc a:hover { color: var(--accent); }
.prose h2 { margin-top: 1.7em; scroll-margin-top: 84px; font-size: clamp(21px, 2.6vw, 28px); padding-left: 14px; border-left: 3px solid var(--accent); }
.prose p, .prose li { color: #cfdcf0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; border: 1px solid var(--hair); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.prose th { color: var(--accent); font-family: var(--display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(53, 224, 255, 0.06); }
.prose td:first-child { color: var(--text); font-weight: 600; }
.guide-faq { margin-top: 40px; }
.guide-faq details { border-bottom: 1px solid var(--hair); }
.guide-faq summary { cursor: pointer; font: 600 17px/1.4 var(--display); padding: 14px 0; }
.guide-faq summary::marker { color: var(--accent); }
.guide-faq p { color: var(--mute); padding-bottom: 14px; }
.cta-box { text-align: center; padding: 34px; margin: 44px 0; --c: var(--accent-2); }
.cta-box h2 { margin-bottom: 8px; }
.cta-box p { color: var(--mute); margin-bottom: 20px; }
.keep-reading { margin-top: 48px; }
.keep-reading h2 { margin-bottom: 20px; }

/* ── Hangar: the garage. A grid turntable under the ship. (stars.js drives the tabs) ── */
.hangar { margin-top: 28px; display: grid; gap: 16px; }
.ship-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; padding: 24px 28px; }
.ship-card + .ship-card { margin-top: 16px; }
.hangar.js .ship-card:not(.on) { display: none; }
.hangar.js .ship-card + .ship-card { margin-top: 0; }
.hangar.js .ship-card.on { animation: ship-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hangar.js .ship-card.on .ship-art img { animation: ship-float 5s ease-in-out infinite; }
@keyframes ship-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes ship-float { 50% { transform: translateY(-8px) rotate(-1deg); } }
.ship-art { position: relative; }
.ship-art::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 2%; height: 46%; pointer-events: none;
  background-image: linear-gradient(rgba(53, 224, 255, 0.7) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 224, 255, 0.7) 1px, transparent 1px);
  background-size: 28px 28px; transform: perspective(300px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 60%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 50% 60% at 50% 60%, #000 20%, transparent 70%); }
.ship-art img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 26px rgba(53, 224, 255, 0.22)); }
.ship-info h3 { font: 700 clamp(26px, 3.2vw, 38px)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin: 6px 0 16px;
  text-shadow: 0 0 22px rgba(53, 224, 255, 0.35); }
.ship-info .eyebrow { color: var(--accent); }
.ship-stats { display: grid; gap: 10px; margin: 0 0 16px; }
.ship-stats div { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; }
.ship-stats dt { color: var(--mute); font: 600 11px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.ship-stats dd { margin: 0; display: flex; align-items: center; gap: 10px; }
.ship-stats .bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: 1; max-width: 220px; }
.ship-stats .bar i { height: 8px; background: rgba(53, 224, 255, 0.08); border: 1px solid rgba(53, 224, 255, 0.12); transform: skewX(-20deg); }
.ship-stats .bar i.on { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.ship-stats div:nth-child(1) .bar i.on { background: var(--accent-2); border-color: var(--accent-2); box-shadow: var(--glow-o); }
.ship-stats b { font: 700 15px/1 var(--display); }
.ship-traits { margin: 0 0 12px; padding-left: 18px; color: var(--mute); line-height: 1.55; }
.ship-traits li::marker { color: var(--accent); }
.ship-unlock { margin: 0 0 18px; font: 600 12px/1.3 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.ship-unlock.open { color: var(--ok); }
.ship-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ship-tab { position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px 6px 10px; border: 1px solid var(--hair);
  background: rgba(0, 10, 22, 0.7); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.2s; }
.ship-tab img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; filter: saturate(0.5) brightness(0.7); transition: filter 0.2s; }
.ship-tab span { font: 600 10.5px/1.15 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.ship-tab:hover { transform: translateY(-2px); border-color: var(--hair-2); }
.ship-tab:hover img, .ship-tab[aria-selected="true"] img { filter: none; }
.ship-tab[aria-selected="true"] { border-color: var(--accent); background: rgba(53, 224, 255, 0.08); box-shadow: var(--glow); }
.ship-tab[aria-selected="true"] span { color: var(--accent); }
.ship-tab .lock { position: absolute; top: 6px; right: 6px; padding: 3px 5px; font: 700 9px/1 var(--display); font-style: normal; letter-spacing: 0.1em;
  color: #140600; background: var(--accent-2); box-shadow: var(--glow-o); }
@media (max-width: 760px) {
  .ship-card { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  /* Strip above the card on phones, so the card you pick appears right below your thumb. */
  .ship-tabs { order: -1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .ship-tabs::-webkit-scrollbar { display: none; }
  .ship-tab { flex: 0 0 30%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .hangar.js .ship-card.on, .hangar.js .ship-card.on .ship-art img { animation: none; } }

/* Hangar 3D viewer (site/viewer/hangar3d.js): the canvas sits over the ship art. */
.ship-3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.45s; cursor: grab; touch-action: pan-y; }
.ship-3d.ready { opacity: 1; }
.ship-3d:active { cursor: grabbing; }
/* The canvas fades itself in, so the art just steps aside (no transition to stall on a busy main thread). */
.hangar .ship-card.has-3d .ship-art img { visibility: hidden; animation: none; transition: none; }
.ship-art.loading::after, .ship-card.has-3d .ship-art::after { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  font: 600 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; pointer-events: none; }
.ship-art.loading::after { content: 'Loading 3D model…'; }
.ship-card.has-3d .ship-art::after { content: '⟲ Drag to spin'; opacity: 0.75; }

/* ── The circuit (circuit.js): the track, your light trail, the runner, the gates ── */
main { position: relative; }
.circuit { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.circuit path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.circuit .t-edge { stroke: rgba(53, 224, 255, 0.42); }
.circuit .t-bed { stroke: #010812; }
.circuit .t-mid { stroke: rgba(53, 224, 255, 0.2); stroke-width: 1.2; stroke-dasharray: 10 12; stroke-linecap: butt; }
.circuit .t-probe { stroke: none; }
.circuit .tr-glow { stroke: rgba(53, 224, 255, 0.2); }
.circuit .tr-core { stroke: #9ff3ff; stroke-width: 2.5; }
.circuit .chk-w { fill: #e8f6ff; }
.circuit .chk-b { fill: #000308; }
.circuit .gate line { stroke: rgba(255, 154, 31, 0.5); stroke-width: 2; transition: stroke 0.3s; }
.circuit .gate circle { fill: rgba(255, 154, 31, 0.6); transition: fill 0.3s; }
.circuit .gate text { fill: rgba(255, 154, 31, 0.7); font: 700 11px var(--display); letter-spacing: 0.2em; transition: fill 0.3s; }
.circuit .gate.lit line { stroke: var(--accent); }
.circuit .gate.lit circle { fill: #fff; }
.circuit .gate.lit text { fill: var(--accent); }
.runner { position: absolute; left: -6px; top: -15px; width: 12px; height: 30px; z-index: 3; pointer-events: none; transform-origin: 6px 15px; will-change: transform;
  background: linear-gradient(180deg, rgba(53, 224, 255, 0), rgba(53, 224, 255, 0.85) 45%, #fff 88%);
  border-radius: 45% 45% 50% 50% / 30% 30% 70% 70%; box-shadow: 0 0 10px #35e0ff, 0 0 28px rgba(53, 224, 255, 0.7); }
.runner.small { left: -4px; top: -10px; width: 8px; height: 20px; transform-origin: 4px 10px; }
/* Strips that bleed to the screen edge on phones ride above the track. */
.ship-tabs, .reel-tabs { position: relative; z-index: 4; }

/* ── Race HUD (hud.js) ── */
/* Start lights: five reds on, all out, GO. */
.start-lights { display: flex; align-items: center; gap: 8px; height: 22px; margin-bottom: 18px; }
.start-lights i { width: 16px; height: 16px; border-radius: 50%; background: #1c0406; box-shadow: inset 0 0 0 1px rgba(255, 60, 60, 0.25); transition: background 0.06s, box-shadow 0.06s; }
.start-lights i.on { background: radial-gradient(circle at 40% 35%, #ffc0c0, #ff2a2a 55%, #9a0000); box-shadow: 0 0 10px #ff2a2a, 0 0 26px rgba(255, 40, 40, 0.6); }
.start-lights.out i { background: #06141f; box-shadow: inset 0 0 0 1px var(--hair); }
.start-lights .go { margin-left: 8px; font: 700 15px/1 var(--display); letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); text-shadow: var(--glow); opacity: 0; }
.start-lights.out .go { animation: go 1.8s ease-out forwards; }
@keyframes go { 0% { opacity: 0; transform: scale(1.8); } 12% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .start-lights.out .go { animation: none; opacity: 0.55; } }

/* The header's light line is your lap progress. */
.lap-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), #e8fbff); box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(53, 224, 255, 0.5); }
body:not(.racing) .lap-bar { display: none; }

/* The floating HUD: sector (timing tower), speed, lap. */
.hud { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: stretch;
  border: 1px solid var(--hair-2); background:
    linear-gradient(var(--accent), var(--accent)) top left / 12px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) top left / 2px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 12px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) bottom right / 2px 12px no-repeat,
    rgba(0, 6, 14, 0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 24px rgba(53, 224, 255, 0.14), 0 14px 40px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, 160%); opacity: 0; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.hud.awake { transform: translate(-50%, 0); opacity: 1; }
.hud-sector, .hud-cell { display: grid; align-content: center; gap: 3px; padding: 8px 16px; min-width: 84px; text-align: left; }
.hud-sector + .hud-cell, .hud-cell + .hud-cell { border-left: 1px solid var(--hair); }
.hud-k { font: 600 9px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.hud b { font: 700 18px/1 var(--display); letter-spacing: 0.06em; color: var(--text); font-variant-numeric: tabular-nums; }
.hud-sector { position: relative; padding-right: 28px; background: none; border: 0; color: inherit; cursor: pointer; }
.hud-sector b { color: var(--accent); text-shadow: 0 0 10px rgba(53, 224, 255, 0.5); }
.hud-sector:hover { background: rgba(53, 224, 255, 0.07); }
.hud-caret { position: absolute; right: 10px; bottom: 9px; color: var(--accent); font-size: 11px; }
.hud-speed b { display: inline-block; min-width: 3ch; transition: color 0.2s; }
.hud.fast .hud-speed b { color: var(--accent-2); text-shadow: var(--glow-o); }
.hud-lap { min-width: 96px; }
.hud.flag { animation: flag 0.35s steps(2) 7; }
@keyframes flag { 50% { border-color: #fff; box-shadow: 0 0 34px rgba(255, 255, 255, 0.55); } }
.hud-tower { position: absolute; left: 0; bottom: calc(100% + 8px); width: 300px; max-height: min(60vh, 460px); overflow: auto; padding: 10px;
  border: 1px solid var(--hair-2); background: rgba(0, 6, 14, 0.96); box-shadow: 0 0 30px rgba(53, 224, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.7); }
.hud-tower-h { margin: 2px 6px 8px; font: 600 10px/1 var(--display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
.hud-tower ol { list-style: none; margin: 0; padding: 0; }
.hud-tower a { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px; color: var(--mute);
  font: 600 12px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.hud-tower a:hover { background: rgba(53, 224, 255, 0.08); color: var(--text); text-shadow: none; }
.hud-tower li b { font-size: 12px; color: rgba(255, 154, 31, 0.85); }
.hud-tower li.done b { color: var(--accent); }
.hud-tower li.now a { background: rgba(53, 224, 255, 0.1); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.hud-tower em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 760px) {
  .hud-sector, .hud-cell { padding: 7px 12px; min-width: 68px; }
  .hud b { font-size: 16px; }
  .hud-lap { min-width: 84px; }
  .hud-tower { width: min(300px, calc(100vw - 32px)); }
}

/* Speed streaks at the edges when you really fly. */
.streaks { position: fixed; left: 0; right: 0; top: -240px; bottom: -240px; z-index: 45; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background:
    repeating-linear-gradient(180deg, transparent 0 40px, rgba(53, 224, 255, 0.7) 40px 130px, transparent 130px 240px) 3% 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 110px, rgba(232, 246, 255, 0.5) 110px 170px, transparent 170px 240px) 7% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 20px, rgba(53, 224, 255, 0.45) 20px 80px, transparent 80px 240px) 11% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 150px, rgba(255, 154, 31, 0.55) 150px 210px, transparent 210px 240px) 89% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 70px, rgba(232, 246, 255, 0.5) 70px 160px, transparent 160px 240px) 93% 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 0px, rgba(53, 224, 255, 0.7) 0 70px, transparent 70px 240px) 97% 0 / 2px 100% no-repeat; }

/* Lap result at the finish. */
.lap-result { display: inline-block; margin: 0 auto 24px; padding: 12px 22px; border: 1px solid rgba(255, 154, 31, 0.45); background: rgba(255, 120, 20, 0.08);
  font: 600 13px/1.4 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); box-shadow: 0 0 26px rgba(255, 120, 20, 0.15); }
.lap-result[hidden] { display: none; }
.lap-result b { color: #fff; font-size: 22px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.lap-result em { font-style: normal; color: var(--accent-2); text-shadow: var(--glow-o); }
.lap-result small { display: block; margin-top: 4px; font: 500 12px/1.4 var(--body); text-transform: none; letter-spacing: 0; color: var(--faint); }
.hud-pilot { display: block; margin-top: 6px; color: var(--mute); letter-spacing: 0.16em; }
.hud-pilot:empty { display: none; }
/* OMEN Foundation credit (their kit, never recoloured). */
.powered { display: block; width: max-content; margin-top: 24px; opacity: 0.85; transition: opacity 0.15s; }
.powered:hover { opacity: 1; }
.powered img { display: block; width: 190px; height: auto; }
.foot-base a { color: inherit; }
.foot-base a:hover { color: var(--accent); }

/* The logo (brand/logo.jpg, cut out of its black by tools/brand.mjs). */
.brand-logo { display: block; height: 44px; width: auto; }
.brand:hover .brand-logo { filter: brightness(1.15); }
.brand-foot .brand-logo { height: 70px; }
.hero-logo { display: block; width: min(520px, 80vw); height: auto; margin: 0 0 14px -2%; }
@media (max-width: 760px) { .brand-logo { height: 38px; } }

/* Before launch: the Play buttons read "Coming soon" (SITE.released, site/layout.mjs). Not a
   link, no hover lift; a slow glow so it still reads as the call to action. */
.btn-play.is-soon { cursor: default; animation: soon-glow 2.4s ease-in-out infinite; }
.btn-play.is-soon:hover { transform: none; color: #ffb35a; background-color: transparent; }
@keyframes soon-glow { 50% { box-shadow: inset 0 0 0 1px var(--accent-2), inset 0 0 30px rgba(255, 120, 20, 0.35); } }
@media (prefers-reduced-motion: reduce) { .btn-play.is-soon { animation: none; } }