@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/chakra-400.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/chakra-500.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/chakra-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/fonts/chakra-700.woff2') format('woff2'); }
/* pro28.com — the lap gate. Same black / chrome / red as the site. */

:root {
  --red: #e8112d;
  --red-hi: #ff3b4e;
  --red-lo: #9d0011;
  --pink: #fe5e89;
  --dim: #9a9aa6;
  --line: #24242b;
  --font: "Chakra Petch", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: #000; color: #e9e9ee;
  font-family: var(--font);
  overscroll-behavior-x: none;
  touch-action: pan-y;              /* the page scrolls; the controls do not */

  /* A LONG PRESS ON A PHONE IS A DRIVING INPUT, NOT A TEXT SELECTION.
     Holding the gas pad was selecting the page and throwing Android's
     Copy / Share / Select all / Translate bar straight across the track. The
     game is a control surface: nothing on it is text to be picked up. Real
     text fields are given it back below. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* except where there is genuinely something to type or read */
input, textarea, [contenteditable] {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* the game owns the first screen, the gear rail sits under it */
#shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#stage, #pad, .pad, #stick { touch-action: none; }

/* ---------- header ---------- */

#bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap; padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: #000;
}
#bar img { display: block; height: 84px; width: auto; }

#clocks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.clock {
  min-width: 88px; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #0c0c0f; text-align: center;
}
.clock span {
  display: block;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #6e6e79;
}
.clock b {
  font: 700 19px/1.25 ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.clock b.over { color: var(--red-hi); }
.clock.goal { border-color: transparent; background: linear-gradient(180deg, var(--red-hi), var(--red-lo)); }
.clock.goal span { color: rgba(255,255,255,.8); }

/* ---------- class picker ---------- */

#classbar {                       /* centred in the header row */
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}

/* where the chosen class sits between the slowest and quickest car */
#speedbar {
  flex-basis: 100%; order: 9;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: -6px;                 /* sits right under the class buttons */
}
#speedbar span {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #5c5c66;
}
#speedbar .track {
  position: relative;
  width: min(320px, 46vw); height: 14px; border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(90deg, #2a2a33, #6b1120 55%, var(--red-hi));
  background-clip: padding-box;
  border: 4px solid transparent;    /* fat hit area, thin looking bar */
}
#speedmark {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.55), 0 0 18px rgba(232,17,45,.6);
  transition: left .18s ease;
}

@media (pointer: coarse) {
  #speedbar .track { width: min(260px, 56vw); }
}
.cblabel {
  margin-right: 4px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #5c5c66;
}
.cls {
  padding: 7px 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #101014; color: var(--dim);
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
.cls:hover { color: #fff; border-color: #40404c; }
.cls.mode { margin-left: 14px; border-style: dashed; }
.cls.on {
  border-color: transparent; color: #fff;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 55%, var(--red-lo));
  box-shadow: 0 0 16px rgba(232,17,45,.35);
}

@media (pointer: coarse) {
  #classbar { gap: 5px; }
  .cls { padding: 6px 10px; font-size: 10px; letter-spacing: .08em; }
  .cblabel { display: none; }
  .cls.mode { display: none; }      /* a phone always gets the stick */
}

/* Narrow screens: one clean stack — logo, classes, slider, clocks. Ordering by
   flex-order across a wrapping row was unpredictable; a column is not. */
@media (max-width: 760px), (pointer: coarse) {
  #bar {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 5px; padding: 8px 10px;
  }
  #bar img { order: 1; height: 44px; margin: 0 auto; }
  #classbar { order: 2; justify-content: center; gap: 5px; }
  /* flex-basis is HEIGHT in a column — 100% here ate the whole stack */
  #speedbar { order: 3; margin: 0; flex: 0 0 auto; }
  #clocks   { order: 4; justify-content: center; }
  #enterbar { display: none; }
  .cls { padding: 6px 10px; font-size: 10px; letter-spacing: .08em; }
  .cls.mode { display: none; }
  .cblabel { display: none; }
  .clock { min-width: 56px; padding: 2px 7px; }
  .clock b { font-size: 13px; }
  .clock span { font-size: 8px; letter-spacing: .12em; }
  #msg { min-height: 22px; font-size: 10px; }
  #footrow { min-height: 22px; padding: 0 10px; }
  #reset { padding: 5px 9px; font-size: 9px; }
  #fleabar { padding: 3px 10px; min-height: 38px; }
}

/* ---------- the strip above the board ---------- */
/* Restart and full screen live here, side by side. The strip needs its own
   height and its own positioning context — without it both buttons anchor to
   #stage and land on the track, which is exactly what happened. */

#fleabar {
  position: relative;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px; min-height: 42px;
}

/* ---------- stage ---------- */

#stage { position: relative; flex: 1; min-height: 0; }
#cv { display: block; }

#footrow {                        /* the row under the board: legend left, prompt centred */
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; min-height: 18px;
  border-top: 1px solid var(--line);
  background: #060607;
}
#msg {
  flex: 1 1 auto;
  min-height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
  text-align: center;
}

#help {
  flex: 0 0 auto;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #55555f;
  line-height: 1.9; pointer-events: none;
}
#help b { color: #8b8b96; font-weight: 600; }

#reset {
  position: static; margin-left: auto;            /* pinned to the right of the strip */
  padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #101014; color: var(--dim);
  font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
#reset:hover { border-color: var(--red); color: #fff; }

/* ---------- touch pad ---------- */

#pad { display: none; }

/* left thumb: analog steering */
#stick {
  position: absolute; right: 14px; left: auto; bottom: 14px;
  width: 132px; height: 132px; border-radius: 50%;
  border: 1px solid #2c2c36; background: rgba(14,14,18,.72);
  touch-action: none;
}
#stick::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 78px; height: 1px; margin: 0 0 0 -39px;
  background: #2c2c36;
}
#knob {
  position: absolute; left: 50%; top: 50%;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%;
  border: 1px solid #45454f;
  background: radial-gradient(circle at 40% 35%, #3a3a44, #16161b);
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}
#stick.live #knob { border-color: var(--red-hi); background: radial-gradient(circle at 40% 35%, #ff5e6e, #9d0011); }

/* right thumb: throttle and brake */
.pad {
  position: absolute; bottom: 14px;
  width: 100px; height: 100px; border-radius: 50%;
  border: 1px solid #33333d; background: rgba(16,16,20,.82);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: #cfcfd8; user-select: none; touch-action: none;
}
.pad.down { background: rgba(232,17,45,.55); border-color: var(--red-hi); color: #fff; }
/* THE STICK IS THE CIRCLE, ALWAYS (Scott). The flat pill is dead - stick
   mode uses the same round pad as everything else. */

/* THE LAW OF THE THUMBS: pedals LEFT, steering RIGHT, in every mode, no
   class can ever flip it back. */
#padBrake {
  display: flex; left: 122px; right: auto;
  width: 64px; height: 64px; bottom: 32px;
  font-size: 11px;
}
/* THE PHONE ALWAYS HAS A MARSHAL (Scott: "on cell I have no marshal button").
   A small round pad above Brake, in the thumb's reach, never in the bar. */
#padMarshal {
  display: flex; left: 122px; right: auto;
  width: 64px; height: 64px; bottom: 108px;
  font-size: 9px; border-color: #5f5f6b; color: #e9e9ef;
}
#padGas {
  left: 14px; right: auto;
  background: linear-gradient(180deg, rgba(255,59,78,.35), rgba(157,0,17,.35));
  border-color: var(--red);
}

@media (pointer: coarse) {
  #pad { display: block; }
  #help { display: none; }
  #bar img { height: 44px; }
  .clock { min-width: 56px; padding: 2px 7px; }
  .clock b { font-size: 13px; }
  .clock span { font-size: 8px; letter-spacing: .12em; }
  #msg { min-height: 22px; font-size: 10px; }
  #footrow { min-height: 22px; padding: 0 10px; }
  #enterbar { padding: 7px 13px; font-size: 10px; }
  #reset { right: 8px; bottom: 0; padding: 5px 9px; font-size: 9px; }
}

/* ---------- win overlay ---------- */

#win {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.86);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
#win[hidden] { display: none; }   /* the attribute must win over display:flex */
#win.show { opacity: 1; pointer-events: auto; }
#win .card {
  max-width: 460px; margin: 20px; padding: 34px 32px;
  text-align: center;
  border: 1px solid #33333d; border-radius: 14px;
  background: linear-gradient(180deg, #121216, #0b0b0d);
  box-shadow: 0 30px 90px rgba(0,0,0,.8), 0 0 60px rgba(232,17,45,.18);
}
#win h1 {
  margin: 0 0 6px;
  font-size: 34px; font-weight: 900; font-style: italic; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #cfd3d8 52%, #7d838c 53%, #fff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#win p { margin: 0 0 22px; color: var(--dim); font-size: 15px; }
#win .lap {
  font: 700 46px/1 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: #fff; margin-bottom: 4px;
}
#win .lap small { font-size: 18px; color: var(--dim); }
#enter {
  display: inline-block; padding: 13px 30px;
  border: 0; border-radius: 8px;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 55%, var(--red-lo));
  color: #fff; font: 700 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 0 26px rgba(232,17,45,.4);
}
#enter:hover { filter: brightness(1.12); }

.winbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#again {
  padding: 13px 24px;
  border: 1px solid #33333d; border-radius: 8px;
  background: #121217; color: var(--dim);
  font: 700 14px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
}
#again:hover { border-color: var(--red); color: #fff; }

/* far right of the header, always there */
#enterbar {
  padding: 9px 18px; border: 0; border-radius: 8px;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 55%, var(--red-lo));
  color: #fff; font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 0 18px rgba(232,17,45,.35);
}
#enterbar:hover { filter: brightness(1.12); }


/* ---------- Mini-Z gear ---------- */

#gear {
  padding: 30px 20px 44px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0a0c, #000);
}
.gearhead { text-align: center; margin-bottom: 20px; }
.gearhead h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 3vw, 26px); font-weight: 900; font-style: italic;
  text-transform: uppercase; color: #fff;
}
.gearhead p { margin: 0 auto; max-width: 620px; color: var(--dim); font-size: 14px; }

.rail {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 1240px; margin: 0 auto;
}
.pick {
  display: block; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #121216, #0b0b0d);
  text-decoration: none;
}
.pick:hover { border-color: var(--red); }
.pick b {
  display: block; margin-bottom: 4px;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.pick span { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.5; }

.aff {
  max-width: 1240px; margin: 18px auto 0;
  text-align: center; font-size: 11px; color: #5c5c66;
}


/* ---------- the gear page ---------- */

body.gearpage { height: auto; touch-action: auto; }
#gearbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line); background: #000;
}
#gearbar img { display: block; height: 62px; width: auto; }
#gearbar .back {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
}
#gearbar .back:hover { color: #fff; }

.gearpage .gearhead { padding: 34px 20px 6px; }
.gearpage .gearhead h1 {
  margin: 0 0 8px; text-align: center;
  font-size: clamp(26px, 4vw, 38px); font-weight: 900; font-style: italic;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #cfd3d8 52%, #7d838c 53%, #fff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gearpage .gearhead p {
  max-width: 640px; margin: 0 auto; text-align: center; color: var(--dim); font-size: 14px;
}

.gearsec { max-width: 1240px; margin: 0 auto; padding: 26px 20px 6px; }
.gearsec h2 {
  margin: 0 0 4px;
  font-size: 17px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .06em; color: #fff;
}
.gearsec h2::before {
  content: ""; display: inline-block;
  width: 4px; height: 15px; margin-right: 10px; vertical-align: -2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
}
.secblurb { margin: 0 0 14px 14px; color: var(--dim); font-size: 13px; }

.gearmore { text-align: center; margin: 18px 0 0; }
.gearmore a {
  color: var(--red-hi); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; font-weight: 700;
}
.gearmore a:hover { text-decoration: underline; }


/* ---------- the banner under the track ---------- */

#gear { padding: 0 0 34px; border-top: 1px solid var(--line); background: #000; }

@media (max-width: 620px) {
}

.go {
  display: inline-block; padding: 12px 28px; border-radius: 8px;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 55%, var(--red-lo));
  color: #fff; font: 700 13px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 22px rgba(232,17,45,.38);
}
.hero:hover .go { filter: brightness(1.12); }

