@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 { position: relative;
  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;
  /* the banner sits close over the rail (Scott): a whisker of air on top */
  padding-top: 8px; }
#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: 112px; height: 112px; 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: 66px; height: 1px; margin: 0 0 0 -33px;
  background: #2c2c36;
}
#knob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  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: 86px; height: 86px; 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: 112px; right: auto;
  width: 58px; height: 58px; bottom: 8px;
  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: 112px; right: auto;
  width: 58px; height: 58px; bottom: 76px;
  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 .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; }
/* WITH THE TROPHIES OUT THE X IS THE ONLY WAY OUT (Scott), so it stops being a
   little grey mark in a corner and becomes something you can hit without
   thinking - the rest of the screen belongs to shooting the podium. */
#racepanel.trophies #raceClose {
  top: 8px; right: 8px; width: 54px; height: 54px; border-radius: 14px;
  border: 1px solid var(--line2); background: #17171f; color: #fff;
  font-size: 26px; line-height: 1; }
#racepanel.trophies #raceClose:hover { border-color: var(--red); background: #23131a; }
#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 */
/* THE PHONE HAS ITS CLASS PILLS IN THE TOP BAR (Scott): no second set below */
body.touchapp.entered #classbar { display: none !important; }
/* THE PHONE IS LOCAL 2D ONLY (Scott 2026-09-03): Radio, Controller, Tracks,
   Cars, Setup, Projector, Full screen and Marshal. No live racing, no 3D/VR,
   no speed slider, no status message. */
/* RACE IS BACK ON THE PHONE FOR EVERYONE (Scott 2026-09-14: "show the race pill, let races open,
   and take them down the buy a race pass"). Nine in ten visitors are phones: anyone can open the
   races and look; taking one goes through the unlock panel, exactly as on a PC. */
body.touchapp.entered #vrBtn,
body.touchapp.entered #speedbar, body.touchapp.entered #msg { display: none !important; }
/* a paid account gets Race back, right beside Tracks (Scott) */
body.touchapp.entered #tracksBtn { order: 1; }  body.touchapp.entered #raceBtn { order: 2; }
body.touchapp.entered #carsBtn { order: 3; }    body.touchapp.entered #setupBtn { order: 4; }
body.touchapp.entered #projBtn { order: 5; }    body.touchapp.entered #fsText { order: 6; }
body.touchapp.entered #restartrow { order: 7; }
/* the top pill called Settings is gone (Scott) */
body.touchapp #phoneSettings { display: none !important; }
body.touchapp #setuppanel .popout { display: none !important; }   /* nowhere to pop out to on a phone */
#pmark { height: 38px; width: auto; opacity: 1; filter: none; }   /* a touch bigger and brighter (Scott) */
/* 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; }
/* it lives in the bottom strip now, beside Enter full screen - the top row
   scrolls off a narrow phone and took the button with it */
#radio #installBtn { border-color: #ff2d95; color: #ff2d95; }
#paywall .pwsteps { margin: 8px 0 14px 18px; padding: 0; color: #d8d8e0; font-size: 15px; line-height: 1.6; }
#paywall .pwsteps b { color: #ff2d95; }
#phonebar .grow { flex: 1; }
/* the wordmark rides beside the mascot (Scott) - the pills keep their room */
#phonebar #pword { height: 26px; width: auto; margin: 0 6px 0 -2px; flex: none; }
@media (max-width: 400px) { #phonebar #pword { height: 22px; } #phonebar button { padding: 9px 11px; } }


/* 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%;
  /* left-anchored on the MARSHAL button (JS sets left in px) - the button
     never moves when End Race appears beside it */
  transform: translateY(-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; top: 50% !important;
  /* left comes from JS (anchored on the Marshal button) - no -50% X shift */
  transform: translateY(-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 .rcgolive { background: #ff2d95 !important; border-color: #ff2d95 !important; color: #fff !important; }
#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, #wizard .tpcard, #wizard .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, #wizard .tpcard:hover { border-color: var(--pink); transform: translateY(-2px); }
#trackspanel .tpshot, #carspanel .tpshot, #wizard .tpshot, #wizard .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, #wizard .tpshot img, #wizard .tpshot img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
#trackspanel .tpshot i, #carspanel .tpshot i, #wizard .tpshot i { color: #55555f; font: 700 10px/1 var(--font); letter-spacing: .14em; font-style: normal; }
#trackspanel .tpname, #carspanel .tpname, #wizard .tpname { display: block; margin-top: 6px; text-align: center; color: #fff;
  font: 800 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
/* a touch smaller so six tracks, the colours and the maker button all fit
   without a scrollbar (Scott) */
#trackspanel .tpshot { height: min(12.5vh, 122px); }

#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 .tpcard.mine { position: relative; }
#carspanel .tprename { position: absolute; top: 4px; right: 6px; padding: 2px 5px;
  border-radius: 6px; color: #55555f; font-size: 12px; line-height: 1; cursor: pointer; }
#carspanel .tpcard.mine:hover .tprename { color: #cdd1d8; background: #1d1d24; }
#carspanel .tprename:hover { color: #ff2d95 !important; }
#carspanel .tpdel { position: absolute; bottom: 4px; right: 6px; padding: 2px 5px;
  border-radius: 6px; color: #45454f; font-size: 11px; line-height: 1; cursor: pointer; }
#carspanel .tpcard.mine:hover .tpdel { color: #9a9aa6; background: #1d1d24; }
#carspanel .tpdel:hover { color: #ff5470 !important; }
#carspanel .tpedit { position: absolute; bottom: 4px; left: 6px; padding: 2px 5px;
  border-radius: 6px; color: #45454f; font-size: 11px; line-height: 1; cursor: pointer; }
#carspanel .tpcard.mine:hover .tpedit { color: #9a9aa6; background: #1d1d24; }
#carspanel .tpedit:hover { color: #ff2d95 !important; }
/* THE CAR SITS ON A DARK TILE (Scott: the pale haze read as "painted over
   with white"). The glow is BEHIND the car now - a dim pool on the tile and a
   soft halo off the body - so the paint shows at its own colour. */
#carspanel .tpshot, #wizard .tpshot { height: min(7.5vh, 64px);
  background: #0b0b0e radial-gradient(ellipse 60% 70% at center, rgba(120,135,175,.14), rgba(120,135,175,.04) 55%, transparent 75%); }
#carspanel .tpshot img, #wizard .tpshot img { max-height: 92%; filter: drop-shadow(0 0 6px rgba(150,170,230,.38)); }
/* YOU CAN SEE WHICH CAR YOU ARE DRIVING (Scott: "do a better job of
   identifying the selection"). A white hairline was too quiet next to nine
   other cards - the chosen one now wears the club's pink, a glow, and a badge
   that says it is the one on the track. */
#carspanel .tpcard, #wizard .tpcard { position: relative; }
#carspanel .tpcard.on, #wizard .tpcard.on {
  border-color: var(--pink); background: #1b1220;
  box-shadow: 0 0 0 2px rgba(255, 45, 149, .38), 0 10px 22px rgba(255, 45, 149, .20);
}
#carspanel .tpcard.on .tpname, #wizard .tpcard.on .tpname { color: #fff; }
#carspanel .tpcard.on .tpshot, #wizard .tpcard.on .tpshot { background: #150d18; }
#carspanel .tpcard.on::before, #wizard .tpcard.on::before {
  content: '✓ RACING'; position: absolute; top: 6px; left: 6px; z-index: 2;
  padding: 3px 7px; border-radius: 999px; background: var(--pink); color: #fff;
  font: 800 9px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
#carspanel .tpcard.on.mine .tpname { color: #fff; }
#carspanel .tpgrid { grid-template-columns: repeat(4, 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, #wizard .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; }
/* the body-type shelf labels: full-width, so each type starts its own row */
#carspanel .tpgrid .tptype { grid-column: 1 / -1; margin: 6px 0 0;
  color: #9a9aa6; font: 800 10px/1 "Chakra Petch","Segoe UI",sans-serif;
  letter-spacing: .22em; text-transform: uppercase; text-align: left; }
#carspanel .tpcard, #wizard .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; }
/* THE WAY INTO THE PAINT SHOP (Scott) - the plate is the door, and it says so */
/* IT IS A BUTTON, SO IT SHOULD LOOK LIKE ONE (Scott) - the way into the paint
   shop, in the club's red, tools on the left, label doing the talking. */
#carspanel .cppaint .paintdoor {
  flex-direction: row; align-items: center; gap: 10px;
  min-width: 0; padding: 8px 14px 8px 10px;
  background: #191921; border: 1px solid #46323c; border-radius: 10px;
  box-shadow: none; transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
#carspanel .cppaint .paintdoor:hover { background: #1f1f29; border-color: var(--pink); }
#carspanel .cppaint .paintdoor:active { transform: translateY(1px); }
#carspanel .cppaint .paintdoor .pdart { display: block; width: 54px; flex: 0 0 auto; opacity: .9; }
#carspanel .cppaint .paintdoor .pdart svg { display: block; width: 100%; height: 22px; }
#carspanel .cppaint .paintdoor .pdtext { display: block; text-align: left; }
#carspanel .cppaint .paintdoor .pdmain {
  display: block; color: #e8e8ee; font: 900 italic 11px/1.1 var(--font);
  letter-spacing: .06em; text-transform: uppercase;
}
#carspanel .cppaint .paintdoor:hover .pdmain { color: #fff; }
#carspanel .cppaint .paintdoor .pdgo {
  display: block; margin-top: 3px; color: var(--pink);
  font: 800 8px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
#carspanel .cppaint .paintdoor::after {
  content: '›'; margin-left: 8px; color: #55555f; font: 800 15px/1 var(--font);
}
#carspanel .cppaint .paintdoor:hover::after { color: var(--pink); }
/* the two blocks that share the row */
/* THE PAINT-JOB RAIL (Scott) - sideways, not downwards. Swipe it on a phone,
   arrows on a desktop, and the cards keep their size however many there are. */
