/* VectorTrackz: page shell and overlay screens. Same family as Neon Asteroids, NeonCrawl and
   Rescue Chopper. */
:root {
  --bg: #04060d;
  --fg: #dfe9ff;
  --dim: #6f7ea6;
  /* Secondary text. --dim is 5:1 on the background, too little for 10 px labels over a lit
     scene; this is 8.7:1. --dim is kept for rules and other non-text detail. */
  --muted: #9aa9d0;
  --cyan: #3ee7ff;
  --magenta: #ff4fd8;
  --lime: #b8ff3c;
  --orange: #ffb23c;
  --red: #ff5a5a;
  --gold: #ffd700;
  --font: 'Orbitron', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  cursor: none;
  /* A touch screen: no double-tap zoom, pull to refresh, long-press menu or tap flash. */
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.in-menu { cursor: default; }

/* The WebGL2 scene, and the 2D HUD canvas above it. The pointer goes through the HUD. */
#scene, #hud {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: none;
}
#hud { z-index: 1; pointer-events: none; }

.hidden { display: none !important; }

/* ---- overlay screens ---- */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.screen {
  width: min(960px, 94vw);
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  text-align: center;
  padding: 20px 24px;
  pointer-events: auto;
  animation: fadein 0.4s ease-out;
}
.screen::-webkit-scrollbar { display: none; }

/* A screen over a live scene needs a darker ground than one over the title backdrop. */
#options, #bindings, #padtest, #changelog, #pause, #controls, #trackselect, #racesetup, #result, #initials, #records, #replays, #mytracks, #trackmenu, #ladder, #credits, #couch, #couchsetup, #pass {
  background: radial-gradient(ellipse at center, rgba(4, 6, 13, 0.88) 0%, rgba(4, 6, 13, 0.7) 60%, rgba(4, 6, 13, 0) 100%);
}

@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.logo {
  margin: 0;
  font-weight: 900;
  /* Twelve wide letters: about 11.4 em across, which must fit the 912 px inside a screen. */
  font-size: clamp(26px, 6.2vw, 76px);
  letter-spacing: 0.14em;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 18px var(--cyan),
    0 0 40px var(--cyan),
    0 0 80px rgba(62, 231, 255, 0.6);
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.65; }
  94% { opacity: 1; }
  97% { opacity: 0.8; }
  98% { opacity: 1; }
}

.subtitle {
  margin-top: 10px;
  font-weight: 500;
  font-size: clamp(10px, 1.4vw, 15px);
  letter-spacing: 0.32em;
  color: var(--magenta);
  text-shadow: 0 0 10px var(--magenta), 0 0 24px rgba(255, 79, 216, 0.5);
}

.prompt {
  margin: 18px 0 8px;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 22px);
  letter-spacing: 0.25em;
  color: var(--lime);
  text-shadow: 0 0 10px var(--lime), 0 0 30px rgba(184, 255, 60, 0.5);
}
.prompt:empty { display: none; }

h2 {
  margin: 0;
  font-size: clamp(36px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 20px var(--magenta), 0 0 48px var(--magenta);
}
h2.small { font-size: clamp(24px, 4vw, 44px); margin-bottom: 14px; }
h2.banner { font-size: clamp(26px, 5vw, 60px); text-shadow: 0 0 6px #fff, 0 0 20px var(--cyan), 0 0 48px var(--cyan); }
h2.good { text-shadow: 0 0 6px #fff, 0 0 20px var(--lime), 0 0 48px rgba(184, 255, 60, 0.7); }

/* ---- menus ---- */
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 22px auto 6px;
}
.menu.inline { flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

button {
  font: inherit;
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 16px);
  letter-spacing: 0.22em;
  color: var(--fg);
  background: rgba(4, 6, 13, 0.6);
  border: 1px solid rgba(62, 231, 255, 0.35);
  padding: 10px 22px;
  min-width: 260px;
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.12s, border-color 0.12s, color 0.12s;
}
.menu.inline button { min-width: 0; }
button:hover { border-color: rgba(62, 231, 255, 0.7); }
/* A menu item whose screen does not exist yet: dimmed, tagged, and out of the focus order. */
button:disabled { color: var(--dim); border-color: rgba(111, 126, 166, 0.3); cursor: default; }
button:disabled:hover { border-color: rgba(111, 126, 166, 0.3); }
.soon {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  vertical-align: middle;
  color: var(--orange);
  border: 1px solid rgba(255, 178, 60, 0.5);
}
/* The focused control. `.is-focus` mirrors DOM focus (src/ui/menu.ts) because :focus does not
   match until the window itself has focus, and the default control must look focused on first
   load. Not colour alone: a thick outline, and arrow marks either side of the label. */
button:focus, button:focus-visible, button.is-focus {
  color: #fff;
  border-color: var(--cyan);
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.55), inset 0 0 18px rgba(62, 231, 255, 0.16);
  text-shadow: 0 0 8px var(--cyan);
}
.menu button:focus::before, .menu button.is-focus::before { content: '▸ '; }
.menu button:focus::after, .menu button.is-focus::after { content: ' ◂'; }
.row:focus .row-label::before, .row.is-focus .row-label::before { content: '▸ '; }

/* For screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- title panels ---- */
.panels {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.panel {
  flex: 1 1 340px;
  max-width: 460px;
  padding: 14px 18px 12px;
  border: 1px solid rgba(62, 231, 255, 0.35);
  box-shadow: 0 0 18px rgba(62, 231, 255, 0.15), inset 0 0 24px rgba(62, 231, 255, 0.05);
  background: rgba(4, 6, 13, 0.82);
  backdrop-filter: blur(2px);
  text-align: left;
}
.panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}
.panel table { width: 100%; border-collapse: collapse; font-size: 12px; letter-spacing: 0.05em; }
.panel th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; padding-bottom: 6px; }
.panel td { padding: 3px 0; color: var(--fg); vertical-align: middle; }
.panel td:first-child { color: var(--muted); }

