/* Coches de madera · la pantalla. Lo que va encima del lienzo son piezas del
   sistema —.hud-juego, .marcador, .medidor, .badge, .chip, .vidrio, .premio—;
   aquí solo se colocan, más los mandos táctiles, que no son un componente:
   son la forma de esta pantalla en concreto. */

html,body.coches{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
/* Ni se selecciona texto ni se hace zoom por muchos toques o clics seguidos. */
body.coches,body.coches *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body.coches button,body.coches [role="button"]{touch-action:manipulation}
body.coches{
  background:#8FB8D8;            /* el cielo, para que no parpadee blanco al cargar */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:none;
}

#pista{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ─── el HUD ─────────────────────────────────────────────────
   Letras de juego —blancas, con borde y sombra de tinta— directo sobre
   la escena: se leen sobre el cielo y sobre el empedrado sin tapar nada. */
.coches-hud{--tinta:#2b2129;--hud-borde:2px}
.coches-hud .coches-ruta__titulo,.coches-puesto,.coches-vel,.coches-tiempo{
  font-family:var(--mal-display);font-weight:800;color:#fff;margin:0;line-height:1;
  -webkit-text-stroke:var(--hud-borde) var(--tinta);paint-order:stroke fill;
  text-shadow:0 3px 0 var(--tinta)}
.coches-botones{gap:var(--mal-e2)}
.coches-botones .btn{background:var(--mal-surface)}

/* El puesto, grande; el tiempo debajo. */
.coches-puesto{display:flex;flex-direction:column;align-items:flex-end;gap:var(--mal-e1);text-align:right}
.coches-puesto__n{margin:0;font-size:clamp(2.6rem, 1.6rem + 4vw, 4.4rem);letter-spacing:-.02em;--hud-borde:6px;text-shadow:0 4px 0 var(--tinta)}
.coches-de{font-size:.42em;margin-left:.06em}
.coches-hud .coches-tiempo{font-family:var(--mal-mono);font-weight:700;font-size:clamp(.85rem, .75rem + .5vw, 1.1rem);
  font-variant-numeric:tabular-nums;-webkit-text-stroke:0;text-shadow:none;
  padding:3px 10px;border-radius:99px;background:var(--tinta);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.coches-puesto.is-sube .coches-puesto__n{animation:coches-sube .45s var(--mal-ease)}
@keyframes coches-sube{40%{transform:scale(1.25)}}

/* La carrera en una línea: cada coche es un punto con su color y su
   número; el tuyo, más grande y con aro. */
.coches-ruta{flex:0 1 min(44vw, 440px);display:grid;gap:10px;justify-items:center;padding-top:4px}
.coches-hud .coches-ruta__titulo{font-family:var(--mal-texto);font-weight:800;letter-spacing:.02em;font-size:clamp(.85rem, .75rem + .4vw, 1.05rem);--hud-borde:3px;text-shadow:0 2px 0 var(--tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.coches-ruta__carril{position:relative;width:calc(100% - 28px);height:8px;margin:8px 14px;border-radius:99px;
  background:rgba(255,255,255,.85);border:2px solid var(--tinta);box-shadow:0 2px 0 var(--tinta)}
/* La meta: un cuadro de ajedrez al final. */
.coches-ruta__carril::after{content:"";position:absolute;right:-12px;top:50%;width:16px;height:22px;transform:translateY(-50%);
  border:2px solid var(--tinta);border-radius:3px;
  background:conic-gradient(var(--tinta) 25%, #fff 0 50%, var(--tinta) 0 75%, #fff 0) 0 0/8px 8px}
.coches-punto{position:absolute;top:50%;left:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  display:grid;place-items:center;background:var(--c);border:2px solid var(--tinta);
  font:800 10px/1 var(--mal-mono);color:#fff}
.coches-punto.es-tu{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:12px;z-index:2;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--tinta)}

/* Abajo, al centro: la velocidad, el empujador y la colada. */
.coches .hud-juego__abajo{justify-content:center}
.coches-tablero{display:flex;flex-direction:column;align-items:center;gap:var(--mal-e2)}
.coches-vel{font-size:clamp(2.4rem, 1.6rem + 3vw, 3.6rem);font-variant-numeric:tabular-nums;--hud-borde:6px;text-shadow:0 4px 0 var(--tinta)}
.coches-vel small{font-family:var(--mal-mono);font-size:max(.3em, 12px);margin-left:.3em;letter-spacing:.06em;text-transform:uppercase;--hud-borde:3px;text-shadow:0 2px 0 var(--tinta)}
.coches-tablero__fila{display:flex;gap:var(--mal-e2);align-items:center}
.coches-empujador,.coches-turbo{display:inline-flex;align-items:center;gap:.35em;padding:4px 12px;border-radius:99px;
  font:700 var(--mal-t-micro)/1.2 var(--mal-mono);letter-spacing:.06em;text-transform:uppercase;
  border:2px solid var(--tinta,#2b2129);box-shadow:0 2px 0 var(--tinta,#2b2129);background:#fff;color:var(--tinta,#2b2129)}
/* El empujador, de un vistazo: verde si empuja, blanco a bordo, rojo en el piso. */
.coches-empujador[data-estado="empujando"]{background:var(--mal-verde);color:#fff}
.coches-empujador[data-estado="piso"]{background:#D6382B;color:#fff;animation:coches-latir .35s ease-in-out infinite alternate}
.coches-turbo{background:#6B2D7B;color:#fff;animation:coches-latir .5s ease-in-out infinite alternate}
.coches-turbo[hidden]{display:none}
@keyframes coches-latir{to{transform:scale(1.08)}}
.boton-juego:disabled{opacity:.6;cursor:progress}

/* ─── los mandos táctiles ──────────────────────────────────────
   Dirección a la izquierda, pies a la derecha, como un mando. Cada
   botón responde a pointerdown/up, no a click: hay que poder mantener
   «derecha» y «empuja» a la vez con dos pulgares. */
.coches-mandos{
  position:fixed;left:0;right:0;bottom:0;z-index:25;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 calc(env(safe-area-inset-right, 0px) + var(--mal-e4))
          calc(env(safe-area-inset-bottom, 0px) + var(--mal-e4))
          calc(env(safe-area-inset-left, 0px) + var(--mal-e4));
}
.coches-mando{
  display:grid;place-items:center;padding:0;border-radius:50%;
  font:700 var(--mal-t-micro)/1 var(--mal-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mal-on-surface);background:color-mix(in srgb, var(--mal-surface) 70%, transparent);
  border:2px solid var(--mal-on-surface);box-shadow:0 4px 0 rgba(var(--ref-borde-rgb), .55);
  touch-action:none;-webkit-tap-highlight-color:transparent;pointer-events:auto;
}
.coches-mando.is-on{transform:translateY(3px);box-shadow:0 1px 0 rgba(var(--ref-borde-rgb), .55);background:var(--mal-surface)}
/* Dirección: cada mitad de la pantalla es un mando. El dibujo es solo la
   pista de dónde tocar; todo el costado responde. */
.coches-zona{
  position:fixed;top:24%;bottom:0;width:50%;border-radius:0;border:0;box-shadow:none;background:transparent;
  align-content:end;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--mal-e4));
  color:rgba(255,255,255,.75);transition:background .08s;
}
.coches-zona--izq{left:0;justify-items:start;padding-left:calc(env(safe-area-inset-left, 0px) + var(--mal-e5))}
.coches-zona--der{right:0;justify-items:end;padding-right:calc(env(safe-area-inset-right, 0px) + var(--mal-e5))}
.coches-zona .icono{width:56px;height:56px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));opacity:.8}
.coches-zona.is-on{transform:none;box-shadow:none;background:linear-gradient(to top, rgba(255,255,255,.2), transparent 70%)}
.coches-zona.is-on .icono{opacity:1}
/* Freno: un botón en el centro de abajo, por encima de las zonas. */
.coches-mando--freno{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + var(--mal-e4));transform:translateX(-50%);
  width:clamp(64px, 17vw, 80px);height:clamp(64px, 17vw, 80px);z-index:2;
}
.coches-mando--freno.is-on{transform:translateX(-50%) translateY(3px)}
/* Con mandos, el tablero queda entre los dos pulgares, a su altura. */
.coches.con-mandos .hud-juego__abajo{padding-bottom:clamp(70px, 20vw, 90px)}

/* ─── la cuenta atrás y los avisos ─────────────────────────────
   Lo único que sale en el centro, y solo un segundo: es lo que hay
   que mirar en ese momento. */
.coches-cuenta,.coches-aviso{
  position:fixed;left:0;right:0;z-index:35;margin:0;text-align:center;pointer-events:none;
  font-family:var(--mal-display);font-weight:800;color:#fff;
  -webkit-text-stroke:2px #2b2129;paint-order:stroke fill;
  text-shadow:0 5px 0 #2b2129;
}
.coches-cuenta{top:28%;font-size:clamp(4rem, 18vw, 9rem);line-height:1}
.coches-cuenta.is-sale{animation:coches-sale .9s var(--mal-ease) both}
.coches-aviso{top:16%;font-size:clamp(1.3rem, 5vw, 2.2rem);opacity:0;transition:opacity .25s}
.coches-aviso.is-on{opacity:1}
@keyframes coches-sale{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.08);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.25);opacity:0}}

/* ─── portada y pausa ─────────────────────────────────────── */
.coches-capa{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:var(--mal-e4);
  background:linear-gradient(to bottom, rgba(20,16,24,.05), rgba(20,16,24,.45))}
.coches-capa[hidden]{display:none}
.coches-panel{width:min(100%, 400px);padding:var(--mal-e5);max-height:calc(100dvh - 2rem);overflow:auto;
  display:flex;flex-direction:column;gap:var(--mal-e4)}
.coches-opciones{display:grid;gap:var(--mal-e2)}
.coches-banner{margin:0}

/* ─── la pantalla de título ───────────────────────────────────
   El logo en el centro, «pulsa start» parpadeando debajo y el pie
   abajo del todo, como en la consola. */
.coches-capa--titulo{grid-template-rows:1fr auto auto;place-items:center;gap:var(--mal-e4);cursor:pointer;
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--mal-e4))}
.coches-logo{text-align:center;align-self:end;display:grid;gap:var(--mal-e1)}
.coches-logo__nombre{margin:0;font-size:clamp(2.6rem, 1.5rem + 7vw, 6.5rem);line-height:.92}
.coches-logo__nombre span{display:block}
.coches-logo__arriba,.coches-logo__abajo{margin:0}
.coches-start{margin:0;text-align:center}
.coches-start.is-lista span{animation:coches-parpadeo 1.1s steps(2, start) infinite}
@keyframes coches-parpadeo{to{visibility:hidden}}
.coches-pie-titulo{margin:0;font-size:var(--mal-t-micro);opacity:.8}

/* En la contrarreloj no hay puesto. */
.sin-rivales .coches-puesto__n{display:none}

/* Opciones y créditos */
.coches-ajustes{display:flex;flex-wrap:wrap;gap:var(--mal-e2)}
.coches-ajustes .chip[aria-pressed="true"]{background:var(--mal-primary);border-color:var(--mal-primary);color:var(--mal-on-primary)}
.coches-ajustes .chip::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.35;margin-right:.3em}
.coches-ajustes .chip[aria-pressed="true"]::before{opacity:1}
.coches-creditos-lista{display:grid;gap:var(--mal-e2);margin:0;font-size:var(--mal-t-caption)}
.coches-creditos-lista div{display:grid;grid-template-columns:9em 1fr;gap:var(--mal-e2)}
.coches-creditos-lista dt{font-family:var(--mal-mono);text-transform:uppercase;letter-spacing:.06em;font-size:var(--mal-t-micro);color:var(--mal-on-surface-2)}
.coches-creditos-lista dd{margin:0}
/* Modo píxel: el lienzo se escala sin suavizar. */
body.pixel #pista{image-rendering:pixelated;image-rendering:crisp-edges}
/* La demo */
.coches-demo{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 18%);transform:translateX(-50%);z-index:26;margin:0;
  font-family:var(--mal-display);font-weight:800;font-size:1.4rem;color:#fff;text-align:center;pointer-events:none;
  -webkit-text-stroke:2px #2b2129;paint-order:stroke fill;text-shadow:0 4px 0 #2b2129;animation:coches-parpadeo 1.2s steps(2, start) infinite}
.coches-demo small{display:block;font-size:.55em}
.coches-demo[hidden]{display:none}
/* En el teléfono de lado, el menú en dos columnas. */
@media (orientation:landscape) and (max-height:600px){
  .coches-opciones{grid-template-columns:1fr 1fr}
  .coches-opciones .btn{font-size:.95rem;padding-inline:var(--mal-e3);min-height:46px}
  .coches-opciones .btn:first-child{grid-column:1 / -1}
  .coches-opciones .btn:nth-child(2){grid-column:1 / -1}
}

/* El álbum: una cuadrícula de estampitas; las que faltan, en sombra. */
.coches-panel--ancho{width:min(100%, 640px)}
.coches-album{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));gap:var(--mal-e3)}
.coches-cromo{display:grid;gap:4px;justify-items:center;text-align:center}
.coches-cromo canvas{width:110px;height:150px;border-radius:8px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.coches-cromo b{font-size:var(--mal-t-caption)}
.coches-cromo .caption{margin:0;font-size:var(--mal-t-mini);line-height:1.3}
.coches-cromo.is-cerrada canvas{opacity:.8}

/* El mapa de la pista, junto a su descripción. */
.coches-pista{display:grid;grid-template-columns:120px 1fr;gap:var(--mal-e3);align-items:center}
.coches-mapa{width:120px;height:84px;display:block}
.coches-pista .caption{margin:0}

/* El podio: título arriba, los tres nombres abajo, y la escena entre medio. */
.coches-capa--podio{grid-template-rows:auto 1fr auto;cursor:pointer;background:none}
.coches-podio-cab{text-align:center;display:grid;gap:var(--mal-e1);justify-items:center}
.coches-podio-titulo{font-size:clamp(2.2rem, 1.4rem + 5vw, 4.5rem)}
.coches-podio-nombres{list-style:none;margin:0;padding:0;display:flex;gap:var(--mal-e3);flex-wrap:wrap;justify-content:center;align-self:end}
.coches-podio-nombres li{display:grid;grid-template-columns:auto 1fr;gap:0 var(--mal-e2);align-items:center}
.coches-podio-nombres li b{grid-row:span 2;font-size:1.8rem;line-height:1}
.coches-podio-nombres li em{font-style:normal;font-size:var(--mal-t-micro)}

/* La cortina: un barrido en diagonal que tapa y destapa. */
.coches-cortina{position:fixed;inset:-20%;z-index:55;pointer-events:none;visibility:hidden;
  background:#1D1822;clip-path:polygon(0 0, 0 0, 0 100%, 0 100%)}
.coches-cortina.is-on{visibility:visible;animation:coches-barrido .55s linear both}
@keyframes coches-barrido{
  0%{clip-path:polygon(0 0, 0 0, 0 100%, 0 100%)}
  45%{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}
  55%{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}
  100%{clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%)}
}
@media (prefers-reduced-motion:reduce){.coches-cortina.is-on{animation:none;visibility:hidden}.coches-start.is-lista span{animation:none}}
.coches-titulo{font-size:clamp(2rem, 1.4rem + 3vw, 2.8rem);line-height:1.02;margin:0}
.coches-teclas{display:grid;gap:var(--mal-e1);margin:0;font-size:var(--mal-t-caption)}
.coches-teclas div{display:grid;grid-template-columns:7.5em 1fr;gap:var(--mal-e2);align-items:baseline}
.coches-teclas dt{font-family:var(--mal-mono);font-weight:700}
.coches-teclas dd{margin:0;color:var(--mal-on-surface-2)}
.coches.tactil .coches-teclas{display:none}
.coches-solo-tactil{display:none}
.coches.tactil .coches-solo-tactil{display:block}
.coches-subtitulo{margin:0;font-size:clamp(1.3rem, 1rem + 1.5vw, 1.7rem);line-height:1.1}
.coches-progreso:empty{display:none}
.coches-fila{gap:var(--mal-e2);flex-wrap:wrap}
.coches-fila .btn{flex:1 1 9em}

/* ─── elegir pareja ───────────────────────────────────────────
   En pantalla ancha el panel se va a la izquierda: a la derecha la
   cámara gira alrededor de la pareja elegida, como en la selección de
   un kart. */
.coches-elige{display:grid;gap:var(--mal-e2)}
.coches-parejas{display:flex;flex-wrap:wrap;gap:var(--mal-e2)}
.coches-parejas .chip{cursor:pointer}
.coches-parejas .chip[aria-checked="true"]{background:var(--mal-primary);border-color:var(--mal-primary);color:var(--mal-on-primary)}
.coches-pareja-nombre{margin:var(--mal-e1) 0 0;font-family:var(--mal-display);font-weight:800;font-size:1.25rem;line-height:1.1}
.coches-stats{display:grid;gap:4px;margin:0;font-size:var(--mal-t-micro)}
.coches-stats > div{display:grid;grid-template-columns:6.5em 1fr;gap:var(--mal-e2);align-items:center}
.coches-stats dt{font-family:var(--mal-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mal-on-surface-2)}
.coches-stats dd{margin:0}
.coches-stats .medidor{height:8px}
/* Lo cerrado se ve, pero apagado y con su candado. */
.coches-candado{display:none;margin-right:.3em}
.btn.is-cerrada{opacity:.6}
.is-cerrada .coches-candado{display:inline-block}
.coches-parejas .chip.is-cerrada{opacity:.55;border-style:dashed}
.coches-parejas .chip svg:not(.icono){vertical-align:-4px}
.coches-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--mal-e2)}
.coches-lista li{display:grid;grid-template-columns:44px 1fr;gap:var(--mal-e3);align-items:center}
.coches-lista li .caption{margin:0}
.coches-lista__icono{display:grid;place-items:center;width:44px;height:44px}
.coches-lista li.is-cerrada{opacity:.6}
.coches-tabla{margin:0;min-width:0}
.coches-creditos{margin:var(--mal-e3) 0 0;max-width:34em;color:var(--mal-on-surface-2)}
@media (min-width:900px){
  #portada,#elegir{justify-items:start;padding-left:clamp(24px, 5vw, 72px);background:linear-gradient(to right, rgba(20,16,24,.35), transparent 55%)}
}
/* En el teléfono el panel deja ver la pareja arriba. */
@media (max-width:899px){
  #elegir{align-items:end}
  #elegir .coches-panel{max-height:68dvh}
}