.aff {
  max-width: 1240px; margin: 16px auto 0;
  text-align: center; font-size: 11px; color: #5c5c66;
}


/* ---------- radio calibration ---------- */

/* THE BLACK STRIP IS AS THIN AS IT GOES (Scott: that is track view being
   wasted). One line, never wrapping, and the buttons sit on the RIGHT where
   they have always been - the label stays left and the gap between them does
   the pushing. */
#radio {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  /* room above and below MARSHAL - it is the button you stab at mid-race, so
     it gets a real target, and the strip is still far thinner than it was */
  padding: 7px 12px; min-height: 0;
  border-top: 1px solid var(--line);
  background: #08080a;
}
#radio #axes { flex: 1 1 auto; }        /* the empty middle does the pushing */
/* CONTROLLER, WITH ITS OWN LITTLE RADIO (Scott): the transmitter box, its
   wheel and trigger and the aerial, drawn in the line's own colour. */
#radio #connectBtn { display: inline-flex; align-items: center; gap: 6px; }
/* RADIO STANDS ALONE (Scott): the word keeps the bottom-left corner on its
   own, and everything else - Controller included - starts 20mm to its right. */
#radio #connectBtn { margin-left: 20mm; }
#radio .ctlricon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
/* the same tiny badge on Tracks, Cars and Setup (Scott) - drawn, so it takes
   the strip's own colour and stays sharp at any size */
#radio .btico { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px;
  flex: 0 0 auto; opacity: .85; }
#radio button:hover .btico { opacity: 1; }
.rlabel { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
#axes { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }
.ax {
  position: relative; width: 74px; height: 14px;
  border: 1px solid var(--line2); border-radius: 999px; background: #101014;
}
.ax span {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  font-size: 8px; letter-spacing: .1em; color: #6e6e79; z-index: 2;
}
.ax i {
  position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--red-hi);
}
#radio button {
  padding: 3px 10px;
  border: 1px solid var(--line2); border-radius: 999px;
  background: #101014; color: var(--dim);
  font: 700 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}
#radio button:hover { border-color: var(--red); color: #fff; }
#radio button.busy {
  border-color: transparent; color: #fff;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
}

.axnum {
  flex-basis: 100%;
  font: 400 10px/1.6 ui-monospace, Consolas, monospace;
  color: #7a7a86; letter-spacing: .04em;
}

#fsout {
  margin-left: 10px; align-self: center;
  padding: 6px 12px;
  border: 1px solid var(--line2); border-radius: 999px;
  background: #101014; color: var(--dim);
  font: 700 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}
#fsout:hover { border-color: var(--red); color: #fff; }
#fsout[hidden] { display: none; }

/* ---------- phone: keep the bar clear of the thumbs ---------- */
/* The gas circle sits bottom-left over the board and the stick bottom-right,
   so a bar sitting in the flow lands underneath both. On a phone it moves up
   into the empty space beside the lap times, where nothing is ever pressed. */
@media (pointer: coarse) {
  #fleabar {
    position: absolute; top: 6px; left: 8px; z-index: 30;
    min-height: 0; padding: 0; gap: 6px;
    background: none;
  }
  #fleabar button {
    padding: 6px 10px; font-size: 9px;
    background: rgba(16,16,20,.9);
    backdrop-filter: blur(2px);
  }
  #fleabar #reset { position: static; }
  body { position: relative; }
}

/* ---------- brand: mascot left, wordmark beside it, classes on the same row ---------- */
/* The mascot is deliberately taller than the header and hangs into the rows
   below it — that overhang is what gives him depth instead of sitting in a
   band. Everything above the board therefore has to stop clipping. */
#bar {
  justify-content: flex-start;
  overflow: visible;
  position: relative; z-index: 6;
}
#shell, #stage { overflow: visible; }

#brand {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 16px;
  align-self: stretch;
}
#bar #mark {
  height: 150px; width: auto;
  margin: -6px 0 -58px 0;          /* hangs past the header */
  position: relative; z-index: 7;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.8));
  pointer-events: none;
}
#bar #classbar { flex: 1 1 auto; justify-content: flex-start; margin-left: 22px; }

@media (max-width: 760px), (pointer: coarse) {
  #bar {
    flex-direction: row; flex-wrap: wrap; align-items: flex-end;
    justify-content: flex-start;
  }
  #brand { order: 1; gap: 9px; }
  #bar #mark { height: 74px; margin: -2px 0 -26px 0; }
  #bar #classbar {
    order: 2; flex: 1 1 auto; justify-content: flex-end;
    margin-left: 10px; padding-bottom: 3px;
  }
  #clocks   { order: 3; }
  #speedbar { order: 4; }
}

/* The mascot hangs down past the header, so nothing may sit underneath him:
   the brand is its own column and every other header row lives to the right.
   Wrapping rows then stack in that column instead of sliding under the flea. */
#bar { align-items: flex-end; flex-wrap: nowrap; }
#barmain {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap;
}
#bar #classbar { margin-left: 0; }
@media (max-width: 760px), (pointer: coarse) {
  #barmain { gap: 5px 8px; }
  #bar #classbar { order: 1; flex: 1 1 auto; justify-content: flex-end; margin-left: 0; }
  #clocks   { order: 2; }
  #speedbar { order: 3; }
}

/* Top-left now belongs to the mascot, so the bar moves to the top-right —
   clear of him, clear of the gas circle, and above the stick. */
@media (pointer: coarse) {
  #fleabar { left: auto; right: 8px; justify-content: flex-end; }
}

/* Brand leads the header row on every size — an old order rule from the
   stacked phone layout was pushing the classes above the logo. */
@media (max-width: 760px), (pointer: coarse) {
  #brand   { order: 0; }
  #barmain { order: 1; }
}

/* The header must never wrap the rest of itself underneath the mascot — that
   is the one place his overhang would cover a button. */
@media (max-width: 760px), (pointer: coarse) {
  #bar { flex-wrap: nowrap; align-items: flex-start; }
  #barmain { min-width: 0; }
}

/* ---------- the dongle banner ---------- */
/* No product photography and no invented glamour shot — it is a link, so it
   reads as a headline with a clear way through to the listing. */
.dongle {
  position: relative; display: block;
  padding: 34px 26px 30px;
  max-width: 1240px; margin: 0 auto;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(680px 240px at 12% 0%, rgba(232,17,45,.16), transparent 68%),
    linear-gradient(180deg, #121214 0%, #0a0a0c 100%);
}
.dongle .kicker {
  display: block; margin-bottom: 6px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--pink);
}
.dongle h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4.6vw, 46px); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.02;
  background: linear-gradient(180deg, #fff 0%, #cfd3d8 46%, #7d838c 54%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dongle p { margin: 0 0 18px; max-width: 560px; color: #c3c3cd; font-size: 14.5px; line-height: 1.55; }
.dongle .go {
  display: inline-block; padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff; font: 800 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
}
.dongle:hover .go { filter: brightness(1.12); }
@media (max-width: 620px) {
  .dongle { padding: 24px 18px 22px; }
}

/* Mascot up and out, wordmark down a size — he leads, the text supports. */
#bar #mark { height: 176px; margin: -22px 0 -58px 0; }
@media (max-width: 760px), (pointer: coarse) {
  #bar #mark { height: 88px; margin: -12px 0 -26px 0; }
}

/* Mascot higher again, wordmark tucked in against him, and the strip below the
   header moved to the right so his overhang has nothing to touch. */
#brand { gap: 0; align-items: center; }
#bar #mark { height: 176px; margin: -40px 0 -50px 0; }
#fleabar { justify-content: flex-end; }
@media (max-width: 760px), (pointer: coarse) {
  #brand { gap: 0; }
  #bar #mark { height: 92px; margin: -20px 0 -22px 0; }
}

/* Restart carries an auto left margin, which pinned the full-screen icon to
   the far left — right under the mascot. Both go right together now. */
#fleabar #fs { margin-left: auto; }

/* Classes centred, full screen parked next to Restart on the right. */
#bar #classbar { flex: 1 1 auto; justify-content: center; }
#fleabar { justify-content: flex-end; }
#fleabar #fs { margin-left: 0; order: 1; }
#fleabar #reset { margin-left: 8px; order: 2; }
@media (max-width: 760px), (pointer: coarse) {
  #bar #classbar { justify-content: center; }
}

/* Centred inside its own column still reads as off-centre, because the brand
   pushes that column right. On a desktop the classes centre on the PAGE. */
/* The brand comes out of the flow entirely. Everything else then measures
   against the page, so the class row and the speed bar sit on the same centre
   line as the track instead of being shoved right by the logo's width. */
@media (min-width: 761px) and (pointer: fine) {
  #brand {
    position: absolute; left: 18px; bottom: 4px; z-index: 7;
  }
  #barmain { width: 100%; flex: 1 1 100%; }
  #bar { padding-left: 26px; }
  #bar #classbar { flex: 1 1 auto; justify-content: center; }
}

/* Three columns, equal outsides: the middle one is therefore the page's centre
   line, so the class row and the speed bar share it with the track. Flex could
   not do this — the clocks stole the space and dragged the classes left. */
@media (min-width: 761px) and (pointer: fine) {
  #barmain {
    display: grid; width: 100%;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; row-gap: 8px; column-gap: 12px;
  }
  #bar #classbar { grid-column: 2; grid-row: 1; justify-content: center; margin: 0; }
  #clocks   { grid-column: 3; grid-row: 1; justify-self: end; }
  #speedbar { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  #enterbar { grid-column: 3; grid-row: 2; justify-self: end; }
}

#underrow:empty { display: none; }
#underrow {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 5px 10px;
}
#underrow #classbar { margin: 0; justify-content: center; }

/* The class row lives in the dead space directly under the board. The thumb
   pads are absolutely placed over the stage, so this sits in the gap without
   moving them or stealing height from the track. */
/* The canvas fills the whole stage — the black under the board is inside it,
   not after it — so a row placed in the flow lands beneath the thumb pads
   instead of in the gap. It is pinned above them instead: stick is 132 tall
   sitting 14 from the bottom, so 160 clears it on every phone. */
#stage > #underrow {
  position: absolute; left: 0; right: 0; bottom: 160px;   /* JS sets the real value */
  z-index: 6; padding: 0 10px;
  display: flex; justify-content: center;
  pointer-events: none;
}
#stage > #underrow #classbar { pointer-events: auto; }
#stage > #underrow #classbar { flex-wrap: nowrap; }

/* He was pulled up past the top of the page, which cut his antennae off.
   Sits down inside the header now; wordmark up 20% to match him. */
#bar #mark { height: 176px; margin: 0 0 -56px 0; }
@media (max-width: 760px), (pointer: coarse) {
  #bar #mark { height: 92px; margin: 0 0 -26px 0; }
}

/* Centring him in a header shorter than he is pushed his antennae off the top
   of the page. He is anchored to the header's top edge and overflows downward
   only — which is the direction that has room. */
#brand { align-items: flex-start; align-self: stretch; }
#bar #mark { align-self: flex-start; margin: 4px 0 -60px 0; }
#bar #word { align-self: flex-start; margin: 26px 0 0 -6px; }
@media (max-width: 760px), (pointer: coarse) {
  #bar #mark { margin: 3px 0 -30px 0; }
  #bar #word { margin: 14px 0 0 -4px; }
}

/* The brand is pinned in the desktop header; pinning it by the BOTTOM meant a
   taller flea grew upward, straight off the top of the page. Pin the top. */
@media (min-width: 761px) and (pointer: fine) {
  #brand { top: 4px; bottom: auto; }
}

/* Radio connected: the glass controls are just clutter. */
body.radio #pad { display: none; }

/* Phone in landscape: the track takes the screen. Header, radio strip and the
   legend all go — setup happens in portrait, landscape is for driving. The lap
   times and the way out stay, floated over the corners. */