.tiny {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.tiny.warn { color: var(--orange); text-shadow: 0 0 8px rgba(255, 178, 60, 0.6); }
/* A line about keys and pad buttons says nothing to a thumb, and a phone has no room for it. */
body.touch .tiny.keys { display: none; }
/* A live line that may be empty: it keeps its height so the screen does not jump. */
.status { min-height: 14px; }

/* ---- track lists: TRACK SELECT and MY TRACKS ---- */
.screen.wide { width: min(1120px, 96vw); }
.track-list { width: 100%; margin: 0 auto; text-align: left; }
.track-heading {
  margin: 12px 0 6px;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}
.track-empty { margin: 0 0 6px; }
.track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
button.track-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  letter-spacing: 0.1em;
}
.track-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: block;
  background: rgba(4, 6, 13, 0.7);
  border: 1px solid rgba(111, 126, 166, 0.55);
}
svg.thumb { display: block; width: 100%; height: 100%; }
.thumb-start { fill: #fff; }
.track-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.track-title {
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.18em;
  color: var(--cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-by, .track-facts, .track-note { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.track-by:empty, .track-note:empty { display: none; }
.track-note { color: var(--fg); }
.track-note.gold { color: var(--gold); }
.track-note.warn { color: var(--orange); }
button.track-card:focus .track-title, button.track-card.is-focus .track-title { color: #fff; }
button.track-card:focus .track-title::before, button.track-card.is-focus .track-title::before { content: '▸ '; }
/* The picked track, on race setup and on the track's own menu: not a control. */
.track-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 6px;
  text-align: left;
}
.track-info .track-thumb { width: 84px; height: 84px; }
.track-info .track-text { flex: 0 1 auto; }

/* BACK under a list that may be longer than the screen: it stays in reach at the foot of it. */
.menu.sticky {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 8px 0 0;
  padding: 8px 0 4px;
  background: linear-gradient(to top, rgba(4, 6, 13, 0.96) 55%, rgba(4, 6, 13, 0));
}

/* After a delete: the track's name and UNDO, for as long as it can be brought back. */
.undo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px auto 0;
  padding: 6px 12px;
  width: fit-content;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--orange);
  border: 1px solid rgba(255, 178, 60, 0.5);
  background: rgba(4, 6, 13, 0.85);
}
.undo button { min-width: 0; padding: 6px 16px; }
.rename { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px auto 0; }
.rename input {
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(4, 6, 13, 0.85);
  border: 1px solid var(--cyan);
  padding: 9px 12px;
  width: min(420px, 60vw);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
.rename input:focus { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 14px rgba(62, 231, 255, 0.55); }
.rename button { min-width: 0; }

/* ---- race setup: the cars ---- */
.menu.cars {
  display: grid;
  /* Eight cars: four and four, on a phone too. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Every card as tall as the tallest of its row (the mark beside the chosen car's name is a little taller than the letters). */
  align-items: stretch;
  gap: 8px;
  width: min(820px, 100%);
  margin: 10px auto 4px;
}
/* The line about the car chosen. */
.car-character { margin: 0 0 8px; min-height: 13px; color: var(--fg); }
button.car-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 9px 8px;
}
.car-name { font-size: clamp(13px, 1.6vw, 18px); letter-spacing: 0.22em; color: var(--cyan); }
.car-note { font-size: 10px; font-weight: 500; letter-spacing: 0.15em; color: var(--muted); }
button.car-card:focus .car-name, button.car-card.is-focus .car-name { color: #fff; }
.menu button.car-card:focus::before, .menu button.car-card.is-focus::before,
.menu button.car-card:focus::after, .menu button.car-card.is-focus::after { content: none; }
/* The car chosen: a bar under it and a mark beside its name, as well as the colour. */
button.car-card[aria-pressed="true"] { border-color: var(--lime); box-shadow: inset 0 -4px 0 var(--lime); }
button.car-card[aria-pressed="true"] .car-name { color: var(--lime); }
button.car-card[aria-pressed="true"] .car-name::before { content: '● '; }
/* A row that only says something (the rule set): the shape of an option row, without its border. */
.row.static {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  font-weight: 700;
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: 0.22em;
  text-align: left;
}
.row.static .row-value { color: var(--fg); min-width: 0; }

/* ---- the result ---- */
.result-time {
  margin: 8px 0 6px;
  font-size: clamp(34px, 7vw, 72px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px #fff, 0 0 22px var(--cyan), 0 0 48px rgba(62, 231, 255, 0.6);
}
.result-lines { display: flex; flex-direction: column; gap: 4px; width: min(460px, 90vw); margin: 0 auto; }
.result-line { display: flex; justify-content: space-between; gap: 16px; font-size: clamp(12px, 1.5vw, 15px); letter-spacing: 0.18em; }
.result-label { color: var(--muted); }
.result-value { color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
.result-value.good { color: var(--lime); }
.result-value.bad { color: var(--red); }
.result-value.gold { color: var(--gold); }

/* ---- initials ---- */
.initials { display: flex; justify-content: center; gap: 14px; margin: 14px 0 8px; }
button.initial {
  min-width: 0;
  width: clamp(56px, 9vw, 96px);
  padding: 8px 0;
  font-size: clamp(34px, 6vw, 68px);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--fg);
}
button.initial:focus, button.initial.is-focus { outline: none; box-shadow: none; text-shadow: none; border-color: rgba(62, 231, 255, 0.35); color: var(--fg); }
button.initial.current, button.initial.current:focus, button.initial.current.is-focus {
  color: #fff;
  border-color: var(--cyan);
  outline: 2px solid #fff;
  outline-offset: 2px;
  text-shadow: 0 0 8px #fff, 0 0 24px var(--cyan);
  box-shadow: 0 0 18px rgba(62, 231, 255, 0.5), inset 0 0 18px rgba(62, 231, 255, 0.15);
}
#initials .menu button:focus::before, #initials .menu button.is-focus::before,
#initials .menu button:focus::after, #initials .menu button.is-focus::after { content: none; }

/* ---- records ---- */
table.records {
  margin: 10px auto 0;
  border-collapse: collapse;
  width: min(680px, 94vw);
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
table.records th { padding: 2px 8px 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.25em; color: var(--muted); text-align: left; }
table.records td { padding: 3px 8px; text-align: left; border-top: 1px solid rgba(62, 231, 255, 0.14); color: var(--fg); }
table.records td.rank { color: var(--muted); width: 2.5em; }
table.records td.name { color: var(--cyan); font-weight: 700; }
table.records td.num { color: var(--gold); font-weight: 700; }
table.records td.penalty { color: var(--red); }
table.records td.date { color: var(--muted); }
table.records tr.empty td { color: var(--muted); font-weight: 500; }

/* ---- options ---- */
.rows { display: flex; flex-direction: column; gap: 6px; width: min(620px, 92vw); margin: 0 auto; }
button.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 8px 16px;
  text-align: left;
  font-size: clamp(11px, 1.3vw, 14px);
}
/* Thirteen rows: on a 720-pixel-high window they are drawn a little closer, so that the buttons under them stay in view. */
@media (min-height: 641px) and (max-height: 780px) {
  button.row { padding-top: 6px; padding-bottom: 6px; }
}
.row-label { color: var(--muted); }
.row:focus .row-label, .row.is-focus .row-label { color: var(--fg); }
.row-note:empty { display: none; }
.row-note { margin-left: 12px; font-size: 10px; letter-spacing: 0.15em; color: var(--muted); font-weight: 500; }
.row-value { color: var(--orange); min-width: 9em; text-align: right; font-variant-numeric: tabular-nums; }
/* The arrows are always there, so it is plain where to click; they light when the row has focus. */
.row-value.range::before { content: '◄ '; color: var(--dim); }
.row-value.range::after { content: ' ►'; color: var(--dim); }
.row:focus .row-value.range::before, .row.is-focus .row-value.range::before,
.row:focus .row-value.range::after, .row.is-focus .row-value.range::after { color: var(--cyan); }

/* ---- controls: one player's key and pad-button slots ---- */
.bind-tabs { margin: 0 auto 10px; gap: 6px; }
.menu.bind-tabs button { padding: 6px 14px; font-size: 11px; }
/* The player showing: marked by a bar under the label as well as by colour. */
button.bind-tab[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); box-shadow: inset 0 -3px 0 var(--lime); }
.bind-grid { display: flex; flex-direction: column; gap: 4px; width: min(860px, 100%); margin: 0 auto; }
.bind-row { display: grid; grid-template-columns: minmax(130px, 1.2fr) 3fr 2fr; gap: 12px; align-items: center; }
.bind-row.no-keys { grid-template-columns: minmax(130px, 1.2fr) 2fr; width: min(520px, 100%); margin: 0 auto; }
.bind-label { text-align: left; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); }
.bind-head .bind-group, .bind-head .bind-label { font-size: 10px; letter-spacing: 0.25em; color: var(--muted); }
.bind-head .bind-group { justify-content: center; }
.bind-group { display: flex; gap: 6px; }
button.bind {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--orange);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button.bind.waiting { color: var(--lime); border-color: var(--lime); box-shadow: 0 0 14px rgba(184, 255, 60, 0.5); }
button.bind.conflict { color: var(--red); border-color: var(--red); }

/* ---- the controls card (CONTROLS on the pause menu; src/ui/controls.ts) ---- */
/* Over a scene that is still on show: a plate of its own, so the keys read whatever is behind. */
.controls-grid {
  display: flex; flex-direction: column; gap: 5px; width: min(760px, 100%); margin: 0 auto 12px; padding: 12px 18px;
  background: rgba(4, 6, 13, 0.9); border: 1px solid rgba(62, 231, 255, 0.3);
}
.controls-row { display: grid; grid-template-columns: minmax(130px, 1.2fr) 2fr 2fr; gap: 12px; align-items: baseline; text-align: left; }
.controls-label { font-size: 11px; letter-spacing: 0.15em; color: var(--muted); }
.controls-keys { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--orange); }
.controls-head span { font-size: 10px; letter-spacing: 0.25em; color: var(--muted); }

/* ---- controller test ---- */
.pad-panel { width: min(900px, 100%); margin: 0 auto; text-align: left; font-size: 11px; letter-spacing: 0.1em; }
.pad-status { color: var(--lime); font-weight: 700; letter-spacing: 0.15em; }
.pad-name { color: var(--fg); margin-top: 4px; overflow-wrap: anywhere; }
.pad-cap { color: var(--muted); font-size: 10px; letter-spacing: 0.25em; }
.pad-num { color: var(--orange); font-variant-numeric: tabular-nums; white-space: pre; }
.pad-live { display: grid; grid-template-columns: auto auto minmax(150px, 1fr) minmax(220px, 2fr); gap: 16px; align-items: start; margin: 12px 0; }
.pad-stickbox { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.pad-stick { position: relative; width: 110px; height: 110px; border: 1px solid rgba(62, 231, 255, 0.45); border-radius: 50%; background: rgba(4, 6, 13, 0.7); }
.pad-dead { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px dashed var(--dim); border-radius: 50%; }
.pad-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.pad-dot.raw { width: 8px; height: 8px; border: 1px solid var(--fg); }
.pad-dot.shaped { width: 12px; height: 12px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.pad-triggers { display: flex; flex-direction: column; gap: 8px; }
.pad-trigger { display: grid; grid-template-columns: 24px 1fr 36px; gap: 8px; align-items: center; }
.pad-bar { height: 10px; border: 1px solid rgba(62, 231, 255, 0.45); }
.pad-fill { height: 100%; width: 0; background: var(--orange); }
.pad-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 4px; }
.pad-button span:first-child { white-space: nowrap; }
.pad-button { display: flex; justify-content: space-between; gap: 4px; padding: 4px 6px; border: 1px solid rgba(62, 231, 255, 0.3); color: var(--muted); }
.pad-button.on, .pad-chip.on { color: #04060d; background: var(--lime); border-color: var(--lime); font-weight: 900; }
.pad-button.on .pad-num { color: #04060d; }
.pad-reads { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.pad-chip { padding: 3px 8px; border: 1px solid rgba(62, 231, 255, 0.3); color: var(--muted); font-variant-numeric: tabular-nums; white-space: pre; }
.pad-rumble { margin: 6px 0 4px; justify-content: flex-start; gap: 6px; }
.menu.pad-rumble button { padding: 6px 12px; font-size: 11px; }
.pad-log { min-height: 5.5em; margin: 4px 0 8px; padding: 6px 8px; border: 1px solid rgba(62, 231, 255, 0.25); color: var(--fg); font-variant-numeric: tabular-nums; white-space: pre-wrap; }
@media (max-width: 760px) { .pad-live { grid-template-columns: auto auto; } }

/* ---- changelog: the version buttons and the release cards ---- */
.foot { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
button.version-link {
  min-width: 0;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--muted);
  background: transparent;
  border: 1px dashed rgba(62, 231, 255, 0.4);
}
button.version-link:hover { color: var(--cyan); border-style: solid; }
.changelog-list {
  width: min(720px, 92vw);
  max-height: min(56vh, 560px);
  margin: 12px auto 0;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(62, 231, 255, 0.45) transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.changelog-card {
  padding: 10px 16px 12px;
  background: rgba(4, 6, 13, 0.82);
  border: 1px solid rgba(62, 231, 255, 0.25);
  border-left: 3px solid rgba(62, 231, 255, 0.55);
}
.changelog-card.current { border-color: rgba(184, 255, 60, 0.5); border-left: 4px solid var(--lime); box-shadow: 0 0 14px rgba(184, 255, 60, 0.15); }
.changelog-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.changelog-badge, .changelog-now { padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; border: 1px solid; }
.changelog-badge { color: var(--cyan); font-variant-numeric: tabular-nums; }
.changelog-card.current .changelog-badge, .changelog-now { color: var(--lime); }
.changelog-date { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.changelog-title { margin: 8px 0 6px; font-size: 14px; letter-spacing: 0.12em; color: #fff; }
/* Sentences, not labels: the system face reads better than Orbitron at this size. */
.changelog-notes { margin: 0; padding-left: 18px; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--fg); }
.changelog-notes li + li { margin-top: 3px; }

/* ---- sharing: the track card, the replay card, SHARE, IMPORT (src/ui/share.ts) ----
   One section of the overlay; while it is up the screen under it is put away. */
#overlay.has-modal > .screen:not(.share-layer) { display: none !important; }
body.modal-open { cursor: default; }
.share-layer { width: min(1060px, 96vw); background: radial-gradient(ellipse at center, rgba(4, 6, 13, 0.92) 0%, rgba(4, 6, 13, 0.78) 60%, rgba(4, 6, 13, 0) 100%); }
.share-lead { margin: 0 0 6px; letter-spacing: 0.32em; color: var(--magenta); text-shadow: 0 0 10px rgba(255, 79, 216, 0.6); }
.share-lead:empty { display: none; }
/* A message is a sentence, not a word: smaller than a banner, and in the colour of a warning. */
.share-layer h2.banner { font-size: clamp(17px, 2.6vw, 30px); letter-spacing: 0.14em; line-height: 1.3; text-shadow: 0 0 6px #fff, 0 0 20px var(--orange), 0 0 44px rgba(255, 178, 60, 0.6); }
.share-body { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(780px, 100%); margin: 0 auto; }
.share-card {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  border: 1px solid rgba(62, 231, 255, 0.4);
  background: rgba(4, 6, 13, 0.82);
  box-shadow: 0 0 22px rgba(62, 231, 255, 0.18), inset 0 0 28px rgba(62, 231, 255, 0.06);
}
.share-card .track-thumb { width: clamp(120px, 22vw, 190px); height: clamp(120px, 22vw, 190px); }
.share-card.small { width: auto; max-width: 100%; gap: 12px; padding: 0; border: 0; background: none; box-shadow: none; }
.share-card.small .track-thumb { width: 60px; height: 60px; }
.share-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.share-title {
  font-size: clamp(18px, 2.8vw, 32px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--cyan), 0 0 40px rgba(62, 231, 255, 0.6);
  overflow-wrap: anywhere;
}
.share-card.small .share-title { font-size: clamp(13px, 1.5vw, 17px); font-weight: 700; color: var(--cyan); text-shadow: none; }
.share-line { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; line-height: 1.45; color: var(--fg); overflow-wrap: anywhere; }
.share-line.muted { color: var(--muted); }
.share-line.good { color: var(--lime); text-shadow: 0 0 8px rgba(184, 255, 60, 0.45); }
.share-line.warn { color: var(--orange); }
.share-line.bad { color: var(--red); }
.share-line.gold { color: var(--gold); }
.share-line.quote { font-size: 12px; letter-spacing: 0.1em; }
.share-line.quote::before { content: '\201C'; color: var(--muted); }
.share-line.quote::after { content: '\201D'; color: var(--muted); }
.share-line.big {
  font-size: clamp(26px, 5vw, 50px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px #fff, 0 0 22px var(--cyan);
}
.share-box { width: 100%; text-align: left; }
.share-caption { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 500; letter-spacing: 0.25em; color: var(--muted); }
textarea.share-code {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  font: 12px/1.4 ui-monospace, Consolas, 'SF Mono', Menlo, monospace;
  color: var(--fg);
  background: rgba(4, 6, 13, 0.85);
  border: 1px solid rgba(62, 231, 255, 0.45);
  resize: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(62, 231, 255, 0.45) transparent;
  word-break: break-all;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
textarea.share-code:focus { border-color: var(--cyan); outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 14px rgba(62, 231, 255, 0.55); }
textarea.share-code::placeholder { color: var(--dim); letter-spacing: 0.08em; }
.share-status { margin-top: 8px; }
.share-status.good { color: var(--lime); text-shadow: 0 0 8px rgba(184, 255, 60, 0.5); }
.share-status.warn { color: var(--orange); }
.menu.share-menu { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.menu.share-menu button { min-width: 0; padding-left: 18px; padding-right: 18px; }
/* The action the dialog opens on: the one most people came for. Marked by its weight as well as its colour. */
.menu.share-menu button[data-default] { border-color: var(--lime); border-width: 2px; color: #fff; box-shadow: inset 0 -3px 0 var(--lime); }
.share-row { width: 100%; padding: 4px 10px; text-align: left; border-left: 2px solid rgba(62, 231, 255, 0.45); }
/* One line for a moment, over whatever is showing. */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 9;
  width: max-content;
  max-width: 92vw;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--lime);
  background: rgba(4, 6, 13, 0.94);
  border: 1px solid rgba(184, 255, 60, 0.6);
  box-shadow: 0 0 16px rgba(184, 255, 60, 0.25);
  pointer-events: none;
}
/* While a file is dragged over the window. */
.share-drop {
  position: fixed;
  inset: 12px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: 0.25em;
  color: #fff;
  text-shadow: 0 0 8px var(--cyan);
  background: rgba(4, 6, 13, 0.7);
  border: 2px dashed var(--cyan);
  pointer-events: none;
}

/* ---- on-screen pad: shown while driving once the screen has been touched ---- */
#touchpad {
  /* One round button's width. A phone on its side is about 360 px high. */
  --u: clamp(52px, 14vh, 76px);
  --gap: calc(var(--u) * 0.3);
  --edge-l: env(safe-area-inset-left, 0px);
  --edge-r: env(safe-area-inset-right, 0px);
  --edge-t: env(safe-area-inset-top, 0px);
  --edge-b: env(safe-area-inset-bottom, 0px);
  /* The pedals: GAS is the larger, and the outer of the two. */
  --gas-w: calc(var(--u) * 1.55);
  --gas-h: calc(var(--u) * 2.5);
  --brake-w: calc(var(--u) * 1.25);
  --brake-h: calc(var(--u) * 2.05);
  --steer: calc(var(--u) * 1.45);
  --top: calc(var(--u) * 0.85);
  /* How far in from its side of the screen the pedal cluster starts, and the steering. */
  --pedal-edge: calc(var(--edge-r) + var(--gap));
  --steer-edge: calc(var(--edge-l) + var(--gap) * 1.5);
  position: fixed;
  inset: 0;
  z-index: 5;
  touch-action: none;
}
/* The editor's stylesheet puts the pad away for as long as the editor is mounted. In a test drive
   the editor is mounted still, hidden behind the drive, and the pad is wanted. */
body.test-drive:has(> .vtz-editor) > #touchpad:not(.hidden) { display: block !important; }
/* At rest, bottom left; under a thumb the script moves it to where the thumb landed. Twice
   TOUCH_STICK_RADIUS (src/input/touch.ts) across. */
.touch-stick {
  position: absolute;
  left: calc(var(--edge-l) + 112px);
  top: calc(100% - var(--edge-b) - 104px);
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border: 1px solid rgba(62, 231, 255, 0.45);
  border-radius: 50%;
  background: rgba(4, 6, 13, 0.25);
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.2), inset 0 0 18px rgba(62, 231, 255, 0.08);
  opacity: 0.55;
  pointer-events: none;
}
/* Only the sideways axis is read: a line across the ring says so. */
.touch-stick::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  border-top: 1px dashed rgba(62, 231, 255, 0.45);
}
.touch-stick.on { opacity: 0.95; border-color: var(--cyan); }
.touch-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: rgba(62, 231, 255, 0.18);
  box-shadow: 0 0 12px rgba(62, 231, 255, 0.6);
}
.touch-stick.on .touch-knob { background: rgba(255, 255, 255, 0.92); border-color: #fff; }
.touch-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--u);
  height: var(--u);
  border: 2px solid rgba(62, 231, 255, 0.6);
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(4, 6, 13, 0.35);
  box-shadow: 0 0 12px rgba(62, 231, 255, 0.25), inset 0 0 14px rgba(62, 231, 255, 0.1);
  font-weight: 900;
  font-size: calc(var(--u) * 0.24);
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.touch-btn svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.touch-btn span { pointer-events: none; }

/* The two tall pedals, bottom right. */
.touch-pedal { flex-direction: column; gap: calc(var(--u) * 0.12); bottom: calc(var(--edge-b) + var(--gap)); border-radius: calc(var(--u) * 0.3); }
.touch-pedal svg { width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); }
.touch-pedal span { font-size: calc(var(--u) * 0.2); letter-spacing: 0.06em; }
.touch-gas {
  right: var(--pedal-edge);
  width: var(--gas-w);
  height: var(--gas-h);
  color: var(--lime);
  border-color: rgba(184, 255, 60, 0.65);
  box-shadow: 0 0 12px rgba(184, 255, 60, 0.3), inset 0 0 14px rgba(184, 255, 60, 0.12);
}
.touch-brake {
  right: calc(var(--pedal-edge) + var(--gas-w) + var(--gap));
  width: var(--brake-w);
  height: var(--brake-h);
  color: var(--orange);
  border-color: rgba(255, 178, 60, 0.65);
  box-shadow: 0 0 12px rgba(255, 178, 60, 0.3), inset 0 0 14px rgba(255, 178, 60, 0.12);
}
/* Auto-accelerate: one pedal, BRAKE, in the place and at the size of GAS. */
#touchpad.auto .touch-gas { display: none; }
#touchpad.auto .touch-brake { right: var(--pedal-edge); width: var(--gas-w); height: var(--gas-h); }

/* Shift arrows above the pedals, with manual transmission only. */
.touch-shift { display: none; bottom: calc(var(--edge-b) + var(--gap) * 2 + var(--gas-h)); }
#touchpad.manual .touch-shift { display: flex; }
.touch-shift-up { right: calc(var(--pedal-edge) + (var(--gas-w) - var(--u)) / 2); }
.touch-shift-down { right: calc(var(--pedal-edge) + var(--gas-w) + var(--gap) + (var(--brake-w) - var(--u)) / 2); }

/* Camera, reset and pause, top right; pause is the outermost. */
.touch-top {
  top: calc(var(--edge-t) + var(--gap));
  width: var(--top);
  height: var(--top);
  color: var(--fg);
  border-color: rgba(223, 233, 255, 0.5);
  box-shadow: none;
}
.touch-pause { right: calc(var(--edge-r) + var(--gap)); }
.touch-reset { right: calc(var(--edge-r) + var(--gap) * 2 + var(--top)); }
.touch-camera { right: calc(var(--edge-r) + var(--gap) * 3 + var(--top) * 2); }

/* Steer buttons in place of the stick; with tilt there is neither. */
.touch-steer { display: none; bottom: calc(var(--edge-b) + var(--gap) * 1.5); width: var(--steer); height: var(--steer); }
#touchpad.steer-buttons .touch-steer { display: flex; }
#touchpad.steer-buttons .touch-stick, #touchpad.steer-tilt .touch-stick { display: none; }
.touch-steer-left { left: var(--steer-edge); }
.touch-steer-right { left: calc(var(--steer-edge) + var(--steer) + var(--gap)); }

/* Left-handed: the pedals and the shift arrows go to the left, the steering to the right. */
#touchpad.swapped { --pedal-edge: calc(var(--edge-l) + var(--gap)); --steer-edge: calc(var(--edge-r) + var(--gap) * 1.5); }
#touchpad.swapped .touch-stick { left: calc(100% - var(--edge-r) - 112px); }
#touchpad.swapped .touch-gas, #touchpad.swapped.auto .touch-brake { right: auto; left: var(--pedal-edge); }
#touchpad.swapped .touch-brake { right: auto; left: calc(var(--pedal-edge) + var(--gas-w) + var(--gap)); }
#touchpad.swapped .touch-shift-up { right: auto; left: calc(var(--pedal-edge) + (var(--gas-w) - var(--u)) / 2); }
#touchpad.swapped .touch-shift-down { right: auto; left: calc(var(--pedal-edge) + var(--gas-w) + var(--gap) + (var(--brake-w) - var(--u)) / 2); }
#touchpad.swapped .touch-steer-right { left: auto; right: var(--steer-edge); }
#touchpad.swapped .touch-steer-left { left: auto; right: calc(var(--steer-edge) + var(--steer) + var(--gap)); }

/* Held: filled white with the mark cut out of it, so it does not rest on colour alone. */
#touchpad .touch-btn.on { opacity: 1; color: #04060d; border-color: #fff; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 22px #fff, 0 0 34px var(--cyan); }

/* ---- CRT dressing ---- */
#scanlines {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.13) 3px);
  mix-blend-mode: multiply;
}
body.no-scanlines #scanlines { display: none; }
#vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---- portrait: the game is landscape only, so a hand-held device held upright is asked to turn ---- */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--bg);
}
#rotate svg { width: 96px; height: 96px; fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--cyan)); }
/* Not a desktop window that happens to be tall: only where the main pointer is a finger. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* ---- rivals: the title's demo, race setup's modes, the ladder, the finishing order ---- */
/* The demo behind the title is a backdrop: the page dims it, and the menu sits on a darker ground still. */
body.title-demo #overlay { background: rgba(4, 6, 13, 0.55); }
body.title-demo #title { background: radial-gradient(ellipse at center, rgba(4, 6, 13, 0.82) 0%, rgba(4, 6, 13, 0.55) 55%, rgba(4, 6, 13, 0) 100%); }
/* A driver's colour is always beside a mark of it, never alone. */
.driver-mark {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.5em;
  background: var(--driver, var(--fg));
  box-shadow: 0 0 8px var(--driver, var(--fg));
  transform: skewX(-18deg);
}
.trophies { margin-left: 6px; font-size: 0.8em; letter-spacing: 0.08em; }
.trophy { color: var(--dim); }
.trophy.won { color: var(--driver, var(--gold)); text-shadow: 0 0 8px var(--driver, var(--gold)); }

/* Race setup: the mode, as tabs; then the two columns of rows. */
.menu.mode-tabs { margin: 6px auto 0; gap: 6px; }
.menu.mode-tabs button { padding: 6px 16px; font-size: 12px; }
.menu.mode-tabs button:focus::before, .menu.mode-tabs button.is-focus::before,
.menu.mode-tabs button:focus::after, .menu.mode-tabs button.is-focus::after { content: none; }
button.mode-tab[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); box-shadow: inset 0 -3px 0 var(--lime); }
button.mode-tab[aria-pressed="true"]::before { content: '● '; }
.setup-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; width: min(920px, 100%); margin: 0 auto; align-items: start; }
.setup-columns .rows { width: 100%; }
.setup-columns .row-value { min-width: 0; }
.rival-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 16px;
  text-align: left;
  border-left: 3px solid rgba(111, 126, 166, 0.5);
}
.rival-name { font-size: clamp(12px, 1.5vw, 16px); font-weight: 700; letter-spacing: 0.2em; color: var(--driver, var(--fg)); }
.rival-name::before {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.5em;
  background: var(--driver, var(--fg));
  box-shadow: 0 0 8px var(--driver, var(--fg));
  transform: skewX(-18deg);
}
.rival-facts, .rival-about { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.rival-about { color: var(--fg); }
.rival-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
button.rival-chip, button.couch-pick { min-width: 0; padding: 5px 2px; font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
button.rival-chip[aria-pressed="true"], button.couch-pick[aria-pressed="true"] { color: var(--driver, var(--fg)); border-color: var(--driver, var(--fg)); box-shadow: inset 0 -3px 0 var(--driver, var(--fg)); }
button.rival-chip[aria-pressed="true"]::before, button.couch-pick[aria-pressed="true"]::before { content: '● '; }

/* The ladder: six cards, three and three. */
.ladder-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px auto 4px; }
button.ladder-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-left: 4px solid var(--driver, var(--dim));
}
.ladder-head { display: flex; align-items: center; min-width: 0; font-size: clamp(13px, 1.6vw, 18px); letter-spacing: 0.18em; }
.ladder-rung { margin-right: 0.7em; color: var(--muted); font-variant-numeric: tabular-nums; }
.ladder-name { color: var(--driver, var(--fg)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladder-facts, .ladder-about, .ladder-state { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.ladder-about { color: var(--fg); min-height: 2.4em; }
.ladder-state { font-weight: 700; color: var(--cyan); }
button.ladder-card.beaten .ladder-state { color: var(--gold); }
button.ladder-card.locked { border-left-color: rgba(111, 126, 166, 0.4); }
button.ladder-card.locked .ladder-name, button.ladder-card.locked .ladder-about { color: var(--dim); }
button.ladder-card.locked .driver-mark { background: transparent; box-shadow: none; outline: 1px solid var(--dim); }
button.ladder-card.locked .ladder-state { color: var(--orange); }
.credits { display: flex; flex-direction: column; gap: 10px; margin: 16px auto; }
.credits-line { font-size: clamp(11px, 1.4vw, 15px); letter-spacing: 0.22em; color: var(--fg); }
.credits-line:first-child { font-size: clamp(18px, 3vw, 32px); font-weight: 900; color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px var(--cyan); }
.credits-line:last-child { color: var(--lime); }

/* The result of a race with rivals: the finishing order, the lines beside it, and the rival's word. */
.result-body { display: flex; justify-content: center; align-items: flex-start; gap: 10px 28px; flex-wrap: wrap; }
.result-body.field .result-lines { width: min(340px, 90vw); margin: 0; }
.result-body.field .result-line { font-size: clamp(11px, 1.2vw, 13px); }
/* Six rows more than a time trial has: the time is drawn smaller, so that the buttons stay on a 720-pixel screen. */
#result:has(.result-body.field) .result-time { font-size: clamp(30px, 5vw, 54px); margin: 4px 0; }
/* And the buttons go three across, as on a phone. */
#result:has(.result-body.field) .menu.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); justify-content: center; }
#result:has(.result-body.field) .menu.grid button { min-width: 0; }
table.standings { border-collapse: collapse; font-size: clamp(11px, 1.3vw, 14px); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
table.standings td { padding: 3px 8px; text-align: left; border-top: 1px solid rgba(62, 231, 255, 0.14); color: var(--fg); white-space: nowrap; }
table.standings tr:first-child td { border-top: none; }
table.standings td.place { color: var(--muted); }
table.standings td.who { font-weight: 700; }
table.standings td.car, table.standings td.lap { color: var(--muted); font-size: 0.85em; }
table.standings td.num { text-align: right; color: var(--gold); font-weight: 700; }
table.standings td.note { color: var(--red); font-size: 0.85em; }
table.standings td.note:empty, table.standings td.lap:empty { padding: 0; }
/* The player's own row: brighter, and marked at its edge as well. */
table.standings tr.self td { background: rgba(62, 231, 255, 0.1); }
table.standings tr.self td.place { color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
.result-quote { margin: 8px auto 0; font-size: clamp(11px, 1.4vw, 15px); letter-spacing: 0.14em; color: var(--fg); }
.quote-name { margin-right: 0.6em; font-weight: 700; color: var(--driver, var(--fg)); }

/* A phone on its side is about 360 px high: the panel goes, and the title menu becomes a grid. */
@media (max-height: 640px) {
  .panels { display: none; }
  .menu { margin-top: 14px; gap: 7px; }
  button { padding: 7px 18px; }
  .menu.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; }
  .menu.grid button { min-width: 0; padding: 9px 6px; }
  /* Five buttons under a result: three and two. */
  #result .menu.grid { grid-template-columns: repeat(3, minmax(0, 216px)); }
  #result .menu.grid button { font-size: 11px; letter-spacing: 0.14em; }
  /* The lists and the setup screens on a phone: closer, smaller, and still two cards across. */
  h2.small { margin-bottom: 6px; }
  .screen { padding: 8px 14px; }
  .track-heading { margin: 6px 0 4px; }
  .track-thumb { width: 52px; height: 52px; }
  .track-info .track-thumb { width: 56px; height: 56px; }
  button.track-card { padding: 5px 8px; gap: 8px; }
  .menu.cars { margin: 4px auto 2px; gap: 4px; }
  button.car-card { padding: 3px 4px; gap: 1px; }
  .car-name { font-size: 12px; letter-spacing: 0.14em; }
  .car-note { font-size: 9px; letter-spacing: 0.1em; }
  .car-character { margin: 0 0 4px; font-size: 10px; }
  #racesetup .track-info { margin-bottom: 2px; }
  #racesetup .track-info .track-thumb { width: 44px; height: 44px; }
  #racesetup h2.small { font-size: 22px; margin-bottom: 2px; }
  #racesetup .menu.inline { margin-top: 6px; }
  #racesetup button.row { padding-top: 3px; padding-bottom: 3px; }
  #racesetup .row.static { padding-top: 1px; padding-bottom: 1px; }
  #racesetup .status { min-height: 0; margin-top: 2px; }
  .rows { gap: 4px; }
  button.row { padding-top: 5px; padding-bottom: 5px; }
  .row.static { padding-top: 3px; padding-bottom: 3px; }
  .result-time { margin: 2px 0; font-size: clamp(28px, 6vw, 44px); }
  .result-lines { gap: 2px; }
  .initials { margin: 8px 0 4px; }
  button.initial { font-size: 30px; padding: 4px 0; }
  .prompt { margin: 6px 0 4px; }
  table.records { margin-top: 4px; font-size: 10px; }
  table.records td { padding: 1px 8px; }
  table.records th { padding-bottom: 2px; }
  .tiny { margin-top: 6px; }
  /* Race setup with its modes: the heading goes, the tabs take its place. */
  #racesetup h2.small { display: none; }
  .menu.mode-tabs { margin-top: 2px; gap: 4px; }
  .menu.mode-tabs button { padding: 3px 12px; font-size: 10px; }
  .setup-columns { gap: 4px 8px; }
  #racesetup .row-note { display: none; }
  #racesetup button.row, #racesetup .row.static { padding-left: 10px; padding-right: 10px; font-size: 10px; letter-spacing: 0.14em; }
  .rival-card { padding: 2px 10px; gap: 1px; }
  .rival-facts, .rival-about { font-size: 9px; letter-spacing: 0.1em; }
  button.rival-chip { padding: 3px 1px; font-size: 9px; }
  .ladder-list { gap: 5px; margin: 4px auto 2px; }
  button.ladder-card { padding: 4px 8px; gap: 1px; }
  .ladder-facts, .ladder-about, .ladder-state { font-size: 9px; letter-spacing: 0.1em; }
  .ladder-about { min-height: 0; }
  .credits { gap: 5px; margin: 6px auto; }
  /* A finishing order and the lines, side by side, with the buttons still on the screen. */
  .result-body { gap: 4px 14px; }
  .result-body.field { flex-wrap: nowrap; }
  .result-body.field .result-lines { width: 230px; flex: 0 0 auto; }
  table.standings { font-size: 10px; letter-spacing: 0.06em; }
  table.standings td { padding: 1px 4px; }
  .result-body.field .result-line { font-size: 10px; letter-spacing: 0.1em; gap: 8px; }
  .result-quote { margin-top: 3px; font-size: 10px; }
  #result:has(.result-body.field) h2.banner { font-size: 24px; margin-bottom: 2px; }
  #result:has(.result-body.field) .result-time { font-size: 26px; margin: 0; }
  #result:has(.result-body.field) .menu.grid { margin-top: 6px; }
  #result:has(.result-body.field) .menu.grid button { padding: 6px 6px; }
  /* The sharing dialogs on a phone: the map smaller, the lines closer, the buttons three across. */
  .share-body { gap: 4px; }
  .share-card { padding: 8px 12px; gap: 14px; }
  .share-card .track-thumb { width: 104px; height: 104px; }
  .share-card.small .track-thumb { width: 40px; height: 40px; }
  .share-text { gap: 3px; }
  .share-line { font-size: 10px; line-height: 1.3; }
  .share-line.big { font-size: 26px; }
  textarea.share-code { padding: 5px 8px; font-size: 11px; }
  .menu.share-menu { margin-top: 6px; gap: 6px; }
  .menu.share-menu button { padding: 9px 12px; font-size: 11px; letter-spacing: 0.16em; }
  .share-status { margin-top: 4px; }
}

/* The reduced-flashing option stops the logo's flicker (the renderer will drop its own flashes). */
body.reduced-flash .logo { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .logo, .screen { animation: none; }
  button { transition: none; }
}

/* ---- couch play: the lobby, the setup's columns, the pass screen, the shared result ---- */
.couch-fits { color: var(--fg); font-size: 12px; letter-spacing: 0.22em; }
.couch-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px auto 6px; }
.couch-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 138px;
  padding: 10px 10px 12px;
  text-align: left;
  border: 1px solid rgba(111, 126, 166, 0.45);
  border-top: 3px solid var(--driver, var(--dim));
  background: rgba(4, 6, 13, 0.6);
}
.couch-slot.joined { border-color: var(--driver); box-shadow: 0 0 14px -4px var(--driver), inset 0 0 22px -14px var(--driver); }
.couch-slot.closed { opacity: 0.45; }
.couch-name { font-size: clamp(12px, 1.5vw, 16px); font-weight: 700; letter-spacing: 0.2em; color: var(--driver, var(--fg)); }
.couch-device { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.couch-slot.joined .couch-device { color: var(--fg); font-weight: 700; }
.couch-slot:not(.joined):not(.closed) .couch-device { animation: couch-wait 1.6s ease-in-out infinite; }
@keyframes couch-wait { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
body.reduced-flash .couch-slot .couch-device { animation: none; }
.couch-buttons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
button.couch-chip { min-width: 0; padding: 5px 8px; font-size: 10px; letter-spacing: 0.12em; }
.couch-how { color: var(--muted); line-height: 1.7; white-space: pre-line; }
.couch-hint { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--driver, var(--fg)); }
.couch-count { margin-top: 8px; }
#couch .menu.inline { margin-top: 10px; }

.couch-columns { display: grid; grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr)); gap: 10px; width: min(1040px, 100%); margin: 10px auto 4px; }
.couch-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  text-align: left;
  border: 1px solid rgba(111, 126, 166, 0.45);
  border-top: 3px solid var(--driver);
  background: rgba(4, 6, 13, 0.6);
}
.couch-column.waiting { opacity: 0.4; }
.couch-column.ready { border-color: var(--driver); box-shadow: 0 0 14px -4px var(--driver); }
.couch-column .couch-facts, .couch-column .couch-keys { font-size: 10px; letter-spacing: 0.12em; color: var(--muted); }
.couch-column .couch-keys { margin-top: 2px; }
button.couch-row { padding: 6px 8px; font-size: clamp(10px, 1.1vw, 13px); }
button.couch-row .row-value { min-width: 0; }
/* The row a player's own cursor is on: marked in their colour, and by the arrows lighting. */
button.couch-row.at { border-color: var(--driver); box-shadow: inset 3px 0 0 var(--driver); }
button.couch-row.at .row-label { color: var(--fg); }
button.couch-row.at .row-value.range::before, button.couch-row.at .row-value.range::after { color: var(--driver); }
.couch-column.ready button.couch-row .row-value { color: var(--lime); }

