/* Ring Kart's styles: a 1970s Saturday-morning cartoon. Cream paper, brown ink, mustard, orange and red racing
   stripes; Racing Sans One for the big words, Bungee for numbers and labels, Barlow for reading. The page around the game is
   cream in light mode and dark brown in dark mode; the game itself is a full-bleed 3D stage with the HUD on top as
   inked stickers: position, the gaps, the pace notes and BRAKE cue, the corner name, and along the bottom the
   onboard telemetry strip (map, gear and speed, revs, pedals, clock, height of the lap). */
:root {
  --bg: #f6ead2;
  --panel: #fff7e6;
  --fg: #3a2414;
  --fg-dim: #7a5a3e;
  --line: #d9c19a;
  --link: #b8461a;
  --ink: #2a1a0e;
  --cream: #fff1cf;
  --mustard: #f2b631;
  --orange: #ec6f2b;
  --red: #d8402b;
  --brown: #6b3e1e;
  --avocado: #8a9a2b;
  --teal: #2f9c9a;
  --strip: #3b2414;
  --stripes: linear-gradient(var(--mustard) 0 33%, var(--orange) 33% 66%, var(--red) 66%);
  --display: 'Racing Sans One', 'Barlow Condensed', Impact, sans-serif;
  --num: 'Bungee', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --sticker: 3px solid var(--ink);
  --drop: 4px 4px 0 var(--ink);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #1d140d; --panel: #2a1d13; --fg: #f6e6c8; --fg-dim: #c4a982; --line: #4a3523; --link: #f2b631; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #1d140d; --panel: #2a1d13; --fg: #f6e6c8; --fg-dim: #c4a982; --line: #4a3523; --link: #f2b631; color-scheme: dark; }

/* ---------- page ---------- */
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); line-height: 1.45; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap, header.top { max-width: 1240px; margin: 0 auto; }
.wrap { display: flex; flex-direction: column; gap: 14px; padding-block: 4px 16px; }
footer.version { text-align: center; color: var(--fg-dim); font-size: 0.75rem; padding: 4px 16px 18px; }
a { color: var(--link); }
[hidden] { display: none !important; }
header.top { padding-block: 16px 6px; }
.brand h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0; color: var(--orange); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.01em; }
.brand h1::after { content: ""; display: block; width: min(320px, 70%); height: 12px; margin-top: 6px; background: var(--stripes); border-radius: 2px; }
.brand p { margin: 6px 0 0; color: var(--fg-dim); max-width: 70ch; }
.brand p.matchup { margin: 8px 0 0; font: 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.1 var(--num); color: var(--fg); }
.hint { margin: -6px 0 0; font-size: 0.85rem; color: var(--fg-dim); }

