/* ═══════════════════════════════════════════════════════════════════
   REMOTE CRASH LAB — Driver HUD
   Rewritten from scratch · Clean layered architecture
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Palette */
  --bg: #000;
  --glass: rgba(10, 18, 30, .62);
  --glass-strong: rgba(12, 20, 34, .82);
  --glass-edge: rgba(120, 180, 240, .14);
  --glass-edge-hi: rgba(120, 180, 240, .32);
  --text: #ebf2ff;
  --text2: rgba(210, 225, 250, .72);
  --text3: rgba(160, 185, 220, .45);
  --cyan: #00d4ff;
  --blue: #1e90ff;
  --green: #00e676;
  --yellow: #ffd400;
  --orange: #ff9800;
  --red: #ff3b3b;
  --purple: #b06bff;

  /* Geometry */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --blur: blur(22px) saturate(140%);

  /* Safe-area (notch + browser chrome) */
  --safe-t: max(env(safe-area-inset-top, 0px), 4px);
  --safe-b: max(env(safe-area-inset-bottom, 0px), 4px);
  --safe-l: max(env(safe-area-inset-left, 0px), 4px);
  --safe-r: max(env(safe-area-inset-right, 0px), 4px);

  /* HUD scale — overridden per device class */
  --u: 1;                                      /* universal scale unit */
  --hud-pill-h: calc(28px * var(--u));
  --hud-font: calc(10px * var(--u));
  --hud-num: calc(13px * var(--u));
  --hud-label: calc(7.5px * var(--u));
  --speedo: calc(36px * var(--u));
  --gear: calc(24px * var(--u));
  --pedal-name: calc(9px * var(--u));
  --action-h: calc(40px * var(--u));
  --action-icon: calc(15px * var(--u));
  --action-min-w: calc(48px * var(--u));
  --action-label: calc(7px * var(--u));
  --countdown: clamp(180px, 36vmin, 480px);
}

/* ─── BASE RESET ─── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #000; color: var(--text);
  font-family: Inter, -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
button, input { font: inherit; border: none; outline: none; color: inherit; }
button { cursor: pointer; -webkit-appearance: none; appearance: none; background: none; }
svg { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   LAYER STACK (z-index plan)
     0   .video-layer         video + vignette (pointer-events:none)
     5   .steer-zone          full-left swipe area
     8   .speedo-panel        non-interactive readout
     10  .right-controls      gas/brake/handbrake (interactive)
     11  .action-bar          horn/camera/lights/signals (interactive)
     12  .top-hud             info pills (mostly non-interactive)
     15  .quality-switch      tap-to-toggle preset picker
     40  .center-overlay      countdown/GO/END/challenge (non-interactive)
     50  .join-panel          full-screen modal
     50  .result-panel        full-screen modal
     200 .rotate-lock         portrait warning
   ═══════════════════════════════════════════════════════════════════ */

.cockpit { position: fixed; inset: 0; overflow: hidden; }

/* ─── VIDEO LAYER (background) ─── */
.video-layer {
  position: fixed; inset: 0; z-index: 0;
  background: #000;
  pointer-events: none;
}
.video-layer * { pointer-events: none; }
.video-layer video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  background: #000;
}
.video-layer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 10%, transparent 90%, rgba(0,0,0,.18) 100%);
}
.mediamtx-frame { display: none; }
.video-fallback[hidden] { display: none !important; }
.video-fallback {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(8,14,26,.92), rgba(0,0,0,.96));
}
.video-fallback::before {
  content: ''; width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(0,212,255,.15); border-top-color: var(--cyan);
  animation: fb-spin 1s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
.video-fallback strong { font-size: 16px; font-weight: 700; }
.video-fallback span { font-size: 12px; color: var(--text3); max-width: 260px; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════
   GLASS PILL BASE (top HUD and other glass surfaces)
   ═══════════════════════════════════════════════════════════════════ */
.glass {
  background: linear-gradient(180deg, rgba(14,22,38,.78), rgba(8,14,26,.68));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 4px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════════════════════════════
   TOP HUD
   ═══════════════════════════════════════════════════════════════════ */
.top-hud {
  position: fixed; top: var(--safe-t);
  left: var(--safe-l); right: var(--safe-r); z-index: 12;
  display: flex; align-items: stretch; gap: 4px;
  height: var(--hud-pill-h);
  pointer-events: none;
}
.top-hud > * { pointer-events: auto; }

/* Driver pill ─ left */
.hud-driver {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(14,22,38,.78), rgba(8,14,26,.68));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 4px 18px rgba(0,0,0,.32);
  transition: border-color .3s, box-shadow .3s;
  min-width: 0;
}
.hud-driver .car-icon { width: 14px; height: 14px; color: var(--cyan); flex-shrink: 0; transition: color .25s; }
.hud-driver strong { font-size: var(--hud-num); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.driver-meta { display: flex; align-items: center; gap: 4px; font-size: var(--hud-label); color: var(--text3); }
.driver-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.driver-meta .dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); animation: dot-pulse 2s infinite; }
@keyframes dot-pulse { 0%,100% { box-shadow: 0 0 4px var(--green); } 50% { box-shadow: 0 0 10px var(--green); } }

/* Active driving — glowing driver pill */
body.is-driving .hud-driver {
  border-color: rgba(0,230,118,.5);
  box-shadow: 0 0 16px rgba(0,230,118,.18), 0 4px 18px rgba(0,0,0,.32);
  animation: drive-breath 2.4s ease-in-out infinite;
}
body.is-driving .car-icon { color: var(--green); }
@keyframes drive-breath { 50% { box-shadow: 0 0 24px rgba(0,230,118,.32), 0 4px 18px rgba(0,0,0,.32); } }

/* Title — center top */
.hud-title {
  position: absolute;
  left: 50%; top: 0; transform: translateX(-50%);
  padding: 0 14px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(14,22,38,.78), rgba(8,14,26,.68));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 4px 18px rgba(0,0,0,.32);
  pointer-events: none;
}
.hud-title strong { font-size: var(--hud-num); font-weight: 800; letter-spacing: .12em; line-height: 1; }
.session-sub { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--hud-label); color: var(--cyan); font-weight: 600; letter-spacing: .06em; margin-top: 2px; }
.live-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); }