.pass-who { margin: 8px 0 4px; font-size: clamp(26px, 5vw, 52px); font-weight: 900; letter-spacing: 0.14em; color: var(--driver, var(--fg)); text-shadow: 0 0 18px var(--driver, var(--fg)); }
#pass .result-standings { display: flex; justify-content: center; margin-top: 10px; }
table.standings tr.pending td { color: var(--muted); }
table.standings tr.pending td.num { color: var(--muted); font-weight: 500; }
/* A human's row of a couch result: marked in their own colour. */
table.standings tr.human td.place { color: var(--driver); box-shadow: inset 3px 0 0 var(--driver); }
table.standings tr.human td { background: rgba(223, 233, 255, 0.05); }
table.standings td.tag { color: var(--muted); font-size: 0.85em; }
table.standings td.tag:empty { padding: 0; }
#pause-note:empty { display: none; }
.pause-drop { display: flex; justify-content: center; margin: 8px 0 0; }
.pause-drop button { min-width: 260px; color: var(--orange); border-color: var(--orange); }

/* A phone on its side: four cards in a row are too narrow to read, so two and two; the columns stay side by side. */
@media (max-height: 480px), (max-width: 760px) {
  .couch-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 6px auto 2px; }
  .couch-slot { min-height: 0; padding: 5px 6px 6px; gap: 3px; }
  .couch-name { font-size: 11px; letter-spacing: 0.1em; }
  .couch-device { font-size: 9px; letter-spacing: 0.06em; }
  button.couch-chip { padding: 4px 5px; font-size: 9px; letter-spacing: 0.06em; }
  #couch h2, #couchsetup h2 { margin: 0 0 2px; }
  #couch .tiny, #couchsetup .tiny { margin-top: 4px; }
  .couch-columns { gap: 5px; margin: 4px auto 2px; }
  .couch-column { padding: 5px; gap: 3px; }
  button.couch-row { padding: 4px 6px; }
  #couchsetup .track-info { margin-bottom: 2px; }
  #couchsetup.picking .track-info, #couchsetup.picking #couchsetup-how { display: none; }
  #couch .couch-how { line-height: 1.5; }
  #couch .menu.inline, #couchsetup .menu.inline { margin-top: 6px; }
}