#carspanel .cpmine { width: 100%; }
#carspanel .cprailwrap { display: flex; align-items: center; gap: 8px; width: 100%; }
#carspanel .cprail {
  display: flex; gap: 10px; flex: 1 1 auto; overflow-x: auto; padding: 2px;
  scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
#carspanel .cprail::-webkit-scrollbar { display: none; }
#carspanel .cprail .tpcard { flex: 0 0 156px; width: 156px; scroll-snap-align: start; }
#carspanel .railarr {
  flex: 0 0 auto; width: 30px; height: 44px; border-radius: 10px; cursor: pointer;
  background: #17171f; border: 1px solid var(--line2); color: #cdd1d8;
  font: 800 18px/1 var(--font);
}
#carspanel .railarr:hover:not(:disabled) { border-color: var(--pink); color: #fff; }
#carspanel .railarr:disabled { opacity: .28; cursor: default; }
@media (max-width: 560px) { #carspanel .railarr { display: none; }
  #carspanel .cprail .tpcard { flex: 0 0 44%; width: 44%; } }
#carspanel .cpduo { display: flex; width: 100%; flex-wrap: wrap; gap: 10px 26px;
  align-items: center; justify-content: center; margin: 2px 0 0; }
#carspanel .cpduo .cpcol { flex: 0 1 auto; }
#carspanel .cpduo .cph { margin-top: 8px; }
#carspanel .cpduo .cppoop { gap: 10px; font-size: 13px; }
#carspanel .cpduo .cppoopdemo { max-width: 300px; margin: 4px auto 0; }
#carspanel .cpduo .cppoopdemo canvas { width: 100%; height: 26px; }
#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: 30px; height: 30px; margin-right: 7px; vertical-align: -10px; }

/* 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(4, minmax(0, 178px)); }
#carspanel .tpshot, #wizard .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. */
/* THE BIG RACE CLOCK, BESIDE THE BOARDS (Scott). Right of the sponsor strip,
   in the black band, at the size it has always been. It is pinned to the
   WINDOW, not to the header column it happens to live in - that column sits
   left of the boards, so anchoring inside it put the clock back on them. */
/* THE BIG CLOCK, IN THE SPACE RIGHT OF THE BANNERS (Scott). It is the size it
   always was - the lap-time cells give up a little padding on a live board so
   there is genuinely room for it, rather than the clock being shrunk to fit a
   gap nobody widened. */
#topclock { position: absolute; left: 100%; right: auto; margin-left: 0;
  transform: none; top: 50%; translate: 0 -50%; width: 196px;
  height: 66px; display: none; align-items: center; z-index: 41;
  /* 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 52px/1 var(--font); letter-spacing: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  min-width: 0; text-align: center; justify-content: center;
  color: #e6e6ee; }
#topclock:not([style*="display: none"]) { display: flex; }
/* WORDS ARE NOT DIGITS. NEXT RACE 1:56 at the size a lap clock wants is seven
   hundred pixels of type across the top of the game - the words come down to a
   label and the time keeps its weight. */
/* THE WORDS GROW TO THE RIGHT, NEVER LEFT (Scott: get the green off my
   banner). Centred inside a fixed box, a line longer than the box spills out
   of BOTH sides - and the left side is the artwork. Anchored left with the box
   sized to the text, it can only ever run away from the boards. */
#topclock.words { font: 800 13px/1.35 var(--font); letter-spacing: .1em;
  white-space: nowrap; text-align: left; justify-content: flex-start;
  width: auto; min-width: 0; }
/* BETWEEN RACES THERE IS ALWAYS A CLOCK (Scott) - small, green, counting the
   next one in. During a race the same clock goes back to being the race
   clock, in its own colour. */
#topclock.next { font: 800 clamp(11px, 1.9vh, 16px)/1 var(--font);
  letter-spacing: .16em; color: #4dff59; }
/* the last thirty seconds of the wait go red */
#topclock.soon { color: #ff2d3f; }

/* 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.words i { width: auto; }
#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; }

/* his own projector art in the strip - wider than it is tall */
/* the film projector reads best with a touch more room than the flat icons */
#radio .projsvg { width: 22px; height: 22px; margin-right: 7px; vertical-align: -6px; }
/* the 3D specs are a wide, short drawing - they need the height to match */
#radio #vrBtn .btico { width: 26px; height: 26px; margin-right: 7px; vertical-align: -8px; }

/* the cars he painted himself, in the same grid as the stock ones */
#carspanel .tpcard.mine { border-color: #3a3a45; }
#carspanel .tpcard.mine .tpname { color: #ffd76a; }


/* ---------- THE TRACKSIDE BOARDS (Scott) ----------
   Dead centre in the band above the track, the race clock beside it. */
/* DEAD CENTRE OF THE SCREEN (Scott), not centre-of-what's-left: the row is
   lifted out of the header's flow and pinned to the middle, so the logo on the
   left can never push it across. It only fits beside the logo above 1180px -
   under that it drops back into the row. */
#adrow { display: flex; align-items: center; justify-content: center;
  position: absolute; left: 50%; transform: translateX(-50%); top: 4px;
  width: min(660px, calc(100vw - 860px)); min-width: 0; padding: 0; order: 2; }
@media (max-width: 1180px) {
  #adrow { position: static; transform: none; width: auto; flex: 1 1 auto;
    padding: 0 14px; }
}
/* CENTRED (Scott). The board keeps his artwork's own shape - never stretched,
   never cropped - and sits in the middle of the black band. */
/* THE BOARD IS THE SIZE OF THE ARTWORK (Scott: the button came off the right,
   so the board comes in with it) - no dead black either side of his art. */
#adbar { display: block; position: relative; flex: 0 1 auto;
  width: auto; max-width: 100%; height: 70px; overflow: hidden;
  text-decoration: none; border-radius: 8px; border: 1px solid var(--line2);
  background: #0b0b0f; transition: opacity .3s ease, filter .12s ease; }
#adbar img { display: block; height: 100%; width: auto; max-width: 100%;
  object-fit: contain; }
#adbar svg { display: block; width: 100%; height: 100%; }
#adbar:hover { filter: brightness(1.12); border-color: var(--pink); }
#adbar.turn { opacity: 0; }
/* THE WORD GOES ON THE BOARD ITSELF, and ONLY on the ones we earn from
   (Scott). A sponsor or a friend's brand is not an advert - the Amazon board
   is, so that one carries the mark, quiet and small in its top corner. */
#adbar .affmark { position: absolute; top: 4px; right: 8px; z-index: 2;
  color: rgba(255, 255, 255, .34); font: 700 8px/1 var(--font);
  letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85); pointer-events: none; }
/* THE CLOCK IS OFF TO THE RIGHT AND BELOW THE BAND (Scott: it was landing on
   top of the banners). --barbot is the header's REAL height, measured and set
   at runtime, so the clock can never sit over the board whatever the window
   does; z-index keeps it under the header for good measure. */
#bigclock { position: fixed; top: calc(var(--barbot, 96px) + 10px); right: 20px;
  left: auto; bottom: auto; transform: none;
  display: none; z-index: 4; pointer-events: none;
  font: 900 30px ui-monospace, Consolas, monospace;
  color: #fff; letter-spacing: .04em; line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85); font-variant-numeric: tabular-nums; }
#bigclock.low { color: #ff2d3f; }
@media (max-width: 700px) { #adbar { height: 52px; } #bigclock { font-size: 20px; top: 82px; } }
/* 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;
}
/* (the clock rules live once, further up - this second copy was overriding
   them and putting it back on top of the sponsor boards) */
#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; }

/* his own projector art in the strip - wider than it is tall */
/* the film projector reads best with a touch more room than the flat icons */
#radio .projsvg { width: 22px; height: 22px; margin-right: 7px; vertical-align: -6px; }
/* the 3D specs are a wide, short drawing - they need the height to match */
#radio #vrBtn .btico { width: 26px; height: 26px; margin-right: 7px; vertical-align: -8px; }

/* the cars he painted himself, in the same grid as the stock ones */
#carspanel .tpcard.mine { border-color: #3a3a45; }
#carspanel .tpcard.mine .tpname { color: #ffd76a; }




/* ---------- WHO OWNS IT (Scott) ----------
   Club Race Hero Studios LLC owns Flea Racers. The line sits quietly in the
   bottom left of every page and never takes a click off the track. */
#owner { position: fixed; left: 10px; bottom: 6px; z-index: 3;
  color: #43434d; font: 600 9px/1 var(--font); letter-spacing: .1em;
  pointer-events: none; user-select: none; }
