/* ============================================================
   entirety — corporate-arcade UI. Dark glass, cyan/orange neon.
   Responsive from 1366x768 office laptops to 4K.
   ============================================================ */

:root {
  --bg: #070a14;
  --panel: rgba(13, 18, 34, 0.86);
  --panel-border: rgba(80, 120, 200, 0.22);
  --cyan: #22d3ee;
  --orange: #fb923c;
  --text: #e8ecf6;
  --muted: #8b96b0;
  --danger: #ef4444;
  --ok: #4ade80;
  --avatar-bg: #f3efe7; /* the "fondo blanquito" behind every caricature */
  --radius: 14px;
  font-size: clamp(14px, 1vw, 18px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  user-select: none;
}

#game-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; display: block;
}
#ui-root { position: fixed; inset: 0; pointer-events: none; }
#ui-root > * { pointer-events: auto; }

.hidden { display: none !important; }

/* ---------- hand-drawn icon system ---------- */
.ico { display: inline-flex; vertical-align: -0.18em; width: 1.15em; height: 1.15em; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }
.ico.big { width: 1.6em; height: 1.6em; }
.btn-line { display: inline-flex; align-items: center; gap: .5em; justify-content: center; }
.panel-header h2 .ico, h2 .ico { width: 1.05em; height: 1.05em; margin-right: .15em; color: var(--cyan); }
.logo-flag { color: var(--orange); width: .8em !important; height: .8em !important; margin-left: .15em; }
.tokens-pill .ico { color: var(--orange); }
.toast .ico { width: 1.25em; height: 1.25em; color: var(--cyan); }
.toast.warn .ico { color: var(--orange); }

.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
  padding: 2vh 2vw;
}

/* ---------- shared components ---------- */
.panel, .menu-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  padding: 2rem;
  box-shadow: 0 0 60px rgba(34, 211, 238, 0.07), 0 24px 60px rgba(0,0,0,0.5);
}
.panel.wide { width: min(1100px, 94vw); max-height: 92vh; overflow: auto; }
.panel-header { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.panel-header h2 { flex: 1; letter-spacing: .12em; }
.sub { color: var(--muted); font-size: .85rem; margin: .3rem 0 1rem; }

.btn {
  font: inherit; color: var(--text);
  background: linear-gradient(180deg, rgba(60,80,140,.35), rgba(30,40,70,.35));
  border: 1px solid rgba(110, 150, 230, 0.35);
  border-radius: 10px;
  padding: .7rem 1.1rem;
  cursor: pointer;
  letter-spacing: .08em;
  font-weight: 700;
  transition: transform .08s, box-shadow .15s, border-color .15s;
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
}
.btn small { font-weight: 400; color: var(--muted); letter-spacing: .02em; text-transform: none; }
.btn:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(34,211,238,.25); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, rgba(34,211,238,.32), rgba(14,116,144,.4));
  border-color: rgba(34,211,238,.6);
}
.btn.primary:hover { box-shadow: 0 0 26px rgba(34,211,238,.45); }
.btn.ghost { background: transparent; border-color: rgba(110,150,230,.2); }
.btn.big { padding: 1rem 1.4rem; font-size: 1.05rem; }
.btn.tiny { padding: .35rem .6rem; font-size: .8rem; }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; transform: none; }

.field { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0; }
.field span { font-size: .72rem; letter-spacing: .18em; color: var(--muted); }
input, select {
  font: inherit; color: var(--text);
  background: rgba(8, 12, 24, 0.7);
  border: 1px solid rgba(110,150,230,.3);
  border-radius: 10px;
  padding: .65rem .9rem;
  outline: none;
}
input:focus { border-color: var(--cyan); box-shadow: 0 0 14px rgba(34,211,238,.2); }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid rgba(110,150,230,.14); }
.table th { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table img.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; vertical-align: middle; background: var(--avatar-bg); }

