:root { --hud: #8fffd8; --accent: #ec4; --gate-w: 3.2; } /* gate-w: the gear gate's width in gate units */
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #eee;
             font-family: system-ui, sans-serif; user-select: none; -webkit-user-select: none;
             touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; } /* no zoom, no pull-to-refresh */
#world, #frame { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#frame { pointer-events: none; }
#kit > g { display: none; }
#kit > g.on { display: inline; }
body:not([data-game="distance"]) #kit { display: none; }
#cracks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none;
          stroke: #f4f6ffcc; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 1px #000a); }

/* head-up display, projected on the windscreen */
#hud { position: fixed; left: 50%; top: 45vh; transform: translateX(-50%); width: 360px; text-align: center;
       color: var(--hud); text-shadow: 0 0 8px #0f8a, 0 0 2px #000;
       font-variant-numeric: tabular-nums; pointer-events: none; }
#hud > :not(#flash) { opacity: 0.65; } /* the traffic shows through the readouts; the messages come at full strength */
#hud-main { display: flex; justify-content: center; align-items: baseline; gap: 10px; letter-spacing: 1px; }
#hud-speed { font-size: 46px; font-weight: 600; min-width: 2.2em; text-align: right; }
#hud-gear { font-size: 30px; font-weight: 600; border: 2px solid var(--hud); border-radius: 6px; padding: 0 8px; }
#hud-rpm { height: 7px; margin: 6px 30px 0; border: 1px solid var(--hud); border-radius: 4px; }
#fill { height: 100%; width: 0; background: var(--hud); }
.hit #hud-speed { color: #5f5; }
/* per game: level pips and score (Rev, Speed signs), distance and clock (Distance) */
#pips { display: none; justify-content: center; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; }
#pips i { width: 22px; height: 7px; border-radius: 3px; border: 1px solid var(--hud);
          background: linear-gradient(90deg, var(--c, var(--hud)) var(--f, 0%), transparent 0); }
#score { display: none; margin-top: 6px; white-space: pre-line; font-size: 13px; }
#score::first-line { font-size: 22px; font-weight: 600; }
[data-hud="levels"] #pips { display: flex; }
[data-hud="levels"] #score { display: block; }
#run-dist, #run-info { display: none; }
[data-hud="run"] #run-dist { display: block; }
[data-hud="run"] #run-info { display: inline; }
#run-dist { margin-top: 8px; font-size: 30px; font-weight: 600; }
#run-info { font-size: 14px; }
#hud-beam { display: none; position: relative; align-items: center; gap: 3px; align-self: center; color: #7ab8ff;
            text-shadow: 0 0 8px #48f8; }
#hud-beam::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; border-radius: 1px; /* Flash recharge */
                   width: calc(var(--charge, 0) * 100%); background: currentColor; box-shadow: 0 0 4px #48f8; }
#hud-beam svg { width: 26px; height: 18px; fill: currentColor; stroke: currentColor; filter: drop-shadow(0 0 4px #48f8); }
#hud-beam b { font-size: 24px; font-weight: 600; }
.has-flash #hud-beam { display: inline-flex; }
#hud-beam.empty > * { opacity: 0.3; } /* none left: dimmed, though the refill shows in full */
.flashing #hud-beam { color: #d8ebff; } /* the high-beam telltale lights up */
/* the run's time left, a bar draining across the rear-view mirror's glass (the frame's mirror: x 570-1030, y 42-88
   of 1600 x 900, stretched to the window like the frame) */
#timer { display: none; position: fixed; left: 35.625%; top: 4.667%; width: 28.75%; height: 5.111%; border-radius: 0.6vh;
         overflow: hidden; pointer-events: none; }
