:root {
  --bg: #0a0c10;
  --panel: rgba(14, 17, 22, 0.82);
  --panel-solid: #11151b;
  --line: rgba(255, 255, 255, 0.12);
  --text: #eef2f6;
  --muted: #9aa6b2;
  --muted-2: #a9b4bf;      /* secondary text on a translucent panel over the scene */
  --accent: #37e0a6;
  --accent-dim: #1d9c72;
  --warn: #ffb020;
  --red: #ff3b30;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'SFMono-Regular', ui-monospace, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: none;
}

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
body.racing #view { cursor: none; }

.hidden { display: none !important; }

/* ------------------------------- menus -------------------------------- */
#menu { position: fixed; inset: 0; pointer-events: none; }
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  pointer-events: auto;
  animation: fade 0.25s ease;
}
.screen.overlay { background: rgba(6, 8, 11, 0.72); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

#screen-title {
  align-items: flex-start; justify-content: center;
  padding: 0 clamp(24px, 7vw, 130px);
  background: radial-gradient(120% 100% at 80% 20%, rgba(55, 224, 166, 0.10), transparent 60%),
              linear-gradient(100deg, rgba(8, 10, 14, 0.95) 0%, rgba(8, 10, 14, 0.55) 45%, rgba(8, 10, 14, 0) 75%);
}
.title-wrap { max-width: 560px; }
.title-wrap.narrow { text-align: center; }
h1 {
  font-size: clamp(46px, 8.4vw, 104px);
  line-height: 0.88; margin: 0 0 14px; letter-spacing: -0.03em; font-weight: 800;
}
h1 span { display: block; font-weight: 200; color: var(--accent); letter-spacing: 0.14em; font-size: 0.4em; margin-top: 12px; }
.tagline { color: var(--muted); font-size: 17px; margin: 0 0 32px; }
.tagline-sm { color: var(--muted); font-size: 14px; margin: 4px 0 18px; }
.disclaimer { color: #5d6875; font-size: 11.5px; line-height: 1.5; margin-top: 38px; max-width: 430px; }

.nick { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.nick span { font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); }
.nick input {
  font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; width: 200px;
}
.nick input:focus { outline: none; border-color: var(--accent); background: rgba(55, 224, 166, 0.08); }
.nick input::placeholder { color: #5d6875; font-weight: 400; letter-spacing: 0; }

.menu-buttons { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.menu-buttons.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }
button {
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0.09em;
  color: var(--text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 26px; cursor: pointer; transition: 0.16s ease;
}
button:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: #04120c; }
button.primary:hover { background: #4bf3b8; }
button.back { background: none; border: none; color: var(--muted); padding-left: 0; }

/* Keyboard focus is always visible - mint on the dark, white on the mint buttons. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button.primary:focus-visible, .seg button.sel:focus-visible { outline-color: #fff; }

/* The chosen item in a picker. Colour alone is not enough to carry "this one", so the
   selected chip and card also get a thick edge and a SELECTED label with a tick; the
   label text comes from the item's data-sel attribute, so it follows the language. */
.pickable { position: relative; }
.pickable.sel::after {
  content: '✓ ' attr(data-sel);
  position: absolute; top: 8px; right: 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; line-height: 1;
  padding: 4px 6px; border-radius: 5px; background: var(--accent); color: #04120c;
}

.screen-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px clamp(18px, 4vw, 48px); border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 14, 0.75); backdrop-filter: blur(8px);
}
.screen-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0.04em; }

/* car select */
/* The list and the spec panel stand either side of the turntable, level with the car,
   rather than down at the floor with the top half of the screen left empty above them. */
.car-layout { flex: 1; min-height: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(18px, 4vw, 48px); gap: 24px; }
/* Fourteen cars no longer fit the screen, so the picker scrolls - inside the viewport. */
.car-list { display: flex; flex-direction: column; gap: 8px; width: 270px; padding: 2px 4px 4px 2px;
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.car-list::-webkit-scrollbar { width: 6px; }
.car-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.car-chip {
  text-align: left; padding: 11px 16px; border-radius: 10px; cursor: pointer; flex: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; backdrop-filter: blur(8px);
  opacity: 0.78;
}
.car-chip:hover { opacity: 1; }
.car-chip.sel {
  opacity: 1; border-color: var(--accent); background: rgba(55, 224, 166, 0.2);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent);
}
.car-chip small { display: block; font-weight: 400; letter-spacing: 0; color: var(--muted-2); margin-top: 3px; }
.car-chip.sel::after { top: 50%; transform: translateY(-50%); }
.car-info { width: 330px; max-height: 100%; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; backdrop-filter: blur(10px); }
.car-info h3 { margin: 0; font-size: 24px; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.stats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.stat { font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.stat .row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.meter { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.paints { display: flex; gap: 8px; flex-wrap: wrap; }
.paint { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.paint.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* track select: compact cards on the left, the chosen circuit and its race on the right */
.track-layout {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 20px; padding: 20px clamp(18px, 4vw, 48px);
}
.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; padding: 2px; }
.track-card {
  display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 10px 10px;
  cursor: pointer; text-align: left; backdrop-filter: blur(10px); transition: 0.16s; opacity: 0.8; min-height: 76px;
}
.track-card:hover { transform: translateY(-2px); opacity: 1; }
.track-card.sel {
  opacity: 1; border-color: var(--accent); background: rgba(55, 224, 166, 0.16);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent);
}
.track-card canvas { grid-row: 1 / 3; width: 96px; height: 56px; display: block; }
.track-card .name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; align-self: end; }
.track-card.sel .name { padding-right: 84px; }
.track-card .name svg, .race-setup h3 svg { width: 22px; height: 15px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
.track-card .meta { color: var(--muted-2); font-size: 11.5px; margin-top: 4px; letter-spacing: 0.03em; align-self: start; }

.race-setup {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  background: rgba(10, 13, 18, 0.88); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px 0; backdrop-filter: blur(10px);
}
.race-setup canvas { width: 100%; height: auto; aspect-ratio: 560 / 300; max-height: 18vh; object-fit: contain; display: block; flex: none; }
.race-setup h3 { margin: 10px 0 0; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.race-setup .meta { color: var(--muted-2); font-size: 12px; margin: 6px 0 0; letter-spacing: 0.03em; }
.race-setup .blurb { color: var(--muted-2); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.race-setup .race-options { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 22px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.race-setup .race-options .opt:last-child { grid-column: 1 / -1; }
/* START RACE stays in reach however far the panel scrolls */
.start-bar {
  position: sticky; bottom: 0; margin: 14px -18px 0; padding: 12px 18px 16px;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.6), rgba(10, 13, 18, 0.98) 30%);
  border-radius: 0 0 14px 14px;
}
.race-summary { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.04em; color: var(--muted-2); line-height: 1.5; }
.race-summary b { color: var(--text); font-weight: 600; }
.start-bar .start { width: 100%; font-size: 15px; padding: 15px 20px; }

.race-options { display: flex; gap: 28px; flex-wrap: wrap; }
.opt label { display: block; font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 7px; }
.seg { display: flex; gap: 4px; }
.seg button { padding: 8px 15px; font-size: 12.5px; border-radius: 8px; letter-spacing: 0.04em; }
.seg button.sel { background: var(--accent); border-color: var(--accent); color: #04120c; box-shadow: inset 0 -3px 0 rgba(4, 18, 12, 0.35); }
.seg button.dim { opacity: 0.45; }
.seg.wrap-seg { flex-wrap: wrap; }

/* options */
/* a panel down the left that scrolls on its own, so every setting is reachable on a
   short screen and the notes are read against the panel rather than the car */
.options-list {
  flex: 1; min-height: 0; overflow-y: auto; align-content: start; max-width: 640px;
  padding: 26px clamp(18px, 4vw, 48px) 30px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  background: linear-gradient(90deg, rgba(8, 10, 14, 0.9) 70%, rgba(8, 10, 14, 0.55));
  backdrop-filter: blur(6px);
}
.opt-row label { display: block; font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 9px; }
.options-list .disclaimer { margin: 10px 0 24px; color: var(--muted); font-size: 12px; }

/* controls */
.controls-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 30px; align-content: start; padding: 30px clamp(18px, 4vw, 48px); }
.controls-grid div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.controls-grid .wide { grid-column: 1 / -1; max-width: 620px; line-height: 1.6; font-size: 13px; }
kbd { display: inline-block; min-width: 30px; text-align: center; padding: 6px 9px; border-radius: 7px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); border-bottom-width: 2px; font-family: var(--mono); font-size: 12px; color: var(--text); }

/* results */
.results-wrap { width: min(620px, 92vw); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.results-wrap h2 { margin: 0 0 18px; font-size: 22px; }
table.results { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
table.results td { padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 14px; }
table.results td.p { color: var(--muted); width: 34px; font-variant-numeric: tabular-nums; }
table.results td.t { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--muted); }
table.results tr.you td { color: var(--accent); font-weight: 600; }
table.results tr.you td.t { color: var(--accent); }

/* records */
#screen-records { background: rgba(8, 10, 14, 0.94); overflow-y: auto; }
.wide-seg { flex-wrap: wrap; padding: 22px clamp(18px, 4vw, 48px) 4px; }
table.results.records { width: auto; min-width: min(760px, 92vw); margin: 18px clamp(18px, 4vw, 48px); }
table.results.records td.car { color: var(--muted); font-size: 12.5px; }
table.results.records td.when { color: #5d6875; font-size: 11.5px; text-align: right; white-space: nowrap; }
table.results.records tr.gold td.p { color: var(--accent); font-weight: 700; }
table.results.records td.empty { color: var(--muted); text-align: center; padding: 42px 8px; border: none; }
#recordNote { margin: 0 clamp(18px, 4vw, 48px) 32px; }

/* loading */
.loading-wrap { text-align: center; width: 320px; }
.loading-wrap .bar { height: 3px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.loading-wrap .bar i { display: block; height: 100%; width: 40%; background: var(--accent); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
.loading-wrap p { color: var(--muted); font-size: 13px; letter-spacing: 0.1em; margin-top: 14px; }

/* ------------------------------- HUD --------------------------------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.hud-corner { position: absolute; padding: 18px; }
.hud-corner.tl { top: 0; left: 0; }
.hud-corner.tr { top: 0; right: 0; text-align: right; }
.hud-corner.bl { bottom: 0; left: 0; }
.hud-corner.br { bottom: 0; right: 0; }

/* A soft dark wash behind the corner readouts, so they stay legible over bright sky and
   pale concrete alike without boxing them in. */
.hud-chip.tl { background: radial-gradient(120% 100% at 0% 0%, rgba(6, 8, 11, 0.62), rgba(6, 8, 11, 0) 70%); padding-right: 60px; padding-bottom: 30px; }
.hud-chip.tr { background: radial-gradient(120% 100% at 100% 0%, rgba(6, 8, 11, 0.62), rgba(6, 8, 11, 0) 70%); padding-left: 60px; padding-bottom: 30px; }
.pos-box { font-size: 54px; font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.pos-box small { font-size: 18px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.lap-box { font-size: 12px; letter-spacing: 0.16em; color: var(--muted-2); margin-top: 4px; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.lap-box b { color: var(--text); }

.time-row { display: flex; gap: 12px; justify-content: flex-end; align-items: baseline; font-family: var(--mono); font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.7); }
.time-row label { font-family: var(--font); font-size: 9.5px; letter-spacing: 0.16em; color: var(--muted-2); }
.time-row.best span { color: var(--accent); }

.tower { position: absolute; left: 18px; top: 130px; display: flex; flex-direction: column; gap: 3px; }
.tower .row { display: flex; align-items: center; gap: 7px; background: linear-gradient(90deg, rgba(8,10,14,0.82), rgba(8,10,14,0.6)); border-left: 3px solid #666; padding: 3px 9px 3px 6px; border-radius: 0 5px 5px 0; font-size: 11.5px; letter-spacing: 0.06em; min-width: 128px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.tower .row.you { background: linear-gradient(90deg, rgba(20,70,54,0.92), rgba(12,40,31,0.78)); border-left: 5px solid var(--accent); font-weight: 700; }
.tower .row.you::after { content: '◀'; font-size: 9px; color: var(--accent); margin-left: 5px; }
.tower .row i { color: var(--muted-2); font-style: normal; width: 12px; }
.tower .row em { font-style: normal; color: var(--muted-2); margin-left: auto; font-family: var(--mono); font-size: 10.5px; }

.dial-wrap { position: relative; width: 260px; height: 260px; }
.dial-read { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; flex-direction: column; }
.dial-read span { font-size: 58px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; text-shadow: 0 2px 16px rgba(0,0,0,0.7); }
.dial-read small { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }
.dial-sub { position: absolute; bottom: 52px; width: 100%; text-align: center; font-size: 12px; color: var(--accent); letter-spacing: 0.08em; }

.boost {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 132px; text-align: center;
}
.boost i {
  display: block; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
/* The fill carries moving hatching: it runs to the right while the tank refills and to
   the left while it drains, so which way it is going reads at a glance. */
.boost i::after {
  content: ''; display: block; height: 100%; width: var(--fill, 0%);
  background-color: var(--accent-dim); border-radius: 3px; transition: width 0.08s linear;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.3) 0 3px, rgba(255,255,255,0) 3px 8px);
  background-size: 17px 100%;
  animation: boostfill 0.6s linear infinite;
}
@keyframes boostfill { from { background-position: 0 0; } to { background-position: 17px 0; } }
@keyframes boostdrain { from { background-position: 17px 0; } to { background-position: 0 0; } }
.boost label { display: block; margin-top: 5px; font-size: 9.5px; letter-spacing: 0.22em; color: #8a96a2; text-shadow: 0 1px 4px rgba(0,0,0,0.9); white-space: nowrap; }
.boost.ready i::after { background-color: var(--accent); }
.boost.ready label { color: var(--text); }
/* full: no hatching (nothing is moving), a bright bar, and the label says so in words */
.boost.full i { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 0 10px rgba(55, 224, 166, 0.55); }
.boost.full i::after { background-color: var(--accent); background-image: none; animation: none; }
.boost.full label { color: var(--accent); font-weight: 700; }
.boost.pulse i { animation: boostready 0.7s ease-out; }
@keyframes boostready {
  0% { transform: scaleY(1); box-shadow: 0 0 0 0 rgba(55, 224, 166, 0.9); }
  40% { transform: scaleY(1.9); }
  100% { transform: scaleY(1); box-shadow: 0 0 0 12px rgba(55, 224, 166, 0); }
}
.boost.on i::after { background-color: var(--warn); box-shadow: 0 0 14px rgba(255, 176, 32, 0.8); animation-name: boostdrain; animation-duration: 0.3s; }
.boost.on label { color: var(--warn); animation: boostpulse 0.4s ease-in-out infinite alternate; }
@keyframes boostpulse { from { opacity: 0.45; } to { opacity: 1; } }
/* asked for with too little in the tank */
.boost.denied i { box-shadow: inset 0 0 0 1px var(--red), 0 0 10px rgba(255, 59, 48, 0.7); animation: boostdenied 0.4s ease; }
@keyframes boostdenied { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

#minimap { width: 250px; height: 250px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); }

.center-msg {
  position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(28px, 5vw, 56px); font-weight: 800; letter-spacing: -0.02em;
  text-shadow: 0 4px 26px rgba(0,0,0,0.8); text-align: center; opacity: 0; transition: opacity 0.2s;
}
.center-msg.show { opacity: 1; }
.center-msg.warn { color: var(--warn); }
.center-msg.warn::before, .center-msg.red::before { content: '⚠ '; font-size: 0.8em; }
.center-msg.good { color: var(--accent); }
.center-msg.red { color: var(--red); }
.center-msg small { display: block; font-size: 0.32em; letter-spacing: 0.24em; color: var(--muted); font-weight: 600; margin-top: 8px; }

.start-lights { position: absolute; top: 11%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transition: opacity 0.25s; }
.start-lights.show { opacity: 1; }
.start-lights .bulbs { display: flex; gap: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(8, 10, 14, 0.8); box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.5); }
.start-lights i { width: 40px; height: 40px; border-radius: 50%; background: #2a2d33; box-shadow: inset 0 3px 7px rgba(0,0,0,0.7); }
.start-lights i.on { background: #ff2b1c; box-shadow: 0 0 26px rgba(255,60,40,0.95), inset 0 2px 5px rgba(0,0,0,0.3); }
.start-hint {
  margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(8, 10, 14, 0.72);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted-2); white-space: nowrap;
}
.start-hint.armed { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(55, 224, 166, 0.5); }
.start-hint.armed::before { content: '✓ '; }

/* Driving cues: one short call, top centre, just above where the eye already is. */
.cue {
  position: absolute; top: 21%; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px;
  background: rgba(8, 10, 14, 0.74); box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
  font-weight: 800; letter-spacing: 0.12em; font-size: 15px; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s;
}
.cue b { font-size: 18px; line-height: 1; }
.cue small { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--muted-2); letter-spacing: 0; }
.cue small:empty { display: none; }
.cue.brake { color: #ff6259; box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.75); }
.cue.left, .cue.right { color: var(--text); }
.cue.off { color: var(--warn); box-shadow: 0 0 0 2px rgba(255, 176, 32, 0.7); }

/* Small confirmations - camera, mute, rejoin, boost - near the top, out of the way of
   the big centre messages that call laps and positions. */
.toast {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 8px; background: rgba(8, 10, 14, 0.78);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; white-space: nowrap;
  opacity: 0; transition: opacity 0.18s;
}
.toast.show { opacity: 1; }
.toast.warn { color: var(--warn); }
.toast.good { color: var(--accent); }
.toast.warn::before { content: '⚠ '; }

/* the first-race controls card */
.first-hint {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px; pointer-events: auto;
  padding: 12px 12px 12px 20px; border-radius: 14px;
  background: rgba(8, 10, 14, 0.86); box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,0.5);
  animation: fade 0.3s ease; max-width: calc(100vw - 32px);
}
.first-hint.out { opacity: 0; transition: opacity 0.4s; }
.first-hint .keys { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted-2); }
.first-hint .keys span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.first-hint .hint-close { padding: 10px 16px; font-size: 12px; flex: none; }

/* boost: streaks rushing past the camera, and a cold glow around the edge of the frame */
#boostfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
#boostfx.on { opacity: 1; }
#boostfx::before, #boostfx::after { content: ''; position: absolute; }
#boostfx::before {
  inset: -25%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(190, 230, 255, 0) 0deg, rgba(190, 230, 255, 0) 1.1deg,
    rgba(190, 230, 255, 0.55) 1.5deg, rgba(190, 230, 255, 0) 2.3deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 26%, #000 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 26%, #000 72%);
  animation: boostrush 0.5s linear infinite;
}
#boostfx::after {
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(58, 166, 255, 0.22) 100%);
}
@keyframes boostrush {
  from { transform: scale(1); opacity: 0.85; }
  to { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #boostfx::before { animation: none; opacity: 0.25; }
  /* nothing that only decorates is allowed to move */
  .screen, .first-hint { animation: none; }
  button:hover, .track-card:hover { transform: none; }
  .boost i::after, .boost.pulse i, .boost.denied i, .boost.on label, .coins.bump b { animation: none; }
}

/* the caravan's coins: a pill at the top, and the standing total on the title screen */
.coins {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: rgba(10, 13, 17, 0.6); border: 1px solid rgba(232, 181, 58, 0.35);
  border-radius: 999px; padding: 5px 14px 5px 11px; backdrop-filter: blur(4px);
}
.coins i { font-style: normal; color: #e8b53a; font-size: 14px; line-height: 1; }
.coins b { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.coins label { font-size: 9.5px; letter-spacing: 0.18em; color: var(--muted); }
.coins.bump b { animation: coinbump 0.45s ease; }
@keyframes coinbump {
  0% { transform: scale(1); color: var(--text); }
  35% { transform: scale(1.35); color: #e8b53a; }
  100% { transform: scale(1); color: var(--text); }
}
.purse { margin: -8px 0 22px; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.purse b { color: #e8b53a; font-family: var(--mono); font-size: 14px; letter-spacing: 0; }

/* touch */
.touch { position: absolute; inset: 0; pointer-events: none; }
.touch-left, .touch-right {
  position: absolute; bottom: 20px; display: flex; gap: 12px; pointer-events: auto;
  /* Neither cluster may claim more than its half of the screen. Both used to be laid
     out in one row regardless of width, and on a portrait phone the row on the right
     reached far enough across that BRAKE sat under the right-steer button. */
  max-width: calc(50vw - 20px);
}
.touch-left { left: max(16px, env(safe-area-inset-left)); }
.touch-right { right: max(16px, env(safe-area-inset-right)); justify-content: flex-end; }
.touch button { width: 86px; height: 86px; border-radius: 50%; font-size: 26px; background: rgba(255,255,255,0.1); backdrop-filter: blur(4px); }
.touch button.on { background: var(--accent); color: #04120c; }
.touch-right button { font-size: 13px; }
.touch button.boost-btn { width: 68px; height: 68px; align-self: flex-end; font-size: 11px; color: var(--warn); border-color: rgba(255, 176, 32, 0.45); }
.touch button.boost-btn.on { background: var(--warn); color: #241600; }

/* fatal (file:// notice) */
#fatal { position: fixed; inset: 0; z-index: 50; background: var(--bg); color: var(--text); padding: 12vh 8vw; font-size: 16px; line-height: 1.6; }
#fatal h2 { margin-top: 0; }
#fatal pre { background: #151a21; padding: 14px 18px; border-radius: 10px; display: inline-block; font-family: var(--mono); }
#fatal a { color: var(--accent); }

/* On a finger, every control is at least 44px tall. */
@media (pointer: coarse) {
  .seg button, .car-chip, button.back { min-height: 44px; }
  .paint { width: 40px; height: 40px; }
}

@media (max-width: 820px) {
  .car-layout { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-top: 12px; }
  .car-list { flex-direction: row; overflow-x: auto; width: auto; max-height: none; flex: none; }
  .car-chip.sel { padding-right: 16px; }
  .car-chip.sel::after { display: none; }
  .car-info { width: auto; max-height: 42vh; }
  /* one column that scrolls, with START RACE pinned to the bottom of the screen */
  .track-layout { display: block; overflow-y: auto; padding-bottom: 0; }
  .track-grid { overflow: visible; margin-bottom: 14px; grid-template-columns: 1fr; }
  .race-setup { overflow: visible; }
  .race-setup canvas { max-height: 22vh; }
  .cue { top: 17%; font-size: 13px; }
  .tower { display: none; }
  .dial-wrap { width: 190px; height: 190px; }
  #dial { width: 190px; height: 190px; }
  .dial-read span { font-size: 40px; }
  #minimap { width: 150px; height: 150px; }
}

/* Portrait, or any screen too narrow for two rows of pedals side by side: the right-hand
   cluster becomes a column with GO under the thumb and BRAKE above it, which is the shape
   a phone held upright can actually reach as well as the one that fits. The gauges then
   have to move up out of its way - a 190px dial in the bottom corner is exactly where the
   pedals now are - and vertical room is the one thing a phone held upright has to spare. */
@media (orientation: portrait), (max-width: 700px) {
  .touch-left, .touch-right { bottom: max(16px, env(safe-area-inset-bottom)); gap: 10px; }
  .touch-right { flex-direction: column; align-items: flex-end; }
  .touch button { width: 74px; height: 74px; font-size: 22px; }
  /* after the rule above, and no more specific than it: the arrows want a big glyph, the
     lettered pedals want text that fits inside the circle */
  .touch-right button { font-size: 11px; padding: 0 6px; overflow: hidden; }
  .touch button.boost-btn { width: 58px; height: 58px; font-size: 9.5px; }

  .hud-corner { padding: 10px; }
  .hud-corner.br { bottom: 236px; }          /* clear of the BRAKE / BOOST / GO column */
  .hud-corner.bl { bottom: 84px; }           /* clear of the steering arrows */
  .dial-wrap, #dial { width: 150px; height: 150px; }
  .dial-read span { font-size: 34px; }
  .dial-read small { font-size: 9px; }
  /* clear of the boost bar, which keeps its own 14px off the bottom */
  .dial-sub { bottom: 42px; font-size: 10px; white-space: nowrap; }
  .boost { width: 112px; }
  #minimap { width: 118px; height: 118px; }
  /* the pedals own the bottom of a phone, and the lap times its top corners */
  .first-hint { bottom: auto; top: 34%; flex-direction: column; gap: 10px; padding: 14px; }
  .toast { top: 27%; }
  .start-lights i { width: 30px; height: 30px; }
  .start-hint { font-size: 10.5px; letter-spacing: 0.08em; }
}