/* ---------- main menu ---------- */
.menu-panel { width: min(460px, 94vw); text-align: center; }
.logo {
  font-size: 3.2rem; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(90deg, var(--cyan), #7dd3fc, var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(34,211,238,.25);
}
.logo-flag { -webkit-text-fill-color: initial; margin-left: .3rem; }
.tagline { color: var(--muted); letter-spacing: .3em; font-size: .68rem; margin-top: .2rem; }
.menu-buttons { display: flex; flex-direction: column; gap: .7rem; margin-top: .6rem; }
.join-row { display: flex; gap: .6rem; }
.join-row input { flex: 1; text-transform: uppercase; text-align: center; letter-spacing: .5em; font-weight: 900; }
.join-row .btn { flex: 1; }
.menu-row2 { display: flex; gap: .7rem; }
.menu-row2 .btn { flex: 1; }
.settings-row {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.2rem; font-size: .72rem; color: var(--muted); letter-spacing: .1em;
  flex-wrap: wrap;
}
.settings-row label { display: flex; align-items: center; gap: .5rem; }
.settings-row select { padding: .3rem .5rem; }
.settings-row input[type=range] { width: 90px; }
.hint { margin-top: 1rem; color: var(--muted); font-size: .72rem; }
.build-tag { margin-top: .4rem; opacity: .55; font-size: .62rem; letter-spacing: .08em; }
.map-diff { font-size: .62rem; letter-spacing: .18em; color: var(--orange); font-weight: 900; margin-top: .1rem; }
.map-diff .diff-off { color: rgba(140,150,176,.35); }

/* ---------- lobby ---------- */
.lobby-grid {
  width: min(1500px, 96vw); max-height: 94vh; overflow: auto;
  display: grid;
  grid-template-columns: 1.05fr 1.3fr 1.05fr;
  grid-template-areas: "head head head" "config grid pick";
  gap: 1rem;
}
.lobby-header {
  grid-area: head; display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); padding: 1rem 1.4rem;
}
.pin { color: var(--orange); letter-spacing: .35em; font-weight: 900; text-shadow: 0 0 18px rgba(251,146,60,.5); }
.lobby-col {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); padding: 1.1rem; overflow: auto;
}
.config-col { grid-area: config; }
.grid-col { grid-area: grid; }
.pick-col { grid-area: pick; }
.lobby-col h3 { font-size: .78rem; letter-spacing: .2em; color: var(--muted); margin: .6rem 0 .5rem; }
.host-only-tag { font-size: .62rem; color: var(--orange); border: 1px solid rgba(251,146,60,.4); padding: .1rem .4rem; border-radius: 6px; margin-left: .4rem; }

.map-list { display: flex; flex-direction: column; gap: .5rem; }
.map-card {
  display: flex; gap: .7rem; align-items: center;
  border: 1px solid rgba(110,150,230,.2); border-radius: 10px;
  padding: .5rem .6rem; cursor: pointer; transition: border-color .12s, background .12s;
}
.map-card:hover { border-color: var(--cyan); }
.map-card.selected { border-color: var(--orange); background: rgba(251,146,60,.08); box-shadow: 0 0 16px rgba(251,146,60,.15); }
.map-card canvas { background: rgba(6,10,20,.8); border-radius: 8px; flex-shrink: 0; }
.map-card .map-name { font-weight: 800; font-size: .92rem; }
.map-card .map-meta { color: var(--muted); font-size: .7rem; }
.map-card.locked { pointer-events: none; opacity: .8; }

.config-row { margin-top: .9rem; }
.seg { display: flex; gap: .4rem; flex-wrap: wrap; }
.seg button {
  font: inherit; font-weight: 700; color: var(--text);
  background: rgba(8,12,24,.6); border: 1px solid rgba(110,150,230,.25);
  padding: .45rem .8rem; border-radius: 8px; cursor: pointer; font-size: .8rem;
}
.seg button.selected { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 12px rgba(251,146,60,.2); }
.seg.locked { pointer-events: none; opacity: .8; }

