:root {
  --bg: #0d1016;
  --bg2: #141924;
  --bg3: #1d2432;
  --border: #303a4d;
  --text: #eef1f7;
  --muted: #96a0b5;
  --red: #e10600;
  --red2: #ff2d23;
  --accent: #3ddc84;
  --gold: #ffd23e;
  --blue: #6ea8ff;
  --danger: #ff5c7a;
  --mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --race: "Segoe UI", "Arial", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.hidden { display: none !important; }

html, body, #app { height: 100%; }
/* mobile browsers inflate text they deem too small ("text autosizing") —
   that blew the compact HUD back up to desktop size. The HUD is a game
   overlay, not an article: render exactly what we specify. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  overflow: hidden;
}

#app { display: flex; flex-direction: column; }

/* ---------- top bar / brand ---------- */

#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px;
  background: linear-gradient(180deg, #171d29, #12161f);
  flex: 0 0 auto;
}
.speed-stripe {
  height: 4px; flex: 0 0 auto;
  background: linear-gradient(90deg, var(--red) 0%, var(--red2) 30%, #ff7b08 55%, transparent 85%);
}
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.logo-chip {
  font-family: var(--race);
  font-weight: 900; font-style: italic; font-size: 22px; letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(135deg, var(--red), #b30500);
  padding: 3px 16px 4px 12px;
  transform: skew(-10deg);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(225, 6, 0, .45);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.tagline { color: var(--muted); font-size: 11.5px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.online { color: var(--accent); font-size: 12px; }

.btn {
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-family: var(--mono);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: #263049; border-color: #43507a; transform: translateY(-1px); }
.btn.ghost { background: transparent; }
.btn.primary {
  background: linear-gradient(135deg, var(--red), #c00500);
  border-color: var(--red);
  color: #fff; font-weight: 700;
}
.btn.primary:hover { background: linear-gradient(135deg, #ff1d12, var(--red)); }
.btn.on { border-color: var(--accent); color: var(--accent); }
.driver-chip { gap: 8px; }
.chip-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--red); display: inline-block; }

.standings-list { max-height: 48vh; overflow-y: auto; padding-right: 4px; }
.std-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.std-tab {
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg2);
  color: var(--muted); font: inherit; font-size: 11px; padding: 4px 9px; cursor: pointer;
}
.std-tab:hover { color: var(--text); }
.std-tab.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }

.kbd {
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  padding: 0 6px; font-size: 11px; color: var(--text); background: var(--bg2);
}

/* ---------- layout ---------- */

#main { flex: 1 1 auto; display: flex; min-height: 0; }

/* letterboxed play area: max ~1.85:1, pillar bars on ultrawides — the game
   geometry stays in a bounded shape on every monitor */
#stage {
  flex: 1 1 auto; position: relative; min-width: 0;
  /* letterbox bars pick up the circuit's theme hue (set from game.js) */
  background: radial-gradient(ellipse 90% 70% at 50% 45%, var(--theme-glow, #10131b) 0%, #060709 78%);
  container-type: size;
  display: flex; justify-content: center;
  transition: background 1.2s ease;
}
#play {
  position: relative;
  height: 100%;
  /* 1.45:1 letterbox cap: fewer pixels to fill on wide monitors = steadier GPU
     for the whole audience, not just high-end machines */
  width: min(100%, 145cqh);
}
#game, #gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
#gl { visibility: hidden; }
.hud-telem {
  position: absolute; left: 12px; bottom: 12px;
  width: min(540px, 48%); height: clamp(74px, 11vh, 100px);
  pointer-events: none;
}
body.touch .hud-telem {
  left: 8px; bottom: max(10px, env(safe-area-inset-bottom));
  width: min(260px, calc(100% - 76px)); height: 54px;
}
/* compact HUD on phones: readouts must never outweigh the car */
body.touch #hud-time { font-size: 21px; min-width: 140px; }
body.touch #hud-delta { font-size: 12px; height: 14px; }
body.touch #delta-chart { width: 168px; height: 22px; margin-top: 3px; border-radius: 6px; }
body.touch #hud-laps { top: 8px; left: 10px; font-size: 10px; gap: 1px; }
body.touch #hud-sectors { margin-left: 6px; gap: 2px; }
body.touch #hud-sectors .sec { min-width: 36px; font-size: 10px; }
body.touch #hud-sectors .sec-lbl { font-size: 8px; margin-left: 4px; }
body.touch #share-lap { padding: 2px 9px; font-size: 10px; margin-top: 2px; }
body.pip .hud-telem { width: min(300px, 62%); height: 62px; left: 8px; bottom: 8px; }

#side {
  flex: 0 0 305px;
  border-left: 1px solid var(--border);
  background: var(--bg2);
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.panel {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.panel h3 {
  font-family: var(--race);
  font-size: 12px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text); margin-bottom: 9px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-left: 3px solid var(--red);
  padding-left: 8px;
}
.day { color: var(--muted); font-weight: 400; font-style: normal; letter-spacing: 0; font-family: var(--mono); }
.gp-meta { color: var(--muted); font-size: 11.5px; margin-bottom: 8px; }

.leaderboard { list-style: none; counter-reset: rank; display: flex; flex-direction: column; gap: 3px; }
.leaderboard li {
  counter-increment: rank; display: flex; align-items: center; justify-content: space-between; gap: 7px;
  font-size: 12.5px; padding: 3.5px 6px; border-radius: 6px;
}
.leaderboard li::before {
  content: attr(data-rank);
  font-family: var(--race); font-weight: 900; font-style: italic;
  color: var(--muted); min-width: 20px;
}
.leaderboard li.lb-ellipsis { color: var(--muted); font-size: 10px; justify-content: flex-start; }
.leaderboard li .tdot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.leaderboard li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard li .tm { color: var(--accent); font-weight: 600; }
.leaderboard li.me { background: rgba(225, 6, 0, .12); }
.leaderboard li .as { color: var(--muted); font-size: 10px; }
.lb-empty { color: var(--muted); font-size: 12px; }
.champion { color: var(--muted); font-size: 11px; margin-top: 8px; }
.champion b { color: var(--gold); }

.track-list { display: flex; flex-direction: column; gap: 6px; }
.track-list .tsel { width: 100%; justify-content: space-between; padding: 7px 10px; font-size: 12.5px; }
.track-list .tsel .tdesc { color: var(--muted); font-size: 10.5px; }
.track-list .tsel.active { border-color: var(--red); color: #ff8a85; }
.track-list .tsel.active .tdesc { color: #ff8a85; opacity: .75; }

.controls div { font-size: 12px; color: var(--muted); line-height: 2; }
.legend { margin-top: 6px; font-size: 10.5px; line-height: 1.8; }

.stats { color: var(--muted); font-size: 12px; line-height: 1.8; margin-bottom: 10px; }
.stats b { color: var(--text); }
.share-btn { width: 100%; }

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

#hud-top {
  position: absolute; top: 10px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}
/* timer: real monospace glyphs (pixel-stable widths) + CSS skew for the
   broadcast slant — synthetic italic-900 text shimmers as digits update */
#hud-time {
  font-family: var(--mono);
  font-size: 32px; font-weight: 700; letter-spacing: .01em;
  transform: skewX(-8deg);
  min-width: 230px; text-align: center;
}
#hud-delta, .bar-num, .leaderboard li .tm, .leaderboard li .gap, #hud-laps b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.leaderboard li .gap { color: var(--muted); font-size: 10.5px; }
#hud-time.pb { animation: pbPulse .9s ease; }
#hud-time.doomed { color: #f87171; }
#delta-chart {
  display: block; width: 236px; height: 30px; margin-top: 5px;
  background: rgba(10, 12, 18, 0.55); border: 1px solid var(--border); border-radius: 8px;
}
#hud-invalid {
  margin-top: 2px; font-size: 13px; font-weight: 800; letter-spacing: .4px;
  color: #f87171; text-shadow: 0 0 12px rgba(248,113,113,.45);
  animation: invalidPulse 1.1s ease-in-out infinite;
}
#hud-invalid.hidden { display: none; }
@keyframes invalidPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
#hud-sectors { display: inline-flex; gap: 3px; margin-left: 10px; align-items: baseline; }
#hud-sectors .sec-lbl { font-size: 9px; color: var(--muted); letter-spacing: .05em; margin-left: 7px; }
#hud-sectors .sec-lbl:first-child { margin-left: 0; }
#hud-sectors .sec { min-width: 48px; display: inline-block; text-align: left; color: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#hud-sectors .sec.fast { color: #4ade80; }
#hud-sectors .sec.purple { color: #c26bff; }
#hero-challenge {
  margin: 8px auto 0; padding: 7px 16px; max-width: 560px;
  border: 1px solid var(--gold); border-radius: 999px;
  color: var(--gold); font-weight: 700; font-size: 14px;
  background: rgba(255, 210, 62, 0.08);
}
#hero-challenge.hidden { display: none; }
#hud-sectors .sec.slow { color: #f59e0b; }
@keyframes pbPulse {
  30% { transform: skewX(-8deg) scale(1.16); color: var(--gold); text-shadow: 0 0 26px rgba(255, 210, 62, .85); }
}
#hud-delta { font-size: 15px; height: 18px; font-weight: 700; }
#hud-delta.neg { color: var(--accent); }
#hud-delta.pos { color: var(--danger); }

#hud-laps {
  position: absolute; top: 12px; left: 14px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--muted);
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
#hud-laps b { color: var(--text); }
#hud-msg { color: var(--gold); }
#share-lap {
  pointer-events: auto; /* parent #hud-laps disables pointer events */
  align-self: flex-start;
  margin-top: 3px; padding: 3px 10px;
  font: 700 11px/1.4 inherit; letter-spacing: .04em;
  color: var(--text); background: rgba(10, 12, 18, 0.6);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
#share-lap:hover { border-color: var(--gold); color: var(--gold); }
#share-lap.hidden { display: none; }
#share-lap.pop { animation: sharePop 0.9s ease; }
@keyframes sharePop { 0% { transform: scale(1); } 25% { transform: scale(1.25); border-color: var(--gold); } 100% { transform: scale(1); } }
/* share preview: see the card before it goes anywhere */
#share-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 7, 11, 0.74);
  display: flex; align-items: center; justify-content: center;
}
#share-modal.hidden { display: none; }
#share-box {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; width: min(640px, 94vw);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
#share-img { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--border); }
#share-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }
#share-link-row { display: flex; gap: 8px; margin-top: 10px; }
#share-link {
  flex: 1; min-width: 0; padding: 7px 10px;
  font: 600 12px var(--mono); color: var(--gold);
  background: rgba(10, 12, 18, 0.6); border: 1px solid var(--border); border-radius: 8px;
}