.timing #timer { display: block; }
#timer-fill { position: absolute; inset: 22% 1.5%; width: 0; border-radius: 0.4vh; max-width: 97%;
              background: linear-gradient(#f6d77a, #d9a531); box-shadow: 0 0 10px #ec48; }
#timer-left { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); color: #fff;
              font: 600 clamp(10px, 2.8vh, 20px) system-ui, sans-serif; text-shadow: 0 0 3px #000, 0 0 6px #000; }
.low #timer-fill { background: linear-gradient(#ff8a7a, #d33); box-shadow: 0 0 10px #f448; animation: blink 0.5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.45; } }
/* the car stereo (stereo.js): a row of lights in the cluster's hood that jumps with the beat, tapped for the next
   tape; on a desktop also a head unit in the dash, left of the cluster: the tape's name, an 8-band equaliser, a button */
#beat, #beat-hit { display: none; }
.has-stereo #beat, .has-stereo #beat-hit { display: inline; }
#beat-hit { pointer-events: fill; cursor: pointer; touch-action: none; }
#beat rect { fill: #241e1a; }
#beat .g.on { fill: #5f5; } #beat .a.on { fill: #fb3; } #beat .r.on { fill: #f44; }
#stereo { display: none; position: fixed; right: calc(50% + 17vw + 1.5vw); top: 67vh; width: 12vw; padding: 6px;
          flex-direction: column; gap: 4px; border-radius: 6px; background: #121216; border: 1px solid #2c2c36; }
.has-stereo #stereo { display: flex; }
.touch #stereo { display: none; } /* on a phone the dash is full: the lights in the cluster do */
#stereo-lcd { padding: 2px 6px; border-radius: 3px; background: #14200f; color: #8f8; font: 600 11px monospace;
              letter-spacing: 1px; white-space: nowrap; overflow: hidden; }
#stereo-lcd span { display: inline-block; }
#stereo-lcd.scroll span { animation: lcd-scroll 8s linear infinite; } /* a name too long for it (stereo.js label) */
@keyframes lcd-scroll { 0%, 15% { transform: none; } 85%, 100% { transform: translateX(var(--over)); } }
#stereo-eq { display: flex; gap: 3px; height: 34px; }
#stereo-eq i { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; }
#stereo-eq u { flex: 1; border-radius: 1px; background: #241e1a; }
#stereo-eq u.on { background: #5f5; } #stereo-eq u:nth-child(4).on { background: #fb3; } #stereo-eq u:nth-child(5).on { background: #f44; }
#stereo-next { align-self: flex-end; background: #1c1c22; color: #ccc; border: 1px solid #444; border-radius: 4px;
               font: 600 10px system-ui, sans-serif; letter-spacing: 1px; padding: 2px 8px; cursor: pointer; }
/* switched off: greyed, still there to be tapped back on */
.stereo-off #beat rect { fill: #34343a; }
.stereo-off #stereo-lcd { background: #1a1a1e; color: #66666e; }
.stereo-off #stereo-eq u { background: #26262c; }

/* the police scanner, bolted to the right A-pillar opposite the sonar (from the War Rig act on, only on the road) */
#scanner { display: none; position: fixed; right: 5vw; top: 96px; width: 120px; pointer-events: none; }
.has-heat #scanner { display: block; }
.garage #scanner { display: none; }

/* the gang's AR layer on the windscreen: a reticle round the target car, its health above it */
#ar { display: none; position: fixed; pointer-events: none; --ar: #ff5a3c; filter: drop-shadow(0 0 3px #f40a); }
.ar-on #ar { display: block; }
.garage #ar { display: none; }
#ar > i { position: absolute; width: 28%; height: 32%; border: 2px solid var(--ar); }
#ar > i:nth-child(1) { left: -5px; top: -5px; border-width: 2px 0 0 2px; }
#ar > i:nth-child(2) { right: -5px; top: -5px; border-width: 2px 2px 0 0; }
#ar > i:nth-child(3) { left: -5px; bottom: -5px; border-width: 0 0 2px 2px; }
#ar > i:nth-child(4) { right: -5px; bottom: -5px; border-width: 0 2px 2px 0; }
#ar-bar { position: absolute; left: -5px; right: -5px; bottom: calc(100% + 9px); height: 5px; border: 1px solid var(--ar);
          border-radius: 2px; }