@media (max-width: 700px) { #owner { font-size: 8px; left: 7px; bottom: 4px; } }


/* ---------- WHIPPY ON THE BOARD (Scott) ----------
   Fast RC Parts' robot, the same blue pit boss and the same float he has on
   his own site. He stands at the right end of the strip and OVER it - the
   board does not clip him - and clicking him opens his search.
   His art is never trimmed, resized or re-registered: the PNG is 256x256 and
   ships exactly as handed over. */
/* WHIPPY'S BUBBLE TOPS WHATEVER IT TOUCHES (Scott). The row's transform traps
   his z-index inside it, so the ROW carries the height: above every header
   control (under 50), still under the big panels (60+). */
#adrow { position: absolute; overflow: visible; z-index: 55; }
/* HE SITS ON THE FAST RC PARTS BOARD (Scott), in the empty space at its right,
   and he only belongs to that board: when it turns over he floats UP out of
   sight, and he floats back DOWN when it comes round again. The lift lives on
   the wrapper and his own float lives on the image, so the two never fight
   over transform. */
#whippy {
  position: absolute; right: 46px; bottom: -8px; z-index: 60;
  width: 84px; cursor: pointer; isolation: auto;
  /* NO `contain: paint` HERE. It clips everything to his own box, which quietly
     ate the speech bubble and the search box - both hang BELOW him. */
  -webkit-tap-highlight-color: transparent;
  /* PARKED ABOVE THE FRAME, NOT HIDDEN. He is fully opaque the whole time -
     fading him in would make him APPEAR, and the draw of the eye is the
     movement itself (Scott). He starts clear of the top of the window and
     rises back out of it, and the rise takes two seconds. */
  transform: translateY(-260%); pointer-events: none;
  transition: transform 2s cubic-bezier(.42, 0, .58, 1);
}
#whippy.on img { animation-play-state: running; }
#whippy.on {
  transform: translateY(0); pointer-events: auto;
  /* coming down he settles rather than stops dead */
  transition: transform 1.9s cubic-bezier(.17, .78, .36, 1);
}
#whippy img {
  display: block; width: 84px; height: 84px; object-fit: contain;
  transform-origin: 50% 72%;
  filter: drop-shadow(0 8px 8px rgb(25 41 55 / 34%));
  /* NOTHING RUNS WHILE HE IS PARKED. Two infinite animations under a
     drop-shadow cost a repaint every frame, and off-frame that is paid for
     nothing - on a page whose whole job is a canvas at 60fps. He animates only
     while he is actually on the board. */
  animation-play-state: paused;
  /* HIS OWN FLOAT, KEYFRAMES NOT A TRANSITION - a transition never fires when
     position and top resolve together, and he snaps instead of drifting. */
  animation: whippy-product-hover 5.8s ease-in-out infinite,
             whippy-product-sway 8.6s ease-in-out infinite;
}
@keyframes whippy-product-hover { 0%, 100% { translate: 0 2px } 50% { translate: 0 -8px } }
@keyframes whippy-product-sway {
  0%, 100% { transform: translateX(-2px) rotate(-1.4deg) }
  50% { transform: translateX(3px) rotate(1.4deg) }
}
@media (prefers-reduced-motion: reduce) { #whippy img { animation: none } }

/* his bubble opens to his RIGHT (Scott: below covered the track) - it stays
   up in the black band beside him */
#whippy .bub {
  position: absolute; left: 100%; top: 2px; margin-left: 8px; width: max-content;
  max-width: 260px; background: #ffffff; border: 1px solid #d4dce3;
  border-radius: 15px; padding: 9px 12px; color: #111417;
  font: 750 12px/1.45 var(--font); letter-spacing: .02em;
  box-shadow: 0 9px 26px rgba(32, 49, 62, .28); z-index: 61;
}
#whippy .bub b { color: #008dca; }
#whippy .bub[hidden] { display: none; }

/* the search he opens - results go to Fast RC Parts in a new tab */
#whippy .whippy-search {
  position: absolute; top: 100%; right: 0; margin-top: 6px; display: flex;
  align-items: center; background: #fff; border: 1px solid #e3e3e0;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); padding: 4px;
  z-index: 42; pointer-events: auto;
}
#whippy .whippy-search input {
  border: 0; outline: 0; padding: 9px 11px; font-size: 14px; width: 230px;
  background: transparent; color: #111417; font-family: inherit;
}
#whippy .whippy-search button[type=submit] {
  border: 0; border-radius: 7px; padding: 9px 14px; cursor: pointer;
  background: #08aeed; color: #fff; font: 650 13.5px var(--font);
}
#whippy .whippy-search button[type=submit]:hover { background: #008dca; }
#whippy .whippy-search__x {
  border: 0; background: transparent; cursor: pointer; font-size: 19px;
  line-height: 1; padding: 0 8px; color: #9a9aa2;
}
@media (max-width: 1180px) { #whippy { display: none; } }


/* ---------- LIVE RACING (Scott) ----------
   The panel the RACE button opens: a name, a class, the wall of Prime tracks
   with who is on each, and the clock that keeps turning. Big and plain - it is
   the front door to the whole thing, and it has to work for someone who has
   never seen it before. */
#liverace { position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 6, 9, .72); backdrop-filter: blur(3px); }
#liverace.show { display: flex; }
#liverace .lr-in { position: relative; width: min(760px, 96vw);
  max-height: 92vh; overflow: auto; padding: 26px 26px 22px;
  background: #101014; border: 1px solid var(--line2); border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7); }
#liverace h2 { margin: 0 0 18px; font: 900 italic 30px/1 var(--font);
  letter-spacing: .06em; text-transform: uppercase; color: #fff; }
#liverace .lr-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: 1px solid var(--line2); border-radius: 9px; background: #17171f;
  color: var(--dim); font-size: 15px; cursor: pointer; }
#liverace .lr-x:hover { border-color: var(--red); color: #fff; }
#liverace .lr-lab { display: block; margin: 0 0 6px;
  font: 800 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase;
  color: #7d8390; }
#liverace .lr-name { width: 100%; box-sizing: border-box; margin: 0 0 18px;
  padding: 16px 18px; border: 1px solid var(--line2); border-radius: 12px;
  background: #17171f; color: #fff; font: 800 22px/1 var(--font);
  letter-spacing: .04em; }
#liverace .lr-name:focus { outline: 0; border-color: var(--pink); }
#liverace .lr-row { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
#liverace .lr-row .lr-lab { margin: 0 6px 0 0; }
#liverace .lr-grow { flex: 1; }
#liverace .lr-cls, #liverace .lr-arrow {
  padding: 11px 20px; border: 1px solid var(--line2); border-radius: 10px;
  background: #17171f; color: var(--dim); cursor: pointer;
  font: 800 13px/1 var(--font); letter-spacing: .12em; }
#liverace .lr-cls.on { border-color: var(--pink); background: rgba(255,45,149,.14); color: #fff; }
#liverace .lr-arrow { padding: 9px 14px; font-size: 17px; }
#liverace .lr-page { color: #7d8390; font: 800 11px/1 var(--font); letter-spacing: .14em; }
#liverace .lr-tracks { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 0 0 18px; }
#liverace .lr-card { display: flex; flex-direction: column; gap: 5px;
  padding: 14px 14px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line2); border-radius: 12px; background: #17171f; }
#liverace .lr-card.on { border-color: var(--pink); background: rgba(255,45,149,.12); }
#liverace .lr-nm { font: 900 italic 16px/1 var(--font); letter-spacing: .04em; color: #fff;
  text-transform: uppercase; }
#liverace .lr-live { font: 800 10px/1 var(--font); letter-spacing: .16em;
  text-transform: uppercase; color: #4dff59; }
#liverace .lr-cy { font: 700 10px/1 var(--font); letter-spacing: .12em;
  text-transform: uppercase; color: #7d8390; }
#liverace .lr-clock { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
#liverace .lr-clock b { font: 900 italic 15px/1 var(--font); letter-spacing: .14em;
  text-transform: uppercase; color: #9aa0ab; }
#liverace .lr-clock b.lr-run { color: #4dff59; }
#liverace .lr-clock span { font: 900 26px/1 ui-monospace, Consolas, monospace; color: #fff;
  font-variant-numeric: tabular-nums; }
/* MUTED, AND SMALLER (Scott). A wall of red at the bottom of the panel shouts
   at somebody who has already decided to race - it is a blue button the width
   of the words, not the width of the panel. */
#liverace .lr-go { display: block; margin: 2px auto 0; width: auto;
  padding: 13px 34px; border: 1px solid #1f5f86; border-radius: 11px;
  background: #12546f; color: #eaf6ff; cursor: pointer;
  font: 800 15px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
#liverace .lr-go:hover { background: #17688a; border-color: #2b86b8; color: #fff; }
@media (max-width: 620px) {
  #liverace .lr-tracks { grid-template-columns: repeat(2, 1fr); }
  #liverace h2 { font-size: 24px; }
  #liverace .lr-name { font-size: 18px; padding: 13px 14px; }
  /* the class pills wrap instead of running off the edge (Mod was cut off on a phone) - that row
     only: the Slow-Fast bar and the Track row stay on one line */
  #liverace .lr-row:not(.lr-speed):not(.lr-head) { flex-wrap: wrap; }
  /* the name box on its own line, right above TAKE THE GRID (Scott 2026-09-14) */
  #liverace .lr-name-low { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
  #liverace .lr-name-low span { font: 800 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: #7d8390; white-space: nowrap; }
  #liverace .lr-name-low input { flex: 1; min-width: 0; }
}






/* ROOM FOR THE CLOCK ON A LIVE BOARD (Scott). Lap / Last / Hot lap come in a
   little so the big clock has the space beside the banners it needs - nothing
   sits on top of anything. */