/* ---- the handling lab (?sandbox=drive&tune; src/sandbox/tune-panel.ts) ----
   A column down the right of the drive scene, worked with the pointer while the keys drive. */
body.tuning { cursor: default; --tune-w: min(340px, 46vw); }
/* While the panel is up the on-screen pad is what is left of the screen: its pedals and its top
   buttons stand to the left of the panel, and its stick has the left half of that. */
body.tune-open #touchpad { right: var(--tune-w); }
.tune {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--tune-w);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(4, 6, 13, 0.88);
  border-left: 1px solid var(--cyan);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  color: var(--fg);
}
.tune h2 { margin: 0; flex: 1; font: 700 11px var(--font); letter-spacing: 1px; color: var(--cyan); text-shadow: none; }
.tune-head, .tune-buttons, .tune-picks { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tune button, .tune-tab {
  font: 700 10px var(--font);
  letter-spacing: 0.06em;
  padding: 4px 7px;
  min-width: 0;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--dim);
  cursor: pointer;
}
/* Never focused for long (a control gives the focus up once used): no menu-style focus ring. */
.tune button:focus, .tune-tab:focus { outline: none; box-shadow: none; }
.tune button:hover, .tune-tab:hover { border-color: var(--cyan); color: var(--cyan); }
.tune .tune-ab, .tune .tune-ab:focus { border-color: var(--lime); color: var(--lime); min-width: 84px; }
.tune .tune-ab.tune-off, .tune .tune-ab.tune-off:focus { border-color: var(--orange); color: var(--orange); }
/* The toggle: a tab on the panel's left edge, and on the screen's right edge when the panel is
   hidden. Half way up, clear of the on-screen pad's pedals below and its buttons above, and big
   enough for a thumb. */
