/* Lights Out — broadcast-style overlay.
   The HUD borrows the language of an F1 timing graphic: thin condensed type, a hard magenta
   for personal bests, green and red for gained and lost time, and panels that sit at the edges
   so the middle of the screen stays clear for the car.

   Two things drive the layout beyond that. Split screen: each driver's readout is positioned over
   their own slice of the canvas, so the panels are absolutely placed from numbers JavaScript
   computes from the same viewport rectangles the renderer uses. And portrait phones, where the
   game is played one-handed-ish with two thumbs on glass, so the controls are part of the layout
   rather than an afterthought pinned on top of it. */

:root {
  --bg: #05070c;
  --panel: rgba(9, 13, 22, 0.82);
  --panel-solid: #0b1020;
  --edge: rgba(255, 255, 255, 0.10);
  --text: #eef2f8;
  --dim: #8b95a7;
  --dimmer: #5d6675;
  --purple: #d63bd6;
  --green: #29d17c;
  --red: #ef3d4c;
  --amber: #ffb020;
  --blue: #56d4ff;
  --f1: #e8112d;
}

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

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#canvas-wrap { position: fixed; inset: 0; }
#canvas-wrap canvas { display: block; width: 100%; height: 100%; }

button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- loading */

#loading {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; background: var(--bg);
  transition: opacity .5s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
/* The fade leaves it transparent; this is what actually takes it out of the layout afterwards. */
#loading[hidden] { display: none; }
.lights { display: flex; gap: 14px; }
.lights i {
  width: 34px; height: 34px; border-radius: 50%;
  background: #20242e; border: 2px solid #2e3440;
  transition: background .2s ease, box-shadow .2s ease;
}
.lights i.on { background: var(--f1); box-shadow: 0 0 22px rgba(232, 17, 45, .75); border-color: #ff4d63; }
#loading-text { color: var(--dim); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; margin: 0; }

/* ---------------------------------------------------------------- shared controls */

.go {
  border: none; border-radius: 10px; padding: 15px 34px;
  font-size: 15px; font-weight: 700; letter-spacing: .14em;
  background: var(--f1); color: #fff;
}
.go:disabled { background: #2a2f3a; color: var(--dimmer); cursor: not-allowed; }
button.ghost, a.ghost {
  border: 1px solid var(--edge); background: rgba(255,255,255,.05); color: var(--text);
  border-radius: 9px; padding: 11px 18px; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
button.ghost:hover, a.ghost:hover { background: rgba(255,255,255,.10); }
.rowbtns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.note { font-size: 11.5px; color: var(--dimmer); letter-spacing: .04em; line-height: 1.6; margin: 0; }

/* Small segmented option pickers, used all over the setup screen. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  border: 1px solid var(--edge); background: rgba(255,255,255,.04); color: var(--dim);
  border-radius: 7px; padding: 7px 12px; font-size: 11.5px; letter-spacing: .1em; font-weight: 600;
}
.seg button.on { background: rgba(232,17,45,.18); color: #ff8b98; border-color: rgba(232,17,45,.5); }
.opt-row { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.opt-row > label { font-size: 10.5px; letter-spacing: .16em; color: var(--dim); }

/* Import and export, wherever they appear. Quieter than the buttons around them: taking a setup out
   of the game is a thing you do occasionally, not a thing the screen should be about. */
#settings-row { margin-bottom: 6px; }
#settings-row .rowbtns button, .transferrow button { padding: 6px 10px; font-size: 10.5px; }
.transferrow { margin-top: 10px; }
#transfer-note, #settings-note { margin-top: 6px; }

/* Volume. The button carries the on/off state, the slider is only reachable while it is on. */
#sound-row { margin-top: 14px; margin-bottom: 0; }
.soundrow { display: flex; gap: 10px; align-items: center; }
.soundrow button { min-width: 58px; }
.soundrow button.on { color: #ff8b98; border-color: rgba(232,17,45,.5); background: rgba(232,17,45,.14); }
.soundrow input[type=range] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px; flex: 1;
  background: rgba(255,255,255,.14); min-width: 0;
}
.soundrow input[type=range]:disabled { opacity: .35; }
.soundrow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text); border: 2px solid #0b1020; cursor: pointer;
}
.soundrow input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 2px solid #0b1020;
}

/* ---------------------------------------------------------------- setup screen */

.screen {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: radial-gradient(ellipse at 50% -10%, #101a33 0%, #05070c 62%);
  padding: 24px clamp(16px, 4vw, 54px);
  display: flex; flex-direction: column; gap: 18px;
}
.screen[hidden] { display: none; }

#setup-head { flex: 0 0 auto; border-left: 3px solid var(--f1); padding-left: 14px; }
#setup-head .round { font-size: 11px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
#setup-head h1 { margin: 4px 0 5px; font-size: clamp(22px, 3.2vw, 34px); font-weight: 650; letter-spacing: -.015em; line-height: 1.1; }
#setup-head .meta { font-size: 12.5px; color: var(--dim); }
#setup-head .phase {
  margin-top: 10px; display: inline-block; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
  background: rgba(232, 17, 45, .16); color: #ff7183; border: 1px solid rgba(232,17,45,.35);
}
#setup-head .phase.next { background: rgba(255,255,255,.06); color: var(--dim); border-color: var(--edge); }
#setup-head .stats { margin-top: 9px; font-size: 11.5px; color: var(--dimmer); letter-spacing: .06em; }