body.liveboard #clocks { gap: 4px; flex-wrap: nowrap; max-width: 210px; }
body.liveboard #clocks .clock { padding: 3px 5px; min-width: 0; }
body.liveboard #clocks .clock b { font-size: 13px; }
body.liveboard #clocks .clock span { font-size: 7px; letter-spacing: .06em; }


/* THE MARSHAL BUTTON WHILE A PENALTY IS BEING SERVED (Scott): dead, and it
   looks dead. There is no bailing out of the box. */
#restart.penalty, #restartText.penalty {
  opacity: .35; cursor: not-allowed; pointer-events: none;
  border-color: rgba(255, 45, 63, .5); color: #ff6b76;
}


/* the real board on each Live Racing card (Scott) */
#liverace .lr-pic { display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #0c0c10; border-radius: 8px; overflow: hidden; margin-bottom: 2px; }
#liverace .lr-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }


/* the two buttons at the foot of Live Racing, side by side (Scott) */
#liverace .lr-acts { display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 2px; }
#liverace .lr-acts .lr-go { margin: 0; }
#liverace .lr-res { padding: 13px 22px; border: 1px solid var(--line2);
  border-radius: 11px; background: #17171f; color: var(--dim); cursor: pointer;
  font: 800 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
#liverace .lr-res:hover { border-color: var(--pink); color: #fff; }


/* ---------- THE RACER NAME ON THE BAR (Scott) ----------
   Left of the sponsor boards, in the black band. Small, quiet, always there. */
/* LABEL OVER THE BOX, so it takes almost no width beside the boards (Scott) */
#rname { position: absolute; right: 100%; margin-right: 36px; top: 50%;
  transform: translateY(-50%); display: flex; flex-direction: column;
  align-items: flex-start; gap: 3px; white-space: nowrap; z-index: 39; }
#rname span { font: 800 9px/1 var(--font); letter-spacing: .18em;
  text-transform: uppercase; color: #7d8390; }
#rname input { width: 124px; padding: 6px 9px; border: 1px solid var(--line2);
  border-radius: 8px; background: #15151b; color: #fff;
  font: 800 12px/1 var(--font); letter-spacing: .06em; }
#rname input:focus { outline: 0; border-color: var(--pink); }
@media (max-width: 900px) { #rname { display: none; } }

/* each body-type shelf is one row: five across, the rest scroll behind the arrow */
#carspanel .tpwrap, #wizard .tpwrap { grid-column: 1 / -1; position: relative; }
#carspanel .tprow, #wizard .tprow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
#carspanel .tprow::-webkit-scrollbar, #wizard .tprow::-webkit-scrollbar { display: none; }
#carspanel .tprow .tpcard, #wizard .tprow .tpcard { flex: 0 0 calc((100% - 32px) / 5); min-width: 0; }
#carspanel .tpgo, #wizard .tpgo { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 26px; height: 46px;
  border-radius: 8px; border: 1px solid var(--line2); background: rgba(26,26,34,.92); color: #fff; font-size: 12px;
  cursor: pointer; z-index: 2; }
#carspanel .tpgo:hover, #wizard .tpgo:hover { border-color: var(--pink); color: var(--pink); }

#carspanel .tpback, #wizard .tpback { right: auto; left: -8px; }

/* THE CLASS SELECTOR IN THE BOTTOM BAR (Scott) - the control hints are gone,
   the whole selector (Class label, pills, Slow/Fast bar) took their slot. */
#radio #classbar { flex: 0 0 auto; gap: 5px; flex-wrap: nowrap; }
#radio #classbar .cls { padding: 3px 9px; font-size: 9.5px; }
#radio #speedbar { flex: 0 0 auto; flex-basis: auto; order: 0; margin: 0; }
#radio #speedbar .track { width: 130px; height: 8px; border-width: 3px; }
#radio #speedmark { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
#radio { min-height: 46px; }   /* two stacked rows beside the Marshal */
/* the radio status keeps the far right corner, like it always has */
#radio #msg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* ONE PILL SIZE (Scott): every button in the bottom strip is the same height
   pill - the icons keep their own size exactly as they are, the pill grows
   to hold the biggest of them. Marshal row and class pills keep their own. */
#radio > button, #radio > .mklink {
  height: 30px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 13px; font-size: 10px; line-height: 1;
  flex: none; white-space: nowrap;   /* a pill never squeezes - full words, always */
}

/* the racer name in the bottom bar, beside the class selector (Scott) */
#radio #rname { display: inline-flex; align-items: center; gap: 7px; width: auto !important; }
#radio #rname span { font: 700 9px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #5c5c66; white-space: nowrap; }
#radio #rnamein { width: 130px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: #101014; color: #fff; font: 700 11px/1 var(--font); }

/* THE CLASS SELECTOR IN THE HEADER, TOP RIGHT (Scott's red box): one block
   left of the clocks - the Slow/Fast slider on top, the Class pills under
   it. Compact, so the header keeps its single row. */
/* the header dock is gone - the selector rides beside the Marshal again */
/* phones pick their class on the phone bar - no dock in the header there */
@media (pointer: coarse) and (max-width: 900px) { #clsdock { display: none; } }
#clsdock #classbar { flex: 0 0 auto; gap: 5px; flex-wrap: nowrap; justify-content: center; margin: 0; }
#clsdock #classbar .cls { padding: 3px 9px; font-size: 9.5px; }
#clsdock #speedbar { flex: 0 0 auto; flex-basis: auto; order: 0; margin: 0; gap: 8px; }
#clsdock #speedbar .track { width: 150px; height: 8px; border-width: 3px; }

/* the closed-door state of the Live Racing panel (Scott: blue text) */
#liverace .lr-liveblue { color: #4db5ff; }
#liverace .lr-go:disabled { opacity: .4; cursor: default; }
#liverace .lr-closed { color: #4db5ff; }


/* THE RACER'S NAME, top left of the banners (Scott): hangs off the banner
   row's left edge so it tracks the banner wherever the window puts it. */
#adrow #rname { position: absolute; right: 100%; margin-right: 16px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#adrow #rname span { font: 700 9px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #5c5c66; white-space: nowrap; }
#adrow #rnamein { width: 130px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: #101014; color: #fff; font: 700 11px/1 var(--font); }
@media (max-width: 1180px) { #adrow #rname { position: static; transform: none; margin: 0 8px; } }

/* End Race, in the Race panel only (Scott) */
#endRacePanel { display: block; margin: 4px 14px 8px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #a02; background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff; font: 800 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
#endRacePanel[hidden] { display: none; }

/* the road back to open practice, in the Race panel (Scott) */
#practicePanel { display: block; margin: 4px 14px 8px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #1a1a21; color: #cfd2da;
  font: 800 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
#practicePanel:hover { background: #23232c; }
#practicePanel[hidden] { display: none; }

/* Back to Open Practice, right of the race clock in the banner row (Scott) */
#bpTop { position: absolute; top: 50%; transform: translateY(-50%);
  background: #1a1a21; color: #cfd2da; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font: 800 10.5px/1 var(--font); letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap; }
#bpTop:hover { background: #23232c; }
#bpTop[hidden] { display: none; }

/* OPEN PRACTICE, in the clock slot when he is not racing (Scott) */
#topclock.prac { font: 800 clamp(11px, 1.9vh, 16px)/1 var(--font);
  letter-spacing: .16em; color: #9ea3af; }

/* THE NAME FIELD CALLS THE EYE while it is empty (Scott) - and one green
   flash on the first no-name lap. Both die the moment a name exists. */
#rname.noname #rnamein { border-color: #4db5ff;
  animation: rnpulse 2.2s ease-in-out infinite; }
@keyframes rnpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 181, 255, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(77, 181, 255, .55); }
}
#rname.nnflash #rnamein { animation: rnflash .5s ease-in-out 6; border-color: #4dff59; }
@keyframes rnflash {
  50% { box-shadow: 0 0 18px 4px rgba(77, 255, 89, .85); }
}

/* ---------- the first-run walkthrough (Scott: old people don't read menus)
   Dressed like the radio connect page: dark cards, pill buttons, pink on
   hover. Options centred; each label rides on the LEFT of its control. */
/* NO DARK BACKDROP on any intro panel (Scott): the track cycling its
   colours and the roomba stay in view behind the cards */
#wizard { position: fixed; inset: 0; z-index: 150; display: none;
  background: transparent; overflow-y: auto; }
#wizard.show { display: flex; align-items: center; justify-content: center; overflow: auto; }   /* every intro panel at the same height, centred (Scott 2026-09-05) */
/* the name box: small, centred, and the game shows through - nothing dimmed */
#wizard.wzlite { background: transparent; pointer-events: none; }
#wizard.wzlite.show { align-items: center; }
#wizard.wzlite .wzin { pointer-events: auto; width: min(440px, 92vw); margin: 0 auto;
  padding: 26px 30px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.65); }
#wizard.wzlite .wzskiprow { position: static; justify-content: center; margin-top: 16px; }
#wizard .wznext { margin-top: 18px; padding: 12px 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: #ff2d95; color: #fff; font: 900 italic 15px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#wizard .wznext:hover { background: #ff5cae; }
#wizard .wzin { position: relative; width: min(920px, 94vw); margin: auto;
  background: #0e0e12; border: 1px solid #24242b; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.65);
  padding: 30px 36px 36px; text-align: center; }
#wizard h1 { margin: 0 0 22px; font: 900 italic 26px/1 var(--font); color: #fff;
  letter-spacing: .06em; text-transform: uppercase; }
