*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#0a0202;font-family:'Orbitron',monospace;color:#ffa500;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
canvas{display:block;width:100vw;height:100vh;touch-action:none}

/* ── HUD ── */
#hud{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}

/* Timer top-right */
#timer{position:absolute;top:24px;right:32px;font-size:28px;font-weight:700;letter-spacing:2px;
  text-shadow:0 0 12px rgba(255,160,0,0.6),0 0 30px rgba(255,100,0,0.3);
  background:rgba(10,5,0,0.5);padding:8px 18px;border:1px solid rgba(255,160,0,0.25);border-radius:4px}

/* Speed chip — slim panel that sits inside the yoke's centre cavity,
   acts as the dashboard "screen" between the two grips. Telemetry that
   used to nest inside this panel now lives in #telem-strip below the yoke. */
#speed-display{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);
  text-align:center;min-width:160px;padding:4px 18px;
  background:rgba(10,5,0,0.45);border:1px solid rgba(255,160,0,0.22);border-radius:4px}
#speed-val{font-size:32px;font-weight:900;letter-spacing:3px;
  text-shadow:0 0 12px rgba(255,160,0,0.6);line-height:1.05}
#speed-unit{font-size:12px;font-weight:400;opacity:0.7;margin-left:4px;font-family:'Share Tech Mono',monospace}
#gear-dots{margin-top:1px;font-family:'Orbitron',monospace;font-size:16px;
  font-weight:900;letter-spacing:3px;color:#ffa500;line-height:1;
  text-shadow:0 0 10px rgba(255,160,0,0.7)}
#gear-dots.regen{color:#6ab4fa;text-shadow:0 0 10px rgba(106,180,250,0.7)}

/* Telemetry strip — horizontal dashboard sitting directly below the yoke.
   Holds tach + kW gauge + SoC bar + surface chip in one row, like
   instruments flanking a real steering column. */
#telem-strip{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:16px;
  padding:6px 14px;background:rgba(10,5,0,0.55);
  border:1px solid rgba(255,160,0,0.22);border-radius:4px;
  font-family:'Share Tech Mono',monospace;font-size:10px;white-space:nowrap}

#tach-bar{position:relative;width:110px;height:5px;
  background:rgba(255,160,0,0.12);border-radius:3px;overflow:hidden}
#tach-fill{position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg,#ffa500 0%,#ff4500 85%,#ff0020 100%);
  transition:width 40ms linear}
#tach-redline{position:absolute;left:90%;top:-1px;width:1px;height:7px;
  background:rgba(255,40,40,0.85);box-shadow:0 0 4px rgba(255,40,40,0.6)}

#telem-strip .telem-row{display:grid;grid-template-columns:auto 90px auto;
  align-items:center;gap:6px;margin:0}
#telem-strip .telem-label{opacity:0.55;letter-spacing:1.5px;text-align:left}
#telem-strip .telem-val{text-align:right;font-variant-numeric:tabular-nums;opacity:0.85;min-width:32px}

/* kW gauge — bidirectional around center line */
#kw-bar{position:relative;height:5px;background:rgba(255,160,0,0.12);border-radius:2px}
#kw-bar::before{content:'';position:absolute;left:50%;top:-1px;width:1px;height:7px;
  background:rgba(255,160,0,0.4)}
#kw-fill-pos,#kw-fill-neg{position:absolute;top:0;height:100%;width:0%;transition:width 50ms linear}
#kw-fill-pos{left:50%;background:linear-gradient(90deg,#6afa8e,#2fc25a)}
#kw-fill-neg{right:50%;background:linear-gradient(270deg,#6ab4fa,#2f7fc2)}

/* SoC bar — green → amber → red as charge drops */
#soc-bar{position:relative;height:5px;background:rgba(255,160,0,0.12);border-radius:2px;overflow:hidden}
#soc-fill{position:absolute;left:0;top:0;height:100%;width:100%;
  background:#6afa8e;transition:background 200ms ease,width 120ms linear}
#soc-fill.warn{background:#ffcc00}
#soc-fill.low{background:#ff4040}

/* Cybertruck steering yoke HUD — bottom-centre. Lifted to bottom:48px so
   the telem-strip can occupy the bottom edge directly beneath the yoke;
   the speed chip floats inside the yoke's centre cavity (its "screen").
   Rotates to mirror carState.steer. Visible in CHASE and DASH. */
#steer-wheel-hud{position:absolute;bottom:48px;left:50%;
  transform:translateX(-50%) rotate(0deg);
  width:360px;height:160px;pointer-events:none;
  opacity:0.78;will-change:transform;
  transition:transform 60ms linear,opacity 200ms ease}
#steer-wheel-hud svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(255,140,0,0.35))}

/* Surface chip — sits at the right end of the telem strip */
#surface-readout{font-size:9px;letter-spacing:2.5px;
  color:rgba(255,160,0,0.65);border:1px solid rgba(255,160,0,0.25);
  padding:3px 10px;border-radius:2px;
  font-family:'Share Tech Mono',monospace}

/* Recover button — visible only when chassis is significantly inverted.
   Toggled by updateTelemetryHUD via the 'visible' class. */
#recover-btn{position:absolute;left:50%;transform:translateX(-50%);
  bottom:200px;padding:10px 22px;background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,160,0,0.7);color:rgba(255,180,40,0.95);
  font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:2.5px;
  border-radius:2px;cursor:pointer;display:none;z-index:25;
  text-shadow:0 0 6px rgba(255,160,0,0.5);
  box-shadow:0 0 12px rgba(255,160,0,0.25)}
#recover-btn.visible{display:block;animation:recover-pulse 1.4s ease-in-out infinite}
#recover-btn:hover{background:rgba(255,160,0,0.18)}
@keyframes recover-pulse{
  0%,100%{box-shadow:0 0 12px rgba(255,160,0,0.25)}
  50%{box-shadow:0 0 18px rgba(255,160,0,0.55)}
}

/* Stage progress left */
#stage-progress{position:absolute;left:28px;top:50%;transform:translateY(-50%);height:50vh;width:4px;
  background:rgba(255,160,0,0.15);border-radius:2px}
#stage-dot{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:12px;height:12px;
  background:#ffa500;border-radius:50%;box-shadow:0 0 8px rgba(255,160,0,0.8);transition:bottom 0.2s ease}
.checkpoint-tick{position:absolute;left:-4px;width:12px;height:2px;background:rgba(255,160,0,0.3)}

/* Stage name top-left */
#stage-name{position:absolute;top:24px;left:32px;font-size:13px;font-weight:400;letter-spacing:3px;
  text-transform:uppercase;opacity:0.7;font-family:'Share Tech Mono',monospace;
  background:rgba(10,5,0,0.5);padding:6px 14px;border:1px solid rgba(255,160,0,0.2);border-radius:4px}

/* Checkpoint nav arrow — screen-edge indicator pointing to next checkpoint */
#checkpoint-arrow{position:absolute;width:40px;height:40px;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(255,160,0,0.8));transition:opacity 0.3s;opacity:0}
#checkpoint-arrow svg{width:100%;height:100%}

/* Distance to next checkpoint */
#checkpoint-dist{position:absolute;top:84px;right:32px;font-size:14px;font-family:'Share Tech Mono',monospace;
  letter-spacing:1px;opacity:0.8;text-shadow:0 0 8px rgba(255,160,0,0.5);
  background:rgba(10,5,0,0.5);padding:4px 12px;border:1px solid rgba(255,160,0,0.2);border-radius:4px}
#checkpoint-label{font-size:11px;opacity:0.5;margin-bottom:2px}

/* Exit button on HUD */
/* Controls hint on menu */
#controls-hint{margin-top:40px;font-family:'Share Tech Mono',monospace;font-size:12px;
  color:rgba(255,160,0,0.35);letter-spacing:1px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center;
  animation:menuFadeDown 0.6s 0.5s ease-out both}
#controls-hint .hint-item{display:flex;align-items:center;gap:6px}
#controls-hint kbd{color:rgba(255,160,0,0.8);border:1px solid rgba(255,160,0,0.3);
  padding:3px 8px;border-radius:4px;font-size:11px;font-family:'Share Tech Mono',monospace;
  background:rgba(255,160,0,0.06);line-height:1}

#exit-btn{position:absolute;top:24px;left:50%;transform:translateX(-50%);
  background:rgba(10,5,0,0.5);border:1px solid rgba(255,160,0,0.25);color:rgba(255,160,0,0.6);
  padding:5px 14px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;
  cursor:pointer;border-radius:4px;pointer-events:auto;transition:all 0.2s}
#exit-btn:hover{color:#ffa500;border-color:#ffa500;background:rgba(255,160,0,0.15)}

#cam-btn{position:absolute;top:148px;right:32px;
  background:rgba(10,5,0,0.55);border:1px solid rgba(255,160,0,0.3);color:rgba(255,160,0,0.7);
  padding:5px 12px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;
  cursor:pointer;border-radius:4px;pointer-events:auto;transition:all 0.15s;z-index:11;
  -webkit-tap-highlight-color:transparent;user-select:none}
#cam-btn:hover{color:#ffa500;border-color:#ffa500;background:rgba(255,160,0,0.15)}
#cam-btn:active,#cam-btn.pressed{background:rgba(255,160,0,0.25);color:#ffa500;border-color:#ffa500}

/* ── Accessibility (Phase 8b) — opt-in via mixer ── */
/* High-contrast HUD: white = healthy, yellow = warn, red+dashed = critical.
   Replaces the green/amber/red palette which is unfriendly to deuteranopia. */
/* Phase 9l — HUD scale. `zoom` scales both layout + events, unlike
   `transform: scale()` which leaves layout intact and breaks anchoring.
   Widely supported (Chrome, Safari, Edge since forever; Firefox 126+).
   Old Firefox falls back to unscaled — acceptable given the setting is
   opt-in accessibility, not a required feature. */
#hud{zoom:var(--ui-scale,1)}
body.a11y-high-contrast .dmg-corner{background:#fff !important;
  box-shadow:0 0 6px rgba(255,255,255,0.5);border:1px solid #fff}
body.a11y-high-contrast .dmg-corner.warn{background:#ffd700 !important;
  box-shadow:0 0 6px #ffd700;border-color:#ffd700}
body.a11y-high-contrast .dmg-corner.low{background:#ff2020 !important;
  box-shadow:0 0 9px #ff2020;border:2px dashed #ff2020}
body.a11y-high-contrast .dmg-bar-fill{background:#fff !important}
body.a11y-high-contrast .dmg-bar-fill.warn{background:#ffd700 !important}
body.a11y-high-contrast .dmg-bar-fill.low{background:#ff2020 !important}
body.a11y-high-contrast #soc-fill{background:#fff !important}
body.a11y-high-contrast #soc-fill.warn{background:#ffd700 !important}
body.a11y-high-contrast #soc-fill.low{background:#ff2020 !important}
body.a11y-high-contrast #kw-fill-pos{background:#fff !important}
body.a11y-high-contrast #kw-fill-neg{background:#ffd700 !important}
body.a11y-high-contrast #split-delta.faster{color:#fff;
  text-shadow:0 0 16px #fff,0 0 28px #fff}
body.a11y-high-contrast #split-delta.slower{color:#ffd700;
  text-shadow:0 0 16px #ffd700,0 0 28px #ffd700;text-decoration:underline}
body.a11y-high-contrast #gear-dots.regen{color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,0.7)}
/* Reduced-motion: slow the menu cinematic sweep, quiet HUD fade animations.
   Camera shake is dampened separately in updateCameraChase via shakeMul. */
body.a11y-reduced-motion #menu-screen *{
  animation-duration:0.001s !important;animation-delay:0s !important}
body.a11y-reduced-motion #stuck-hint.show,
body.a11y-reduced-motion #replay-banner.active{animation:none !important}

/* ── Sun lens flare (Phase 8d) — CSS overlay positioned at sun, fades by altitude ── */
#lens-flare{position:fixed;width:520px;height:520px;left:0;top:0;
  background:radial-gradient(circle at center,
    rgba(255,220,150,0.65) 0%,
    rgba(255,180,90,0.35) 18%,
    rgba(255,140,60,0.12) 40%,
    transparent 65%);
  pointer-events:none;z-index:6;display:none;
  transform:translate(-50%, -50%);mix-blend-mode:screen;
  will-change:left, top, opacity}
#lens-flare.show{display:block}
/* Suppress lens flare in high-contrast mode (extra warm bloom hurts legibility) */
body.a11y-high-contrast #lens-flare{display:none !important}

/* ── Pause overlay (Phase 9d) — full-screen scrim with RESUME + EXIT actions.
     Shown when gameState transitions PLAYING → PAUSED (via P key or the
     mobile pause button). pointer-events:auto only when .active so buttons
     become tappable; otherwise invisible and ignored. Z-index above HUD
     (z:12, speed-display at various) and photo-hint (z:14). ── */
#pause-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:15;overflow-y:auto;
  display:none;background:rgba(6,3,0,0.55);backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  flex-direction:column;align-items:center;justify-content:center;gap:28px;
  pointer-events:none}
#pause-overlay.active{display:flex;pointer-events:auto}
#pause-overlay .pause-title{font-family:'Orbitron',sans-serif;font-weight:900;
  color:#ffa500;letter-spacing:14px;font-size:clamp(44px,9vw,96px);
  text-shadow:0 0 22px rgba(255,140,0,0.45),0 4px 24px rgba(0,0,0,0.7);
  animation:pauseTitleGlow 2.2s ease-in-out infinite}
@keyframes pauseTitleGlow{
  0%,100%{text-shadow:0 0 22px rgba(255,140,0,0.45),0 4px 24px rgba(0,0,0,0.7)}
  50%   {text-shadow:0 0 34px rgba(255,160,0,0.7),0 4px 24px rgba(0,0,0,0.7)}
}
body.a11y-reduced-motion #pause-overlay .pause-title{animation:none}
#pause-overlay .pause-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* Dev-tools row inside pause — mobile on-ramp for hotkeys 1 / 2 */
#pause-overlay .pause-dev-row{display:flex;gap:10px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,160,0,0.18)}
#pause-overlay .pause-dev-label{font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:2px;color:rgba(255,200,80,0.5)}
#pause-overlay .pause-dev-btn{font-size:11px;padding:6px 12px}
#pause-overlay .pause-dev-btn.on{background:rgba(255,165,0,0.25);color:#ffd070}
#pause-overlay .pause-sub{font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:3px;color:rgba(255,200,120,0.65);text-align:center}
#pause-overlay .pause-sub kbd{color:#ffd070;border:1px solid rgba(255,200,80,0.45);
  padding:2px 7px;border-radius:3px;margin:0 3px;font-family:'Share Tech Mono',monospace}

/* Phase 9r — inline leaderboard popover inside the pause overlay. Shows
   the current stage's PB + top 5 online times without leaving PAUSED.
   Hidden by default; .active reveals with a slide-down. */
#pause-hs-panel{display:none;margin-top:6px;padding:14px 20px;
  min-width:min(380px, 88vw);max-width:min(420px, 90vw);
  background:rgba(6,3,0,0.7);border:1px solid rgba(255,160,0,0.28);
  border-radius:4px;font-family:'Share Tech Mono',monospace;
  color:rgba(255,200,120,0.92);text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,0.5)}