#ar-bar i { display: block; height: 100%; width: calc(var(--hp, 1) * 100%); background: var(--ar); }
#ar-label { position: absolute; left: 50%; bottom: calc(100% + 17px); transform: translateX(-50%); white-space: nowrap;
            color: var(--ar); font: 600 11px system-ui, sans-serif; letter-spacing: 1px; }

/* the fleet's sonar, bolted to the left A-pillar under the menu button (only with a fleet, only on the road) */
#sonar { display: none; position: fixed; left: 5vw; top: 96px; width: 120px; pointer-events: none; }
.has-fleet #sonar { display: block; }
.garage #sonar { display: none; }
#sonar-sweep { transform-box: view-box; transform-origin: 64px 12px; animation: sweep 1.6s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
#stalk, #stalk-hit { display: none; }
.has-flash #stalk, .has-flash #stalk-hit { display: inline; }
#stalk-hit { pointer-events: stroke; cursor: pointer; touch-action: none; }
#stalk { transition: transform 0.06s; }
.flashing #stalk { transform: translate(-3px, 9px); } /* pulled towards you */
#flash { position: absolute; left: 50%; top: -10px; opacity: 0; white-space: nowrap; font-size: 30px; font-weight: bold; }
.garage #hud { display: none; }

/* the menu (main.js): one screen at a time (main, pause, arcade, settings, stats, help, credits, win), in one panel */
#menu { display: none; position: fixed; inset: 0; z-index: 10; overflow: auto; background: #07081099;
        backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.menu #menu { display: flex; }
#menu-panel { position: relative; margin: auto; width: min(760px, 92vw); box-sizing: border-box; padding: 18px 20px; border-radius: 14px;
              background: #0b0d16f2; border: 1px solid #2c3140; color: #bbb; font-size: 13px; }
#menu h1 { margin: 0; font-size: 30px; letter-spacing: 6px; color: #eee; }
#menu h1 span { color: var(--accent); }
.debug #menu h1::after, .debug #garage header b::after { content: 'DEBUG'; margin-left: 10px; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; letter-spacing: 1px; vertical-align: middle; background: #c33; color: #fff; } /* debug mode, main.js */
#menu p { margin: 2px 0 12px; color: #9ab; line-height: 1.5; }
#menu p b { color: #ccc; }
#menu a { color: inherit; }
#menu h2 { margin: 14px 0 6px; font-size: 11px; letter-spacing: 2px; color: #778; font-weight: 600; }
#menu h2 small { margin-left: 6px; letter-spacing: 0; color: #556; font-weight: 400; }
#menu button { background: #12141e; color: #ccc; border: 1px solid #2c3140; border-radius: 8px; cursor: pointer; font: inherit; }
#menu button.on { border-color: var(--accent); }
#menu button[hidden] { display: none; }
.menu-buttons { display: grid; gap: 8px; max-width: 380px; margin: 4px auto 18px; }
.menu-buttons button { padding: 12px 16px; font-size: 15px; font-weight: 600; letter-spacing: 2px; color: #ddd; }
#menu .menu-buttons .big { color: #111; background: var(--accent); border-color: var(--accent); }
#continue.done::after { content: ' ✓'; color: #1a7a1a; } /* the tank beaten: a finished game, played on */
#menu .corner { position: absolute; left: 16px; bottom: 10px; padding: 0; border: 0; background: none; color: #556;
                font-size: 11px; text-decoration: underline; } /* the credits: a small link, a bottom corner */