#wizard .wzhead { margin: 26px 0 14px; font: 900 italic 17px/1 var(--font); color: #fff;
  letter-spacing: .08em; text-transform: uppercase; }
#wizard .wzfield { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 6px; }
#wizard .wzfield > label { font: 800 12px/1 var(--font); letter-spacing: .18em;
  text-transform: uppercase; color: #9a9aa6; white-space: nowrap; }
#wizard #wzname { width: min(320px, 60%); padding: 12px 15px; border-radius: 10px;
  border: 1px solid #24242b; background: #101014; color: #fff; font: 700 18px/1 var(--font); }
#wizard #wzname:focus { border-color: #ff2d95; outline: none; }
#wizard .wzstrip { display: flex; align-items: stretch; justify-content: center; gap: 14px; margin-top: 6px; }
#wizard .wzarrbtn { width: 46px; border-radius: 10px; border: 1px solid #24242b; background: #101014;
  color: #9a9aa6; font: 900 30px/1 var(--font); cursor: pointer; }
#wizard .wzarrbtn:hover:not(:disabled) { border-color: #ff2d95; color: #fff; }
#wizard .wzarrbtn:disabled { opacity: .25; cursor: default; }
#wizard .wztrack { flex: 1; max-width: 232px; border-radius: 12px; cursor: pointer; padding: 10px;
  border: 1px solid #24242b; background: #101014; color: #e8e8ee; }
#wizard .wztrack img { width: 100%; height: 118px; object-fit: contain; display: block; border-radius: 8px; }
#wizard .wzph { display: flex; align-items: center; justify-content: center; height: 118px;
  color: #55555f; font: 600 12px/1 var(--font); }
#wizard .wztrack b { display: block; margin-top: 8px; font: 900 italic 15px/1 var(--font);
  letter-spacing: .08em; text-transform: uppercase; }
#wizard .wztrack:hover { border-color: #ff2d95; }
#wizard .wzclswrap { display: inline-block; }
#wizard .wzspeed { font: 800 11px/1 var(--font); letter-spacing: .26em; color: #6a6a76; margin-bottom: 8px; }
#wizard .wzarrow { color: #ff2d95; font-size: 17px; vertical-align: -2px; }
#wizard .wzrow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
#wizard .wzcls { padding: 13px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid #24242b; background: #101014; color: #9a9aa6;
  font: 800 15px/1 var(--font); letter-spacing: .08em; }
#wizard .wzcls.on, #wizard .wzcls:hover { border-color: #ff2d95; background: #1c1016; color: #fff; }
#wizard .wzgrid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
#wizard .wzcars { margin-top: 4px; max-height: 44vh; overflow-y: auto; padding: 2px; }
#wizard .wzcar { width: 148px; border-radius: 12px; cursor: pointer; padding: 8px;
  border: 1px solid #24242b; background: #101014; color: #cfd2da; font: 700 12px/1.3 var(--font); }
#wizard .wzcar img { width: 100%; height: 80px; object-fit: contain; display: block; }
#wizard .wzcar:hover { border-color: #ff2d95; color: #fff; }
#wizard .wzbig { margin-top: 8px; }
#wizard .wzbig .wzway { flex: 1; min-width: 210px; max-width: 280px; padding: 30px 20px; border-radius: 12px;
  cursor: pointer; border: 1px solid #24242b; background: #101014; color: #cfd2da; text-align: center; }
#wizard .wzpic { display: flex; align-items: center; justify-content: center; height: 130px; margin: 0 auto 14px; }
#wizard .wzpic img { max-width: 100%; max-height: 100%; display: block; }
#wizard .wzkbico { font-size: 92px; color: #8a8a8a; }
#wizard .wzway b { display: block; font: 900 italic 18px/1 var(--font); color: #fff; margin-bottom: 8px;
  letter-spacing: .06em; text-transform: uppercase; }
#wizard .wzway span:not(.wzkbico) { font: 600 12.5px/1.4 var(--font); color: #8a8a95; }
#wizard .wzway:hover { border-color: #ff2d95; }
#wizard .wzskip { position: absolute; top: 12px; right: 14px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid #24242b; background: #101014; color: #9a9aa6; cursor: pointer;
  font: 700 9.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
#wizard .wzskip:hover { border-color: #ff2d95; color: #fff; }

/* the borrowed class selector sits centred in the wizard, its own look */
#wizard .wzselslot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 6px; }
#wizard .wzselslot #classbar, #wizard .wzselslot #speedbar { position: static; margin: 0; justify-content: center; flex-wrap: nowrap; }
/* the slider has a whole panel to itself here - use the room (Scott: "much larger... wider") */
#wizard .wzselslot #speedbar { gap: 16px; width: 100%; }
#wizard .wzselslot #speedbar .track { height: 20px; border-width: 5px; }   /* width = the pill row, set by alignSlider */
#wizard .wzselslot #speedbar span { font-size: 13px; color: #8a8a96; }
#wizard .wzselslot #speedmark { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

/* the wizard garage wears the picker's group rows */
#wizard .wzcars { max-height: 44vh; overflow-y: auto; padding: 2px; }
#wizard .wzgrouphead { margin: 14px 0 8px; font: 900 italic 13px/1 var(--font);
  letter-spacing: .2em; text-transform: uppercase; color: #9a9aa6; text-align: left; }
#wizard .wzgrouphead:first-child { margin-top: 2px; }

/* the wizard's one big continue button, radio-page pill writ large */
#wizard .wzgo { margin-top: 22px; padding: 16px 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid #24242b; background: #101014; color: #fff;
  font: 900 italic 17px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
#wizard .wzgo:hover { border-color: #ff2d95; background: #1c1016; }

#wizard .wzskiprow { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; gap: 12px; }
#wizard .wzskiprow .wzskip { position: static; }
#wizard .wzdont { display: flex; align-items: center; gap: 6px; cursor: pointer;
  font: 600 11px/1 var(--font); color: #8a8a95; }
#wizard .wzdont input { accent-color: #ff2d95; width: 14px; height: 14px; }

/* the wizard's track strip: the panel's own cards, three across, arrows only past three */
#wizard .wzstrip { display: flex; align-items: stretch; justify-content: center; gap: 14px; margin-top: 8px; }
#wizard .wzstrip .tpcard { flex: 1 1 0; width: auto; min-width: 160px; max-width: 260px; }
#wizard .wzstrip .tpshot { height: 120px; }

/* the wizard car shelves: the panel's own rows, dropped in below the selector */
#wizard .wzcarsgrid { display: grid; grid-template-columns: 1fr; gap: 10px; max-height: 46vh; overflow-y: auto;
  padding: 2px 14px; text-align: left; }

#wizard .wzpics { display: flex; align-items: center; justify-content: center; gap: 12px; height: 130px; margin: 0 auto 14px; }
#wizard .wzpics img { height: 96px; width: auto; }
#wizard .wzpics img + img { height: 48px; }   /* the Luna, half size (Scott) */

#wizard .wzpic img { max-height: 110px; max-width: 200px; width: auto; height: auto; }
#wizard .wzway .wzhints { display: block; margin-top: 8px; font: 600 12.5px/1.6 var(--font); color: #9a9aa6; letter-spacing: .04em; }
#wizard .wzway .wzhints b { color: #fff; font-weight: 800; }

#wizard .wzhints .wzk-pink { color: #ff2d95; } #wizard .wzhints .wzk-blue { color: #4db5ff; } #wizard .wzhints .wzk-red { color: #ff5d6c; }
#wizard .wzpic img { max-height: 120px; max-width: 300px; }

/* the key hints stay on one line - the card title style must not leak in */
#wizard .wzway .wzhints b { display: inline; font: 800 12.5px/1.6 var(--font); font-style: normal;
  letter-spacing: .04em; margin: 0; text-transform: none; }
#wizard .wzway .wzhints .wzk-pink { color: #ff2d95; }
#wizard .wzway .wzhints .wzk-blue { color: #4db5ff; }
#wizard .wzway .wzhints .wzk-red { color: #ff5d6c; }

#wizard .wzhints .wzline { display: block; white-space: nowrap; }
#wizard .wzbig .wzway { max-width: 300px; }

/* room to breathe (Scott): the two cards take the panel, the keyboard sits inside its card */
#wizard .wzbig { gap: 20px; }
#wizard .wzbig .wzway { flex: 1 1 0; min-width: 300px; max-width: 420px; padding: 30px 22px; }
#wizard .wzpic { height: auto; min-height: 130px; padding: 0 6px; }
#wizard .wzpic img { max-width: 100%; max-height: 150px; }

/* ---------- THE UNLOCK PANEL - the radio-page theme, over the live track ---------- */
#paywall { position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center; background: transparent; }
#paywall .pwin { position: relative; width: min(520px, 92vw); padding: 28px 32px 26px; text-align: center;
  background: #0e0e12; border: 1px solid #24242b; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.65); }