@media (pointer: coarse) and (orientation: landscape) {
  #bar, #radio, #footrow, #gear { display: none; }
  #shell { height: 100vh; height: 100dvh; }
  #stage { flex: 1 1 auto; height: auto; }
  #fleabar {
    position: absolute; top: 6px; right: 8px; left: auto; z-index: 40;
    padding: 0; min-height: 0; background: none;
  }
  #clocks {
    display: flex !important;
    position: absolute; top: 6px; left: 8px; z-index: 40;
    gap: 6px; padding: 0;
  }
  #clocks .clock { min-width: 48px; padding: 2px 6px; background: rgba(8,8,10,.72); }
  #underrow { display: none; }
}

#tune { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#tune label {
  display: flex; align-items: center; gap: 6px;
  font: 700 9px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
#tune input[type=range] { width: 92px; accent-color: var(--red); }
/* the Training Wheels switch - a real tick box, not a browser default box */
#tune label.tunechk { gap: 10px; }
#tune input[type=checkbox] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--red); cursor: pointer;
}
#tune #aidrow { transition: opacity .15s ease; }
#tune b { min-width: 22px; color: #fff; font-size: 10px; }
.ax i.ghost { background: #55555f; }
@media (pointer: coarse) and (orientation: landscape) { #tune { display: none; } }

/* The board tilts from its near edge, like looking down from a stand. */
#cv { transform-origin: 50% 100%; will-change: transform; }

@media (pointer: coarse) { #tune label:has(#tuneview) { display: none; } }

/* ---------- phone, portrait ---------- */
/* The header was stacking four things into one strip and then floating the
   full-screen bar on top of them, so Restart sat over the class buttons and the
   speed slider ran off the edge. Portrait gets room: brand and clocks on one
   line, slider on its own, the buttons on their own, nothing overlapping. */
@media (pointer: coarse) and (orientation: portrait) {
  #bar { flex-wrap: wrap; align-items: center; padding: 6px 8px; gap: 4px 8px; }
  #brand { order: 0; }
  #barmain {
    order: 1; flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: flex-end; gap: 4px 8px;
  }
  #clocks { order: 1; flex: 0 0 auto; }
  #speedbar {
    order: 2; width: 100%; box-sizing: border-box;
    margin: 0; padding: 0 2px; gap: 8px;
  }
  #speedbar .track { flex: 1 1 auto; min-width: 0; }

  /* out of the header entirely — its own line, so it can't cover anything */
  #fleabar {
    position: static; width: 100%;
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 2px 8px 4px; min-height: 0; background: none;
  }
  #fleabar #fs, #fleabar #reset { margin: 0; }

  #tune { gap: 6px 12px; }
  #tune label { flex: 1 1 46%; }
  #tune input[type=range] { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* ---------- setup slides out over the board ---------- */
#tune {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: min(330px, 88vw); height: 100%;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 18px; padding: 46px 18px 18px;
  background: #0c0c0f; border-left: 1px solid var(--line2);
  box-shadow: -18px 0 40px rgba(0,0,0,.55);
  transform: translateX(101%); transition: transform .22s ease;
}
body.setup-open #tune { transform: none; }
#tune label { justify-content: space-between; gap: 10px; }
#tune input[type=range] { flex: 1 1 auto; width: auto; min-width: 0; }
#tuneClose {
  position: absolute; top: 8px; right: 10px;
  padding: 6px 10px; font-size: 12px;
}
#setupBtn, #fsText, #restartText { white-space: nowrap; }

/* ---------- phone, portrait: scores ride with the logo ---------- */
@media (pointer: coarse) and (orientation: portrait) {
  #bar { padding: 4px 8px 2px; gap: 2px 8px; }
  #brand { order: 0; flex: 0 0 auto; }
  #barmain { order: 1; flex: 1 1 auto; }
  #clocks   { order: 0; flex: 0 0 auto; margin-left: auto; }
  #classbar { order: 1; flex: 1 1 100%; justify-content: center; }
  #speedbar { order: 2; }
  #bar #mark { height: 76px; margin: 0 0 -18px 0; }
  .clock { min-width: 50px; padding: 1px 6px; }

  /* that whole button row is gone — its jobs live in the strip below */
  #fleabar { display: none; }
  #underrow { display: none; }
}

/* Scores belong beside the logo, not on a line of their own: the header row
   must not wrap, and the block to its right does its own wrapping. */
@media (pointer: coarse) and (orientation: portrait) {
  #bar { flex-wrap: nowrap; align-items: flex-start; }
  #barmain { flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
  #clocks   { order: 0; flex: 0 0 auto; margin: 0 0 0 auto; }
  #classbar { order: 1; flex: 1 1 100%; justify-content: flex-end; }
  #speedbar { order: 2; flex: 1 1 100%; }
}

/* The panel is a COLUMN, so flex-basis on its rows is height, not width — the
   46% left over from the old horizontal strip gave each dial nearly half the
   panel and pushed Dual Rate and everything after it off the bottom. */
#tune label { flex: 0 0 auto; }
#tune { overflow-y: auto; }
@media (pointer: coarse) and (orientation: portrait) {
  #tune label { flex: 0 0 auto; }
}

/* ---------- split banner ---------- */
.split { display: flex; max-width: 1240px; margin: 0 auto; }
.half {
  flex: 1 1 50%; min-width: 0;
  display: block; padding: 26px 22px 22px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.half + .half { border-left: 1px solid var(--line); }
.half.radio {
  background: radial-gradient(520px 200px at 20% 0%, rgba(232,17,45,.18), transparent 70%),
              linear-gradient(180deg, #121214 0%, #0a0a0c 100%);
}
.half.cars {
  background: radial-gradient(520px 200px at 80% 0%, rgba(255,212,0,.14), transparent 70%),
              linear-gradient(180deg, #121214 0%, #0a0a0c 100%);
}
.half .kicker {
  display: block; margin-bottom: 5px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--pink);
}
.half h2 {
  margin: 0 0 12px;
  font-size: clamp(19px, 3.2vw, 34px); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.03;
  background: linear-gradient(180deg, #fff 0%, #cfd3d8 46%, #7d838c 54%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.half .go {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff; font: 800 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
.half:hover .go { filter: brightness(1.12); }

/* On a phone it lives in the gap between the board and the thumb pads. */
@media (pointer: coarse) and (orientation: portrait) {
  .split { gap: 8px; }
  .half { padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; }
  .half + .half { border-left: 1px solid var(--line2); }
  .half .kicker { display: none; }
  .half h2 { margin: 0 0 8px; font-size: 15px; }
  .half .go { padding: 6px 10px; font-size: 9px; }

}

/* ---------- the logo slot ---------- */
/* This space belongs to whoever's track you are driving: our wordmark by
   default, a club's logo when one is set. Fixed box, image contained, so any
   shape of club logo drops in without moving the header around. */
#logoslot {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: flex-start;
  height: 74px; max-width: 420px;
}
#bar #word {
  height: auto; width: auto;
  max-height: 100%; max-width: 100%;
  object-fit: contain; object-position: left center;
  margin: 0;
}
@media (max-width: 760px), (pointer: coarse) {
  #logoslot { height: 52px; max-width: none; }
}
@media (pointer: coarse) and (orientation: portrait) {
  #logoslot { height: 56px; }
  #brand { flex: 1 1 auto; min-width: 0; }
}

/* The Associate disclosure has to be visible wherever the links are — it was
   hidden when the banner moved into the gap on phones. Small, but present. */

/* ---------- Connect drawer ---------- */
/* The banner used to sit under the board eating the space the controls wanted.
   It is a drawer now: tap Connect, it comes in from the left, tap away and the
   track is clean again. The Associate line rides inside it, with the links. */
#gear {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: min(360px, 90vw); height: 100%;
  padding: 46px 16px 16px;
  overflow-y: auto;
  background: #0c0c0f; border-right: 1px solid var(--line2);
  box-shadow: 18px 0 40px rgba(0,0,0,.55);
  transform: translateX(-101%); transition: transform .22s ease;
}
body.connect-open #gear { transform: none; }
#gearClose { position: absolute; top: 8px; right: 10px; padding: 6px 10px; font-size: 12px; }
#gear button {
  border: 1px solid var(--line2); border-radius: 999px;
  background: #101014; color: var(--dim);
  font: 700 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}
#gear .split { flex-direction: column; gap: 12px; }
#gear .half {
  flex: 0 0 auto; border: 1px solid var(--line2); border-radius: 12px;
  padding: 16px 14px;
}
#gear .half + .half { border-left: 1px solid var(--line2); }
#gear .half .kicker { display: block; }
#gear .half h2 { font-size: 22px; }
#gear .aff {
  display: block; margin: 14px 2px 0;
  font-size: 10px; line-height: 1.45; color: var(--dim);
}

/* ---------- setup rows ---------- */
/* Five dials squeezed onto one line each is where it turned into a mess: the
   name, a squashed slider and a number all fighting for 300px. Name and value
   on top, slider full width underneath. */
#tune { gap: 0; }
#tune .tunehead {
  margin: 0 0 14px; font: 800 11px/1 var(--font);
  letter-spacing: .24em; text-transform: uppercase; color: var(--pink);
}
#tune label {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 10px; margin-bottom: 16px;
}
#tune label span { font: 700 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
#tune label b { justify-self: end; color: #fff; font-size: 12px; }
#tune input[type=range] { grid-column: 1 / -1; width: 100%; height: 26px; }
@media (pointer: coarse) { #tune label:has(#tuneview) { display: none; } }

#tune label.chk { grid-template-columns: 1fr auto; margin-bottom: 18px; }
#tune label.chk input { width: 22px; height: 22px; accent-color: var(--red); justify-self: end; grid-column: auto; }

/* Flea first, logo second — always. The slot is greedy, so without an explicit
   order and no-wrap it pushed the mascot onto its own line to the right. */
#brand { flex-wrap: nowrap; }
#bar #mark { order: 0; flex: 0 0 auto; }
#logoslot { order: 1; }

/* The slot must never be squeezed to nothing — a club logo has to be legible
   even when the header is tight, so it keeps a floor and the flea gives way. */
#logoslot { min-width: 170px; }
@media (max-width: 760px), (pointer: coarse) { #logoslot { min-width: 120px; } }
@media (pointer: coarse) and (orientation: portrait) {
  #logoslot { min-width: 118px; }
  #bar #mark { max-width: 34vw; }
}

/* Size the logo by HEIGHT, not by flex. A flex-sized slot next to the mascot
   kept collapsing to zero width and the wordmark vanished; driving it off the
   slot height means the image always draws at its natural proportions and
   simply takes the width it needs. As big as the header allows. */
#logoslot { flex: 0 1 auto; min-width: 0; overflow: hidden; height: 84px; }
#bar #word { height: 100%; width: auto; max-width: none; max-height: 100%; margin: 0; }
@media (max-width: 760px), (pointer: coarse) { #logoslot { height: 60px; } }
@media (pointer: coarse) and (orientation: portrait) {
  #logoslot { height: 62px; }
  #bar #mark { max-width: 30vw; }
}

/* ---------- restart: its own bubble, centred ---------- */
#radio { flex-wrap: wrap; justify-content: flex-start; }
#restartText {
  flex: 0 0 auto; margin: 6px auto 2px;
  padding: 11px 30px; border-radius: 999px;
  border: 1px solid var(--red);
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff; font: 800 11px/1 var(--font); letter-spacing: .18em;
}
#restartText:hover { filter: brightness(1.12); }
@media (pointer: coarse) {
  #radio { justify-content: center; row-gap: 6px; }
  #restartText { flex: 1 1 100%; max-width: 260px; }
}

/* Its own row, centred by the row rather than by margins that other flex rules
   kept overruling. */
#restartrow {
  flex: 1 1 100%; display: flex; justify-content: center;
  margin-top: 4px;
}
#restartText { flex: 0 0 auto; margin: 0; max-width: none; }

/* #radio button outranks #restartText on its own, which is why the pill kept
   coming out as a plain strip button. Two ids beats it. */
#radio #restartText {
  padding: 12px 34px; border-radius: 999px;
  border: 1px solid var(--line2);
  background: #141418;
  color: var(--dim); font: 800 12px/1 var(--font); letter-spacing: .2em;
  width: auto;
}
#radio #restartText:hover { border-color: var(--red); color: #fff; }

/* The slot was clipping the logo: sized by height with overflow hidden, so a
   wide wordmark got cropped instead of scaled. Fit it to BOTH dimensions. */