#menu footer { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
#menu footer button { padding: 6px 14px; }
#menu footer > :first-child { margin-right: auto; } /* back (or the first choice) on the left, the rest on the right */
#menu .danger { color: #f77; border-color: #6a2a2a; }
.setting { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #1a1e2c; }
.setting > span { width: 110px; color: #9ab; }
.setting input[type=range] { flex: 1; max-width: 280px; accent-color: var(--accent); }
.setting button { padding: 4px 10px; }
#stats-list, #win-stats { display: grid; grid-template-columns: max-content 1fr; gap: 5px 18px; margin: 8px 0; }
#menu dt { color: #9ab; }
#menu dd { margin: 0; color: #eee; font-weight: 600; }
#menu .build { color: #556; font-size: 11px; }
#menu .shared { min-height: 1em; margin: 8px 0 0; color: var(--accent); }
#menu .shared textarea { width: 100%; height: 6em; margin-top: 4px; background: #12141e; color: #ccc; border: 1px solid #2c3140; }
#game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
#game-list button { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; }
#game-list b { font-size: 16px; color: #eee; letter-spacing: 1px; }
#game-list small { color: #9ab; line-height: 1.35; }
#game-list i { font-style: normal; font-size: 11px; color: var(--accent); }
#game-list button:hover { border-color: #556; }
#engine-pick { display: flex; gap: 6px; }
#engine-pick button { flex: 1; padding: 5px 8px; }
#engine-pick button.on { color: var(--accent); }
.menu-help { line-height: 1.7; color: #889; }
.menu-help b { color: #ccc; }
#menu, #garage { touch-action: pan-y; } /* these two scroll on small screens */
.touch .desk-only, body:not(.touch) .touch-only { display: none; }
/* nitro: a smaller red pedal bolted over the gas pedal's top right corner (its transform keeps it there as the gas
   pedal tilts), and a gauge on the cluster; while it burns the view runs hot. It sticks out past the gas pedal by no
   more than the gap kept clear of the screen's edge, and overlaps it only a little, so a thumb on the gas stays on it */
#nos, #nos-gauge { display: none; }
.has-nos #nos { display: block; }
.has-nos #nos-gauge { display: inline; }
#nos { position: absolute; bottom: 100%; right: -16%; width: 60%; margin-bottom: -14%; }
.nitro #nos { filter: drop-shadow(0 0 8px #f44); }
.nitro #world { filter: saturate(1.5) brightness(1.08); }
.flashing #world { filter: brightness(1.4); }
.nitro #hud { color: #9cf; }
#menu-button { position: fixed; left: 9vw; top: 52px; z-index: 5; width: 38px; height: 34px; border-radius: 8px;
               background: #0b0d16cc; color: #ccc; border: 1px solid #2c3140; font-size: 18px; cursor: pointer; }

/* garage between runs, over the windscreen */
#garage { display: none; position: fixed; z-index: 4; /* over the controls on small screens */ left: 50%; top: 5vh; transform: translateX(-50%); width: min(780px, 66vw);
          max-height: 80vh; overflow: auto; /* over the cluster too: nothing to read there in the garage */ box-sizing: border-box; padding: 14px 16px; border-radius: 12px;
          background: #0b0d16ee; border: 1px solid #2c3140; font-size: 13px; color: #bbb; }
.garage #garage { display: block; }
#garage header { display: flex; justify-content: space-between; align-items: baseline; }
#garage header b { font-size: 20px; letter-spacing: 3px; color: #eee; }
#bank { font-size: 20px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
#report { margin: 4px 0 10px; color: #9ab; }
#report b { color: #5f5; }
#garage button { background: #1c1c22; color: #ccc; border: 1px solid #444; border-radius: 5px; cursor: pointer;
                 font: inherit; padding: 3px 10px; }
#garage button:disabled { cursor: default; color: #667; border-color: #2a2a33; }
#garage button.on { border-color: var(--accent); color: var(--accent); }
#engine-row { display: flex; gap: 6px; margin-bottom: 10px; }
#engine-row[hidden] { display: none; }
#tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#tabs:empty { display: none; }
#tabs button { flex: 1; padding: 5px 8px; font-weight: 600; }
#tabs button.new::after { content: '!'; margin-left: 6px; color: #ffd23f; font-weight: 800; } /* something new unlocked */
#engine-row button { flex: 1; }
#cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.card { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border: 1px solid #262a36;
        border-radius: 8px; background: #12141e; }
.card b { color: #eee; letter-spacing: 1px; }
.card i { font-style: normal; color: var(--accent); letter-spacing: 1px; font-size: 11px; }
.card small { min-height: 2.6em; color: #9ab; }
.card.bought { animation: bought 0.6s ease-out; }
.card.repair { border-color: #a33; }
.card.locked { border-style: dashed; opacity: 0.5; } /* only its name and what it needs: what it does is a surprise */
.card.exchange { grid-column: span 2; border-color: #3a5a8a; }
.card.exchange input { width: 100%; margin: 2px 0; accent-color: var(--accent); touch-action: pan-x; }
@keyframes bought { from { background: #3a3410; } }
#garage footer { display: flex; justify-content: flex-end; align-items: center; position: sticky; bottom: -14px;
                 margin: 0 -16px -14px; padding: 10px 16px 14px; background: #0b0d16; } /* DRIVE stays in view */
#garage #drive { font-size: 18px; font-weight: 600; padding: 6px 28px; color: #111; background: var(--accent);
                 border-color: var(--accent); }

/* instrument cluster behind the wheel, the wheel itself, and the controls around it */
#cluster { position: fixed; left: 50%; top: 64vh; transform: translateX(-50%); width: 34vw; pointer-events: none; }
#cluster text { font-family: system-ui, sans-serif; fill: #ccc; text-anchor: middle; }
#wheel { position: fixed; left: 50%; top: 83vh; transform: translateX(-50%); width: 54vw; pointer-events: none; }
#wheel-grip { pointer-events: stroke; cursor: grab; touch-action: none; } /* a wide band around the rim takes hold */
#fire { display: none; font-family: system-ui, sans-serif; }
#trigger { pointer-events: none; touch-action: none; }
.has-guns #fire { display: inline; }
.has-guns #trigger { pointer-events: fill; cursor: crosshair; } /* with guns, the marker fires instead of steering */
/* kinetic controls: dragged with the mouse */
#ignition { position: fixed; left: 67vw; top: 65vh; width: 11vw; cursor: grab; touch-action: none; }
#ignition text { font: bold 10px system-ui, sans-serif; fill: #777; text-anchor: middle; }
#key { transform-origin: 65px 70px; }
#ignition[data-state="off"] .off, #ignition[data-state="on"] .on, #ignition[data-state="start"] .start { fill: var(--accent); }
#shifter { position: fixed; left: 67.5vw; top: 78vh; height: calc(19vh * 3.2 / var(--gate-w)); /* 7 gears: shorter, same width */ cursor: grab; touch-action: none; }
#shifter text { font: bold 0.32px system-ui, sans-serif; fill: #889; text-anchor: middle; }
#shifter text.locked { fill: #2a2a33; }
#shifter text.broken { fill: #c33; }
#pedals { position: fixed; right: 1.5vw; bottom: 1vh; display: flex; gap: 2vh; align-items: flex-end; }
.pedal-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
             font-size: 10px; color: #889; letter-spacing: 1px; }
.pedal { width: 6vh; cursor: grab; touch-action: none; transform-origin: 50% 100%; }
#brake { width: 7.5vh; }
.depth { position: absolute; left: -7px; bottom: 16px; width: 4px; height: 10vh; background: #222; border-radius: 2px; }
.depth::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px;
                height: calc(var(--depth, 0) * 100%); background: var(--accent); } /* how far the pedal is pressed */

/* touch layout (phones and tablets held sideways): gear lever on the left, pedals on the right, all bigger.
   dvh: the height actually visible between the browser's bars; env(): clear of the notch */
.touch { --hud-scale: 1; --shifter-h: min(52vh, 300px);
          /* clear of the screen's swipe zones (home bar: app switcher; left edge: back) and the notch or island */
          --edge-l: max(24px, calc(env(safe-area-inset-left) + 12px)); --edge-r: max(24px, calc(env(safe-area-inset-right) + 12px));
          --edge-b: max(20px, calc(env(safe-area-inset-bottom) + 16px)); }
@supports (height: 1dvh) { .touch { --shifter-h: min(52dvh, 300px); } }
.touch #wheel { top: 80vh; top: 80dvh; } /* the rim is a control here: up off the screen's edge, under the cluster */
/* the light stalk comes out 10° further up the rim and 10% shorter, at the same angle: the shifter, pushed in by the
   notch or island, covered it. Shorter keeps the knob inside the wheel's drawing. Its touch area also slides out
   along it, to stay as far off the rim as before. */
.touch #stalk, .touch #stalk-hit { --at: translate(78px, -37px) scale(0.9); transform-origin: 250px 130px; transform: var(--at); }
.touch #stalk-hit { transform: var(--at) translate(-15px, -7px); }
.touch.flashing #stalk { transform: var(--at) translate(-3px, 9px); }
.touch #hud { top: 38vh; top: 38dvh; transform: translateX(-50%) scale(var(--hud-scale)); transform-origin: top center; }
.touch #cluster { top: 60vh; top: 60dvh; width: 28vw; }
.touch #shifter { left: var(--edge-l); top: auto; bottom: var(--edge-b); height: calc(var(--shifter-h) * 3.2 / var(--gate-w)); }
.touch #ignition { left: calc(var(--edge-l) + var(--shifter-h) * 3.2 / 3.5 + 8px); /* right of the shifter */
                   top: 62vh; top: 62dvh; /* as wide as the room left of the cluster (its left edge at 36vw), at least
                   48px: the notch pushes the shifter in, and the key once covered the rev counter */
                   width: max(48px, min(10vw, 90px, calc(36vw - var(--edge-l) - var(--shifter-h) * 3.2 / 3.5 - 14px))); }
.touch #pedals { right: var(--edge-r); bottom: var(--edge-b); gap: 1.5vw; }
.touch .pedal { width: 8.5vw; }
.touch #brake { width: 8.5vw; } /* no bigger than the others: with the notch the clutch's bar once covered the speedo */
.touch .depth { height: calc(100% - 16px); }
.touch #garage { top: 2vh; width: 94vw; max-height: 96vh; max-height: 96dvh; font-size: 12px; }
.touch #garage header { padding-left: calc(var(--edge-l) + 30px - 3vw); } /* clear of the menu button (38px wide at
   --edge-l; the garage starts at 3vw, padded 16px), wherever the notch puts it */
.touch .card { padding: 5px 7px; gap: 2px; }
.touch .card small { min-height: 0; } /* phones: tighter cards, so more fit without scrolling */
.touch #menu-button { left: var(--edge-l); top: max(8px, env(safe-area-inset-top)); }
.touch #sonar { left: calc(var(--edge-l) - 14px); top: calc(max(8px, env(safe-area-inset-top)) + 42px); width: 88px; }
.touch #scanner { right: calc(var(--edge-r) - 24px); top: calc(max(8px, env(safe-area-inset-top)) + 42px); width: 88px; }
.touch #menu-panel { width: 94vw; padding: 12px 16px; }
.touch .menu-buttons { grid-template-columns: 1fr 1fr; max-width: 560px; margin-bottom: 14px; } /* two a row: it fits */
.touch .menu-buttons .big { grid-column: span 2; }
.touch .menu-buttons button { padding: 10px 12px; }
@media (max-height: 560px) { .touch { --hud-scale: 0.62; } }
#rotate { display: none; position: fixed; inset: 0; z-index: 20; background: #000; color: #ccc; font-size: 20px;
          align-items: center; justify-content: center; text-align: center; padding: 20px; }
@media (orientation: portrait) { .touch #rotate { display: flex; } } /* the cockpit needs the phone sideways */
#ios-tip { display: none; }
.ios #ios-tip { display: inline; }