/* Follows the device theme: a dusk road in dark mode, a daytime road in light mode (the canvas
   palette in game.js switches with it). The car's cockpit stays dark in both. */
:root{
  --bg:#140d09; --panel:rgba(30,19,12,.88); --ink:#fff4e6; --muted:#dcc6aa;
  --accent:#f29b38; --accent-ink:#2b1504; --warn:#ffd166; --line:rgba(255,236,210,.16);
  --dim:rgba(12,7,4,.55); --chip:rgba(255,255,255,.04); --btn:rgba(20,12,8,.6); --field:#0c0806;
  --font:"Baloo 2", ui-rounded, system-ui, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6eee2; --panel:rgba(255,250,243,.92); --ink:#2b1a0e; --muted:#6b5340;
    --accent:#b85c0f; --accent-ink:#fff8ef; --warn:#8a4a00; --line:rgba(60,35,15,.18);
    --dim:rgba(40,25,10,.3); --chip:rgba(60,35,15,.05); --btn:rgba(255,250,243,.75); --field:#fffaf3;
    color-scheme: light;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
.ui{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:2}
.ui.show{display:flex}
.ui.dim{background:var(--dim)}
.card{width:100%;max-width:400px;max-height:100%;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px 16px;box-shadow:0 18px 50px rgba(0,0,0,.45);touch-action:pan-y;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
h1{margin:0;font-size:30px;line-height:1.05;font-weight:800}
h2{margin:0 0 4px;font-size:22px;line-height:1.15;font-weight:800}
.tag{margin:2px 0 12px;color:var(--muted);font-size:15px}
.box{border-top:1px solid var(--line);padding:12px 0 4px}
.kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.big{font-size:20px;font-weight:700;margin:2px 0}
.small{font-size:13px;color:var(--muted);margin:4px 0 8px;line-height:1.4}
.squares{font-size:22px;letter-spacing:2px;margin:6px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
button{font:inherit;color:inherit;cursor:pointer}
.primary{display:block;width:100%;min-height:48px;border:0;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-size:18px;font-weight:800;margin:8px 0}
.ghost{display:block;width:100%;min-height:44px;border:1px solid var(--line);border-radius:14px;background:transparent;font-size:16px;font-weight:700;margin:6px 0}
.chip{min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--chip);font-size:15px;font-weight:700}
.chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
details{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
summary{cursor:pointer;color:var(--ink);font-weight:700}
#exitBtn{position:fixed;top:12px;right:12px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--btn);color:inherit;font-size:18px;z-index:2}
#pauseBtn{position:fixed;top:12px;left:10px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--btn);font-size:16px;z-index:1}
textarea{width:100%;height:84px;background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:10px;font:14px/1.4 ui-monospace,monospace;padding:8px;user-select:text;-webkit-user-select:text}
.foot{font-size:12px;color:var(--muted);opacity:.8;margin:10px 0 0}
:focus-visible{outline:3px solid var(--warn);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){.card{backdrop-filter:none;-webkit-backdrop-filter:none}}
.links a{color:var(--accent);font-weight:700;text-decoration:none}
.links a:hover{text-decoration:underline}
.nojs{position:fixed;inset:auto 16px 16px;margin:0;padding:12px;border-radius:12px;background:var(--panel);text-align:center}
/* Phones play in landscape, held like a steering wheel. Where the browser can't lock the
   orientation, this card covers the game in portrait (game.js pauses a race behind it). */
.turn{position:fixed;inset:0;z-index:5;display:none;align-items:center;justify-content:center;padding:16px;background:var(--bg);text-align:center}
.turn .card{max-width:320px}
.turnIcon{font-size:44px;line-height:1;margin-bottom:8px}
@media (orientation: portrait) and (pointer: coarse){.turn{display:flex}}

/* Touch pedals: rounded triangles (guitar-pick shape) with the wide side on the screen edge and the point
   toward the middle, so they cover as little of the road as possible. Brake under the left thumb, gas under the right.
   Only on touch screens, only while racing. The clip-path is the touch area. */
.pedal{display:none;position:fixed;top:50%;transform:translateY(-50%);height:clamp(110px,40vh,170px);aspect-ratio:100/130;padding:0;border:0;background:none;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.06em;z-index:1;touch-action:none}
.pedal svg{position:absolute;inset:0;width:100%;height:100%;opacity:.78;pointer-events:none}
.pedal span{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.rim{stroke-width:28;stroke-linejoin:round}
.in{stroke-width:22;stroke-linejoin:round;fill:var(--field);stroke:var(--field)}
#brakeBtn{left:max(0px,env(safe-area-inset-left));clip-path:polygon(0 0,100% 50%,0 100%)}
#brakeBtn span{left:8%}
#brakeBtn .rim{fill:#e5484d;stroke:#e5484d}
#gasBtn{right:max(0px,env(safe-area-inset-right));clip-path:polygon(100% 0,0 50%,100% 100%)}
#gasBtn svg{transform:scaleX(-1)}
#gasBtn span{right:8%}
#gasBtn .rim{fill:#3fb950;stroke:#3fb950}
.pedal.on svg{opacity:1}
.pedal.on .in{fill:var(--accent);stroke:var(--accent)}
.pedal.on span{color:var(--accent-ink)}
@media (pointer: coarse){body.racing .pedal{display:block}}
/* First-run help card */
.helpRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 4px;text-align:center}
.helpPedal{flex:0 0 auto}
.helpPedal .small{margin:2px 0 0}
.pedalShape{position:relative;height:84px;aspect-ratio:100/130;margin:0 auto}
.pedalShape svg{position:absolute;inset:0;width:100%;height:100%}
.pedalShape span{position:absolute;top:50%;transform:translateY(-50%);font-size:11px;font-weight:800;letter-spacing:.04em}
.brakeHelp .pedalShape span{left:8%}.gasHelp .pedalShape span{right:8%}
.gasHelp .pedalShape svg{transform:scaleX(-1)}
.brakeHelp .rim{fill:#e5484d;stroke:#e5484d}.gasHelp .rim{fill:#3fb950;stroke:#3fb950}
.helpMid{flex:1}
.deskOnly{display:none}
@media (pointer: fine){.deskOnly{display:block}}