#pause-hs-panel.active{display:block;animation:pauseHsFadeIn 0.25s ease-out both}
@keyframes pauseHsFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
body.a11y-reduced-motion #pause-hs-panel.active{animation:none}
#pause-hs-panel .pause-hs-title{font-size:10px;letter-spacing:3px;opacity:0.5;margin-bottom:8px}
#pause-hs-panel .pause-hs-pb{font-size:13px;color:#ffd070;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid rgba(255,160,0,0.15);font-variant-numeric:tabular-nums}
#pause-hs-panel .pause-hs-row{display:flex;align-items:center;gap:10px;font-size:12px;padding:3px 0;
  font-variant-numeric:tabular-nums}
#pause-hs-panel .pause-hs-rank{opacity:0.5;width:22px;text-align:right}
#pause-hs-panel .pause-hs-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pause-hs-panel .pause-hs-time{opacity:0.9}
#pause-hs-panel .pause-hs-empty{opacity:0.4;font-size:11px;text-align:center;padding:8px 0}

/* ── Photo mode hint (Phase 8c) — visible while paused in replay ── */
#photo-hint{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:14;
  display:none;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;
  color:rgba(255,255,255,0.85);background:rgba(6,3,0,0.62);
  padding:6px 16px;border:1px solid rgba(255,255,255,0.2);border-radius:3px;
  pointer-events:none;text-align:center}
#photo-hint.active{display:block}
#photo-hint kbd{color:#ffd070;border:1px solid rgba(255,200,80,0.4);
  padding:1px 6px;border-radius:3px;margin:0 2px;font-family:'Share Tech Mono',monospace}

/* ── Stuck hint (Phase 8a) — appears after 5 s motionless, auto-respawn at 12 s ── */
#stuck-hint{position:absolute;top:48vh;left:50%;transform:translateX(-50%);z-index:12;
  display:none;font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:2px;
  color:rgba(255,200,80,0.92);background:rgba(6,3,0,0.78);
  padding:10px 22px;border:1px solid rgba(255,200,80,0.45);border-radius:4px;
  pointer-events:none;text-align:center;line-height:1.6;
  text-shadow:0 0 8px rgba(255,200,80,0.35)}
#stuck-hint.show{display:block;animation:stuckPulse 1.6s ease-in-out infinite}
@keyframes stuckPulse{0%,100%{opacity:0.85}50%{opacity:1}}
#stuck-hint kbd{color:#ffd070;border:1px solid rgba(255,200,80,0.55);
  padding:1px 7px;border-radius:3px;margin:0 3px;font-family:'Share Tech Mono',monospace}
#stuck-hint .stuck-sub{display:block;font-size:10px;letter-spacing:1.5px;opacity:0.55;
  margin-top:4px;font-weight:400}

/* ── Replay overlay (Phase 7c) — banner + exit hint while in REPLAY state ── */
#replay-banner{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:13;
  display:none;font-family:'Orbitron',monospace;font-size:13px;font-weight:700;letter-spacing:4px;
  color:rgba(255,200,80,0.92);background:rgba(6,3,0,0.7);
  padding:8px 22px;border:1px solid rgba(255,200,80,0.45);border-radius:4px;
  text-shadow:0 0 10px rgba(255,200,80,0.4);pointer-events:none}
#replay-banner.active{display:block;animation:replayPulse 2.4s ease-in-out infinite}
@keyframes replayPulse{0%,100%{opacity:0.85}50%{opacity:1}}
#replay-banner .replay-sub{display:block;font-family:'Share Tech Mono',monospace;
  font-size:9px;letter-spacing:2px;opacity:0.55;font-weight:400;margin-top:4px;color:#fff}
#replay-exit-zone{position:fixed;top:0;left:0;width:100%;height:100%;z-index:12;
  display:none;pointer-events:auto;cursor:pointer;background:transparent}
#replay-exit-zone.active{display:block}

/* Replay button on results — orange/butterscotch like the other primary buttons */
#results-replay-btn{display:none}
#results-replay-btn.active{display:inline-block}

/* ── Live split delta (Phase 7b) — flashes ±s.ms vs ghost at each CP ── */
#split-delta{position:absolute;top:38vh;left:50%;transform:translateX(-50%);
  font-family:'Orbitron',monospace;font-size:42px;font-weight:900;letter-spacing:3px;
  pointer-events:none;opacity:0;transition:opacity 0.4s ease-out, transform 0.4s ease-out;
  text-shadow:0 0 14px currentColor;color:#ffa500;z-index:12;
  font-variant-numeric:tabular-nums;text-align:center;line-height:1}
#split-delta.show{opacity:1;transform:translateX(-50%) translateY(0)}
#split-delta.faster{color:#6afa8e}
#split-delta.slower{color:#ff6060}
#split-delta .split-label{display:block;font-size:11px;letter-spacing:3px;opacity:0.7;
  font-family:'Share Tech Mono',monospace;font-weight:400;margin-bottom:6px;color:rgba(255,255,255,0.7)}

/* ── Gamepad indicator (Phase 7a) — small chip top-right when connected ── */
#gamepad-indicator{position:absolute;top:60px;left:32px;display:none;z-index:11;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.5px;
  color:rgba(106,250,142,0.85);background:rgba(6,3,0,0.55);
  padding:4px 9px;border:1px solid rgba(106,250,142,0.35);border-radius:3px;
  pointer-events:none;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gamepad-indicator.active{display:block}

/* ── Damage cluster (Phase 4a) — top-right, below CAM button ── */
#damage-cluster{position:absolute;top:188px;right:32px;z-index:11;
  background:rgba(10,5,0,0.55);border:1px solid rgba(255,160,0,0.3);border-radius:4px;
  padding:8px 10px;font-family:'Share Tech Mono',monospace;pointer-events:none;
  min-width:132px}
#damage-cluster .dmg-title{font-size:9px;letter-spacing:3px;text-align:center;
  color:#ffa500;opacity:0.65;padding-bottom:4px;margin-bottom:2px;
  border-bottom:1px solid rgba(255,160,0,0.18)}
#damage-cluster .dmg-corners{display:grid;grid-template-columns:1fr 1fr;gap:2px;
  justify-items:center;margin:2px 0}
#damage-cluster .dmg-corners.rear{margin-top:4px}
.dmg-corner{display:block;width:10px;height:10px;border-radius:50%;
  background:#6afa8e;box-shadow:0 0 6px rgba(106,250,142,0.5);
  transition:background 200ms ease,box-shadow 200ms ease}
.dmg-corner.warn{background:#ffcc00;box-shadow:0 0 6px rgba(255,204,0,0.55)}
.dmg-corner.low{background:#ff4040;box-shadow:0 0 8px rgba(255,64,64,0.7)}
#damage-cluster .dmg-bars{margin:6px 0 2px}
.dmg-bar-row{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:6px;margin:3px 0;
  font-size:9px;letter-spacing:1px}
.dmg-bar-row label{opacity:0.55}
.dmg-bar-row .dmg-bar{position:relative;height:4px;background:rgba(255,160,0,0.15);
  border-radius:2px;overflow:hidden}
.dmg-bar-fill{position:absolute;left:0;top:0;height:100%;width:100%;
  background:#6afa8e;transition:background 200ms ease,width 120ms linear}
.dmg-bar-fill.warn{background:#ffcc00}
.dmg-bar-fill.low{background:#ff4040}
/* Repair zone indicator (Phase 4f) */
#damage-cluster.repairing{box-shadow:0 0 14px rgba(106,250,142,0.4)}
#damage-cluster.repairing::after{content:'REPAIRING';display:block;text-align:center;
  color:#6afa8e;font-size:8px;letter-spacing:2px;margin-top:4px;opacity:0.9;
  text-shadow:0 0 6px rgba(106,250,142,0.4)}

/* ── Overlays ── */
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:20;pointer-events:auto;
  /* Short viewports: overlay content (menu title + daily card + button
     column) can exceed the window height — e.g. 960×640 test windows or a
     laptop with browser chrome. Plain justify-content:center clips BOTH ends
     of overflowing flex content (daily card cut off above, HIGH SCORES /
     SETTINGS unreachable below). `safe center` start-aligns only when
     overflowing, and overflow-y:auto makes the rest scrollable; the plain
     `center` above stays as the cascade fallback for engines without
     `safe` support. */
  overflow-y:auto;
  justify-content:safe center;
  /* Radial vignette: heavy mid-screen for menu text legibility, transparent at edges
     so the cinematic Mars vista is visible — that's the first-impression "wow". */
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,3,1,0.78) 0%, rgba(8,3,1,0.55) 55%, rgba(8,3,1,0.18) 100%);
  /* iOS landscape notch: keep menu content out of the inset rails. */
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  transition:opacity 0.4s}
/* Results overlay needs more dark — keep it heavier */
#results-screen{background:rgba(5,1,1,0.85)}
/* Hidden overlays keep display:flex so opacity can fade, but children
   (.stage-btn / .cup-btn / .preset-btn) declare their own
   pointer-events:auto — which means they keep catching taps while
   invisible, scattered across the middle of the playfield. During
   PLAY, a tap in the centre of the screen was hitting a hidden
   stage-btn and firing its onclick="startStage(N)" → full restart.
   Cascade pointer-events:none to every descendant so nothing inside
   a hidden overlay is tappable. */
.overlay.hidden{opacity:0;pointer-events:none}
.overlay.hidden *{pointer-events:none !important}
/* Phase 9a — generic utility: any non-overlay element with class
   'hidden' fully hides. #hud is not an .overlay, so the .hidden rule
   above never targeted it — every hudEl.classList.add('hidden') call
   silently no-op'd from Phase 0 through Phase 8. This one-liner covers
   #hud AND the Phase 9c menu sub-views (#menu-main-view / #menu-
   practice-view) AND any future .hidden toggle. */
.hidden:not(.overlay){display:none !important}

/* Menu screen - title */
#menu-screen h1{font-size:clamp(32px,6vw,64px);font-weight:900;letter-spacing:8px;
  text-shadow:0 0 30px rgba(255,100,0,0.5),0 0 80px rgba(255,50,0,0.25);margin-bottom:18px;
  line-height:1.15;
  animation:menuFadeDown 0.6s ease-out both}
#menu-screen h1 span{font-size:0.86em;letter-spacing:0.125em}

/* Decorative divider under subtitle */
#menu-screen .menu-divider{width:min(320px,60vw);height:1px;margin:0 auto 40px;
  background:linear-gradient(90deg,transparent,rgba(255,160,0,0.35),transparent);
  animation:menuFadeDown 0.6s 0.15s ease-out both}

/* Hide dev-only UI when not on localhost. Toggled by IS_DEV at script start. */
body:not(.is-dev) .dev-only { display: none !important; }

/* ── Phase 11: Level Editor overlay ───────────────────────── */
#editor-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: #e8e8e8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
#editor-overlay.hidden { display: none; }
#editor-overlay > * { pointer-events: auto; }
#editor-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(20,12,8,0.92), rgba(20,12,8,0.6));
  border-bottom: 1px solid rgba(255,140,80,0.35);
}
#editor-title {
  font-size: 14px; font-weight: 700; letter-spacing: 2px;
  color: #ff8c50;
}
#editor-stage-tabs { display: flex; gap: 4px; flex: 1; justify-content: center; }
#editor-actions { display: flex; gap: 6px; }
#editor-actions button {
  background: rgba(40,20,12,0.8);
  color: #f0d0b0;
  border: 1px solid rgba(255,140,80,0.4);
  padding: 6px 12px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer;
}
#editor-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
#editor-actions button:not(:disabled):hover { background: rgba(80,40,20,0.9); }
#editor-toolbar  { position: absolute; top: 60px; left: 12px;
                   display: flex; flex-direction: column; gap: 4px; }
.editor-tool {
  background: rgba(40,20,12,0.8);
  color: #f0d0b0;
  border: 1px solid rgba(255,140,80,0.4);
  padding: 6px 10px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; min-width: 92px; text-align: left;
}
.editor-tool.active { background: rgba(255,140,80,0.35); border-color: #ff8c50; }
.editor-tool:hover  { background: rgba(80,40,20,0.9); }
.editor-stage-tab {
  background: rgba(40,20,12,0.8);
  color: #f0d0b0;
  border: 1px solid rgba(255,140,80,0.3);
  padding: 4px 10px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.editor-stage-tab.active { background: rgba(255,140,80,0.35); border-color: #ff8c50; }
#editor-inspector{ position: absolute; top: 60px; right: 12px; min-width: 240px; max-width: 280px;
                   background: rgba(20,12,8,0.85); padding: 10px;
                   border: 1px solid rgba(255,140,80,0.25); font-size: 12px; }
#editor-list     { position: absolute; bottom: 40px; right: 12px; min-width: 240px; max-width: 320px;
                   background: rgba(20,12,8,0.85); padding: 10px;
                   border: 1px solid rgba(255,140,80,0.25); max-height: 40vh; overflow-y: auto; font-size: 12px; }
#editor-status   { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
                   font-size: 11px; opacity: 0.75; letter-spacing: 1px;
                   background: rgba(20,12,8,0.6); padding: 4px 10px;
                   border: 1px solid rgba(255,140,80,0.18); }
#editor-speed    { position: absolute; top: 60px; left: 130px;
                   background: rgba(20,12,8,0.85); color: #ffd0a0;
                   padding: 6px 12px;
                   border: 1px solid rgba(255,140,80,0.35);
                   font-size: 13px; font-weight: 700; letter-spacing: 1px;
                   font-variant-numeric: tabular-nums; }