/* Stats — flex pushed to right */
.hud-stats { margin-left: auto; display: flex; gap: 3px; }
.stat-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  background: linear-gradient(180deg, rgba(14,22,38,.78), rgba(8,14,26,.68));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.stat-pill > span { font-size: var(--hud-label); color: var(--text3); font-weight: 700; letter-spacing: .08em; }
.stat-pill strong { font-size: var(--hud-num); font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.stat-pill-ping { gap: 5px; }
.ping-chart { width: 36px; height: 12px; opacity: .85; }

/* Connection pill — bars + fullscreen */
.hud-conn {
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: linear-gradient(180deg, rgba(14,22,38,.78), rgba(8,14,26,.68));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.conn-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.conn-bars span { display: block; width: 2.5px; background: rgba(255,255,255,.16); border-radius: 1px; transition: background .25s; }
.conn-bars span:nth-child(1) { height: 3px; }
.conn-bars span:nth-child(2) { height: 6px; }
.conn-bars span:nth-child(3) { height: 8px; }
.conn-bars span:nth-child(4) { height: 11px; }
.conn-bars[data-strength="4"] span { background: var(--green); box-shadow: 0 0 3px rgba(0,230,118,.5); }
.conn-bars[data-strength="3"] span:nth-child(-n+3) { background: var(--green); }
.conn-bars[data-strength="2"] span:nth-child(-n+2) { background: var(--orange); }
.conn-bars[data-strength="1"] span:nth-child(1) { background: var(--red); }
#connText { font-size: var(--hud-label); color: var(--text2); font-weight: 700; letter-spacing: .04em; }
.fs-btn {
  width: 20px; height: 20px; border-radius: 5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.fs-btn:active { background: rgba(0,180,255,.18); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════
   STEERING ZONE (left half, swipe area)
   ═══════════════════════════════════════════════════════════════════ */
.steer-zone {
  position: fixed; z-index: 5;
  top: calc(var(--safe-t) + var(--hud-pill-h) + 4px);
  bottom: calc(var(--safe-b) + var(--action-h) + 4px);
  left: 0; width: 50%;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.steer-arc {
  position: absolute; left: -16%; top: 8%; bottom: 8%; width: 70%;
  border: 1px solid rgba(0,200,255,.08);
  border-radius: 0 50% 50% 0;
  pointer-events: none;
  transition: border-color .25s, box-shadow .3s;
}
.steer-zone.active .steer-arc {
  border-color: rgba(0,200,255,.32);
  box-shadow: inset 0 0 60px rgba(0,200,255,.08);
}

/* Steering wheel icon — rotates with input */
.steer-wheel {
  position: absolute;
  width: clamp(48px, 9vmin, 96px); height: clamp(48px, 9vmin, 96px);
  color: rgba(0,212,255,.2);
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0,212,255,.2));
  transition: color .25s, filter .25s, transform .08s ease-out;
  will-change: transform;
}
.steer-zone.active .steer-wheel {
  color: rgba(0,212,255,.55);
  filter: drop-shadow(0 0 14px rgba(0,212,255,.4));
}

/* Steer hint — shown only when idle */
.steer-hint {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(14,22,38,.6), rgba(8,14,26,.5));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  pointer-events: none;
  transition: opacity .35s ease-out;
}
.steer-zone.active .steer-hint,
body.is-driving .steer-hint { opacity: 0; }
.steer-hint strong { font-size: calc(10px * var(--u)); font-weight: 800; letter-spacing: .08em; color: var(--cyan); }
.steer-hint span { font-size: calc(8px * var(--u)); color: var(--text3); letter-spacing: .04em; }
.arrow-l, .arrow-r { font-size: calc(20px * var(--u)); font-weight: 300; color: var(--cyan); line-height: 1; }

/* Steer bar — horizontal angle indicator (bottom of steer-zone) */
.steer-bar {
  position: absolute; bottom: calc(8px * var(--u)); left: 50%; transform: translateX(-50%);
  width: 60%; height: 3px;
  background: rgba(255,255,255,.06); border-radius: 2px;
  pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.steer-zone.active .steer-bar { opacity: 1; }
.steer-bar-fill {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,212,255,.5);
  transition: width .06s linear, left .06s linear;
}
.steer-bar-tick {
  position: absolute; top: -1.5px; bottom: -1.5px; left: 50%; width: 2px;
  background: rgba(255,255,255,.4); transform: translateX(-50%);
}
.steer-val {
  position: absolute; bottom: calc(16px * var(--u)); left: 50%; transform: translateX(-50%);
  font-size: calc(9px * var(--u)); font-weight: 600; color: var(--text3);
  font-variant-numeric: tabular-nums;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.steer-zone.active .steer-val { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   SPEEDOMETER (bottom-left, non-interactive)
   ═══════════════════════════════════════════════════════════════════ */
.speedo-panel {
  position: fixed; z-index: 8;
  bottom: calc(var(--safe-b) + var(--action-h) + 6px);
  left: calc(var(--safe-l) + 4px);
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: linear-gradient(180deg, rgba(14,22,38,.78), rgba(8,14,26,.68));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 4px 18px rgba(0,0,0,.32);
  pointer-events: none;
}
.speedo-speed { display: flex; align-items: baseline; gap: 3px; }
.speedo-speed strong {
  font-size: var(--speedo); font-weight: 800; line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  text-shadow: 0 0 12px currentColor;
  transition: color .25s, text-shadow .25s;
}
.speedo-speed strong[data-tier="calm"]   { color: #9be7ff; }
.speedo-speed strong[data-tier="cruise"] { color: var(--cyan); }
.speedo-speed strong[data-tier="fast"]   { color: var(--yellow);  text-shadow: 0 0 16px var(--yellow); }
.speedo-speed strong[data-tier="hot"]    { color: var(--orange);  text-shadow: 0 0 18px var(--orange); }
.speedo-speed strong[data-tier="danger"] { color: var(--red);     text-shadow: 0 0 22px var(--red); animation: speedo-flash .55s ease-in-out infinite; }
@keyframes speedo-flash { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
.speedo-speed > span { font-size: calc(7px * var(--u)); font-weight: 700; color: var(--text3); letter-spacing: .06em; }

.speedo-gear { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.speedo-gear strong { font-size: var(--gear); font-weight: 800; line-height: 1; color: var(--text); }
.speedo-gear > span { font-size: calc(6px * var(--u)); font-weight: 700; color: var(--text3); letter-spacing: .08em; }

.speedo-rpm {
  display: flex; flex-direction: column; gap: 2px;
  min-width: clamp(60px, 12vmin, 110px);
}
.rpm-track {
  height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
}
.rpm-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--green) 40%, var(--yellow) 70%, var(--orange) 86%, var(--red) 100%);
  border-radius: 2px;
  transition: width .1s linear;
  box-shadow: 0 0 6px currentColor;
}
.rpm-fill[data-redline="1"] { animation: rpm-pulse .35s ease-in-out infinite; }
@keyframes rpm-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
.rpm-ticks { display: flex; justify-content: space-between; font-size: calc(5px * var(--u)); color: var(--text3); font-variant-numeric: tabular-nums; }
.rpm-label { font-size: calc(5px * var(--u)); color: var(--text3); text-align: right; }

/* Speedo can be compact (RPM hidden) on very small screens */
@media (max-height: 460px) { .speedo-rpm { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   RIGHT CONTROLS (handbrake / throttle / brake)
   ═══════════════════════════════════════════════════════════════════ */
.right-controls {
  position: fixed; z-index: 10;
  top: calc(var(--safe-t) + var(--hud-pill-h) + 8px);
  bottom: calc(var(--safe-b) + var(--action-h) + 6px);
  right: calc(var(--safe-r) + 4px);
  width: clamp(52px, 10vw, 88px);
  display: flex; flex-direction: column; gap: 3px;
}
.rc-top { display: flex; gap: 4px; flex: 1; min-height: 0; }

.ctrl-btn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 6px 4px;
  background: linear-gradient(180deg, rgba(14,22,38,.55), rgba(8,14,26,.45));
  border: 1.5px solid var(--glass-edge);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: transform .1s, border-color .15s, box-shadow .2s, color .15s;
  touch-action: none; -webkit-touch-callout: none;
  color: var(--text2);
}
.ctrl-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 60%);
  pointer-events: none !important;
}
.ctrl-btn > * { position: relative; z-index: 1; }
.ctrl-btn:active { transform: scale(.97); }
.ctrl-name {
  font-size: var(--pedal-name); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  max-width: 100%; text-align: center;
}
.chevrons { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.chevrons svg { width: 22px; height: 10px; opacity: .65; transition: opacity .12s; }
.ctrl-btn.pressed .chevrons svg, .ctrl-btn:active .chevrons svg { opacity: 1; }

/* HANDBRAKE — small column, orange when active */
.hb-btn {
  flex: 0 0 38px;
  border-color: rgba(255,255,255,.12);
}
.hb-btn .hb-icon { width: 20px; height: 20px; transition: color .15s, transform .15s; }
.hb-btn.pressed,
.hb-btn:active {
  background: linear-gradient(180deg, rgba(255,170,40,.22), rgba(255,170,40,.36));
  border-color: rgba(255,180,40,.72);
  color: #ffb340;
  box-shadow: 0 0 22px rgba(255,160,0,.32), inset 0 0 0 1px rgba(255,180,40,.4);
}
.hb-btn.pressed .hb-icon { animation: hb-pulse .8s ease-in-out infinite; }
@keyframes hb-pulse {
  0%,100% { transform: scale(1); color: #ffb340; }
  50%     { transform: scale(1.12); color: #fff; }
}

/* THROTTLE — fills from bottom when pressed */
.gas-btn {
  flex: 1; color: var(--cyan);
  background: linear-gradient(180deg, rgba(0,120,255,.04), rgba(0,120,255,.08));
  border-color: rgba(0,160,255,.22);
}
.gas-btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, rgba(0,200,255,.42), rgba(0,140,255,.7));
  border-radius: inherit;
  transition: height .14s cubic-bezier(.34,1.5,.64,1);
  pointer-events: none !important; z-index: 0;
  box-shadow: inset 0 8px 16px rgba(0,212,255,.22);
}
.gas-btn.pressed, .gas-btn:active {
  border-color: rgba(0,200,255,.85);
  box-shadow: 0 0 26px rgba(0,180,255,.32), inset 0 0 0 1px rgba(0,212,255,.4);
  color: #fff;
}
.gas-btn.pressed::after, .gas-btn:active::after { height: 100%; }

/* BRAKE — fills from top when pressed */
.brake-btn {
  flex: 0 0 clamp(48px, 11vh, 80px);
  color: var(--red);
  background: linear-gradient(180deg, rgba(255,40,40,.05), rgba(255,40,40,.1));
  border-color: rgba(255,60,60,.22);
}
.brake-btn::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0%;
  background: linear-gradient(0deg, rgba(255,80,80,.5), rgba(255,40,40,.72));
  border-radius: inherit;
  transition: height .14s cubic-bezier(.34,1.5,.64,1);
  pointer-events: none !important; z-index: 0;
  box-shadow: inset 0 -8px 16px rgba(255,50,50,.28);
}
.brake-btn.pressed, .brake-btn:active {
  border-color: rgba(255,80,80,.85);
  box-shadow: 0 0 26px rgba(255,50,50,.36), inset 0 0 0 1px rgba(255,80,80,.5);
  color: #fff;
}
.brake-btn.pressed::after, .brake-btn:active::after { height: 100%; }

/* Mouse/keyboard explicit override — keyboard players don't need touch pedals. */
body.device-desktop .right-controls { display: none !important; }
/* (Touch + desktop pedal layouts live in the RESPONSIVE LAYER block at end of file.) */

/* ═══════════════════════════════════════════════════════════════════
   ACTION BAR (bottom — horn/camera/lights/signals/gear)
   ═══════════════════════════════════════════════════════════════════ */
.action-bar {
  position: fixed; z-index: 11;
  left: calc(var(--safe-l) + 4px); right: calc(var(--safe-r) + 4px);
  bottom: calc(var(--safe-b) + 2px);
  height: var(--action-h);
  display: flex; align-items: stretch; gap: 3px; padding: 3px;
  background: linear-gradient(180deg, rgba(12,20,34,.72), rgba(8,14,26,.78));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  overflow-x: auto; scrollbar-width: none;
}
.action-bar::-webkit-scrollbar { display: none; }
.action-bar button {
  flex: 0 0 auto; min-width: var(--action-min-w);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform .12s, background .18s, border-color .18s, box-shadow .25s, color .15s;
  touch-action: manipulation;
}
.action-bar button svg { width: var(--action-icon); height: var(--action-icon); opacity: .75; transition: opacity .15s, transform .15s; }
.action-bar button span { font-size: var(--action-label); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .85; line-height: 1; }
.action-bar button:active,
.action-bar button.pressed {
  background: linear-gradient(180deg, rgba(0,180,255,.22), rgba(0,180,255,.1));
  border-color: rgba(0,200,255,.5);
  color: var(--cyan);
  transform: scale(.93);
  box-shadow: 0 0 14px rgba(0,180,255,.25);
}
.action-bar button:active svg, .action-bar button.pressed svg { opacity: 1; transform: scale(1.05); }
.action-bar button:active span, .action-bar button.pressed span { opacity: 1; }
.action-bar button.acked { background: linear-gradient(180deg, rgba(0,230,118,.2), rgba(0,230,118,.08)); border-color: rgba(0,230,118,.4); color: var(--green); }
.action-bar button.error { background: rgba(255,60,60,.18); border-color: rgba(255,60,60,.4); color: var(--red); }
.action-bar button.blocked { animation: btn-shake .35s ease-out; }
@keyframes btn-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* Group dividers */
.act-sep {
  flex: 0 0 1px; align-self: center; height: 50%;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,.28), transparent);
  margin: 0 3px;
  pointer-events: none;
}

/* Per-group accents */
.action-bar .act-signal.pressed,
.action-bar .act-signal:active {
  background: linear-gradient(180deg, rgba(255,200,0,.22), rgba(255,200,0,.1));
  border-color: rgba(255,200,0,.5); color: var(--yellow);
  box-shadow: 0 0 14px rgba(255,200,0,.22);
}
.action-bar .act-hazard.pressed,
.action-bar .act-hazard:active {
  background: linear-gradient(180deg, rgba(255,60,60,.22), rgba(255,60,60,.1));
  border-color: rgba(255,80,80,.55); color: var(--red);
  box-shadow: 0 0 14px rgba(255,50,50,.28);
}
.action-bar .act-gear.pressed,
.action-bar .act-gear:active {
  background: linear-gradient(180deg, rgba(0,230,118,.18), rgba(0,230,118,.08));
  border-color: rgba(0,230,118,.4); color: var(--green);
}

/* When NOT in a live driving session — dim controls to signal they're locked */
body:not(.is-driving) .right-controls,
body:not(.is-driving) .action-bar { opacity: .42; filter: grayscale(.4); }
body.is-driving .right-controls,
body.is-driving .action-bar { opacity: 1; filter: none; transition: opacity .25s, filter .25s; }

/* ═══════════════════════════════════════════════════════════════════
   QUALITY SWITCH (tap quality pill to toggle)
   ═══════════════════════════════════════════════════════════════════ */
.quality-switch {
  position: fixed; z-index: 15;
  top: calc(var(--safe-t) + var(--hud-pill-h) + 6px);
  right: calc(var(--safe-r) + 4px);
  display: flex; gap: 3px; padding: 3px;
  max-width: calc(100vw - 16px);
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  overflow-x: auto; scrollbar-width: none;
}
.quality-switch::-webkit-scrollbar { display: none; }
.quality-switch.hidden { display: none; }
.quality-switch button {
  height: 22px; padding: 0 8px; border-radius: 6px;
  background: transparent; color: var(--text3);
  font-size: calc(9px * var(--u)); font-weight: 700;
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .2s;
  touch-action: manipulation;
}
.quality-switch button.selected {
  background: var(--blue); color: #fff;
  box-shadow: 0 2px 8px rgba(30,144,255,.32);
}

/* ═══════════════════════════════════════════════════════════════════
   CENTER OVERLAY (countdown / GO! / END / challenge card)
   ═══════════════════════════════════════════════════════════════════ */
.center-overlay[hidden] { display: none !important; }
.center-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  pointer-events: none;
  text-align: center;
}
.center-overlay::before {
  content: ''; position: absolute;
  width: min(72vmin, 560px); height: min(72vmin, 560px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 50%, transparent 75%);
  pointer-events: none; z-index: -1;
}