/* speed + ERS now live on the crisp telemetry canvas; this row survives only as
   the #fps profiler readout */
#hud-bars {
  position: absolute; left: 14px; bottom: 12px; width: 190px;
  display: none; flex-direction: column; gap: 5px;
  pointer-events: none;
}
body.profiling #hud-bars { display: flex; }
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar-label { font-size: 10px; color: var(--muted); width: 26px; font-weight: 700; }
.bar-num { font-size: 10.5px; color: var(--text); width: 60px; text-align: right; font-weight: 600; }
.bar { flex: 1; height: 7px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
#bar-speed { height: 100%; width: 0%; background: linear-gradient(90deg, var(--red), #ff7b08); border-radius: 3px; }
#bar-ers { height: 100%; width: 100%; background: var(--gold); border-radius: 3px; }

/* ---------- overlays / modals ---------- */

.overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(6, 8, 12, .82); backdrop-filter: blur(5px);
  /* NOT align-items:center — that clips the card's top edge off-screen when the
     card is taller than the viewport. margin:auto on the cards centers-when-fits
     and scrolls-when-not, at any screen size or zoom level. */
  display: flex; justify-content: center;
  padding: 14px; overflow-y: auto;
}
.hero-card, .modal-card { margin: auto; }
.overlay.hidden { display: none; }