.editor-section-title { font-size: 10px; letter-spacing: 2px; color: #ff8c50; margin-bottom: 6px; }
.editor-empty { opacity: 0.6; font-style: italic; }
.editor-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.editor-row label { width: 50px; opacity: 0.75; font-size: 11px; letter-spacing: 1px; }
.editor-row input { flex: 1; background: rgba(0,0,0,0.4); color: #fff;
                    border: 1px solid rgba(255,140,80,0.3); padding: 3px 6px;
                    font-family: inherit; font-size: 11px; }
.editor-row select { flex: 1; background: rgba(0,0,0,0.4); color: #fff;
                     border: 1px solid rgba(255,140,80,0.3); padding: 3px 6px;
                     font-family: inherit; font-size: 11px; }
.editor-action-btn {
  margin-top: 8px; width: 100%; padding: 5px;
  background: rgba(140,40,20,0.6); color: #ffd0b0;
  border: 1px solid rgba(200,80,40,0.5);
  font-family: inherit; font-size: 10px; letter-spacing: 1px; cursor: pointer;
}
.editor-action-btn:hover { background: rgba(180,60,30,0.8); }
.editor-cp-list { list-style: none; padding: 0; margin: 0; }
.editor-cp-row  { display: flex; gap: 2px; margin-bottom: 3px; }
.editor-cp-row.selected .editor-cp-pick { background: rgba(255,140,80,0.25); }
.editor-cp-pick {
  flex: 1; text-align: left;
  background: rgba(40,20,12,0.6); color: #f0d0b0;
  border: 1px solid rgba(255,140,80,0.2);
  padding: 4px 6px; font-family: inherit; font-size: 11px; cursor: pointer;
}
.editor-cp-pick:hover { background: rgba(80,40,20,0.7); }
.editor-cp-up, .editor-cp-down, .editor-cp-del {
  background: rgba(40,20,12,0.6); color: #f0d0b0;
  border: 1px solid rgba(255,140,80,0.2);
  padding: 0 6px; font-family: inherit; font-size: 11px; cursor: pointer;
}
.editor-cp-del:hover { background: rgba(140,40,20,0.7); }
.editor-list-pick {
  width: 100%; text-align: left;
  background: rgba(0,180,100,0.18); color: #c0ffd0;
  border: 1px solid rgba(0,255,140,0.35);
  padding: 5px 8px; font-family: inherit; font-size: 11px; cursor: pointer;
  margin-bottom: 6px;
}
.editor-list-pick:hover { background: rgba(0,180,100,0.3); }

/* Practice grid — dimmed style for unconfigured stages */
.stage-btn.not-configured {
  opacity: 0.55;
  border-style: dashed;
}
.stage-btn.not-configured .stage-feat {
  color: #c0c0c0;
  letter-spacing: 1px;
  font-size: 10px;
}
.stage-btn.not-configured:hover { opacity: 0.85; }

/* Stage selection group — 8 stages, 2-col grid */
#menu-screen #menu-tagline{font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:2.5px;color:rgba(255,160,0,0.55);text-align:center;margin:-12px 0 20px;
  animation:menuFadeDown 0.6s 0.18s ease-out both}
#menu-screen .menu-stages{display:grid;grid-template-columns:repeat(2, minmax(220px, 320px));
  gap:8px 12px;margin:0 auto 18px;justify-content:center;max-width:min(700px, 92vw);
  animation:menuFadeDown 0.6s 0.2s ease-out both}
#menu-screen .menu-stages .stage-btn{min-width:0;width:100%;padding:12px 16px;font-size:13px;
  text-align:left;line-height:1.2}
#menu-screen .menu-stages .stage-btn .stage-num{font-family:'Share Tech Mono',monospace;
  font-size:10px;color:rgba(255,160,0,0.55);letter-spacing:1.5px;display:block;margin-bottom:2px}
#menu-screen .menu-stages .stage-btn .stage-name{display:block;font-weight:700;letter-spacing:1px;
  font-size:13px;color:#ffa500;margin-bottom:3px}
#menu-screen .menu-stages .stage-btn .stage-feat{display:block;font-family:'Share Tech Mono',monospace;
  font-size:9px;opacity:0.55;letter-spacing:1px;margin:0;line-height:1.3}
@media (max-width:600px){
  #menu-screen .menu-stages{grid-template-columns:1fr;max-width:92vw}
}

/* Phase 6c — championship cup row (above individual stages) */
/* Phase 9c — menu split: main-view (cups + actions) and practice-view
   (8-stage grid). Main-view stays compact on any viewport. Practice-
   view scrolls on small landscape phones/tablets where 8 stages
   can't all fit (user screenshot showed 8 stages filling the whole
   viewport with title/cups cut off). */
#menu-main-view{display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:min(700px,92vw);margin:0 auto;
  animation:menuFadeDown 0.6s 0.2s ease-out both}
#menu-practice-view{display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:min(700px,92vw);margin:0 auto;
  max-height:70vh;overflow-y:auto;padding:4px 8px;
  animation:menuFadeDown 0.6s 0.2s ease-out both;
  /* Subtle scrollbar so the overflow feels intentional */
  scrollbar-width:thin;scrollbar-color:rgba(255,160,0,0.35) transparent}
#menu-practice-view::-webkit-scrollbar{width:6px}
#menu-practice-view::-webkit-scrollbar-thumb{background:rgba(255,160,0,0.35);border-radius:3px}
#menu-practice-view .menu-stages{margin-bottom:14px}
#menu-practice-view .menu-secondary{position:sticky;bottom:0;width:100%;
  background:linear-gradient(180deg,transparent 0%,rgba(15,5,2,0.85) 40%);
  padding:8px 0 4px}
#menu-cup-section{margin:0 auto 14px;text-align:center;
  animation:menuFadeDown 0.6s 0.22s ease-out both}
.menu-cup-label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:3px;
  color:rgba(255,160,0,0.45);margin-bottom:8px}
#menu-cup-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:min(700px, 92vw);margin:0 auto}
.cup-btn{background:rgba(255,160,0,0.05);
  border:1px solid rgba(255,160,0,0.2);color:#ffa500;
  padding:18px 48px;font-family:'Orbitron',monospace;font-size:16px;font-weight:700;
  cursor:pointer;letter-spacing:2px;border-radius:6px;
  transition:all 0.25s ease;pointer-events:auto;text-align:center;
  min-width:min(420px,80vw);box-sizing:border-box;
  position:relative;overflow:hidden}
.cup-btn:hover{background:rgba(255,160,0,0.15);
  border-color:rgba(255,160,0,0.5);transform:translateY(-1px);
  box-shadow:0 2px 16px rgba(255,120,0,0.15)}
/* Empty Mars Cup — no stages authored yet. Click still routes to the
   no-stages alert (handled in startChampionship), so we keep
   pointer-events on but mute the visuals. */
.cup-btn.disabled{opacity:0.5;cursor:not-allowed}
.cup-btn.disabled:hover{background:rgba(255,160,0,0.05);
  border-color:rgba(255,160,0,0.2);transform:none;box-shadow:none}
.cup-btn span{display:block;font-size:11px;font-weight:400;opacity:0.45;margin-top:6px;
  font-family:'Share Tech Mono',monospace;letter-spacing:1px}
/* Phase 9t — cup completion trophies. Appended to the cup button after
   the first successful traverse; badge on the top-right corner shows
   the lifetime completion count. .completed adds a faint border glow
   so the "you've beaten this one" status reads at a glance. */
.cup-btn.completed{border-color:rgba(255,220,120,0.95);
  box-shadow:0 0 14px rgba(255,180,60,0.22)}
.cup-trophy{position:absolute;top:4px;right:6px;font-size:13px;line-height:1;
  pointer-events:none;display:flex;align-items:center;gap:2px;
  color:#ffd070;text-shadow:0 0 6px rgba(255,200,80,0.6),0 0 2px rgba(0,0,0,0.5)}
.cup-trophy .cup-trophy-count{font-family:'Share Tech Mono',monospace;
  font-size:9px;letter-spacing:1px;opacity:0.85;padding-top:1px}
body.a11y-reduced-motion .cup-btn.completed{box-shadow:none}
/* Phase 9t — lifetime cup-count footer on the HIGH SCORES screen */
#hs-cup-summary{font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:1.5px;opacity:0.7;margin-top:14px;padding:8px 14px;
  border:1px solid rgba(255,160,0,0.18);border-radius:3px;
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  color:rgba(255,200,120,0.8)}
#hs-cup-summary .hs-cup-item{display:flex;align-items:center;gap:5px}
#hs-cup-summary .hs-cup-item .hs-cup-icon{font-size:13px;color:#ffd070}
#hs-cup-summary.empty{opacity:0.35}
@media (max-width:600px){
  #menu-cup-row{flex-direction:column;align-items:center}
}
#menu-screen .stage-btn,#menu-screen .cup-btn{width:min(460px,90vw)}

/* Short-viewport menu (landscape phones — heights ≤500px). The portrait
   `max-width:600px` rules above stack cups vertically, but on a 800×375
   landscape phone none of them trigger and the desktop layout overflows
   off-screen. Switch to a top-anchored, scrollable, compact layout that
   keeps cups + secondary actions on one line and drops the keyboard
   hint block. iPhone SE/8/X/12/13/14/15 landscape all sit ≤430px tall. */
@media (max-height:500px){
  #menu-screen{justify-content:flex-start;overflow-y:auto;
    padding:10px 0 10px;box-sizing:border-box;
    padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
    scrollbar-width:thin;scrollbar-color:rgba(255,160,0,0.35) transparent}
  #menu-screen > *{flex-shrink:0}
  #menu-screen::-webkit-scrollbar{width:6px}
  #menu-screen::-webkit-scrollbar-thumb{background:rgba(255,160,0,0.35);border-radius:3px}
  #menu-screen h1{font-size:clamp(22px,5vw,32px);letter-spacing:4px;margin-bottom:2px}
  #menu-screen h2{font-size:10px;letter-spacing:6px;margin-bottom:4px}
  #menu-screen .menu-divider{margin:0 auto 10px}
  #menu-cup-section{margin-bottom:8px}
  /* Override the portrait stack — keep cups in a single row even at
     <=600px width when the viewport is short (landscape phone). */
  #menu-cup-row{flex-direction:row;align-items:stretch;max-width:none;flex-wrap:nowrap}
  #menu-screen .cup-btn{padding:8px 12px;font-size:11px;letter-spacing:1.2px;min-width:0;width:auto}
  .cup-btn span{display:none}
  /* Secondary action row: 3 buttons side-by-side, no subtitles. */
  #menu-main-view .menu-secondary{display:flex;flex-direction:row;justify-content:center;
    gap:8px;flex-wrap:wrap}
  #menu-main-view .menu-secondary .stage-btn.secondary{padding:8px 12px;font-size:11px;
    letter-spacing:1.2px;min-width:0}
  #menu-main-view .menu-secondary .stage-btn.secondary span{display:none}
  /* Keyboard hint is dead weight on touch and the single tallest block
     in the menu (40px margin + 9 items wrapping). Hide outright. */
  #controls-hint{display:none}
  /* Practice grid: tighter gap, 4-column so 8 stages fit two rows. */
  #menu-screen .menu-stages{grid-template-columns:repeat(4,minmax(120px,1fr));gap:6px 8px}
  #menu-screen .menu-stages .stage-btn{padding:7px 9px;font-size:11px}
  #menu-screen .menu-stages .stage-btn .stage-num{font-size:9px;margin-bottom:1px}
  #menu-screen .menu-stages .stage-btn .stage-name{font-size:11px;margin-bottom:1px}
  #menu-screen .menu-stages .stage-btn .stage-feat{display:none}
  #menu-practice-view{max-height:none;padding:2px 6px}
}

/* Phase 6f — marketing credit footer */
#menu-credit{margin-top:18px;font-family:'Share Tech Mono',monospace;font-size:10px;
  color:rgba(255,160,0,0.40);letter-spacing:1.2px;text-align:center;
  animation:menuFadeDown 0.6s 0.55s ease-out both}
#menu-credit a{color:rgba(255,200,80,0.7);text-decoration:none;
  border-bottom:1px solid rgba(255,200,80,0.3);transition:all 0.2s ease}
#menu-credit a:hover{color:#ffd070;border-bottom-color:#ffd070}

/* Phase 6c — championship overlay on results screen (only visible during cup) */
#cup-progress{display:none;font-family:'Share Tech Mono',monospace;font-size:12px;
  color:rgba(255,200,80,0.85);text-align:center;margin:6px 0 18px;
  border:1px solid rgba(255,200,80,0.35);padding:8px 16px;border-radius:4px;
  background:rgba(255,180,40,0.06);letter-spacing:1.5px;line-height:1.5}
#cup-progress.active{display:block}
#cup-progress .cup-name{display:block;font-family:'Orbitron',monospace;font-weight:700;
  font-size:13px;letter-spacing:2px;color:#ffd070;margin-bottom:4px}
#cup-progress .cup-cumulative{display:block;font-size:18px;color:#fff0c0;
  text-shadow:0 0 8px rgba(255,200,80,0.5);margin:4px 0;font-weight:700}
#cup-progress .cup-stages{display:block;font-size:9px;opacity:0.6;letter-spacing:1.2px;margin-top:4px}
/* Free Roam / Tutorial — hide race-only HUD elements. The checkpoint
   arrow is the exception: the tutorial step machine repurposes it as the
   next-gate guide, so it only hides in plain Free Roam. */
body.free-roam #timer,
body.free-roam #stage-progress,
body.free-roam #stage-name,
body.free-roam:not(.tutorial) #checkpoint-arrow,
body.free-roam:not(.tutorial) #checkpoint-dist,
body.free-roam #cup-progress,
body.tutorial #timer,
body.tutorial #stage-progress,
body.tutorial #stage-name,
body.tutorial #cup-progress{display:none !important}
/* Tutorial-only chrome (pause-menu restart button) */
.tutorial-only{display:none !important}
body.tutorial .tutorial-only{display:inline-block !important}

/* ── Tutorial overlay (step-by-step controls coach) ──
   Sits over the HUD during tutorial mode. Big key chips pulse to draw
   the eye; subtitle reads like a cinema caption; skip button bottom-right. */
/* z-index 14: below pause-overlay (15) so pausing covers the tutorial UI,
   above HUD (10) so key chips render on top of speed/yoke gauges. */
#tutorial-overlay{position:fixed;left:0;right:0;bottom:0;top:0;z-index:14;
  pointer-events:none;font-family:'Orbitron',monospace;color:#ffa500}
#tutorial-overlay.hidden{display:none}
#tutorial-overlay > *{pointer-events:auto}
/* Desktop: the card is a transparent wrapper — children keep their own
   absolute positions. Mobile turns it into a top-center column (below). */
#tutorial-card{display:contents}
/* Auto-dim while actively driving so the text never hides the road; the
   skip/next row stays solid. Restored to full opacity on step change. */
#tutorial-card > *{transition:opacity 0.45s ease}
#tutorial-overlay.dim #tutorial-card > *{opacity:0.35}
#tutorial-progress{position:absolute;top:18px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:3px;opacity:0.75;
  background:rgba(10,5,0,0.55);padding:6px 14px;border:1px solid rgba(255,160,0,0.25);
  border-radius:4px}
#tutorial-keys{position:absolute;top:64px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  max-width:90vw}
#tutorial-keys .tut-key{display:inline-block;
  font-family:'Orbitron',monospace;font-weight:900;font-size:32px;
  min-width:62px;padding:12px 18px;letter-spacing:2px;
  color:#ffd070;background:rgba(20,8,0,0.78);
  border:2px solid rgba(255,170,40,0.85);border-radius:8px;
  text-shadow:0 0 14px rgba(255,180,60,0.65);
  box-shadow:0 0 0 4px rgba(255,160,0,0.18), 0 0 28px rgba(255,160,0,0.45);
  animation:tutKeyPulse 1.0s ease-in-out infinite}
