@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
/* Keep the visual roles stable across looks: bright car, quiet road, striped curb. */
:root{color-scheme:dark;--bg:#0c1d2a;--surface:#102c3a;--field:#183d3f;--panel:#0c1d2af5;--overlay:#0c1d2a4d;--paper:#f1fbfa;--muted:#a3c7cd;--yellow:#84f3e3;--score:#ffdc7a;--lap:#cbbaff;--car:#ff998a;--line:#485471;--button-text:#0c1d2a;--button-hover:#b0fff0;--button-shadow:#267d78;--danger:#ffb071;--record:#a0f2b3;--icon-active:#21414f}
:root[data-theme="classic"]{--bg:#111a22;--surface:#17222b;--field:#29332e;--panel:#111a22f5;--overlay:#111a224d;--paper:#edf2e7;--muted:#a4b4bd;--yellow:#f5cf54;--score:#a2ead4;--lap:#ffe2a3;--car:#f4d258;--line:#34454f;--button-text:#111a22;--button-hover:#ffe58b;--button-shadow:#9c8029;--danger:#ec8367;--record:#9aefaf;--icon-active:#22333d}
:root[data-theme="afterhours"]{--bg:#171329;--surface:#211a38;--field:#203e42;--panel:#171329f5;--overlay:#1713294d;--paper:#f6f0fa;--muted:#bbaacf;--yellow:#d9f477;--score:#ffb1a2;--lap:#a4e7ef;--car:#d9f477;--line:#5b467a;--button-text:#171329;--button-hover:#edffac;--button-shadow:#657c2e;--danger:#ff9aab;--record:#a2f4a9;--icon-active:#342546}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper);font-family:'DM Sans',Arial,sans-serif}body{overscroll-behavior:none}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible{outline:3px solid white;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.shell{width:min(1160px,100%);margin:auto;min-height:100svh;display:grid;grid-template-columns:1fr 510px;align-items:center;gap:60px;padding:36px 52px}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:10px}.status-dot{width:6px;height:6px;background:var(--yellow);border-radius:50%}h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;line-height:.87;font-size:clamp(88px,9vw,126px);letter-spacing:-2px;margin:33px 0 28px;font-weight:800}h1 span{color:var(--yellow)}.lede{font-size:20px;line-height:1.55;color:var(--muted);margin:0 0 35px}.desktop-hint{font-size:12px;color:var(--muted);line-height:1.8}.desktop-hint span{display:block;margin-top:10px;font-size:9px;letter-spacing:2px;color:var(--muted)}
.game{width:100%;touch-action:none;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 25px 90px #0005;overflow:hidden}.hud{height:76px;display:flex;align-items:center;padding:0 20px;gap:16px;background:var(--surface)}.brand-mark{display:block;width:44px;height:44px;flex-shrink:0}.hud-stats{display:flex;margin-left:auto;margin-right:2px;min-width:62px}.hud-stats>div{display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:end}.stat-label{grid-column:1/3;font-size:8px;letter-spacing:1.4px;color:var(--muted);font-weight:700}.hud-stats strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:28px;line-height:1.1;letter-spacing:1px;font-weight:700}.best-score{font-size:9px;line-height:1.4;letter-spacing:.2px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.hud-actions{display:flex;gap:3px}.icon-button{width:44px;min-width:44px;height:44px;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--muted);position:relative;font-size:19px;padding:0}.icon-button:hover,.icon-button[aria-expanded=true]{background:var(--icon-active);border-color:var(--line)}.icon-button:active{background:var(--icon-active)}#sound-mark{position:absolute;font-size:14px;top:7px;right:8px}#help{font-size:16px}
.stage{height:550px;position:relative;overflow:hidden;background:var(--field);touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--overlay);backdrop-filter:blur(2px)}.overlay.hidden{display:none}.panel{background:var(--panel);padding:28px;border:1px solid var(--line);border-radius:15px;text-align:left;width:min(316px,86%);max-height:calc(100% - 24px);overflow-y:auto;touch-action:pan-y;box-shadow:0 15px 60px #0008}.panel-tag{font-size:8px;letter-spacing:1.8px;color:var(--yellow);font-weight:700}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:52px;line-height:.98;letter-spacing:-.5px;margin:14px 0 18px;text-transform:uppercase;font-weight:800}.panel p{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 20px}.panel p strong{color:var(--paper);font-weight:600}.primary{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--yellow);color:var(--button-text);border:0;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:1px;padding:13px 17px;min-height:48px}.primary:hover{background:var(--button-hover)}.primary span{font-size:22px;font-weight:400;line-height:1}.panel-foot{font-size:9px;color:var(--muted);margin-top:14px;text-align:center}.result{display:flex;gap:36px;margin:17px 0}.result>div{display:flex;flex-direction:column}.result span{font-size:8px;color:var(--muted);letter-spacing:1px}.result strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:39px;color:var(--yellow)}
/* A compact text control backs up the whole-game hold gesture. */
.controls{padding:4px 18px 8px}#steer{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;color:var(--muted);border:0;border-radius:6px;padding:4px 0;user-select:none;-webkit-user-select:none;touch-action:none;min-height:44px;box-shadow:none;transition:color .12s}#steer:hover,#steer.active{color:var(--paper)}#steer.active .steer-arrow{color:var(--yellow)}.steer-copy{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}#steer strong{font-size:11px;font-weight:600;letter-spacing:0}#steer small{font-size:10px;letter-spacing:0}.steer-arrow{font-size:18px;line-height:1}.steer-separator{font-size:11px;color:var(--muted)}.feedback{min-height:14px;margin:0;text-align:center;font-size:10px;line-height:14px;color:var(--muted)}#feedback.is-record{color:var(--record);font-weight:600}#best.is-record,#best-score.is-record,#score.is-record,#result-floor.is-record,#result-score.is-record{color:var(--record);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.save-warning{color:var(--danger);font-size:8px;letter-spacing:.3px;line-height:1.5;margin:4px 0 0;text-align:center}.save-warning:empty{display:none}.flash-label{display:none}.controls-note{display:block;margin-top:4px;font-size:10px;color:var(--muted)}
.help-panel h2{font-size:40px}.help-panel .help-keyboard{font-size:10px;margin-bottom:10px;color:var(--muted)}.save-info{border-top:1px solid var(--line);margin:8px 0 18px}.save-info summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);list-style:none;gap:8px}.save-info summary:after{content:'+';font-size:18px}.save-info[open] summary:after{content:'−'}.save-info summary::-webkit-details-marker{display:none}.save-help{font-size:10px;line-height:1.55;color:var(--muted);padding-bottom:7px}.save-help strong{color:var(--paper)}.save-help p{font-size:10px;line-height:1.55;margin:9px 0 0}#save-code{font-variant-numeric:tabular-nums;color:var(--yellow)}#ghost-label{color:var(--muted);font-size:8px}
@media(max-height:850px) and (min-width:761px){.shell{padding-top:22px;padding-bottom:22px}.stage{height:490px}}
@media(max-width:900px) and (min-width:761px){.shell{gap:30px;padding:24px;grid-template-columns:1fr 440px}h1{font-size:90px}.lede{font-size:18px}}
@media(max-width:760px){html,body{height:100%;overflow:hidden}.shell{display:block;min-height:0;height:100dvh;padding:0;width:100%;max-width:540px}.intro{display:none}.game{border-radius:0;border:0;height:100%;display:flex;flex-direction:column;box-shadow:none}.hud{height:calc(66px + env(safe-area-inset-top,0px) + var(--standalone-header-clearance,0px));flex-shrink:0;padding:calc(env(safe-area-inset-top,0px) + var(--standalone-header-clearance,0px)) 14px 0;min-height:calc(66px + env(safe-area-inset-top,0px) + var(--standalone-header-clearance,0px));gap:10px}.hud-stats{margin-right:0}.stage{height:auto;flex:1;min-height:0}.controls{flex-shrink:0;padding:3px 12px max(8px,env(safe-area-inset-bottom))}.panel{padding:25px;max-width:300px}.keyboard-hint{display:none}.hud-stats strong{font-size:26px}#steer{min-height:44px}}
@media(max-width:350px){.hud{gap:5px;padding-left:10px;padding-right:10px}.brand-mark{width:36px;height:36px}.hud-stats>div{column-gap:5px}.best-score{font-size:8px}.icon-button{font-size:17px}.hud-actions{gap:0}.panel{padding:20px}h2{font-size:44px}}
@media(max-height:540px) and (max-width:760px){.hud{height:calc(50px + env(safe-area-inset-top,0px) + var(--standalone-header-clearance,0px));min-height:calc(50px + env(safe-area-inset-top,0px) + var(--standalone-header-clearance,0px))}.controls{padding:1px 12px max(4px,env(safe-area-inset-bottom))}#steer{min-height:44px;padding:4px 0}.panel{padding:16px 22px}h2{font-size:35px;margin:8px 0 12px}.panel p{margin:8px 0 14px;font-size:11px}.result{margin:8px 0}.result strong{font-size:28px}}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){html,body{height:100%;overflow:hidden}.shell{display:block;height:100dvh;min-height:0;padding:0;width:100%;max-width:none}.intro{display:none}.game{height:100%;display:grid;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:70px 1fr auto;border:0;border-radius:0}.hud{grid-column:2;grid-row:1;height:70px;padding:0 10px;gap:4px}.brand-mark{display:none}.hud-stats{margin:0 auto 0 0;min-width:62px}.hud-stats>div{display:flex;flex-direction:column;align-items:flex-start;gap:0}.hud-stats strong{font-size:23px}.hud-actions{gap:0}.stage{grid-column:1;grid-row:1/3;height:100%;min-height:0}.controls{grid-column:1/-1;grid-row:3;padding:0 12px max(4px,env(safe-area-inset-bottom))}#steer{min-height:44px;padding:4px 0}.panel{width:280px;padding:16px 22px}.panel h2{font-size:35px;margin:9px 0}.panel p{margin:8px 0 13px}.help-panel{width:290px}.save-info{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.overlay{backdrop-filter:none}}
/* Held steering belongs to the game, not iOS text selection. */
.game, .game * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#steer * { pointer-events: none; }
/* Keep unrelated links and editable content usable. */
.game a,.game a *,.game input,.game textarea,
.game [contenteditable="true"],.game [contenteditable="true"] *{-webkit-user-select: text;user-select: text;-webkit-touch-callout: default;}


.live-hud{display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:14px;padding:10px 20px 12px;border-top:1px solid var(--line);background:var(--surface);flex-shrink:0}.live-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.live-stat .stat-label{font-size:9px;letter-spacing:1.3px}.live-stat strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.lap-stat strong{color:var(--lap)}.points-stat strong{color:var(--score)}.speed-stat strong{color:var(--yellow)}
.palette-entry{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:10px 0 0;padding:10px 0;border:0;border-radius:6px;background:transparent;color:var(--paper);font-size:11px;text-align:left}.palette-entry:hover{background:var(--surface)}.palette-name{margin-left:auto;color:var(--muted);font-size:10px}.palette-dots{width:30px;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--car) 0 33%,var(--yellow) 33% 66%,var(--score) 66%)}.palette-panel h2{font-size:40px}.palette-panel>p{margin-bottom:12px}.theme-picker{border:0;padding:0;margin:14px 0 16px;min-width:0}.theme-picker legend{padding:0;margin-bottom:10px;font-size:10px;font-weight:600;letter-spacing:.8px;color:var(--paper)}.theme-options{display:grid;grid-template-columns:1fr;gap:8px}.theme-choice{display:flex;align-items:center;justify-content:flex-start;gap:13px;min-height:64px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;color:var(--paper);background:var(--surface);font-size:12px;line-height:1.3;text-align:left}.theme-choice[aria-pressed="true"]{border:2px solid var(--yellow);padding:10px 12px;color:var(--paper)}.theme-choice[aria-pressed="true"]:after{content:'✓';margin-left:auto;color:var(--yellow);font-size:18px}.theme-copy{display:flex;flex-direction:column;gap:5px}.theme-copy small{font-size:9px;color:var(--muted)}.theme-swatch{width:58px;height:30px;border-radius:7px;display:block;flex-shrink:0}.theme-swatch.classic{background:linear-gradient(135deg,#36454b 0 25%,#f4d258 25% 50%,#f5cf54 50% 75%,#a2ead4 75%)}.theme-swatch.coastal{background:linear-gradient(135deg,#38495d 0 25%,#ff998a 25% 50%,#84f3e3 50% 75%,#ffdc7a 75%)}.theme-swatch.afterhours{background:linear-gradient(135deg,#46365f 0 25%,#ab8bda 25% 50%,#d9f477 50% 75%,#ffb1a2 75%)}.palette-panel .theme-status{font-size:9px;margin:8px 0 0;color:var(--muted)}.theme-status:empty{display:none}
@media(max-width:760px){.live-hud{padding:8px 17px 10px;gap:12px}.live-stat strong{font-size:26px}.live-stat .stat-label{font-size:9px}.palette-panel{padding:20px}.palette-panel h2{font-size:35px;margin:10px 0 12px}}
@media(max-height:540px) and (max-width:760px){.live-hud{padding-top:6px;padding-bottom:7px}.live-stat strong{font-size:23px}.palette-panel h2{font-size:30px}.theme-choice{min-height:60px}}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){.game{grid-template-rows:70px minmax(0,1fr) auto}.live-hud{grid-column:2;grid-row:2;align-self:start;padding:8px 10px;gap:8px}.live-stat strong{font-size:22px}.live-stat .stat-label{font-size:8px;letter-spacing:.5px}.stage{grid-row:1/3}.controls{grid-row:3}}

/* Independent sound choices stay on menus, leaving the driving HUD clear. */
.audio-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 8px}.audio-toggle{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:46px;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--paper);font-size:11px}.audio-toggle strong{font-size:9px;letter-spacing:.5px;color:var(--muted)}.audio-toggle[aria-pressed="true"]{border-color:var(--yellow)}.audio-toggle[aria-pressed="true"] strong{color:var(--yellow)}.audio-toggle:hover{background:var(--icon-active)}.panel .audio-description{font-size:9px;margin:4px 0 8px}.panel .audio-note{font-size:9px;margin:6px 0 12px;color:var(--muted)}.audio-note:empty{display:none}
.panel .sound-cue{font-size:9px;letter-spacing:.3px;margin:3px 0 7px;color:var(--muted)}





.backup-tools{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.backup-tools label{display:block;font-size:10px;color:var(--paper);margin:12px 0 6px}.backup-button{width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--paper);font-size:11px}.backup-button:hover{border-color:var(--yellow)}.backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.backup-tools textarea{display:block;width:100%;min-height:88px;resize:vertical;border:1px solid var(--line);border-radius:7px;padding:9px;background:var(--bg);color:var(--paper);font:10px/1.5 monospace;touch-action:pan-y}.backup-tools input{width:100%;min-height:44px;font-size:10px;margin-bottom:8px;color:var(--paper)}.backup-tools textarea:focus-visible,.backup-tools input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}.save-help #backup-status{color:var(--yellow);margin-bottom:0}.save-help #backup-help{font-size:9px}