.cols {
  flex: 1 1 auto; display: grid; gap: 16px; align-content: start;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.5fr) minmax(220px, 1fr);
}
.panel {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
  padding: 16px 18px; backdrop-filter: blur(9px);
}
.panel h2 {
  margin: 0 0 14px; font-size: 10.5px; letter-spacing: .22em; color: var(--dim);
  text-transform: uppercase; font-weight: 600;
}

/* Session modes as stacked cards. */
.mode-card {
  display: block; width: 100%; text-align: left; margin-bottom: 8px;
  border: 1px solid var(--edge); background: rgba(255,255,255,.03); color: var(--text);
  border-radius: 10px; padding: 12px 14px;
}
.mode-card b { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: .01em; }
.mode-card span { display: block; font-size: 11.5px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.mode-card.on { border-color: rgba(232,17,45,.6); background: rgba(232,17,45,.12); }
.mode-card.on b { color: #ff8b98; }

/* Driver rows. */
.driver {
  display: grid; gap: 10px; align-items: center; margin-bottom: 10px;
  grid-template-columns: 26px 1fr 128px 150px 30px;
  border: 1px solid var(--edge); background: rgba(255,255,255,.03);
  border-radius: 10px; padding: 9px 11px;
}
.driver .num {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: rgba(255,255,255,.08); color: var(--dim);
}
.driver input.name {
  background: #10162a; border: 1px solid var(--edge); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font-size: 13px; font-family: inherit; min-width: 0;
}
.driver select {
  background: #10162a; border: 1px solid var(--edge); color: var(--text);
  border-radius: 7px; padding: 8px 6px; font-size: 11.5px; font-family: inherit; min-width: 0;
}
.driver select.missing { border-color: rgba(255,176,32,.6); color: var(--amber); }
.driver .car { display: flex; align-items: center; gap: 6px; min-width: 0; }
.driver .car canvas { width: 84px; height: 30px; border-radius: 5px; border: 1px solid var(--edge); display: block; }
.driver .car .nm { font-size: 10.5px; color: var(--dim); letter-spacing: .08em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver .car button, .driver .kill {
  border: 1px solid var(--edge); background: rgba(255,255,255,.05); color: var(--dim);
  border-radius: 6px; width: 24px; height: 26px; font-size: 12px; padding: 0; line-height: 1;
}
.driver .kill { color: #ff7183; height: 28px; }
/* A driver on another PC: shown so everybody can see who is in, but nothing here is theirs to edit. */
.driver.remote { border-color: rgba(86,212,255,.35); background: rgba(86,212,255,.06); }
.driver .rname { font-size: 13px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver .rdev { font-size: 10.5px; letter-spacing: .1em; color: var(--blue); }

/* Inline QR shown in a driver row when "Mobile controller" is selected. */
.driver .inline-qr {
  grid-column: 2 / -1; display: flex; align-items: center; gap: 12px;
  padding: 6px 0 2px;
}
.driver .inline-qr img {
  width: 80px; height: 80px; border-radius: 6px; background: #fff; padding: 4px;
  flex: 0 0 auto;
}
.driver .inline-qr .iq-info { min-width: 0; }
.driver .inline-qr .iq-label {
  font-size: 9px; letter-spacing: .18em; color: var(--dimmer); text-transform: uppercase;
}
.driver .inline-qr .iq-url {
  font-size: 11px; color: var(--blue); word-break: break-all; margin-top: 2px;
}
.driver .inline-qr .iq-code {
  font-size: 22px; font-weight: 700; letter-spacing: .25em; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.driver .inline-qr .iq-hint {
  font-size: 9.5px; color: var(--dimmer); margin-top: 4px; letter-spacing: .04em;
}

/* The same pairing block on a guest's lobby, where it stands on its own rather than inside a row. */
#join-pair {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.04);
  padding: 10px 12px; max-width: 340px;
}
#join-pair[hidden] { display: none; }
#join-pair img {
  width: 100px; height: 100px; border-radius: 6px; background: #fff; padding: 4px; flex: 0 0 auto;
}
#join-pair .iq-info { min-width: 0; }
#join-pair .iq-label {
  font-size: 9px; letter-spacing: .18em; color: var(--dimmer); text-transform: uppercase;
}
#join-pair .iq-url { font-size: 11px; color: var(--blue); word-break: break-all; margin-top: 2px; }
#join-pair .iq-code {
  font-size: 20px; font-weight: 700; letter-spacing: .25em; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
#join-pair .iq-hint { font-size: 9.5px; color: var(--dimmer); margin-top: 4px; }

/* Pairing. */
#pairing { margin-top: 12px; border-top: 1px solid var(--edge); padding-top: 14px; }
.qr-wrap { display: flex; gap: 16px; align-items: flex-start; }
#pair-qr { border-radius: 8px; background: #fff; padding: 6px; flex: 0 0 auto; }
.qr-side { min-width: 0; }
.qr-side .k { font-size: 9.5px; letter-spacing: .18em; color: var(--dimmer); margin-top: 8px; }
.qr-side .k:first-child { margin-top: 0; }
.qr-side .url { font-size: 12px; color: var(--blue); word-break: break-all; margin-top: 3px; }
.qr-side .code {
  font-size: 30px; font-weight: 700; letter-spacing: .3em; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.invite { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); }
.invite .k { font-size: 9.5px; letter-spacing: .18em; color: var(--dimmer); }
.inviterow { display: flex; gap: 8px; margin-top: 6px; }
.inviterow input {
  flex: 1; min-width: 0; background: #10162a; border: 1px solid var(--edge); color: var(--blue);
  border-radius: 7px; padding: 8px 10px; font-size: 12px; font-family: inherit;
}

/* ---------------------------------------------------------------- sheet screens (tracks, car) */

.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex: 0 0 auto; padding-bottom: 4px;
}
.sheet-head h1 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 30px); font-weight: 650; }
.sheet-head .note { max-width: 62ch; }