#tutorial-keys .tut-key.small{font-size:18px;min-width:48px;padding:10px 12px}
#tutorial-keys .tut-or{font-size:14px;letter-spacing:2px;opacity:0.55}
@keyframes tutKeyPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 4px rgba(255,160,0,0.18), 0 0 28px rgba(255,160,0,0.45)}
  50%    {transform:scale(1.07);box-shadow:0 0 0 6px rgba(255,160,0,0.30), 0 0 44px rgba(255,160,0,0.75)}
}
#tutorial-subtitle{position:absolute;left:50%;bottom:140px;transform:translateX(-50%);
  max-width:80vw;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:18px;letter-spacing:1.2px;
  line-height:1.45;color:#fff0c0;
  background:rgba(8,3,0,0.70);padding:14px 22px;
  border:1px solid rgba(255,160,0,0.25);border-radius:6px;
  text-shadow:0 0 6px rgba(0,0,0,0.85)}
#tutorial-skip-row{position:absolute;top:14px;right:14px;display:flex;gap:8px}
#tutorial-skip-row button{
  font-family:'Orbitron',monospace;font-size:11px;font-weight:700;letter-spacing:2px;
  color:#ffa500;background:rgba(20,10,2,0.75);
  border:1px solid rgba(255,160,0,0.40);border-radius:4px;
  padding:8px 14px;cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s}
#tutorial-skip-row button:hover{background:rgba(60,28,8,0.85);
  border-color:rgba(255,180,40,0.75);color:#ffd070}
#tutorial-next{display:none}
#tutorial-overlay.show-next #tutorial-next{display:inline-block}
#tutorial-stay{display:none}
#tutorial-overlay.show-stay #tutorial-stay{display:inline-block;
  color:#9dffc0;border-color:rgba(80,255,150,0.45)}

/* Mobile landscape: the old layout put the subtitle at bottom:200px which
   lands mid-screen on short phone viewports — right on the road. Collapse
   progress + keys + subtitle into one compact top-center column instead:
   the road (screen center/bottom) stays clear, and nothing overlaps the
   touch zones (steer bottom-left, pedals bottom-right, pause top-right). */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  #tutorial-card{display:flex;position:absolute;
    top:calc(6px + env(safe-area-inset-top, 0px));
    left:50%;transform:translateX(-50%);
    flex-direction:column;align-items:center;gap:5px;
    max-width:min(58vw, 460px);pointer-events:auto}
  #tutorial-card > *{position:static;transform:none;left:auto;top:auto;bottom:auto}
  #tutorial-progress{font-size:9px;padding:3px 10px}
  #tutorial-keys{gap:8px;max-width:none}
  #tutorial-keys .tut-key{font-size:16px;min-width:34px;padding:5px 9px}
  #tutorial-keys .tut-key.small{font-size:12px;min-width:30px;padding:5px 7px}
  #tutorial-subtitle{font-size:11.5px;line-height:1.4;padding:7px 12px;max-width:none}
  /* Touch-pause sits at top-right (44px wide + 12px inset = 56px reserved);
     shift skip-row left of it so the buttons don't overlap. */
  #tutorial-skip-row{right:calc(68px + env(safe-area-inset-right, 0px))}
  #tutorial-skip-row button{font-size:9px;padding:6px 10px}
}

/* Mobile control highlight — applied to touch buttons / steer track halves
   when the current tutorial step expects them to be pressed. */
#touch-controls .tut-highlight{
  outline:3px solid #ffa500 !important;
  box-shadow:0 0 0 6px rgba(255,165,0,0.20), 0 0 32px rgba(255,165,0,0.65) !important;
  animation:tutTouchPulse 1.0s ease-in-out infinite}
@keyframes tutTouchPulse{
  0%,100%{outline-color:rgba(255,165,0,0.55);box-shadow:0 0 0 6px rgba(255,165,0,0.18), 0 0 24px rgba(255,165,0,0.45)}
  50%    {outline-color:rgba(255,200,80,1);   box-shadow:0 0 0 9px rgba(255,165,0,0.32), 0 0 44px rgba(255,165,0,0.85)}
}
/* Steering track halves — tutorial highlights only the side currently being taught */
#touch-steer-track .tut-steer-half{position:absolute;top:0;bottom:0;width:50%;
  border-radius:40px 0 0 40px;pointer-events:none;display:none}
#touch-steer-track .tut-steer-half.right{left:50%;border-radius:0 40px 40px 0}
#touch-steer-track .tut-steer-half.show{display:block;
  background:rgba(255,165,0,0.18);
  box-shadow:inset 0 0 0 2px #ffa500, 0 0 24px rgba(255,165,0,0.55);
  animation:tutTouchPulse 1.0s ease-in-out infinite}
#results-next-stage-btn{display:none;background:linear-gradient(180deg,rgba(255,200,80,0.22) 0%,rgba(255,160,40,0.10) 100%);
  border-color:rgba(255,200,80,0.55);color:#ffd070}
#results-next-stage-btn.active{display:inline-block}
#results-next-stage-btn:hover{background:linear-gradient(180deg,rgba(255,200,80,0.34) 0%,rgba(255,160,40,0.18) 100%);
  border-color:rgba(255,220,120,0.85)}

/* Primary stage buttons */
.stage-btn{background:linear-gradient(180deg,rgba(255,160,0,0.12) 0%,rgba(255,120,0,0.06) 100%);
  border:1px solid rgba(255,160,0,0.35);color:#ffa500;
  padding:18px 48px;font-family:'Orbitron',monospace;font-size:16px;font-weight:700;
  cursor:pointer;letter-spacing:2px;border-radius:6px;
  transition:all 0.25s ease;pointer-events:auto;
  min-width:min(420px,80vw);text-align:center;position:relative;overflow:hidden;box-sizing:border-box}
.stage-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,160,0,0.08),transparent);
  transition:left 0.5s ease}
.stage-btn:hover::before{left:100%}
.stage-btn:hover{background:linear-gradient(180deg,rgba(255,160,0,0.22) 0%,rgba(255,120,0,0.12) 100%);
  border-color:rgba(255,160,0,0.7);transform:translateY(-1px);
  box-shadow:0 4px 24px rgba(255,120,0,0.2),0 0 12px rgba(255,160,0,0.15),inset 0 1px 0 rgba(255,160,0,0.1)}
.stage-btn:active{transform:translateY(0);box-shadow:0 2px 12px rgba(255,120,0,0.15)}
.stage-btn span{display:block;font-size:11px;font-weight:400;opacity:0.45;margin-top:6px;
  font-family:'Share Tech Mono',monospace;letter-spacing:1px}

/* Secondary action (high scores, back) */
.menu-secondary{animation:menuFadeDown 0.6s 0.35s ease-out both;text-align:center}
.stage-btn.secondary{background:rgba(255,160,0,0.05);border:1px solid rgba(255,160,0,0.2)}
.stage-btn.secondary:hover{background:rgba(255,160,0,0.15);border-color:rgba(255,160,0,0.5);
  box-shadow:0 2px 16px rgba(255,120,0,0.15)}

/* Entrance animation */
@keyframes menuFadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

#countdown-screen{font-size:clamp(60px,15vw,140px);font-weight:900;
  text-shadow:0 0 40px rgba(255,100,0,0.6)}

/* Phase 10 — terrain load banner. Shown only when the heightmap fetch
   exceeds 500 ms so quick cache hits don't flash. Sits inside
   #countdown-screen (same parent, so hides with the overlay on exit). */
#terrain-loading{position:fixed;top:58%;left:50%;transform:translate(-50%,-50%);
  z-index:20;font-family:'Orbitron',sans-serif;font-size:clamp(13px,1.5vw,16px);
  letter-spacing:5px;color:#ffd070;
  padding:12px 24px;border:1px solid rgba(255,200,80,0.35);border-radius:4px;
  background:rgba(10,5,0,0.7);
  box-shadow:0 0 30px rgba(255,160,0,0.25);
  opacity:0;pointer-events:none;transition:opacity 0.3s ease}
#terrain-loading.show{opacity:1}
#terrain-loading::before{content:'';display:inline-block;width:8px;height:8px;
  background:#ffa500;border-radius:50%;margin-right:12px;vertical-align:middle;
  animation:terrainLoadingPulse 0.9s ease-in-out infinite}
@keyframes terrainLoadingPulse{0%,100%{opacity:0.3}50%{opacity:1}}
body.a11y-reduced-motion #terrain-loading::before{animation:none;opacity:1}

#results-screen h2{font-size:32px;margin-bottom:24px;letter-spacing:4px}
#results-time{font-size:56px;font-weight:900;margin-bottom:16px;
  text-shadow:0 0 20px rgba(255,160,0,0.5)}
#results-info{font-family:'Share Tech Mono',monospace;font-size:14px;opacity:0.6;margin-bottom:32px;line-height:2}
/* Reserved comparison line under the results time (currently unused) */
#results-vs-perseverance{font-family:'Share Tech Mono',monospace;font-size:13px;
  letter-spacing:1.5px;color:rgba(255,160,0,0.65);margin:-6px 0 18px;text-align:center;
  line-height:1.5}
#results-vs-perseverance .vs-line{display:block}
#results-vs-perseverance .vs-line.win{color:#6afa8e;text-shadow:0 0 8px rgba(106,250,142,0.4)}
#results-vs-perseverance .vs-sub{display:block;font-size:10px;opacity:0.5;margin-top:2px;letter-spacing:1px}
#results-screen .stage-btn{font-size:14px;padding:12px 28px;min-width:0}
#results-screen .stage-btn + .stage-btn{margin-top:8px}
/* At ANY viewport height, once the meta payout (medal + XP bar + quest
   deltas + nudge cards) makes the stacked results taller than the window,
   flex shrinks the children to fit BEFORE .overlay's overflow-y:auto can
   engage — and .stage-btn's overflow:hidden (sheen effect) zeroes its
   automatic minimum size, so the buttons squash into overlapping slivers.
   Lock the children; `safe center` + overflow-y:auto then scroll instead.
   (The max-height:600px block below additionally trims spacing on top.) */
#results-screen > *{flex-shrink:0}
#highscores-screen > *{flex-shrink:0}
/* Short-viewport (mobile landscape) — the stacked content
   (title + time + vs-perseverance + name input + info + leaderboard +
   multiple buttons) overflows a ~400px-tall landscape viewport, and
   the parent .overlay's justify-content:center hides the overflow.
   Switch to top-anchored + scrollable and trim vertical spacing so
   everything (including WATCH REPLAY / SUBMIT buttons) is reachable. */
@media (max-height:600px){
  #results-screen{justify-content:flex-start;overflow-y:auto;
    padding:14px 16px;box-sizing:border-box;
    scrollbar-width:thin;scrollbar-color:rgba(255,160,0,0.35) transparent}
  /* Flex children default to flex-shrink:1, which squashes the stacked
     buttons into overlapping slivers once content overflows. Lock them. */
  #results-screen > *{flex-shrink:0}
  #results-screen::-webkit-scrollbar{width:6px}
  #results-screen::-webkit-scrollbar-thumb{background:rgba(255,160,0,0.35);border-radius:3px}
  #results-screen h2{font-size:22px;margin-bottom:10px;letter-spacing:3px}
  #results-time{font-size:36px;margin-bottom:8px}
  #results-vs-perseverance{font-size:12px;margin:-4px 0 10px}
  #results-info{font-size:12px;margin-bottom:14px;line-height:1.6}
  #results-screen #name-input-wrap{margin-bottom:12px}
  #results-screen #name-input-wrap label{margin-bottom:4px}
  #results-screen #name-input-wrap input{padding:8px 14px;font-size:14px}
  #results-screen #leaderboard-panel{margin-top:10px;max-height:120px}
  #results-screen .stage-btn{padding:9px 22px;font-size:13px}
  #results-screen .stage-btn + .stage-btn{margin-top:6px}
  #results-screen #cup-progress{margin-bottom:10px}
  /* Same treatment for the high-scores screen — desktop portrait sized
     it for ~700px height; landscape phone (<500px tall) lost the BACK
     button below the fold. Top-anchor + scroll + tighter spacing. */
  #highscores-screen{justify-content:flex-start;overflow-y:auto;
    padding:14px 16px;box-sizing:border-box;
    padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
    scrollbar-width:thin;scrollbar-color:rgba(255,160,0,0.35) transparent}
  #highscores-screen > *{flex-shrink:0}
  #highscores-screen::-webkit-scrollbar{width:6px}
  #highscores-screen::-webkit-scrollbar-thumb{background:rgba(255,160,0,0.35);border-radius:3px}
  #highscores-screen h2{font-size:22px;margin-bottom:6px;letter-spacing:3px}
  #highscores-screen .hs-subtitle{margin-bottom:10px}
  #highscores-screen .hs-tabs{margin-bottom:10px}
  #hs-personal-best{margin-bottom:8px;padding:6px 10px;font-size:11px}
  #hs-panel{max-height:140px}
  #highscores-screen .stage-btn{padding:9px 22px;font-size:13px;margin-top:8px}
  #hs-cup-summary{margin-top:8px;padding:6px 10px;font-size:10px}
}

/* Leaderboard */
#leaderboard-panel{margin-top:20px;width:min(400px,80vw);max-height:200px;overflow-y:auto}
#leaderboard-panel h3{font-size:13px;letter-spacing:3px;opacity:0.6;margin-bottom:8px;font-family:'Share Tech Mono',monospace}
.lb-row{display:flex;justify-content:space-between;padding:4px 0;font-family:'Share Tech Mono',monospace;
  font-size:13px;border-bottom:1px solid rgba(255,160,0,0.1)}
.lb-rank{opacity:0.5;width:30px}.lb-name{flex:1}.lb-time{text-align:right}

/* High Scores */
#highscores-screen h2{font-size:32px;margin-bottom:8px;letter-spacing:4px}
#highscores-screen .hs-subtitle{font-family:'Share Tech Mono',monospace;font-size:12px;opacity:0.4;letter-spacing:3px;margin-bottom:24px}
/* Phase 9i — 8 tabs on desktop fit on one row via flex-wrap; on narrow
   viewports (≤420px) they squashed into 4-across-2-rows which looked
   crowded. Widen allowed width and let them wrap cleanly, and at
   <=420px switch to a single-row horizontal scroll with tighter
   padding + scroll-snap so the full list stays accessible without
   crushing each tab to an illegible 6px square. */
.hs-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:24px;max-width:min(640px,92vw)}
.hs-tab{background:rgba(255,160,0,0.08);border:1px solid rgba(255,160,0,0.2);color:rgba(255,160,0,0.5);
  padding:10px 24px;font-family:'Orbitron',monospace;font-size:13px;font-weight:700;
  cursor:pointer;letter-spacing:2px;border-radius:4px;transition:all 0.2s;
  flex:0 0 auto}