/* Keep the opening question and drive action ahead of optional preferences. */
#start-panel h2{font-size:clamp(39px,5vw,48px);line-height:1.02;margin:14px 0 16px}
#start-panel .welcome-instruction{font-size:12px;margin-bottom:20px;color:var(--paper)}
#start-panel .palette-entry{color:var(--muted);margin-top:14px}
#start-panel .palette-dots{width:24px;height:9px;opacity:.7}
#start-panel .audio-toggle{background:transparent;color:var(--muted)}
#start-panel .audio-toggle[aria-pressed="true"]{border-color:var(--line)}
#start-panel .audio-toggle[aria-pressed="true"] strong{color:var(--paper)}

/* Privacy and sharing live in Help; no persistent controls cover the track. */
.help-privacy{border-top:1px solid var(--line);padding-top:15px;margin:0 0 18px}
.help-privacy h3{font-size:11px;font-weight:600;margin:0 0 6px;color:var(--paper)}
.panel .help-status{font-size:10px;line-height:1.6;margin:0 0 8px;overflow-wrap:anywhere}
.help-status:empty{display:none}
.help-action{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:11px;text-align:left}
.help-action:hover{background:var(--surface);color:var(--paper)}
.help-action[hidden]{display:none}
.help-action span{font-size:18px}
.help-footer{margin-top:10px;text-align:center}
.help-footer a{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;color:var(--muted);font-size:9px;text-underline-offset:3px;border-radius:6px}
.help-footer a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* The native modal sits outside the gesture surface, so text remains selectable. */
.analytics-dialog{width:min(420px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--paper);font-family:'DM Sans',Arial,sans-serif;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;box-shadow:0 20px 80px #0008}
.analytics-dialog::backdrop{background:#050a12b8;backdrop-filter:blur(3px)}
.analytics-heading{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px}
.analytics-heading>div{min-width:0;flex:1}
.analytics-dialog h2{font-size:34px;line-height:1.04;margin:10px 0 0;letter-spacing:0}
.dialog-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:26px;line-height:1}
.dialog-close:hover{background:var(--surface);color:var(--paper)}
.analytics-dialog p{font-size:12px;line-height:1.65;color:var(--muted);margin:0 0 14px;overflow-wrap:anywhere}
.analytics-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.analytics-choice{min-width:0;min-height:48px;padding:12px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--paper);font-size:12px;font-weight:600;line-height:1.4}
.analytics-choice:hover{border-color:var(--yellow);background:var(--icon-active)}
.analytics-dialog button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:350px){#start-panel h2{font-size:39px}.analytics-dialog{padding:18px}.analytics-dialog h2{font-size:30px}.analytics-actions{gap:8px}.analytics-choice{font-size:11px}}
@media(max-height:540px) and (max-width:760px){#start-panel h2{font-size:35px;margin:8px 0 12px}#start-panel .welcome-instruction{font-size:11px;margin-bottom:14px}#start-panel .palette-entry{margin-top:8px}.analytics-dialog{padding:18px}}
@media(prefers-reduced-motion:reduce){.analytics-dialog::backdrop{backdrop-filter:none}}

/* Manual-copy fallback remains usable when browser clipboard access is denied. */
#share-status{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;overflow-wrap:anywhere;touch-action:pan-y}

/* Home Screen iOS can frost the first part of the web view beyond its reported
   safe-area inset. Reserve an empty, opaque band above the actual HUD content.
   This is a readability allowance, not an attempt to disable native chrome.
   Normal browser tabs, landscape and desktop keep their existing layout. */
@media(max-width:760px) and (orientation:portrait) and (display-mode:standalone){
  .hud{--standalone-header-clearance:28px}
}
@media(max-width:760px) and (orientation:portrait){
  :root[data-standalone="true"] .hud{--standalone-header-clearance:28px}
}