.player-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.player-card {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(110,150,230,.2); border-radius: 10px; padding: .5rem .6rem;
  min-height: 64px;
}
.player-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--avatar-bg); border: 2px solid var(--chip, #445); }
.player-card .pc-name { font-weight: 800; font-size: .9rem; }
.player-card .pc-sub { color: var(--muted); font-size: .68rem; }
.player-card .pc-flags { margin-left: auto; font-size: 1rem; text-align: right; }
.player-card.empty { border-style: dashed; color: var(--muted); justify-content: center; font-size: .75rem; letter-spacing: .1em; }
.player-card.me { border-color: var(--cyan); box-shadow: 0 0 12px rgba(34,211,238,.15); }

.lobby-actions { display: flex; gap: .7rem; margin-top: 1rem; }
.lobby-actions .btn { flex: 1; }
#btn-ready.ready { border-color: var(--ok); color: var(--ok); }

/* ---------- my racer card (lobby) ---------- */
.racer-card {
  display: flex; gap: .8rem; align-items: center;
  border: 1px solid var(--chip, rgba(110,150,230,.3)); border-radius: 12px;
  padding: .7rem; margin-bottom: .6rem;
  background: linear-gradient(120deg, rgba(255,255,255,.03), transparent);
}
.racer-card img {
  width: 74px; height: 84px; object-fit: cover; object-position: top;
  border-radius: 10px; background: var(--avatar-bg); border: 2px solid var(--chip, #445);
  flex: none;
}
.racer-card .rc-name { font-weight: 900; font-size: 1.02rem; }
.racer-card .rc-title { color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.racer-card .rc-class {
  display: inline-block; margin-top: .3rem; font-size: .6rem; font-weight: 900;
  letter-spacing: .14em; color: var(--chip, var(--cyan));
  border: 1px solid var(--chip, var(--cyan)); border-radius: 6px; padding: .12rem .4rem;
}
.racer-card .rc-perk { color: var(--muted); font-size: .62rem; margin-top: .25rem; }
#btn-change-racer { width: 100%; margin-bottom: .4rem; }

/* ---------- character select — full-company grid ---------- */
.mk-select {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(5, 8, 16, 0.9); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 2vh 2vw;
}
.mk-frame {
  width: min(1500px, 96vw); max-height: 94vh;
  display: flex; flex-direction: column; gap: .8rem;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  box-shadow: 0 0 80px rgba(34,211,238,.1), 0 30px 80px rgba(0,0,0,.6);
}
.mk-header { display: flex; align-items: center; gap: 1rem; }
.mk-header h2 { flex: 1; letter-spacing: .18em; }
.mk-header input { width: min(300px, 30vw); }
.mk-body {
  display: grid; grid-template-columns: 300px 1fr; gap: 1rem;
  min-height: 0; flex: 1;
}
.mk-preview {
  border: 1px solid rgba(110,150,230,.25); border-radius: 12px;
  padding: 1rem; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .35rem; overflow: auto;
}
.mk-preview img {
  width: 168px; height: 190px; object-fit: contain; object-position: bottom;
  border-radius: 12px; background: var(--avatar-bg);
  border: 3px solid var(--chip, #445); padding: 6px;
}
.mk-preview .mp-name { font-size: 1.3rem; font-weight: 900; margin-top: .3rem; }
.mk-preview .mp-title { color: var(--muted); font-size: .72rem; letter-spacing: .12em; }
.mk-preview .mp-class {
  font-size: .64rem; font-weight: 900; letter-spacing: .16em; margin-top: .2rem;
  color: var(--chip, var(--cyan)); border: 1px solid var(--chip, var(--cyan));
  border-radius: 6px; padding: .15rem .5rem;
}
.mk-preview .mp-perk { font-size: .68rem; color: var(--text); margin: .2rem 0 .1rem; }
.mk-preview .mp-blurb { font-size: .64rem; color: var(--muted); font-style: italic; }
.mk-stats { width: 100%; margin-top: .4rem; display: flex; flex-direction: column; gap: .28rem; }
.mk-stat { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: .5rem; }
.mk-stat span { font-size: .58rem; letter-spacing: .14em; color: var(--muted); text-align: right; }
.mk-pips { display: flex; gap: .25rem; }
.mk-pips i {
  height: 9px; flex: 1; border-radius: 3px;
  background: rgba(110,150,230,.16); border: 1px solid rgba(110,150,230,.2);
}
.mk-pips i.on { background: var(--chip, var(--cyan)); border-color: transparent; box-shadow: 0 0 8px var(--chip, var(--cyan)); }
.mk-preview .btn { width: 100%; margin-top: .6rem; }
.mk-taken-note { color: var(--danger); font-size: .68rem; font-weight: 800; letter-spacing: .1em; margin-top: .5rem; }

.mk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .45rem; overflow: auto; align-content: start; padding-right: .2rem;
}
.mk-cell {
  position: relative; border: 2px solid rgba(110,150,230,.18); border-radius: 10px;
  aspect-ratio: 5 / 6; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, rgba(20,28,50,.6), rgba(10,14,26,.8));
  transition: border-color .1s, transform .1s, box-shadow .1s;
}
.mk-cell img {
  position: absolute; inset: 0 0 18%; width: 100%; height: 82%;
  object-fit: cover; object-position: top; background: var(--avatar-bg);
}
.mk-cell .mc-name {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 800; letter-spacing: .03em;
  background: rgba(8,12,24,.92); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding: 0 .2rem;
}
.mk-cell:hover, .mk-cell.focus {
  border-color: var(--cyan); transform: scale(1.06); z-index: 2;
  box-shadow: 0 0 16px rgba(34,211,238,.4);
}
.mk-cell.selected { border-color: var(--chip, var(--orange)); box-shadow: 0 0 18px var(--chip, rgba(251,146,60,.5)); }
.mk-cell.selected::after {
  content: 'YOU'; position: absolute; top: 3px; right: 3px; font-size: .5rem;
  font-weight: 900; letter-spacing: .1em; color: #0b0e18;
  background: var(--chip, var(--orange)); border-radius: 5px; padding: .05rem .25rem;
}
.mk-cell.taken { opacity: .32; cursor: not-allowed; filter: grayscale(.8); }
.mk-cell.taken::after {
  content: 'TAKEN'; position: absolute; top: 40%; left: 0; right: 0;
  text-align: center; font-size: .55rem; font-weight: 900; color: var(--danger); letter-spacing: .18em;
}
.mk-cell.hiddenByFilter { display: none; }
.mk-hint { color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-align: center; }

.car-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.car-card {
  border: 1px solid rgba(110,150,230,.2); border-radius: 10px; padding: .5rem .6rem;
  cursor: pointer; transition: border-color .12s; position: relative;
}
.car-card:hover { border-color: var(--cyan); }
.car-card.selected { border-color: var(--orange); background: rgba(251,146,60,.07); }
.car-card .car-name { font-weight: 800; font-size: .82rem; display: flex; align-items: center; gap: .4rem; }
.car-card .car-name .ico { width: 2.1em; height: 1.1em; color: var(--text); }
.car-card .car-desc { color: var(--muted); font-size: .62rem; min-height: 2em; }
.car-card.locked { opacity: .55; }
.car-card.locked:hover { border-color: rgba(251,146,60,.5); }
.car-card .car-lock {
  position: absolute; top: .4rem; right: .45rem; display: flex; align-items: center; gap: .25rem;
  font-size: .62rem; font-weight: 900; color: var(--orange);
}
.car-card .car-lock .ico { width: .95em; height: .95em; }
.car-card .statbar { height: 4px; background: rgba(110,150,230,.15); border-radius: 2px; margin-top: .25rem; position: relative; }
.car-card .statbar i { position: absolute; inset: 0 auto 0 0; background: var(--cyan); border-radius: 2px; }
.car-card .statlabel { font-size: .55rem; color: var(--muted); letter-spacing: .12em; margin-top: .3rem; display: block; }

/* ---------- garage ---------- */
.tokens-pill {
  background: rgba(251,146,60,.12); border: 1px solid rgba(251,146,60,.45);
  color: var(--orange); font-weight: 900; border-radius: 999px; padding: .45rem .9rem;
}
.garage-section-title { font-size: .8rem; letter-spacing: .22em; color: var(--muted); margin: 1.2rem 0 .6rem; }
.fair-tag {
  font-size: .58rem; letter-spacing: .12em; color: var(--ok);
  border: 1px solid rgba(74,222,128,.4); border-radius: 6px; padding: .12rem .45rem; margin-left: .5rem;
}
.upgrade-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.dealership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dealer-card {
  border: 1px solid rgba(110,150,230,.22); border-radius: 12px; padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.dealer-card .dc-icon { color: var(--cyan); width: 74px; height: 40px; }
.dealer-card .dc-icon svg { width: 100%; height: 100%; }
.dealer-card.owned { border-color: rgba(74,222,128,.4); }
.dealer-card h4 { letter-spacing: .06em; }
.dealer-card .dc-desc { color: var(--muted); font-size: .74rem; min-height: 2.6em; }
.dealer-card .dc-stats { display: flex; gap: .8rem; font-size: .62rem; color: var(--muted); letter-spacing: .08em; }
.dealer-price { color: var(--orange); font-weight: 900; }
.owned-tag { color: var(--ok); font-weight: 800; font-size: .72rem; letter-spacing: .14em; }
.upgrade-card {
  border: 1px solid rgba(110,150,230,.22); border-radius: 12px; padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.upgrade-card h3 { letter-spacing: .1em; }
.upgrade-card .upg-desc { color: var(--muted); font-size: .78rem; min-height: 2.4em; }
.pips { display: flex; gap: .35rem; }
.pip { flex: 1; height: 10px; border-radius: 4px; background: rgba(110,150,230,.15); }
.pip.on { background: linear-gradient(90deg, var(--cyan), var(--orange)); box-shadow: 0 0 10px rgba(34,211,238,.4); }

/* ---------- hall of fame ---------- */
.fame-podium { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0 1.4rem; align-items: flex-end; }
.podium-card {
  text-align: center; border: 1px solid rgba(110,150,230,.25); border-radius: 12px;
  padding: 1rem; width: 180px; background: rgba(8,12,24,.5);
}
.podium-card img { width: 84px; height: 92px; object-fit: cover; object-position: top; border-radius: 10px; background: var(--avatar-bg); }
.podium-card .pd-name { font-weight: 900; margin-top: .4rem; }
.podium-card .pd-pts { color: var(--orange); font-weight: 900; font-size: 1.2rem; }
.podium-card .pd-sub { color: var(--muted); font-size: .68rem; }
.podium-card.p1 { transform: scale(1.12); border-color: #facc15; box-shadow: 0 0 26px rgba(250,204,21,.2); }
.podium-card.p2 { border-color: #cbd5e1; }
.podium-card.p3 { border-color: #d97706; }
.fame-tables { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.4rem; }
.history-list { display: flex; flex-direction: column; gap: .5rem; max-height: 46vh; overflow: auto; }
.history-item { border: 1px solid rgba(110,150,230,.16); border-radius: 10px; padding: .5rem .7rem; font-size: .8rem; }
.history-item .hi-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; }
.history-item .hi-podium { margin-top: .2rem; }

/* ---------- race HUD ---------- */
#screen-race { position: absolute; inset: 0; pointer-events: none; }
#hud-vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(2,4,10,.9) 100%);
  transition: opacity .3s;
}
#hud-topbar {
  position: absolute; top: 1vh; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1.4rem; align-items: center;
  background: var(--panel); border: 1px solid var(--panel-border);
  padding: .4rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .85rem;
}
#hud-mapname { color: var(--muted); letter-spacing: .12em; }
#hud-clock { font-variant-numeric: tabular-nums; }

#hud-standings {
  position: absolute; left: 1vw; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 3px; width: clamp(190px, 15vw, 250px);
}
.standing-row {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(10, 14, 26, 0.72); border: 1px solid rgba(110,150,230,.14);
  border-radius: 8px; padding: .22rem .5rem; font-size: .78rem;
  backdrop-filter: blur(6px);
}
.standing-row .st-pos { width: 1.2em; font-weight: 900; color: var(--muted); }
.standing-row .st-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--avatar-bg); }
.standing-row .st-name {
  flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--chip, #456); padding-left: .4rem;
}
.standing-row .st-gap { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .72rem; }
.standing-row.me { border-color: var(--cyan); background: rgba(14, 42, 56, .8); }
.standing-row.finished { opacity: .55; }

#hud-minimap-wrap { position: absolute; top: 1.4vh; right: 1vw; }
#hud-minimap { display: block; }

#hud-bottom-left { position: absolute; left: 2vw; bottom: 3vh; }
#hud-pos-wrap { font-size: 4.6rem; font-weight: 900; line-height: 1; text-shadow: 0 0 24px rgba(34,211,238,.4); }
#hud-pos-suffix { font-size: 1.6rem; color: var(--muted); }
#hud-lap { letter-spacing: .2em; color: var(--muted); font-weight: 700; }
#hud-penalty {
  display: flex; align-items: center; gap: .35rem; margin-top: .3rem;
  color: var(--danger); font-weight: 900; font-size: .95rem;
}
#hud-penalty .ico { width: 1.15em; height: 1.15em; }
#hud-weather { display: inline-flex; }
#hud-weather .ico { width: 1.25em; height: 1.25em; color: var(--cyan); }