button { font: 600 0.9rem var(--body); color: var(--fg); background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 7px 13px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--fg-dim); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
button.primary { background: var(--orange); border: var(--sticker); color: var(--cream); font: 400 1.25rem var(--display); padding: 6px 22px 9px; box-shadow: 3px 3px 0 var(--ink); }
button.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.card { background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card h2 { font: 400 1.25rem var(--display); color: var(--orange); margin: 0; }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.notes .card p { margin: 0; color: var(--fg-dim); font-size: 0.92rem; }

/* ---------- the stage ---------- */
.stage { position: relative; border-radius: 18px; overflow: hidden; background: #fbe3b0; height: min(78vh, 820px); min-height: 440px; user-select: none; -webkit-user-select: none; border: var(--sticker); }
.stage:fullscreen { border-radius: 0; border: 0; height: 100vh; }
#gl { display: block; width: 100%; height: 100%; touch-action: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; font: 400 2rem var(--display); color: var(--orange); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; background: linear-gradient(#2aa7c4, #fbe3b0 70%); }
.nogl { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink); }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgb(42 26 14 / 0.3) 100%); transition: box-shadow .3s; }
.vignette.boost { box-shadow: inset 0 0 120px 24px rgb(236 111 43 / 0.45); }
/* zoom lines under a turbo, as a cartoon draws speed */
.zoom { position: absolute; inset: -10%; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgb(255 241 207 / 0.85) 0 0.6deg, transparent 0.6deg 7deg);
  -webkit-mask: radial-gradient(ellipse at 50% 46%, transparent 32%, #000 70%); mask: radial-gradient(ellipse at 50% 46%, transparent 32%, #000 70%); }
.zoom.on { opacity: 0.75; animation: zoomflick .12s steps(2) infinite; }
@keyframes zoomflick { 50% { transform: rotate(2deg); } }

/* ---------- the HUD: inked stickers ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; color: var(--ink); font-family: var(--num); }
.hud > * { position: absolute; }
.sticker, .pos, .gaps, .note, .prompt { background: var(--cream); border: var(--sticker); border-radius: 16px; box-shadow: var(--drop); }
.pos { left: 14px; top: 12px; padding: 0 14px 4px; display: flex; align-items: baseline; gap: 4px; }
.pos b { font: 400 3rem/1.15 var(--display); color: var(--orange); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.pos span { font-size: 1.3rem; color: var(--brown); }
.gaps { right: 14px; top: 12px; padding: 6px 12px 7px; font: 400 0.95rem var(--num); display: flex; flex-direction: column; gap: 1px; min-width: 160px; }
.gaps:empty { display: none; }
.gaps div { display: flex; justify-content: space-between; gap: 12px; }
.gaps .me { color: var(--orange); }
.gaps span:last-child { color: var(--brown); }
/* the pace note: the next corner, as a co-driver would call it */
.note { left: 50%; top: 12px; transform: translateX(-50%) scale(0.9); display: flex; align-items: center; gap: 6px; padding: 4px 16px 4px 6px; opacity: 0; transition: opacity .2s, transform .2s; }
.note.on { opacity: 1; transform: translateX(-50%) scale(1); }
.note canvas { width: 60px; height: 60px; }
.note b { display: block; font: 400 1.5rem/1.1 var(--display); color: var(--brown); white-space: nowrap; }
.note span { font: 400 1rem var(--num); color: var(--orange); }
.brakecue { left: 50%; top: 27%; transform: translateX(-50%); font: 400 clamp(2.4rem, 7vw, 4.4rem) var(--display); color: var(--red); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); opacity: 0; }
.brakecue.on { opacity: 1; animation: thump .3s ease-in-out infinite alternate; }
@keyframes thump { to { transform: translateX(-50%) scale(1.12) rotate(-3deg); } }
.corner { left: 50%; top: 92px; transform: translateX(-50%); font: 400 clamp(1.5rem, 3.8vw, 2.5rem) var(--display); color: var(--mustard); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; opacity: 0; transition: opacity .35s; }
.corner.on { opacity: 1; }
.prompt { left: 50%; top: 58%; transform: translateX(-50%); padding: 8px 22px 10px; font: 400 clamp(1.3rem, 3vw, 2rem) var(--display); color: var(--brown); text-align: center; max-width: min(560px, 86%); }
.prompt small { display: block; font: 500 0.95rem var(--body); color: var(--fg-dim); margin-top: 2px; }
.prompt.big { top: 38%; font-size: clamp(2.6rem, 8vw, 4.6rem); color: var(--avocado); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; background: none; border: 0; box-shadow: none; text-shadow: 4px 4px 0 var(--ink); }