/* ---------------------------------------------------------------- circuit selector */

#tracks { overflow-y: auto; }
#track-grid {
  display: grid; gap: 12px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.trackcard {
  border: 1px solid var(--edge); background: rgba(255,255,255,.03); color: var(--text);
  border-radius: 11px; padding: 10px; text-align: left; position: relative; overflow: hidden;
}
.trackcard:hover { background: rgba(255,255,255,.08); }
.trackcard.on { border-color: rgba(232,17,45,.65); background: rgba(232,17,45,.12); }
.trackcard canvas { display: block; width: 100%; height: auto; border-radius: 12px; background: #08111d; }
.trackcard b { display: block; font-size: 13.5px; font-weight: 650; margin-top: 6px; line-height: 1.25; }
.trackcard .where { font-size: 11px; color: var(--dim); margin-top: 2px; }
.trackcard .facts { font-size: 10.5px; color: var(--dimmer); margin-top: 4px; letter-spacing: .03em; }
.trackcard .badge {
  position: absolute; top: 8px; right: 8px; font-size: 9px; letter-spacing: .14em; font-weight: 700;
  padding: 3px 7px; border-radius: 4px; background: var(--f1); color: #fff;
}
.trackcard .badge.next { background: rgba(255,255,255,.14); color: var(--text); }

/* ---------------------------------------------------------------- car setup */

/* Both of these open *over* another screen — the car panel from the lobby, the circuit list from the
   setup screen — so they sit above the rest of the .screen stack rather than beside it in DOM order. */
#carpanel, #tracks { z-index: 45; }
#carpanel { overflow-y: auto; }
.carcols {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}
#car-groups { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.cargroup { border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); overflow: hidden; }
.cargroup > summary {
  padding: 11px 14px; cursor: pointer; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text); font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.cargroup > summary::-webkit-details-marker { display: none; }
.cargroup > summary::after { content: '+'; color: var(--dim); font-size: 15px; }
.cargroup[open] > summary::after { content: '–'; }
.cargroup > summary .tag {
  font-size: 9px; letter-spacing: .1em; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,176,32,.18); color: #ffcd70; border: 1px solid rgba(255,176,32,.4);
}
.cargroup .body { padding: 4px 14px 14px; border-top: 1px solid var(--edge); }
.cargroup .blurb { font-size: 11.5px; color: var(--dimmer); line-height: 1.6; margin: 10px 0 12px; }

.carrow { display: grid; grid-template-columns: 148px 1fr 108px; gap: 10px; align-items: center; padding: 4px 0; }
.carrow > label { font-size: 11.5px; color: var(--dim); letter-spacing: .02em; }
.carrow.changed > label { color: var(--amber); }
.carrow input[type=range] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.14); min-width: 0;
}
.carrow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text); border: 2px solid #0b1020; cursor: pointer;
}
.carrow.changed input[type=range]::-webkit-slider-thumb { background: var(--amber); }
.carrow input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 2px solid #0b1020;
}
.carnum { display: flex; align-items: baseline; gap: 4px; }
.carnum input {
  width: 72px; background: #10162a; border: 1px solid var(--edge); color: var(--text);
  border-radius: 6px; padding: 5px 6px; font-size: 12px; font-family: inherit;
  font-variant-numeric: tabular-nums; text-align: right;
}
.carnum span { font-size: 10px; color: var(--dimmer); }
.carrow .hint { grid-column: 1 / -1; font-size: 10.5px; color: var(--dimmer); line-height: 1.5; margin: 0 0 4px; }

#car-side {
  border: 1px solid var(--edge); border-radius: 11px; background: var(--panel);
  padding: 14px 16px; position: sticky; top: 0;
}
#car-side h3 {
  margin: 16px 0 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); font-weight: 600;
}
#car-side h3:first-child { margin-top: 0; }
.presetbtn {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  border: 1px solid var(--edge); background: rgba(255,255,255,.04); color: var(--text);
  border-radius: 8px; padding: 8px 10px;
}
.presetbtn b { display: block; font-size: 12.5px; font-weight: 650; }
.presetbtn span { display: block; font-size: 10.5px; color: var(--dim); margin-top: 2px; line-height: 1.45; }
.presetbtn:hover { background: rgba(255,255,255,.09); }