#logoslot { overflow: visible; }
#bar #word {
  height: 100%; width: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: left center;
}

/* The thumb pads are absolutely placed in the stage and hang past its trimmed
   bottom edge, which was covering the first row of the radio strip. The strip
   sits above them. */
#radio { position: relative; z-index: 20; }

/* Let the slot take whatever the header has spare, so the logo draws as large
   as it can while staying inside its own box. */
#logoslot { flex: 1 1 auto; }
#bar #word { object-position: left center; }
@media (pointer: coarse) and (orientation: portrait) {
  #brand { flex: 1 1 auto; min-width: 0; }
  #logoslot { flex: 1 1 auto; min-width: 100px; height: 66px; }
}

/* Sit the wordmark up on the clocks' line so the class row runs clear beneath
   it — it was tall enough to reach down into the buttons. */
@media (pointer: coarse) and (orientation: portrait) {
  #brand { align-items: flex-start; }
  #logoslot { align-self: flex-start; height: 40px; margin-top: 3px; }
  #bar #mark { margin-top: 2px; }
}

/* The brand was allowed to shrink under its own content, so the logo painted
   outside its box and the class row started underneath it. It holds its width;
   the slot is capped instead so the header still fits. */
@media (pointer: coarse) and (orientation: portrait) {
  #brand { flex: 0 0 auto; }
  #logoslot { flex: 0 0 auto; width: 38vw; max-width: 190px; min-width: 96px; }
  #barmain { flex: 1 1 auto; }
}

/* With the brand holding its width the class row has less to play with, so the
   buttons tighten rather than wrapping onto a second line. */
@media (pointer: coarse) and (orientation: portrait) {
  #logoslot { width: 32vw; max-width: 150px; }
  #barmain #classbar { flex-wrap: nowrap; gap: 4px; }
  .cls { padding: 5px 7px; font-size: 9px; letter-spacing: .04em; }
}

/* Four class buttons need about 205px; give the row that much by trimming the
   logo slot, so it stays a single line. */
@media (pointer: coarse) and (orientation: portrait) {
  #logoslot { width: 26vw; max-width: 118px; min-width: 84px; }
  #bar #mark { max-width: 26vw; }
  #barmain #classbar { flex-wrap: nowrap; gap: 3px; justify-content: flex-end; }
  .cls { padding: 5px 6px; font-size: 9px; }
}

/* ---------- the market rail ----------
   A panel over the middle of the screen hides the very thing you are changing -
   you cannot pick a track colour you cannot see. So the market is a rail down
   the FAR LEFT and the board shifts over to sit beside it, still whole, still
   repainting live as the swatches are pressed. Cars and paint are not something
   you watch the track for, so they live in a shed that swings out from the rail
   only when it is asked for. Nothing scrolls. */
#trackdrawer.rail {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 252px; height: 100%;
  display: flex; flex-direction: column;
  background: #0c0c0f; border-right: 1px solid var(--line2);
  box-shadow: 16px 0 46px rgba(0,0,0,.6);
  transform: translateX(-101%);
  transition: transform .2s ease, width .2s ease;
}
body.track-open #trackdrawer.rail { transform: none; }

/* THE BOARD DOES NOT MOVE (Scott). Pushing the shell over narrowed the stage,
   which re-fitted the whole track every time a side panel opened. The drawer
   slides over the top like the others; the track stays exactly where it is. */
#shell { transition: padding-left .2s ease; }

.rail .phead {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line2);
}
.rail .phead .grow { flex: 1; }
.rail .markethead {
  margin: 0; font: 900 italic 16px/1 var(--font);
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.railbody {
  flex: 1; min-height: 0; padding: 12px 14px;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.rail .tunehead {
  margin: 0 0 10px; flex: none; font: 800 10px/1 var(--font);
  letter-spacing: .22em; text-transform: uppercase; color: var(--pink);
}
.railbody > .tunehead ~ .tunehead { margin-top: 16px; }

#trackpick { display: flex; flex-direction: column; gap: 5px; flex: none; }
#trackpick button {
  padding: 8px 12px; text-align: left;
  border: 1px solid var(--line2); border-radius: 10px;
  background: #101014; color: var(--dim);
  font: 800 11px/1 var(--font); letter-spacing: .15em; text-transform: uppercase;
  cursor: pointer;
}
#trackpick button.on { border-color: var(--red); color: #fff; background: #16161c; }

.rail .tick {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12px; color: var(--dim);
}
.rail .tick input { accent-color: var(--red); cursor: pointer; }
#revrow { margin-top: 10px; flex: none; }
/* NINE FULL-WIDTH ROWS OF NAMED SWATCHES ATE THE RAIL. The colour is the
   label - the name lives in the tooltip. */
#gthemes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex: none; }
#gthemes .sw {
  padding: 0; border: 1px solid #24242b; border-radius: 8px; cursor: pointer;
  background: #101014; aspect-ratio: 1 / 1; display: grid; place-items: center;
}
#gthemes .sw span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 18px; border-radius: 4px; border: 3px solid;
}
#gthemes .sw i { display: block; width: 8px; height: 8px; border-radius: 50%; }
#gthemes .sw.on { border-color: #fff; }
#trailrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none; }
#trailcols { display: inline-flex; gap: 6px; }
#trailcols .tc {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent;
}
#trailcols .tc.on { border-color: #fff; }

/* Tracks and Cars are FOLDS - open by default, because the whole point of the
   rail is that everything is in front of you, but able to be shut so a long
   track list never pushes the rest off the bottom. */
.fold { flex: none; margin-top: 14px; display: flex; flex-direction: column; min-height: 0; }
.foldtab {
  flex: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 0 7px; margin: 0 0 9px; border: 0;
  border-bottom: 1px solid var(--line2); background: none;
  font: 800 10px/1 var(--font); letter-spacing: .22em; text-transform: uppercase;
  color: var(--pink);
}
.foldtab:hover { color: #fff; }
.foldtab i { font-style: normal; font-size: 15px; color: #6a6a76; transition: transform .16s ease; }
.fold.open .foldtab i { transform: rotate(90deg); }
.foldbody { display: none; flex-direction: column; min-height: 0; }
.fold.open .foldbody { display: flex; }
.foldbody h4 {
  margin: 11px 0 6px; font: 800 9px/1 var(--font);
  letter-spacing: .18em; text-transform: uppercase; color: #6a6a76;
}
.foldbody h4:first-child { margin-top: 0; }

/* Track Maker sits at the foot of the market, out of the way of the board */
.railfoot { flex: none; padding: 10px 14px; border-top: 1px solid var(--line2); }
.makerlink {
  display: block; text-align: center; padding: 14px 13px;
  border: 1px solid var(--red); border-radius: 12px;
  background: var(--red); color: #fff; text-decoration: none;
  font: 900 13px/1 var(--font); letter-spacing: .18em; text-transform: uppercase;
}
.makerlink:hover { background: #ff2742; border-color: #ff2742; }
.railfoot .makerlink + .makerlink { margin-top: 8px; }

#trackClose, #radioClose { padding: 6px 11px; font-size: 13px; }

/* ---------- the radio panel, still a big landscape sheet ---------- */
.bigpanel {
  position: fixed; z-index: 60;
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.97);
  width: min(1180px, 94vw); height: min(720px, 88vh);
  display: flex; flex-direction: column;
  background: #0c0c0f; border: 1px solid var(--line2); border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.bigpanel[hidden] { display: none; }
body.setup-open #setuppanel {
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
}
body.setup-open #stage { filter: brightness(.45) saturate(.6); }
#setupframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 0 0 15px 15px; }
body.radio-open #radiopanel {
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
}
body.radio-open #stage { filter: brightness(.45) saturate(.6); }
.bigpanel .phead {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line2);
}
.bigpanel .phead .grow { flex: 1; }
.bigpanel .markethead {
  margin: 0; font: 900 italic 18px/1 var(--font);
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.bigpanel .popout {
  padding: 7px 13px; border: 1px solid var(--line2); border-radius: 999px;
  background: #101014; color: var(--dim); text-decoration: none;
  font: 700 9.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
.bigpanel .popout:hover { border-color: var(--red); color: #fff; }
.bigpanel .pbody { flex: 1; min-height: 0; }
#radioframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 0 0 15px 15px; }

/* (the drawer overlays at every width now - nothing to undo here) */
}

#trackwhy { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
#trackwhy:empty { display: none; }
#trackwhy b {
  font: 800 10px/1.4 var(--font); letter-spacing: .14em;
  text-transform: uppercase; color: #ffb02e;
}
#trackwhy span { font: 500 11px/1.45 var(--font); color: #8a8a95; }
#trackwhy em { color: #cdd1d8; font-style: normal; font-weight: 700; }

#ghostrow { margin-top: 12px; flex: none; display: flex; flex-direction: column; gap: 7px; }
#ghostinfo { font: 500 11px/1.4 var(--font); color: #8a8a95; }
#ghostinfo b { color: #4dff59; font: 800 10px/1.4 var(--font); letter-spacing: .12em; }
#ghostinfo span { color: #6a6a76; }
#ghostrec {
  padding: 9px 11px; border: 1px solid var(--line2); border-radius: 10px;
  background: #101014; color: var(--dim); cursor: pointer;
  font: 800 9.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
#ghostrec:hover { border-color: var(--red); color: #fff; }

/* the card that fires when the TQ run falls */
#champ {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.72); opacity: 0; transition: opacity .2s ease;
}
#champ[hidden] { display: none; }
#champ.show { opacity: 1; }
#champ .card {
  width: min(460px, 94vw); text-align: center; padding: 28px 26px 22px;
  border: 1px solid var(--line2); border-radius: 18px; background: #0c0c0f;
  box-shadow: 0 30px 90px rgba(0,0,0,.8);
}
#champ h1 {
  margin: 0; font: 900 italic 30px/1.05 var(--font);
  letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
#champ .sub {
  margin-top: 8px; font: 800 10px/1 var(--font);
  letter-spacing: .3em; text-transform: uppercase; color: #4dff59;
}
#champ .who {
  margin-top: 14px; font: 900 italic 20px/1 var(--font);
  letter-spacing: .04em; text-transform: uppercase; color: var(--red);
}
#champ .race { margin: 14px 0 2px; display: flex; align-items: baseline; justify-content: center; gap: 14px; }
#champ .race[hidden] { display: none; }
#champ .race b { font: 900 26px/1 var(--font); color: #fff; letter-spacing: .04em; }
#champ .race span { font: 900 34px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; }
#champ .lap em {
  display: block; font: 800 10px/1 var(--font); font-style: normal;
  letter-spacing: .26em; text-transform: uppercase; color: var(--pink); margin-bottom: 6px;
}
#champ .lap em[hidden] { display: none; }
#champ .lap { margin: 12px 0 4px; }
#champ .lap span {
  font: 900 52px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums;
}
#champ .lap small { font: 800 15px/1 var(--font); color: #6a6a76; margin-left: 4px; }
#champ p { margin: 8px 0 0; font-size: 12px; color: #9a9aa6; line-height: 1.5; }
#champ .winbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px; }
#champ .winbtns button {
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: #101014; color: var(--dim);
  font: 800 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
#champ .winbtns button.go { border-color: var(--red); color: #fff; background: #16161c; }
#champ .winbtns button:hover { border-color: var(--red); color: #fff; }
#champnote { margin-top: 12px; font-size: 11px; color: #6a6a76; min-height: 14px; }
/* the run line under the time wore the browser's plain face - same racing
   clothes as everything else on the card */
#champline {
  margin-top: 10px; font: 800 11px/1.7 var(--font);
  letter-spacing: .18em; text-transform: uppercase; color: #9a9aa6;
}

#linestat { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
#linestat b {
  font: 800 10px/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
#linestat b.ok { color: #4dff59; }
#linestat b.no { color: #ffb02e; }
#linestat b.plain { color: #7a7a86; }
#linestat span { font: 500 11px/1.45 var(--font); color: #8a8a95; }