.tune-tab {
  position: fixed;
  top: 40%;
  right: 0;
  z-index: 7;
  min-height: 44px;
  padding: 6px 9px;
  background: rgba(4, 6, 13, 0.92);
  border-color: var(--cyan);
  border-right: none;
  color: var(--cyan);
  touch-action: manipulation;
}
body.tune-open .tune-tab { right: var(--tune-w); }
.tune-read { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; font-variant-numeric: tabular-nums; }
.tune-cell { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.tune-cell:nth-last-child(-n+2) { grid-column: 1 / -1; }
.tune-key { color: var(--muted); }
.tune-pick { display: flex; flex-direction: column; gap: 2px; flex: 1; color: var(--muted); font-size: 9px; }
.tune select, .tune input[type="number"], .tune textarea {
  font: 11px Consolas, 'Courier New', monospace;
  color: var(--fg);
  background: #0a0f1e;
  border: 1px solid var(--dim);
}
.tune-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.tune-group { border-top: 1px solid var(--dim); padding: 3px 0; }
.tune-group summary { font: 700 10px var(--font); letter-spacing: 1px; color: var(--cyan); cursor: pointer; padding: 3px 0; }
.tune-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px 58px 16px; gap: 5px; align-items: center; padding: 1px 0; }
.tune-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A number of this car alone, not of every car. */
.tune-own::before { content: '◆ '; color: var(--magenta); }
.tune-row input[type="range"] { width: 100%; margin: 0; accent-color: var(--cyan); }
.tune-row input[type="number"] { width: 100%; padding: 1px 2px; -webkit-user-select: text; user-select: text; }
.tune-row .tune-undo { visibility: hidden; width: 16px; padding: 0; border-color: transparent; color: var(--orange); font-size: 13px; }
.tune-changed .tune-name { color: var(--lime); }
.tune-changed .tune-undo { visibility: visible; }
/* The shipped values are in force: the tune's own are shown dimmed. */
.tune-shipped .tune-body { opacity: 0.55; }
.tune textarea { width: 100%; resize: vertical; -webkit-user-select: text; user-select: text; }
.tune-status { min-height: 13px; color: var(--orange); font-size: 10px; }