/* COUNTDOWN — F1 traffic-light colours */
.center-overlay.countdown {
  font-size: var(--countdown);
  font-weight: 900; letter-spacing: -.06em; line-height: .85;
  color: #fff; text-shadow: 0 0 32px currentColor;
  font-variant-numeric: tabular-nums;
  animation: count-punch .9s cubic-bezier(.18,1.4,.42,1) both;
}
.center-overlay.countdown[data-num="9"],
.center-overlay.countdown[data-num="8"],
.center-overlay.countdown[data-num="7"] { color: var(--red); text-shadow: 0 0 40px var(--red), 0 0 80px rgba(255,59,59,.5); }
.center-overlay.countdown[data-num="6"],
.center-overlay.countdown[data-num="5"],
.center-overlay.countdown[data-num="4"] { color: var(--orange); text-shadow: 0 0 40px var(--orange), 0 0 80px rgba(255,152,0,.5); }
.center-overlay.countdown[data-num="3"],
.center-overlay.countdown[data-num="2"] { color: var(--yellow); text-shadow: 0 0 40px var(--yellow), 0 0 80px rgba(255,212,0,.5); }
.center-overlay.countdown[data-num="1"] { color: var(--green); text-shadow: 0 0 50px var(--green), 0 0 100px rgba(0,230,118,.6); }
.center-overlay.countdown::after {
  content: ''; position: absolute;
  width: min(54vmin, 400px); height: min(54vmin, 400px);
  border-radius: 50%; border: 4px solid currentColor; opacity: 0;
  animation: ring-burst .9s ease-out both;
  pointer-events: none;
}
@keyframes count-punch {
  0%   { transform: scale(2.4); opacity: 0; filter: blur(14px); }
  18%  { transform: scale(.92); opacity: 1; filter: blur(0); }
  34%  { transform: scale(1.04); opacity: 1; }
  52%  { transform: scale(1); opacity: 1; }
  82%  { transform: scale(.98); opacity: .95; }
  100% { transform: scale(.6); opacity: 0; filter: blur(6px); }
}
@keyframes ring-burst {
  0%   { transform: scale(.55); opacity: .95; border-width: 6px; }
  60%  { transform: scale(1.05); opacity: .5; border-width: 3px; }
  100% { transform: scale(1.6); opacity: 0; border-width: 1px; }
}