/* ─── el premio ──────────────────────────────────────────── */
.coches-premio{position:fixed;inset:0;z-index:40}
.coches-premio[hidden]{display:none}
.coches-podio{list-style:none;margin:var(--mal-e3) 0 0;padding:0;display:grid;gap:2px;
  font-family:var(--mal-mono);font-size:var(--mal-t-caption);color:var(--mal-on-surface-2);
  min-width:min(260px, 80vw)}
.coches-podio li{display:flex;justify-content:space-between;gap:var(--mal-e4)}
.coches-podio li.es-tu{color:var(--mal-on-surface);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .coches-turbo,.coches-empujador{animation:none}
  .coches-cuenta.is-sale{animation:coches-sale .9s steps(1, end) both}
}

/* ─── de lado, en el teléfono ─────────────────────────────────
   De pie se pide girarlo: la carrera se ve y se maneja de lado. */
.coches-gira{display:none;position:fixed;inset:0;z-index:60;place-content:center;justify-items:center;gap:var(--mal-e2);
  padding:var(--mal-e5);text-align:center;background:#1D1822;color:#F3F1EC;font-family:var(--mal-display);font-weight:800;font-size:1.6rem}
.coches-gira .micro{color:#CBC5B8;font-family:var(--mal-texto);font-weight:500}
@media (orientation:portrait) and (pointer:coarse){.coches-gira{display:grid}}
/* De lado: el panel a la izquierda y la pareja a la derecha. */
@media (orientation:landscape) and (max-height:600px){
  #portada,#elegir{align-items:center;justify-items:start;padding:var(--mal-e3) var(--mal-e4);background:linear-gradient(to right, rgba(20,16,24,.4), transparent 60%)}
  .coches-capa .coches-panel{width:min(52vw, 420px);max-height:calc(100dvh - 1.5rem);overflow:auto;padding:var(--mal-e4)}
  .coches-titulo{font-size:1.6rem}
  .coches-subtitulo{font-size:1.15rem}
  .coches-capa .coches-panel{gap:var(--mal-e2)}
  .coches-logo__nombre{font-size:2.8rem}
  .coches-capa--titulo{gap:var(--mal-e2)}
  .coches-stats{gap:2px}
  .coches-teclas{font-size:var(--mal-t-micro)}
  /* La carrera, más apretada: el HUD a ras de los bordes. */
  .coches-hud{padding:calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 14px)
    calc(env(safe-area-inset-bottom, 0px) + 10px) calc(env(safe-area-inset-left, 0px) + 14px)}
  .coches-botones .btn{width:40px;height:40px;min-height:40px;padding:0}
  .coches-puesto__n{font-size:2.6rem}
  .coches-vel{font-size:2.2rem}
  .coches-ruta{gap:6px}
}