.hs-tab:hover{background:rgba(255,160,0,0.15);color:#ffa500}
.hs-tab.active{background:rgba(255,160,0,0.2);border-color:#ffa500;color:#ffa500;
  box-shadow:0 0 15px rgba(255,160,0,0.2)}
@media (max-width:420px){
  .hs-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding:2px 8px 8px;scroll-snap-type:x mandatory;
    /* Thin Firefox scrollbar + orange WebKit thumb so the overflow is discoverable */
    scrollbar-width:thin;scrollbar-color:rgba(255,160,0,0.35) transparent;
    -webkit-overflow-scrolling:touch;
    /* Fade-out hint on the right edge signals "more tabs →" */
    mask-image:linear-gradient(90deg,#000 0%,#000 90%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 90%,transparent 100%);
    max-width:96vw}
  .hs-tabs::-webkit-scrollbar{height:4px}
  .hs-tabs::-webkit-scrollbar-thumb{background:rgba(255,160,0,0.35);border-radius:2px}
  .hs-tab{padding:9px 14px;font-size:12px;letter-spacing:1.5px;scroll-snap-align:center}
  .hs-tab.active{
    /* Nudge the active tab into view on first paint via scroll-snap + JS */
    box-shadow:0 0 12px rgba(255,160,0,0.25)}
}
#hs-panel{width:min(440px,85vw);max-height:320px;overflow-y:auto}
#hs-panel h3{font-size:13px;letter-spacing:3px;opacity:0.6;margin-bottom:8px;font-family:'Share Tech Mono',monospace}
#hs-personal-best{font-family:'Share Tech Mono',monospace;font-size:13px;margin-bottom:16px;
  padding:8px 12px;border:1px solid rgba(255,160,0,0.15);border-radius:4px;
  background:rgba(255,160,0,0.05);color:rgba(255,160,0,0.7)}
#highscores-screen .stage-btn{font-size:14px;padding:12px 28px;margin-top:16px;min-width:0}

/* Settings (main menu) */
#settings-screen h2{font-size:32px;margin-bottom:8px;letter-spacing:4px}
#settings-screen .settings-subtitle{font-family:'Share Tech Mono',monospace;font-size:12px;opacity:0.4;letter-spacing:3px;margin-bottom:20px}
#settings-screen .settings-block{width:min(440px,90vw);text-align:center;margin-bottom:22px}
#settings-screen .settings-label{font-family:'Share Tech Mono',monospace;font-size:11px;opacity:0.55;letter-spacing:2px;margin-bottom:10px}
#settings-screen .settings-cam-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:8px}
#settings-screen .settings-cam-btn{flex:0 0 auto;background:rgba(255,160,0,0.08);border:1px solid rgba(255,160,0,0.25);color:rgba(255,160,0,0.65);
  padding:12px 28px;font-family:'Orbitron',monospace;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:2px;border-radius:4px;transition:all 0.2s}
#settings-screen .settings-cam-btn:hover{background:rgba(255,160,0,0.14);color:#ffa500;border-color:rgba(255,160,0,0.45)}
#settings-screen .settings-cam-btn.active{background:rgba(255,160,0,0.22);border-color:#ffa500;color:#ffa500;box-shadow:0 0 15px rgba(255,160,0,0.2)}
#settings-screen .settings-hint{font-family:'Share Tech Mono',monospace;font-size:11px;opacity:0.45;letter-spacing:1.5px;line-height:1.7;margin-top:18px;max-width:min(440px,90vw)}
#settings-screen .settings-hint kbd{font-family:'Orbitron',monospace;font-size:10px;padding:2px 6px;border:1px solid rgba(255,160,0,0.35);border-radius:3px;margin:0 2px}
#settings-screen .stage-btn{font-size:14px;padding:12px 28px;margin-top:10px;min-width:0}

/* Name input */
#name-input-wrap{margin-bottom:20px}
#name-input-wrap input{background:rgba(255,160,0,0.1);border:1px solid rgba(255,160,0,0.4);
  color:#ffa500;padding:10px 16px;font-family:'Orbitron',monospace;font-size:16px;
  text-align:center;outline:none;border-radius:4px;width:200px;letter-spacing:2px}
#name-input-wrap input::placeholder{color:rgba(255,160,0,0.3)}
#name-input-wrap label{display:block;font-size:11px;opacity:0.5;margin-bottom:6px;font-family:'Share Tech Mono',monospace}

/* Vibejam badge */
#vibejam-badge{position:fixed;bottom:8px;right:8px;z-index:5;opacity:0.6}

/* ── Rotate-device overlay (portrait warning) ── */
#rotate-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(5,1,1,0.97);
  z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;
  color:#ffa500;font-family:'Orbitron',monospace;text-align:center;padding:20px}
#rotate-overlay .rotate-icon{font-size:64px;margin-bottom:20px;animation:rotateHint 2s ease-in-out infinite}
#rotate-overlay h2{font-size:20px;letter-spacing:3px;margin-bottom:12px}
#rotate-overlay p{font-size:13px;opacity:0.6;font-family:'Share Tech Mono',monospace}
@keyframes rotateHint{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}

/* ── Mobile touch controls ── */
#touch-controls{position:fixed;bottom:0;left:0;width:100%;height:100%;z-index:15;pointer-events:none;display:none}
#touch-controls.active{display:block}

/* user-select + touch-callout disabled so a long-press on a pedal
   doesn't open the iOS callout (Copy / Look Up / Share) or start a
   text selection — those swallow the touchend and leave the throttle
   "stuck", which the auto-respawn then resets, looking like a restart. */
.touch-btn{position:absolute;pointer-events:auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-weight:700;letter-spacing:1px;
  border:2px solid rgba(255,160,0,0.35);background:rgba(255,160,0,0.08);
  color:rgba(255,160,0,0.6);transition:background 0.05s,border-color 0.05s;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.touch-btn.pressed{background:rgba(255,160,0,0.25);border-color:rgba(255,160,0,0.7);
  color:#ffa500;box-shadow:0 0 15px rgba(255,160,0,0.3)}
/* iOS Safari can still raise the text-selection loupe on the text node
   inside the button, so cover children explicitly. */
.touch-btn *,#touch-steer-track *,#touch-pause *{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  pointer-events:none}

/* Steering joystick — left side. Offsets use calc(...) + safe-area
   insets so the joystick + pedals clear iPhone landscape's home-indicator
   strip (~21px) and notch rail (~44px). On non-iOS the env() values
   resolve to 0 and we keep the original geometry. */
#touch-steer-track{position:absolute;left:calc(16px + env(safe-area-inset-left));
  bottom:calc(40px + env(safe-area-inset-bottom));width:200px;height:80px;
  pointer-events:auto;border-radius:40px;
  border:2px solid rgba(255,160,0,0.25);background:rgba(255,160,0,0.05);
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;touch-action:none}
#touch-steer-track::before{content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:2px;height:40px;background:rgba(255,160,0,0.15);
  border-radius:1px}
#touch-steer-thumb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  border:2px solid rgba(255,160,0,0.5);background:rgba(255,160,0,0.15);
  pointer-events:none;transition:none}
#touch-steer-track.active #touch-steer-thumb{border-color:rgba(255,160,0,0.8);
  background:rgba(255,160,0,0.3);box-shadow:0 0 12px rgba(255,160,0,0.3)}

/* Pedals — right side. Same safe-area treatment as the joystick. */
#touch-gas{right:calc(20px + env(safe-area-inset-right));
  bottom:calc(100px + env(safe-area-inset-bottom));width:90px;height:90px;font-size:13px}
#touch-brake{right:calc(130px + env(safe-area-inset-right));
  bottom:calc(50px + env(safe-area-inset-bottom));width:75px;height:75px;font-size:11px}
#touch-handbrake{right:calc(130px + env(safe-area-inset-right));
  bottom:calc(145px + env(safe-area-inset-bottom));width:60px;height:60px;font-size:9px}

/* Look-around pair — sit just above the steering joystick (joystick is at
   left:16, bottom:40, height:80, so its top edge is at bottom:120). Left
   thumb owns steering AND looking; players inspecting damage aren't actively
   steering anyway. Inject KeyQ / KeyE through the existing touchMap. */
#touch-look-left{left:calc(20px + env(safe-area-inset-left));
  bottom:calc(135px + env(safe-area-inset-bottom));width:48px;height:48px;font-size:18px}
#touch-look-right{left:calc(168px + env(safe-area-inset-left));
  bottom:calc(135px + env(safe-area-inset-bottom));width:48px;height:48px;font-size:18px}

/* Gear shifter — vertical column above the handbrake. Three discrete chips
   (H / D / L) so the player can swap reduction without a keyboard. Tap toggles
   gear and updates the .active highlight; setGear() also refreshes after a
   keyboard press so the two paths stay in sync. */
#touch-gears{position:absolute;right:calc(140px + env(safe-area-inset-right));
  bottom:calc(215px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:5px;pointer-events:auto}
.touch-gear-btn{width:40px;height:30px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;font-weight:700;font-size:14px;letter-spacing:1px;
  border:2px solid rgba(255,160,0,0.35);background:rgba(255,160,0,0.08);
  color:rgba(255,160,0,0.65);
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  transition:background 0.05s,border-color 0.05s,color 0.05s}
.touch-gear-btn.active{background:rgba(255,160,0,0.30);
  border-color:rgba(255,180,40,0.85);color:#ffd070;
  box-shadow:0 0 12px rgba(255,160,0,0.45)}
.touch-gear-btn *{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  pointer-events:none}

/* Pause/exit button for mobile */
#touch-pause{position:absolute;top:calc(12px + env(safe-area-inset-top));
  right:calc(12px + env(safe-area-inset-right));width:44px;height:44px;font-size:16px;
  pointer-events:auto;border-radius:8px;border:1px solid rgba(255,160,0,0.3);
  background:rgba(10,5,0,0.5);color:rgba(255,160,0,0.6);
  font-family:'Orbitron',monospace;display:none;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}

/* ── Debug overlays (Phase 0) — backtick = FPS, Ctrl+backtick = debug HUD ── */
#fps-overlay,#debug-overlay{position:fixed;z-index:9998;font-family:'Share Tech Mono',monospace;
  font-size:11px;color:rgba(255,200,80,0.9);background:rgba(6,3,0,0.78);
  padding:6px 10px;border:1px solid rgba(255,160,0,0.25);border-radius:3px;
  pointer-events:none;white-space:pre;line-height:1.45;display:none;letter-spacing:0.5px}
#fps-overlay{top:8px;left:8px}
#debug-overlay{bottom:8px;right:8px;max-width:420px;max-height:92vh;overflow:auto;pointer-events:auto}
#fps-overlay.active,#debug-overlay.active{display:block}
/* Mobile: hide the debug overlay — it covers half the HUD on phones and
   there's no F9 key to toggle. Keep FPS overlay visible (tiny, top-left,
   useful for perf). Desktop / large-tablet breakpoint: > 900 px wide OR
   a precise pointer (mouse/trackpad). Touch-only small screens get the
   overlay hidden. Keep the .active class semantics intact so desktop
   users who came from the same localStorage see it as before. */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  #debug-overlay.active { display: none }
}

/* ── Tuning panel (hotkey `1`) — right-dock, physics knob UI ── */
#tuning-panel{position:fixed;top:0;right:0;width:360px;height:100vh;z-index:9990;
  background:rgba(10,5,2,0.94);border-left:1px solid rgba(255,165,0,0.35);
  color:#ffcc80;font-family:'Share Tech Mono',monospace;font-size:12px;
  padding:12px 14px 20px;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,0.6);
  display:none;pointer-events:auto;box-sizing:border-box}
#tuning-panel.active{display:block}
#tuning-panel h2{font-family:'Orbitron',sans-serif;color:#ffa500;font-size:13px;
  letter-spacing:2px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
#tuning-panel .tp-close{cursor:pointer;background:none;border:none;color:#ffa500;
  font-size:18px;padding:0 6px;line-height:1}
#tuning-panel .tp-preset-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,165,0,0.2)}
#tuning-panel select,
#tuning-panel input[type=text],
#tuning-panel input[type=number],
#tuning-panel textarea{background:rgba(0,0,0,0.45);color:#ffcc80;
  border:1px solid rgba(255,165,0,0.3);font-family:inherit;font-size:11px;padding:3px 6px;box-sizing:border-box}
#tuning-panel .tp-preset-btns{display:flex;gap:4px;flex-wrap:wrap}
#tuning-panel button{background:rgba(255,165,0,0.12);color:#ffcc80;
  border:1px solid rgba(255,165,0,0.35);font-family:inherit;font-size:10px;
  letter-spacing:1px;padding:4px 8px;cursor:pointer}
#tuning-panel button:hover:not(:disabled){background:rgba(255,165,0,0.22)}
#tuning-panel button:disabled{opacity:0.4;cursor:not-allowed}
#tuning-panel .tp-group-header{font-family:'Orbitron',sans-serif;color:#ffa500;
  font-size:10px;letter-spacing:2px;margin:12px 0 4px;opacity:0.85}
#tuning-panel .tp-row{display:grid;grid-template-columns:1fr 70px 18px;
  gap:6px;margin:4px 0;align-items:center}
#tuning-panel .tp-row label{font-size:10px;opacity:0.75;letter-spacing:0.5px;
  grid-column:1/-1;margin-bottom:-2px;cursor:help}
#tuning-panel .tp-row input[type=range]{grid-column:1/2;width:100%;accent-color:#ffa500;margin:0}
#tuning-panel .tp-row input[type=number]{grid-column:2/3;width:100%;font-variant-numeric:tabular-nums}
#tuning-panel .tp-row .tp-reset{grid-column:3/4;background:none;border:none;
  color:#ffa500;opacity:0.55;padding:0;cursor:pointer;font-size:14px;line-height:1}
#tuning-panel .tp-row .tp-reset:hover{opacity:1;background:none}
#tuning-panel .tp-row.tp-select-row{grid-template-columns:1fr 18px}
#tuning-panel .tp-row.tp-select-row select{grid-column:1/2;width:100%}
#tuning-panel .tp-row.tp-select-row .tp-reset{grid-column:2/3}

/* Save-preset mini-modal — absolutely positioned inside the panel so it
   never traps pointer events over the running game. */
#tuning-panel .tp-save-modal{position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(5,2,0,0.94);padding:18px;display:none;flex-direction:column;gap:10px;box-sizing:border-box}
#tuning-panel .tp-save-modal.active{display:flex}
#tuning-panel .tp-save-modal h3{font-family:'Orbitron',sans-serif;color:#ffa500;
  font-size:12px;letter-spacing:2px;margin:0 0 6px}
#tuning-panel .tp-save-modal label{font-size:10px;opacity:0.75;letter-spacing:0.5px;margin-bottom:-4px}
#tuning-panel .tp-save-modal input,
#tuning-panel .tp-save-modal textarea{width:100%}
#tuning-panel .tp-save-modal textarea{resize:vertical;min-height:50px}
#tuning-panel .tp-save-modal .tp-save-err{color:#ff6a4a;font-size:10px;min-height:12px}
#tuning-panel .tp-save-modal .tp-save-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:auto}