#hud-bottom-right { position: absolute; right: 2vw; bottom: 3vh; text-align: right; }
#hud-speed-wrap { font-size: 3.6rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
#hud-speed-unit { font-size: 1rem; color: var(--muted); margin-left: .3rem; }
#hud-nitro {
  width: clamp(180px, 16vw, 260px); height: 14px; margin-top: .5rem;
  background: rgba(10,14,26,.75); border: 1px solid rgba(110,150,230,.3);
  border-radius: 999px; overflow: hidden; position: relative;
}
#hud-nitro-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #0ea5e9, var(--cyan));
  border-radius: 999px; transition: width .12s linear;
}
#hud-nitro-fill.boosting { background: linear-gradient(90deg, var(--orange), #fde047); box-shadow: 0 0 16px rgba(251,146,60,.8); }
.nitro-label { position: absolute; inset: 0; font-size: .55rem; letter-spacing: .2em; color: rgba(232,236,246,.7); display: flex; align-items: center; justify-content: center; font-weight: 800; }
#hud-traps {
  margin-top: .35rem; display: flex; align-items: center; gap: .5rem;
  justify-content: flex-end; font-size: .55rem; letter-spacing: .2em;
  color: rgba(232,236,246,.7); font-weight: 800;
}
#hud-traps-n { color: #34d399; font-size: .8rem; letter-spacing: .25em; }
#hud-traps-n.empty { color: rgba(232,236,246,.35); }