/* Saving a setup of your own: one box, one button, then a shelf of them. */
.saverow { display: flex; gap: 6px; margin-bottom: 8px; }
.saverow input {
  flex: 1; min-width: 0; background: #10162a; border: 1px solid var(--edge); color: var(--text);
  border-radius: 8px; padding: 7px 9px; font-size: 12px; font-family: inherit;
}
.saverow button { flex: 0 0 auto; padding: 7px 11px; font-size: 11px; }
.minerow { display: flex; gap: 6px; align-items: stretch; }
.minerow .presetbtn { flex: 1; min-width: 0; }
.minerow .kill {
  flex: 0 0 auto; width: 30px; margin-bottom: 6px; border: 1px solid var(--edge);
  background: rgba(255,255,255,.04); color: #ff7183; border-radius: 8px; font-size: 15px;
}
.minerow .kill:hover { background: rgba(255,113,131,.16); }
#car-mine .hint { font-size: 10.5px; color: var(--dimmer); line-height: 1.5; margin: 0 0 6px; }

#car-summary { font-variant-numeric: tabular-nums; }
#car-summary .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 3px 0; font-size: 11.5px;
}
#car-summary .row span:first-child { color: var(--dim); }
#car-summary .row b { font-weight: 600; }
#car-summary .row.warn b { color: var(--amber); }

/* ---------------------------------------------------------------- joining another PC's game */

#join { align-items: center; justify-content: center; text-align: center; gap: 14px; }
#join h1 { margin: 0; font-size: clamp(24px, 4vw, 36px); font-weight: 650; }

/* Two columns once there is a lobby to show: your own car on the left, the room on the right. */
#join-cols {
  display: flex; gap: 22px; align-items: flex-start; justify-content: center;
  width: 100%; max-width: 840px; flex-wrap: wrap;
}
#join-me { display: flex; flex-direction: column; align-items: center; gap: 13px; min-width: 280px; flex: 1 1 280px; }
#join-me .opt-row { width: 100%; justify-content: center; }
#join-lobby-btns { justify-content: center; }
#join-ready.on { background: var(--green); border-color: transparent; color: #04140a; }

#lobby {
  flex: 1 1 300px; min-width: 280px; max-width: 400px; text-align: left;
  border: 1px solid var(--edge); border-radius: 11px; background: var(--panel); padding: 15px 17px;
}
#lobby-session { border-left: 3px solid var(--f1); padding-left: 12px; margin-bottom: 4px; }
#lobby-session .round { font-size: 10.5px; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }
#lobby-session h2 { margin: 4px 0 4px; font-size: 19px; font-weight: 650; line-height: 1.15; }
#lobby-session .meta { font-size: 12px; color: var(--dim); }
#lobby-session .stats { font-size: 11px; color: var(--dimmer); margin-top: 3px; font-variant-numeric: tabular-nums; }
#lobby h3 {
  margin: 15px 0 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); font-weight: 600;
}
.lobbyrow {
  display: flex; align-items: center; gap: 10px; padding: 5px 7px; border-radius: 8px;
  border: 1px solid transparent;
}
.lobbyrow.me { border-color: var(--edge); background: rgba(255,255,255,.05); }
.lobbyrow svg, .lobbyrow canvas { flex: 0 0 auto; border-radius: 4px; }
.lobbyrow .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lobbyrow .who b { font-size: 12.5px; font-weight: 650; letter-spacing: .04em; }
.lobbyrow .who span { font-size: 10.5px; color: var(--dimmer); }
.tick { flex: 0 0 auto; width: 18px; text-align: center; font-size: 13px; color: var(--dimmer); }
.tick.on { color: var(--green); }
#lobby-note { margin: 10px 0 0; }
#lobby-owner { margin-bottom: 8px; }
#lobby-owner .opt-row { margin-bottom: 8px; }
#lobby-owner select, #lobby-owner input {
  background: #10162a; border: 1px solid var(--edge); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font-size: 12.5px; font-family: inherit;
  width: 100%; max-width: none; text-align: left; letter-spacing: normal;
}
#lobby-owner .go { width: 100%; margin-top: 4px; }
#join input {
  background: #10162a; border: 1px solid var(--edge); color: var(--text);
  border-radius: 10px; padding: 13px 16px; font-size: 16px; font-family: inherit;
  text-align: center; letter-spacing: .1em; width: 260px; max-width: 84vw;
}
#join .bigcode { text-transform: uppercase; letter-spacing: .5em; font-weight: 700; font-size: 24px; }
.carpick { display: flex; align-items: center; gap: 12px; }
.carpick button { width: 40px; }
#join-car canvas { border-radius: 6px; border: 1px solid var(--edge); display: block; max-width: 60vw; height: auto; }

/* ---------------------------------------------------------------- setup footer */

#setup-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
#setup-foot .hint { font-size: 11.5px; color: var(--dim); letter-spacing: .06em; }

/* ---------------------------------------------------------------- in-session HUD */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud[hidden] { display: none; }