/* the coach, with the best line on: what your feet should be doing a moment from now, in the line's colours */
.coach { left: 14px; top: 42%; padding: 6px 14px 8px; background: var(--cream); border: var(--sticker); border-radius: 16px; box-shadow: var(--drop); text-align: center; opacity: 0; transition: opacity .2s; min-width: 110px; }
.coach.on { opacity: 1; }
.coach b { display: block; font: 400 1.6rem/1.1 var(--display); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.coach span { font: 400 0.95rem var(--num); color: var(--brown); }
.coach.gas b { color: #6fb52c; } .coach.coast b { color: #e8b923; } .coach.brake b { color: var(--orange); } .coach.hard b { color: var(--red); }
.coach.hard { animation: thump2 .25s ease-in-out infinite alternate; }
@keyframes thump2 { to { transform: scale(1.08); } }
/* the pro lap: a brown title bar across the top instead of the position and the gaps */
.protag { display: none; }
.hud.pro .pos, .hud.pro .gaps, .hud.pro .prompt { display: none; }
.hud.pro .protag { display: block; left: 0; right: 0; top: 0; padding: 10px 16px 14px; background: var(--strip); color: var(--cream); font: 400 1.05rem var(--num); border-bottom: var(--sticker); }
.hud.pro .protag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--stripes); }
.hud.pro .protag b { font: 400 1.4rem var(--display); color: var(--mustard); margin-right: 6px; }
.hud.pro .note { top: 62px; }
.hud.pro .corner { top: 140px; }
.corner-btn.stop { display: none; }
.stage.pro .corner-btn.stop { display: block; top: 9px; right: 14px; }
.toast { position: absolute; left: 50%; bottom: 176px; transform: translateX(-50%); background: var(--cream); border: var(--sticker); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); padding: 4px 14px; font: 400 1rem var(--num); color: var(--ink); pointer-events: none; }

/* the onboard telemetry strip: a brown dashboard with the racing stripes along its top */
.tele { left: 0; right: 0; bottom: 0; height: 152px; background: var(--strip); border-top: var(--sticker); color: var(--cream); padding: 22px 16px 8px; display: grid; grid-template-columns: 150px auto 160px 74px minmax(0, 1fr); align-items: center; gap: 18px; box-sizing: border-box; }
.tele::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--stripes); border-bottom: 2px solid var(--ink); }
.tele .lbl { display: block; font: 400 0.8rem var(--num); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mustard); }
.tele .map { width: 150px; height: 120px; }
.gs { display: grid; grid-template-columns: auto auto; column-gap: 22px; align-items: end; }
.gs > div { text-align: center; }
.gs b { display: block; font: 400 3.3rem/0.95 var(--num); font-variant-numeric: tabular-nums; }
.gs > div:last-of-type b { min-width: 3ch; }
.gs .flags { grid-column: 1 / -1; font: 400 0.8rem var(--num); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); min-height: 1.1em; text-align: center; }
.tach { width: 180px; height: 75px; }
/* DRS: the rear wing in profile with its flap, and a chip that says whether it can open, for cars that have it */
.tele.has-drs { grid-template-columns: 150px auto 180px 110px 74px minmax(0, 1fr); }
.drsbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.drsbox .sil { width: 110px; height: 44px; }
.drs { font: 400 0.85rem var(--num); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 10px 3px; border-radius: 999px; border: 2px solid var(--ink); background: rgb(255 241 207 / 0.12); color: rgb(255 241 207 / 0.5); }
.drs.ready { background: var(--mustard); color: var(--ink); }
.drs.open { background: var(--avocado); color: var(--cream); }
/* swipe controls on a phone: the steering and pedal buttons go, the picture is the wheel; a ring where the thumb
   landed and a dot where it is now */