#hud-countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9rem; font-weight: 900; pointer-events: none;
  color: var(--orange); text-shadow: 0 0 60px rgba(251,146,60,.6);
}
#hud-countdown.pop { animation: cd-pop .9s ease-out; }
@keyframes cd-pop { 0% { transform: scale(1.6); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { opacity: .9; } }

#hud-toasts {
  position: absolute; top: 9vh; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .4rem; align-items: center;
}
.toast {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 999px; padding: .5rem 1.1rem; font-weight: 700; font-size: .9rem;
  opacity: 0; transform: translateY(-8px); transition: all .25s;
  display: flex; gap: .5rem; align-items: center;
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast.warn { border-color: rgba(251,146,60,.55); box-shadow: 0 0 18px rgba(251,146,60,.2); }

#hud-banner {
  position: absolute; top: 24vh; left: 50%; transform: translateX(-50%);
  text-align: center; pointer-events: none;
}
.banner-big { font-size: 4rem; font-weight: 900; text-shadow: 0 0 40px rgba(34,211,238,.5); }
.banner-small { color: var(--muted); letter-spacing: .15em; }

#hud-controls-hint {
  position: absolute; bottom: 1vh; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: .7rem; letter-spacing: .12em;
  background: rgba(10,14,26,.6); padding: .3rem .9rem; border-radius: 999px;
}