#event {
  position: absolute; top: 16px; left: 18px; max-width: 300px; display: none;
  background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--f1);
  border-radius: 10px; padding: 10px 13px; backdrop-filter: blur(9px);
}
#event .round { font-size: 10px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
#event h1 { margin: 3px 0 3px; font-size: 17px; font-weight: 650; line-height: 1.15; }
#event .meta { font-size: 11px; color: var(--dim); }
#event .phase { margin-top: 7px; display: inline-block; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
  background: rgba(232,17,45,.16); color: #ff7183; border: 1px solid rgba(232,17,45,.35); }
#event .phase.next { background: rgba(255,255,255,.06); color: var(--dim); border-color: var(--edge); }

/* Per-driver readout, absolutely placed over that driver's viewport by hud.js. */
.phud {
  position: absolute; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  font-variant-numeric: tabular-nums;
}
.phud.multi { border: 1px solid rgba(255,255,255,.07); border-radius: 4px; }
.phud .who {
  display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .14em; color: var(--dim);
}
.phud .who i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.phud .who b { color: var(--text); font-weight: 650; letter-spacing: .1em; }
.phud .pos { font-size: 15px; font-weight: 700; color: var(--amber); }

.phud .card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 9px;
  padding: 8px 11px; backdrop-filter: blur(9px); align-self: flex-start; min-width: 190px;
}
.phud .lap { display: flex; align-items: baseline; gap: 8px; }
.phud .lap .label { font-size: 9.5px; letter-spacing: .2em; color: var(--dim); }
.phud .lap .value { font-size: 27px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.phud .invalid { font-size: 9px; letter-spacing: .12em; color: var(--red);
  border: 1px solid var(--red); border-radius: 3px; padding: 1px 4px; }
.phud .delta { font-size: 15px; font-weight: 600; min-height: 19px; }
.phud .delta.up { color: var(--green); }
.phud .delta.down { color: var(--red); }
.phud .sectors { display: flex; gap: 4px; margin-top: 5px; }
.phud .sectors span {
  font-size: 9.5px; letter-spacing: .06em; padding: 2px 7px; border-radius: 3px; min-width: 56px;
  text-align: center; background: rgba(255,255,255,.05); color: var(--dim); border: 1px solid var(--edge);
}
.phud .sectors span.best { background: rgba(214,59,214,.2); color: #f39cf3; border-color: rgba(214,59,214,.5); }
.phud .sectors span.good { background: rgba(41,209,124,.16); color: #6ee7ac; border-color: rgba(41,209,124,.4); }
.phud .sectors span.slow { background: rgba(255,176,32,.14); color: #ffcd70; border-color: rgba(255,176,32,.35); }
.phud .rows { display: flex; gap: 12px; font-size: 10.5px; color: var(--dim); margin-top: 6px; }
.phud .rows b { color: var(--text); font-weight: 500; font-size: 12px; }
.phud .corner { font-size: 11.5px; color: var(--amber); min-height: 16px; letter-spacing: .04em; }

/* Speed block sits at the bottom of the driver's slice. */
.phud .drive { display: flex; align-items: flex-end; gap: 10px; }
.phud .speed { display: flex; align-items: baseline; gap: 4px; }
.phud .speed span { font-size: 34px; font-weight: 300; line-height: 1; }
.phud .speed small { font-size: 9px; letter-spacing: .16em; color: var(--dim); }
.phud .gear { font-size: 28px; font-weight: 700; color: var(--f1); line-height: 1; }
.phud .meters { display: flex; flex-direction: column; gap: 4px; flex: 1; max-width: 150px; }
.phud .meter { height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.phud .meter i { display: block; height: 100%; width: 0%; }
.phud .meter.rev i { background: linear-gradient(90deg, #3aa0ff, #29d17c 55%, #ffb020 82%, var(--red)); }
.phud .meter.ers i { background: linear-gradient(90deg, #2f7dff, #56d4ff); }
.phud .meter.fuel i { background: linear-gradient(90deg, #b9821f, #ffc861); }
.phud .pedal-pair { display: flex; gap: 3px; align-items: flex-end; height: 44px; }
.phud .pedal { width: 8px; height: 100%; background: rgba(255,255,255,.08); border-radius: 3px;
  display: flex; align-items: flex-end; }
.phud .pedal i { display: block; width: 100%; height: 0%; border-radius: 3px; }
.phud .pedal.t i { background: var(--green); }
.phud .pedal.b i { background: var(--red); }

/* The minimap. Backed at 132 px and scaled by CSS, so it stays crisp when the panel shrinks. */
.phud .minimap {
  display: block; width: 116px; height: 116px; align-self: flex-start;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 9px;
  backdrop-filter: blur(9px); padding: 2px; margin-bottom: 6px;
}
.phud .minimap[hidden] { display: none; }

/* Tyres and damage, compact enough to sit in a quarter of a screen. */
.phud .tyres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 8px; margin-top: 6px; }
.phud .tyre { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--dim); }
.phud .tyre i { width: 7px; height: 11px; border-radius: 2px; background: #444; display: block; }
.phud .tyre i.cold { background: #6aa8ff; }
.phud .tyre i.ok { background: var(--green); }
.phud .tyre i.hot { background: var(--amber); }
.phud .tyre i.over { background: var(--red); }
.phud .tyre i.gone { background: #2a2f3a; box-shadow: inset 0 0 0 1px var(--red); }

.phud .damage { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.phud .damage span {
  font-size: 9px; letter-spacing: .1em; padding: 2px 6px; border-radius: 3px;
  background: rgba(255,176,32,.16); color: #ffcd70; border: 1px solid rgba(255,176,32,.4);
}
.phud .damage span.bad { background: rgba(239,61,76,.18); color: #ff8b96; border-color: rgba(239,61,76,.5); }
.phud .flag {
  font-size: 12px; letter-spacing: .16em; font-weight: 700; padding: 4px 10px; border-radius: 5px;
  align-self: flex-start; background: rgba(239,61,76,.2); color: #ff8b96; border: 1px solid rgba(239,61,76,.5);
}

/* ---------------------------------------------------------------- standings */

#standings {
  position: absolute; top: 16px; right: 18px; width: 268px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 10px;
  padding: 9px 11px; backdrop-filter: blur(9px); font-variant-numeric: tabular-nums;
}
#standings[hidden] { display: none; }
#standings .head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9.5px; letter-spacing: .18em; color: var(--dim); margin-bottom: 7px;
  padding-bottom: 6px; border-bottom: 1px solid var(--edge);
}
#standings .head span:last-child { color: var(--text); font-size: 12px; letter-spacing: .06em; }
.srow {
  display: grid; grid-template-columns: 18px 10px 1fr auto; gap: 7px; align-items: center;
  padding: 3px 0; font-size: 11.5px;
}
.srow .p { color: var(--dim); font-size: 10.5px; text-align: right; }
.srow i { width: 8px; height: 12px; border-radius: 2px; display: block; }
.srow .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em; }
.srow .g { color: var(--dim); font-size: 10.5px; }
.srow.you { background: rgba(255,255,255,.06); border-radius: 4px; }
.srow.you .n { color: var(--text); font-weight: 650; }
.srow.out { opacity: .45; }
.srow.out .g { color: var(--red); }
.srow .g.purple { color: var(--purple); }

/* ---------------------------------------------------------------- start lights */

#lights-strip {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 12;
}
#lights-strip[hidden] { display: none; }
#lights-strip i {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1b1f27; border: 2px solid #2e3440;
}
#lights-strip i.on { background: #ff1122; border-color: #ff6070; box-shadow: 0 0 26px rgba(255,17,34,.85); }

/* ---------------------------------------------------------------- misc HUD */

#help {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--dim); padding: 6px 14px; text-align: center;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; max-width: 90vw;
}
#help b { color: var(--text); font-weight: 600; }
#help .player-tag { color: var(--amber); font-weight: 600; margin-right: 2px; }
#help:empty { display: none; }

/* Above the setup and results screens (40), because a controller joining is announced while the
   setup screen is still up. Below the loading screen (60). */
#flash {
  position: fixed; left: 50%; top: 24%; transform: translateX(-50%);
  font-size: clamp(22px, 4vw, 34px); font-weight: 600; opacity: 0; z-index: 50;
  transition: opacity .35s ease; pointer-events: none; text-align: center;
  text-shadow: 0 3px 24px rgba(0,0,0,.9);
}
#flash.show { opacity: 1; }
#flash .sub { display: block; font-size: 14px; color: var(--dim); letter-spacing: .1em; margin-top: 6px; font-weight: 400; }

/* ---------------------------------------------------------------- results & pause */

#results, #pause, #arm { align-items: center; justify-content: center; text-align: center; }
#results h1, #pause h1, #arm h1 { margin: 0; font-size: clamp(24px, 4vw, 38px); font-weight: 650; }
#results-sub { font-size: 12.5px; color: var(--dim); letter-spacing: .1em; }
#results-table {
  width: min(620px, 92vw); background: var(--panel); border: 1px solid var(--edge);
  border-radius: 12px; padding: 12px 16px; font-variant-numeric: tabular-nums;
}
.rrow {
  display: grid; grid-template-columns: 30px 12px 1fr auto auto; gap: 12px; align-items: center;
  padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.05); text-align: left;
}
.rrow:last-child { border-bottom: none; }
.rrow .p { font-weight: 700; color: var(--amber); text-align: right; }
.rrow i { width: 10px; height: 15px; border-radius: 2px; display: block; }
.rrow .g { color: var(--dim); font-size: 12px; }
.rrow .b { color: var(--purple); font-size: 12px; }
.rrow.win .p { color: #fff; }
.rrow.win { background: rgba(232,17,45,.12); }
.rrow.out { opacity: .5; }

/* ---------------------------------------------------------------- phone driving controls

   The same grid as the controller page, to the pixel — see the `#app` rule in pad.html, which this
   is a copy of on purpose.

   A phone acting as a wheel for somebody else's PC and a phone running the game itself are the same
   two thumbs doing the same job, and they should not need to be learned twice. The pedals used to
   differ in every dimension that matters to a thumb: 30vw wide against 24%, 42vh tall against the
   whole height, squared off against the bottom edge rather than floating, and with no percentage on
   them. Since a pedal's value is its travel as a fraction of its own height — the same
   `(bottom − y) / height × 1.32` in both pages — a pad of a different height is a different control,
   and the same movement asked the car for different things depending on which page you were holding.
   Now it does not.

   The one deliberate difference is that these are translucent. There is a race going on behind
   them, and there is nothing behind the controller page. */

#touch-controls {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  display: grid;
  grid-template-columns: minmax(72px, 24%) 1fr minmax(72px, 24%);
  grid-template-rows: auto 1fr;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#touch-controls[hidden] { display: none; }

.tpad {
  position: relative; grid-row: 2; margin: 6px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--edge); background: rgba(9,13,22,.55); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; pointer-events: auto;
}
#t-brake { grid-column: 1; }
#t-throttle { grid-column: 3; }
.tpad .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; }
#t-brake .fill { background: linear-gradient(0deg, #c01625, #ef3d4c); }
#t-throttle .fill { background: linear-gradient(0deg, #12854c, #29d17c); }
.tpad .tag {
  position: relative; width: 100%; text-align: center; padding: 10px 0;
  font-size: 11px; letter-spacing: .18em; color: var(--text); text-shadow: 0 1px 6px #000;
}
.tpad .pct {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center;
  font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text);
  text-shadow: 0 1px 6px #000; opacity: .85;
}
.tpad.active { border-color: rgba(255,255,255,.4); }

/* The top strip, as on the controller page. Six controls rather than that page's four, so they are
   trimmed to hold one row on the narrowest phone worth supporting — wrapping would push the strip
   down over the readout beneath it. They keep their words: an icon nobody can name is not an
   improvement. */
#t-buttons {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; gap: 5px; padding: 6px 10px; justify-content: flex-end; flex-wrap: nowrap;
  pointer-events: auto;
}
.tbtn {
  border: 1px solid var(--edge); background: rgba(9,13,22,.75); color: var(--dim);
  border-radius: 8px; padding: 6px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  white-space: nowrap; backdrop-filter: blur(6px);
}
.tbtn.on { background: rgba(86,212,255,.2); color: var(--blue); border-color: rgba(86,212,255,.5); }

/* The touch-steering strip, only shown when tilt is unavailable or declined. It takes the middle
   column — where the controller page puts the same fallback — but only the bottom of it, because
   here the middle column is the game. */
#t-steer {
  position: relative; grid-column: 2; grid-row: 2; align-self: end;
  height: 22vh; margin: 6px; border-radius: 16px;
  pointer-events: auto; display: none;
  border: 1px solid var(--edge); background: rgba(9,13,22,.35);
}
#t-steer.on { display: block; }
#t-steer::after {
  content: '◄  DRAG TO STEER  ►'; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 10px; letter-spacing: .18em; color: var(--dimmer);
}

