/* Rocket Racing · OLAP */
:root {
  --font: "Saira Semi Condensed", "Arial Narrow", Arial, sans-serif;
  /* 1u ≈ 1 px a 1920 × 1080: todo el HUD escala con la pantalla */
  --u: max(0.6px, min(0.1vh, 0.0563vw));
  --hot: #ff8a1f;
  --gold: #ffd23a;
  --cyan: #46d8ff;
  --ink: #f2f5ff;
  --muted: #a4b0c8;
  --btn: rgba(6, 9, 20, 0.78);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0f1c; color: var(--ink); font-family: var(--font); }
body { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button, select, input { font-family: inherit; }
[hidden] { display: none !important; }

.stage { position: fixed; inset: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.in-race .stage { cursor: none; }
.shade { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(4, 6, 16, 0.78), rgba(4, 6, 16, 0.25) 45%, rgba(4, 6, 16, 0) 65%); }
.shade.full { background: rgba(4, 6, 16, 0.55); }

/* ------------------------------------------------------------------ HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.7); }
.h-left { position: absolute; left: calc(var(--u) * 36); top: calc(var(--u) * 14); display: flex; flex-direction: column; align-items: flex-start; }
.h-pos { display: flex; align-items: baseline; font-style: italic; }
.h-pos b { font-weight: 800; font-size: calc(var(--u) * 130); line-height: 0.95; color: #fff; }
.h-pos span { font-weight: 600; font-size: calc(var(--u) * 46); color: var(--muted); margin-left: calc(var(--u) * 6); }
.h-pos.p1 b { color: var(--gold); text-shadow: 0 0 calc(var(--u) * 18) rgba(255, 190, 40, 0.6), 0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(0, 0, 0, 0.7); }
.h-pos.pop b { animation: posPop 0.45s ease; }
@keyframes posPop { 30% { transform: scale(1.25); } }
.h-lap { margin: calc(var(--u) * 2) 0 calc(var(--u) * 14) calc(var(--u) * 6); font-weight: 600; font-style: italic; font-size: calc(var(--u) * 30); letter-spacing: 0.04em; color: var(--muted); }
.h-lap b { color: #fff; font-size: 1.25em; }
.h-lap.final b, .h-lap.final { color: var(--gold); }
.h-list { margin: 0 0 0 calc(var(--u) * 4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.h-list li { display: flex; align-items: center; gap: calc(var(--u) * 10); min-width: calc(var(--u) * 250); height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 12); background: linear-gradient(90deg, rgba(6, 10, 22, 0.72), rgba(6, 10, 22, 0.2)); font-weight: 600; font-size: calc(var(--u) * 19); transform: skewX(-12deg); }
.h-list li > * { transform: skewX(12deg); }
.h-list li i { font-style: normal; width: calc(var(--u) * 22); color: var(--muted); }
.h-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-list li em { font-style: normal; font-weight: 500; font-size: 0.85em; color: var(--muted); }
.h-list li.me { background: linear-gradient(90deg, rgba(255, 138, 31, 0.92), rgba(255, 138, 31, 0.25)); color: #fff; }
.h-list li.me i, .h-list li.me em { color: #fff; }
.h-list li.done span::after { content: " ⚑"; color: var(--gold); }
.h-times { position: absolute; right: calc(var(--u) * 36); top: calc(var(--u) * 22); display: grid; gap: calc(var(--u) * 2); text-align: right; font-style: italic; }
.h-times div { display: flex; align-items: baseline; justify-content: flex-end; gap: calc(var(--u) * 14); }
.h-times span { font-weight: 600; font-size: calc(var(--u) * 18); letter-spacing: 0.08em; color: var(--muted); }
.h-times b { font-weight: 700; font-size: calc(var(--u) * 34); font-variant-numeric: tabular-nums; min-width: calc(var(--u) * 170); }
.h-times .best b { color: var(--gold); font-size: calc(var(--u) * 28); }
/* diferencia con el de delante y el de detrás */
.h-gap { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin: calc(var(--u) * -8) 0 calc(var(--u) * 12) calc(var(--u) * 8); font-weight: 600; font-style: italic; font-size: calc(var(--u) * 20); font-variant-numeric: tabular-nums; }
.h-gap div { display: flex; gap: calc(var(--u) * 10); align-items: baseline; }
.h-gap div:empty { display: none; }
.h-gap b { min-width: calc(var(--u) * 64); text-align: right; font-weight: 700; }
.h-gap span { color: var(--muted); font-size: 0.85em; max-width: calc(var(--u) * 170); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-gap .ahead b { color: #ff9a7a; }
.h-gap .behind b { color: #7dffa8; }
.h-map { position: absolute; left: calc(var(--u) * 30); bottom: calc(var(--u) * 26); width: calc(var(--u) * 300); height: calc(var(--u) * 230); }

/* velocímetro y turbo abajo a la derecha */
.h-speed { position: absolute; right: calc(var(--u) * 28); bottom: calc(var(--u) * 22); width: calc(var(--u) * 240); height: calc(var(--u) * 240); }
.h-speed svg { width: 100%; height: 100%; overflow: visible; }
.b-disc { fill: rgba(2, 4, 12, 0.55); }
.b-ring { fill: none; stroke: #c26f22; stroke-width: 1.3; }
#b-ticks line { stroke: #c26f22; stroke-width: 1.3; stroke-linecap: round; }
#b-segs path { fill: rgba(255, 140, 20, 0.12); transition: fill 0.08s; }
#b-segs path.on { fill: #ff9a1c; }
#b-segs path.hot { fill: #ffd04a; }
.h-speed.boosting #b-segs path.on { fill: #ffbe3a; }
#b-segs { filter: drop-shadow(0 0 3px rgba(255, 130, 0, 0.75)); }
.b-edge { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.sp-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-style: italic; }
.sp-num b { font-weight: 800; font-size: calc(var(--u) * 66); line-height: 0.9; font-variant-numeric: tabular-nums; }
.sp-num span { font-weight: 600; font-size: calc(var(--u) * 15); letter-spacing: 0.16em; color: var(--muted); }
.sp-num i { margin-top: calc(var(--u) * 6); font-style: normal; font-weight: 700; font-size: calc(var(--u) * 22); color: #ffb43c; }
.h-speed.empty .sp-num i { color: #8a6a4a; }

/* barra de carga del derrape (azul → naranja) */
/* rebufo: rótulo sobre la barra del derrape y líneas de velocidad por los bordes */
.h-draft { position: absolute; left: 50%; bottom: calc(var(--u) * 140); transform: translateX(-50%) skewX(-12deg); padding: calc(var(--u) * 3) calc(var(--u) * 18); font-weight: 800; font-style: italic; font-size: calc(var(--u) * 24); letter-spacing: 0.12em; color: #bff4ff; background: rgba(6, 30, 50, 0.55); border-bottom: calc(var(--u) * 3) solid #46d8ff; opacity: 0; transition: opacity 0.2s; }
.h-draft.full { color: #fff; text-shadow: 0 0 calc(var(--u) * 12) #46d8ff; }
.draft-fx { position: absolute; inset: -5%; opacity: 0; will-change: opacity; background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(200, 240, 255, 0) 0deg 4deg, rgba(210, 245, 255, 0.32) 4.4deg 4.8deg, rgba(200, 240, 255, 0) 5.2deg 9deg); -webkit-mask: radial-gradient(ellipse at 50% 52%, transparent 38%, #000 75%); mask: radial-gradient(ellipse at 50% 52%, transparent 38%, #000 75%); }
.h-drift { position: absolute; left: 50%; bottom: calc(var(--u) * 120); width: calc(var(--u) * 220); height: calc(var(--u) * 10); transform: translateX(-50%) skewX(-20deg); background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.15s; }
.h-drift.on { opacity: 1; }
.h-drift i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #4aa8ff; box-shadow: 0 0 calc(var(--u) * 10) #4aa8ff; }
.h-drift.l1 i { background: #4aa8ff; }
.h-drift.l2 i { background: #ff8a1f; box-shadow: 0 0 calc(var(--u) * 12) #ff8a1f; }

/* textos grandes del centro */
.hud .center { position: absolute; left: 0; right: 0; top: 24%; text-align: center; }
.c-big { min-height: 1em; font-weight: 800; font-style: italic; font-size: calc(var(--u) * 130); line-height: 1; letter-spacing: 0.01em; color: #fff; text-shadow: 0 0 calc(var(--u) * 24) rgba(255, 140, 30, 0.75), 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(0, 0, 0, 0.6); }
.c-big:empty { display: none; }
.c-big.show { animation: bigIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.c-big.go { color: #5dff8a; text-shadow: 0 0 calc(var(--u) * 30) rgba(60, 255, 120, 0.8), 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(0, 0, 0, 0.6); }
.c-big.gold { color: var(--gold); }
.c-big.small { font-size: calc(var(--u) * 72); }
.c-sub { margin-top: calc(var(--u) * 8); font-weight: 600; font-style: italic; font-size: calc(var(--u) * 30); letter-spacing: 0.05em; color: #fff; }
@keyframes bigIn { from { opacity: 0; transform: scale(1.7); } }
.h-wrong { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); padding: calc(var(--u) * 10) calc(var(--u) * 34); background: rgba(190, 20, 20, 0.88); font-weight: 800; font-style: italic; font-size: calc(var(--u) * 46); text-align: center; white-space: nowrap; animation: blink 0.8s steps(2, end) infinite; }
.h-wrong span { display: block; font-weight: 500; font-style: normal; font-size: calc(var(--u) * 20); }
.h-toast { position: absolute; left: 50%; top: calc(var(--u) * 150); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.h-toast div { padding: calc(var(--u) * 6) calc(var(--u) * 24); background: rgba(6, 10, 22, 0.78); font-weight: 600; font-style: italic; font-size: calc(var(--u) * 26); white-space: nowrap; animation: toastIn 0.3s ease-out; transition: opacity 0.4s; }
.h-toast div.out { opacity: 0; }
.h-toast .good { color: #6dff9a; }
.h-toast .bad { color: #ff8a7a; }
.h-toast .gold { color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateY(calc(var(--u) * -14)); } }
@keyframes blink { 50% { opacity: 0.55; } }
.hint { position: absolute; left: 50%; bottom: calc(var(--u) * 150); transform: translateX(-50%); padding: calc(var(--u) * 8) calc(var(--u) * 20); background: rgba(6, 12, 28, 0.84); border: 1px solid rgba(255, 160, 60, 0.5); font-weight: 500; font-size: calc(var(--u) * 21); white-space: nowrap; }
.hud-pause { pointer-events: auto; position: absolute; left: 12px; top: 46%; width: 44px; height: 44px; border: 1px solid rgba(255, 170, 80, 0.6); background: rgba(6, 12, 28, 0.7); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; display: none; }
body.is-touch .hud-pause { display: block; }
.fps { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font: 700 12px/1.3 monospace; background: rgba(0, 0, 0, 0.5); padding: 4px 6px; white-space: pre; }

/* nombres sobre los coches */
.tags { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; padding: calc(var(--u) * 1) calc(var(--u) * 12); background: rgba(6, 10, 22, 0.7); border-left: calc(var(--u) * 4) solid var(--c, #fff); font-weight: 600; font-size: calc(var(--u) * 16); line-height: 1.35; color: #fff; white-space: nowrap; will-change: transform; }
.tag i { font-style: normal; color: var(--gold); margin-right: calc(var(--u) * 6); }

/* ------------------------------------------------------------------ pantallas */
.scr { position: fixed; inset: 0; z-index: 10; }
.panel-scr { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 16, 0.5); }
.box { position: relative; max-height: 100%; overflow: auto; padding: calc(var(--u) * 30) calc(var(--u) * 40); background: linear-gradient(160deg, rgba(14, 20, 40, 0.94), rgba(6, 9, 20, 0.94)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 60) rgba(0, 0, 0, 0.5); }
.box.wide { width: min(calc(var(--u) * 1180), 96vw); }
.box.narrow { width: min(calc(var(--u) * 520), 94vw); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.box::-webkit-scrollbar { width: 8px; }
.box::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
.ttl { margin: 0 0 calc(var(--u) * 20); font-weight: 800; font-style: italic; font-size: calc(var(--u) * 58); line-height: 1; letter-spacing: 0.01em; color: #fff; }
.ttl::after { content: ""; display: block; width: calc(var(--u) * 90); height: calc(var(--u) * 6); margin-top: calc(var(--u) * 10); background: linear-gradient(90deg, var(--hot), var(--gold)); transform: skewX(-20deg); }
.ttl.center { text-align: center; }
.ttl.center::after { margin-left: auto; margin-right: auto; }
.sub-ttl { margin: calc(var(--u) * 18) 0 calc(var(--u) * 10); font-weight: 700; font-style: italic; font-size: calc(var(--u) * 22); letter-spacing: 0.08em; color: var(--muted); }

/* botones en paralelogramo; el elegido, naranja */
.b { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 28); border: 0; background: none; color: #f2f6ff; font: italic 700 calc(var(--u) * 27) / 1 var(--font); letter-spacing: 0.03em; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; outline: none; }
.b::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-16deg); background: var(--btn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: background 0.08s, box-shadow 0.08s; }
.b.hl { color: #1a0a00; }
.b.hl::before { background: linear-gradient(180deg, #ffd27a 0%, #ff9a2a 55%, #ff7a12 100%); box-shadow: 0 0 calc(var(--u) * 18) rgba(255, 140, 30, 0.7); }
.b.small { width: auto; height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 30); font-size: calc(var(--u) * 21); }
.b.ghost::before { background: rgba(6, 9, 20, 0.45); }
.b.go { width: auto; padding: 0 calc(var(--u) * 54); font-size: calc(var(--u) * 30); }
.b:disabled { opacity: 0.4; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 16); align-items: center; margin-top: calc(var(--u) * 22); }
.menu-desc { margin: calc(var(--u) * 14) 0 0; min-height: 1.3em; font-weight: 500; font-size: calc(var(--u) * 21); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); white-space: normal; }
.info { margin: calc(var(--u) * 8) 0 0; font-size: calc(var(--u) * 15); color: var(--muted); }

/* menú principal */
.main-scr { display: flex; flex-direction: column; justify-content: center; padding: 0 calc(var(--u) * 90); }
.logo { display: flex; flex-direction: column; font-weight: 800; font-style: italic; line-height: 0.82; letter-spacing: -0.01em; margin-bottom: calc(var(--u) * 34); }
.logo span:first-child { font-size: calc(var(--u) * 118); color: #fff; text-shadow: 0 calc(var(--u) * 5) 0 #b8410a, 0 0 calc(var(--u) * 40) rgba(255, 120, 20, 0.45); }
.logo span:last-child { font-size: calc(var(--u) * 118); margin-left: calc(var(--u) * 70); background: linear-gradient(180deg, #ffe58a, #ff9a1c 60%, #ff5a0a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 calc(var(--u) * 5) 0 #7a1e00); }
.menu { width: calc(var(--u) * 480); display: flex; flex-direction: column; gap: calc(var(--u) * 9); }
.credits { position: absolute; left: calc(var(--u) * 90); bottom: calc(var(--u) * 18); margin: 0; font-size: calc(var(--u) * 14); color: rgba(255, 255, 255, 0.6); }

/* elegir circuito */
.tracks { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 18); }
.trk { position: relative; padding: calc(var(--u) * 12); background: rgba(255, 255, 255, 0.04); border: 2px solid rgba(255, 255, 255, 0.08); cursor: pointer; text-align: left; color: inherit; font: inherit; outline: none; }
.trk canvas { display: block; width: 100%; aspect-ratio: 16 / 10; }
.trk b { display: block; margin-top: calc(var(--u) * 6); font-weight: 800; font-style: italic; font-size: calc(var(--u) * 22); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk small { display: block; font-size: calc(var(--u) * 15); color: var(--muted); min-height: 3.9em; }
.trk em { display: block; margin-top: calc(var(--u) * 4); font-style: normal; font-size: calc(var(--u) * 15); color: var(--gold); }
.trk.sel { border-color: var(--hot); background: rgba(255, 138, 31, 0.12); }
.trk.hl { box-shadow: 0 0 0 calc(var(--u) * 3) #fff; }
.trk.locked { opacity: 0.45; }
.rows { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 420); align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 20); background: rgba(255, 255, 255, 0.04); cursor: pointer; outline: none; }
.row > span { font-weight: 600; font-size: calc(var(--u) * 23); }
.row .pick { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-style: italic; font-size: calc(var(--u) * 23); }
.row .pick i { font-style: normal; color: var(--hot); padding: 0 calc(var(--u) * 12); cursor: pointer; }
.row.hl { background: rgba(255, 138, 31, 0.2); box-shadow: inset calc(var(--u) * 5) 0 0 var(--hot); }
.row input[type=range] { width: 100%; accent-color: var(--hot); }

/* garaje */
.garage-scr { display: flex; align-items: center; justify-content: flex-start; padding: 16px calc(var(--u) * 60); }
.box.side { width: min(calc(var(--u) * 620), 94vw); }
.cars { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
.car-b { height: calc(var(--u) * 58); justify-content: center; text-align: center; }
.car-b.sel:not(.hl)::before { background: linear-gradient(180deg, #2c3550, #1b2238); box-shadow: inset 0 0 0 2px var(--hot); }
.stats { margin-top: calc(var(--u) * 16); display: grid; gap: calc(var(--u) * 8); }
.stat { display: grid; grid-template-columns: calc(var(--u) * 150) 1fr; align-items: center; gap: calc(var(--u) * 12); font-weight: 600; font-size: calc(var(--u) * 18); color: var(--muted); }
.stat i { position: relative; height: calc(var(--u) * 10); background: rgba(255, 255, 255, 0.1); transform: skewX(-20deg); }
.stat i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: linear-gradient(90deg, var(--hot), var(--gold)); }
.car-desc { margin: calc(var(--u) * 6) 0 0; font-size: calc(var(--u) * 18); color: #fff; }
.paints { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 16); }
.paint { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border: 2px solid rgba(255, 255, 255, 0.2); background: var(--c); cursor: pointer; outline: none; padding: 0; font: 600 calc(var(--u) * 11) / 1 var(--font); color: #fff; }
.paint.orig { background: linear-gradient(135deg, #e32 0 40%, #f7c218 40% 60%, #222 60%); }
.paint.sel { border-color: #fff; box-shadow: 0 0 0 calc(var(--u) * 3) var(--hot); }
.paint.hl { transform: scale(1.12); border-color: var(--gold); }

/* récords y resultados */
.records, .res { display: grid; gap: calc(var(--u) * 6); }
.rec-row, .res-row { display: grid; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 18); background: rgba(255, 255, 255, 0.04); font-weight: 600; font-size: calc(var(--u) * 21); }
.rec-row { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.res-row { grid-template-columns: calc(var(--u) * 60) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) calc(var(--u) * 80); }
.rec-row.head, .res-row.head { min-height: calc(var(--u) * 30); background: none; font-size: calc(var(--u) * 15); letter-spacing: 0.08em; color: var(--muted); }
.res-row .pl { font-weight: 800; font-style: italic; font-size: 1.3em; }
.res-row.me { background: linear-gradient(90deg, rgba(255, 138, 31, 0.5), rgba(255, 138, 31, 0.12)); }
.res-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-row small { color: var(--muted); font-weight: 500; }
.res-row .pts { color: var(--gold); text-align: right; }
.res-row .rec { color: var(--gold); font-size: 0.8em; margin-left: calc(var(--u) * 8); }
.res-sub { margin: calc(var(--u) * -8) 0 calc(var(--u) * 16); font-weight: 600; font-size: calc(var(--u) * 22); color: var(--muted); }
.res-sub b { color: var(--gold); }
.keys { margin-top: calc(var(--u) * 18); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 6) calc(var(--u) * 26); font-size: calc(var(--u) * 18); color: var(--muted); }
.keys div { display: flex; justify-content: space-between; gap: calc(var(--u) * 10); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: calc(var(--u) * 4) 0; }
.keys kbd { font-family: var(--font); font-weight: 700; color: #fff; }

.toast { position: fixed; left: 50%; bottom: 8%; z-index: 30; transform: translateX(-50%); padding: 10px 22px; background: rgba(8, 12, 26, 0.92); border: 1px solid rgba(255, 160, 60, 0.6); font-weight: 600; font-size: 17px; }

/* carga */
.loading { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #1c2442, #070a14 70%); }
.loading .logo { align-items: center; }
.loading .logo span:last-child { margin-left: 0; }
.ld-tip { max-width: 640px; margin: 0 16px 26px; min-height: 2.6em; text-align: center; font-size: calc(var(--u) * 22); color: #dfe6f5; }
.ld-bar { width: min(calc(var(--u) * 560), 80vw); height: 6px; background: rgba(255, 255, 255, 0.1); transform: skewX(-20deg); }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hot), var(--gold)); transition: width 0.25s; }
.ld-msg { margin-top: 14px; font-weight: 600; letter-spacing: 0.1em; font-size: calc(var(--u) * 17); color: var(--muted); }

/* táctil: palanca a la izquierda, botones a la derecha */
.touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.joy { pointer-events: auto; position: absolute; left: 4vw; bottom: 6vh; width: 34vmin; height: 34vmin; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.25); touch-action: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.tb { pointer-events: auto; position: absolute; width: 17vmin; height: 17vmin; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(8, 12, 26, 0.5); color: #fff; font: 700 2.4vmin var(--font); touch-action: none; }
.tb.on { background: rgba(255, 138, 31, 0.75); }
.tb-boost { right: 4vw; bottom: 22vh; border-color: #ffb43c; }
.tb-drift { right: 19vw; bottom: 8vh; border-color: #4aa8ff; }
.tb-brake { right: 4vw; bottom: 2.5vh; width: 13vmin; height: 13vmin; }
.rotate { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #070a14; font-size: 22px; }

/* táctil: los mandos ocupan las esquinas de abajo; minimapa arriba y velocímetro bajo los tiempos */
body.is-touch .h-map { left: 50%; bottom: auto; top: 6px; transform: translateX(-50%); width: 28vmin; height: 21.5vmin; }
body.is-touch .h-speed { top: calc(var(--u) * 150 + 14px); bottom: auto; right: 10px; width: 24vmin; height: 24vmin; }
body.is-touch .h-list { display: none; }
body.is-touch .h-drift { bottom: 34vh; }
body.is-touch .h-draft { bottom: calc(34vh + 24px); }

/* pantallas pequeñas */
@media (max-width: 760px) {
  .tracks { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .trk { padding: 5px; }
  .trk b { font-size: 11px; }
  .trk small { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .main-scr { padding: 0 24px; }
  .credits { left: 24px; right: 24px; }
  .res-row { grid-template-columns: 30px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 0 40px; }
  .res-row > :nth-child(5) { display: none; }
}
@media (max-height: 520px) {
  .h-list { display: none; }
  .h-gap { font-size: 12px; }
}

/* en línea: lista de salas, código y sala de espera */
.room-list { display: flex; flex-direction: column; gap: calc(var(--u) * 8); max-height: 52vh; overflow: auto; }
.b.room { gap: calc(var(--u) * 14); padding-left: calc(var(--u) * 12); }
.b.room .room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b.room small { font-style: normal; font-weight: 500; font-size: calc(var(--u) * 16); opacity: 0.8; }
.b.room em { font-style: normal; font-size: calc(var(--u) * 20); color: #7dff6a; }
.b.room.hl em { color: #1f6a10; }
.av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #2b3f66, #121c33); color: #fff; font-style: normal; font-weight: 700; font-size: calc(var(--u) * 16); }
.av svg { width: 86%; height: 86%; }
.code-in { display: block; width: 100%; height: calc(var(--u) * 62); padding: 0 calc(var(--u) * 18); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(3, 6, 14, 0.8); color: #fff; font: 700 calc(var(--u) * 38) / 1 var(--font); letter-spacing: 0.35em; text-align: center; text-transform: uppercase; outline: none; }
.code-in::placeholder { color: #5a6380; letter-spacing: 0.12em; font-size: 0.6em; }
.code-in:focus { border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 170, 40, 0.5); }
.code-big { width: fit-content; margin: calc(var(--u) * 6) 0 calc(var(--u) * 14); padding: calc(var(--u) * 6) calc(var(--u) * 24); background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 200, 80, 0.5); font-weight: 800; font-size: calc(var(--u) * 46); letter-spacing: 0.3em; color: var(--gold); user-select: all; -webkit-user-select: all; }
.wait-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.wl-row { display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 14); background: rgba(255, 255, 255, 0.05); border-left: calc(var(--u) * 5) solid var(--c, #e8e8e8); }
.wl-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-style: italic; font-size: calc(var(--u) * 22); color: #fff; }
.wl-row small { font-size: calc(var(--u) * 14); letter-spacing: 0.05em; color: var(--muted); }
.wl-row.empty { opacity: 0.45; border-left-color: rgba(255, 255, 255, 0.2); }
.wait-line { display: flex; align-items: center; gap: calc(var(--u) * 12); margin: calc(var(--u) * 16) 0 0; font-weight: 600; font-size: calc(var(--u) * 19); color: #fff; }
.wait-line .spin { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border: calc(var(--u) * 3) solid rgba(255, 255, 255, 0.2); border-top-color: var(--gold); border-radius: 50%; animation: rrSpin 0.9s linear infinite; }
@keyframes rrSpin { to { transform: rotate(360deg); } }
.res-row .nm small { margin-left: calc(var(--u) * 8); font-style: normal; font-size: calc(var(--u) * 13); letter-spacing: 0.06em; color: var(--muted); }
.res-row .nm small.hum { color: #7dd3ff; }
@media (max-width: 700px) { .wait-list { grid-template-columns: 1fr; } }