/* 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-e3);position:relative;z-index:26}
.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)}

/* Debajo del puesto, a la derecha: la velocidad, el empujador y la colada. */
.coches-tablero{display:flex;flex-direction:column;align-items:flex-end;gap:var(--mal-e1);margin-top:var(--mal-e1)}
.coches-tablero__fila{justify-content:flex-end}
.coches-vel{font-size:clamp(1.5rem, 1rem + 1.6vw, 2.2rem);font-variant-numeric:tabular-nums;--hud-borde:4px;text-shadow:0 3px 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:calc(env(safe-area-inset-top, 0px) + 72px);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: a la izquierda, arriba de la flecha de girar, por encima de las zonas. */
.coches-mando--freno{
  position:fixed;left:calc(env(safe-area-inset-left, 0px) + var(--mal-e5));bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(120px, 34vw, 170px));
  width:clamp(64px, 17vw, 80px);height:clamp(64px, 17vw, 80px);z-index:2;
}
.coches-mando--freno.is-on{transform:translateY(3px)}
/* Bajarse o subirse: a la derecha, en espejo del freno. */
.coches-mando--empuja{
  position:fixed;right:calc(env(safe-area-inset-right, 0px) + var(--mal-e5));top:calc(50% + 16px);
  width:clamp(64px, 17vw, 80px);height:clamp(64px, 17vw, 80px);z-index:2;font-size:.85rem;
}
.coches-mando--empuja[hidden]{display:none}
.coches-mando--empuja.is-on{transform:translateY(3px)}
.coches-punto.con-colada{box-shadow:0 0 0 3px #B45CC8, 0 0 8px #B45CC8}
/* Con mandos, el tablero queda entre los dos pulgares, a su altura. */
.coches.con-mandos .hud-juego__abajo{padding-bottom:clamp(70px, 20vw, 90px)}

/* Los pies del que empuja, abajo al centro, entre los dos pulgares: el pie
   que toca late; la píldora se enciende con cada buen paso. Solo mientras
   se empuja, para no estorbar en la bajada. */
.coches-pasos{position:fixed;left:50%;bottom:max(calc(env(safe-area-inset-bottom, 0px) + 16px), 11vh);transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;margin:0;padding:4px 14px;border-radius:99px;
  font-family:var(--mal-mono);font-weight:700;font-size:var(--mal-t-micro);letter-spacing:.06em;
  background:rgba(20,16,24,.55);color:#F3F1EC;pointer-events:none;z-index:3;transition:background .1s,color .1s}
.coches-pasos[hidden]{display:none}
.coches-pasos__racha{min-width:3.2em;text-align:center}
.coches-pie{font-size:1.35em;line-height:1;opacity:.28;transition:opacity .08s}
.coches-pie.is-toca{opacity:1;animation:coches-toca .45s ease-in-out infinite alternate}
.coches-pasos.is-bien{background:#F2C14E;color:#1C1619}
.coches-pasos.is-un-pie{background:#E0672B;color:#fff}
.coches-turbo{white-space:nowrap}
.coches-turbo.is-lista{animation:coches-toca .45s ease-in-out infinite alternate}
@keyframes coches-toca{from{transform:scale(1)}to{transform:scale(1.3)}}
@media (prefers-reduced-motion: reduce){.coches-pie.is-toca{animation:none}}

/* Las rayas de velocidad: cuñas blancas que salen de los bordes hacia el
   centro, apagadas en el centro y en reposo. */
.coches-velo{position:fixed;inset:0;z-index:21;pointer-events:none;opacity:0;transition:opacity .25s;
  background:repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.7) 0 .5deg, transparent .5deg 3.7deg);
  -webkit-mask-image:radial-gradient(ellipse at 50% 52%, transparent 38%, #000 80%);mask-image:radial-gradient(ellipse at 50% 52%, transparent 38%, #000 80%)}

/* ─── 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:calc(env(safe-area-inset-top, 0px) + var(--mal-e4)) 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));
  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.tactil dl.coches-solo-tactil{display:grid}
.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:48px;height:48px;min-height:48px;padding:0}
  .coches-puesto__n{font-size:2.6rem}
  .coches-vel{font-size:1.4rem}
  .coches-tablero{gap:2px;margin-top:0}
  .coches-ruta{gap:6px}
}


/* ─── el menú de elegir, en pasos ─────────────────────────────
   Primero la pareja y la pintura; luego la pista. Cada paso cabe en la
   pantalla sin bajar. */
.coches-etapas{display:flex;gap:var(--mal-e2);margin:0;padding:0;list-style:none;
  font-family:var(--mal-mono);font-weight:700;font-size:var(--mal-t-micro)}
.coches-etapas li{padding:2px 10px;border-radius:99px;border:1px solid currentColor;opacity:.55}
.coches-etapas li.is-activo{opacity:1;background:var(--mal-primary);color:var(--mal-on-primary);border-color:transparent}
.coches-menu [hidden]{display:none !important}
.coches-paso-botones{display:grid;grid-template-columns:1fr 1fr;gap:var(--mal-e2)}
.coches-paso-botones .btn[hidden]{display:none}

/* De lado en un teléfono bajito: el panel más ancho, el paso de pareja a dos
   columnas de fichas, y el de pista con la lista a la izquierda y el mapa a la derecha. */
@media (orientation:landscape) and (max-height:600px){
  .coches-capa .coches-menu{padding:var(--mal-e2) var(--mal-e4);gap:var(--mal-e2)}
  /* Las safe areas: el recorte del teléfono de lado y la barra de inicio no
     tapan nada. El rótulo de elegir sobresale arriba: se le deja sitio. */
  #portada,#elegir{padding:calc(env(safe-area-inset-top, 0px) + 4px) calc(env(safe-area-inset-right, 0px) + var(--mal-e4))
    calc(env(safe-area-inset-bottom, 0px) + 4px) calc(env(safe-area-inset-left, 0px) + var(--mal-e4))}
  #elegir{padding-top:calc(env(safe-area-inset-top, 0px) + 22px)}
  #portada .coches-menu{max-height:calc(100dvh - 8px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))}
  #elegir .coches-menu{max-height:calc(100dvh - 26px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))}
  #elegir .coches-menu{width:min(94vw, 680px);padding:var(--mal-e1) var(--mal-e4)}
  #elegir .coches-subtitulo{display:none}
  /* El rótulo, como pestaña en la esquina: no sobresale fuera de la pantalla. */
  #elegir .coches-menu{position:relative}
  #elegir .coches-banner{position:absolute;top:-14px;left:var(--mal-e4);margin:0}
  #elegir .coches-etapas{justify-content:flex-end}
  #elegir .micro,#elegir .caption{display:none}
  #elegir .coches-paso{gap:4px}
  #elegir .coches-etapas{font-size:.7rem}
  #elegir .coches-parejas{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  #elegir .coches-parejas .chip{white-space:nowrap;font-size:.8rem;padding:4px 8px;min-height:0}
  #elegir #pareja-stats{display:grid;grid-template-columns:repeat(3, 1fr);gap:0 var(--mal-e2)}
  #elegir #paso-pista{display:grid;grid-template-columns:1fr 1fr;gap:var(--mal-e2);align-items:start}
  #elegir #paso-pista .coches-parejas{grid-template-columns:1fr 1fr}
  #elegir #paso-pista .coches-parejas .chip{white-space:normal;line-height:1.15}
  #elegir #paso-pista .coches-pista{display:block}
  #elegir #paso-pista .coches-mapa{display:block;width:100%;height:auto}
  #elegir .coches-paso-botones .btn{min-height:34px;padding-block:4px;white-space:nowrap}
  #elegir .coches-pareja-nombre{font-size:1.2rem}
  .coches-menu > .coches-opciones{grid-template-columns:1fr 1fr;gap:var(--mal-e1) var(--mal-e2)}
  .coches-menu:has(> .coches-opciones) > .coches-banner{display:none}
  .coches-menu > .coches-opciones .btn{min-height:36px;padding-block:5px}
}
@media (orientation:landscape) and (max-height:600px){
  .coches-menu:has(> .coches-opciones){width:min(94vw, 640px)}
}

/* ═══ Al estilo de un kart de consola ═══════════════════════════════════
   El HUD: la banda arriba al centro, las píldoras a la derecha, las
   posiciones en columna a la izquierda, el tiempo abajo a la izquierda y el
   botón redondo de acción abajo a la derecha. */
.coches-banda{flex:0 1 auto;max-width:46vw;margin:0 auto;padding:5px 26px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:"Bangers",var(--mal-display);font-size:clamp(.95rem, .8rem + .8vw, 1.35rem);letter-spacing:.04em;color:#fff;
  background:linear-gradient(90deg, transparent, rgba(34,104,210,.82) 14%, rgba(34,104,210,.82) 86%, transparent);text-shadow:0 2px 0 rgba(10,24,60,.6)}
.coches-derecha{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.coches-pildora{margin:0;display:inline-flex;align-items:center;gap:.35em;padding:3px 14px;border-radius:99px;white-space:nowrap;
  font-family:"Bangers",var(--mal-display);font-size:clamp(1rem, .85rem + .7vw, 1.35rem);letter-spacing:.03em;color:#16233F;
  background:rgba(170,222,246,.9);border:2px solid #fff;box-shadow:0 3px 0 rgba(10,24,60,.35)}
.coches-pildora small{font-size:.72em;opacity:.75}
.coches-pildora--colada{background:rgba(214,170,240,.92)}
.coches-pildora--colada.is-turbo{box-shadow:0 0 0 3px #B45CC8, 0 0 14px #B45CC8}
.coches-hud .coches-turbo{animation:none}
.coches-hud .coches-turbo.is-lista{animation:coches-toca .45s ease-in-out infinite alternate}
.coches-jarrito{display:inline-block;width:1.15em;height:1.15em;flex:none;background:center/contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9.5c3.2 0 3.2 5.5 0 5.5' fill='none' stroke='%2316233F' stroke-width='1.6'/%3E%3Cpath d='M4.5 7h13l-1.6 13.5h-9.8z' fill='%23F3EEE4' stroke='%2316233F' stroke-width='1.5'/%3E%3Crect x='5.2' y='10' width='11.6' height='2' fill='%232D5DA8'/%3E%3Cellipse cx='11' cy='7' rx='6.5' ry='2.6' fill='%236B2380' stroke='%2316233F' stroke-width='1.2'/%3E%3C/svg%3E")}
.coches-posiciones{position:absolute;left:calc(env(safe-area-inset-left, 0px) + var(--mal-e5));top:calc(env(safe-area-inset-top, 0px) + 76px);
  margin:0;padding:0;list-style:none;display:grid;gap:3px;pointer-events:none}
.coches-posiciones li{display:flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 7px;border-radius:99px;
  font-family:"Bangers",var(--mal-display);font-size:1rem;letter-spacing:.03em;color:#16233F;background:rgba(170,222,246,.8);border:2px solid rgba(255,255,255,.9)}
.coches-posiciones li b{min-width:2em;font-weight:400}
.coches-posiciones li span{font-size:.8rem;max-width:6.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.coches-posiciones li.es-tu{background:linear-gradient(90deg, #FFE27A, #F2A93B);border-color:#fff;transform:translateX(6px)}
.coches-posiciones li.is-sube{animation:coches-sube-fila .5s var(--mal-ease)}
@keyframes coches-sube-fila{from{transform:translateX(6px) scale(1.25)}to{transform:translateX(6px) scale(1)}}
.coches-posiciones .coches-punto{position:static;margin:0;width:18px;height:18px;font-size:10px;line-height:18px;transform:none}
.sin-rivales .coches-posiciones{display:none}
.coches-crono{position:absolute;left:calc(env(safe-area-inset-left, 0px) + var(--mal-e5));bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);pointer-events:none}
.coches-crono .coches-tiempo{margin:0}
.coches-parciales{margin:3px 0 0;display:grid;gap:1px;font-family:"Bungee",var(--mal-mono);font-size:.68rem;color:#fff;text-shadow:0 1px 0 #16233F, 0 0 3px #16233F}
.coches-parciales:empty{display:none}
/* El botón de acción: redondo, a la derecha y a la altura del freno. Abajo
   del todo tapaba la flecha donde el pulgar derecho pisa. */
.coches-mando--empuja{top:auto;width:clamp(76px, 20vw, 96px);height:clamp(76px, 20vw, 96px);
  border-radius:50%;display:grid;place-items:center;align-content:center;gap:0;font-family:"Bangers",var(--mal-display);font-size:1.05rem;letter-spacing:.04em}
.coches-mando--empuja .coches-jarrito{display:none}
.coches-mando--empuja.es-colada .coches-jarrito{display:block;width:30px;height:30px}
.coches-mando--empuja.es-colada{animation:coches-toca .45s ease-in-out infinite alternate}
/* El freno y el botón de acción, a la misma altura: dejan sitio a las
   posiciones arriba y a las flechas de pisar abajo. */
.coches-mando--freno,.coches-mando--empuja{bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(84px, 24vh, 116px))}

/* El menú principal: la ficha y las baldosas a la izquierda, el botón grande
   para correr abajo a la derecha. */
#portada.coches-capa--inicio{justify-items:start}
.coches-inicio{width:min(92vw, 520px);gap:var(--mal-e3)}
.coches-ficha{display:flex;align-items:center;gap:var(--mal-e3);padding:8px 14px;border-radius:14px;color:#16233F;
  background:linear-gradient(90deg, #FFFFFF, #E2F1FB);border:3px solid #FFE27A;box-shadow:0 4px 0 rgba(10,24,60,.35)}
.coches-ficha__foto{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-family:"Bangers",var(--mal-display);font-size:1.7rem;color:#fff;background:var(--c, #5B2A86);border:3px solid #16233F;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25)}
.coches-ficha__texto{min-width:0}
.coches-ficha__tu{margin:0;font-family:"Bangers",var(--mal-display);font-size:1.3rem;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coches-ficha__tu span{font-size:.8em;opacity:.7}
.coches-ficha__rango{margin:0;font-family:"Bungee",var(--mal-texto);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#1F5FB8}
.coches-ficha__datos{margin:3px 0 0;display:flex;gap:14px;font-family:"Bungee",var(--mal-texto);font-size:.82rem}
.coches-ficha__datos span{display:inline-flex;align-items:center;gap:4px}
.coches-baldosas{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.coches-baldosa{appearance:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:10px;cursor:pointer;
  font-family:"Bangers",var(--mal-display);font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;text-align:left;color:#fff;
  background:linear-gradient(180deg, #4C9BE8, #1F5FB8);border:2px solid rgba(255,255,255,.75);box-shadow:0 3px 0 #0E3770;transform:skewX(-8deg)}
.coches-baldosa:hover{filter:brightness(1.1)}
.coches-baldosa:active{transform:skewX(-8deg) translateY(2px);box-shadow:0 1px 0 #0E3770}
.coches-baldosa:focus-visible{outline:3px solid #FFE27A;outline-offset:2px}
.coches-baldosa:disabled,.coches-baldosa[aria-disabled="true"]{filter:grayscale(.7);opacity:.6;cursor:default}
.coches-baldosa .coches-candado{display:none}
.coches-baldosa.is-cerrada .coches-candado{display:inline-block}
.coches-correr{position:fixed;right:calc(env(safe-area-inset-right, 0px) + 4vw);bottom:calc(env(safe-area-inset-bottom, 0px) + 5vh);z-index:2;
  width:clamp(118px, 21vw, 190px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;gap:2px;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 35% 30%, #FF8F7E, #E3261C 55%, #9E1209);border:6px solid #fff;outline:4px solid #16233F;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.coches-correr__a{font-family:"Bangers",var(--mal-display);font-size:clamp(1.4rem, 3.4vw, 2.3rem);letter-spacing:.04em;text-shadow:0 3px 0 #6E0B05;line-height:1}
.coches-correr__b{font-family:"Bungee",var(--mal-texto);font-size:clamp(.5rem, .9vw, .7rem);letter-spacing:.04em;opacity:.95}
.coches-correr:active{transform:translateY(3px);box-shadow:0 5px 0 rgba(0,0,0,.35)}
.coches-correr:focus-visible{outline-color:#FFE27A}
.coches-correr:disabled{filter:grayscale(.7);opacity:.6;cursor:default}

/* La presentación de la pista: la copa a la izquierda en azul, el trazado
   grande a la derecha sobre la pista desenfocada. */
.coches-capa--presenta{grid-template-columns:minmax(220px, 36%) 1fr;place-items:stretch;padding:0;background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.coches-capa--presenta[hidden]{display:none}
.coches-presenta__lado{display:grid;align-content:start;gap:2.5vh;color:#fff;text-align:center;
  padding:calc(env(safe-area-inset-top, 0px) + 8vh) 9% 0 calc(env(safe-area-inset-left, 0px) + 4vw);
  background:linear-gradient(160deg, #3B8EE8, #1B4FA8);clip-path:polygon(0 0, 100% 0, 86% 100%, 0 100%)}
.coches-presenta__copa{margin:0;font-family:"Bangers",var(--mal-display);font-size:clamp(1.5rem, 3.8vw, 2.6rem);letter-spacing:.03em;text-shadow:0 3px 0 #0E2A5E}
.coches-presenta__texto{margin:0;font-family:"Bangers",var(--mal-display);font-size:clamp(1rem, 2vw, 1.35rem);letter-spacing:.03em;line-height:1.25;text-shadow:0 2px 0 #0E2A5E}
.coches-presenta__pista{display:grid;place-items:center;align-content:center;gap:2px;padding-right:calc(env(safe-area-inset-right, 0px) + 3vw)}
.coches-presenta__mapa{width:min(50vw, 560px);height:auto;max-height:48vh}
.coches-presenta__kicker,.coches-presenta__vueltas{margin:0;font-family:"Bangers",var(--mal-display);font-size:clamp(1rem, 2vw, 1.4rem);color:#FFE27A;
  letter-spacing:.04em;text-shadow:0 2px 0 #16233F}
.coches-presenta__nombre{margin:0;font-family:"Bangers",var(--mal-display);font-size:clamp(1.8rem, 4.6vw, 3.2rem);letter-spacing:.03em;color:#fff;
  -webkit-text-stroke:2px #16233F;paint-order:stroke fill;text-shadow:0 4px 0 #16233F;text-align:center}

@media (orientation:landscape) and (max-height:600px){
  .coches-posiciones{top:calc(env(safe-area-inset-top, 0px) + 60px);gap:2px}
  .coches-posiciones li{height:20px;font-size:.88rem}
  .coches-posiciones li span{font-size:.72rem}
  .coches-mando--freno{width:64px;height:64px}
  .coches-mando--freno,.coches-mando--empuja{bottom:calc(env(safe-area-inset-bottom, 0px) + 90px)}
  .coches-inicio{width:min(56vw, 500px)}
  .coches-ficha{padding:6px 12px}
  .coches-ficha__foto{width:44px;height:44px;font-size:1.4rem}
  .coches-baldosas{gap:6px 8px}
  .coches-baldosa{min-height:36px;padding:5px 10px;font-size:.95rem}
  .coches-presenta__lado{padding-top:calc(env(safe-area-inset-top, 0px) + 5vh)}
}
@media (prefers-reduced-motion:reduce){
  .coches-posiciones li.is-sube,.coches-mando--empuja.es-colada{animation:none}
}
@media (orientation:landscape) and (max-height:600px){
  /* La ficha ya dice las medallas: la línea de progreso sobra de lado. */
  #portada .coches-progreso{display:none}
}
/* El panel azul de la presentación, de arriba abajo; el texto no llega al corte diagonal. */
.coches-capa--presenta{grid-template-rows:100%;align-items:stretch;justify-items:stretch}
.coches-presenta__lado{height:100%;box-sizing:border-box;padding-right:17%}
#presenta{padding:0;align-items:stretch;grid-template-rows:100%}
/* Los tiempos de cada vuelta, en una sola línea bajo el tiempo: no suben hasta el freno. */
.coches-parciales{display:flex;gap:10px;white-space:nowrap}
/* El puesto, con la o volada; y el tiempo, a la derecha de la flecha de giro. */
.coches-posiciones li b sup{font-size:.6em;vertical-align:.5em;margin-left:1px;text-decoration:underline}
.coches.con-mandos .coches-crono{left:calc(env(safe-area-inset-left, 0px) + var(--mal-e5) + 56px)}

/* El premio de lado en el teléfono: la medalla a la izquierda, más chica,
   y el texto a la derecha; «Toca para seguir» siempre a la vista. */
@media (orientation:landscape) and (max-height:600px){
  .coches-premio{padding:calc(env(safe-area-inset-top, 0px) + 6px) calc(env(safe-area-inset-right, 0px) + 4vw)
    calc(env(safe-area-inset-bottom, 0px) + 4px) calc(env(safe-area-inset-left, 0px) + 4vw);box-sizing:border-box;min-height:0;height:100dvh}
  .coches-premio .premio__escena{flex-direction:row;justify-content:center;align-items:center;gap:clamp(16px, 4vw, 40px);min-height:0}
  .coches-premio .premio__disco{width:clamp(130px, 34vh, 170px);height:clamp(130px, 34vh, 170px)}
  .coches-premio .premio__disco svg{width:60%;height:60%}
  .coches-premio .premio__texto{width:auto;max-width:min(52vw, 440px);align-items:flex-start;text-align:left;gap:2px}
  .coches-premio .premio__nombre{font-size:clamp(1.5rem, 5vh, 2.3rem)}
  .coches-premio .premio__desc{font-size:.9rem;line-height:1.3;max-width:none}
  .coches-premio .coches-podio{margin-top:6px;font-size:.72rem;min-width:0;width:100%}
  .coches-premio .premio__pie{margin:0;font-size:1rem}
  .coches-premio .coches-creditos{display:none}
}
/* La ayuda de lado: el texto a la izquierda y la tabla de mandos a la
   derecha, para que entre sin bajar; si aun así no cabe, baja el panel y
   no la pantalla entera. */
@media (orientation:landscape) and (max-height:600px){
  #ayuda .coches-panel{width:min(94vw, 780px);max-height:calc(100dvh - 12px);overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;
    gap:var(--mal-e1) var(--mal-e4);align-content:start;padding:var(--mal-e2) var(--mal-e4)}
  #ayuda .coches-banner,#ayuda .btn{grid-column:1 / -1}
  #ayuda .coches-teclas{grid-column:2;grid-row:2 / span 2;font-size:.74rem;gap:3px;align-self:start}
  #ayuda .coches-teclas div{grid-template-columns:6.5em 1fr;gap:var(--mal-e1)}
  #ayuda .caption{grid-column:1;font-size:.8rem;line-height:1.3;margin:0}
  #ayuda .btn{min-height:36px;padding-block:5px}
  #ayuda{padding:calc(env(safe-area-inset-top, 0px) + 4px) calc(env(safe-area-inset-right, 0px) + var(--mal-e4)) calc(env(safe-area-inset-bottom, 0px) + 4px) calc(env(safe-area-inset-left, 0px) + var(--mal-e4))}
  /* Las demás pantallas de menú: si no caben, baja el panel, no la pantalla. */
  #opciones .coches-panel,#creditos .coches-panel,#medallas .coches-panel,#album .coches-panel{max-height:calc(100dvh - 12px);overflow:auto}
}
@media (orientation:landscape) and (max-height:600px){
  #opciones,#creditos,#medallas,#album{padding:calc(env(safe-area-inset-top, 0px) + 4px) calc(env(safe-area-inset-right, 0px) + var(--mal-e4)) calc(env(safe-area-inset-bottom, 0px) + 4px) calc(env(safe-area-inset-left, 0px) + var(--mal-e4))}
  #opciones .coches-panel,#creditos .coches-panel{padding:var(--mal-e2) var(--mal-e4);gap:var(--mal-e2)}
  /* Las medallas y el álbum, a lo ancho: dos columnas de pistas y parejas, y más estampitas por fila. */
  #medallas .coches-panel,#album .coches-panel{width:min(94vw, 820px);padding:var(--mal-e2) var(--mal-e4);gap:var(--mal-e2)}
  #medallas .coches-lista{grid-template-columns:1fr 1fr;gap:var(--mal-e1) var(--mal-e4)}
  #medallas .coches-lista li{gap:var(--mal-e2)}
  #album .coches-album{grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));gap:var(--mal-e2)}
  #creditos .caption,#creditos .coches-creditos{font-size:.82rem;line-height:1.3}
}