.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.shelf .item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 7px 6px; border: 1px solid var(--line2); border-radius: 12px;
  background: #101014; color: #9a9aa6; cursor: pointer;
  font: 800 9px/1.25 var(--font); letter-spacing: .12em; text-transform: uppercase;
  text-align: center;
}
.shelf .item:hover { border-color: #3a3a45; color: #cdd1d8; }
.shelf .item.on { border-color: #fff; color: #fff; background: #16161c; }
.shelf .item img { width: 100%; height: 34px; object-fit: contain; }
.shelf .item .chip {
  width: 100%; height: 34px; border-radius: 8px;
  background: var(--sw, #333); border: 2px solid rgba(255,255,255,.14);
}
/* Nothing on the shelf yet is still a shelf - it says so rather than sitting
   empty and reading as broken. */
.shelf .soon {
  grid-column: 1 / -1; padding: 12px 10px; border: 1px dashed var(--line2);
  border-radius: 12px; color: #6a6a76; text-align: center;
  font: 700 9px/1.5 var(--font); letter-spacing: .16em; text-transform: uppercase;
}

#radio .mklink {
  padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px;
  background: #101014; color: var(--dim); text-decoration: none;
  font: 700 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
#radio .mklink:hover { border-color: var(--red); color: #fff; }

/* "Unlimited" sits under the hot lap. It is a race-class word, so it wears the
   same heavy italic caps as the card's own title instead of a grey form label. */
#win .contlab {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; cursor: pointer; user-select: none;
}
#win .contlab input { width: 15px; height: 15px; accent-color: var(--red); cursor: pointer; }
#win .contlab span {
  font: 900 italic 17px/1 var(--font);
  letter-spacing: .10em; text-transform: uppercase;
  color: #7d838c; transition: color .15s ease, text-shadow .15s ease;
}
#win .contlab:hover span { color: #b9bec6; }
#win .contlab input:checked + span {
  background: linear-gradient(180deg, #fff, #cfd3d8 52%, #7d838c 53%, #fff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(232,17,45,.45);
}

/* the 3D view takes the same box as the flat board */
#cv3d { display: block; width: 100%; height: 100%; touch-action: none; }
#radio #vrBtn { border-color: #6f4bd8; color: #cbbcff; }
#radio #vrBtn:hover { border-color: #a855f7; color: #fff; }

/* the Watch panel - his own videos, never autoplayed */
#tube {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw; z-index: 60;
  padding: 16px; box-sizing: border-box; overflow-y: auto;
  background: #0b0b0f; border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .18s ease;
}
#tube.show { transform: none; }
#tube #tubeClose { position: absolute; top: 10px; right: 12px;
  border: 0; background: none; color: var(--dim); font-size: 20px; cursor: pointer; }
#tubelist { display: flex; flex-direction: column; gap: 12px; }
#tubelist .vcard {
  display: block; width: 100%; padding: 0; cursor: pointer; text-align: left;
  border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; background: #101014;
}
#tubelist .vcard:hover { border-color: var(--red); }
#tubelist .vcard img { display: block; width: 100%; height: auto; }
#tubelist .vcard span {
  display: block; padding: 9px 11px; color: #fff;
  font: 800 11px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase;
}
#tubelist iframe { border-radius: 10px; display: block; }
#radio #tubeBtn { border-color: #c4302b; color: #ff8f8b; }
#radio #tubeBtn:hover { border-color: #ff3b34; color: #fff; }

/* the race panel: entry, the round in progress, and the board */
#racepanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 94vw; z-index: 70;
  padding: 16px; box-sizing: border-box; overflow-y: auto;
  background: #0b0b0f; border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .18s ease;
}
#racepanel.show { transform: none; }
#racepanel #raceClose { position: absolute; top: 10px; right: 12px;
  border: 0; background: none; color: var(--dim); font-size: 20px; cursor: pointer; }
#racepanel .rcrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#racepanel label { font: 700 9px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
#racepanel input { padding: 10px; border: 1px solid var(--line2); border-radius: 8px;
  background: #101014; color: #fff; font: 700 15px/1 var(--font); }
#racepanel .rcgo { width: 100%; padding: 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo)); color: #fff;
  font: 800 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
#racepanel .rcmsg { min-height: 18px; color: #ff6b7a; font-size: 12px; margin-bottom: 8px; }
#racepanel .rcwho { color: #fff; font: 800 13px/1 var(--font); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 12px; }
#racepanel .rcwho button { margin-left: 8px; border: 0; background: none; cursor: pointer;
  color: var(--dim); font-size: 11px; text-decoration: underline; }
#racepanel .rcpick, #racepanel .rclen { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
#racepanel .rck, #racepanel .rcl { flex: 1 1 auto; padding: 10px 8px; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 999px; background: #101014; color: var(--dim);
  font: 800 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
#racepanel .rck.on, #racepanel .rck:hover, #racepanel .rcl:hover { border-color: var(--red); color: #fff; }
#racepanel .rclive { display: flex; align-items: baseline; justify-content: space-between;
  color: #fff; font: 800 13px/1 var(--font); text-transform: uppercase; letter-spacing: .1em; }
#racepanel .rcclock { font: 800 26px/1 ui-monospace, Consolas, monospace; color: #ff2d95; }
#racepanel .rcstat { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 10px;
  margin: 12px 0; align-items: baseline; }
#racepanel .rcstat span { font: 700 9px/1 var(--font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }
#racepanel .rcstat b { font: 800 20px/1 ui-monospace, Consolas, monospace; color: #fff; }
#racepanel .rcdone { margin: 12px 0; padding: 12px; border: 1px solid var(--line2);
  border-radius: 10px; color: var(--dim); font-size: 13px; }
#racepanel .rcdone b { color: #fff; font-size: 16px; }
#racepanel .rcpos { color: #ff2d95; font: 800 15px/1 var(--font); }
#racepanel .rcerrline { color: #ff6b7a; }
#racepanel .rchead { margin: 16px 0 8px; font: 700 9px/1 var(--font); letter-spacing: .16em;
  text-transform: uppercase; color: var(--pink); }
#racepanel .rcboard { width: 100%; border-collapse: collapse; font-size: 12px; }
#racepanel .rcboard th { text-align: left; color: var(--dim); font: 700 9px/1 var(--font);
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 4px; border-bottom: 1px solid var(--line); }
#racepanel .rcboard td { padding: 6px 4px; color: #cfd3d8; border-bottom: 1px solid #16161c;
  font-variant-numeric: tabular-nums; }
#racepanel .rcboard tr.me td { color: #fff; background: rgba(232,17,45,.12); }
#racepanel .rcboard i { color: var(--dim); font-style: normal; font-size: 10px; text-transform: uppercase; }
#racepanel .rcempty { color: var(--dim); font-size: 12px; }
#racepanel .rcresults { width: 100%; padding: 12px; margin-top: 14px; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 8px; background: #16161d; color: #fff;
  font: 700 12px/1 var(--font); text-transform: uppercase; letter-spacing: .1em;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#racepanel .rcresults:hover { border-color: var(--red); }
#racepanel .rcresults .rcexp { color: var(--dim); font: 700 9px/1 var(--font); letter-spacing: .16em; }

/* Save to leaderboard sits quiet and gray - not a red call to action */
#racepanel #rcsend { background: #3a3a42; color: #cfd3d8; }
#racepanel #rcsend:hover { background: #46464f; color: #fff; }

/* THE FINISH POPUP - centered card over the track */
#finishpop { position: fixed; inset: 0; z-index: 70; display: none;
  background: rgba(0, 0, 0, .72); align-items: center; justify-content: center; }
#finishpop.show { display: flex; }
#finishpop .finish-in { position: relative; width: min(420px, 92vw); max-height: 84vh;
  overflow-y: auto; background: #101017; border: 1px solid var(--line2);
  border-radius: 14px; padding: 20px 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); }
#finishpop #finclose { position: absolute; top: 10px; right: 12px; border: 0; background: none;
  color: var(--dim); font-size: 16px; cursor: pointer; }
#finishpop #finclose:hover { color: #fff; }
#finishpop .rctrophy { font: 900 64px/1.1 var(--font); color: #fff; text-align: center;
  letter-spacing: .02em; margin: 8px 0 0; }
#finishpop .rctrophy.gold { color: #ffd34d; }
#finishpop .rctrophy.silver { color: #cfd6de; }
#finishpop .rctrophy.bronze { color: #d99a5b; }
#finishpop .rcof { text-align: center; color: var(--dim); font: 700 12px/1 var(--font);
  text-transform: uppercase; letter-spacing: .18em; margin: 4px 0 12px; }
#finishpop .finsum { text-align: center; color: #cfd3d8; font: 600 14px/1.4 var(--font);
  margin-bottom: 10px; }
#finishpop .finsum b { color: #fff; }
#finishpop .finlaps { list-style: none; margin: 0 0 12px; padding: 0; max-height: 300px;
  overflow-y: auto; }
#finishpop .finlaps li span { min-width: 3.2em; }
#finishpop .finlaps li b { font-variant-numeric: tabular-nums; }
#finishpop .finlaps li { display: flex; justify-content: space-between; padding: 6px 10px;
  color: #cfd3d8; border-bottom: 1px solid #16161c;
  font: 700 15px/1 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
#finishpop .finlaps li.fast { color: #ff2d95; background: rgba(255, 45, 149, .08); }
#finishpop .finsave { width: 100%; padding: 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: #3a3a42; color: #cfd3d8; font: 700 13px/1 var(--font); }
#finishpop .finsave:hover { background: #46464f; color: #fff; }
#finishpop .rcsaved { text-align: center; color: #4dff59; font: 700 13px/1 var(--font); }

/* THE TROPHY - the finish position, huge */
#racepanel .rctrophy { font: 900 44px/1.1 var(--font); color: #fff; text-align: center;
  letter-spacing: .02em; margin: 4px 0 0; }
#racepanel .rctrophy.gold { color: #ffd34d; }
#racepanel .rctrophy.silver { color: #cfd6de; }
#racepanel .rctrophy.bronze { color: #d99a5b; }
#racepanel .rcof { text-align: center; color: var(--dim); font: 700 12px/1 var(--font);
  text-transform: uppercase; letter-spacing: .18em; margin: 2px 0 10px; }

/* THE BIG RACE COUNTDOWN - two minutes to zero, over the track */
/* THE RACE CLOCK sits ABOVE the boards (Scott) - clear of the track, up at
   the top of the screen, so it never sits over the racing. */
/* THE RACE CLOCK drops into the empty band between the class bar and the
   boards (Scott) - clear of the buttons, clear of the track. */
#bigclock { position: fixed; top: 86px; left: 50%; transform: translateX(-50%);
  z-index: 45; pointer-events: none; display: none;
  font: 900 42px ui-monospace, Consolas, monospace; color: #fff;
  letter-spacing: .04em; text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
  font-variant-numeric: tabular-nums; line-height: 1; }
@media (max-height: 780px) { #bigclock { font-size: 32px; top: 74px; } }
#bigclock.low { color: #ff2d3f; }

/* THE FULL RACE RESULTS CARD */
#rescard { position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(0, 0, 0, .72); align-items: center; justify-content: center; }
#rescard.show { display: flex; }
#rescard .rescard-in { position: relative; width: min(560px, 92vw); max-height: 84vh;
  overflow-y: auto; background: #101017; border: 1px solid var(--line2);
  border-radius: 14px; padding: 18px 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); }
#rescard h3 { margin: 0 0 6px; font: 800 15px/1.2 var(--font); text-transform: uppercase;
  letter-spacing: .1em; color: #fff; }
#rescard #resClose { position: absolute; top: 10px; right: 12px; border: 0; background: none;
  color: var(--dim); font-size: 16px; cursor: pointer; }
#rescard #resClose:hover { color: #fff; }
#rescard .rcclass { margin: 14px 0 6px; font: 800 11px/1 var(--font); color: var(--pink);
  text-transform: uppercase; letter-spacing: .14em; }
#rescard .rcboard { width: 100%; border-collapse: collapse; font-size: 13px; }
#rescard .rcboard th { text-align: left; color: var(--dim); font: 700 9px/1 var(--font);
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 4px; border-bottom: 1px solid var(--line); }
#rescard .rcboard td { padding: 7px 4px; color: #cfd3d8; border-bottom: 1px solid #16161c;
  font-variant-numeric: tabular-nums; }