/* Nudge debug overlay left so it doesn't collide with the right-docked panel. */
body:has(#tuning-panel.active) #debug-overlay.active{right:376px}

/* Narrow viewports (phones): the side-dock becomes a full-width sheet
   since 360 px is >90% of a 375 px phone. Tuning panel is opt-in via
   the pause-menu dev-tools row on touch devices. */
@media (max-width: 480px) {
  #tuning-panel{width:100vw;border-left:none}
  body:has(#tuning-panel.active) #debug-overlay.active{right:8px}
}

/* ── Audio mixer overlay (Phase 1f) — M key toggles ── */
#mixer-overlay{position:fixed;top:50%;right:14px;transform:translateY(-50%);z-index:9997;
  font-family:'Share Tech Mono',monospace;font-size:11px;
  color:rgba(255,200,80,0.92);background:rgba(6,3,0,0.86);
  padding:14px 16px;border:1px solid rgba(255,160,0,0.3);border-radius:4px;
  pointer-events:auto;display:none;min-width:230px;
  box-shadow:0 0 20px rgba(255,160,0,0.1)}
#mixer-overlay.active{display:block}
#mixer-overlay .mixer-header{font-family:'Orbitron',monospace;font-size:13px;
  letter-spacing:3px;color:#ffa500;margin-bottom:10px;padding-bottom:6px;
  border-bottom:1px solid rgba(255,160,0,0.25)}
#mixer-overlay .mixer-hint{font-size:9px;opacity:0.4;letter-spacing:1px;
  margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,160,0,0.15);text-align:right}
.mixer-row{display:grid;grid-template-columns:58px 1fr 36px;align-items:center;gap:10px;margin:5px 0}
.mixer-row label{opacity:0.65;font-size:10px;letter-spacing:1.2px}
.mixer-row input[type=range]{accent-color:#ffa500;width:100%;cursor:pointer}
.mixer-row .mixer-val{text-align:right;opacity:0.55;font-size:10px;font-variant-numeric:tabular-nums}
/* ── Phase 2e: co-driver controls in the mixer ── */
#mixer-overlay .mixer-divider{margin:9px -4px;height:1px;background:rgba(255,160,0,0.18)}
#mixer-overlay .codriver-row{display:flex;align-items:center;gap:10px;margin:5px 0;font-size:10px}
#mixer-overlay .codriver-row label{opacity:0.65;letter-spacing:1.2px;min-width:58px}
#mixer-overlay .codriver-toggle{cursor:pointer;display:flex;align-items:center;gap:8px;
  flex:1;color:rgba(255,200,80,0.92)}
#mixer-overlay .codriver-toggle input{accent-color:#ffa500;cursor:pointer;width:14px;height:14px}
#mixer-overlay #codriver-voice{flex:1;background:rgba(10,5,0,0.65);
  border:1px solid rgba(255,160,0,0.3);color:rgba(255,200,80,0.92);
  font-family:'Share Tech Mono',monospace;font-size:10px;padding:3px 6px;
  border-radius:2px;outline:none;max-width:160px;cursor:pointer}
#mixer-overlay #codriver-voice:disabled{opacity:0.4;cursor:not-allowed}
/* Phase 7e: input bindings sub-section */
#mixer-overlay .mixer-section-label{font-family:'Share Tech Mono',monospace;font-size:9px;
  letter-spacing:2.5px;color:rgba(255,160,0,0.45);margin:8px 0 4px;text-align:left;padding-left:2px}
#mixer-overlay .input-row{display:grid;grid-template-columns:62px 1fr 36px;align-items:center;gap:10px;
  margin:4px 0;font-size:10px}
#mixer-overlay .input-row label{opacity:0.65;letter-spacing:1.2px}
#mixer-overlay .input-row input[type=range]{accent-color:#6afa8e;width:100%;cursor:pointer}
#mixer-overlay .input-row .input-val{text-align:right;opacity:0.55;font-size:10px;font-variant-numeric:tabular-nums}

/* Phase 9k — audio preset row at top of mixer (four quick-apply buttons).
   Layout: 4-column flex grid, each button compact, active one highlighted. */
#mixer-overlay .mixer-presets{display:flex;gap:4px;margin:0 -2px 10px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,160,0,0.15)}
#mixer-overlay .preset-btn{flex:1;background:rgba(255,160,0,0.06);
  border:1px solid rgba(255,160,0,0.18);color:rgba(255,200,80,0.55);
  padding:6px 2px;font-family:'Share Tech Mono',monospace;font-size:9px;
  letter-spacing:1.5px;cursor:pointer;border-radius:2px;transition:all 0.15s;
  text-align:center}
#mixer-overlay .preset-btn:hover{background:rgba(255,160,0,0.12);color:#ffa500}
#mixer-overlay .preset-btn.active{background:rgba(255,160,0,0.22);
  border-color:#ffa500;color:#ffa500;
  box-shadow:inset 0 0 6px rgba(255,160,0,0.18)}

/* Phase 9j — keyboard rebinding rows. Each row is:
     [label] [current-binding chip, click to rebind] [reset button]
   When capturing a new key: chip shows "PRESS A KEY…" in orange pulse. */
#mixer-overlay .keys-row{display:grid;grid-template-columns:62px 1fr 18px;
  align-items:center;gap:8px;margin:4px 0;font-size:10px}
#mixer-overlay .keys-row label{opacity:0.65;letter-spacing:1.2px}
#mixer-overlay .key-chip{background:rgba(10,5,0,0.65);border:1px solid rgba(255,160,0,0.3);
  color:rgba(255,200,80,0.92);font-family:'Share Tech Mono',monospace;font-size:10px;
  padding:3px 6px;border-radius:2px;cursor:pointer;text-align:center;
  min-width:80px;transition:all 0.15s;letter-spacing:0.5px}
#mixer-overlay .key-chip:hover{background:rgba(255,160,0,0.12);border-color:#ffa500}
#mixer-overlay .key-chip.capturing{background:rgba(255,160,0,0.18);border-color:#ffa500;
  color:#ffd070;animation:keyCapturePulse 0.8s ease-in-out infinite}
#mixer-overlay .key-chip.conflict{border-color:#ff4b2b;color:#ff7a5b}
@keyframes keyCapturePulse{0%,100%{opacity:0.85}50%{opacity:1}}
body.a11y-reduced-motion #mixer-overlay .key-chip.capturing{animation:none}
#mixer-overlay .key-reset{background:transparent;border:none;color:rgba(255,200,80,0.45);
  cursor:pointer;font-size:12px;padding:2px;line-height:1;font-family:inherit}
#mixer-overlay .key-reset:hover{color:#ffa500}
#mixer-overlay .keys-footer{display:flex;justify-content:flex-end;margin-top:6px}
#mixer-overlay .keys-reset-all{background:transparent;border:1px solid rgba(255,160,0,0.25);
  color:rgba(255,200,80,0.65);font-family:'Share Tech Mono',monospace;
  font-size:9px;letter-spacing:1.5px;padding:4px 10px;cursor:pointer;border-radius:2px;
  transition:all 0.15s}
#mixer-overlay .keys-reset-all:hover{border-color:#ffa500;color:#ffa500}

/* Phase 9b — mobile HUD layout. Trigger on ANY coarse-pointer device
   up to 1200 px wide (previously required max-height:500px, which
   missed iPhone X 375×812, iPad 768×1024, and other landscape
   tablets — those kept the desktop bottom-centre speed-display and
   blocked the right-side touch-gas button).

   Layout (user preference: speed-display on the LEFT):
     top-left    : speed-display chip (compact, vertical telem)
     mid-left    : damage cluster (below speed-display)
     top-centre  : (free — stage-name hidden during PLAY)
     top-right   : timer + checkpoint-dist stacked
     right col   : cam button
     far right   : stage-progress vertical bar
     bottom-left : touch-steer joystick
     bottom-right: touch-gas / brake / handbrake
   Nothing collides with the right-side touch zone now. */
@media (pointer:coarse) and (max-width:1200px){
  #timer{top:calc(10px + env(safe-area-inset-top));
    right:calc(12px + env(safe-area-inset-right));font-size:18px;padding:4px 10px}
  /* Speed chip pinned TOP-LEFT — out of the bottom touch-pedal zone.
     On mobile the yoke stays at bottom-centre as a steering indicator
     (touch controls are over there anyway), and the speed/telem stack
     reflows into a vertical column at top-left. */
  #speed-display{bottom:auto;top:calc(10px + env(safe-area-inset-top));
    left:calc(12px + env(safe-area-inset-left));transform:none;
    padding:6px 10px;min-width:auto;text-align:left}
  #speed-val{font-size:22px;letter-spacing:2px}
  #speed-unit{font-size:11px;margin-left:3px}
  #gear-dots{font-size:14px;margin-top:1px}
  /* Telem strip: collapse from horizontal-below-yoke to vertical-stack
     beneath the speed chip. Same content, just rearranged. */
  #telem-strip{position:absolute;bottom:auto;top:78px;left:12px;
    transform:none;flex-direction:column;align-items:flex-start;
    gap:3px;padding:5px 8px;font-size:9px}
  #telem-strip #tach-bar{width:140px;height:4px}
  #telem-strip .telem-row{grid-template-columns:22px 140px 38px;gap:4px;margin:1px 0}
  #telem-strip .telem-val{min-width:0}
  #telem-strip #surface-readout{margin-top:2px;font-size:8px;padding:2px 6px}
  /* Stage name hidden during PLAY — shown on countdown + results only.
     Players see it in those screens; keeping it off the play HUD lets
     speed-display + timer breathe at 375px widths. */
  #stage-name{display:none}
  #checkpoint-dist{top:46px;right:12px;font-size:11px;padding:2px 8px}
  /* Stage-progress: move to right side so speed-display's top-left
     anchor has vertical room to breathe. Still mid-height, shorter. */
  #stage-progress{height:22vh;left:auto;right:4px;top:55%}
  #exit-btn{display:none}
  #cam-btn{top:82px;right:12px;font-size:9px;padding:3px 6px;letter-spacing:0.8px;
    min-width:80px;text-align:center}
  /* Raise the gas pedal so it can't collide with the right-column row
     even when Chrome iOS shrinks the viewport. */
  #touch-gas{bottom:calc(120px + env(safe-area-inset-bottom))}
  /* Damage cluster: dropped below the telem strip so they don't collide.
     Speed chip ~50px tall + telem strip ~88px tall + gaps = ~150px from top. */
  #damage-cluster{top:172px;left:12px;right:auto;min-width:108px;padding:5px 7px}
  .dmg-corner{width:8px;height:8px}
  .dmg-bar-row{grid-template-columns:46px 1fr;gap:4px;font-size:8px}
  /* Split-delta flash — pulled up so it doesn't crowd joystick thumb area */
  #split-delta{top:30vh;font-size:34px}
  /* Stuck hint — same reason; keep centred but higher to miss bottom UI */
  #stuck-hint{top:38vh;font-size:11px;padding:8px 16px}
  /* Shrink + lift the steering yoke so it clears the touch joystick
     (left:16,bottom:40,200x80) and the brake cluster (right:130,bottom:50)
     on narrow landscape phones. Opacity dialled down since it's now closer
     to the eye-line on small screens. */
  #steer-wheel-hud{width:170px;height:92px;bottom:12px;opacity:0.6}
  /* Mobile HUD always-on declutter (cheap wins that aren't covered by
     the MINIMAL HUD opt-in below). Gamepad chip is meaningless on a
     phone, and the damage bars are redundant info on top of the corner
     dots — the dots already read at a glance. */
  #gamepad-indicator{display:none}
  #damage-cluster .dmg-bars{display:none}
  /* Drift panel had no mobile rules — it sat at right:16px, top:50%,
     overlapping the brake (right:130;bottom:50;75×75) and handbrake
     (right:130;bottom:145;60×60) touch buttons. Re-anchor below the
     cam button (which sits at top:82px;right:12px;~22px tall), drop
     the verbose readout — score alone reads at a glance during a chain. */
  #drift-panel{top:128px;right:8px;left:auto;bottom:auto;transform:none;
    flex-direction:row;gap:6px}
  #drift-meter{width:6px;height:80px}
  #drift-meter-peak{height:1px}
  #drift-readout{min-width:0}
  #drift-multiplier,#drift-label{display:none}
  #drift-score{font-size:14px;letter-spacing:0}
}
/* MINIMAL HUD opt-in (default-on for touch via the accessibility module).
   Hides the secondary readouts on top of the mobile defaults above —
   leaves: timer, speed/gear chip, damage corners, touch controls, AND
   the cam button (it's an active control, not a passive readout — hiding
   it left mobile players with no way to switch view). Selectors match
   elements as they exist on main today: #telem-strip (sim cockpit detail,
   restructured by main into a vertical column), #steer-wheel-hud (yoke
   SVG that duplicates the on-screen joystick), plus drift / checkpoint-
   dist / stage-progress. Same rules apply on desktop when MINIMAL HUD
   is toggled explicitly. */
body.hud-minimal #drift-panel,
body.hud-minimal #checkpoint-dist,
body.hud-minimal #stage-progress,
body.hud-minimal #telem-strip,
body.hud-minimal #steer-wheel-hud{display:none}

/* ════════════════════════════════════════════════
   META PROGRESSION (Phase M1–M6) — pilot chip, daily card, streaks,
   quests, crates, garage, achievements, toasts, celebrations.
   Rarity palette: legendary reuses the house #ffa500 gold.
   ════════════════════════════════════════════════ */
:root{
  --rare:#4aa3ff;
  --epic:#b44aff;
  --legendary:#ffa500;
}

/* ── Pilot chip (menu, top-right) ── */
#pilot-chip{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:10px;
  padding:8px 14px;background:rgba(20,8,2,0.72);border:1px solid rgba(255,160,0,0.3);
  border-radius:6px;cursor:pointer;z-index:5;transition:border-color 0.2s,background 0.2s}
#pilot-chip:hover{border-color:rgba(255,160,0,0.7);background:rgba(40,16,4,0.85)}
.pilot-level-ring{width:34px;height:34px;border-radius:50%;border:2px solid #ffa500;
  display:flex;align-items:center;justify-content:center;font-family:'Orbitron',monospace;
  font-weight:900;font-size:14px;color:#ffd700;background:rgba(255,160,0,0.10)}
.pilot-chip-info{display:flex;flex-direction:column;gap:4px;min-width:84px}
.pilot-chip-name{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;
  color:rgba(255,220,160,0.85);text-align:left}
.pilot-xp-bar{width:100%;height:5px;background:rgba(255,160,0,0.15);border-radius:3px;overflow:hidden}
.pilot-xp-fill{height:100%;width:0;background:linear-gradient(90deg,#ff7038,#ffd700);
  border-radius:3px;transition:width 0.6s ease-out}
.pilot-chip-credits{font-family:'Share Tech Mono',monospace;font-size:12px;color:#ffd700;white-space:nowrap}

/* ── Daily challenge card (menu centerpiece) ── */
#daily-card{width:min(460px,90vw);margin:0 auto 14px;padding:12px 16px;text-align:left;
  background:linear-gradient(180deg,rgba(255,160,0,0.14) 0%,rgba(120,40,0,0.10) 100%);
  border:1px solid rgba(255,160,0,0.45);border-radius:8px;
  box-shadow:0 0 24px rgba(255,120,0,0.12)}
#daily-card.done{opacity:0.75;border-color:rgba(120,255,160,0.4)}
.daily-card-head{display:flex;justify-content:space-between;align-items:baseline}
.daily-card-title{font-family:'Orbitron',monospace;font-weight:700;font-size:13px;
  letter-spacing:2px;color:#ffd700}
#daily-countdown{font-family:'Share Tech Mono',monospace;font-size:11px;color:rgba(255,180,80,0.9)}
#daily-countdown.urgent{color:#ff5040;animation:metaPulse 1s infinite}
#daily-card-desc{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1px;
  margin:8px 0;color:rgba(255,230,190,0.92)}
.daily-card-foot{display:flex;align-items:center;gap:12px}
#daily-social{font-family:'Share Tech Mono',monospace;font-size:10px;opacity:0.65;flex:1;text-align:left}
#daily-play-btn{background:linear-gradient(180deg,rgba(255,160,0,0.35),rgba(255,100,0,0.22));
  border:1px solid rgba(255,180,40,0.8);color:#fff0c0;font-family:'Orbitron',monospace;
  font-weight:700;font-size:12px;letter-spacing:2px;padding:8px 18px;border-radius:5px;
  cursor:pointer;transition:transform 0.12s,box-shadow 0.2s}
#daily-play-btn:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(255,140,0,0.35)}
#daily-done{font-family:'Share Tech Mono',monospace;font-size:12px;color:#80ffa0;letter-spacing:2px}

/* ── Streak chip + quest chips row ── */
#meta-menu-row{display:flex;justify-content:center;align-items:center;gap:8px;
  flex-wrap:wrap;margin-bottom:16px}
#streak-chip{font-family:'Orbitron',monospace;font-weight:700;font-size:13px;color:#ffb060;
  padding:6px 12px;border:1px solid rgba(255,120,0,0.5);border-radius:14px;
  background:rgba(60,16,0,0.6)}
#streak-chip.at-risk{color:#ff5040;border-color:rgba(255,60,40,0.8);animation:metaPulse 1.1s infinite}
#streak-chip .streak-risk-label{font-family:'Share Tech Mono',monospace;font-size:9px;
  letter-spacing:1px;margin-left:6px}
#quest-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.quest-chip{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;
  color:rgba(255,220,170,0.9);padding:5px 10px;border:1px solid rgba(255,160,0,0.25);
  border-radius:12px;background:rgba(20,8,2,0.6);display:flex;align-items:center;gap:7px}
.quest-chip.done{color:#80ffa0;border-color:rgba(120,255,160,0.45)}
.quest-chip-bar{width:42px;height:4px;background:rgba(255,160,0,0.15);border-radius:2px;overflow:hidden}
.quest-chip-fill{height:100%;width:0;background:#ffa500;border-radius:2px;transition:width 0.5s}

/* ── Results meta panel ── */
#results-meta{width:min(420px,86vw);margin:0 auto 14px;display:flex;flex-direction:column;gap:7px}
#results-meta.hidden{display:none}
#results-medal{font-family:'Orbitron',monospace;font-weight:700;font-size:14px;letter-spacing:2px;
  min-height:18px;color:rgba(255,220,170,0.75)}
#results-medal.medal-gold{color:#ffd700}
#results-medal.medal-silver{color:#d8d8e0}
#results-medal.medal-bronze{color:#d0833a}
.meta-new{color:#80ffa0;font-size:10px;vertical-align:super;letter-spacing:1px}
#results-nearmiss{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1px;
  color:#ffb060;min-height:16px;opacity:0;transition:opacity 0.4s}
#results-nearmiss.show{opacity:1}
.meta-reward-row{display:flex;align-items:center;gap:10px}
.meta-reward-label{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;
  opacity:0.7;min-width:58px;text-align:left}
.meta-xp-bar{flex:1;height:8px;background:rgba(255,160,0,0.12);border:1px solid rgba(255,160,0,0.25);
  border-radius:4px;overflow:hidden}
.meta-xp-fill{height:100%;width:0;background:linear-gradient(90deg,#ff7038,#ffd700);
  transition:width 0.9s cubic-bezier(0.2,0.8,0.2,1)}
.meta-reward-val{font-family:'Orbitron',monospace;font-weight:700;font-size:14px;color:#ffd700;
  min-width:62px;text-align:right}
.meta-reward-val.credits{flex:0 0 auto}
#lucky-flash{font-family:'Orbitron',monospace;font-weight:900;font-size:13px;letter-spacing:1px;
  color:#80ffa0;opacity:0;transform:scale(0.6);transition:opacity 0.25s,transform 0.25s}
#lucky-flash.show{opacity:1;transform:scale(1);animation:metaPop 0.4s}
#lucky-flash.jackpot{color:#ffd700;text-shadow:0 0 14px rgba(255,200,0,0.8)}
#results-quests{display:flex;flex-direction:column;gap:4px;font-family:'Share Tech Mono',monospace;
  font-size:11px;letter-spacing:1px;color:rgba(255,220,170,0.85);text-align:left}
#results-quests .rq-done{color:#80ffa0}
#results-social{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;
  color:rgba(140,200,255,0.9);min-height:0;text-align:left;display:flex;flex-direction:column;gap:3px}
#results-teaser{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;
  color:rgba(255,170,80,0.6);margin-top:2px}

/* Primary action button — the RETRY loop gets the visual weight. */
.stage-btn.primary-action{background:linear-gradient(180deg,rgba(255,160,0,0.30) 0%,rgba(255,100,0,0.18) 100%);
  border-color:rgba(255,190,60,0.8);box-shadow:0 0 18px rgba(255,140,0,0.25)}
.stage-btn.primary-action kbd{font-size:10px;opacity:0.6;border:1px solid rgba(255,220,170,0.4);
  border-radius:3px;padding:1px 5px;margin-left:6px}

/* Results nudge cards (install / notification pre-prompt) */
.results-nudge{display:flex;align-items:center;gap:10px;width:min(420px,86vw);margin:0 auto 12px;
  padding:9px 12px;border:1px dashed rgba(255,160,0,0.4);border-radius:6px;
  background:rgba(30,12,2,0.6)}
.results-nudge.hidden{display:none}
.results-nudge > span{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;
  flex:1;text-align:left;color:rgba(255,220,170,0.85)}
.results-nudge button{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;
  padding:6px 10px;border-radius:4px;cursor:pointer;border:1px solid rgba(255,160,0,0.5);
  background:rgba(255,160,0,0.15);color:#ffe0a0}
.results-nudge .nudge-no{border-color:rgba(255,160,0,0.2);background:transparent;opacity:0.6}

/* ── Toast stack ── */
#meta-toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.meta-toast{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1.5px;
  color:#ffe0a0;background:rgba(30,10,2,0.92);border:1px solid rgba(255,160,0,0.5);
  border-radius:5px;padding:10px 20px;max-width:88vw;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.55);opacity:0;transform:translateY(-8px);
  transition:opacity 0.3s,transform 0.3s}
.meta-toast.show{opacity:1;transform:translateY(0)}
.meta-toast.tier-rare{border-color:var(--rare);box-shadow:0 0 18px rgba(74,163,255,0.3)}
.meta-toast.tier-epic{border-color:var(--epic);box-shadow:0 0 18px rgba(180,74,255,0.35)}
.meta-toast.tier-legendary{border-color:var(--legendary);box-shadow:0 0 24px rgba(255,165,0,0.5)}

/* ── Confetti ── */
.meta-confetti{position:fixed;width:7px;height:11px;z-index:70;pointer-events:none;
  animation:metaConfettiFall var(--cf-dur,1.2s) cubic-bezier(0.2,0.6,0.4,1) forwards}
@keyframes metaConfettiFall{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--cf-dx,0),calc(var(--cf-dy,0) + 240px)) rotate(var(--cf-rot,360deg));opacity:0}
}

/* ── Level-up celebration ── */
#levelup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(255,140,0,0.18),rgba(0,0,0,0) 60%);
  opacity:0;pointer-events:none;transition:opacity 0.35s}
#levelup-overlay.show{opacity:1}
.levelup-burst{font-size:42px;color:#ffd700;animation:metaPop 0.5s}
.levelup-title{font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(28px,5vw,52px);
  letter-spacing:8px;color:#fff0c0;text-shadow:0 0 32px rgba(255,160,0,0.8)}
.levelup-sub{font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:3px;
  color:#ffd700;margin-top:10px}

/* ── Welcome-back / comeback overlay ── */
#welcome-back-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:58;
  display:flex;align-items:center;justify-content:center;background:rgba(5,1,1,0.88)}
#welcome-back-overlay.hidden{display:none}
.wb-card{text-align:center;padding:32px 44px;border:1px solid rgba(255,160,0,0.5);
  border-radius:10px;background:linear-gradient(180deg,rgba(40,14,2,0.95),rgba(16,6,2,0.95));
  box-shadow:0 0 60px rgba(255,120,0,0.25)}
.wb-title{font-family:'Orbitron',monospace;font-weight:900;font-size:24px;letter-spacing:5px;
  color:#fff0c0;margin-bottom:8px}
.wb-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;opacity:0.7;
  margin-bottom:18px}
.wb-rewards{font-family:'Share Tech Mono',monospace;font-size:14px;color:#ffd700;
  letter-spacing:2px;margin-bottom:22px}

/* ── Crate ceremony ── */
#crate-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:58;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:rgba(3,1,1,0.92)}
#crate-overlay.hidden{display:none}
#crate-box{font-size:88px;filter:drop-shadow(0 0 24px rgba(255,160,0,0.5))}
#crate-box.shaking{animation:metaCrateShake 0.18s infinite}
#crate-card{text-align:center;padding:26px 40px;border-radius:10px;border:2px solid #888;
  background:rgba(18,8,2,0.96);animation:metaPop 0.45s}
#crate-card.hidden,#crate-actions.hidden{display:none}
#crate-card.tier-rare{border-color:var(--rare);box-shadow:0 0 40px rgba(74,163,255,0.4)}
#crate-card.tier-epic{border-color:var(--epic);box-shadow:0 0 48px rgba(180,74,255,0.45)}
#crate-card.tier-legendary{border-color:var(--legendary);box-shadow:0 0 64px rgba(255,165,0,0.6);
  animation:metaPop 0.45s,metaLegendaryPulse 1.6s 0.5s infinite}
#crate-card-rarity{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:4px;
  margin-bottom:12px;opacity:0.85}
#crate-card.tier-rare #crate-card-rarity{color:var(--rare)}
#crate-card.tier-epic #crate-card-rarity{color:var(--epic)}
#crate-card.tier-legendary #crate-card-rarity{color:var(--legendary)}
#crate-card-swatch{width:74px;height:74px;border-radius:50%;margin:0 auto 14px;
  border:2px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;font-size:34px}
#crate-card-name{font-family:'Orbitron',monospace;font-weight:700;font-size:18px;
  letter-spacing:3px;color:#fff0c0}
#crate-card-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;
  opacity:0.6;margin-top:8px}
#crate-actions{display:flex;gap:12px}
@keyframes metaCrateShake{
  0%{transform:translate(-2px,1px) rotate(-2deg)}
  50%{transform:translate(2px,-1px) rotate(2deg)}
  100%{transform:translate(-1px,0) rotate(0)}
}
@keyframes metaLegendaryPulse{
  0%,100%{box-shadow:0 0 64px rgba(255,165,0,0.6)}
  50%{box-shadow:0 0 96px rgba(255,200,0,0.85)}
}

/* ── Pilot screen ── */
#pilot-screen{background:rgba(5,1,1,0.92)}
.pilot-tabs{display:flex;gap:6px;margin-bottom:18px}
.pilot-tab{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;
  padding:8px 18px;background:rgba(255,160,0,0.06);border:1px solid rgba(255,160,0,0.25);
  color:rgba(255,220,170,0.7);cursor:pointer;border-radius:4px}
.pilot-tab.active{background:rgba(255,160,0,0.2);color:#fff0c0;border-color:rgba(255,160,0,0.7)}
.pilot-tab-body{width:min(560px,92vw);max-height:52vh;overflow-y:auto;margin-bottom:16px}
.pilot-tab-body.hidden{display:none}
.pilot-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;text-align:left;
  font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1px}
.pilot-stats-grid .ps-label{opacity:0.55}
.pilot-stats-grid .ps-val{color:#ffd700;text-align:right}
.pilot-medal-strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.pilot-medal-slot{font-family:'Share Tech Mono',monospace;font-size:11px;padding:6px 9px;
  border:1px solid rgba(255,160,0,0.25);border-radius:5px;color:rgba(255,220,170,0.8)}
.pilot-level-banner{font-family:'Orbitron',monospace;font-weight:900;font-size:20px;
  letter-spacing:3px;color:#fff0c0;margin-bottom:6px}
.pilot-xp-banner{font-family:'Share Tech Mono',monospace;font-size:11px;opacity:0.65;margin-bottom:14px}
.garage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.garage-item{border:1px solid rgba(255,160,0,0.25);border-radius:7px;padding:10px 6px;
  cursor:pointer;background:rgba(20,8,2,0.6);transition:transform 0.12s,border-color 0.2s}
.garage-item:hover{transform:translateY(-2px)}
.garage-item.locked{cursor:default;opacity:0.45}
.garage-item.equipped{border-color:#80ffa0;box-shadow:0 0 12px rgba(120,255,160,0.25)}
.garage-item.tier-rare{border-color:var(--rare)}
.garage-item.tier-epic{border-color:var(--epic)}
.garage-item.tier-legendary{border-color:var(--legendary)}
.garage-item.locked.tier-rare,.garage-item.locked.tier-epic,.garage-item.locked.tier-legendary{
  border-style:dashed}
.garage-swatch{width:40px;height:40px;border-radius:50%;margin:0 auto 8px;
  border:1px solid rgba(255,255,255,0.3)}
.garage-item.locked .garage-swatch{background:#222 !important;position:relative}
.garage-name{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1px;
  color:rgba(255,220,170,0.85)}
.garage-count{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;
  opacity:0.65;margin:6px 0 12px}
.garage-crates-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;
  font-family:'Share Tech Mono',monospace;font-size:12px;color:#ffd700}
.garage-open-btn{font-family:'Orbitron',monospace;font-weight:700;font-size:12px;letter-spacing:2px;
  padding:9px 20px;border-radius:5px;cursor:pointer;color:#fff0c0;
  background:linear-gradient(180deg,rgba(255,160,0,0.35),rgba(255,100,0,0.22));
  border:1px solid rgba(255,180,40,0.8)}
.garage-open-btn:disabled{opacity:0.35;cursor:default}
.ach-list{display:flex;flex-direction:column;gap:8px;text-align:left}
.ach-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid rgba(255,160,0,0.2);
  border-radius:6px;background:rgba(20,8,2,0.55)}
.ach-row.done{border-color:rgba(120,255,160,0.4)}
.ach-icon{font-size:20px;width:28px;text-align:center}
.ach-info{flex:1}
.ach-name{font-family:'Orbitron',monospace;font-size:12px;letter-spacing:1px;color:#fff0c0}
.ach-desc{font-family:'Share Tech Mono',monospace;font-size:10px;opacity:0.6;margin-top:2px}
.ach-bar{width:90px;height:5px;background:rgba(255,160,0,0.15);border-radius:3px;overflow:hidden}
.ach-fill{height:100%;width:0;background:#ffa500;transition:width 0.5s}
.ach-fill.complete{background:#80ffa0}

/* ── Rival HUD tag ── */
#rival-tag{position:absolute;top:46px;left:16px;font-family:'Share Tech Mono',monospace;
  font-size:11px;letter-spacing:1.5px;color:#ff9090;padding:4px 10px;
  border:1px solid rgba(255,100,100,0.4);border-radius:4px;background:rgba(30,4,4,0.6)}
#rival-tag.hidden{display:none}

/* ── Shared keyframes + goal-gradient pulse ── */
@keyframes metaPop{0%{transform:scale(0.5);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes metaPulse{0%,100%{opacity:1}50%{opacity:0.45}}
@keyframes metaNearComplete{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7)}}
.near-complete{animation:metaNearComplete 1.2s infinite}

/* Reduced motion: kill every meta animation in one block. */
body.a11y-reduced-motion .meta-confetti{display:none}
body.a11y-reduced-motion #streak-chip.at-risk,
body.a11y-reduced-motion #daily-countdown.urgent,
body.a11y-reduced-motion .near-complete,
body.a11y-reduced-motion #crate-box.shaking,
body.a11y-reduced-motion #crate-card,
body.a11y-reduced-motion #lucky-flash.show,
body.a11y-reduced-motion .levelup-burst{animation:none}
body.a11y-reduced-motion .meta-xp-fill,
body.a11y-reduced-motion .pilot-xp-fill,
body.a11y-reduced-motion .quest-chip-fill,
body.a11y-reduced-motion .ach-fill{transition:none}

/* Mobile: tuck the pilot chip + compress the daily card. */
@media (max-width: 700px){
  #pilot-chip{top:8px;right:8px;padding:5px 9px;gap:7px}
  .pilot-chip-info{min-width:60px}
  #daily-card{margin-bottom:10px;padding:9px 12px}
  #meta-menu-row{margin-bottom:10px}
}

/* ════════════════════════════════════════════════
   ONLINE MULTIPLAYER — lobby / race room / HUD / results (lobby.js, net.js)
   ════════════════════════════════════════════════ */
.online-panel{display:flex;flex-direction:column;gap:12px;width:min(440px,92vw);
  max-height:78vh;overflow-y:auto;padding:4px}
.online-field-row{display:flex;align-items:center;gap:10px}
.online-field-row label{font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:1.5px;opacity:0.6;min-width:86px;text-align:left}
.online-field-row input{flex:1;min-width:0;background:rgba(255,160,0,0.07);
  border:1px solid rgba(255,160,0,0.35);border-radius:4px;color:#ffd9a0;
  font-family:'Share Tech Mono',monospace;font-size:14px;letter-spacing:1px;
  padding:9px 12px;outline:none;text-transform:uppercase}
.online-field-row input:focus{border-color:rgba(255,180,40,0.8)}
.online-join-btn{padding:9px 18px;min-width:0}
.online-list-head{font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:2px;opacity:0.55;text-align:left;margin-top:2px}
#online-room-list{display:flex;flex-direction:column;gap:6px;min-height:48px;
  max-height:180px;overflow-y:auto}
.online-room-row{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:10px 14px;background:rgba(255,160,0,0.07);
  border:1px solid rgba(255,160,0,0.3);border-radius:4px;color:#ffd9a0;cursor:pointer;
  font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:1px;text-align:left}
.online-room-row:hover{background:rgba(255,160,0,0.16)}
.online-room-count{opacity:0.6}
.online-empty{font-family:'Share Tech Mono',monospace;font-size:12px;opacity:0.4;
  padding:12px 0;letter-spacing:1.5px}
.online-create-row{display:flex;gap:8px}
.online-create-row .stage-btn{flex:1;min-width:0}
.race-room-code-row{display:flex;align-items:center;gap:12px;
  font-family:'Share Tech Mono',monospace;letter-spacing:2px}
.race-room-code-row span:first-child{font-size:11px;opacity:0.55}
#race-room-code{font-size:20px;color:#ffb84d;user-select:text;-webkit-user-select:text}
.race-copy-btn{margin-left:auto;padding:7px 12px;font-size:11px;min-width:0}
#race-room-status{font-family:'Share Tech Mono',monospace;font-size:12px;
  letter-spacing:1.5px;opacity:0.7;min-height:16px;text-align:left}
#race-room-players{display:flex;flex-direction:column;gap:6px}
.race-room-player{display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:rgba(255,160,0,0.06);border:1px solid rgba(255,160,0,0.22);
  border-radius:4px;font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:1px}
.race-room-player.self{border-color:rgba(255,180,40,0.6)}
.race-player-swatch{width:14px;height:14px;border-radius:3px;flex:none;
  box-shadow:0 0 6px rgba(255,255,255,0.15)}
.race-player-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-player-badge{font-size:11px;opacity:0.6;letter-spacing:1.5px}
.race-player-badge.ready{color:#7dffa0;opacity:0.9}
.race-player-badge.winner{color:#ffd700;opacity:1}
#race-room-stage-row{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.race-stage-btn{padding:9px 0;background:rgba(255,160,0,0.07);
  border:1px solid rgba(255,160,0,0.3);border-radius:4px;color:#ffd9a0;cursor:pointer;
  font-family:'Share Tech Mono',monospace;font-size:13px}
.race-stage-btn.active{background:rgba(255,160,0,0.3);border-color:#ffb84d;color:#fff}
.race-stage-btn:disabled{cursor:default;opacity:0.5}
/* In-race quit confirm — small modal, shown via .active (like #pause-overlay) */
#net-quit-confirm{position:fixed;top:0;left:0;width:100%;height:100%;z-index:16;
  display:none;align-items:center;justify-content:center;background:rgba(8,2,0,0.72);
  pointer-events:none}
#net-quit-confirm.active{display:flex;pointer-events:auto}
.net-quit-card{display:flex;flex-direction:column;gap:10px;padding:26px 30px;
  background:rgba(26,8,2,0.96);border:1px solid rgba(255,160,0,0.4);border-radius:8px;
  width:min(360px,90vw)}
.net-quit-title{font-family:'Share Tech Mono',monospace;font-size:18px;letter-spacing:2px;color:#ffb84d}
.net-quit-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.5px;
  opacity:0.6;margin-bottom:6px}
/* HUD live rank chip — sits under the rival tag */
#net-rank{position:absolute;top:74px;left:16px;font-family:'Share Tech Mono',monospace;
  font-size:13px;letter-spacing:2px;color:#7dc4ff;padding:4px 10px;
  border:1px solid rgba(100,170,255,0.4);border-radius:4px;background:rgba(4,12,30,0.6)}
#net-rank.hidden{display:none}
/* Results — race standings table + net-only buttons */
#net-results{width:min(360px,88vw);margin:6px 0;padding:10px 14px;
  background:rgba(255,160,0,0.05);border:1px solid rgba(255,160,0,0.25);border-radius:6px}
#net-results h3{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;
  opacity:0.7;margin:0 0 6px}
#net-results .lb-row.net-self{color:#ffd9a0}
.net-waiting{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;
  opacity:0.5;margin-top:6px;animation:metaPop 0.4s ease}
/* net-race body flag: online results hide solo retry/next-stage, show net-only */
.net-only{display:none}
body.net-race .net-only{display:inline-block}
body.net-race #results-retry-btn{display:none}
body.net-race #results-next-stage-btn{display:none !important}
@media (max-width:700px){
  .online-panel{max-height:82vh;gap:9px}
  .online-create-row{flex-direction:column}
  .online-field-row label{min-width:70px;font-size:10px}
  #race-room-stage-row{grid-template-columns:repeat(4,1fr)}
}

/* ── Phase W1 — site links row on the menu (garage/pilot/scores live on the
   Next.js site, operating on the same localStorage profile) ── */
.menu-site-links{display:flex;gap:22px;justify-content:center;margin:14px 0 4px;
  animation:menuFadeDown 0.6s 0.3s ease-out both}
.menu-site-links a{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;
  color:rgba(255,160,0,0.75);text-decoration:none;padding:6px 10px;
  border:1px solid rgba(255,160,0,0.2);border-radius:4px;transition:all 0.15s ease}
.menu-site-links a:hover{color:#ffd070;border-color:rgba(255,160,0,0.5);
  box-shadow:0 0 10px rgba(255,160,0,0.25)}
.wb-open-hint{margin-top:10px;font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:1.5px;color:rgba(255,160,0,0.55)}
.wb-open-hint a{color:#ffd070}

/* ════════════════════════════════════════════════
   FLUID UI PASS (apple-design skill) — press feedback, overlay
   materialize, materials. UI chrome only; gameplay untouched.
   ════════════════════════════════════════════════ */

/* ── §1 instant press feedback on every chrome button family ──
   touch-action:manipulation (NOT none) keeps scrollable overlays pannable;
   our press states replace the native gray tap flash. */
.stage-btn,.cup-btn,.hs-tab,.settings-cam-btn,.preset-btn,.editor-tool,
#editor-actions button,.editor-stage-tab,.pilot-tab,.race-stage-btn,
.results-nudge button,.menu-site-links a,#tuning-panel button,
#mixer-overlay .key-chip,#mixer-overlay .keys-reset-all{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-user-select:none;user-select:none}
/* Families that had no transition ease back out instead of snapping. */
.hs-tab,.settings-cam-btn,.editor-tool,#editor-actions button,
.editor-stage-tab,.pilot-tab,.race-stage-btn,.results-nudge button{
  transition:transform 0.18s ease-out,background 0.18s ease,
    border-color 0.18s ease,color 0.18s ease}
/* Press-in near-instant; release uses the base transition above. */
.cup-btn:not(.disabled):active,.hs-tab:active,.settings-cam-btn:active,
.preset-btn:active,.editor-tool:active,#editor-actions button:not(:disabled):active,
.editor-stage-tab:active,.pilot-tab:active,.race-stage-btn:not(:disabled):active,
.results-nudge button:active,.menu-site-links a:active{
  transform:scale(0.97);transition-duration:0.05s}
.stage-btn:active{transform:translateY(0) scale(0.985)}

/* ── §12 overlay materialize — settles into place instead of a flat fade.
   Overlays keep display:flex + the .hidden class contract (e2e asserts the
   class); CSS transitions retarget mid-flight, so rapid show/hide is
   interruptible for free. All fixed-position chrome is sibling-level, so
   the transient transform creates no containing-block surprises. ── */
.overlay{transition:opacity 0.3s cubic-bezier(0.33,1,0.68,1),
  transform 0.34s cubic-bezier(0.22,1,0.36,1)}
.overlay.hidden{transform:scale(1.02)}

/* Pause: a real material now — static blur (never transition a backdrop
   filter), entry keyframe on .active since its display flips. Exit stays
   instant: dismissal must never lag input. */
#pause-overlay{backdrop-filter:blur(10px) saturate(0.85);
  -webkit-backdrop-filter:blur(10px) saturate(0.85);background:rgba(6,3,0,0.5)}
#pause-overlay.active{animation:overlayMaterialize 0.3s cubic-bezier(0.22,1,0.36,1) both}
@keyframes overlayMaterialize{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
body.a11y-reduced-motion #pause-overlay.active{animation:none}

#net-quit-confirm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#net-quit-confirm.active .net-quit-card{animation:overlayMaterialize 0.25s cubic-bezier(0.22,1,0.36,1) both}
body.a11y-reduced-motion #net-quit-confirm.active .net-quit-card{animation:none}

#results-screen{background:rgba(5,1,1,0.72);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)}
#photo-hint,#replay-banner{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* No blur on #tuning-panel / #mixer-overlay — they open over live driving. */

/* Toasts arrive with momentum → tiny overshoot; exits stay ≤350ms
   (juice.js removes the node 350ms after .show drops). */
.meta-toast{background:rgba(30,10,2,0.78);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-10px) scale(0.97);
  transition:opacity 0.18s ease-out,transform 0.32s cubic-bezier(0.34,1.25,0.64,1)}
.meta-toast.show{opacity:1;transform:translateY(0) scale(1)}
.meta-toast:not(.show){transition-duration:0.2s,0.2s}

/* Countdown tick pop — class re-triggered per number by _setCountdownText. */
#countdown-screen.cd-tick{animation:cdPop 0.45s cubic-bezier(0.22,1,0.36,1)}
@keyframes cdPop{from{transform:scale(1.1)}to{transform:none}}
body.a11y-reduced-motion #countdown-screen.cd-tick{animation:none}

/* Pause leaderboard + split delta + level-up: settle curves. */
#pause-hs-panel.active{animation:pauseHsFadeInFluid 0.28s cubic-bezier(0.22,1,0.36,1) both}
@keyframes pauseHsFadeInFluid{from{opacity:0;transform:translateY(-6px) scale(0.98)}
  to{opacity:1;transform:none}}
body.a11y-reduced-motion #pause-hs-panel.active{animation:none}

#split-delta{transform:translateX(-50%) translateY(-6px) scale(0.94);
  transition:opacity 0.25s ease-out,transform 0.35s cubic-bezier(0.34,1.2,0.64,1)}
#split-delta.show{transform:translateX(-50%) translateY(0) scale(1)}

#levelup-overlay.show .levelup-title{animation:metaPop 0.45s cubic-bezier(0.22,1,0.36,1)}
body.a11y-reduced-motion #levelup-overlay.show .levelup-title{animation:none}

/* ── §14 fallbacks: no-blur engines, reduced transparency, high contrast,
   and an OS-level reduced-motion mirror for the NEW rules (belt-and-braces
   for the pre-JS window; the body class handles everything post-boot). ── */
@supports not (backdrop-filter:blur(1px)){
  #pause-overlay{background:rgba(6,3,0,0.78)}
  #results-screen{background:rgba(5,1,1,0.85)}
  .meta-toast{background:rgba(30,10,2,0.92)}
}
@media (prefers-reduced-transparency:reduce){
  #pause-overlay,#results-screen,.meta-toast,#net-quit-confirm,
  #photo-hint,#replay-banner{backdrop-filter:none;-webkit-backdrop-filter:none}
  #pause-overlay{background:rgba(6,3,0,0.92)}
  #results-screen{background:rgba(5,1,1,0.94)}
  .meta-toast{background:rgba(30,10,2,0.95)}
}
body.a11y-high-contrast #pause-overlay,
body.a11y-high-contrast #results-screen{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,2,0,0.94)}
@media (prefers-reduced-motion:reduce){
  .overlay{transition:opacity 0.4s;transform:none !important}
  #pause-overlay.active,#countdown-screen.cd-tick,#pause-hs-panel.active,
  #net-quit-confirm.active .net-quit-card,
  #levelup-overlay.show .levelup-title{animation:none}
  .meta-toast{transition:opacity 0.3s;transform:none}
}