/* ═══════════════════════════════════════════════════════════════════════
   LA CARRERA · el tablero de mandos y el garaje
   ═══════════════════════════════════════════════════════════════════════
   Va en hoja aparte y no dentro del <style> de la página por una razón
   práctica: es lo único que cambia cuando se retoca el motor 3D, y con
   nombre de archivo con fecha se puede sustituir sin tocar el HTML ni
   preocuparse de la caché.

   Manda sobre el <style> de la página (viene después en el <head>), y lo
   que hace es reordenar el HUD: en vez de una columna flexible, cada
   pieza va colocada donde tiene que ir, respetando las zonas seguras del
   aparato (la muesca, la barra de inicio, los bordes redondeados).

   DOS PALETAS Y POR QUÉ. La pista se pinta con SU propia paleta —es un
   circuito a pleno sol, y de noche sigue siendo un circuito a pleno sol—
   así que los rótulos van sobre placas oscuras traslúcidas, que se leen
   igual encima de la hierba, del asfalto y del agua. El garaje, en
   cambio, es una pantalla más de la casa: va con los tokens, y de noche
   se pone de noche.

   Los tamaños de letra van todos por `--sb-tx`: quien tiene el texto en
   «grande» en Ajustes lo tiene grande también aquí. Un tamaño en píxeles
   pelados sería una pantalla de la casa que no obedece a la casa.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La pista ────────────────────────────────────────────────────────── */
.pista{height:100dvh;overflow:hidden;isolation:isolate;background:#8FB6B2}
#mundo3d{z-index:0;display:none}
#mundo{z-index:1;pointer-events:none}
.pHud{z-index:2;padding:0 !important;display:block !important}

/* ── Arriba: quién corre, los números y los cuatro botones ───────────── */
.pTop{position:absolute;gap:8px;align-items:center;
  top:max(12px,env(safe-area-inset-top));
  left:max(16px,env(safe-area-inset-left));
  right:max(16px,env(safe-area-inset-right))}
.pQuien,.pDatos div,.pIcono,.pVel{background:rgba(20,42,45,.82);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 18px rgba(16,40,42,.07);
  backdrop-filter:blur(8px)}
.pQuien{padding:8px 13px}
.pQuien b{font-size:calc(14px * var(--sb-tx, 1));max-width:18vw}
.pDatos div{padding:7px 12px;min-width:64px;border-radius:12px}
.pDatos span{font-size:calc(9px * var(--sb-tx, 1))}
.pDatos strong{font-size:calc(19px * var(--sb-tx, 1));font-weight:750;letter-spacing:.2px}
.pIcono{width:42px;height:42px;font-size:calc(14px * var(--sb-tx, 1))}
/* El `display:grid` de .pIcono le gana al `[hidden]` del navegador, así
   que sin esta línea el botón de cámara se seguiría viendo cuando no hay
   3D que enseñar. */
.pIcono[hidden]{display:none !important}
.pIcono.activo{background:#E2B16B;color:#172A2D}
.pIcono:focus-visible,.pPalanca:focus-visible,.pPedalera button:focus-visible{
  outline:3px solid #fff;outline-offset:3px}

/* ── Abajo: el velocímetro y los mandos ──────────────────────────────── */
.pAbajo{position:absolute;inset:0;margin:0;display:block !important;pointer-events:none}
.pVel{position:absolute;bottom:26px;min-width:150px;max-width:240px;padding:10px 14px;
  border-radius:16px;left:max(20px,env(safe-area-inset-left))}
.pVel strong{font-size:calc(30px * var(--sb-tx, 1));line-height:1}
.pVel small{font-size:calc(9px * var(--sb-tx, 1));letter-spacing:.07em;line-height:1.5}
.pVel span{font-size:calc(10px * var(--sb-tx, 1))}
.pBarra{height:4px;margin:8px 0 5px}

/* Los mandos en pantalla sólo salen donde hay dedos. En un ordenador
   estorban y encima tapan pista: allí se conduce con el teclado, que es
   lo que dice la tira de abajo. */
.pMandos{position:absolute;display:none !important;justify-content:space-between;
  align-items:flex-end;
  left:max(20px,env(safe-area-inset-left));
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom))}
body.tactil:not(.apaisado) .pMandos{display:flex !important}
body.tactil .pVel{bottom:112px;min-width:128px;left:max(18px,env(safe-area-inset-left))}
body.tactil .pTeclas{display:none !important}
.pGiro{gap:7px}
.pGiro button{width:55px;height:60px}
.pPedales{gap:7px}
.pPedales button{width:59px;height:60px;font-size:calc(10px * var(--sb-tx, 1))}
.pPedales button small{font-size:calc(7px * var(--sb-tx, 1))}
.pPedales .gas{background:rgba(169,220,183,.92)}
.pPedales .gas.pulsada{background:rgba(169,220,183,1)}

/* ── El móvil tumbado: palanca a la izquierda, pedales a la derecha ──── */
body.apaisado .pPalanca{position:absolute !important;width:126px;height:126px;margin:0;
  left:max(25px,calc(env(safe-area-inset-left) + 12px));
  bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));
  border:1px solid rgba(255,255,255,.4);
  background:radial-gradient(circle,rgba(230,243,241,.08),rgba(32,61,72,.4));
  box-shadow:inset 0 0 0 13px rgba(255,255,255,.03);backdrop-filter:blur(5px);
  touch-action:none;user-select:none;-webkit-user-select:none}