.hero-card {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  max-width: 920px; width: 100%;
  padding: 22px 30px;
  background: linear-gradient(180deg, rgba(23, 29, 41, .92), rgba(16, 20, 30, .95));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}
.checker-strip {
  width: 100%; height: 10px; border-radius: 3px; opacity: .8;
  background:
    repeating-conic-gradient(#e8ecf3 0% 25%, #14181f 0% 50%) 0 0 / 20px 10px;
}
.hero-cols { display: flex; gap: 26px; width: 100%; text-align: left; align-items: stretch; }
.hero-main { flex: 1 1 48%; display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.hero-info {
  flex: 1 1 52%; min-width: 0;
  border-left: 1px solid var(--border); padding-left: 26px;
  display: flex; flex-direction: column; gap: 15px; justify-content: center;
}
.hi-head { font-weight: 700; font-size: 10.5px; letter-spacing: .16em; color: var(--muted); margin-bottom: 7px; }
.hi-text { font-size: 12.5px; line-height: 1.65; color: #aeb6c4; }
.hero-board { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.hero-board li { display: flex; gap: 8px; align-items: baseline; }
.hero-board .hb-rank { color: var(--muted); font-size: 11px; min-width: 24px; }
.hero-board .hb-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-board .hb-tm { font-variant-numeric: tabular-nums; color: var(--gold); }
.hero-board .hb-empty { color: var(--muted); }
.hero-notes { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.55; color: #aeb6c4; }
@media (max-width: 960px) {
  .hero-card { max-width: 560px; }
  .hero-cols { flex-direction: column; }
  .hero-info { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 15px; }
}
/* short viewports (small laptops, high zoom): compact the card so it fits */
@media (max-height: 900px) {
  .hero-card { gap: 9px; padding: 14px 24px; }
  .hero-logo { font-size: 52px; padding: 4px 26px 9px 20px; }
  .hero-main { gap: 9px; }
  .hero-info { gap: 10px; }
  .checker-strip { height: 6px; }
  .hi-text { font-size: 12px; line-height: 1.5; }
  .big-btn { padding: 10px 22px; font-size: 15px; }
}
@media (max-height: 700px) {
  .checker-strip { display: none; }
  .hero-logo { font-size: 40px; }
  .hero-tag { font-size: 11px; letter-spacing: .2em; }
  .hero-pitch { display: none; } /* redundant with the info column; gantry stays */
}

.hero-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.hero-row { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.hero-namefield input { text-align: center; font-size: 15px; }
.hero-teams { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.hero-swatch {
  width: 40px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; position: relative; overflow: hidden;
  transition: transform .1s, border-color .1s;
}
.hero-swatch::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 9px; }
.hero-swatch:hover { transform: translateY(-2px); }
.hero-swatch.active { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.35); }
.hero-teamname { color: var(--muted); font-size: 12px; min-height: 15px; }
.hero-circuit { font-family: var(--race); font-weight: 800; font-style: italic; letter-spacing: .1em; font-size: 12px; color: var(--text); }
.hero-yday { color: var(--gold); font-size: 12px; min-height: 15px; }
.hero-gear { position: absolute; top: 40px; right: 16px; z-index: 2; }
.hero-mobile { color: var(--text); font-size: 14px; line-height: 1.8; padding: 10px 0; }
/* lighter veil on the landing page so the attract lap shows through */
#hero { background: rgba(6, 8, 12, .55); backdrop-filter: blur(2.5px); }
.hero-card { position: relative; }

.gantry { display: flex; gap: 14px; padding: 4px 0 0; }
.glight {
  width: 22px; height: 22px; border-radius: 50%;
  background: #1c1216; border: 2px solid #3a2228;
  transition: background .08s, box-shadow .08s;
}
.glight.on { background: #ff1a10; box-shadow: 0 0 18px rgba(255, 26, 16, .9), 0 0 40px rgba(255, 26, 16, .45); border-color: #ff5a52; }
.hero-logo {
  font-family: var(--race);
  font-weight: 900; font-style: italic; font-size: 74px; letter-spacing: .04em;
  color: #fff; line-height: 1;
  background: linear-gradient(135deg, var(--red), #ff5a00);
  padding: 6px 34px 12px 26px;
  transform: skew(-10deg);
  border-radius: 8px;
  box-shadow: 0 8px 44px rgba(225, 6, 0, .5);
}
.hero-tag {
  font-family: var(--race); font-weight: 800; font-style: italic;
  letter-spacing: .28em; font-size: 14px; color: var(--text);
}
.hero-gp { color: var(--gold); font-size: 14px; font-weight: 600; }
.hero-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px;
  color: var(--muted); font-size: 12.5px; margin: 4px 0;
}
.hero-sub { color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.hero-pitch {
  font-family: var(--race); font-weight: 800; font-style: italic;
  font-size: 13px; letter-spacing: .18em; color: var(--gold);
}
.cam-thumbs { display: flex; gap: 10px; }
.cam-thumbs figure { margin: 0; flex: 1; }
.cam-thumbs img { width: 100%; display: block; border-radius: 6px; border: 1px solid var(--border); }
.cam-thumbs figcaption { font-size: 9px; color: var(--muted); letter-spacing: .08em; margin-top: 3px; text-align: center; }
.std-divider { font-size: 10px; color: var(--muted); letter-spacing: .1em; align-self: center; margin: 0 2px 0 8px; }
.btn-word { font-size: 11px; letter-spacing: .06em; }
@media (max-width: 900px) { .btn-word { display: none; } }
.hero-gear { width: auto; padding: 0 10px; font-size: 12px; }
.big-btn { padding: 12px 26px; font-size: 16px; font-family: var(--race); font-style: italic; font-weight: 900; letter-spacing: .06em; }
.big-btn.primary { animation: ctaGlow 2.2s ease-in-out infinite; }
@keyframes ctaGlow { 50% { box-shadow: 0 0 26px rgba(225, 6, 0, .55); } }

.modal-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; max-width: 520px; width: 100%;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 {
  font-family: var(--race); font-weight: 900; font-style: italic;
  font-size: 20px; letter-spacing: .04em;
  border-left: 4px solid var(--red); padding-left: 10px;
}
.modal-section { display: flex; flex-direction: column; gap: 10px; }
.modal-section h4 {
  font-family: var(--race); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text);
}
.modal-section h4 .opt { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }
.field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.field input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 12px; font-size: 14px; font-family: var(--mono);
}
.field input:focus { outline: none; border-color: var(--red); }
.field-label { color: var(--muted); font-size: 12px; }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.team-card {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg3); padding: 8px 10px;
  cursor: pointer; font-size: 12px;
  transition: border-color .12s, background .12s;
}
.team-card:hover { border-color: #4a5878; }
.team-card.active { border-color: #fff; background: #232c40; }
.team-swatch { width: 22px; height: 14px; border-radius: 3px; flex: 0 0 auto; position: relative; overflow: hidden; }
.team-swatch::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; }

.bindings { display: flex; flex-direction: column; gap: 5px; }
.bind-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.bind-key {
  min-width: 86px; text-align: center; cursor: pointer;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
  padding: 3px 10px; color: var(--text); background: var(--bg3); font-size: 11.5px;
}
.bind-key.listening { border-color: var(--red); color: #ff8a85; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.hint { color: var(--muted); font-size: 11px; }
.check-row { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12.5px; cursor: pointer; margin-top: 4px; }

/* ---------- narrow / PiP ---------- */

@media (max-width: 720px) {
  #side { display: none; }
  .tagline { display: none; }
}
body.pip #side { display: none; }
body.pip .tagline { display: none; }
body.pip #btn-float, body.pip #btn-settings, body.pip #btn-driver-chip { display: none; }
body.pip #hud-time { font-size: 24px; }
body.pip #topbar { padding: 5px 10px; }
body.pip .logo-chip { font-size: 15px; padding: 2px 10px 3px 8px; }

/* ---------- touch play (phones/tablets): hold a side to steer ---------- */

.touch-ui { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.tz {
  position: absolute; top: 0; bottom: 0; width: 50%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  font-size: 34px; color: rgba(232, 236, 242, .22);
  transition: background .08s, color .08s;
}
.tz-left { left: 0; }
.tz-right { right: 0; }
.tz.on { color: rgba(255, 255, 255, .92); }
.tz-left.on { background: linear-gradient(90deg, rgba(225, 6, 0, .30), transparent 62%); }
.tz-right.on { background: linear-gradient(270deg, rgba(225, 6, 0, .30), transparent 62%); }
.touch-reset {
  position: absolute; right: 10px; bottom: max(14px, env(safe-area-inset-bottom));
  pointer-events: auto; font-size: 19px; padding: 7px 12px; line-height: 1;
  background: rgba(12, 15, 21, .72);
}

body.touch { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
body.touch #side { display: none; }
body.touch .tagline { display: none; }
body.touch #btn-float { display: none; }
body.touch #play { width: 100%; }
body.touch #topbar { padding: 6px 8px; flex-wrap: nowrap; gap: 6px; }
body.touch #topbar .btn { padding: 6px 9px; flex: 0 0 auto; }
body.touch .topbar-right { gap: 6px; min-width: 0; }
body.touch #online { display: none; } /* the count lives in the timesheets modal */
body.touch .logo-chip { font-size: 15px; padding: 2px 10px 3px 8px; }
body.touch #chip-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (compact touch HUD sizes live next to the base HUD rules, ~line 138) */
body.touch #hud-bars { max-width: 44vw; }
body.touch .hero-info { display: none; }
body.touch .hero-cols { flex-direction: column; }
body.touch .hero-card { max-width: 480px; }
/* the whole card must fit a phone screen without scrolling past the CTA */
body.touch .hero-logo { font-size: 46px; }
body.touch .hero-teams { gap: 6px; }
body.touch .hero-swatch { width: 34px; height: 22px; }
/* phones: the two doors are the point — surface them right under the livery,
   above the circuit picker and the how-to */
body.touch .hero-main { display: flex; flex-direction: column; }
body.touch .hero-doors { order: 0; flex-direction: column; }
body.touch .hero-touch { order: 1; }
body.touch .hero-tracks { order: 2; }
body.touch .hero-form { order: 3; }
body.touch #btn-hero-board { order: 4; }
body.touch .hero-sub { order: 5; }
body.touch .door .big-btn, body.touch .race-btn, body.touch .hero-tchip, body.touch #btn-hero-board { min-height: 44px; }
body.touch .door-clock { font-size: 24px; }
body.touch .hero-pitch { display: none; }   /* the how-to already says it */
body.touch .hero-card { gap: 10px; }
body.touch .hero-main { gap: 10px; }
body.touch .hero-circuit { font-size: 11.5px; }

#rot-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
  background: rgba(10, 12, 18, .85); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 14px; font-size: 11px;
}
#rot-hint.hidden { display: none; }
@media (orientation: landscape) { #rot-hint { display: none !important; } }
.hero-tracks { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: 100%; }
.hero-tchip {
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg3);
  color: var(--muted); font: inherit; font-size: 11px; padding: 5px 9px; cursor: pointer;
}
.hero-tchip.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }

.hero-touch { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.ht-row { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; color: #aeb6c4; line-height: 1.45; }
.ht-ico { color: var(--gold); font-size: 13px; min-width: 34px; }
.ht-pc {
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px;
}

/* phones drive with two thumbs: key rebinding and the assist toggle don't apply */
body.touch #set-controls-section { display: none; }

/* ---------- hero doors: QUALIFYING vs RACE ---------- */
.hero-doors { display: flex; gap: 12px; width: 100%; align-items: stretch; }
.door {
  flex: 1 1 50%; min-width: 0;
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(10, 13, 20, 0.55);
  padding: 12px 12px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.door-quali { border-color: rgba(225, 6, 0, 0.45); flex: 1.5; }
.door-race { border-color: rgba(225, 6, 0, 0.55); position: relative; }
.door-head {
  font-family: var(--race); font-weight: 900; font-style: italic;
  font-size: 14px; letter-spacing: .14em; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.door-sub { color: var(--muted); font-size: 10.5px; text-align: center; line-height: 1.4; min-height: 15px; }
.door-clock {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700; color: var(--gold); line-height: 1;
}
.door-clock.soon { color: #ff5c52; animation: pbPulse 1s ease-in-out infinite; }
.door-lobby { display: flex; gap: 4px; min-height: 12px; flex-wrap: wrap; justify-content: center; }
.door-lobby .lob { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); }
.door .big-btn { padding: 9px 14px; font-size: 13.5px; width: 100%; }
.race-btn {
  background: linear-gradient(135deg, #7a0400, #4a0300);
  border: 1px solid var(--red); color: #fff; font-weight: 800;
}
.race-btn.armed { background: linear-gradient(135deg, var(--red), #c00500); }
.race-btn.entered { background: var(--bg3); border-color: var(--accent); color: var(--accent); animation: none; }
.race-btn:disabled { opacity: .45; cursor: default; animation: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; display: inline-block; }
.live-dot.on { background: #ff2d23; box-shadow: 0 0 8px rgba(255, 45, 35, .9); animation: pbPulse 1.2s ease-in-out infinite; }

/* the race engineer */
.engineer { display: flex; gap: 11px; align-items: flex-start; }
.eng-ava {
  width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); display: block; position: relative;
}
.eng-ava img { position: absolute; width: 175%; height: 175%; left: -32%; top: -13%; }
.eng-col { flex: 1; min-width: 0; }
.eng-label { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: var(--muted); margin-bottom: 5px; }
.eng-bubble {
  position: relative; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; font-size: 12px; line-height: 1.5; color: #d7dce6;
  min-height: 56px;
}
.eng-bubble::before {
  content: ''; position: absolute; left: -6px; top: 16px;
  width: 10px; height: 10px; background: var(--bg3);
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.eng-bubble b { color: #fff; }
.eng-bubble .gold { color: var(--gold); }

/* paddock tabs + inline controls */
.pad-tabs { display: flex; gap: 4px; }
.controls-inline { margin-top: 9px; font-size: 11px; color: var(--muted); line-height: 2; border-top: 1px solid var(--border); padding-top: 8px; }

/* ---------- sprints ---------- */
.sprint-panel { border-color: rgba(225, 6, 0, 0.45); }
.sprint-btn { width: 100%; margin-top: 8px; font-weight: 800; }
.sprint-btn.entered { background: var(--bg3); border-color: var(--accent); color: var(--accent); animation: none; }
body.touch #btn-race-touch {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px);
  pointer-events: auto; font-weight: 800; padding: 9px 16px;
  background: rgba(12, 15, 21, .82);
}
#btn-race-touch { display: none; }
body.touch #btn-race-touch { display: block; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }