:root {
  --nav-h: 56px;
  --ink: #f3f5f9;
  --muted: #a7b1c2;
  --bg: #0c1118;
  --panel: rgba(12, 17, 25, .74);
  --panel-solid: #121a26;
  --line: rgba(255, 255, 255, .13);
  --accent: #ff7a2f;
  --accent-2: #ffb347;
  --cool: #4fb3ff;
  --good: #46d985;
  --warn: #ffc23d;
  --bad: #ff5a5f;
  --display: "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); }
body.is-playing { overscroll-behavior: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.28); border-bottom-width: 3px; background: rgba(255,255,255,.07); font: 700 12px/1.5 var(--text); text-align: center; }

.game { position: relative; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); min-height: 320px; overflow: hidden; background: #0c1118; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.is-playing .game { touch-action: none; }
.stage { position: absolute; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.hud-tl { position: absolute; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); display: flex; gap: 6px; align-items: flex-start; max-width: min(460px, 52vw); }
.hud-tr { position: absolute; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; gap: 8px; align-items: flex-start; }
.hud-btns { display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.chip { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 7px 11px; font-size: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.mode-chip { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 180px; }
.mode-chip span { font-size: 11px; color: var(--accent-2); letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.mode-chip strong { font-size: 13.5px; font-weight: 600; }
.progress { height: 4px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 5px; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s; }
.time-chip { font-variant-numeric: tabular-nums; font-weight: 800; }
.icon-btn { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .15s, transform .1s; }
.icon-btn:hover { background: rgba(32, 42, 58, .9); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.btn-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.minimap { width: 150px; height: 150px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); background: rgba(10,14,20,.6); box-shadow: 0 8px 22px rgba(0,0,0,.35); }

/* Instrument readout (bottom center) */
.dash { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.readout { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px 14px 9px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 196px; }
.gear { grid-row: 1 / 3; font-family: var(--display); font-size: 44px; line-height: 1; width: 44px; text-align: center; transition: transform .12s, color .2s; }
.gear.pop { transform: scale(1.18); }
.gear.n { color: var(--good); } .gear.r { color: var(--accent-2); }
.spd { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.spd b { font-size: 28px; font-weight: 800; min-width: 2.2ch; text-align: right; }
.spd span { font-size: 12px; color: var(--muted); font-weight: 700; }
.rpm { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; width: 118px; }
.rpm i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #5bd0ff, #6be38f 55%, #ffc23d 80%, #ff4b52); }
.rpm s { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff4b52; }
.status { grid-column: 1 / 3; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-align: center; margin-top: 5px; min-height: 1.2em; }
.status.bad { color: var(--bad); } .status.warn { color: var(--warn); } .status.good { color: var(--good); }
.bars { display: flex; gap: 4px; padding: 8px 8px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bar { position: relative; width: 12px; height: 68px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: visible; }
.bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 6px; }
.bar span { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; color: var(--muted); }
.bar.clutch i { background: linear-gradient(0deg, #4fb3ff, #b4e1ff); }
.bar.brake i { background: #ff6b5e; } .bar.gas i { background: #46d985; }
.bar .bite { position: absolute; left: -3px; right: -3px; height: 3px; background: var(--accent-2); border-radius: 2px; box-shadow: 0 0 6px var(--accent-2); }
.bars { padding-bottom: 18px; }

/* H-gate shifter */
.gate { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); width: 150px; height: 112px; pointer-events: auto; touch-action: none; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: grab; }
.gate svg { width: 100%; height: 100%; display: block; }
.gate-slot { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 7; stroke-linecap: round; }
.gate text { fill: #e9eef6; font: 800 12px var(--text); text-anchor: middle; dominant-baseline: middle; }
.gate-knob circle { fill: #2a2f37; stroke: #e9eef6; stroke-width: 2.5; }
.gate-knob .dot { fill: var(--accent); stroke: none; }
.gate-knob { transition: transform .12s ease-out; }
.gate.dragging .gate-knob { transition: none; }

.hint { position: absolute; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); margin: 0; max-width: min(560px, 80vw); padding: 9px 16px; border-radius: 12px; background: rgba(12,17,25,.82); border: 1px solid rgba(255,179,71,.45); font-size: 15px; line-height: 1.35; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hint kbd { margin: 0 1px; }
.toast { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.9); padding: 9px 18px; border-radius: 999px; font-family: var(--display); font-size: 20px; letter-spacing: .02em; background: rgba(12,17,25,.78); opacity: 0; transition: opacity .2s, transform .2s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast.good { color: #8ff0b6; border: 1px solid rgba(70,217,133,.5); } .toast.bad { color: #ffb0b2; border: 1px solid rgba(255,90,95,.5); } .toast.warn { color: #ffe08a; border: 1px solid rgba(255,194,61,.5); }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 50%, rgba(255,60,60,.35)); transition: opacity .3s; }
.flash.on { opacity: 1; transition: none; }
.look-hint { position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); font-size: 12px; color: var(--muted); }

/* ---------- touch controls ---------- */
.touch { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.touch button, .touch .t-steer { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.t-left { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); display: flex; align-items: flex-end; gap: 10px; }
.t-right { position: absolute; right: calc(10px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); display: flex; align-items: flex-end; gap: 10px; }
.t-top { position: absolute; bottom: calc(150px + var(--safe-b)); right: calc(10px + var(--safe-r)); display: flex; flex-direction: column; gap: 8px; }
.t-steer { width: 170px; height: 112px; border-radius: 18px; background: rgba(12,17,25,.38); border: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,.9); }
.t-steer svg { width: 74px; height: 74px; transform: rotate(calc(var(--steer, 0) * 120deg)); transition: transform .05s; }
.t-steer span, .t-pedal span { font: 800 10px var(--text); letter-spacing: .1em; opacity: .75; }
.t-steer.active { background: rgba(12,17,25,.55); border-color: rgba(255,179,71,.6); }
.t-clutch-wrap { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.t-pedal { position: relative; width: 74px; height: 128px; border-radius: 16px; border: 1px solid rgba(255,255,255,.22); background: rgba(12,17,25,.42); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; overflow: hidden; }
.t-pedal i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; opacity: .55; }
.t-pedal.clutch i { background: #4fb3ff; } .t-pedal.gas i { background: #46d985; } .t-pedal.brake i { background: #ff6b5e; }
.t-pedal.brake { height: 104px; }
.t-pedal.active { border-color: rgba(255,255,255,.6); background: rgba(12,17,25,.6); }
.t-latch { width: 74px; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(12,17,25,.5); font: 800 10px/1.2 var(--text); letter-spacing: .06em; }
.t-latch[aria-pressed="true"] { background: rgba(79,179,255,.35); border-color: #4fb3ff; }
.t-btn { min-width: 60px; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(12,17,25,.55); font: 800 12px var(--text); letter-spacing: .06em; }
.t-btn[aria-pressed="true"] { background: rgba(255,90,95,.35); border-color: var(--bad); }
body.touch-ui .gate { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); top: auto; }
body.touch-ui .dash { bottom: auto; top: calc(10px + var(--safe-t)); }
body.touch-ui .bars { display: none; }
body.touch-ui .hud-tl { max-width: 34vw; }
body.touch-ui .look-hint { display: none; }
body.touch-ui .hint { top: calc(126px + var(--safe-t)); }

/* Quick-start guide keeps both control choices and the start action in view. */
.tutorial-card { width: min(570px, 100%); }
.tutorial-card h2 { font-size: 28px; line-height: 1.15; }
.tutorial-card p { font-size: 14px; line-height: 1.45; margin: 10px 0; }
.tutorial-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tutorial-modes button { min-height: 84px; padding: 10px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #1a2534; }
.tutorial-modes button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tutorial-modes strong, .tutorial-modes span { display: block; }
.tutorial-modes strong { margin-bottom: 4px; font-size: 14px; }
.tutorial-modes span { font-size: 12px; line-height: 1.6; color: var(--muted); }
.tutorial-card .cta { width: 100%; min-height: 48px; margin-top: 4px; padding: 10px; }
.tutorial-card .tutorial-touch, .tutorial-on-touch { display: none; }
.gate.mouse-selecting { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,122,47,.3); }
body.mouse-drive .gate .gate-knob { transition: none; }
#mouse-capture { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); pointer-events:auto; max-width:calc(100% - 32px); padding:12px 18px; background:var(--panel-solid); text-align:center; }
body.mouse-drive .gate { width: 200px; height: 150px; cursor: crosshair; }
@media (pointer:coarse) { .tutorial-card .tutorial-touch { display: block; } .tutorial-on-touch { display: inline; } .tutorial-keyboard, .tutorial-card .tutorial-detail { display: none; } }
@media (max-width:640px) { .tutorial-card { padding: 14px; } .tutorial-card h2 { font-size: 24px; } .tutorial-card p { font-size: 13px; margin: 8px 0; } }

/* ---------- overlays ---------- */
.overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); overflow-y: auto; }
.menu { background: linear-gradient(90deg, rgba(8,11,17,.86) 0%, rgba(8,11,17,.55) 46%, rgba(8,11,17,.15) 70%, rgba(8,11,17,.55) 100%); justify-content: space-between; align-items: center; gap: 24px; }
.menu-card { max-width: 470px; display: flex; flex-direction: column; gap: 14px; }
.kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.menu h1 { margin: 0; font-family: var(--display); font-size: clamp(36px, 4vw, 48px); line-height: .95; letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.menu h1 span { color: var(--accent); }
.tagline { margin: 0; font-size: 15.5px; line-height: 1.5; color: #d6dce7; max-width: 44ch; }
.cta { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 22px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #ff9d3c); color: #1b0d03; font-family: var(--display); font-size: 22px; box-shadow: 0 10px 30px rgba(255,122,47,.35); transition: transform .12s, box-shadow .12s; min-height: 48px; }
.cta small { font-family: var(--text); font-size: 12.5px; font-weight: 700; opacity: .8; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(255,122,47,.45); }
.cta:active { transform: translateY(1px); }
.seg { display: inline-flex; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; align-self: flex-start; }
.seg button { border: 0; background: transparent; padding: 9px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); min-height: 40px; }
.seg button[aria-checked="true"] { background: rgba(255,255,255,.14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,179,71,.6); }
.diff-note { margin: -4px 0 0; font-size: 13px; color: var(--muted); max-width: 44ch; min-height: 2.6em; }
.menu-utils { display: flex; gap: 8px; flex-wrap: wrap; }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); font-weight: 700; text-decoration: none; color: var(--ink); }
.ghost:hover { background: rgba(255,255,255,.12); }
.menu-challenges { width: min(390px, 40vw); align-self: center; }
.menu-challenges h2 { margin: 0 0 10px; font-family: var(--display); font-size: 18px; letter-spacing: .02em; }
.challenge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ch { width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(12,17,25,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .15s, transform .12s; }
.ch:hover { border-color: rgba(255,179,71,.55); transform: translateX(-2px); }
.ch .n { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--display); background: rgba(255,122,47,.16); color: var(--accent-2); }
.ch strong { font-size: 15px; }
.ch .meta { grid-column: 2; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ch .best { grid-row: 1 / 3; grid-column: 3; text-align: right; font-size: 12px; color: var(--muted); }
.ch .best b { display: block; color: var(--warn); font-size: 13px; letter-spacing: .1em; }

.sheet { background: rgba(6,9,14,.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet-card { width: min(520px, 100%); max-height: 100%; overflow-y: auto; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sheet-card.wide { width: min(860px, 100%); }
.sheet-card.narrow { width: min(360px, 100%); text-align: center; }
.sheet-card h2 { margin: 0; font-family: var(--display); font-size: 22px; }
.sheet-card h3 { margin: 16px 0 8px; font-size: 15px; color: var(--accent-2); text-transform: uppercase; letter-spacing: .08em; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.back { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); font-size: 20px; }
.settings { display: flex; flex-direction: column; gap: 4px; }
.set { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 15px; }
.set select { min-height: 38px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: #1a2331; }
.set input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }
.set input[type=range] { width: 160px; accent-color: var(--accent); }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.keys { border-collapse: collapse; font-size: 14px; width: 100%; }
.keys td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
.keys td:first-child { white-space: nowrap; width: 1%; padding-right: 14px; }
.note, .howto, .controls-grid p { font-size: 14px; color: #cfd6e2; line-height: 1.5; }
.howto ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: #cfd6e2; }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.stack .cta { align-items: center; font-size: 18px; }
.session { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 12px 0 0; text-align: left; font-size: 13px; }
.session div { background: rgba(255,255,255,.05); border-radius: 10px; padding: 7px 10px; }
.session dt { color: var(--muted); font-size: 11.5px; } .session dd { margin: 2px 0 0; font-weight: 800; font-size: 16px; }

.results { background: rgba(6,9,14,.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.res-card { width: min(460px, 100%); max-height: 100%; overflow-y: auto; text-align: center; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.res-card h2 { margin: 4px 0; font-family: var(--display); font-size: 30px; }
.res-card h2.fail { color: var(--bad); }
.stars { font-size: 34px; letter-spacing: 6px; color: rgba(255,255,255,.15); }
.stars span.on { color: var(--warn); text-shadow: 0 0 18px rgba(255,194,61,.5); }
.res-score { display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.res-score strong { font-family: var(--display); font-size: 44px; }
.res-score span { color: var(--muted); font-weight: 700; }
.record { margin: 0; color: var(--good); font-weight: 800; }
.res-parts { list-style: none; margin: 12px 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.res-parts li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.res-parts li b { font-variant-numeric: tabular-nums; }
.res-parts li small { grid-column: 1 / 3; color: var(--muted); font-size: 12px; }
.res-parts li .meter { grid-column: 1 / 3; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.res-parts li .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.res-tip { font-size: 14px; color: #d6dce7; line-height: 1.45; }
.res-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.res-actions .cta { align-items: center; font-size: 18px; padding: 10px 22px; }

.rotate { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: rgba(8,11,17,.92); }
.rotate svg { width: 72px; height: 72px; color: var(--accent-2); animation: tilt 2.2s ease-in-out infinite; }
.rotate p { max-width: 30ch; line-height: 1.5; margin: 0; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.loading { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px; background: #0c1118; font-weight: 700; color: var(--muted); }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fallback { position: absolute; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: #0c1118; }

.about { max-width: 820px; margin: 0 auto; padding: 40px 20px 64px; line-height: 1.6; color: #d4dbe7; }
.about h2 { font-family: var(--display); color: var(--ink); font-size: 26px; line-height: 1.2; }
.about h3 { color: var(--ink); margin-top: 26px; }
.about a { color: var(--accent-2); }
.faq dt { font-weight: 800; color: var(--ink); margin-top: 14px; }
.faq dd { margin: 4px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .menu { flex-direction: column; justify-content: flex-start; align-items: stretch; background: linear-gradient(180deg, rgba(8,11,17,.8), rgba(8,11,17,.7)); }
  .menu-card, .menu-challenges { width: 100%; max-width: 560px; margin: 0 auto; }
  .controls-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .minimap { width: 104px; height: 104px; }
  .mode-chip { min-width: 0; }
  .mode-chip strong { font-size: 12px; }
  .readout { min-width: 0; padding: 6px 10px; }
  .gear { font-size: 34px; width: 34px; }
  .spd b { font-size: 22px; }
  .rpm { width: 86px; }
  .gate { width: 120px; height: 90px; }
  .bars { display: none; }
  .hint { font-size: 13.5px; top: auto; bottom: calc(132px + var(--safe-b)); }
  .menu h1 { font-size: 32px; }
  .tagline { font-size: 14.5px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .menu { flex-direction: row; align-items: flex-start; padding-top: 10px; }
  .menu-card { gap: 8px; max-width: 46%; }
  .menu h1 { font-size: 34px; }
  .tagline { font-size: 13px; line-height: 1.4; }
  .cta { padding: 10px 16px; font-size: 18px; }
  .menu-challenges { width: 48%; }
  .ch { padding: 6px 10px; }
  .ch .meta { display: none; }
  .minimap { width: 92px; height: 92px; }
  .hint { top: calc(58px + var(--safe-t)); font-size: 13px; padding: 6px 12px; }
  .t-pedal { height: 106px; width: 66px; }
  .t-pedal.brake { height: 86px; }
  .t-steer { width: 150px; height: 96px; }
  .t-top { top: auto; bottom: calc(126px + var(--safe-b)); right: calc(10px + var(--safe-r)); flex-direction: row; }
  body.touch-ui .hint { top: calc(112px + var(--safe-t)); }
  body.touch-ui .gate { width: 132px; height: 96px; bottom: calc(8px + var(--safe-b)); }
  body.touch-ui .dash { top: calc(8px + var(--safe-t)); }
  body.touch-ui .readout { padding: 4px 10px; }
  body.touch-ui .gear { font-size: 30px; }
  body.touch-ui .hud-tl { max-width: 30vw; }
  body.touch-ui .mode-chip strong { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .gate-knob, .cta, .ch { transition: none; }
  .rotate svg { animation: none; }
}

/* Keep every driving mode and setup control in the first phone viewport. */
@media (max-width:640px) and (orientation:portrait) {
 .menu { gap:10px; padding:10px; }
 .menu-card { gap:6px; }
 .kicker { font-size:11px; letter-spacing:.06em; }
 .menu .cta { padding:10px 16px; font-size:20px; }
 .menu .tagline { font-size:14px; line-height:1.4; }
 .seg button { min-height:44px; }
 .diff-note { margin:0; min-height:0; font-size:12px; line-height:1.35; }
 .menu-challenges h2 { margin-bottom:6px; }
 .challenge-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 .ch { display:flex; align-items:center; justify-content:center; min-height:48px; padding:8px; }
 .ch .n,.ch .meta,.ch .best { display:none; }
 .ch strong { font-size:14px; line-height:1.25; }
}

/* Save status belongs with the account information, clear of driving inputs. */
body[data-rex-app="manual-driving-simulator"] .rex-progress-pill { position:static!important; display:inline-flex; margin:12px; }

/* Mobile driving uses the visible tab area, including with browser bars open. */
.mobile-only, .mobile-setting, .touch-shifter { display:none; }
.session-details > summary { display:none; }
.touch-buttons #gate { display:none; }
.touch-buttons .touch-shifter { display:grid; }
.touch-shifter { position:absolute; left:50%; bottom:calc(10px + var(--safe-b)); transform:translateX(-50%); width:120px; grid-template-columns:1fr 1fr; gap:4px; }
.t-shift { min-width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:rgba(12,17,25,.8); font:800 20px var(--text); }
.t-shift:active { background:rgba(255,122,47,.45); }
body.mobile-ui { --nav-h:0px; }
.mobile-ui random-express-nav { display:none; }
.mobile-ui .mobile-only { display:inline-flex; }
.mobile-ui .mobile-setting { display:flex; }
.mobile-ui .desktop-setting { display:none; }
.mobile-ui .game { min-height:0; height:var(--visible-h,100dvh); }
html.mobile-locked, body.mobile-session { overflow:hidden; overscroll-behavior:none; }
body.mobile-session .game { position:fixed; left:var(--visible-left,0px); top:var(--visible-top,0px); width:var(--visible-w,100vw); height:var(--visible-h,100dvh); }
body.mobile-session > :not(.game) { display:none!important; }
.game:fullscreen { width:100vw; height:100dvh; min-height:0; }
body.mobile-ui .dash { left:calc(8px + var(--safe-l)); top:calc(8px + var(--safe-t)); bottom:auto; transform:none; }
body.mobile-ui .readout { width:116px; min-width:0; height:44px; grid-template-columns:28px 1fr; grid-template-rows:22px 2px 10px; gap:0 6px; padding:3px 6px; border-radius:12px; }
body.mobile-ui .gear { width:28px; font-size:28px; }
.mobile-ui .spd { gap:3px; }
.mobile-ui .spd b { font-size:20px; }
.mobile-ui .spd span { font-size:10px; }
.mobile-ui .rpm { width:66px; height:2px; }
.mobile-ui .status { margin-top:0; font-size:10px; letter-spacing:.025em; line-height:10px; }
.mobile-ui .bars { display:none; }
.mobile-ui .hud-tr { top:calc(8px + var(--safe-t)); right:calc(8px + var(--safe-r)); }
.mobile-ui .hud-btns { flex-direction:row; gap:4px; }
.mobile-ui .hud-btns [data-act=camera] { display:none; }
.mobile-ui .icon-btn { width:44px; padding:0; }
.mobile-ui .minimap { display:none; position:absolute; right:100px; top:50px; width:68px; height:68px; }
.mobile-ui.show-mobile-map .minimap { display:block; }
body.mobile-ui .hud-tl { top:calc(58px + var(--safe-t)); left:calc(8px + var(--safe-l)); max-width:38vw; gap:4px; }
.mobile-ui .mode-chip { min-width:0; padding:4px 6px; }
.mobile-ui .mode-chip span { font-size:10px; letter-spacing:.02em; }
.mobile-ui .mode-chip strong { display:none; }
.mobile-ui .time-chip { padding:4px; font-size:11px; }
.mobile-ui #game[data-drive-kind=free] .hud-tl { display:none; }
body.mobile-ui .hint { top:calc(58px + var(--safe-t)); bottom:auto; max-width:min(360px,60vw); padding:5px 8px; font-size:12px; }
.mobile-ui #game[data-mobile-moving=true] .hint { display:none; }
.mobile-ui #game[data-drive-kind=challenge] .hint { top:calc(88px + var(--safe-t)); }
.mobile-ui .toast { max-width:85%; white-space:normal; text-align:center; font-size:14px; padding:6px 10px; }
.mobile-ui .t-top { top:calc(8px + var(--safe-t)); right:calc(108px + var(--safe-r)); bottom:auto; flex-direction:row; gap:4px; }
.mobile-ui .t-btn { width:44px; min-width:44px; height:44px; padding:0; font-size:10px; }
.mobile-ui .t-left { left:calc(8px + var(--safe-l)); bottom:calc(8px + var(--safe-b)); gap:8px; }
.mobile-ui .t-right { right:calc(8px + var(--safe-r)); bottom:calc(8px + var(--safe-b)); gap:8px; }
.mobile-ui .t-steer { width:96px; height:92px; border-radius:16px; background:rgba(12,17,25,.62); }
.mobile-ui .t-steer svg { width:48px; height:48px; }
.mobile-ui .t-steer span { font-size:10px; }
.mobile-ui .t-pedal, .mobile-ui .t-pedal.brake { width:64px; height:92px; padding-bottom:8px; background:rgba(12,17,25,.72); }
.mobile-ui .t-clutch-wrap { gap:4px; }
.mobile-ui .t-pedal.clutch { width:56px; height:44px; }
.mobile-ui .t-latch { width:56px; height:44px; min-height:44px; font-size:10px; }
.mobile-ui .touch-shifter { bottom:calc(8px + var(--safe-b)); }
.mobile-ui.touch-ui .gate { width:168px; height:100px; bottom:calc(8px + var(--safe-b)); }
.mobile-ui .tutorial-modes, .mobile-ui .tutorial-keyboard, .mobile-ui .tutorial-shifts, .mobile-ui .tutorial-detail { display:none; }
.mobile-ui .tutorial-card .tutorial-touch { display:block; }
.mobile-ui .tutorial-card h2 { font-size:24px; }
.mobile-ui .tutorial-card p { font-size:13px; line-height:1.4; margin:8px 0; }
.mobile-ui #pause .sheet-card { display:flex; flex-direction:column; text-align:left; }
.mobile-ui #pause h2 { order:0; }
.mobile-ui #pause .stack { order:1; display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.mobile-ui #pause [data-act=resume] { grid-column:1 / -1; }
.mobile-ui #pause .ghost, .mobile-ui #pause .cta { min-height:44px; padding:8px; font-size:14px; }
.mobile-ui .mobile-actions { order:2; display:flex; gap:6px; margin-top:8px; }
.mobile-ui .mobile-actions button { flex:1; }
.mobile-ui #mobile-map[aria-pressed=true] { border-color:var(--accent); }
.mobile-ui .session-details { order:3; margin-top:8px; }
.mobile-ui .session-details > summary { display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--muted); font-size:13px; }
.mobile-ui .set select { min-height:44px; max-width:60%; }
@media (max-width:599px) and (orientation:portrait) {
 .mobile-ui .touch-shifter, .mobile-ui.touch-ui .gate { bottom:calc(112px + var(--safe-b)); }
 body.mobile-ui .hint { max-width:90vw; }
}
@media (orientation:landscape) and (max-height:520px) {
 .mobile-ui .menu { flex-direction:row; align-items:center; padding:8px; gap:12px; }
 .mobile-ui .menu-card { width:46%; max-width:46%; margin:0; gap:6px; }
 .mobile-ui .menu-challenges { width:48%; max-width:48%; margin:0; }
 .mobile-ui .menu h1 { font-size:30px; }
 .mobile-ui .tagline { font-size:13px; line-height:1.3; }
 .mobile-ui .diff-note { min-height:0; font-size:12px; }
 .mobile-ui .seg { padding:0; gap:0; }
 .mobile-ui .seg button { min-height:44px; padding:4px 12px; }
 .mobile-ui .menu .cta { min-height:44px; padding:5px 12px; font-size:17px; }
 .mobile-ui .menu-utils { gap:4px; }
 .mobile-ui .menu-utils .ghost { min-height:44px; padding:0 10px; font-size:13px; }
 .mobile-ui .menu-challenges h2 { font-size:16px; margin-bottom:6px; }
 .mobile-ui .challenge-list { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
 .mobile-ui .ch { display:flex; justify-content:center; align-items:center; min-height:44px; padding:5px; }
 .mobile-ui .ch strong { font-size:13px; line-height:1.2; }
 .mobile-ui .ch .n, .mobile-ui .ch .meta, .mobile-ui .ch .best { display:none; }
 .mobile-ui .overlay:not(.menu) { padding:8px; }
 .mobile-ui .tutorial-card { padding:12px; }
}
@media (orientation:landscape) and (max-height:330px) {
 .mobile-ui .menu-card { gap:4px; }
 .mobile-ui .menu h1 { font-size:27px; }
 .mobile-ui .menu .kicker, .mobile-ui .menu .tagline, .mobile-ui .menu .diff-note { display:none; }
 .mobile-ui .menu .cta small { font-size:11px; }
 .mobile-ui .tutorial-card h2 { font-size:22px; }
 .mobile-ui .tutorial-card p { font-size:12px; margin:5px 0; }
 .mobile-ui .tutorial-card .cta { min-height:44px; padding:6px; }
}

.mobile-ui .seg button { min-height:44px; }
.mobile-ui .controls-grid > div:first-child { order:2; }
/* Enlarged/narrow layouts may scroll; keep controls full size and separated. */
html.mobile-locked:has(.mobile-enlarged), body.mobile-session.mobile-enlarged { overflow:auto; }
body.mobile-enlarged .game { position:relative; left:0; top:0; width:100%; height:max(720px,var(--visible-h)); }
.mobile-enlarged .menu { flex-direction:column; align-items:stretch; justify-content:flex-start; }
.mobile-enlarged .menu-card, .mobile-enlarged .menu-challenges { width:100%; max-width:none; }
.mobile-enlarged .menu h1 { font-size:27px; }
.mobile-enlarged .menu-utils { gap:4px; }
.mobile-enlarged .menu-utils .ghost { padding:0 8px; font-size:12px; }
.mobile-enlarged .seg button { padding:4px 6px; font-size:12px; }
.mobile-enlarged .ch strong { font-size:12px; }
.mobile-enlarged .hud-tr { top:60px; }
.mobile-enlarged .t-top { top:108px; right:8px; }
.mobile-enlarged .t-left { bottom:108px; }
.mobile-enlarged .touch-shifter, .mobile-enlarged.touch-ui .gate { bottom:212px; }
.mobile-enlarged .hint { top:160px; max-width:90%; }
.mobile-enlarged .overlay:not(.menu) { position:fixed; height:var(--visible-h); }
.mobile-enlarged #pause .stack { grid-template-columns:1fr; }
.mobile-enlarged .mobile-actions { flex-wrap:wrap; }
.mobile-enlarged .set { flex-wrap:wrap; }
.mobile-enlarged .set select { max-width:100%; }

.mobile-ui .menu h1 { font-size:clamp(27px,4vw,32px); }

.mobile-enlarged .seg { flex-wrap:wrap; width:100%; }
.mobile-enlarged .seg button { flex:1 1 80px; }
@media (pointer:coarse) {
 body { --nav-h:0px; }
 random-express-nav { display:none; }
 .game { min-height:0; height:100dvh; }
}

/* Challenge goals remain readable without crossing the central road view. */
body.mobile-ui #game[data-drive-kind=challenge] .hud-tl { top:calc(8px + var(--safe-t)); left:calc(140px + var(--safe-l)); max-width:calc(100% - 356px - var(--safe-l) - var(--safe-r)); }
.mobile-ui #game[data-drive-kind=challenge] .mode-chip strong { display:block; font-size:11px; line-height:1.2; }
.mobile-ui #game[data-drive-kind=challenge] .progress { margin-top:1px; }
body.mobile-ui #game[data-drive-kind=challenge] .hint { top:calc(58px + var(--safe-t)); }
@media (max-width:599px) and (orientation:portrait) {
 body.mobile-ui #game[data-drive-kind=challenge] .hud-tl { top:calc(58px + var(--safe-t)); left:calc(8px + var(--safe-l)); max-width:calc(100% - 16px - var(--safe-l) - var(--safe-r)); }
 body.mobile-ui #game[data-drive-kind=challenge] .hint { top:calc(112px + var(--safe-t)); }
}
body.mobile-enlarged #game[data-drive-kind=challenge] .hud-tl { top:160px; left:8px; max-width:calc(100% - 16px); }
body.mobile-enlarged #game[data-drive-kind=challenge] .hint { top:224px; }

/* Compact console controls: grab the knob immediately left of the gas pedal. */
.gate-stick,.gate-boot,.gate-hit { display:none; }
body.mobile-ui .t-left { align-items:flex-end; gap:6px; }
body.mobile-ui .t-right { right:calc(8px + var(--safe-r)); top:calc(58px + var(--safe-t)); bottom:calc(8px + var(--safe-b)); flex-direction:column; justify-content:space-between; align-items:flex-end; gap:8px; }
body.mobile-ui .t-clutch-wrap { flex-direction:column-reverse; gap:4px; }
body.mobile-ui .t-pedal,body.mobile-ui .t-pedal.clutch,body.mobile-ui .t-pedal.brake { width:52px; height:88px; }
body.mobile-ui .t-latch { width:52px; height:44px; }
body.mobile-ui .t-steer { width:88px; height:80px; min-height:52px; flex-shrink:1; }
body.mobile-ui .t-steer svg { width:48px; height:48px; max-height:calc(100% - 16px); }
body.mobile-ui .t-right .t-pedal.gas { width:52px; height:88px; min-height:44px; flex-shrink:1; }
body.mobile-ui.touch-ui .gate { width:156px; height:112px; left:auto; right:calc(68px + var(--safe-r)); top:auto; bottom:calc(8px + var(--safe-b)); transform:none; border:1px solid rgba(255,255,255,.15); background:rgba(6,10,16,.25); border-radius:12px; backdrop-filter:none; -webkit-backdrop-filter:none; }
.mobile-ui .gate-slot { stroke:rgba(233,238,246,.28); stroke-width:3; }
.mobile-ui .gate text { fill:#e9eef6; font-size:10px; text-shadow:0 1px 2px #080d14; }
.mobile-ui .gate-knob > circle:first-child { r:11px; fill:#273341; stroke:#edf4ff; stroke-width:1.8; filter:drop-shadow(0 1px 2px #05080c); }
/* A 44px hit disc surrounds the smaller visible cap; H-rail motion stays unchanged. */
.mobile-ui .gate-knob .gate-hit { display:block; fill:transparent; stroke:none; }
.mobile-ui .gate.dragging { border-color:rgba(255,179,71,.5); box-shadow:none; }
.mobile-ui .gate.dragging .gate-knob { transition:none; }
body.mobile-ui .hint { left:calc(8px + var(--safe-l)); transform:none; max-width:calc(100% - 120px - var(--safe-l) - var(--safe-r)); }
@media (orientation:landscape) and (max-height:330px) {
 body.mobile-ui .t-steer { width:52px; height:52px; min-height:52px; }
 body.mobile-ui .t-steer svg { width:32px; height:32px; }
 body.mobile-ui .t-steer span { font-size:8px; }
 body.mobile-ui:not(.touch-buttons) .hint,body.mobile-ui:not(.touch-buttons) #game[data-drive-kind=challenge] .hint { top:calc(58px + var(--safe-t)); bottom:auto; left:calc(124px + var(--safe-l)); max-width:calc(100% - 356px - var(--safe-l) - var(--safe-r)); font-size:11px; }
}
@media (orientation:landscape) and (max-height:210px) {
 body.mobile-ui .menu { padding:4px; gap:8px; }
 body.mobile-ui .menu-card { gap:2px; }
 body.mobile-ui .tutorial-card { padding:6px; }
 body.mobile-ui .tutorial-card .kicker { display:none; }
 body.mobile-ui .tutorial-card h2 { font-size:18px; line-height:1; }
 body.mobile-ui .tutorial-card p { font-size:12px; line-height:1.2; margin:2px 0; }
 body.mobile-ui .tutorial-card .cta { min-height:44px; padding:4px; margin-top:2px; font-size:16px; }
 body.mobile-ui #pause .sheet-card { padding:8px; }
 body.mobile-ui #pause h2 { font-size:18px; }
 body.mobile-ui #pause .stack { grid-template-columns:repeat(3,1fr); gap:4px; margin-top:4px; }
 body.mobile-ui #pause [data-act=resume] { grid-column:auto; }
 body.mobile-ui #pause .stack button { font-size:12px; padding:4px; }
 body.mobile-ui .menu h1 { font-size:22px; line-height:1.1; }
 body.mobile-ui #game[data-drive-kind=challenge] .hud-tl { max-width:calc(100% - 372px - var(--safe-l) - var(--safe-r)); }
 body.mobile-ui .t-steer { height:44px; min-height:44px; }
 body.mobile-ui .t-steer svg { width:28px; height:28px; }
 body.mobile-ui .t-pedal,body.mobile-ui .t-pedal.clutch,body.mobile-ui .t-pedal.brake,body.mobile-ui .t-right .t-pedal.gas { height:60px; }
}
@media (max-width:599px) and (orientation:portrait) {
 body.mobile-ui .t-pedal,body.mobile-ui .t-pedal.clutch,body.mobile-ui .t-pedal.brake,body.mobile-ui .t-right .t-pedal.gas { width:48px; }
 body.mobile-ui .t-latch { width:48px; }
 body.mobile-ui.touch-ui .gate { right:calc(64px + var(--safe-r)); }
}
body.mobile-enlarged.touch-ui .gate { width:156px; height:112px; left:8px; right:auto; top:auto; bottom:156px; }
body.mobile-enlarged .t-left { bottom:8px; }
body.mobile-enlarged .t-right { top:156px; bottom:8px; }
body.mobile-enlarged:not(.touch-buttons) .hint { top:160px; bottom:auto; }