body.apaisado .pBola{width:53px;height:53px;border:1px solid #fff;
  background:linear-gradient(145deg,#FBFCF0,#D7E2D7);
  box-shadow:0 6px 15px rgba(12,39,57,.27);transition:none}
body.apaisado .pPedalera{position:absolute !important;left:auto !important;margin:0;
  right:max(24px,calc(env(safe-area-inset-right) + 12px));
  bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));
  display:grid !important;grid-template-columns:74px 86px;grid-template-rows:55px 62px;
  gap:10px;align-items:stretch}
body.apaisado .pPedalera button{width:auto !important;height:auto !important;min-height:0;
  border:1px solid rgba(255,255,255,.33);border-radius:17px;
  font-size:calc(11px * var(--sb-tx, 1));box-shadow:0 5px 18px rgba(23,47,50,.15);
  backdrop-filter:blur(6px)}
body.apaisado .pPedalera .gas{grid-column:2;grid-row:1/3;border-radius:23px;
  font-size:calc(12px * var(--sb-tx, 1));background:linear-gradient(160deg,#BEDEC2,#8DBB9C)}
body.apaisado .pPedalera .derrape{grid-column:1;grid-row:1;background:#E8AA7A}
body.apaisado .pPedalera button[data-tecla=freno]{grid-column:1;grid-row:2;background:#F4F0DE}
body.apaisado .pVel{bottom:26px;left:50%;transform:translateX(-50%);
  min-width:148px;max-width:220px;text-align:center;padding:9px 14px}
.pPedalera button.pulsada,.pMandos button.pulsada{filter:brightness(1.14);
  box-shadow:0 0 0 2px rgba(255,255,255,.8);transform:scale(.96)}

/* ── Los avisos del centro ───────────────────────────────────────────── */
.pVolver{position:absolute;top:76px;left:50%;transform:translateX(-50%);animation:none;
  white-space:nowrap;padding:10px 17px;font-size:calc(13px * var(--sb-tx, 1))}
.pVolver small{font-size:calc(11px * var(--sb-tx, 1))}
.pCaza{position:absolute;top:76px;left:50%;transform:translateX(-50%);max-width:70vw}
.pCaza i{width:25px;height:29px;font-size:calc(14px * var(--sb-tx, 1))}
.pNota,.pContra{position:absolute;top:110px;left:50%;transform:translateX(-50%);
  max-width:70vw;white-space:nowrap;padding:9px 15px;animation:none;
  font-size:calc(12px * var(--sb-tx, 1))}
.pNota{box-shadow:0 4px 18px rgba(16,43,52,.19)}
.pContra{top:78px}
.pCuenta{z-index:3;font-size:calc(90px * var(--sb-tx, 1));
  text-shadow:0 5px 28px rgba(23,55,59,.38)}
.pVelo{z-index:5}
.pVelo[hidden]{display:none !important}
.pTeclas{z-index:2;bottom:16px;font-size:calc(11px * var(--sb-tx, 1))}
.pHoja{max-height:90dvh;overflow:auto}

@media (pointer:fine) and (min-width:820px){.pTeclas{display:block}.pVel{bottom:58px}}

/* De pie y en un móvil estrecho: los números bajan a una segunda fila
   para que el nombre de quien corre no se quede en tres letras. */
@media (max-width:600px) and (orientation:portrait){
  .pTop{flex-wrap:wrap;gap:6px;left:13px;right:13px;top:max(12px,env(safe-area-inset-top))}
  .pQuien{margin-right:auto;padding:7px 11px}
  .pQuien b{max-width:38vw}
  .pDatos{position:absolute;top:54px;left:0;margin:0;gap:5px}
  .pDatos div{min-width:62px;padding:6px 10px}
  .pDatos strong{font-size:calc(17px * var(--sb-tx, 1))}
  .pIcono{width:40px;height:40px;font-size:calc(13px * var(--sb-tx, 1))}
  .pCaza{top:126px;max-width:92vw}
  .pNota{top:162px}
  .pContra{top:126px}
  .pVolver{top:125px}
  .pVel{max-width:190px}
  .pVel strong{font-size:calc(26px * var(--sb-tx, 1))}
}

/* Tumbado y con poca altura, el HUD se encoge para dejar pista. */
@media (orientation:landscape) and (max-height:420px){
  .pTop{top:max(8px,env(safe-area-inset-top))}
  .pQuien{padding:7px 11px}
  .pQuien b{font-size:calc(12px * var(--sb-tx, 1))}
  .pDatos div{padding:5px 9px;min-width:54px}
  .pDatos strong{font-size:calc(16px * var(--sb-tx, 1))}
  .pIcono{width:35px;height:35px}
  .pCaza{top:57px}
  .pCaza i{width:21px;height:25px}
  .pNota{top:92px}
  .pContra,.pVolver{top:61px}
  .pVel strong{font-size:calc(25px * var(--sb-tx, 1))}
  body.apaisado .pPalanca{width:112px;height:112px;bottom:max(16px,env(safe-area-inset-bottom))}
  body.apaisado .pPedalera{grid-template-columns:68px 80px;grid-template-rows:48px 55px;
    bottom:max(16px,env(safe-area-inset-bottom))}
  body.apaisado .pVel{bottom:18px;min-width:135px}
}

@media (prefers-reduced-motion:reduce){
  .pNota,.pCuenta,.pVolver,.pContra{animation:none !important}
  .pPedalera button,.pMandos button{transition:none}
}

/* ═══ EL GARAJE ═══════════════════════════════════════════════════════
   Esto ya no es pista: es una pantalla de la casa, así que va con los
   tokens y se pone de noche cuando la casa se pone de noche. */
.raceGarage{border:1.5px solid var(--sb-linea);border-radius:var(--sb-r-lg);
  background:var(--sb-superficie);color:var(--sb-tinta);padding:22px 20px;
  width:540px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 28px);
  overflow:auto;font:inherit;box-shadow:var(--sb-sombra-alta)}
.raceGarage::backdrop{background:rgba(20,23,21,.6);backdrop-filter:blur(6px)}
.rgHeader{display:flex;justify-content:space-between;align-items:center;gap:20px}
.rgHeader h2{margin:0;font-size:calc(22px * var(--sb-tx, 1));font-weight:800;letter-spacing:-.4px}
.rgClose{border:none;cursor:pointer;width:34px;height:34px;border-radius:50%;
  background:var(--sb-fondo-suave);color:var(--sb-tinta);
  font:inherit;font-size:calc(21px * var(--sb-tx, 1));line-height:1}
.rgIntro{margin:10px 0 15px;font-size:calc(13px * var(--sb-tx, 1));font-weight:600;
  line-height:1.5;color:var(--sb-tinta-suave)}
.raceGarage select{font:inherit;font-size:calc(14px * var(--sb-tx, 1));font-weight:600;
  border:1.5px solid var(--sb-linea);border-radius:var(--sb-r-sm);
  background:var(--sb-fondo);color:var(--sb-tinta);padding:10px;width:100%}
.rgPreview{display:block !important;position:static !important;
  width:100% !important;height:240px !important;border-radius:var(--sb-r-md);margin:15px 0;
  background:#8FB6B2}
.rgFields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.rgField label{display:block;margin-bottom:8px;font-size:calc(13px * var(--sb-tx, 1));font-weight:700}
.rgField:has(.rgSwatches){grid-column:1/-1}
.rgSwatches{display:flex;gap:11px;flex-wrap:wrap}
.rgSwatches button{width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:3px solid var(--sb-superficie)}
.rgSwatches button.on{outline:2px solid var(--sb-tinta)}
.rgSave{width:100%;border:1.5px solid var(--sb-acento);border-radius:999px;padding:13px;
  background:var(--sb-acento);color:var(--sb-fondo);cursor:pointer;
  font:inherit;font-size:calc(15px * var(--sb-tx, 1));font-weight:700}
.rgSave:active{transform:scale(.98)}
.rgSave:disabled{opacity:.5;cursor:default}
.rgStatus{min-height:20px;font-size:calc(12px * var(--sb-tx, 1));font-weight:600;
  line-height:1.5;color:var(--sb-tinta-suave)}
.raceGarage button:focus-visible,.raceGarage select:focus-visible{
  outline:3px solid var(--sb-acento);outline-offset:3px}

@media (max-height:480px){
  .raceGarage{width:650px}
  .rgPreview{height:170px !important}
  .rgField:has(.rgSwatches){grid-column:auto}
}