/* ---------- results ---------- */
.modal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 5, 12, 0.55); backdrop-filter: blur(3px);
}
.results-panel { width: min(720px, 94vw); max-height: 90vh; overflow: auto; }
.results-panel h2 { letter-spacing: .15em; margin-bottom: .8rem; }
.results-actions { display: flex; gap: .7rem; margin-top: 1.1rem; }
.results-actions .btn { flex: 1; }
.results-table .row-me { background: rgba(34,211,238,.08); }
.tok { color: var(--orange); font-weight: 800; }
.pen { color: var(--danger); font-weight: 700; }
.medal.m1 { color: #facc15; }
.medal.m2 { color: #cbd5e1; }
.medal.m3 { color: #d97706; }
.fastest { color: var(--cyan); }
.pc-flags .ico { width: 1.05em; height: 1.05em; }
.flag-crown { color: #facc15; }
.flag-ready { color: var(--ok); }
.player-card.empty .ico { width: 1.1em; height: 1.1em; opacity: .6; margin-left: .3rem; }

/* ---------- global ---------- */
#global-toasts {
  position: absolute; bottom: 2vh; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .4rem; align-items: center; pointer-events: none;
}
.conn-pill {
  position: absolute; bottom: 1.2vh; right: 1vw;
  font-size: .62rem; letter-spacing: .16em; font-weight: 800;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(10,14,26,.7); border: 1px solid rgba(74, 222, 128, .5); color: var(--ok);
}
.conn-pill.off { border-color: rgba(239,68,68,.5); color: var(--danger); }

@media (max-width: 1100px) {
  .lobby-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "grid pick" "config config"; }
  .upgrade-lines { grid-template-columns: 1fr; }
  .fame-tables { grid-template-columns: 1fr; }
  #hud-standings { width: 170px; font-size: .7rem; }
}

/* ---------- sign-in gate (v4) ---------- */
.auth-panel { width: min(430px, 94vw); text-align: center; }
.auth-gate {
  font-size: .74rem; color: var(--muted); line-height: 1.5;
  background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.2);
  border-radius: 10px; padding: .6rem .7rem; margin: 1rem 0 .8rem;
}
.auth-gate strong { color: var(--cyan); }
.auth-gate .ico { color: var(--cyan); }
.auth-tabs { margin-bottom: .4rem; }
.auth-tabs button { flex: 1; }
.auth-error {
  color: var(--danger); font-size: .76rem; font-weight: 700;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35);
  border-radius: 8px; padding: .45rem .6rem; margin-bottom: .6rem;
}
#auth-submit { width: 100%; }
.signed-as {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  border: 1px solid rgba(110,150,230,.22); border-radius: 10px;
  padding: .5rem .7rem; margin: 1rem 0 .2rem; font-size: .76rem; text-align: left;
}
.signed-as strong { color: var(--cyan); }
.signed-as em { display: block; color: var(--muted); font-size: .64rem; font-style: normal; }
.signed-as .ico { color: var(--muted); }