#paywall .pwx { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #24242b; background: #1a1a22; color: #9a9aa6; cursor: pointer; font: 700 12px/1 var(--font); }
#paywall .pwx:hover { border-color: #ff2d95; color: #fff; }
#paywall h1 { margin: 0 0 12px; font: 900 italic 24px/1 var(--font); color: #fff; letter-spacing: .04em; text-transform: uppercase; }
#paywall .pwlead { margin: 0 auto 18px; max-width: 420px; color: #b9bcc6; font: 500 14px/1.5 var(--font); }
#paywall .pwlead b { color: #fff; }
#paywall .pwbuy { padding: 13px 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: #ff2d95; color: #fff; font: 900 italic 15px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#paywall .pwbuy:hover { background: #ff5cae; }
#paywall .pwbuy:disabled { opacity: .6; cursor: default; }
#paywall .pwbuy2 { background: #1a1a22; border: 1px solid #3a3a45; }
#paywall .pwbuy2:hover { background: #24242b; border-color: #ff2d95; }
#paywall .pwclub { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid #24242b; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#paywall .pwclub b { color: #fff; font: 900 italic 14px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
#paywall .pwclub span { color: #8a8a96; font: 500 12px/1.4 var(--font); }
#paywall .pwcode { margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid #24242b; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
#paywall .pwcode label { color: #8a8a96; font: 800 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
#paywall .pwcode input { width: 150px; padding: 9px 12px; border-radius: 8px; border: 1px solid #24242b; background: #121218; color: #fff;
  font: 700 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
#paywall .pwcode input:focus { border-color: #ff2d95; outline: none; }
#paywall .pwgo { padding: 9px 16px; border-radius: 999px; border: 1px solid #3a3a45; background: #1a1a22; color: #fff; cursor: pointer;
  font: 800 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
#paywall .pwgo:hover { border-color: #ff2d95; }
#paywall .pwsay { min-height: 18px; margin-top: 12px; color: #ffd34d; font: 700 12px/1.3 var(--font); }
#paywall .pwcodes { margin: 0 auto 16px; padding: 12px 14px; max-width: 420px; border-radius: 10px; background: #121218; border: 1px solid #24242b; }
#paywall .pwcodes span { display: block; margin-bottom: 8px; color: #8a8a96; font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
#paywall .pwcodes b { display: inline-block; margin: 3px 6px; color: #fff; font: 800 16px/1 var(--font); letter-spacing: .12em; }
#paywall .pwcodes b.pwc { cursor: pointer; padding: 4px 8px; border-radius: 6px; }
#paywall .pwcodes b.pwc:hover { background: #1a1a22; color: #ff5cae; }
#paywall .pwcopy { display: inline-block; margin: 4px 0 0 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid #3a3a45; background: #1a1a22; color: #fff; cursor: pointer;
  font: 800 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
#paywall .pwcopy:hover { border-color: #ff2d95; }
#paywall .pwcopy.on { background: #ff2d95; border-color: #ff2d95; }

/* THE LOCKED BODIES (free practice runs three; the unlock opens the garage) */
#carspanel .tpcard.locked, #wizard .tpcard.locked { opacity: .72; filter: grayscale(.5); }   /* slightly greyed - still there to be seen (Scott) */
#carspanel .tpcard.locked:hover, #wizard .tpcard.locked:hover { opacity: .9; transform: none; border-color: #ff2d95; }
#carspanel .tpcard.locked::after, #wizard .tpcard.locked::after {
  content: 'UNLOCK'; position: absolute; top: 6px; right: 6px; z-index: 2;
  padding: 3px 7px; border-radius: 999px; border: 1px solid #ff2d95; background: rgba(14,14,18,.85); color: #ff5cae;
  font: 800 8px/1 var(--font); letter-spacing: .14em; }
#paywall .pwlist { display: flex; flex-direction: column; gap: 7px; margin: 2px auto 20px; max-width: 430px; }
#paywall .pwlist span { color: #e6e6ee; font: 700 14px/1.35 var(--font); letter-spacing: .02em; }
#paywall .pwlist span.hot { color: #ff5cae; }
#paywall .pwlist span i { color: #8a8a96; font: 500 12px/1.3 var(--font); font-style: normal; }
#paywall .pwlist.small { gap: 4px; margin: 4px auto 12px; }
#paywall .pwlist.small span { color: #c9c9d4; font: 600 12.5px/1.35 var(--font); }
/* the second page of the unlock: the pitch */
#paywall .pwpitch { display: flex; flex-direction: column; gap: 12px; margin: 0 auto 16px; max-width: 440px; text-align: left; }
#paywall .pwrow { display: flex; flex-direction: column; gap: 3px; }
#paywall .pwrow b { color: #fff; font: 900 italic 13px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
#paywall .pwrow span { color: #b9bcc6; font: 500 12.5px/1.5 var(--font); }
#paywall .pwsplit { display: block; width: min(320px, 80%); margin: 2px auto; border-radius: 10px; background: #0b0b0e; }
#paywall .pwacts { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
#paywall .pwback { padding: 12px 22px; border-radius: 999px; border: 1px solid #3a3a45; background: #1a1a22; color: #fff; cursor: pointer;
  font: 800 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#paywall .pwback:hover { border-color: #ff2d95; }
#paywall .pwgo2 { padding: 12px 24px; font-size: 13px; }
/* on a club page the class is the club's - the other pills go quiet */
body.clubcls #classbar .cls:disabled { opacity: .3; cursor: default; }
/* the pitch, wide: paint shop | track maker | live racing, the button centred under */
#paywall.wide .pwin { width: min(1180px, 96vw); padding: 26px 30px 24px; }
#paywall .pwcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 4px 0 20px; text-align: left; }
#paywall .pwcol { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #121218; border: 1px solid #24242b; }
#paywall .pwcol img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: #0b0b0e; }
#paywall .pwcol b { color: #fff; font: 900 italic 15px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
#paywall .pwcol span { color: #b9bcc6; font: 500 12.5px/1.5 var(--font); }
#paywall.wide .pwgo2 { padding: 14px 34px; font-size: 15px; }
@media (max-width: 900px) { #paywall .pwcols { grid-template-columns: 1fr; } #paywall.wide .pwin { max-height: 92vh; overflow-y: auto; } }
/* the club sign-up page */
#paywall .pwslot { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #0b0b0e; border: 1px solid #24242b; }
#paywall .pwslot .pwmark { height: 46px; width: auto; }
#paywall .pwslotbox { flex: 1 1 auto; height: 52px; display: flex; align-items: center; justify-content: center; border: 2px dashed #ff2d95; border-radius: 8px;
  color: #ff5cae; font: 900 italic 13px/1 var(--font); letter-spacing: .14em; }
#paywall .pwdeal { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; background: #170d14; border: 1px solid #ff2d95; cursor: pointer; }
#paywall .pwdeal input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: #ff2d95; flex: 0 0 auto; }
#paywall .pwdeal span { color: #e6e6ee; }
#paywall .pwdeal span b { color: #ff5cae; }
#paywall .pwsmall { color: #8a8a96 !important; font-size: 11.5px !important; }
#paywall .pwradio { display: flex; flex-direction: column; gap: 6px; }
#paywall .pwradio label { display: flex; align-items: center; gap: 8px; color: #e6e6ee; font: 600 12.5px/1.3 var(--font); cursor: pointer; }
#paywall .pwradio input { accent-color: #ff2d95; width: 15px; height: 15px; margin: 0; }
#paywall .pwcol span b { color: #fff; font: 800 12.5px/1.5 var(--font); letter-spacing: 0; text-transform: none; }
/* the picked track in the Live Racing lobby wears a proper pink ring (Scott: the burgundy alone was not enough) */
#liverace .lr-card.on { box-shadow: 0 0 0 3px #ff2d95, 0 8px 22px rgba(255,45,149,.3); }
/* contact + advertise: the same panel, two columns, a form */
#paywall .pwcols.pwtwo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto; }
#paywall .pwwhen { color: #ff5cae !important; font: 800 11px/1 var(--font) !important; letter-spacing: .12em; text-transform: uppercase; }
#paywall .pwta, #paywall .pwin2 { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 8px; border: 1px solid #24242b; background: #0e0e12; color: #fff;
  font: 500 13px/1.4 var(--font); }
#paywall .pwta:focus, #paywall .pwin2:focus { outline: none; border-color: #ff2d95; }
#paywall .pwta { resize: vertical; min-height: 96px; }
#paywall .pwsmallbtn { padding: 10px 20px; font-size: 12px; align-self: flex-start; }
#paywall .pwmail { color: #ff5cae; font: 800 14px/1.3 var(--font); text-decoration: none; word-break: break-all; }
#paywall .pwmail:hover { text-decoration: underline; }
#paywall .pwlate { margin-top: 10px; }
#paywall .pwadprev { aspect-ratio: 1466 / 153; width: 100%; display: flex; align-items: center; justify-content: center; border: 1px dashed #3a3a45; border-radius: 8px; background: #0b0b0e; overflow: hidden; }
#paywall .pwadprev span { color: #8a8a96; font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
#paywall .pwadprev img { width: 100%; height: 100%; object-fit: contain; display: block; }
#paywall .pwfile { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid #3a3a45; background: #1a1a22; color: #fff; cursor: pointer;
  font: 800 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; align-self: flex-start; }
#paywall .pwfile:hover { border-color: #ff2d95; }
/* the ways in */
.railfoot .raillinks { display: block; margin-top: 6px; color: #55555f; font: 700 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.railfoot .raillinks a { color: #8a8a96; text-decoration: none; }
.railfoot .raillinks a:hover { color: #ff5cae; }
#adrow #advtag { position: absolute; right: 8px; bottom: 3px; z-index: 3; color: #6a6a76; text-decoration: none; font: 800 8px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
#adrow #advtag:hover { color: #ff5cae; }
#adrow #advtag[hidden] { display: none; }
/* the tracks panel: three across, the rest behind the arrow (Scott) */
#trackspanel .tpgrid { grid-template-columns: minmax(0, 900px); }
#trackspanel .tpwrap { position: relative; }
#trackspanel .tprow { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 2px; }
#trackspanel .tprow::-webkit-scrollbar { display: none; }
#trackspanel .tprow .tpcard { flex: 0 0 calc((100% - 28px) / 3); min-width: 0; scroll-snap-align: start; }
#trackspanel .tpshot { height: min(18vh, 170px); }
#trackspanel .tpgo { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 28px; height: 52px; z-index: 2;
  border: 1px solid var(--line2); border-radius: 8px; background: #16161c; color: #cdd1d8; cursor: pointer; font-size: 12px; }
#trackspanel .tpgo:hover { border-color: var(--pink); color: var(--pink); }
#trackspanel .tpgo[hidden] { display: none; }
#trackspanel .tpback { right: auto; left: -10px; }
/* the tracks panel's three rows */
#trackspanel .tptype { grid-column: 1 / -1; margin: 10px 0 6px; font: 800 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
#trackspanel .tptype:first-child { margin-top: 0; }
#trackspanel .tpshot { position: relative; height: min(15vh, 138px); }
#trackspanel .tplogo { position: absolute; left: 6px; top: 6px; width: 34%; max-height: 42%; object-fit: contain; object-position: left top;
  background: rgba(11,11,14,.72); border-radius: 6px; padding: 3px; box-sizing: border-box; }
#trackspanel .tpempty { margin: 0; padding: 18px; width: 100%; color: #6a6a76; font: 600 12px/1.4 var(--font); text-align: center; }
#trackspanel .tpin { max-height: 88vh; }
/* the club sign-up: four columns, the address field */
#paywall .pwcols.pwfour { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#paywall .pwurl { display: flex; align-items: center; gap: 0; border: 1px solid #24242b; border-radius: 8px; background: #0e0e12; overflow: hidden; }
#paywall .pwurl span { padding: 9px 4px 9px 11px; color: #8a8a96; font: 700 12.5px/1.4 var(--font); white-space: nowrap; }
#paywall .pwurl input { flex: 1 1 auto; min-width: 0; padding: 9px 11px 9px 0; border: 0; background: transparent; color: #fff; font: 700 13px/1.4 var(--font); }
#paywall .pwurl input:focus { outline: none; }
#paywall .pwurl:focus-within { border-color: #ff2d95; }
#paywall .pwok { color: #4dff59 !important; }
#paywall .pwbad { color: #ff5c7a !important; }
@media (max-width: 1100px) { #paywall .pwcols.pwfour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#liverace .lr-say { min-height: 16px; margin: 4px 0 2px; color: #ff5c7a; font: 800 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
/* the lobby's own racer-name box, beside the class pills (Scott) */
#liverace .lr-name { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#liverace .lr-name span { color: #8a8a96; font: 800 10px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; }
#liverace .lr-name input { width: 170px; padding: 8px 11px; border-radius: 8px; border: 1px solid #24242b; background: #0e0e12; color: #fff; font: 700 13px/1.2 var(--font); }
#liverace .lr-name input:focus { outline: none; border-color: #ff2d95; }

/* AUTO DRIVE on the intro's controller page (Scott) */
#wizard .wzaid { margin: 22px auto 0; max-width: 520px; text-align: center; }
#wizard .wzaidhead { display: inline-flex; align-items: center; gap: 10px; font: 900 italic 16px/1 var(--font); color: #fff; margin-bottom: 12px; cursor: pointer; }
#wizard .wzaidhead input { width: 18px; height: 18px; margin: 0; accent-color: var(--pink, #ff2d95); }
#wizard .wzaid input[type=range] { width: 100%; margin: 0; accent-color: var(--pink, #ff2d95); }
#wizard .wzaidends { display: flex; justify-content: space-between; margin-top: 6px; font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #8a8a95; }
#wizard .wzaidnote { margin: 12px 0 0; font: 600 12px/1.4 var(--font); color: #6f6f7a; }
/* the Controller Speed Test on the intro (2026-09-11) - the Radio page's green, steady */
#wizard .wzspeedrow { margin: 22px auto 0; text-align: center; }
#wizard .wzspeed { padding: 10px 20px; border: 1px solid #4dff59; border-radius: 999px; background: #0d1a10;
  color: #4dff59; font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 10px rgba(77,255,89,.45), inset 0 0 6px rgba(77,255,89,.15); }
#wizard .wzspeed:hover { color: #fff; box-shadow: 0 0 16px rgba(77,255,89,.7); }

/* the cursor leaves with the lights (race.js) */
body.nocursor, body.nocursor * { cursor: none !important; }

/* the win card buttons under a finished race (race.js) */
#racepanel .rcshare { display: flex; gap: 6px; margin: 8px 0 10px; }
#racepanel .rcshare button { flex: 1; padding: 9px 4px; border-radius: 8px; cursor: pointer;
  font: 700 12px "Chakra Petch", system-ui, sans-serif; letter-spacing: .04em;
  background: #1a1a22; color: #d7dae0; border: 1px solid #2a2a35; }
#racepanel .rcshare #rcshare { background: #ff2d95; color: #fff; border-color: #ff2d95; }

/* the class is locked while a race owns it (game.js classLocked) */
#classbar.locked .cls { opacity: .4; cursor: not-allowed; }

/* the live panel's class: pink like the track pick, and the slow-fast scale under it (Scott 2026-09-05) */
#liverace .lr-cls.on { box-shadow: 0 0 0 3px #ff2d95, 0 6px 18px rgba(255,45,149,.3); background: rgba(255,45,149,.16); }
#liverace .lr-speed { align-items: center; gap: 8px; margin: -16px 0 2px 62px; pointer-events: none; }   /* tucked right under the pills, an indicator not a slider (Scott) */
#liverace .lr-speed .lr-slow, #liverace .lr-speed .lr-fast { color: #8a8a95; font: 700 10px "Chakra Petch", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
#liverace .lr-track { position: relative; flex: 0 1 236px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #2a2a35, #ff2d95); }
#liverace .lr-mark { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  border: 3px solid #ff2d95; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(255,45,149,.6); transition: left .2s; }


/* ============================ THE TRACK'S STORY ============================
   A real track that people actually race on gets its photo and its story next
   to the board (Scott 2026-09-07: "think we could fit the photo and the story
   next to the track on screen, the track is small"). Bar Fight is 9 x 12, so
   it stands tall and narrow and leaves a whole column of empty black either
   side. JS parks this card in the right-hand gap and hides it the moment the
   gap is too small - the track is never covered. */
#trackstory {
  position: absolute; z-index: 5;
  width: 320px; max-height: 100%;
  overflow: hidden;
  padding: 0 0 14px;
  background: linear-gradient(180deg, #14141a 0%, #0b0b0f 100%);
  border: 1px solid #2a2a33; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  font: 13px/1.5 system-ui, sans-serif; color: #c7c7d2;
  pointer-events: none;
}
/* THE WHOLE PHOTO, UNCROPPED. It was briefly squeezed into a 132px band when
   "minimize" was read as "make it smaller" - it meant fold the card away, which
   the arrow now does. Nothing is cut off the picture. */
#trackstory img {
  display: block; width: 100%; height: auto;
  border-radius: 13px 13px 0 0;
  border-bottom: 1px solid #2a2a33;
}

/* ---------- IT FOLDS AWAY (Scott: not everybody wants to look at a photo) ----
   The card collapses to a name bar with an arrow. Nothing pops open over the
   track, and the choice is remembered for next time. */
#trackstory { pointer-events: auto; transition: none; }
#trackstory .tsfold {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid #3a3a45; border-radius: 7px;
  background: rgba(10, 10, 14, .78); color: #c7c7d2;
  font: 700 15px/1 var(--font);
}
#trackstory .tsfold:hover { border-color: var(--pink, #fe5e89); color: #fff; }
#trackstory .tsbar { display: none; }
#trackstory.folded { padding: 0; }
#trackstory.folded .tswrap { display: none; }
#trackstory.folded .tsbar {
  display: block; padding: 11px 40px 11px 14px; cursor: pointer;
  color: #d8d9e2; font: 800 12px/1 var(--font);
  letter-spacing: .1em; text-transform: uppercase;
}
#trackstory.folded .tsbar:hover { color: #fff; }
#trackstory .tsbody { padding: 12px 16px 0; }
#trackstory .tswhen {
  display: inline-block; margin: 0 0 8px;
  padding: 4px 10px; border-radius: 999px;
  background: #e8112d; color: #fff;
  font: 800 10px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
#trackstory h4 {
  margin: 0 0 6px; color: #fff;
  font: 800 17px/1.2 system-ui, sans-serif; letter-spacing: .02em;
}
#trackstory p { margin: 0 0 8px; }
#trackstory .tscred {
  margin: 2px 0 0; color: #6f6f7c;
  font: 700 10px/1.4 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}


/* ===================== THE SITE'S OWN NOTICE, BOTTOM RIGHT =====================
   Was riding Whippy's speech bubble for a few hours; Whippy belongs to Fast RC
   Parts and does not work for the site (Scott 2026-09-07). This is the site
   speaking as itself: small, bottom right, clear of the track and the pads,
   and it waits rather than interrupting. */