/* GO! */
.center-overlay.go {
  font-size: calc(var(--countdown) * .85);
  font-weight: 900; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(180deg, #aaffd6, var(--green) 50%, #00a850);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 60px rgba(0,230,118,.9)) drop-shadow(0 0 120px rgba(0,230,118,.5));
  animation: go-burst .8s cubic-bezier(.22,1.2,.36,1);
}
@keyframes go-burst {
  0%   { transform: scale(.4) rotate(-6deg); opacity: 0; filter: blur(12px); }
  35%  { transform: scale(1.15) rotate(2deg); opacity: 1; filter: blur(0) drop-shadow(0 0 80px rgba(0,230,118,1)); }
  60%  { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.05); opacity: 1; }
}

/* END */
.center-overlay.end {
  font-size: calc(var(--countdown) * .72);
  font-weight: 900; letter-spacing: .04em; line-height: 1;
  background: linear-gradient(180deg, #ffb0b0, var(--red) 50%, #a00000);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 60px rgba(255,59,59,.85));
  animation: end-slam .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes end-slam {
  0%   { transform: scale(2.5); opacity: 0; letter-spacing: .4em; filter: blur(20px); }
  60%  { transform: scale(.95); opacity: 1; letter-spacing: .02em; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; letter-spacing: .04em; }
}

/* Challenge card */
.center-overlay.challenge { animation: card-in .55s ease-out; font-size: 0; }
.center-overlay.challenge::after {
  content: attr(data-eyebrow);
  display: block;
  order: -1;
  font-size: clamp(11px, 1.5vmin, 18px);
  font-weight: 800; letter-spacing: .4em;
  color: var(--cyan); text-transform: uppercase;
  margin-bottom: clamp(6px, 1vmin, 14px);
  text-shadow: 0 0 14px rgba(0,212,255,.6);
}
.center-overlay.challenge .challenge-name {
  display: block;
  font-size: clamp(28px, 6.5vmin, 78px);
  font-weight: 900; line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff, #cfeaff 60%, var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(0,212,255,.45));
  padding: 0 24px; max-width: 92vw;
  text-transform: uppercase;
}
.center-overlay.challenge .challenge-sub {
  display: block;
  font-size: clamp(11px, 1.4vmin, 16px); font-weight: 500;
  color: rgba(220,235,255,.78); letter-spacing: .03em;
  margin-top: clamp(6px, 1vmin, 14px);
  max-width: min(92vw, 720px); padding: 0 24px;
  line-height: 1.4;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
@keyframes card-in { 0% { opacity: 0; transform: translateY(16px) scale(.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* CONNECTING — waiting for WebRTC track */
.center-overlay.connecting {
  font-size: clamp(22px, 5vmin, 52px);
  font-weight: 800; letter-spacing: .18em;
  color: var(--cyan);
  text-shadow: 0 0 24px rgba(0,212,255,.5);
  animation: connecting-pulse 1.4s ease-in-out infinite;
}
.center-overlay.connecting::before { opacity: .12; }
@keyframes connecting-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* ═══════════════════════════════════════════════════════════════════
   JOIN PANEL — full-screen modal
   ═══════════════════════════════════════════════════════════════════ */
.join-panel {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 12px);
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.join-panel.hidden { display: none; }
.join-card {
  position: relative;
  width: 100%; max-width: 380px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge-hi);
  border-radius: 18px;
  padding: 18px 18px 22px;
  max-height: calc(100vh - 24px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  text-align: center;
}
/* Sticky language switcher */
.lang-switch {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: flex-end; gap: 4px;
  margin: -8px -8px 10px; padding: 6px 8px;
  background: linear-gradient(180deg, rgba(12,20,34,.95), rgba(12,20,34,.6));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 14px 14px 0 0;
}
.lang-btn {
  padding: 4px 11px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: var(--text3); font-size: 11px; font-weight: 700;
  transition: background .18s, color .18s, box-shadow .2s;
  touch-action: manipulation;
}
.lang-btn:active { transform: scale(.95); }
.lang-btn.selected { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(30,144,255,.32); }

.join-grid { display: flex; flex-direction: column; gap: 10px; }
.join-form > .eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 8px;
}
.join-form > h1 { font-size: 19px; font-weight: 700; margin-bottom: 4px; line-height: 1.2; }
.join-form > p { font-size: 12px; color: var(--text3); margin-bottom: 14px; line-height: 1.4; }
.join-form input {
  display: block; width: 100%;
  padding: 11px 14px; margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--text); font-size: 14px; text-align: center;
  transition: border-color .15s, background .15s;
}
.join-form input:focus { border-color: var(--cyan); background: rgba(0,180,255,.05); }
.join-form input::placeholder { color: var(--text3); }
.join-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.join-actions button {
  flex: 1; min-width: 100px; max-width: 180px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  transition: transform .12s, background .18s, box-shadow .2s;
  touch-action: manipulation;
}
.join-actions button:active { transform: scale(.97); }
.join-actions .primary { background: var(--blue); color: #fff; box-shadow: 0 4px 16px rgba(30,144,255,.32); }
.join-actions .primary.ready { background: var(--green); box-shadow: 0 4px 16px rgba(0,230,118,.32); }
.join-actions .secondary { background: rgba(255,255,255,.06); color: var(--text2); border: 1px solid rgba(255,255,255,.1); }
.join-message { font-size: 12px; color: var(--cyan); min-height: 18px; margin-bottom: 6px; }
.join-meta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  font-size: 11px; color: var(--text3); margin-top: 4px;
}
.join-meta strong { color: var(--text2); font-variant-numeric: tabular-nums; }
.join-side { padding-top: 8px; }
.join-footer { display: none; }

/* 2-column layout for wider landscape (more comfortable to fill space) */
@media (orientation: landscape) and (min-width: 720px) {
  .join-card { max-width: 740px; padding: 16px 20px 18px; }
  .join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; text-align: left; }
  .join-form > .eyebrow,
  .join-form > h1,
  .join-form > p { text-align: left; }
  .join-actions { justify-content: flex-start; }
  .join-meta { justify-content: flex-start; }
  .join-side { padding-top: 28px; }
}

/* ─── Leaderboard ─── */
.wait-leaderboard h3 {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 8px; font-weight: 700; text-align: left;
}
.wait-leaderboard ol {
  list-style: none; max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.wait-leaderboard li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  animation: lb-slide .35s cubic-bezier(.22,1.2,.36,1) both;
}
.wait-leaderboard li:nth-child(1) { animation-delay: .04s; }
.wait-leaderboard li:nth-child(2) { animation-delay: .08s; }
.wait-leaderboard li:nth-child(3) { animation-delay: .12s; }
.wait-leaderboard li:nth-child(4) { animation-delay: .16s; }
.wait-leaderboard li:nth-child(5) { animation-delay: .2s; }
@keyframes lb-slide { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } }
.lb-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lb-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.lb-c0 { background: linear-gradient(135deg, #00d4ff, #0078a0); }
.lb-c1 { background: linear-gradient(135deg, #00e676, #00803a); }
.lb-c2 { background: linear-gradient(135deg, #ff9800, #a04800); }
.lb-c3 { background: linear-gradient(135deg, #ff3b3b, #7a1010); }
.lb-c4 { background: linear-gradient(135deg, #b06bff, #5018a0); }
.lb-c5 { background: linear-gradient(135deg, #ffd400, #a08000); }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-score small { color: var(--text3); font-size: 9px; margin-left: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   RESULT PANEL
   ═══════════════════════════════════════════════════════════════════ */
.result-panel {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 12px);
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.result-panel.hidden { display: none; }
.result-card {
  background: var(--glass-strong); border: 1px solid var(--glass-edge-hi);
  border-radius: 18px; padding: 22px 20px;
  max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.result-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; color: var(--cyan); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.result-stats div {
  text-align: center; padding: 10px 6px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.result-stats span { display: block; font-size: 8px; color: var(--text3); text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.result-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; display: block; margin-top: 2px; }
.result-stats small { font-size: 9px; color: var(--text3); }
.result-lb { margin-bottom: 14px; text-align: left; }
.result-lb h3 { font-size: 10px; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; font-weight: 700; letter-spacing: .1em; }
.result-lb ol { list-style: none; max-height: 130px; overflow-y: auto; }
.result-lb li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; }
.primary-btn {
  padding: 12px 24px; border-radius: var(--radius-sm);
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 16px rgba(30,144,255,.32);
  transition: transform .12s, background .18s;
  touch-action: manipulation;
}
.primary-btn:active { transform: scale(.97); background: #1670d0; }

/* ═══════════════════════════════════════════════════════════════════
   ROTATE LOCK (full-screen, only in portrait)
   ═══════════════════════════════════════════════════════════════════ */
.rotate-lock[hidden] { display: none !important; }
.rotate-lock {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at center, rgba(8,12,22,.96), rgba(0,0,0,.98));
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
.rotate-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; max-width: 320px;
  padding: 30px 24px; border-radius: 20px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge-hi);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.rotate-icon {
  color: var(--cyan);
  animation: rotate-tilt 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(0,212,255,.5));
}
.rotate-card strong { font-size: 18px; font-weight: 800; }
.rotate-card span { font-size: 13px; color: var(--text2); line-height: 1.5; }
@keyframes rotate-tilt {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-12deg); }
  55%     { transform: rotate(82deg); }
  75%     { transform: rotate(90deg); }
}

/* In portrait — hide ALL gameplay UI, show only rotate-lock */
@media (orientation: portrait) {
  .top-hud, .speedo-panel, .steer-zone, .right-controls,
  .action-bar, .quality-switch, .center-overlay, .toast,
  .video-fallback, .join-panel, .result-panel { display: none !important; }
  .video-layer video { visibility: hidden; }
  .rotate-lock { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════ */
.toast[hidden] { display: none !important; }
.toast {
  position: fixed; z-index: 30;
  top: calc(var(--safe-t) + var(--hud-pill-h) + 8px);
  left: 50%; transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  padding: 9px 16px; border-radius: var(--radius-sm);
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  text-align: center; font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  animation: toast-in .25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER — single source of truth
   Device classes: touch-phone / touch-tablet / short-landscape / desktop
   All gameplay UI is gated to landscape; portrait shows rotate-lock only.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --u: 1;
  --edge-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), 6px);
  --pedals-w: clamp(60px, 9vw, 82px);
  --gap-y: 4px;
}

/* ─── BASE LANDSCAPE (applies to ALL landscape orientations) ─── */
@media (orientation: landscape) {
  :root {
    --hud-pill-h: 26px;
    --hud-num: 11px;
    --hud-label: 6px;
    --speedo: 28px;
    --gear: 18px;
    --pedal-name: 8px;
    --action-h: 38px;
    --action-icon: 13px;
    --action-min-w: 44px;
    --action-label: 6px;
  }
  .top-hud { left: var(--edge-x); right: var(--edge-x); gap: 3px; }
  .top-hud > * { min-width: 0; }
  .hud-driver strong, .hud-title strong, #connText {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .steer-zone {
    top: calc(var(--safe-t) + var(--hud-pill-h) + var(--gap-y));
    bottom: calc(var(--safe-b) + var(--action-h) + var(--gap-y));
  }
  .action-bar { left: var(--edge-x); right: var(--edge-x); bottom: calc(var(--safe-b) + 2px); }
  .action-bar button span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .speedo-panel { left: var(--edge-x); bottom: calc(var(--safe-b) + var(--action-h) + 8px); }
  .quality-switch { top: calc(var(--safe-t) + var(--hud-pill-h) + 6px); }
}

/* ─── TOUCH (phone + tablet landscape) ─── */
@media (orientation: landscape) and (pointer: coarse) {
  /* Top HUD trimmed: no center title, no driver-meta, no per-pill labels */
  .hud-title { display: none; }
  .hud-driver { max-width: 32vw; padding: 0 8px; }
  .hud-driver .car-icon { width: 13px; height: 13px; }
  .driver-meta { display: none; }
  .stat-pill > span,
  .stat-pill-ping .ping-chart,
  .conn-bars { display: none; }
  .hud-stats { gap: 2px; }
  .stat-pill { padding: 0 7px; }
  .stat-pill strong { font-size: 11px; }
  .hud-conn { gap: 4px; padding: 0 7px; }
  #connText { font-size: 7px; }
  .fs-btn { width: 18px; height: 18px; }

  /* Steer zone — full visible area minus pedal column */
  .steer-zone { left: 0; width: calc(100vw - var(--pedals-w) - 10px); }
  .steer-hint { display: none; }
  .steer-arc { left: -20%; width: 72%; }

  /* Right pedal column — bottom-anchored, fixed height */
  .right-controls {
    display: flex !important;
    top: auto;
    bottom: calc(var(--safe-b) + var(--action-h) + 6px);
    right: var(--edge-x);
    width: var(--pedals-w);
    height: clamp(116px, 32vh, 156px);
    gap: 4px;
  }
  .rc-top { gap: 3px; }
  .ctrl-btn { padding: 5px 3px; border-radius: 11px; }
  .ctrl-name { font-size: 8px; letter-spacing: .02em; }
  .hb-btn { flex-basis: clamp(28px, 8vh, 38px); }
  .hb-btn .hb-icon { width: 16px; height: 16px; }
  .gas-btn { flex: 1; min-height: 0; }
  .brake-btn { flex-basis: clamp(38px, 11vh, 56px); }
  .chevrons svg { width: 22px; height: 10px; }

  /* Speedo — compact, no RPM (it doesn't fit at this size) */
  .speedo-panel {
    max-width: calc(100vw - var(--pedals-w) - 18px);
    padding: 4px 9px; gap: 7px;
  }
  .speedo-rpm { display: none; }

  /* Action bar — horizontally scrollable if too crowded */
  .action-bar {
    height: var(--action-h);
    gap: 3px; padding: 3px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .action-bar button { min-width: var(--action-min-w); padding: 2px 6px; scroll-snap-align: start; }

  /* Quality switch — left-anchored so it never overlaps pedal column */
  .quality-switch {
    left: var(--edge-x); right: auto;
    max-width: calc(100vw - var(--pedals-w) - 20px);
  }
  .quality-switch button { height: 22px; padding: 0 9px; font-size: 10px; }
}

/* ─── LARGE TOUCH (tablets — restore some richer info) ─── */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 1024px) {
  :root {
    --hud-pill-h: 30px;
    --hud-num: 12px;
    --hud-label: 7px;
    --speedo: 34px;
    --gear: 22px;
    --action-h: 44px;
    --action-icon: 15px;
    --action-min-w: 54px;
    --action-label: 7px;
    --pedals-w: clamp(76px, 7vw, 100px);
  }
  .driver-meta { display: flex; }
  .stat-pill > span { display: inline; }
  .stat-pill-ping .ping-chart { display: block; }
  .conn-bars { display: flex; }
  #connText { font-size: 8px; }
  .speedo-rpm { display: flex; }
  .right-controls { height: clamp(150px, 36vh, 200px); }
  .ctrl-name { font-size: 9px; }
  .hb-btn { flex-basis: clamp(36px, 9vh, 46px); }
  .hb-btn .hb-icon { width: 20px; height: 20px; }
  .brake-btn { flex-basis: clamp(50px, 12vh, 70px); }
  .chevrons svg { width: 28px; height: 12px; }
}

/* ─── SHORT LANDSCAPE (iPhone in landscape, ≤420px height) ─── */
@media (orientation: landscape) and (max-height: 420px) {
  :root {
    --hud-pill-h: 22px;
    --hud-num: 10px;
    --speedo: 22px;
    --gear: 14px;
    --action-h: 32px;
    --action-min-w: 38px;
    --action-icon: 12px;
    --action-label: 5.5px;
    --pedals-w: clamp(54px, 8.5vw, 70px);
  }
  .top-hud { gap: 2px; }
  .session-sub, .ping-chart { display: none !important; }
  .stat-pill { padding: 0 5px; }
  .hud-conn { padding: 0 5px; }
  .right-controls { height: clamp(94px, 26vh, 122px); }
  .hb-btn { flex-basis: clamp(22px, 6.5vh, 30px); }
  .hb-btn .hb-icon { width: 13px; height: 13px; }
  .brake-btn { flex-basis: clamp(30px, 9vh, 40px); }
  .chevrons svg { width: 18px; height: 8px; }
  .ctrl-name { font-size: 6.5px; }
  .speedo-panel { padding: 3px 7px; gap: 5px; }
  .quality-switch button { height: 19px; padding: 0 7px; font-size: 9px; }
  .action-bar button span { display: none; }
}

/* ─── DESKTOP (mouse + keyboard) ─── */
@media (orientation: landscape) and (hover: hover) and (pointer: fine) {
  :root {
    --hud-pill-h: 32px;
    --hud-num: 13px;
    --hud-label: 8px;
    --speedo: 40px;
    --gear: 26px;
    --action-h: 46px;
    --action-icon: 16px;
    --action-min-w: 64px;
    --action-label: 8px;
    --edge-x: 16px;
  }
  .right-controls { display: none !important; }
  .hud-title { display: flex; max-width: min(34vw, 340px); padding: 0 14px; }
  .hud-driver { max-width: min(28vw, 280px); }
  .driver-meta { display: flex; }
  .stat-pill > span { display: inline; }
  .stat-pill-ping .ping-chart { display: block; }
  .conn-bars { display: flex; }
  .steer-zone { left: 0; width: 50vw; }
  .speedo-panel { left: 18px; bottom: calc(var(--safe-b) + var(--action-h) + 14px); max-width: 440px; }
  .speedo-rpm { display: flex; }
  .action-bar {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(1120px, calc(100vw - 32px));
  }
  .quality-switch {
    right: 18px; left: auto;
    max-width: min(560px, 46vw);
  }
  /* Keyboard hint on idle */
  .steer-hint strong::after {
    content: " · WASD / ←→";
    color: var(--text3); font-weight: 600; letter-spacing: .04em; margin-left: 6px;
  }
  .steer-hint span { display: none; }
}

@media (orientation: landscape) and (hover: hover) and (pointer: fine) and (min-width: 1600px) {
  :root { --hud-pill-h: 36px; --speedo: 46px; --gear: 30px; --action-h: 52px; --action-min-w: 70px; }
  .action-bar { width: min(1240px, calc(100vw - 48px)); }
}

@media (orientation: landscape) and (hover: hover) and (pointer: fine) and (min-width: 2400px) {
  :root { --hud-pill-h: 40px; --speedo: 52px; --gear: 32px; --action-h: 56px; }
  .action-bar { width: min(1360px, calc(100vw - 64px)); }
}

/* ─── Narrow-viewport guards (older phones, browsers with chrome) ─── */
@media (orientation: landscape) and (max-width: 700px) {
  .hud-conn #connText { display: none; }
}
@media (orientation: landscape) and (max-width: 560px) {
  .hud-stats .stat-pill:not(.stat-pill-ping) { display: none; }
  .action-bar button span { display: none; }
  .action-bar button { min-width: 40px; }
}

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}