#rescard .rcboard tr.me td { color: #fff; background: rgba(232, 17, 45, .12); }
#rescard .rcempty { color: var(--dim); font-size: 12px; }
#rescard .rcdel { margin-left: 8px; border: 0; background: none; cursor: pointer;
  color: var(--dim); font-size: 10px; text-transform: uppercase; }
#rescard .rcdel:hover { color: #ff6b7a; }

#radio #raceBtn { border-color: #2f8f4a; color: #8ff0ac; }
#radio #raceBtn:hover { border-color: #4dff59; color: #fff; }

/* HIDDEN HAS TO MEAN HIDDEN. "#cv3d { display: block }" beats the browser's own
   [hidden] { display: none }, so the empty 3D canvas sat on top of the game
   canvas at full size and painted the track black. The game was running the
   whole time, underneath. Same trap caught the Pro28 admin login card. */
[hidden] { display: none !important; }

/* 3, 2, 1, GO - over the middle of the track */
#stage { position: relative; }
.lights {
  /* PINNED TO THE TRACK, AND IT NEVER TOUCHES THE LAYOUT. "inset: 0" alone let
     this box shrink-to-fit its own enormous text - measured at 2150x794 inside
     a 1280 stage - which grew the document, threw up both scrollbars and shoved
     the whole page sideways every time the countdown ran. Explicit size, and
     the glyph is clipped rather than allowed to push anything. */
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 40; overflow: hidden; contain: strict;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font: 900 italic clamp(46px, 9vw, 108px)/1 var(--font);
  color: #fff; letter-spacing: -.02em; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8);
}
.lights.pop { animation: lightpop .38s cubic-bezier(.2,.9,.25,1); }
@keyframes lightpop {
  0%   { transform: scale(1.7); opacity: 0; }
  55%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* the lap sheet */
#racepanel .rclaps {
  list-style: none; margin: 0 0 12px; padding: 0;
  max-height: 210px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px;
}
#racepanel .rclaps li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 10px; border-bottom: 1px solid #16161c;
}
#racepanel .rclaps li:last-child { border-bottom: 0; }
#racepanel .rclaps li span {
  color: var(--dim); font: 700 10px/1 var(--font); letter-spacing: .1em;
}
#racepanel .rclaps li b {
  color: #cfd3d8; font: 700 14px/1 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
#racepanel .rclaps li.fast b { color: #ff2d95; }
#racepanel .rcsaved {
  margin-top: 4px; padding: 11px; border-radius: 8px; text-align: center;
  background: rgba(77,255,89,.10); border: 1px solid rgba(77,255,89,.35); color: #8ff0ac;
  font: 800 10px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
}
#racepanel .rcgo[disabled] { opacity: .6; cursor: default; }

/* remove-my-time, and the End Race buttons on the page */
#racepanel .rcdel {
  margin-left: 6px; padding: 2px 7px; cursor: pointer;
  border: 1px solid #4a2027; border-radius: 999px; background: transparent; color: #ff8f9a;
  font: 700 8px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
}
#racepanel .rcdel:hover { border-color: var(--red); color: #fff; background: rgba(232,17,45,.18); }
/* END RACE SITS BESIDE RESTART AS AN EQUAL. A red gradient button shouting next
   to a muted pill looked like an alarm, not a control - same treatment, same
   size, just spaced off it so neither gets pressed by mistake. */
#restartrow { gap: 18px; }
#radio #restartText, #radio #endRaceText {
  padding: 12px 34px; border-radius: 999px;
  border: 1px solid var(--line2); background: #141418;
  color: var(--dim); font: 800 12px/1 var(--font); letter-spacing: .2em;
  width: auto; min-width: 190px; text-align: center;
}
#radio #restartText:hover, #radio #endRaceText:hover { border-color: var(--red); color: #fff; }
#fleabar { gap: 18px; }
#fleabar #reset, #fleabar #endRace { min-width: 150px; text-align: center; }
#fleabar #endRace {
  border-color: var(--line2); color: var(--dim); background: #141418;
}
#fleabar #endRace:hover { border-color: var(--red); color: #fff; }


/* DARK, THIN SCROLLBARS. The default light ones sat on a black panel like strips
   of tape, and the page-level bar appearing was what shoved the layout sideways
   during the countdown. */
html { scrollbar-width: thin; scrollbar-color: #2a2a33 transparent; }
#racepanel, #racepanel * { scrollbar-width: thin; scrollbar-color: #2a2a33 transparent; }
#racepanel ::-webkit-scrollbar, #racepanel::-webkit-scrollbar { width: 7px; height: 7px; }
#racepanel ::-webkit-scrollbar-track, #racepanel::-webkit-scrollbar-track { background: transparent; }
#racepanel ::-webkit-scrollbar-thumb, #racepanel::-webkit-scrollbar-thumb {
  background: #2a2a33; border-radius: 999px;
}
#racepanel ::-webkit-scrollbar-thumb:hover, #racepanel::-webkit-scrollbar-thumb:hover {
  background: #3a3a46;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #0b0b0e; }
::-webkit-scrollbar-thumb { background: #24242c; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #34343e; }

/* NOTHING THE GAME DRAWS MAY GROW THE PAGE. The board, the overlay and the
   panels all live inside the window; a stray pixel of overflow used to raise a
   scrollbar and move everything sideways mid-race. */
html, body { overflow: hidden; }
#stage { overflow: hidden; }

/* A REVERSE TIME, MARKED. Sitting unlabelled next to a forward lap it reads as
   a record on a track nobody ran. */
.rcrev{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  background:#ff2d95;color:#fff;font:800 10px/1.5 system-ui;letter-spacing:.1em;
  vertical-align:middle}

/* the standings: one small table per class, stars on golden-car runs */
.rcclass {
  margin: 12px 0 6px; font: 800 10px/1 var(--font);
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.rcgold { color: #ffd700; font-weight: 900; margin-left: 2px; }
.rcnote { margin: 8px 0 0; font-size: 10px; color: #6a6a76; }

/* the club promo card maker */
#promowrap { position: fixed; inset: 0; z-index: 120; overflow-y: auto;
  background: rgba(0,0,0,.86); display: flex; justify-content: center; padding: 24px; }
#promocard { width: min(560px, 94vw); }
#promocard h2 { font: 800 11px/1 var(--font); letter-spacing: .24em;
  text-transform: uppercase; color: var(--pink); margin: 0 0 12px; }
#promocard input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line2); border-radius: 10px;
  background: #101014; color: #fff; font: 700 15px var(--font); }
#promocard input:focus { outline: none; border-color: var(--red); }
#promocard canvas { width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--line2); display: block; }
#promocard .row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
#promocard button, #promocard .btn {
  padding: 12px 18px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--red); background: var(--red); color: #fff;
  font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
#promocard .ghost { background: #101014; border-color: var(--line2); color: var(--dim); }
#promonote { margin-top: 10px; color: #6a6a76; font-size: 12px; min-height: 16px; }

/* ON A CLUB PAGE THE CLUB IS THE HEADLINER. The mascot steps back to a badge
   and the club's logo takes the big slot the wordmark used to fill. */
body.clubpage #bar #mark { height: 84px; margin: -6px 0 -14px 0; }
body.clubpage #logoslot { height: 116px; max-width: 420px; flex: 0 1 auto; }
body.clubpage #bar #word {
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  margin: 0 0 0 4px; align-self: center;
}
@media (max-width: 760px), (pointer: coarse) {
  body.clubpage #bar #mark { height: 56px; margin: -4px 0 -8px 0; }
  body.clubpage #logoslot { height: 72px; max-width: 56vw; }
}


/* ---------- THE PHONE FLOW: splash, landscape-only, minimalist ---------- */
/* entered on a phone: the desktop chrome disappears - gas, brake, steering,
   classes and one Settings button are the entire interface. Keyed off the
   touchapp class the game sets ONCE - pointer:coarse queries flap. */
body.touchapp.entered #bar { display: none !important; }
body.touchapp.entered #fleabar { display: none !important; }
#phonebar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: 8px 12px; gap: 8px; align-items: center;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
body.touchapp.entered #phonebar { display: flex; }   /* every orientation */
#pmark { height: 30px; width: auto; }
/* the class list OWNS the strip above the track - the track starts below
   it, never underneath it */
body.touchapp.entered #stage { margin-top: 52px; }
#phonebar button { padding: 9px 15px; border-radius: 10px; border: 1px solid #2a2a32;
  background: rgba(14,14,18,0.82); color: #cdd1d8;
  font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#phonebar button.on { border-color: #ff2d95; color: #ff2d95; }
#phonebar .grow { flex: 1; }


/* Settings on a phone opens the WHOLE Flea Market as a big centre panel, not
   a skinny side rail */
@media (orientation: landscape) {
  body.touchapp.entered.track-open #trackdrawer.rail {
    position: fixed; inset: 4vh 6vw; width: auto; max-width: none; height: auto;
    transform: none; z-index: 70; border-radius: 18px; border: 1px solid #2a2a32;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow-y: auto;
  }
}

/* touch steering systems - only the chosen one shows its control */
#steerBtns, #steerSlider { display: none; }
body.ss-buttons #stick, body.ss-slider #stick, body.ss-tilt #stick { display: none !important; }
body.ss-buttons #steerBtns { display: flex; gap: 10px;
  position: absolute; right: 14px; bottom: 20px; }
#steerBtns .sbtn { position: static; width: 84px; height: 86px; font-size: 26px; }
body.ss-slider #steerSlider { display: block; position: absolute;
  right: 14px; bottom: 34px; width: min(46vw, 340px); height: 46px;
  border-radius: 999px; border: 1px solid var(--line2); background: #101014; }
#sliderKnob { position: absolute; top: 4px; left: 50%; width: 38px; height: 38px;
  margin-left: -19px; border-radius: 50%; background: #2a2a33;
  border: 2px solid var(--red); transition: left .05s linear; }
#steersys { display: flex; gap: 6px; flex-wrap: wrap; }
#steersys button { padding: 9px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: #101014; color: var(--dim);
  font: 800 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#steersys button.on { border-color: var(--red); color: #fff; background: #16161c; }


/* THE VERSION, BIG AND OBVIOUS (Scott: sick of guessing which build is up) */
#vertag { display: none; }
#vertag.show { display: block; position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
  font: 900 26px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em;
  color: #ff2d95; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }


/* THE FINISHING ORDER on the result popup - every car and its laps */
#finishpop .finorder { list-style: none; margin: 0 0 12px; padding: 0; }
#finishpop .finorder li { display: flex; align-items: center; gap: 10px; padding: 5px 10px;
  color: #aeb4ba; border-bottom: 1px solid #16161c;
  font: 700 13px/1 var(--font); }
#finishpop .finorder li span { min-width: 1.6em; color: var(--dim); }
#finishpop .finorder li em { flex: 1; font-style: normal; text-transform: uppercase;
  letter-spacing: .06em; }
#finishpop .finorder li b { font-variant-numeric: tabular-nums; color: #cfd3d8; }
#finishpop .finorder li.me { color: #fff; background: rgba(255, 45, 149, .10); }
#finishpop .finorder li.me em, #finishpop .finorder li.me b { color: #ff2d95; }


/* THE GAG CALLER - bottom right, says who just got it */
/* THE GAG CALLER - quiet. It is a caption, not a headline: the racing is the
   thing to watch (Scott). Small, dim, no box, no colour bar. */
#gagline { position: fixed; right: 16px; bottom: 50px; z-index: 46;
  pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
  font: 600 13px/1.2 var(--font); letter-spacing: .10em; color: #8b929a;
  text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
#gagline.show { opacity: .72; }
@media (max-width: 700px) { #gagline { font-size: 11px; right: 10px; bottom: 42px; } }


/* THE VERDICT, right beside the OF N and every bit as big (Scott). The old
   .rcnote is a footnote elsewhere on the page - this one is the headline. */
#finishpop .rcof, #racepanel .rcof { display: flex; align-items: baseline;
  justify-content: center; gap: .5em; }
#finishpop .rcof .rcnote, #racepanel .rcof .rcnote { display: inline-block;
  margin: 0; font: 900 26px/1 var(--font); letter-spacing: .02em;
  text-transform: none; color: #ffd34d; }