#sitetoast {
  position: fixed; right: 18px; bottom: 74px; z-index: 90;
  width: 268px; padding: 14px 16px 12px;
  background: linear-gradient(180deg, #16161d 0%, #0c0c11 100%);
  border: 1px solid #2c2c36; border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .6);
  font: 13px/1.45 var(--font); color: #c7c7d2;
  transform: translateY(14px); opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
}
#sitetoast.up { transform: translateY(0); opacity: 1; }
#sitetoast p { margin: 0 0 11px; }
#sitetoast .strow { display: flex; gap: 8px; }
#sitetoast button {
  flex: 1 1 auto; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
#sitetoast .styes { border: 0; background: var(--red, #e8112d); color: #fff; }
#sitetoast .styes:hover { filter: brightness(1.12); }
#sitetoast .stno { flex: 0 0 auto; border: 1px solid #3a3a45; background: transparent; color: #8b8b98; }
#sitetoast .stno:hover { color: #c7c7d2; border-color: #55555f; }
@media (max-width: 720px) { #sitetoast { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-width: 320px; } }


/* ============== THE REAL TRACK, ONE LINE ABOVE THE BOARD ==============
   The side card needs a column of spare width, and a phone has none - so where
   the card cannot go, this line does (Scott: "a link directly above Bar Fight
   to show the real track panel"). It sits in the black band over the board,
   never on the track, and opens the photo as a sheet. */
#storylink {
  position: absolute; z-index: 7;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 8px;
  background: rgba(20, 20, 27, .92);
  border: 1px solid #33333f; border-radius: 999px;
  color: #d8d9e2; font: 800 11px/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
#storylink:hover, #storylink:active { border-color: var(--pink, #fe5e89); color: #fff; }
#storylink .slthumb {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--pink, #fe5e89); flex: 0 0 auto;
}
#storylink .slgo { color: var(--pink, #fe5e89); font-weight: 900; }

/* the sheet it opens - up from the bottom, the way a phone expects */
#storysheet {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .62);
  opacity: 0; transition: opacity .22s ease;
}
#storysheet.up { opacity: 1; }
#storysheet .ssbox {
  width: 100%; max-width: 430px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #16161d 0%, #0c0c11 100%);
  border: 1px solid #2c2c36; border-radius: 16px 16px 0 0;
  transform: translateY(18px); transition: transform .22s ease;
}
#storysheet.up .ssbox { transform: translateY(0); }
#storysheet img { display: block; width: 100%; height: auto; border-radius: 15px 15px 0 0; }
#storysheet .ssbody { padding: 14px 18px 22px; color: #c7c7d2; font: 13.5px/1.55 var(--font); }
#storysheet .sswhen {
  display: inline-block; margin: 0 0 9px; padding: 5px 11px; border-radius: 999px;
  background: #e8112d; color: #fff;
  font: 800 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
}
#storysheet h4 { margin: 0 0 7px; color: #fff; font: 800 19px/1.2 var(--font); }
#storysheet p { margin: 0 0 9px; }
#storysheet .sscred { color: #6f6f7c; font: 700 10px/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; }
#storysheet .ssclose {
  display: block; width: 100%; margin: 6px 0 0; padding: 11px;
  border: 1px solid #3a3a45; border-radius: 9px; background: transparent; color: #9a9aa8;
  font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}


/* the venue block - who, where, when next. Sits between the story and the
   credit, in both the desktop card and the phone sheet. */
#trackstory .tsvenue, #storysheet .tsvenue {
  margin: 11px 0 9px; padding: 10px 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid #2a2a34; border-radius: 9px;
  display: flex; flex-direction: column; gap: 3px;
}
#trackstory .tsvenue b, #storysheet .tsvenue b {
  color: #fff; font: 800 13px/1.3 var(--font); letter-spacing: .01em;
}
#trackstory .tsvenue a, #storysheet .tsvenue a {
  color: #9fb6d6; font: 600 12px/1.4 var(--font); text-decoration: none;
  border-bottom: 1px dotted #4a5a72; align-self: flex-start;
}
#trackstory .tsvenue a:hover, #storysheet .tsvenue a:hover { color: #cfe0f6; }
#trackstory .tsvenue em, #storysheet .tsvenue em {
  margin-top: 3px; color: var(--pink, #fe5e89); font-style: normal;
  font: 800 11px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase;
}


/* ==================== HOT LAPS ====================
   A button beside the racer's name, and a panel of the quickest lap anybody
   has turned on every track and class (Scott 2026-09-08). */
/* THE PILL IS ON FIRE (Scott). An ember gradient under the words, a warm ring,
   and a flame that breathes - enough to catch the eye without becoming a
   fairground. It is the same pill on a phone, moved into the bottom strip by
   the script, so everybody sees it. */
#hotlapBtn {
  position: absolute; right: 100%; margin-right: 174px; top: 50%;
  transform: translateY(-50%); z-index: 39; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px 8px 12px; cursor: pointer;
  border: 1px solid #6a2a12; border-radius: 999px;
  background: linear-gradient(180deg, #34160c 0%, #1b0d08 100%);
  color: #ffcf9a; font: 800 10px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 0 0 rgba(255, 106, 26, .55);
  animation: hotpulse 2.6s ease-in-out infinite;
}
#hotlapBtn .flame { font-size: 13px; line-height: 1; display: inline-block;
  animation: hotflicker 1.5s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(255,120,20,.85)); }
#hotlapBtn:hover { border-color: #ff7a1a; color: #fff;
  background: linear-gradient(180deg, #4a1e0e 0%, #240f09 100%); }
@keyframes hotpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 26, .40); }
  50%      { box-shadow: 0 0 14px 2px rgba(255, 106, 26, .30); }
}
@keyframes hotflicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  45%      { transform: scale(1.14) rotate(3deg); opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
  #hotlapBtn, #hotlapBtn .flame { animation: none; }
}
/* on a phone it lives in the bottom strip with the other buttons */
#radio #hotlapBtn { position: static; transform: none; margin: 0; }

#hotlap {
  position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 96vw; z-index: 75;
  padding: 18px 20px 26px; box-sizing: border-box; overflow-y: auto;
  background: #0b0b0f; border-left: 1px solid var(--line);
}
#hotlap h3 { margin: 0 0 4px; color: #fff; font: 900 italic 20px/1 var(--font);
  letter-spacing: .04em; text-transform: uppercase; }
#hotlap .hlnote { margin: 0 0 16px; color: var(--dim); font: 600 11px/1.5 var(--font); }
#hotlap #hotClose { position: absolute; top: 10px; right: 12px; border: 0; background: none;
  color: var(--dim); font-size: 20px; cursor: pointer; }
#hotlap .hltrack { margin: 16px 0 6px; color: #fff;
  font: 800 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
#hotlap .hlrow { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px;
  align-items: baseline; padding: 7px 0; border-top: 1px solid #1e1e26; }
#hotlap .hlcls { color: var(--pink); font: 800 11px/1 var(--font); letter-spacing: .1em; }
#hotlap .hlwho { color: #d7d9e2; font: 700 13px/1.2 var(--font);
  overflow: hidden; text-overflow: ellipsis; }
#hotlap .hltime { color: #fff; font: 800 15px/1 ui-monospace, Consolas, monospace; }
#hotlap .hlnone { color: #5f6270; font: 600 12px/1.6 var(--font); }
#hotlap .hlgold { color: #ffd34d; font-size: 10px; margin-left: 5px; }

/* ============ THE STORY PILL, DOWN IN THE BUTTON BAR ============
   On a phone the board is top-aligned in the canvas, so there is no black band
   above it to hold the "See the real ..." line, and the fallback put it on the
   first corner (Scott 2026-09-08: it must not cover the track). When there is
   no room above, the JS moves it out of the stage and into the button bar, and
   here it stops being an overlay and behaves like the buttons beside it. */
#storylink.inbar {
  position: static; z-index: auto;
  left: auto; top: auto;
  /* order 0 keeps it in the first group, right after Hot Lap - the numbered
     buttons (Tracks, Cars, Setup, Projector, Full screen) all follow */
  order: 0;
  background: #101014;
  border-color: var(--line2, #24242b);
}
#storylink.inbar .slthumb { width: 17px; height: 17px; }
#radio #storylink.inbar { padding: 2px 11px 2px 5px; font-size: 10px; }


/* ============ THE STORY PILL SITS ABOVE THE BOARD ============
   Scott 2026-09-08: "the bubble should sit above the track, and in full screen
   it should not appear at all." On a phone the board starts at the very top of
   the canvas, so there was no band over it to sit in - this reserves one. The
   board is limited by the phone's WIDTH, so the canvas losing a little height
   does not shrink it: the strip costs no track. */
body.touchapp.entered.storylink-on #stage { margin-top: 92px; }
#storylink.overboard { position: fixed; }
body.fullscreen #storylink { display: none !important; }

/* NO GLOW ON A PHONE (Scott 2026-09-08: "remove the glow from Hot Lap, it's
   distracting"). The pill and its fire stay exactly as they are - what goes is
   the pulsing halo around it and the glow behind the flame, both of which move
   constantly right beside the track you are trying to watch. Desktop keeps it. */
body.touchapp #hotlapBtn { animation: none; box-shadow: none; }
body.touchapp #hotlapBtn .flame { animation: none; filter: none; }

/* THE PILLS SIT CENTRED IN PORTRAIT (Scott 2026-09-08). Held to the left they
   left a ragged edge down the right of every row. The MARSHAL is untouched by
   this - it is absolutely positioned off the bar's own centre line, so it
   stays dead centre and alone whatever the rows around it do. */
@media (orientation: portrait) {
  body.touchapp #radio { justify-content: center; }
}