/* =============================================================================================
   TOON (issue #69): the menus and screens in the cel-shaded look, under `look-toon` on the body
   (src/app/app.ts sets it from the LOOK option, or the address's ?look=). Bright sky and white
   panels edged in ink, yellow and red highlights, slanted buttons, heavy italic headings, hard
   drop shadows, no scanlines. Everything above is NEON, and stays as it is.

   On the light panels the text is ink, so the screens' colours are redefined darker, for contrast
   on white and sky; the layers over the game (the touch pad, the replay bar, the editor) sit on
   dark ink panels of their own and keep the bright ones.
   No font files: the type is the system's heaviest sans, Segoe UI Black, Avenir Next Heavy or
   Roboto Black, and any other bold sans where those are missing.
   ============================================================================================= */
body.look-toon {
  --font: 'Segoe UI', 'Avenir Next', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ink: #12141c;
  --paper: #ffffff;
  --sky: #5ab8ff;
  --sky-lite: #cdeaff;
  --yellow: #ffd21f;
  --toon-red: #ee3324;
  --toon-green: #4fd23a;
  --night: #1d2233;
  /* A hard shadow, and the outline that holds white or coloured type over anything. */
  --hard: 4px 4px 0 var(--ink);
  --outline: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
  --outline-drop: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 5px 5px 0 var(--ink);
  background: linear-gradient(#3d9cf5, #9fd6ff 60%, #e3f3ff);
}
/* The screens' own colours, for ink on light: the cues keep their hue, darkened to read on white. */
body.look-toon #overlay {
  --fg: var(--ink);
  --muted: #2e3d5c;
  --dim: #6b7894;
  --cyan: #0b5cbd;
  --magenta: #b8128f;
  --lime: #1f7a0c;
  --orange: #a84400;
  --red: #c41d12;
  --gold: #855e00;
  color: var(--ink);
}
body.look-toon #scanlines { display: none; }
/* No CRT dressing in TOON: no scanlines, no vignette (the renderer draws its own haze). */
body.look-toon #vignette { display: none; }
/* No glow anywhere on the screens: the TOON look has hard edges. */
body.look-toon #overlay * { text-shadow: none; }