/* ---------------------------------------------------------------- portrait phones
   The game runs vertically on a phone, so the HUD has to get out of the way of two thumbs and
   the bottom half of the screen. Panels move to the top, the standings become a thin strip, and
   the driver readout loses everything that cannot be read at a glance. */

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .driver { grid-template-columns: 24px 1fr 34px; grid-template-areas: 'n name kill' 'dev dev dev' 'car car car' 'qr qr qr'; }
  .driver .num { grid-area: n; }
  .driver input.name { grid-area: name; }
  .driver .kill { grid-area: kill; }
  .driver select { grid-area: dev; }
  .driver .car { grid-area: car; }
  .driver .inline-qr { grid-column: 1 / -1; grid-area: qr; justify-content: center; }
  .qr-wrap { flex-direction: column; align-items: center; text-align: center; }
  #setup-foot { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(0deg, #05070c 40%, transparent); }
  #setup-foot .go { width: 100%; }
}

@media (orientation: portrait) and (max-width: 900px) {
  #event { max-width: none; left: 10px; right: 10px; top: max(8px, env(safe-area-inset-top)); padding: 7px 11px; }
  #event h1 { font-size: 14px; }
  #event .meta, #event .phase { display: none; }

  #standings {
    top: auto; bottom: 44vh; left: 10px; right: 10px; width: auto;
    max-height: 22vh; overflow: hidden;
  }

  #player-huds .phud {
    inset: auto 10px auto 10px !important;
    width: auto !important; height: auto !important;
    top: 66px !important;
  }
  .phud .card { min-width: 0; width: 100%; }
  .phud .sectors span { min-width: 0; flex: 1; }
  .phud .tyres { grid-template-columns: repeat(4, 1fr); }
  .phud .drive { flex-wrap: wrap; }

  #help { display: none; }
  #flash { top: 32%; }
}