.stage.swipe { touch-action: none; }
.stage.swipe .touch .lr, .stage.swipe .touch .pedals { display: none; }
.thumb { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid rgb(255 241 207 / 0.8); box-shadow: 0 0 0 3px rgb(42 26 14 / 0.4); pointer-events: none; display: none; z-index: 5; }
.thumb.on { display: block; }
.thumb i { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--cream); border: 3px solid var(--ink); }
.thumb.brake i { background: var(--red); }
/* over the line: your place, big, a gold, silver or bronze ribbon for a podium */
.place { left: 50%; top: 14%; transform: translateX(-50%) scale(0.6); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.6, .5, 1), opacity .25s; text-align: center; padding: 10px 34px 14px; background: var(--cream); border: var(--sticker); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); }
.place.on { opacity: 1; transform: translateX(-50%) scale(1); }
.place b { display: block; font: 400 clamp(3.4rem, 10vw, 6rem)/1 var(--display); color: var(--orange); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.place span { display: block; font: 400 1.2rem var(--num); color: var(--ink); margin-top: 4px; }
.place.gold { background: #f6d23c; } .place.silver { background: #dfe3e8; } .place.bronze { background: #e3a26a; }
.pos.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.25); } }
/* the phone controls on the picker: four choices and a line on how each works */
.ctlpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.ctlpick .lbl { width: 100%; order: -1; font: 400 0.8rem var(--num); color: var(--fg); }
.ctlpick button { padding: 6px 12px; border: var(--sticker); border-radius: 999px; background: var(--cream); font: 400 0.85rem var(--num); color: var(--ink); }
.ctlpick button[aria-pressed="true"] { background: var(--mustard); box-shadow: 2px 2px 0 var(--ink); }
.ctlpick .ctlnote { width: 100%; order: 9; margin: 2px 0 0; font: 500 0.8rem var(--body); color: var(--fg-dim); }
/* tap sides: the half you hold glows; tilt: a little horizon that leans with the phone */
.tapglow { position: absolute; top: 0; bottom: 152px; width: 50%; pointer-events: none; opacity: 0; transition: opacity .1s; display: none; }
.tapglow.l { left: 0; background: linear-gradient(90deg, rgb(242 182 49 / 0.35), transparent 60%); }
.tapglow.r { right: 0; background: linear-gradient(-90deg, rgb(242 182 49 / 0.35), transparent 60%); }
.stage.ctl-tap .tapglow { display: block; }
.stage.tapL .tapglow.l, .stage.tapR .tapglow.r { opacity: 1; }
.tiltbar { position: absolute; left: 50%; bottom: 170px; width: 120px; height: 40px; margin-left: -60px; pointer-events: none; display: none; }
.stage.ctl-tilt .tiltbar { display: block; }
.tiltbar i { position: absolute; left: 0; right: 0; top: 18px; height: 5px; border-radius: 3px; background: var(--cream); box-shadow: 0 0 0 2px var(--ink); }
.tiltbar::after { content: ""; position: absolute; left: 50%; top: 10px; width: 3px; height: 20px; margin-left: -1px; background: var(--ink); }
/* the start lights: five red lamps in a black housing, lit one by one, out for the go */
/* a bike's safety check on the grid, before the lights: a sticker card, each line ticked in turn */
.safety { left: 50%; top: 16%; transform: translateX(-50%); padding: 12px 22px 14px; background: var(--cream); border: var(--sticker); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); text-align: left; min-width: min(78vw, 320px); }
.safety b { display: block; font: 400 clamp(1.4rem, 4vw, 2rem)/1.1 var(--display); color: var(--orange); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; margin-bottom: 6px; }
.safety ul { list-style: none; margin: 0; padding: 0; }
.safety li { font: 600 clamp(1rem, 3vw, 1.2rem)/1.5 var(--body, sans-serif); color: var(--ink); opacity: 0.35; transition: opacity .2s; }
.safety li::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.5em; vertical-align: -0.15em; border: 2px solid var(--ink); border-radius: 4px; background: #fff; }
.safety li.on { opacity: 1; }
.safety li.on::before { background: #2f9c9a; box-shadow: inset 0 0 0 3px #fff; }
.safety span { display: block; margin-top: 6px; font: 400 clamp(1.2rem, 3.6vw, 1.6rem)/1 var(--display); color: #2f9c9a; opacity: 0; transition: opacity .2s; }
.safety.done span { opacity: 1; }
.lights { left: 50%; top: 18%; transform: translateX(-50%); display: none; gap: 10px; padding: 10px 14px; background: #1a120c; border: var(--sticker); border-radius: 14px; box-shadow: var(--drop); }
.lights.on { display: flex; }
.lights i { width: 30px; height: 30px; border-radius: 50%; background: #3a2018; border: 3px solid var(--ink); }
.lights i.on { background: #ff3b2b; box-shadow: 0 0 14px 3px rgb(255 59 43 / 0.7); }
/* the track picker: one button per track, the one you are on pressed */
.trackpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.trackpick button { text-align: left; padding: 8px 10px; border: var(--sticker); border-radius: 12px; background: var(--cream); color: var(--ink); cursor: pointer; font: 500 0.78rem/1.25 var(--body); }
.trackpick button b { display: block; font: 400 1rem var(--num); margin-bottom: 2px; }
.trackpick button[aria-pressed="true"] { background: var(--mustard); box-shadow: 3px 3px 0 var(--ink); }
/* a quicker car closing from behind: the Ring's etiquette, keep right and let it pass on the left */
.behind { left: 14px; top: 104px; display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px 10px; background: var(--cream); border: var(--sticker); border-radius: 16px; box-shadow: var(--drop); opacity: 0; transition: opacity .2s; }
.behind.on { opacity: 1; }
.behind b { display: block; font: 400 1.05rem var(--num); color: var(--ink); }
.behind span { font: 500 0.8rem var(--body); color: var(--ink); }
.behind .blinker { width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 22px solid var(--mustard); filter: drop-shadow(1px 1px 0 var(--ink)); animation: blink 0.66s steps(1) infinite; }
@keyframes blink { 50% { border-left-color: rgb(242 182 49 / 0.25); } }
.hud.pro .behind { display: none; }
/* the driver's hands on the wheel, inset above the strip as on a broadcast */
.inset { position: absolute; left: 12px; bottom: 166px; width: 192px; height: 120px; border: var(--sticker); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); background: #3b2414; display: none; }
.inset.on { display: block; }
.pedals-hud { height: 100px; display: grid; grid-template-columns: 14px 10px 14px 10px; column-gap: 4px; align-items: end; }
.pedals-hud .bar { display: block; height: 100%; background: rgb(255 241 207 / 0.12); position: relative; border-radius: 4px; overflow: hidden; border: 2px solid var(--ink); }
.pedals-hud .bar b { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.pedals-hud .brk b { background: var(--red); }
.pedals-hud .gas b { background: var(--avocado); }
.pedals-hud .lbl.v { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.7rem; align-self: end; }
.timing { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.timing b { font: 400 2.9rem/1 var(--num); font-variant-numeric: tabular-nums; }
.timing .best { font: 500 0.8rem var(--body); color: var(--line); min-height: 1.2em; }
.timing .profile { width: 100%; max-width: 260px; height: 35px; margin-top: 2px; }
.charge { width: 100%; max-width: 260px; height: 6px; border-radius: 3px; background: rgb(255 241 207 / 0.15); overflow: hidden; margin-top: 3px; }
.charge div { height: 100%; width: 0; background: var(--teal); border-radius: 3px; }
.charge div.t2 { background: var(--orange); }
.charge div.boost { background: linear-gradient(90deg, var(--mustard), var(--red)); }

/* ---------- panels on the stage: pick a car, the result, pause ---------- */
.panel { position: absolute; background: var(--panel); border: var(--sticker); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; color: var(--fg); }
.pick .brand-line { margin: 0 0 2px; font: 400 0.85rem var(--num); letter-spacing: 0.04em; color: var(--fg-dim); }
.panel h2 { margin: 0; font: 400 1.8rem/1.1 var(--display); color: var(--orange); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.panel .row { display: flex; gap: 8px; flex-wrap: wrap; }
.pick { left: 12px; top: 12px; bottom: 12px; width: min(400px, calc(100% - 30px)); overflow-y: auto; }
.pick .primary { align-self: flex-start; }
.keys-line { margin: 0; font-size: 0.82rem; color: var(--fg-dim); }
.keymap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font: 500 0.85rem var(--body); }
.keymap span { display: flex; align-items: center; gap: 4px; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 5px; box-sizing: border-box; font: 400 0.85rem var(--num); color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 0 var(--ink); margin-right: 3px; }
kbd.wide { min-width: 52px; }
#gasMode, #lineMode { font: 400 0.95rem var(--num); }
#gasMode[aria-pressed="true"], #lineMode[aria-pressed="true"] { background: var(--avocado); color: var(--cream); border-color: var(--ink); }
#watch { font: 400 1rem var(--num); border: var(--sticker); box-shadow: 3px 3px 0 var(--ink); background: var(--mustard); color: var(--ink); }
.modes { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: var(--sticker); border-radius: 12px; overflow: hidden; box-shadow: 3px 3px 0 var(--ink); }
.modes button { border: 0; border-radius: 0; padding: 7px 4px; font: 400 0.95rem var(--num); background: var(--panel); color: var(--fg); }
.modes button + button { border-left: 2px solid var(--ink); }
.modes button[aria-pressed="true"] { background: var(--avocado); color: var(--cream); }
.mode-note { flex-shrink: 0; margin: 0; font-size: 0.82rem; color: var(--fg-dim); min-height: 2.4em; }
.cars { display: flex; flex-direction: column; gap: 8px; }
.carpick { text-align: left; display: grid; grid-template-columns: 16px 1fr; gap: 2px 10px; padding: 9px 12px; border-radius: 12px; font-weight: 500; }
.carpick[aria-pressed="true"] { border: var(--sticker); box-shadow: 3px 3px 0 var(--ink); background: color-mix(in srgb, var(--mustard) 18%, var(--panel)); }
.carpick .sw { width: 16px; height: 16px; border-radius: 50%; margin-top: 4px; grid-row: span 3; border: 2px solid var(--ink); }
.carpick b { font: 400 1.15rem var(--num); }
.carpick p { margin: 0; font-size: 0.82rem; color: var(--fg-dim); }
.bars { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 0.72rem; color: var(--fg-dim); align-items: center; margin-top: 4px; }
.bars i { display: block; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--orange); border-radius: 3px; }
.result, .paused { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 30px)); max-height: calc(100% - 30px); overflow-y: auto; }
.restime { margin: 0; font: 400 2.6rem var(--num); font-variant-numeric: tabular-nums; }
.restime small { font: 500 0.95rem var(--body); color: var(--fg-dim); display: block; }
.order { margin: 0; padding-left: 1.6em; font-size: 0.92rem; display: flex; flex-direction: column; gap: 2px; }
.order li.me { font-weight: 700; color: var(--link); }
.order li span { float: right; font-variant-numeric: tabular-nums; color: var(--fg-dim); }
.learn { margin-top: 12px; border-top: 1px solid rgba(255,241,207,0.15); padding-top: 10px; }
.learn h3 { margin: 0 0 6px; font: 400 1.2rem var(--display, inherit); }
.learn h4 { margin: 0 0 4px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-dim); }
.learnmap { width: 100%; height: auto; display: block; margin: 0 0 8px; }
.learncols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .learncols { grid-template-columns: 1fr; } }
.learnlist { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; display: flex; flex-direction: column; gap: 4px; }
.learnlist li { display: flex; gap: 6px; align-items: baseline; }
.learnlist li b { flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.72rem; color: #1b120b; }
.learnlist li.good b { background: #8ccf3f; } .learnlist li.bad b { background: #ec6f2b; }
.learnlist li span { margin-left: auto; padding-left: 6px; white-space: nowrap; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.learn .tip { margin: 8px 0; font-size: 0.9rem; }
.learn .rate { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.9rem; }
.learn .rate button { padding: 4px 12px; }
.learn .rate button[aria-pressed="true"] { background: var(--link); color: #1b120b; }
.learn .next { margin: 6px 0 0; font-size: 0.82rem; color: var(--fg-dim); }
.learn .learntools { margin: 6px 0 0; font-size: 0.78rem; color: var(--fg-dim); }
.learn .learntools a { color: var(--fg-dim); }

.corner-btn { position: absolute; top: 12px; font: 400 0.8rem var(--num); padding: 5px 10px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
#sound { right: 14px; top: auto; bottom: 166px; }
.corner-btn.full { right: 14px; top: auto; bottom: 204px; }

/* touch: steering on the left, a block of pedals on the right (drift over brake, a tall gas beside them), and small
   buttons for the camera, the line, the horn and a reset down the right-hand side */
.touch { position: absolute; inset: 0; pointer-events: none; }
.touch button { pointer-events: auto; touch-action: none; color: var(--ink); border: 3px solid var(--ink); }
.touch .lr, .touch .pedals { position: absolute; bottom: 166px; display: grid; gap: 8px; }
.touch .lr { left: 12px; grid-template-columns: 66px 66px; }
.touch .pedals { right: 12px; grid-template-columns: 66px 70px; grid-template-rows: 58px 58px 40px; }
.touch .lr button, .touch .pedals button { border-radius: 50%; font: 400 1rem var(--num); background: rgb(255 241 207 / 0.75); height: 66px; }
.touch .pedals button { height: auto; border-radius: 18px; }
.touch .drift { grid-column: 1; grid-row: 1; background: rgb(47 156 154 / 0.85) !important; color: var(--cream) !important; }
.touch .brake { grid-column: 1; grid-row: 2; background: rgb(216 64 43 / 0.85) !important; color: var(--cream) !important; }
.touch .rev { grid-column: 1 / 3; grid-row: 3; background: rgb(42 26 14 / 0.8) !important; color: var(--cream) !important; border-radius: 14px !important; }
.touch .gas { grid-column: 2; grid-row: 1 / 3; background: rgb(138 154 43 / 0.9) !important; color: var(--cream) !important; border-radius: 22px !important; }
.touch button.on { filter: brightness(1.25); transform: scale(0.96); }
.touch .extras { position: absolute; right: 10px; top: 92px; display: flex; flex-direction: column; gap: 6px; }
.touch .extras button { font: 400 0.8rem var(--num); padding: 4px 10px; border-radius: 10px; border-width: 2px; background: var(--cream); box-shadow: 2px 2px 0 var(--ink); }
.touch .extras button.on { background: var(--avocado); color: var(--cream); filter: none; transform: none; }
/* on a touch screen the corner buttons go top right, out of the thumbs' way */
.touch:not([hidden]) ~ #sound { top: 12px; bottom: auto; right: 10px; }
.touch:not([hidden]) ~ .corner-btn.full { top: 50px; bottom: auto; right: 10px; }
.stage.pro .touch .lr, .stage.pro .touch .pedals, .stage.pro .touch [data-act="horn"], .stage.pro .touch [data-act="reset"], .stage.pro .touch [data-act="drs"], .stage.pro .touch [data-act="pause"] { display: none; }
.stage.pro .touch:not([hidden]) ~ #sound, .stage.pro .touch:not([hidden]) ~ .corner-btn.full { display: none; }

@media (max-width: 900px) {
  .tele { grid-template-columns: 110px auto 120px 60px minmax(0, 1fr); gap: 12px; padding-inline: 10px; }
  .tele .map { width: 110px; height: 88px; } .tach { width: 130px; height: 54px; }
  .tele.has-drs { grid-template-columns: 110px auto 130px 80px 60px minmax(0, 1fr); } .drsbox .sil { width: 80px; height: 32px; }
  .inset { width: 160px; height: 100px; }
  .gs b { font-size: 2.6rem; } .timing b { font-size: 2.3rem; }
}
@media (max-width: 700px) {
  .prompt { top: 24%; font-size: 1.2rem; padding: 6px 14px 8px; max-width: 70%; }
  .prompt small { font-size: 0.8rem; }
  .prompt.big { top: 30%; }
  .coach { top: auto; bottom: 252px; left: 12px; min-width: 0; padding: 4px 10px 6px; } .coach b { font-size: 1.15rem; } .coach span { font-size: 0.8rem; }
  .toast { bottom: 260px; }
  .hud.pro .protag { font-size: 0.85rem; padding: 8px 12px 12px; } .hud.pro .protag b { font-size: 1.1rem; }
  .pos b { font-size: 2.1rem; }
  .tele { height: 100px; grid-template-columns: auto 90px minmax(0, 1fr); padding: 18px 10px 8px; gap: 10px; }
  .tele .map, .pedals-hud, .timing .profile { display: none; }
  .gs { column-gap: 12px; } .gs b { font-size: 2rem; } .tach { width: 96px; height: 40px; }
  .tele.has-drs { grid-template-columns: auto 72px auto minmax(0, 1fr); } .drsbox .sil { display: none; } .drs { font-size: 0.7rem; padding: 1px 7px 2px; }
  .tele.has-drs .gs b { font-size: 1.7rem; } .tele.has-drs .tach { width: 72px; height: 30px; } .tele.has-drs .timing b { font-size: 1.45rem; }
  .behind { top: 186px; padding: 4px 10px 5px 8px; gap: 8px; } .behind span { display: none; } .behind b { font-size: 0.9rem; } .behind .blinker { border-top-width: 9px; border-bottom-width: 9px; border-left-width: 14px; }
  .inset.on { display: none !important; }
  .timing b { font-size: 1.7rem; }
  .gaps { display: none; }
  .note { top: 78px; } .note canvas { width: 44px; height: 44px; } .note b { font-size: 1.1rem; }
  .corner { top: 138px; font-size: 1.3rem; }
  #sound { bottom: 112px; } .corner-btn.full { bottom: 150px; }
  .touch .lr, .touch .pedals { bottom: 112px; }
  .tele .lbl { white-space: nowrap; font-size: 0.58rem; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Bungee is wide: the pedal buttons' words get a size that fits */
  .touch .pedals button { font-size: 0.82rem; letter-spacing: 0; padding: 0 2px; }
  /* on a phone the picker is the whole screen, not a box over the race */
  .pick { position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; border: 0; box-shadow: none; z-index: 60; padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
  .trackpick { grid-template-columns: 1fr; } .trackpick button { display: flex; gap: 10px; align-items: baseline; } .trackpick button b { flex: none; }
}
/* after a race (and when paused) on a phone: tell it how the steering felt, and it adjusts */
.ctlpick.feel { margin-top: 14px; }
.ctlpick.feel .lbl { order: 0; margin-top: 4px; }

/* phones: the picker compact (names only, two to a row; the descriptions and stats are for bigger screens), and the
   corner buttons out of the way once the race is on (Pause on the touch controls stops it) */
@media (max-width: 700px) {
  .trackpick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .trackpick button { padding: 7px 9px; }
  .trackpick button b { font-size: 0.9rem; margin: 0; }
  .trackpick .tnote, .carpick .cnote, .carpick .bars, .carpick p { display: none; }
  .cars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .carpick { grid-template-columns: 14px 1fr; padding: 7px 9px; align-items: center; }
  .carpick .sw { width: 14px; height: 14px; margin: 0; grid-row: auto; }
  .carpick b { font-size: 0.95rem; }
  .stage.driving .corner-btn { display: none !important; }
  .trackpick button { min-width: 0; overflow: hidden; }
  .trackpick button b { white-space: normal; overflow-wrap: anywhere; line-height: 1.15; max-width: 100%; width: 100%; }
  .pick .keymap, .pick .keys-line { display: none; }
  .stage.driving .touch .extras button:not([data-act="pause"]) { display: none !important; }
  .stage.driving .touch .extras button[data-act="pause"] { opacity: 0.75; padding: 4px 9px; font-size: 0.7rem; }
}

/* ---------- the app: installed from the browser, opened from the home screen ---------- */
/* on the picker, the way to install it (Android's browsers offer it; on an iPhone it is Share, Add to Home Screen) */
.appline { margin: 0; font-size: 0.85rem; color: var(--fg-dim); }
.appline button { margin-right: 8px; }
.appline #install { font: 400 1rem var(--num); background: var(--teal); color: var(--cream); border: var(--sticker); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); padding: 8px 16px; }
.appline #install:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* the game is the whole window, in the browser as in the app: no page round it, clear of the notch and the rounded
   corners (until 0.48 the browser showed it in a box under a title, a paragraph and notes) */
html, body { height: 100%; overflow: hidden; }
body { background: var(--ink); padding: 0; }
main.wrap { padding: 0; margin: 0; max-width: none; display: block; }
.stage { position: fixed; top: env(safe-area-inset-top); right: env(safe-area-inset-right); bottom: 0; left: env(safe-area-inset-left); height: auto; min-height: 0; border: 0; border-radius: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the credits and the way back to the site, at the foot of the picker */
.pick .credits { margin: 6px 0 0; font-size: 0.72rem; color: var(--fg-dim); }
.pick .credits a { color: var(--link); }
/* opened as an app it is already full screen, and already installed */
@media (display-mode: fullscreen), (display-mode: standalone) {
  .corner-btn.full, .appline { display: none !important; }
}