/* ---- the screens: a sky panel edged in ink with a hard shadow ---- */
body.look-toon #overlay > .screen {
  background: var(--sky-lite);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
/* The title has no panel of its own: the logo and the menu stand on the demo, as in the mock. */
body.look-toon #overlay > #title { background: none; border: 0; box-shadow: none; }
body.look-toon.title-demo #overlay { background: none; }

/* ---- type ---- */
body.look-toon .logo {
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.01em;
  font-size: clamp(28px, 6.4vw, 80px);
  color: var(--yellow);
  -webkit-text-stroke: 1px var(--ink);
  animation: none;
}
body.look-toon #overlay .logo { text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 7px 7px 0 var(--ink); }
body.look-toon .logo .logo-b { color: var(--toon-red); }
body.look-toon .subtitle {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 20px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: var(--night);
  border: 3px solid var(--ink);
  box-shadow: var(--hard);
  transform: skewX(-14deg);
}
body.look-toon h2 {
  display: inline-block;
  padding: 0.08em 0.7em 0.12em;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--toon-red);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transform: skewX(-12deg);
}
body.look-toon #overlay h2 { text-shadow: var(--outline); }
body.look-toon #overlay h2.banner, body.look-toon #overlay h2.good { color: var(--ink); background: var(--yellow); text-shadow: none; }
body.look-toon #overlay h2.good { background: var(--toon-green); }
body.look-toon .prompt { font-style: italic; font-weight: 900; letter-spacing: 0.1em; color: var(--ink); }
body.look-toon .tiny { font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
body.look-toon .tiny.warn { color: var(--orange); }
body.look-toon #title .tiny {
  display: inline-block;
  padding: 3px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--ink);
}
body.look-toon #title .panel .tiny { display: block; padding: 0; background: none; border: 0; }
body.look-toon #title .tiny:empty { display: none; }

/* ---- buttons: white, slanted, inked, with a hard shadow; yellow and lifted when focused ----
   The slanted panel is the button's ::after, behind its label: the button's own box stays
   upright, because a touch on a transformed button is not always turned into a click (the
   browser's tap lands on the box behind it). Each state sets the panel's variables. */
body.look-toon #overlay button {
  --face: var(--paper);
  --edge: var(--ink);
  --edge-style: solid;
  --bw: 3px;
  --drop: 4px;
  --bar: 0 0 0 transparent;
  --lean: -10deg;
  position: relative;
  isolation: isolate;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: var(--bw) solid transparent;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
body.look-toon #overlay button::after {
  content: '';
  position: absolute;
  inset: calc(0px - var(--bw));
  z-index: -1;
  background: var(--face);
  border: var(--bw) var(--edge-style) var(--edge);
  box-shadow: var(--drop) var(--drop) 0 var(--ink), var(--bar);
  outline-offset: 3px;
  transform: skewX(var(--lean));
  pointer-events: none;
  transition: box-shadow 0.08s, background-color 0.08s;
}
body.look-toon #overlay button:hover { --face: #fff6c2; border-color: transparent; }
body.look-toon #overlay button:disabled,
body.look-toon #overlay button:disabled:hover {
  --face: #dfe5ee;
  --edge: #6b7894;
  --edge-style: dashed;
  --drop: 0px;
  color: #4f5a72;
  border-color: transparent;
}
/* Focus: yellow, with a heavier shadow, an ink outline and the arrow marks: never colour alone. */
body.look-toon #overlay button:focus,
body.look-toon #overlay button:focus-visible,
body.look-toon #overlay button.is-focus {
  --face: var(--yellow);
  --drop: 7px;
  color: var(--ink);
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
body.look-toon #overlay button:focus::after,
body.look-toon #overlay button.is-focus::after { outline: 2px solid var(--ink); }
body.look-toon #overlay button:active { --drop: 1px; }
body.look-toon #title .menu button { font-size: clamp(14px, 1.8vw, 20px); padding-top: 6px; padding-bottom: 6px; }
body.look-toon #title .menu { gap: 9px; margin-top: 12px; }
body.look-toon #overlay > #title { padding-top: 6px; padding-bottom: 6px; }
body.look-toon .panel td { padding: 1px 0; }
body.look-toon #title .panels { margin-top: 14px; }
body.look-toon #title .panel { padding: 8px 16px 8px; }

/* A choice that is on (a mode, a car, a tab, a rival): sky, with an ink bar under it and its mark. */
body.look-toon #overlay button.mode-tab[aria-pressed="true"],
body.look-toon #overlay button.car-card[aria-pressed="true"],
body.look-toon #overlay button.bind-tab[aria-pressed="true"],
body.look-toon #overlay button.rival-chip[aria-pressed="true"],
body.look-toon #overlay button.couch-pick[aria-pressed="true"] {
  --face: var(--sky);
  --bar: inset 0 -5px 0 var(--ink);
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
}
body.look-toon #overlay button.mode-tab[aria-pressed="true"]:focus, body.look-toon #overlay button.mode-tab[aria-pressed="true"].is-focus,
body.look-toon #overlay button.car-card[aria-pressed="true"]:focus, body.look-toon #overlay button.car-card[aria-pressed="true"].is-focus,
body.look-toon #overlay button.bind-tab[aria-pressed="true"]:focus, body.look-toon #overlay button.bind-tab[aria-pressed="true"].is-focus,
body.look-toon #overlay button.rival-chip[aria-pressed="true"]:focus, body.look-toon #overlay button.rival-chip[aria-pressed="true"].is-focus,
body.look-toon #overlay button.couch-pick[aria-pressed="true"]:focus, body.look-toon #overlay button.couch-pick[aria-pressed="true"].is-focus { --face: var(--yellow); }
body.look-toon button.car-card[aria-pressed="true"] .car-name { color: var(--ink); }
body.look-toon .car-name { color: var(--cyan); font-style: italic; }
body.look-toon button.car-card:focus .car-name, body.look-toon button.car-card.is-focus .car-name { color: var(--ink); }
body.look-toon .car-note, body.look-toon .car-character { font-weight: 700; }
body.look-toon #overlay .menu.share-menu button[data-default] { --face: #e2f7d6; --bar: inset 0 -5px 0 #1f7a0c; border-color: transparent; box-shadow: none; }
body.look-toon #overlay .menu.share-menu button[data-default]:focus, body.look-toon #overlay .menu.share-menu button[data-default].is-focus { --face: var(--yellow); }
/* Inside a focused button the marks are the label's own: the panel is the ::after. */
body.look-toon #overlay .menu button:focus::after, body.look-toon #overlay .menu button.is-focus::after { content: ''; }

/* ---- option rows ---- */
body.look-toon #overlay button.row { --lean: -6deg; --bw: 2px; --drop: 3px; padding-top: 6px; padding-bottom: 6px; }
body.look-toon #overlay button.row:focus, body.look-toon #overlay button.row.is-focus { --drop: 6px; }
@media (min-height: 641px) and (max-height: 780px) {
  body.look-toon #overlay button.row { padding-top: 4px; padding-bottom: 4px; }
  body.look-toon #overlay .rows { gap: 5px; }
}
body.look-toon .row-label { color: var(--ink); }
body.look-toon .row-note { color: var(--muted); font-style: italic; }
body.look-toon #overlay .row-value { color: #b01a0f; }
body.look-toon .row-value.range::before, body.look-toon .row-value.range::after { color: #6b7894; }
body.look-toon .row:focus .row-value.range::before, body.look-toon .row.is-focus .row-value.range::before,
body.look-toon .row:focus .row-value.range::after, body.look-toon .row.is-focus .row-value.range::after { color: var(--ink); }
body.look-toon #overlay button.row:disabled .row-value, body.look-toon #overlay button.row:disabled .row-label { color: #4f5a72; }
body.look-toon #overlay .row.static { color: var(--ink); font-style: italic; }
body.look-toon #overlay .row.static .row-value { color: var(--ink); }

/* ---- panels and cards: white, inked, with hard shadows ---- */
body.look-toon .panel,
body.look-toon .controls-grid,
body.look-toon .changelog-card,
body.look-toon .share-card,
body.look-toon .replay-row,
body.look-toon .couch-slot,
body.look-toon .couch-column,
body.look-toon .undo {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--hard);
  backdrop-filter: none;
}
body.look-toon .share-card.small { background: none; border: 0; box-shadow: none; }
body.look-toon .panel h3, body.look-toon .track-heading {
  display: inline-block;
  padding: 2px 12px;
  font-style: italic;
  font-weight: 900;
  color: var(--paper);
  background: var(--night);
  transform: skewX(-12deg);
}
body.look-toon .panel h3 { color: var(--yellow); }
body.look-toon .panel td, body.look-toon .panel th { color: var(--ink); }
body.look-toon .panel td:first-child, body.look-toon .panel th { color: var(--muted); }
/* The maps of the tracks keep their dark ground: the theme tints are drawn for it. */
body.look-toon .track-thumb { background: var(--night); border: 2px solid var(--ink); }
/* Cards hold a map or several lines: they stand upright. */
body.look-toon #overlay button.track-card, body.look-toon #overlay button.car-card, body.look-toon #overlay button.ladder-card { --lean: 0deg; }
body.look-toon .track-title { font-style: italic; }
body.look-toon button.track-card:focus .track-title, body.look-toon button.track-card.is-focus .track-title { color: var(--ink); }
body.look-toon .track-by, body.look-toon .track-facts, body.look-toon .track-note,
body.look-toon .rival-facts, body.look-toon .rival-about, body.look-toon .ladder-facts, body.look-toon .ladder-about, body.look-toon .ladder-state { font-weight: 700; }
body.look-toon .changelog-card.current { border-left: 10px solid var(--toon-green); }
body.look-toon .changelog-title { color: var(--ink); font-style: italic; }
body.look-toon .changelog-badge, body.look-toon .changelog-now { border: 2px solid var(--ink); }
body.look-toon .menu.sticky { background: linear-gradient(to top, var(--sky-lite) 60%, rgba(205, 234, 255, 0)); }
body.look-toon .rename input, body.look-toon textarea.share-code {
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: var(--hard);
}
body.look-toon .rename input:focus, body.look-toon textarea.share-code:focus { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 6px 6px 0 var(--ink); }
body.look-toon .soon { color: var(--orange); border-color: var(--ink); }