/* TESTING FOOTAGE BANNER - only up while the gag rig is running */
#testnote { position: fixed; top: 50%; left: 12px; transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center; z-index: 44; pointer-events: none; display: none;
  font: 900 15px/1 var(--font); letter-spacing: .36em; text-transform: uppercase;
  color: rgba(255, 45, 149, .85); white-space: nowrap; }
#testnote.show { display: block; }

/* Live channel numbers on the status bar: fixed-width figures so the row
   does not crawl sideways as the digits change. */
.axnums { font-family: Consolas, "DejaVu Sans Mono", monospace;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  white-space: pre; }

/* ---- Two buttons that never got styled ----------------------------------
   "Enter full screen" sits next to Restart on the same strip, and the Radio
   panel's close sits in the same header as "Open in its own tab" - both were
   falling through to the browser's default button, which renders as a white
   box on a black page. Matched to #reset and the other close buttons. */
#fs, #fsout, #fsText {
  padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #101014; color: var(--dim);
  font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
#fs:hover, #fsout:hover, #fsText:hover { border-color: var(--red); color: #fff; }

#radioClose {
  border: 0; background: none; color: #6a6a76; padding: 0 2px;
  font-size: 22px; line-height: 1; cursor: pointer;
}
#radioClose:hover { color: #fff; }

/* Same treatment for the last three that were never styled: the Flea Market
   panel's close, the delete on a saved TQ run, and End Race. */
#trackClose {
  border: 0; background: none; color: #6a6a76; padding: 0 2px;
  font-size: 22px; line-height: 1; cursor: pointer;
}
#trackClose:hover { color: #fff; }
#ghostdel, #endRace {
  padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #101014; color: var(--dim);
  font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
#ghostdel:hover, #endRace:hover { border-color: var(--red); color: #fff; }


/* NOTHING BELOW THE BOARD IS ALLOWED TO GROW. Every pixel here is track. */
#radio { overflow: hidden; }
#radio > * { flex: 0 0 auto; }
#radio #axes { flex: 1 1 auto; min-width: 0; }


/* THE THINNEST THE STRIP GOES (Scott: every pixel down there is track view).
   The tall things were the Marshal row and the message line, both of which had
   their own padding stacked on top of the bar's. */
#radio #restartrow { display: flex; gap: 6px; align-items: center; }
#radio #restartrow button, #radio button, #radio .mklink {
  padding: 2px 9px; line-height: 1.25; font-size: 10px;
}
#radio .mklink { display: inline-flex; align-items: center; }
#footrow { min-height: 0; }
#footrow #help, #footrow #msg { padding: 0; margin: 0; line-height: 1.35; font-size: 10.5px; }


/* ONE STRIP, THREE PARTS (Scott): what is on the left stays left, MARSHAL sits
   dead centre on its own, and the message finishes in the right corner - all on
   the same row. #footrow no longer exists as a row of its own. */
#radio { position: relative; justify-content: flex-start; }
#radio #axes { display: none; }
#radio #restartrow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
/* MARSHAL KEEPS ITS OWN SIZE (Scott) - the thin-bar rule was shrinking it with
   everything else. It is the one button you hit mid-race, so it stays a real
   button with room around it. */
#radio #restartrow button {
  padding: 9px 22px; font-size: 11px; line-height: 1.3;
}
/* THE ARROW-KEY LEGEND STAYS (Scott: I will tell you to remove something).
   It goes on the right of the bar, ahead of the message, on the same line. */
#radio #help {
  margin-left: auto; white-space: nowrap; font-size: 10.5px; line-height: 1.3;
  color: var(--dim, #6e6e79);
}
#radio #help b { color: #c9c9d2; }
/* ONE LINE, ALWAYS. Anything too long is cut with an ellipsis rather than
   wrapping and pushing the bar into a second row. */
#radio #msg {
  margin-left: 14px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 30vw; font-size: 10.5px; line-height: 1.3;
}
#radio { flex-wrap: nowrap !important; }


/* THE STRIP IS A FIXED HEIGHT (Scott). Nothing inside it may make it grow -
   that is how it kept eating the board - and MARSHAL sits centred in it with
   real room above and below, so it is an easy thing to hit mid-race. */
#radio {
  height: 62px !important; min-height: 62px !important; max-height: 62px !important;
  padding: 0 12px !important; box-sizing: border-box;
  align-items: center !important; overflow: visible !important;
}
#radio #restartrow {
  position: absolute !important; left: 50%; top: 50% !important;
  transform: translate(-50%, -50%) !important; margin: 0 !important;
}
#radio #restartrow button {
  padding: 7px 20px !important; font-size: 11px !important; line-height: 1.2 !important;
}
#radio #help, #radio #msg {
  align-self: center; max-height: 100%; overflow: hidden;
}


/* THE TOP STRIP IS GONE (Scott): Enter full screen and Restart already live on
   the bottom bar, so that row was 42px of black above the board doing nothing.
   The board takes the space - it now starts where those buttons were. */
#fleabar { display: none !important; }


/* THE ARROWS DO NOT MOVE (Scott). The message changes length constantly -
   connected, a gag callout, a lap note - and with both boxes sized to their
   text the legend slid left and right all race. The message now owns a fixed
   slot in the corner and the legend sits still beside it, whatever is in it. */
#radio #msg {
  flex: 0 0 22rem !important; width: 22rem; max-width: 22rem !important;
  margin-left: 14px !important; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#radio #help { flex: 0 0 auto !important; margin-left: auto !important; }


/* the key that does it, said quietly on the button itself */
#radio #restartrow .keyhint {
  opacity: .6; font-size: 9.5px; letter-spacing: .08em; margin-left: 4px;
}


/* ---------- THE PHONE STRIP IS TWO ROWS (Scott) ----------
   On a phone the links fill the whole width, so the centred MARSHAL sat on
   top of them. On touch only: the links ride the top row, MARSHAL gets a row
   of its own underneath, full width, easy to hit. Desktop is untouched. */
body.touchapp #radio {
  height: auto !important; min-height: 0 !important; max-height: none !important;
  flex-wrap: wrap !important; row-gap: 7px; padding: 7px 10px !important;
}
body.touchapp #radio #restartrow {
  position: static !important; transform: none !important; left: auto !important;
  order: 10; flex: 1 1 100%; display: flex; justify-content: center;
  margin: 0 !important;
}
body.touchapp #radio #help { display: none !important; }   /* arrow keys mean nothing here */
body.touchapp #radio #msg {
  order: 11; flex: 1 1 100% !important; width: auto !important; max-width: none !important;
  margin: 0 !important; text-align: center;
}
body.touchapp #radio #msg:empty { display: none; }

/* PHONE MODE: one marshal is plenty - HIS bar button stays, the round pad one goes */
body.phone #padMarshal { display: none; }
body.phone #livebadge { top: 64px; }

/* THE RACE LOBBY + the green button (Scott: taller, narrower, green) */
#racepanel .rclobby { list-style: none; margin: 0 0 8px; padding: 0; }
#racepanel .rclobby li { padding: 7px 10px; border: 1px solid var(--line2); border-radius: 8px;
  margin-bottom: 5px; font: 700 13px/1 var(--font); display: flex; justify-content: space-between; }
#racepanel .rclobby li.me { border-color: #ff2d95; }
#racepanel .rclobby li span { color: var(--dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
#racepanel .rcfill { color: var(--dim); font-size: 11px; text-align: center; margin: 6px 0; }
#racepanel .rclivestat { margin: 2px 0 8px; text-align: center; color: #37d67a;
  font: 800 10px/1 var(--font); letter-spacing: .12em; }
#racepanel .rcstart { display: block; width: 62%; margin: 10px auto 4px; padding: 18px 10px;
  border: 0; border-radius: 12px; cursor: pointer; background: #0f9d58; color: #fff;
  font: 800 16px/1 var(--font); letter-spacing: .12em; }
#racepanel .rcstart:active { transform: scale(.97); }

/* THE TWO FLIPS, on the strip where he drives */
#radio #revGasBtn.on, #radio #srevBtn.on { background: #ff2d95; border-color: #ff2d95; color: #fff; }

/* HOT LAP on the race panel */
#racepanel .rchot { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
#racepanel .rchot td { padding: 5px 6px; border-bottom: 1px solid var(--line2); font: 700 12px/1 var(--font); }
#racepanel .rchot .hc { color: var(--dim); width: 52px; letter-spacing: .10em; }
#racepanel .rchot .ht { text-align: right; color: #ff2d95; font-variant-numeric: tabular-nums; }

/* THE TRACKS PANEL - a card per track, its own picture and its name */
#trackspanel, #carspanel { position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; background: rgba(4,4,6,.72); }
#trackspanel.show, #carspanel.show { display: flex; }
#trackspanel .tpin, #carspanel .tpin { position: relative; width: min(920px, 92vw); max-height: 84vh; overflow: auto;
  background: #121218; border: 1px solid var(--line2); border-radius: 16px; padding: 18px 20px 22px; }
#trackspanel h3, #carspanel h3 { margin: 0 0 14px; font: 900 italic 18px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; color: #fff; }
#trackspanel .tpclose, #carspanel .tpclose { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--line2); background: #1a1a22; color: var(--dim); cursor: pointer; }
#trackspanel .tpgrid, #carspanel .tpgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 330px));
  gap: 10px; justify-content: center; }
#trackspanel .tpcard, #carspanel .tpcard { display: block; width: 100%; padding: 8px; cursor: pointer;
  background: #0f0f14; border: 1px solid var(--line2); border-radius: 12px; text-align: left; }
#trackspanel .tpcard:hover, #carspanel .tpcard:hover { border-color: var(--pink); transform: translateY(-2px); }
#trackspanel .tpshot, #carspanel .tpshot { display: flex; align-items: center; justify-content: center;
  height: min(16vh, 140px); background: #0b0b0e; border-radius: 8px; overflow: hidden; }
#trackspanel .tpshot img, #carspanel .tpshot img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
#trackspanel .tpshot i, #carspanel .tpshot i { color: #55555f; font: 700 10px/1 var(--font); letter-spacing: .14em; font-style: normal; }
#trackspanel .tpname, #carspanel .tpname { display: block; margin-top: 6px; text-align: center; color: #fff;
  font: 800 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }

#trackspanel .tpmaker, #carspanel .tpmaker { display: block; margin: 12px auto 0; width: min(320px, 80%);
  padding: 11px 10px; text-align: center; text-decoration: none;
  background: #c8102e; border-radius: 12px; color: #fff;
  font: 800 14px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
#trackspanel .tpmaker:hover, #carspanel .tpmaker:hover { background: #ff2d95; }

/* TRACK COLOURS on the Tracks panel - two rows of swatches */
#trackspanel .tpcolours, #carspanel .tpcolours { margin-top: 12px; display: flex; flex-direction: column; align-items: center; }
#trackspanel .tpcolours h4, #carspanel .tpcolours h4 { margin: 0 0 8px; color: var(--dim);
  font: 800 10px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
/* narrower colour row (Scott): the swatches are a strip, not a wall */
#trackspanel .tpswatches, #carspanel .tpswatches { display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 6px; max-width: 520px; margin: 0 auto; }
#trackspanel .tpcolours h4, #carspanel .tpcolours h4 { text-align: center; }
#trackspanel .tpsw, #carspanel .tpsw { padding: 4px; cursor: pointer; background: #0f0f14;
  border: 1px solid var(--line2); border-radius: 8px; }
/* every swatch the same size: a two-line name box, so a wrapped name like
   PIT LANE never makes its own square taller than the rest */