/* A landscape phone is short rather than narrow: keep the pedals but shrink everything else. */
@media (orientation: landscape) and (max-height: 520px) {
  #event { padding: 6px 10px; max-width: 220px; }
  #event h1 { font-size: 13px; }
  #event .meta, #event .phase { display: none; }
  #standings { width: 200px; font-size: 10px; }
  .phud .speed span { font-size: 26px; }
  #help { display: none; }
}

/* ---------------------------------------------------------------- the phone cockpit

   Set on the body while this screen is being driven by being tilted. Everything above assumes a
   display sitting still on a desk, read by somebody with both hands free, and none of that holds
   when the screen is the wheel.

   So the panels go. A timing tower, a keyboard legend and a per-driver card full of sector splits
   and tyre temperatures are a PC's furniture, and squeezing them onto a phone by media query —
   which is what used to happen — leaves a picture that is more overlay than game. hud.js draws a
   different readout entirely here (`.cockpit`), and the rest is simply switched off. */

body[data-cockpit="on"] #standings,
body[data-cockpit="on"] #event,
body[data-cockpit="on"] #help { display: none; }

.cockpit {
  position: absolute; inset: 0; pointer-events: none;
  font-variant-numeric: tabular-nums;
  /* Where the bottom cluster sits: clear of the home indicator, and lifted over the drag strip
     when there is one. */
  --floor: max(18px, calc(env(safe-area-inset-bottom) + 12px));
}