/* ---- the result ---- */
body.look-toon .result-time { font-style: italic; color: var(--paper); letter-spacing: 0.02em; }
body.look-toon #overlay .result-time { text-shadow: var(--outline-drop); }
body.look-toon .result-line { font-weight: 700; }
body.look-toon table.records td, body.look-toon table.standings td { border-top: 2px solid rgba(18, 20, 28, 0.18); }
body.look-toon table.standings tr.self td { background: rgba(255, 210, 31, 0.55); }
body.look-toon table.standings tr.self td.place { color: var(--ink); box-shadow: inset 5px 0 0 var(--ink); }
body.look-toon table.standings tr.human td { background: rgba(255, 255, 255, 0.7); }
body.look-toon table.standings tr.human td.place { color: var(--ink); box-shadow: inset 6px 0 0 var(--driver); }
body.look-toon table.records td.name { color: var(--ink); }

/* ---- the drivers' colours: the bright ones on a mark edged in ink, the name in ink beside it ---- */
body.look-toon .driver-mark, body.look-toon .rival-name::before { border: 2px solid var(--ink); box-shadow: none; width: 0.85em; height: 0.85em; }
body.look-toon .rival-name, body.look-toon .ladder-name, body.look-toon .quote-name,
body.look-toon .couch-name, body.look-toon .couch-hint { color: var(--ink); font-style: italic; }
body.look-toon .trophy.won { color: var(--driver, var(--yellow)); }
body.look-toon #overlay .trophy.won { text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink); }
body.look-toon #overlay button.ladder-card { border-left: 10px solid transparent; }
body.look-toon #overlay button.ladder-card::after { left: -10px; border-left: 10px solid var(--driver, var(--dim)); }
body.look-toon #overlay button.ladder-card.locked::after { border-left-color: #b3bccd; }
body.look-toon .couch-slot, body.look-toon .couch-column { border-top: 10px solid var(--driver, var(--dim)); }
body.look-toon .couch-slot.joined, body.look-toon .couch-column.ready { border-color: var(--ink); border-top-color: var(--driver); box-shadow: 6px 6px 0 var(--ink); }
body.look-toon #overlay button.couch-row.at { --bar: inset 8px 0 0 var(--driver); }
body.look-toon .pass-who { font-style: italic; color: var(--driver, var(--paper)); }
body.look-toon #overlay .pass-who { text-shadow: var(--outline-drop); }
body.look-toon .credits-line:first-child { font-style: italic; color: var(--ink); }

/* ---- controls and the controller test ---- */
body.look-toon .pad-stick, body.look-toon .pad-bar, body.look-toon .pad-button, body.look-toon .pad-chip, body.look-toon .pad-log { border: 2px solid var(--ink); background: var(--paper); box-shadow: none; }
body.look-toon .pad-dot.shaped { background: var(--sky); border: 2px solid var(--ink); box-shadow: none; }
body.look-toon .pad-button.on, body.look-toon .pad-chip.on { color: var(--paper); background: var(--ink); }
body.look-toon .pad-button.on .pad-num { color: var(--paper); }
body.look-toon #overlay button.bind.waiting { --face: #e2f7d6; --bar: inset 0 -4px 0 #1f7a0c; }
body.look-toon #overlay button.bind.conflict { --edge-style: dashed; --edge: var(--red); color: var(--red); }

/* ---- the version buttons ---- */
body.look-toon #overlay button.version-link { --face: rgba(255, 255, 255, 0.9); --edge-style: dashed; --bw: 2px; --drop: 0px; font-weight: 700; }
body.look-toon #overlay button.version-link:focus, body.look-toon #overlay button.version-link.is-focus { --face: var(--yellow); --edge-style: solid; --drop: 4px; }

/* ---- the sharing toasts ---- */
body.look-toon .share-toast { font-style: italic; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); box-shadow: var(--hard); }
body.look-toon .share-drop { color: var(--ink); background: rgba(205, 234, 255, 0.8); border: 4px dashed var(--ink); text-shadow: none; }

/* ---- the on-screen pad: white discs edged in ink; the pedals green and orange; held, inked solid ---- */
body.look-toon .touch-btn {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-style: italic;
  opacity: 0.85;
}
body.look-toon .touch-gas { color: var(--ink); background: rgba(79, 210, 58, 0.88); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
body.look-toon .touch-brake { color: var(--ink); background: rgba(255, 154, 26, 0.88); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
body.look-toon .touch-top { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
body.look-toon #touchpad .touch-btn.on { color: var(--paper); background: var(--ink); border-color: var(--ink); box-shadow: none; }
body.look-toon .touch-stick { border: 3px solid var(--ink); background: rgba(255, 255, 255, 0.3); box-shadow: none; }
body.look-toon .touch-stick::before { border-top: 2px dashed var(--ink); }
body.look-toon .touch-knob { border: 3px solid var(--ink); background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
body.look-toon .touch-stick.on .touch-knob { background: var(--paper); border-color: var(--ink); }

/* ---- turn your device ---- */
body.look-toon #rotate { background: var(--sky-lite); color: var(--ink); }
body.look-toon #rotate svg { stroke: var(--ink); filter: none; }

/* ---- TOON: over a live scene (the result, the pause menu, the pass screen), the panel lets the scene through ---- */
body.look-toon #overlay > #result, body.look-toon #overlay > #pause, body.look-toon #overlay > #controls, body.look-toon #overlay > #pass {
  width: min(720px, 94vw);
  background: rgba(205, 234, 255, 0.86);
}
body.look-toon #overlay > #result:has(.result-body.field) { width: min(1000px, 96vw); }
/* The panel's own border and shadow stay in the window. */
body.look-toon #overlay > .screen { max-height: calc(100vh - 14px); }
/* Heavy italic is set tight: the wide tracking was for Orbitron. */
body.look-toon .car-name, body.look-toon .track-title, body.look-toon .ladder-head, body.look-toon .rival-name,
body.look-toon .couch-name, body.look-toon .credits-line, body.look-toon .share-title { letter-spacing: 0.04em; font-weight: 900; }
body.look-toon .row.static, body.look-toon .result-line { letter-spacing: 0.08em; }

/* ---- a phone on its side ---- */
@media (max-height: 640px) {
  body.look-toon #overlay > .screen { border-width: 2px; box-shadow: 5px 5px 0 var(--ink); }
  body.look-toon #overlay > #title { border: 0; box-shadow: none; }
  body.look-toon #overlay button { --bw: 2px; --drop: 3px; }
  body.look-toon #overlay button:focus, body.look-toon #overlay button.is-focus { --drop: 5px; }
  body.look-toon h2 { border-width: 2px; box-shadow: 4px 4px 0 var(--ink); }
  body.look-toon .subtitle { margin-top: 6px; padding: 3px 14px; }
  /* The heading's panel and the time's outline take room: drawn smaller, so the buttons stay on a phone. */
  body.look-toon #overlay h2 { padding: 0 0.5em 0.04em; }
  body.look-toon #overlay h2.small { font-size: 21px; margin-bottom: 6px; }
  body.look-toon #overlay h2.banner { font-size: 24px; margin-bottom: 2px; }
  body.look-toon #overlay .result-time { font-size: 30px; margin: 0; }
  body.look-toon #overlay .result-lines { gap: 0; }
  body.look-toon #overlay #result .menu.grid { margin-top: 8px; }
  body.look-toon #overlay > .screen { padding: 6px 12px; }
  body.look-toon #overlay .menu.inline { margin-top: 8px; }
  body.look-toon #overlay table.records td { padding-top: 0; padding-bottom: 0; line-height: 1.25; }
  body.look-toon #overlay .tiny { margin-top: 4px; }
  body.look-toon #overlay .share-body { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  body.look-toon #overlay button::after { transition: none; }
}