/* ---------- total parity messaging ---------- */
.car-card .car-parity {
  display: flex; align-items: center; gap: .3rem; margin-top: .35rem;
  font-size: .58rem; letter-spacing: .06em; color: var(--ok);
}
.car-card .car-parity .ico { width: .9em; height: .9em; }
.dc-stats.parity {
  display: flex; align-items: center; gap: .35rem;
  font-size: .58rem; letter-spacing: .08em; color: var(--ok);
}
.mp-parity {
  font-size: .62rem; color: var(--ok); line-height: 1.45; margin: .35rem 0 .1rem;
  border-top: 1px solid rgba(74,222,128,.2); border-bottom: 1px solid rgba(74,222,128,.2);
  padding: .35rem 0; width: 100%;
}
.mp-parity span { color: var(--muted); }

/* ---------- CPU difficulty ---------- */
.tier-hint { font-size: .64rem; margin: .3rem 0 0; min-height: 1.6em; }

/* ---------- championship tabs / records / badges ---------- */
.fame-tabs { margin: .2rem 0 .9rem; }
.fame-tabs button { flex: 1; }
.fame-pane { min-height: 200px; }
.table tr.me-row { background: rgba(34,211,238,.09); }
.table tr.me-row td { color: var(--text); font-weight: 700; }
.table tr.me-row em { color: var(--cyan); font-style: normal; font-size: .7rem; }
.table td.rec { color: var(--orange); font-weight: 900; }
.table td.badge-cell { color: var(--orange); font-weight: 800; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.badge {
  border: 1px solid rgba(110,150,230,.2); border-radius: 12px; padding: .7rem;
  text-align: center; opacity: .5; transition: opacity .15s, border-color .15s;
}
.badge.held { opacity: 1; border-color: var(--orange); box-shadow: 0 0 18px rgba(251,146,60,.15); }
.badge .bd-ico .ico { width: 1.9em; height: 1.9em; color: var(--muted); }
.badge.held .bd-ico .ico { color: var(--orange); }
.badge .bd-name { font-weight: 900; font-size: .8rem; margin-top: .25rem; }
.badge .bd-blurb { color: var(--muted); font-size: .64rem; min-height: 2.4em; }
.badge .bd-count { color: var(--cyan); font-size: .58rem; letter-spacing: .06em; margin-top: .3rem; }

/* ---------- HUD: the random street readout ---------- */
.hud-layout { color: var(--muted); font-size: .62rem; letter-spacing: .05em; }

/* ---------- results: reward breakdown + celebrations ---------- */
.res-bonus { color: var(--ok); font-size: .68rem; font-weight: 800; }
.celebrate {
  margin: .5rem 0 0; display: flex; flex-direction: column; gap: .3rem;
}
.celebrate div {
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  border-radius: 8px; padding: .35rem .6rem;
}
.celebrate .rec-new { color: #0b0e18; background: linear-gradient(90deg, var(--orange), #fcd34d); }
.celebrate .badge-new { color: var(--cyan); border: 1px solid rgba(34,211,238,.4); }

/* long display names must not break the podium cards */
.podium-card .pd-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 0 .2rem;
}