#trackspanel .tpsw:hover, #carspanel .tpsw:hover { border-color: var(--pink); }
#trackspanel .tpsw.on, #carspanel .tpsw.on { border-color: #fff; }
#trackspanel .tpsw .sw, #carspanel .tpsw .sw { position: relative; display: block; height: 18px; border-radius: 5px; overflow: hidden; }
#trackspanel .tpsw .sw i, #carspanel .tpsw .sw i { position: absolute; left: 0; right: 0; top: 7px; height: 12px; }
#trackspanel .tpsw .sw b, #carspanel .tpsw .sw b { position: absolute; left: 0; right: 0; top: 7px; height: 3px; }
#trackspanel .tpsw .nm, #carspanel .tpsw .nm { display: block; margin-top: 4px; height: 20px; overflow: hidden;
  color: var(--dim);
  font: 700 8px/10px var(--font); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) { #trackspanel .tpswatches, #carspanel .tpswatches { grid-template-columns: repeat(5, 1fr); } }

/* the car cards carry a sprite, not a board - a squarer window suits them */
#carspanel .tpshot { height: min(7.5vh, 64px); background: #0b0b0e; }
#carspanel .tpshot img { max-height: 92%; }
#carspanel .tpcard.on { border-color: #fff; }
#carspanel .tpgrid { grid-template-columns: repeat(3, minmax(0, 220px)); }
@media (max-width: 760px) { #carspanel .tpgrid { grid-template-columns: repeat(2, minmax(0, 200px)); } }
/* three up, three down (Scott) - a taller tile suits the wider column */
#carspanel .tpshot { height: min(9vh, 82px); }

/* the cars panel is a page of choices, not just cards */
#carspanel .cph { margin: 11px 0 7px; text-align: center; color: #cfcfd8;
  font: 800 12px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; }
#carspanel .cpcls { display: flex; justify-content: center; gap: 8px; }
#carspanel .cpc { padding: 10px 24px; background: #0f0f14; color: #fff; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 10px;
  font: 800 14px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#carspanel .cpc.on { background: var(--red, #c8102e); border-color: #fff; }
#carspanel .cppaint, #carspanel .cppoop, #carspanel .cpopts {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
#carspanel .cpopts > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#carspanel .cppaint .shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

#carspanel .tpgrid { gap: 8px; }
#carspanel .tpcard { padding: 6px; }
#carspanel .tpname { margin-top: 4px; font-size: 10px; }
/* THE OPTIONS ARE READ, NOT SQUINTED AT (Scott). Each one is a pill you press
   anywhere on, the tick itself is big, and a chosen option lights up - the bare
   8px checkbox was too small to aim at or to read. */
#carspanel .cpopts .tick { display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; background: #0f0f14; border: 1px solid var(--line2);
  border-radius: 10px; cursor: pointer; color: #cfcfd8;
  font: 800 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
#carspanel .cpopts .tick:hover { border-color: var(--pink); }
#carspanel .cpopts .tick:has(input:checked) { color: #fff; border-color: #fff; background: #1b1b22; }
#carspanel .cpopts input[type="checkbox"] { width: 18px; height: 18px; margin: 0;
  accent-color: #c8102e; cursor: pointer; }
#carspanel .cpopts #ghostinfo { color: var(--dim); font-size: 12px; letter-spacing: .06em; }
#carspanel .cpopts button { padding: 10px 18px; background: #1d1d24; color: #fff;
  border: 1px solid var(--line2); border-radius: 10px; cursor: pointer;
  font: 800 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
#carspanel .cpopts button:hover { border-color: var(--pink); }
#carspanel .cppaint .item { padding: 6px; }
#carspanel .cppaint .item span { font: 800 12px/1 var(--font); letter-spacing: .1em; }
#carspanel .cppoop { gap: 14px; font-size: 14px; }
#carspanel .cppoop .tick { display: inline-flex; align-items: center; gap: 10px;
  color: #cfcfd8; font: 800 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
#carspanel .cppoop input[type="checkbox"] { width: 18px; height: 18px; accent-color: #c8102e; }
#carspanel .cppoop .tc { width: 22px; height: 22px; border-radius: 50%; }

/* the strip styles every button, so the hidden attribute alone did not take */
#radio #trackBtn { display: none; }

/* the car reads smaller than the rest at the same box - give it the bigger one */
#radio #carsBtn .btico { width: 24px; height: 24px; vertical-align: -7px; }

/* the speed slider, moved in under the class row */
#carspanel .cpspeed { display: flex; justify-content: center; margin-top: 12px; }
#carspanel .cpspeed #speedbar { display: flex; align-items: center; gap: 10px; }
#carspanel .cpspeed #speedbar span { font: 800 11px/1 var(--font); letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); }
#carspanel .cpspeed #speedbar .track { width: min(360px, 60vw); }
/* the trail preview, in whatever colour is picked */
#carspanel .cppoopdemo { display: flex; justify-content: center; margin-top: 8px; }
#carspanel .cppoopdemo canvas { width: min(420px, 70vw); height: 24px; }

/* the cars panel carries more than the tracks one - let it use the screen */
#carspanel .tpin { max-height: 92vh; }

/* one straight row of options (Scott: Run Reverse sat lower than the rest) -
   the rows they arrived in are dissolved so every pill is a sibling on one line */
#carspanel .cpopts > div { display: contents; }
#carspanel .cpopts { align-items: center; }
#carspanel .cpopts #ghostinfo { display: block; width: 100%; text-align: center; }

/* the ghost car in the bottom-left corner, with its switch and its button */
#carspanel .cpghost { display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); }
#carspanel .cpghost > img { width: 62px; height: auto; opacity: 1; flex: 0 0 auto;
  filter: drop-shadow(0 0 14px rgba(120,220,255,.45)); }
#carspanel .cpghostbits { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 12px; }
#carspanel .cpghostbits #ghostrow { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 12px; }
#carspanel .cpghostbits .tick { display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; background: #0f0f14; border: 1px solid var(--line2); border-radius: 10px;
  cursor: pointer; color: #cfcfd8; font: 800 13px/1 var(--font); letter-spacing: .08em;
  text-transform: uppercase; }
#carspanel .cpghostbits .tick:has(input:checked) { color: #fff; border-color: #fff; background: #1b1b22; }
#carspanel .cpghostbits input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #c8102e; }
#carspanel .cpghostbits #ghostinfo { color: var(--dim); font-size: 12px; letter-spacing: .06em; }
#carspanel .cpghostbits button { padding: 10px 18px; background: #1d1d24; color: #fff;
  border: 1px solid var(--line2); border-radius: 10px; cursor: pointer;
  font: 800 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
#carspanel .cpghostbits button:hover { border-color: var(--pink); }

/* the class chips, moved in from the top bar - panel sized, panel styled */
#carspanel .cpcls #classbar { display: flex; justify-content: center; gap: 10px; }
#carspanel .cpcls .cls { padding: 10px 24px; background: #0f0f14; color: #fff; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 10px;
  font: 800 14px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#carspanel .cpcls .cls.on { background: #c8102e; border-color: #fff; }
/* one job per band (Scott: "there needs to be some separation") */
#carspanel .cph { border-top: 1px solid var(--line2); padding-top: 12px; }
#carspanel .cph:first-of-type { border-top: 0; padding-top: 0; }
/* smaller cars again */
#carspanel .tpgrid { grid-template-columns: repeat(3, minmax(0, 178px)); }
#carspanel .tpshot { height: min(6.5vh, 58px); }
#carspanel .tpname { font-size: 9px; }

/* the ghost band, trimmed to fit the page */
#carspanel .cpghost { margin-top: 10px; padding-top: 8px; gap: 14px; }
#carspanel .cpghost > img { width: 54px; }
#carspanel .cpghostbits #ghostinfo { font-size: 11px; }

/* the flat ghost - the same one that drives the lap */
#carspanel .cpghost > img { width: 108px; }

/* the drawn TQ ghost in the panel - same shape, eyes and TQ as the track */
#carspanel .cpghost > canvas.cpghostart { width: 120px; height: 48px; flex: 0 0 auto; }

#carspanel .cpghost > canvas.cpghostart { width: 108px; height: 62px; }

#carspanel .cpghost > canvas.cpghostart { width: 62px; height: 86px; }

/* the End Run button wears the same clothes as Marshal */
#restartrow #ghostEndText { margin-left: 10px; }

/* the race / ghost-run clock, in the space the class row left behind */
#topclock { display: none; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  color: #fff; font: 900 30px/1 var(--font); letter-spacing: .08em; pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* THE CLOCK OWNS THE HEADER (Scott: "you have the full height and you made it
   tiny"). Same size and same face for a race and for a ghost run. */
#topclock { top: 0; height: 100%; display: none; align-items: center;
  /* THE DIGITS FILL THE BAR (Scott). A capital is about seven tenths of the
     type size, so the size is set well past the bar's own height to make the
     numbers stand as tall as it. */
  /* CALM, AND IT DOES NOT MOVE (Scott): lighter and smaller so it is not
     shouting over the race, with fixed-width digits and a fixed box so the
     number never shifts as the digits change. */
  font: 700 clamp(26px, 6.4vh, 56px)/1 var(--font); letter-spacing: .02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  min-width: 5.2ch; text-align: center; justify-content: center;
  color: #e6e6ee; }
#topclock:not([style*="display: none"]) { display: flex; }

/* the gap back to the winner, beside each car's lap count */
#finishpop .finorder li i.gap { font-style: normal; min-width: 4.6em; text-align: right;
  color: var(--dim); font-variant-numeric: tabular-nums; font-size: 12px; }
#finishpop .finorder li.me i.gap { color: #fff; }

/* THE PODIUM (Scott): first centre and tallest, second right a step down,
   third left lower still - and a paint layer over the lot */
#finishpop .podium { position: relative; display: flex; align-items: flex-end;
  justify-content: center; gap: 12px; margin: 10px 0 22px; padding-top: 6px; }
#finishpop .pod { display: flex; flex-direction: column; align-items: center; }
#finishpop .pod .podcar img { width: 56px; height: auto; display: block; }
#finishpop .pod.p1 .podcar img { width: 70px; }
#finishpop .pod .podblock { width: 96px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#23232b, #14141a); border: 1px solid var(--line2);
  border-bottom: 0; border-radius: 6px 6px 0 0; color: #fff;
  font: 900 20px/1 var(--font); }
#finishpop .pod.p1 .podblock { height: 74px; background: linear-gradient(#3a2f12, #1d1a12); border-color: #e0b23c; color: #ffd76a; }
#finishpop .pod.p2 .podblock { height: 54px; }
#finishpop .pod.p3 .podblock { height: 38px; }
#finishpop .pod .podname { margin-top: 4px; color: var(--dim);
  font: 800 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#finishpop .pod.me .podname { color: #fff; }
#finishpop .podpaint { position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: crosshair; touch-action: manipulation; }
#finishpop .podhint { position: absolute; right: 2px; bottom: -16px; color: #55555f;
  font: 800 9px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  pointer-events: none; }

/* the clock is allowed to stand taller than the row it sits in */
#barmain, header { overflow: visible; }

/* the last thirty seconds, in red */
#topclock.low { color: #ff2d3a; }

/* one fixed cell per character, so a changing digit never shifts the clock */
#topclock i { display: inline-block; width: .66em; text-align: center; font-style: normal; }
#topclock i.sep { width: .30em; }
#topclock i.sp { width: .34em; }

/* the result, read in the side panel while the trophies are on the track */
#racepanel .rcresult { margin: 8px 0 4px; text-align: center; color: #fff;
  font: 900 italic 34px/1 var(--font); letter-spacing: .04em; }
#racepanel .rcresult.gold { color: #ffd76a; }
#racepanel .rcresult.silver { color: #d7dde6; }
#racepanel .rcresult.bronze { color: #e3a06a; }
#racepanel .rcresult span { display: block; margin-top: 4px; color: var(--dim);
  font: 800 10px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
#racepanel .rcsum { text-align: center; color: var(--dim); font-size: 12px; margin-bottom: 10px; }
#racepanel .finorder { list-style: none; margin: 0 0 12px; padding: 0; }
#racepanel .finorder li { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-bottom: 1px solid var(--line2); font-size: 12px; }
#racepanel .finorder li.me { background: rgba(232,17,45,.14); color: #fff; }
#racepanel .finorder li span { min-width: 1.4em; color: var(--dim); }
#racepanel .finorder li em { flex: 1; font-style: normal; text-transform: uppercase;
  letter-spacing: .08em; }
#racepanel .finorder li b { font-variant-numeric: tabular-nums; color: #cfd3d8; }
#racepanel .finorder li i.gap { font-style: normal; min-width: 4.4em; text-align: right;
  color: var(--dim); font-variant-numeric: tabular-nums; }