/* ---- read between corners ---- */

.cockpit .ck-card {
  padding: 5px 10px 6px; border-radius: 11px; min-width: 106px; text-align: center;
  background: rgba(9,13,22,.55); border: 1px solid var(--edge); backdrop-filter: blur(8px);
}
.cockpit .ck-chips { display: flex; gap: 9px; align-items: baseline; justify-content: center; }
.cockpit .ck-chips > span { display: flex; gap: 4px; align-items: baseline; }
.cockpit .ck-chips[hidden] { display: none; }
.cockpit .ck-chips .k { font-size: 8.5px; letter-spacing: .18em; color: var(--dim); }
.cockpit .ck-chips b { font-size: 18px; font-weight: 700; line-height: 1; }
.cockpit .ck-chips small { font-size: 10px; color: var(--dim); }
.cockpit .ck-pos b { color: var(--amber); }
.cockpit .ck-pos[hidden] { display: none; }

.cockpit .ck-time {
  font-size: 20px; font-weight: 300; letter-spacing: -.01em; line-height: 1.25; margin-top: 1px;
}
.cockpit .ck-time.invalid { color: var(--red); }
.cockpit .ck-foot {
  display: flex; gap: 8px; align-items: baseline; justify-content: center; font-size: 11px;
}
.cockpit .ck-best { color: var(--dim); }
.cockpit .ck-delta { font-weight: 650; }
.cockpit .ck-delta.up { color: var(--green); }
.cockpit .ck-delta.down { color: var(--red); }

/* ---- the instrument column ----
   Bottom of the channel the pedals leave, which is the one part of the screen a thumb never covers
   and the one part nothing else claims: the notch, the button strip and the start lights all come
   down the top. */

.cockpit .ck-cluster {
  position: absolute; left: 50%; bottom: var(--floor);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  /* Never wider than the channel. */
  width: calc(100% - 2 * max(72px, 24vw) - 16px);
  transform: translateX(-50%);
}

.cockpit .ck-map {
  display: block; flex: 0 0 auto;
  width: clamp(68px, 19vmin, 92px); height: clamp(68px, 19vmin, 92px);
  padding: 2px; border-radius: 12px;
  background: rgba(9,13,22,.5); border: 1px solid var(--edge); backdrop-filter: blur(8px);
}
.cockpit .ck-map[hidden] { display: none; }

.cockpit .ck-speed {
  display: flex; align-items: baseline; gap: 7px;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.cockpit .ck-speed b { font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.cockpit .ck-speed small { font-size: 9px; letter-spacing: .16em; color: var(--dim); }
.cockpit .ck-speed i { font-size: 27px; font-weight: 700; font-style: normal; color: var(--f1); line-height: 1; }

.cockpit .ck-warn {
  width: 100%; font-size: 10px; letter-spacing: .14em; color: var(--amber); text-align: center;
  text-shadow: 0 1px 8px #000;
}
.cockpit .ck-warn.bad { color: var(--red); }
.cockpit .ck-warn:empty { display: none; }

/* Five lights at PC size reach across most of a phone. Placed under the button strip by the same
   safe-area inset the strip itself is laid out from, rather than at a percentage of the height: a
   fraction of the screen means something different on a notched phone from a flat one, and it was
   landing on the readout. Nothing else is up here now, so there is room for them. */
body[data-cockpit="on"] #lights-strip {
  top: calc(env(safe-area-inset-top) + 62px); gap: 9px;
}
body[data-cockpit="on"] #lights-strip i { width: 24px; height: 24px; border-width: 2px; }

/* The drag strip only exists when tilt was unavailable or declined — and it lands exactly where the
   speed does, so the cluster steps up over it and its 6 px of margin. */
body[data-steer="touch"] .cockpit { --floor: calc(22vh + 22px); }

/* A landscape phone is short rather than narrow, and a column that is fine in 930 px of height is
   half the picture in 390. The same four readouts, laid across instead of down. */
@media (orientation: landscape) and (max-height: 560px) {
  .cockpit .ck-cluster {
    flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 8px;
  }
  .cockpit .ck-map { width: 66px; height: 66px; }
  .cockpit .ck-card { min-width: 0; padding: 4px 8px 5px; }
  .cockpit .ck-time { font-size: 17px; }
  .cockpit .ck-speed b { font-size: 32px; }
  .cockpit .ck-speed i { font-size: 22px; }
}