@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono&display=swap');
:root{color-scheme:dark;--cyan:#79fff1;--muted:#94a2b8}*{box-sizing:border-box}body{margin:0;background:#050710;color:#eff6ff;font-family:'Space Grotesk',sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:#0b1528;border:1px solid #ffffff30;padding:10px 18px;border-radius:8px}button:hover{border-color:var(--cyan)}button:disabled{opacity:.5;cursor:wait}a{color:var(--cyan);text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}#race-canvas{position:fixed;inset:0;width:100%;height:100%}header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 30px;background:linear-gradient(#050710d9,transparent);z-index:3}.brand{letter-spacing:.2em;font-weight:700}.brand small{display:block;color:var(--muted);font:9px 'Space Mono',monospace;letter-spacing:.15em;margin-top:5px}.back{font-size:13px}.race-hud{position:fixed;inset:100px 30px 35px;pointer-events:none}.route{width:min(650px,75vw);margin:auto;display:flex;justify-content:space-between;flex-wrap:wrap;font:10px 'Space Mono',monospace;letter-spacing:.15em;color:var(--muted)}progress{width:100%;height:4px;margin-top:13px;border:0;appearance:none}progress::-webkit-progress-bar{background:#ffffff20}progress::-webkit-progress-value{background:var(--cyan)}progress::-moz-progress-bar{background:var(--cyan)}.stats{position:absolute;bottom:40px;left:0;display:flex;gap:36px;align-items:center}.stats small{display:block;font:10px 'Space Mono',monospace;letter-spacing:.12em;color:var(--muted);margin-bottom:8px}.stats strong{font-size:26px;font-weight:500}.stats em{font-size:12px;font-style:normal;color:var(--muted)}meter{width:100px;height:14px;display:block}#nitro-text{font-size:12px;color:var(--cyan)}.standings{position:absolute;right:0;top:50px;width:200px;padding:16px;background:#080e1e99;border:1px solid #ffffff18;border-radius:10px}.standings h2{font-size:11px;letter-spacing:.12em;margin:0 0 14px}.standings h2 span{float:right;font-size:9px;color:var(--muted)}ol{margin:0;padding:0;list-style:none}li{display:flex;justify-content:space-between;padding:7px 0;font-size:12px;color:var(--muted)}li.player{color:var(--cyan)}li span:last-child{font:10px 'Space Mono',monospace}.hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:12px;color:var(--muted)}.overlay{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:#050710b8;backdrop-filter:blur(12px)}[hidden]{display:none!important}.menu-card{width:min(600px,100%);text-align:center}.eyebrow{font:10px 'Space Mono',monospace;letter-spacing:.18em;color:var(--cyan)}h1{font-size:clamp(54px,10vw,100px);line-height:.95;letter-spacing:-.06em;margin:28px 0}h1 span{color:var(--cyan)}#menu-copy{color:#aebacf;line-height:1.65;font-size:15px;max-width:470px;margin:0 auto}.instructions{display:flex;justify-content:center;gap:24px;margin:30px 0;font:11px 'Space Mono',monospace}.instructions small{display:block;font-size:8px;color:var(--muted);margin-top:8px}.primary{display:block;margin:20px auto;background:var(--cyan);color:#071220;font-weight:700;padding:15px 40px;border:0;box-shadow:0 0 40px #79fff122}.menu-card>a{font-size:12px}.touch-controls{position:fixed;bottom:24px;right:24px;display:none;gap:12px;z-index:4;touch-action:none}.touch-controls button{min-width:60px;padding:20px;background:#0b1528cc}#boost{color:var(--cyan)}#countdown{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;font-size:100px;font-weight:700;text-shadow:0 0 50px var(--cyan);z-index:4}#results{color:var(--cyan);font-size:18px;line-height:1.5}@media(pointer:coarse){.touch-controls{display:flex}.stats{bottom:110px}.hint{bottom:80px}}@media(max-width:650px){header{padding:16px}.brand{font-size:12px}.brand small{font-size:7px}.race-hud{inset:85px 16px 16px}.standings{top:40px;width:150px;padding:10px}.stats{gap:16px}.stats strong{font-size:19px}.stats small{font-size:8px}meter{width:65px}.instructions{gap:12px;font-size:9px}.hint{font-size:10px;max-width:90%;text-align:left}header button{font-size:12px;padding:8px}.menu-card{max-height:90vh;overflow:auto}}

/* Responsive race cockpit and touch targets. */
html { -webkit-text-size-adjust: 100%; }
header { gap: 12px; padding-top: max(16px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
header button, .back { min-height: 44px; display: inline-flex; align-items: center; }
.overlay { overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.menu-card { margin-block: auto; max-height: none; overflow: visible; }
.instructions { flex-wrap: wrap; }
#countdown { font-size: clamp(36px, 12vw, 100px); }
.touch-controls { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
.touch-controls button { min-width: 64px; min-height: 56px; touch-action: none; user-select: none; }
@media (max-width: 650px) {
  .brand { text-align: center; letter-spacing: .1em; }
  .brand small { letter-spacing: .04em; }
  .back { font-size: 12px; flex-shrink: 0; }
  .race-hud { top: calc(85px + env(safe-area-inset-top)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .route { width: 100%; font-size: 8px; letter-spacing: .08em; }
  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .stats strong { font-size: clamp(14px, 4vw, 19px); white-space: nowrap; }
  .stats small { font-size: 7px; letter-spacing: .03em; }
  .standings { width: 140px; }
  h1 { font-size: clamp(48px, 15vw, 90px); margin-block: 18px; }
  .eyebrow { font-size: 9px; letter-spacing: .08em; }
  .instructions { margin-block: 20px; }
  .hint { max-width: 100%; }
}
@media (any-pointer: coarse) {
  .touch-controls { display: flex; }
  .stats { bottom: 110px; }
  .hint { bottom: 72px; }
  .instructions span:nth-child(1), .instructions span:nth-child(2) { font-size: 0; }
  .instructions span:nth-child(1)::before { content: '← / → BUTTONS'; font-size: 10px; }
  .instructions span:nth-child(2)::before { content: 'HOLD NITRO'; font-size: 10px; }
}
@media (max-height: 500px) and (max-width: 960px) {
  header { padding-block: 6px; }
  .race-hud { top: calc(62px + env(safe-area-inset-top)); }
  .route { width: min(420px, 65%); margin-left: 0; }
  .standings { top: 0; padding: 8px; width: 140px; }
  .standings h2 { margin-bottom: 6px; }
  .standings li { padding-block: 3px; }
  .stats { width: min(360px, 55%); bottom: 24px; gap: 10px; }
  .stats strong { font-size: 16px; }
  .hint { bottom: 0; width: 55%; font-size: 9px; }
  .touch-controls button { padding: 14px; min-width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}