/* Cuesta Arriba · interfaz
   Paneles de cristal oscuro, botones en paralelogramo y tipografía condensada en cursiva.
   Tamaños en rem: la raíz escala con el alto de la pantalla (el juego va en horizontal). */

:root {
  --fondo: #0b1020;
  --panel: rgba(14, 20, 38, 0.78);
  --panel-2: rgba(26, 36, 64, 0.85);
  --borde: rgba(255, 255, 255, 0.12);
  --texto: #eef2f8;
  --tenue: #9fb0c8;
  --ambar: #ffb020;
  --ambar-2: #ff8a10;
  --verde: #3ccf6e;
  --verde-2: #1c9a4c;
  --azul: #3aa0ff;
  --azul-2: #1f5fd6;
  --rojo: #ff5147;
  --rojo-2: #c8231c;
  --morado: #9b6bff;
  --morado-2: #6a3ad6;
  --oro: #f2c230;
  --radio: 0.9rem;
  --sombra: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.4);
  font-size: clamp(11px, 3.3vh, 22px);
  color-scheme: dark;
}

/* Es un juego: nada se selecciona ni saca el menú de la pulsación larga (en iOS, además, la lupa de
   seleccionar texto al dejar el dedo puesto). Solo donde se escribe (el nombre, el código de sala). */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto); overflow: hidden; }
body {
  font-family: 'Barlow', system-ui, sans-serif; font-weight: 600; line-height: 1.25;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }
#fondo-menu { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 10, 22, 0.35), rgba(6, 10, 22, 0.15) 40%, rgba(6, 10, 22, 0.55)); pointer-events: none; }

.titulo, .t {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
}
.t-sombra { text-shadow: 0 0.12rem 0 rgba(0, 0, 0, 0.45), 0 0 0.8rem rgba(0, 0, 0, 0.35); }
.tenue { color: var(--tenue); }
.num { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------------------------ */
/* Pantallas */

.pantalla {
  position: absolute; inset: 0;
  padding: max(0.6rem, env(safe-area-inset-top)) max(0.9rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.9rem, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 0.6rem;
  animation: entrar 0.28s ease-out;
}
@keyframes entrar { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
.cuerpo { flex: 1; min-height: 0; display: flex; gap: 0.8rem; }
.columna { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }
.desliza { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; scrollbar-width: none; }
.desliza::-webkit-scrollbar { display: none; }
.desliza-h { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; }
.desliza-h::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------------------------------ */
/* Paneles y tarjetas */

.panel {
  background: linear-gradient(180deg, rgba(34, 46, 80, 0.82), rgba(14, 20, 38, 0.86));
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--sombra);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tarjeta {
  position: relative; border-radius: calc(var(--radio) * 0.9); overflow: hidden;
  background: linear-gradient(180deg, rgba(40, 54, 92, 0.9), rgba(18, 26, 48, 0.92));
  border: 1px solid var(--borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0.3rem 0.8rem rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, border-color 0.15s;
}
button.tarjeta:active { transform: scale(0.97); }
.tarjeta.elegida { border-color: var(--ambar); box-shadow: 0 0 0 2px var(--ambar), 0 0.4rem 1.2rem rgba(255, 176, 32, 0.25); }
.tarjeta.bloqueada .tarjeta-img { filter: saturate(0.2) brightness(0.55); }

.etiqueta {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.3em; padding: 0.15em 0.55em; border-radius: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 0.8rem; text-transform: uppercase;
  background: rgba(0, 0, 0, 0.35); color: var(--ambar);
}
.etiqueta svg { width: 1em; height: 1em; }

/* ------------------------------------------------------------------------------------------ */
/* Botones */

.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 2.6rem; padding: 0 1.2rem; border-radius: 0.55rem;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: #fff;
  transform: skewX(-8deg);
  background: linear-gradient(180deg, #4a5877, #2a3450);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -0.25rem 0 rgba(0, 0, 0, 0.25), 0 0.25rem 0 rgba(0, 0, 0, 0.35), 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  transition: transform 0.08s, filter 0.15s;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.boton > * { transform: skewX(8deg); }
.boton svg { width: 1.2em; height: 1.2em; flex: none; }
.boton:active:not(:disabled) { transform: skewX(-8deg) translateY(0.15rem); filter: brightness(0.95); }
.boton:disabled { filter: grayscale(0.8) brightness(0.7); }
.boton-amarillo { background: linear-gradient(180deg, #ffd35a, #ff9d14); color: #2a1600; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.boton-verde { background: linear-gradient(180deg, #5ee08a, #1c9a4c); }
.boton-azul { background: linear-gradient(180deg, #5bb2ff, #1f5fd6); }
.boton-rojo { background: linear-gradient(180deg, #ff7a6b, #c8231c); }
.boton-morado { background: linear-gradient(180deg, #b58cff, #6a3ad6); }
.boton-oscuro { background: linear-gradient(180deg, rgba(60, 74, 110, 0.95), rgba(30, 38, 62, 0.95)); }
.boton.grande { min-height: 3.4rem; font-size: 1.6rem; padding: 0 1.8rem; }
.boton.pequeno { min-height: 2rem; font-size: 0.95rem; padding: 0 0.8rem; }
.boton.bloque { width: 100%; }
.boton .sub { display: block; font-size: 0.62em; font-weight: 700; opacity: 0.85; letter-spacing: 0.04em; }
.boton .pila { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }

.boton-redondo {
  width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; display: inline-grid; place-items: center; flex: none;
  background: linear-gradient(180deg, rgba(60, 74, 110, 0.95), rgba(24, 32, 56, 0.95));
  border: 1px solid var(--borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
}
.boton-redondo svg { width: 1.3rem; height: 1.3rem; }
.boton-redondo:active { transform: translateY(1px); }

.insignia { position: absolute; top: -0.25rem; right: -0.25rem; min-width: 1.1rem; height: 1.1rem; border-radius: 1rem; padding: 0 0.3rem;
  background: var(--rojo); color: #fff; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #0b1020; }

/* ------------------------------------------------------------------------------------------ */
/* Barra superior y monedas */

.barra-superior { display: flex; align-items: center; gap: 0.6rem; min-height: 2.6rem; flex: none; }
.barra-superior .titulo { font-size: 1.9rem; }
.espacio { flex: 1; }
.pildora {
  display: inline-flex; align-items: center; gap: 0.35rem; height: 2.2rem; padding: 0 0.55rem 0 0.3rem; border-radius: 2rem;
  background: rgba(8, 12, 26, 0.7); border: 1px solid var(--borde); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.pildora .ico { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; }
.pildora .ico svg { width: 100%; height: 100%; }
.pildora.salta { animation: salta 0.25s ease-out; }
@keyframes salta { 50% { transform: scale(1.12); } }
.pildora .mas { width: 1.5rem; height: 1.5rem; margin-left: 0.1rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #5ee08a, #1c9a4c); }
.pildora .mas svg { width: 0.9rem; height: 0.9rem; }

.jugador { display: flex; align-items: center; gap: 0.5rem; }
.nivel {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; position: relative;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: 1.15rem; color: #2a1600;
}
.nivel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #ffd35a, #ff9d14); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.nivel span { position: relative; }
.jugador-datos { display: flex; flex-direction: column; gap: 0.2rem; }
.jugador-nombre { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1; }
.barra-progreso { height: 0.45rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.45); overflow: hidden; min-width: 5.5rem; }
.barra-progreso i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5ee08a, #b8f06a); }

/* ------------------------------------------------------------------------------------------ */
/* Navegación inferior */

.pestanas { display: flex; justify-content: center; gap: 0.3rem; flex: none; }
.pestana {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 5rem; padding: 0.3rem 0.7rem;
  border-radius: 0.7rem; color: var(--tenue); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; font-size: 0.85rem; text-transform: uppercase;
  background: rgba(8, 12, 26, 0.55); border: 1px solid transparent;
}
.pestana svg { width: 1.4rem; height: 1.4rem; }
.pestana[aria-current='page'] { color: #2a1600; background: linear-gradient(180deg, #ffd35a, #ff9d14); box-shadow: 0 0.3rem 0.8rem rgba(255, 157, 20, 0.35); }

/* ------------------------------------------------------------------------------------------ */
/* Garaje (inicio) */

.inicio-cuerpo { display: grid; grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 2.2fr) minmax(13rem, 1fr); gap: 0.8rem; flex: 1; min-height: 0; }
.cuerpo > * { min-width: 0; }
.panel canvas { max-width: 100%; }
.ficha { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.45rem; }
.ficha-nombre { font-size: 2rem; }
.ficha-desc { color: var(--tenue); font-size: 0.85rem; }
.habilidad-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border-radius: 0.7rem; background: rgba(58, 160, 255, 0.14); border: 1px solid rgba(58, 160, 255, 0.35); }
.habilidad-chip .ico { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 0.55rem; display: grid; place-items: center; background: linear-gradient(180deg, #5bb2ff, #1f5fd6); color: #fff; }
.habilidad-chip .ico svg { width: 1.2rem; height: 1.2rem; }
.habilidad-chip b { display: block; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 0.95rem; line-height: 1.05; }
.habilidad-chip small { display: block; color: var(--tenue); font-size: 0.72rem; line-height: 1.15; }
.stat { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; }
.stat-fila { display: flex; justify-content: space-between; color: var(--tenue); }
.stat-fila b { color: var(--texto); }
.stat .barra-progreso i { background: linear-gradient(90deg, #ff9d14, #ffd35a); }
.escaparate { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.escaparate canvas { width: 100%; height: 100%; display: block; }
.escaparate .flecha { position: absolute; top: 50%; transform: translateY(-50%); }
.escaparate .flecha.izq { left: 0; }
.escaparate .flecha.der { right: 0; }
.puntos { position: absolute; top: 0.2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.3rem; }
.puntos i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.puntos i.si { background: var(--ambar); }
.modos { display: flex; flex-direction: column; gap: 0.55rem; justify-content: center; }
.modo { width: 100%; justify-content: flex-start; min-height: 3.2rem; font-size: 1.45rem; }
.modo svg { width: 1.5em; height: 1.5em; }
.modo .etiqueta { margin-left: auto; font-size: 0.7rem; }
.modo.principal { min-height: 4.2rem; font-size: 1.9rem; }

/* ------------------------------------------------------------------------------------------ */
/* Listas: vehículos, mapas, pilotos */

.filtros { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.filtro { padding: 0.3rem 0.8rem; border-radius: 2rem; background: rgba(8, 12, 26, 0.6); border: 1px solid var(--borde); color: var(--tenue);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 0.85rem; }
.filtro[aria-pressed='true'] { background: linear-gradient(180deg, #ffd35a, #ff9d14); color: #2a1600; border-color: transparent; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); grid-auto-rows: max-content; gap: 0.6rem; align-content: start; }
.tarjeta-veh { display: flex; flex-direction: column; text-align: left; padding: 0.5rem 0.6rem 0.6rem; gap: 0.2rem; }
.tarjeta-img { width: 100%; aspect-ratio: 2 / 1; display: block; }
.tarjeta-nombre { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.2rem; line-height: 1; }
.tarjeta-sub { color: var(--tenue); font-size: 0.72rem; }
.tarjeta-pie { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.25rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1rem; }
.tarjeta-pie svg { width: 1.1rem; height: 1.1rem; }
.tarjeta .marca { position: absolute; top: 0.4rem; right: 0.4rem; }
.mapas { display: flex; gap: 0.7rem; padding-bottom: 0.3rem; }
.tarjeta-mapa { flex: none; width: 13rem; display: flex; flex-direction: column; text-align: left; }
.tarjeta-mapa canvas { width: 100%; aspect-ratio: 16 / 10; display: block; }
.tarjeta-mapa .info { padding: 0.45rem 0.6rem 0.6rem; display: flex; flex-direction: column; gap: 0.2rem; }

/* ------------------------------------------------------------------------------------------ */
/* Mejoras */

.mejoras-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.8rem; flex: 1; min-height: 0; }
.mejoras-cuerpo > * { min-width: 0; min-height: 0; }
.fila-mejora { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 0.8rem; background: rgba(8, 12, 26, 0.45); border: 1px solid var(--borde); }
.fila-mejora .ico { width: 2.4rem; height: 2.4rem; border-radius: 0.6rem; display: grid; place-items: center; flex: none; color: #fff; }
.fila-mejora .ico svg { width: 1.4rem; height: 1.4rem; }
.fila-mejora .centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.fila-mejora .nombre { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.05rem; }
.fila-mejora .nombre small { font-style: normal; color: var(--verde); font-size: 0.72rem; text-transform: none; }
.segmentos { display: flex; gap: 2px; }
.segmentos i { flex: 1; height: 0.55rem; border-radius: 2px; background: rgba(255, 255, 255, 0.1); transform: skewX(-15deg); }
.segmentos i.si { background: linear-gradient(180deg, #ffd35a, #ff9d14); }
.fila-mejora .boton { min-width: 6.5rem; }
.ranuras { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ranura { width: 4.2rem; height: 4.2rem; border-radius: 0.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  background: rgba(8, 12, 26, 0.5); border: 1px dashed rgba(255, 255, 255, 0.25); font-size: 0.62rem; text-align: center; color: var(--tenue); position: relative; }
.ranura.llena { border-style: solid; color: var(--texto); }
.ranura svg { width: 1.6rem; height: 1.6rem; }
.ranura .nv { position: absolute; top: -0.35rem; right: -0.35rem; }
.pinturas { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.muestra { width: 2.2rem; height: 2.2rem; border-radius: 0.55rem; border: 2px solid rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; }
.muestra[aria-pressed='true'] { border-color: var(--ambar); box-shadow: 0 0 0 2px rgba(255, 176, 32, 0.4); }
.muestra .candado { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); }
.muestra .candado svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------------------------------------ */
/* Taller (taller.js): pestañas Mejoras/Taller, vista previa con las barras antes/después y las
   opciones de cada categoría */

.secciones { display: flex; align-items: center; gap: 0.3rem; }
.seccion {
  display: inline-flex; align-items: center; gap: 0.35rem; height: 2.4rem; padding: 0 0.8rem; border-radius: 0.7rem;
  font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.35rem; line-height: 1;
  color: var(--tenue); background: rgba(8, 12, 26, 0.55); border: 1px solid var(--borde);
}
.seccion .ico { width: 1.2rem; height: 1.2rem; display: grid; place-items: center; }
.seccion .ico svg { width: 100%; height: 100%; }
.seccion[aria-selected='true'] { color: #2a1600; background: linear-gradient(180deg, #ffd35a, #ff9d14); border-color: transparent; box-shadow: 0 0.3rem 0.8rem rgba(255, 157, 20, 0.35); }

.ficha-botones { display: flex; gap: 0.45rem; margin-top: auto; }
.ficha-botones .boton { flex: 1; min-width: 0; flex-direction: column; gap: 0.1rem; min-height: 3rem; padding: 0.25rem 0.4rem; font-size: 1rem; line-height: 1; }
.ficha-botones .boton svg { width: 1.35em; height: 1.35em; }

.taller-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0.8rem; flex: 1; min-height: 0; }
.taller-cuerpo > * { min-width: 0; min-height: 0; }
.taller-vista { padding: 0.6rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.taller-cab { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; margin-left: 0.5rem; }
.barra-superior .taller-nombre { font-size: 1.6rem; white-space: nowrap; }
.taller-escenario {
  position: relative; flex: 1; min-height: 7rem; border-radius: 0.7rem; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 211, 90, 0.16), transparent 70%),
    linear-gradient(180deg, transparent var(--suelo, 70%), rgba(0, 0, 0, 0.3) var(--suelo, 70%), rgba(0, 0, 0, 0.1));
}
.taller-escenario canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.taller-escenario.montaje canvas { animation: montaje 0.45s cubic-bezier(.2, 1.5, .4, 1); }
.taller-escenario.montaje::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: destello 0.5s ease-out forwards;
  background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(255, 240, 190, 0.45), transparent 70%); }
@keyframes montaje { 30% { transform: translateY(-0.35rem) scale(1.03); } }
@keyframes destello { from { opacity: 1; } to { opacity: 0; } }

.taller-datos { display: flex; flex-direction: column; gap: 0.3rem; flex: none; }
.taller-titulo { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; color: var(--tenue); margin-right: 0.15rem; }
.taller-titulo.prueba { color: #8fd0ff; }
.taller-efectos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.efecto { padding: 0.12rem 0.45rem; border-radius: 0.4rem; font-size: 0.7rem; line-height: 1.2; background: rgba(143, 208, 255, 0.14); color: #bfe3ff; border: 1px solid rgba(143, 208, 255, 0.3); }
.efecto.bueno { background: rgba(94, 224, 138, 0.14); color: #9ff0b8; border-color: rgba(94, 224, 138, 0.35); }
.efecto.malo { background: rgba(255, 81, 71, 0.14); color: #ffb0a8; border-color: rgba(255, 81, 71, 0.35); }
.taller-stats { display: flex; flex-direction: column; gap: 0.22rem; }
.stat-taller { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 3.4rem; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: var(--tenue); }
.stat-taller .valor { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.2rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.95rem; }
.stat-taller .valor b { color: var(--texto); }
.stat-taller .flecha { color: var(--tenue); }
.stat-taller .sube { color: #7dff9e !important; }
.stat-taller .baja { color: #ff8a7f !important; }
.barra-cambio { position: relative; min-width: 0; }
.barra-cambio i { background: linear-gradient(90deg, #ff9d14, #ffd35a); }
.barra-cambio b { position: absolute; top: 0; bottom: 0; border-radius: 1rem; }
.barra-cambio b.sube { background: linear-gradient(90deg, #5ee08a, #b8f06a); box-shadow: 0 0 0.5rem rgba(94, 224, 138, 0.7); }
.barra-cambio b.baja { background: repeating-linear-gradient(135deg, rgba(255, 81, 71, 0.95) 0 0.2rem, rgba(255, 81, 71, 0.45) 0.2rem 0.4rem); }

.taller-der { gap: 0.5rem; }
/* las pestañas de categoría van siempre en una fila: si no caben se aprietan, luego se quedan en su
   icono (menos la elegida) y, como último recurso, se deslizan (taller.js → ajustarCats) */
.taller-cats { display: flex; gap: 0.35rem; flex-wrap: nowrap; flex: none; padding: 0.25rem 0.25rem 0.1rem; margin: -0.25rem -0.25rem -0.1rem; }
.taller-cat { display: inline-flex; align-items: center; gap: 0.3rem; position: relative; flex: none; white-space: nowrap; padding: 0.3rem 0.75rem 0.3rem 0.55rem; }
.taller-cats.apretada { gap: 0.25rem; }
.taller-cats.apretada .taller-cat { padding: 0.3rem 0.5rem 0.3rem 0.4rem; gap: 0.2rem; font-size: 0.8rem; }
.taller-cats.menuda .taller-cat { padding: 0.28rem 0.45rem 0.28rem 0.35rem; font-size: 0.7rem; }
.taller-cats.menuda .taller-cat .ico { width: 1rem; height: 1rem; }
.taller-cats.solo-icono .taller-cat:not([aria-selected='true']) { padding: 0.3rem 0.5rem; }
.taller-cats.solo-icono .taller-cat:not([aria-selected='true']) .ico { width: 1.15rem; height: 1.15rem; }
.taller-cats.solo-icono .taller-cat:not([aria-selected='true']) .nombre-cat { display: none; }
.taller-cat .ico { width: 1.15rem; height: 1.15rem; display: grid; place-items: center; }
.taller-cat .ico svg { width: 100%; height: 100%; }
.taller-cat[aria-selected='true'] { background: linear-gradient(180deg, #ffd35a, #ff9d14); color: #2a1600; border-color: transparent; }
.taller-cat .punto { position: absolute; top: -0.15rem; right: -0.15rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #7dff9e; border: 2px solid #0b1020; }
.rejilla-opciones { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); grid-auto-rows: max-content; gap: 0.55rem; align-content: start; padding: 0.15rem 0.15rem 0.3rem; }
.opcion { display: flex; flex-direction: column; text-align: left; padding: 0.4rem 0.5rem 0.5rem; gap: 0.2rem; cursor: pointer; outline-offset: 2px; }
.opcion:active { transform: scale(0.97); }
.opcion.montada { border-color: var(--ambar); box-shadow: 0 0 0 2px var(--ambar), 0 0.4rem 1.2rem rgba(255, 176, 32, 0.25); }
.opcion.a-prueba { border-color: #5bb2ff; box-shadow: 0 0 0 2px #5bb2ff, 0 0.4rem 1.2rem rgba(58, 160, 255, 0.3); }
.opcion .miniatura { position: relative; border-radius: 0.55rem; overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(255, 211, 90, 0.12), transparent 70%), rgba(0, 0, 0, 0.22); }
.opcion .miniatura canvas { width: 100%; aspect-ratio: 2 / 1; display: block; }
.opcion .marca { position: absolute; top: 0.25rem; right: 0.25rem; font-size: 0.68rem; color: #2a1600; background: linear-gradient(180deg, #ffd35a, #ff9d14); }
.opcion .marca.prueba { color: #fff; background: linear-gradient(180deg, #5bb2ff, #1f5fd6); }
.opcion .tarjeta-nombre { font-size: 1.05rem; }
/* hasta tres líneas: la pega de la pieza suele ir al final de la frase y no se puede perder */
.opcion .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; min-height: 2.4em; }
.opcion .tarjeta-pie { margin-top: auto; }
.opcion .tarjeta-pie.montado { color: #ffd35a; }
.opcion .tarjeta-pie.comprado { color: #7dff9e; }
.opcion .tarjeta-pie.precio { color: #ffd35a; }
.opcion .tarjeta-pie.precio.caro { color: #ff8a7f; }
.opcion .comprar { margin-top: auto; align-self: stretch; min-height: 2rem; font-size: 1rem; gap: 0.3em; }
.opcion .comprar svg { width: 1.1em; height: 1.1em; }
.opcion .comprar.caro span:last-child { color: #a8170c; }
.opcion .comprar.no { animation: no 0.35s; }
/* aviso de la compra en un globo sobre la tarjeta tocada, con el pico hacia su botón */
.opcion .globo { position: absolute; left: 0.35rem; right: 0.35rem; z-index: 3; padding: 0.35rem 0.5rem; border-radius: 0.6rem;
  font-size: 0.78rem; line-height: 1.15; text-align: center; pointer-events: none; background: rgba(8, 12, 26, 0.96); border: 1px solid var(--borde);
  box-shadow: 0 0.3rem 0.9rem rgba(0, 0, 0, 0.5); animation: globo 2.2s ease-out forwards; }
.opcion .globo::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -0.35rem; border: 0.35rem solid transparent; border-top-color: inherit; }
.opcion .globo.bien { border-color: rgba(94, 224, 138, 0.75); color: #c9f7d7; }
.opcion .globo.error { border-color: rgba(255, 81, 71, 0.8); color: #ffd0cb; }
@keyframes globo { from { opacity: 0; transform: translateY(0.4rem) scale(0.85); } 10%, 85% { opacity: 1; transform: none; } to { opacity: 0; } }
@keyframes no { 20%, 60% { translate: -0.3rem 0; } 40%, 80% { translate: 0.3rem 0; } }

@media (max-height: 420px) {
  .seccion { height: 2.2rem; font-size: 1.2rem; padding: 0 0.65rem; }
  .barra-superior .taller-nombre { font-size: 1.35rem; }
}

/* ------------------------------------------------------------------------------------------ */
/* Vestuario (vestuario.js): los pilotos arriba, el elegido de pie y sentado en su vehículo, y las
   prendas de cada hueco en tarjetas como las del taller */

.vest-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.8rem; flex: 1; min-height: 0; }
.vest-cuerpo > * { min-width: 0; min-height: 0; }
.vest-vista { padding: 0.5rem 0.6rem 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.vest-pilotos { display: flex; gap: 0.35rem; flex: none; padding: 0.2rem; margin: -0.2rem; }
.vest-piloto { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; display: grid; place-items: center;
  background: rgba(8, 12, 26, 0.55); border: 2px solid var(--borde); }
.vest-piloto canvas { width: 100%; height: 100%; display: block; border-radius: 0.65rem; }
.vest-piloto[aria-pressed='true'] { border-color: var(--ambar); box-shadow: 0 0 0 2px rgba(255, 176, 32, 0.4);
  background: radial-gradient(circle at 50% 75%, rgba(255, 211, 90, 0.35), rgba(8, 12, 26, 0.55) 70%); }
.vest-piloto .punto { position: absolute; top: -0.2rem; right: -0.2rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #7dff9e; border: 2px solid #0b1020; }
.vest-piloto.mas { color: var(--tenue); border-style: dashed; }
.vest-piloto.mas svg { width: 1.2rem; height: 1.2rem; }

/* el nombre y su etiqueta, en la barra de arriba: ceden sitio (se cortan) antes que las pestañas o el dinero */
.vest-cab { flex: 0 1 auto; overflow: hidden; }
.vest-cab .taller-nombre { overflow: hidden; text-overflow: ellipsis; }
.vest-escenario { position: relative; flex: 1; min-height: 8rem; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.4rem; }
.vest-pie-lienzo, .vest-sentado { position: relative; min-width: 0; min-height: 0; border-radius: 0.7rem; overflow: hidden; }
.vest-pie-lienzo { background: radial-gradient(ellipse 65% 30% at 50% 97%, rgba(255, 211, 90, 0.22), transparent 70%), linear-gradient(180deg, transparent 90%, rgba(0, 0, 0, 0.25)); }
.vest-sentado { background: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(255, 211, 90, 0.12), transparent 70%), rgba(0, 0, 0, 0.22); }
.vest-escenario canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.vest-veh { position: absolute; left: 0.35rem; bottom: 0.35rem; font-size: 0.68rem; color: var(--tenue); }
.vest-escenario.montaje canvas { animation: montaje 0.45s cubic-bezier(.2, 1.5, .4, 1); }
.vest-escenario.montaje::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: destello 0.5s ease-out forwards;
  background: radial-gradient(ellipse 45% 60% at 30% 55%, rgba(255, 240, 190, 0.45), transparent 70%); }

.vest-pie { display: flex; align-items: center; gap: 0.5rem; flex: none; min-height: 2rem; }
.vest-probando { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.vest-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; }
.vest-chip .x { width: 0.75rem; height: 0.75rem; display: grid; opacity: 0.85; }
.vest-chip .x svg { width: 100%; height: 100%; }
.vest-pista { font-size: 0.75rem; line-height: 1.15; }

.vest-der { gap: 0.5rem; }
.vest-huecos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; flex: none; padding: 0.25rem 0.25rem 0.1rem; margin: -0.25rem -0.25rem -0.1rem; }
.vest-hueco { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 0; min-height: 2.2rem; padding: 0.3rem 0.45rem; }
.vest-hueco .ico { width: 1.15rem; height: 1.15rem; display: grid; place-items: center; flex: none; }
.vest-hueco .ico svg { width: 100%; height: 100%; }
.vest-hueco .nombre-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vest-hueco[aria-selected='true'] { background: linear-gradient(180deg, #ffd35a, #ff9d14); color: #2a1600; border-color: transparent; }
.vest-hueco .punto { position: absolute; top: -0.15rem; right: -0.15rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #7dff9e; border: 2px solid #0b1020; }
.vest-hueco .punto.prueba { background: #5bb2ff; }
.vest-prendas { grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); }
.vest-prenda .miniatura canvas { aspect-ratio: 5 / 4; }
.vest-prenda .tarjeta-nombre { font-size: 0.98rem; }
.vest-prenda .marca.serie { right: auto; left: 0.25rem; color: #cfe6ff; background: rgba(8, 12, 26, 0.72); }
.vest-prenda .tarjeta-pie.precio.gemas:not(.caro) { color: #8ff5e6; }
.vest-prenda .poner { margin-top: auto; align-self: stretch; min-height: 2rem; font-size: 1rem; gap: 0.3em; }
.vest-prenda .poner svg { width: 1.1em; height: 1.1em; }

/* en vertical (tabletas: en el móvil se pide girarlo), la vista arriba y las prendas debajo */
@media (orientation: portrait) {
  .vest-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(16rem, 1fr) minmax(0, 1.15fr); }
  .vest-cab { display: none; }   /* no cabe: quién es ya se ve en su cabeza, arriba de la vista */
}

/* ------------------------------------------------------------------------------------------ */
/* Modales y avisos */

.modal-capa { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(4, 8, 18, 0.62); animation: aparecer 0.2s ease-out; }
@keyframes aparecer { from { opacity: 0; } }
.modal { width: min(34rem, 94vw); max-height: 92vh; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; animation: crecer 0.22s ease-out; }
@keyframes crecer { from { transform: scale(0.94); opacity: 0; } }
.modal .titulo { font-size: 1.8rem; }
.modal-botones { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.toast { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 60; padding: 0.55rem 1rem; border-radius: 0.7rem;
  background: rgba(8, 12, 26, 0.9); border: 1px solid var(--borde); font-weight: 700; animation: aparecer 0.2s; pointer-events: none; }
.toast.error { border-color: rgba(255, 81, 71, 0.6); }

.premios { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.premio { width: 6.2rem; padding: 0.5rem; border-radius: 0.8rem; background: rgba(8, 12, 26, 0.55); border: 1px solid var(--borde); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center;
  animation: premio 0.4s cubic-bezier(.2, 1.4, .4, 1) both; }
.premio svg, .premio canvas { width: 2.4rem; height: 2.4rem; }
.premio b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.05rem; }
.premio small { color: var(--tenue); font-size: 0.66rem; line-height: 1.1; }
@keyframes premio { from { transform: scale(0.3) rotate(-8deg); opacity: 0; } }

/* ------------------------------------------------------------------------------------------ */
/* Carrera: capa, HUD, pedales */

.capa-juego { position: absolute; inset: 0; z-index: 20; background: #000; touch-action: none; }
.lienzo-juego { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud.oculto { display: none; }
.hud-arriba { position: absolute; left: max(0.7rem, env(safe-area-inset-left)); right: max(0.7rem, env(safe-area-inset-right)); top: max(0.5rem, env(safe-area-inset-top)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 0.6rem; }
.hud-izq { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.hud-der { display: flex; gap: 0.45rem; justify-content: flex-end; align-items: center; pointer-events: auto; }
.hud-gasolina { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem 0.3rem 0.35rem; border-radius: 0.7rem; background: rgba(8, 12, 26, 0.6); border: 1px solid var(--borde); }
.hud-ico { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; }
.hud-ico svg { width: 100%; height: 100%; }
.hud-barra { width: 9rem; height: 0.8rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.5); overflow: hidden; position: relative; }
.hud-barra::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 24.5%, rgba(0, 0, 0, 0.35) 24.5% 25%); }
.hud-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5147, #ffd35a 40%, #5ee08a); transition: width 0.15s linear; }
.hud-gasolina.bajo { animation: alertaGas 0.6s infinite alternate; }
@keyframes alertaGas { to { box-shadow: 0 0 0 2px rgba(255, 81, 71, 0.8), 0 0 1rem rgba(255, 81, 71, 0.6); } }
.hud-pasiva { display: flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem 0.2rem 0.25rem; border-radius: 0.6rem; background: rgba(8, 12, 26, 0.5); font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 0.78rem; text-transform: uppercase; color: var(--tenue); }
.hud-pasiva .ico { width: 1.3rem; height: 1.3rem; display: grid; place-items: center; color: #5bb2ff; }
.hud-pasiva .ico svg { width: 1rem; height: 1rem; }
.hud-pasiva.activa { color: #fff; background: rgba(31, 95, 214, 0.75); }
.hud-centro { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.hud-distancia { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 2.7rem; line-height: 0.95; color: #fff;
  text-shadow: 0 0.15rem 0 rgba(0, 0, 0, 0.45), 0 0 1rem rgba(0, 0, 0, 0.4); font-variant-numeric: tabular-nums; }
.hud-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.9rem; color: #dfe7f3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.hud-sub.record { color: var(--oro); }
.hud-progreso { display: flex; align-items: center; gap: 0.35rem; }
.hud-prog-linea { position: relative; width: 12rem; height: 0.35rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.45); }
.hud-prog-linea i { position: absolute; top: 50%; width: 0.7rem; height: 0.7rem; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(0, 0, 0, 0.5); }
.hud-prog-linea i.yo { background: var(--ambar); z-index: 2; width: 0.9rem; height: 0.9rem; }
.hud-prog-meta svg { width: 1rem; height: 1rem; color: #fff; }
.hud-posicion { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 1.9rem; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); margin-right: 0.3rem; }
.hud-posicion small { font-size: 0.55em; opacity: 0.8; }
/* Cuadro de instrumentos (marcadores.js): abajo en el centro, entre los pedales. El alto manda y el
   ancho sale de la proporción de cada estilo (--aspecto); nunca más ancho que el hueco libre. */
.hud-marcador { position: absolute; left: 50%; bottom: max(0.25rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: block;
  --alto-marcador: min(7.6rem, calc((100vw - 26rem) / var(--aspecto, 2.4))); height: var(--alto-marcador); width: calc(var(--alto-marcador) * var(--aspecto, 2.4)); pointer-events: none; }
/* En la cuenta atrás (juego/arranque.js) el cuadro crece: el tacómetro enseña la zona óptima de la
   salida y tiene que leerse en un móvil. Solo cambia de tamaño al entrar y al salir (se hornea dos
   veces: nada de escalarlo, que lo emborrona) */
.hud.en-cuenta .hud-marcador { --alto-marcador: min(9.5rem, calc((100vw - 22rem) / var(--aspecto, 2.4))); }
.hud-alerta { position: absolute; inset: 0; box-shadow: inset 0 0 6rem rgba(255, 40, 30, 0.55); opacity: 0; transition: opacity 0.3s; }
.hud-alerta.activa { animation: latido 0.9s infinite; }
@keyframes latido { 50% { opacity: 1; } }

.pedal { position: absolute; bottom: max(0.8rem, env(safe-area-inset-bottom)); width: 6.2rem; height: 8.2rem; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; touch-action: none; }
.pedal-freno { left: max(1rem, env(safe-area-inset-left)); height: 7.2rem; }
.pedal-gas { right: max(1rem, env(safe-area-inset-right)); }
.pedal-placa {
  flex: 1; width: 100%; border-radius: 1rem 1rem 0.8rem 0.8rem; padding: 0.7rem 0.6rem; display: flex; flex-direction: column; justify-content: space-around;
  background: linear-gradient(160deg, #f1f4f8 0%, #b9c2cf 45%, #7d8796 100%);
  border: 2px solid rgba(20, 26, 40, 0.8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -0.4rem 0 rgba(0, 0, 0, 0.18), 0 0.5rem 0 #1a2030, 0 0.8rem 1.2rem rgba(0, 0, 0, 0.45);
  transform: perspective(20rem) rotateX(12deg); transition: transform 0.06s, box-shadow 0.06s;
}
.pedal-placa i { display: block; height: 0.45rem; border-radius: 1rem; background: linear-gradient(180deg, #6d7684, #a9b3c1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.pedal-texto { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 0.95rem; padding: 0.05rem 0.7rem; border-radius: 0.4rem; color: #fff; }
.pedal-freno .pedal-texto { background: var(--rojo-2); }
.pedal-gas .pedal-texto { background: var(--verde-2); }
.pedal[data-pulsado] .pedal-placa { transform: perspective(20rem) rotateX(26deg) translateY(0.35rem); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 0.15rem 0 #1a2030, 0 0.3rem 0.6rem rgba(0, 0, 0, 0.45); filter: brightness(0.92); }
.hud-botones { position: absolute; right: calc(max(1rem, env(safe-area-inset-right)) + 7rem); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0.6rem; pointer-events: auto; }
.boton-especial { position: relative; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; touch-action: none;
  background: radial-gradient(circle at 40% 30%, #3a4a70, #141c34); border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.5); opacity: 0.8; }
.boton-especial .anillo { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(#4ff0ff var(--carga, 0%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); }
.boton-especial.habilidad .anillo { background: conic-gradient(#ffd35a var(--carga, 0%), transparent 0); }
.boton-especial .ico { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; color: #fff; }
.boton-especial .ico svg { width: 100%; height: 100%; }
.boton-especial.lista { opacity: 1; animation: listo 1.2s infinite; }
.boton-especial.activo { opacity: 1; background: radial-gradient(circle at 40% 30%, #ffd35a, #ff7a10); }
.boton-especial[data-pulsado] { transform: scale(0.93); }
@keyframes listo { 50% { box-shadow: 0 0 0 0.35rem rgba(255, 211, 90, 0.25), 0 0.35rem 0.9rem rgba(0, 0, 0, 0.5); } }
/* sin gasolina ni el nitro ni la habilidad funcionan: el botón se queda en gris, quieto, hasta que vuelve */
.boton-especial.seco { opacity: 0.5; filter: grayscale(1) brightness(0.75); animation: none; transition: opacity 0.25s, filter 0.25s; }
/* se han caído las botellas del nitro: el botón se apaga en gris, da un respingo y se va */
.boton-especial.perdido { pointer-events: none; animation: botonPerdido 0.7s ease-in forwards; }
@keyframes botonPerdido { 0% { filter: none; } 20% { transform: scale(1.18); filter: grayscale(1) brightness(1.5); opacity: 1; } 100% { transform: scale(0.25) rotate(-35deg); filter: grayscale(1); opacity: 0; } }

.hud-avisos { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.aviso { display: flex; flex-direction: column; align-items: center; animation: aviso 1.9s ease-out forwards; }
.aviso b { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 2.3rem; letter-spacing: 0.02em; line-height: 1; color: #fff;
  text-shadow: 0 0.18rem 0 rgba(0, 0, 0, 0.5), 0 0 1.2rem rgba(0, 0, 0, 0.45); white-space: nowrap; }
.aviso span { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.5rem; color: #fff3b0; text-shadow: 0 0.12rem 0 rgba(0, 0, 0, 0.5); }
.aviso.oro b { color: var(--oro); }
.aviso.verde b { color: #7dff9e; }
.aviso.azul b { color: #8fd0ff; }
.aviso.rojo b { color: #ff7a6b; }
@keyframes aviso { 0% { opacity: 0; transform: scale(0.6) rotate(-4deg); } 12% { opacity: 1; transform: scale(1.1) rotate(-3deg); } 22% { transform: scale(1) rotate(-3deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1.5rem) rotate(-3deg); } }
.hud-cuenta { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 7rem; color: #fff;
  text-shadow: 0 0.3rem 0 rgba(0, 0, 0, 0.5), 0 0 2rem rgba(0, 0, 0, 0.5); }
.hud-cuenta.pulso { animation: cuenta 0.8s ease-out; }
@keyframes cuenta { from { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }
/* la ayuda de las primeras salidas con revoluciones (juego/arranque.js): bajo el número de la cuenta, justo encima del cuadro */
.hud-ayuda-arranque { position: absolute; left: 50%; bottom: calc(max(0.25rem, env(safe-area-inset-bottom)) + 9.5rem + 0.35rem); transform: translateX(-50%); white-space: nowrap; padding: 0.12rem 0.75rem; border-radius: 99px; background: rgba(8, 12, 26, 0.62);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem; color: #fff; text-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.5); pointer-events: none; }
.hud-ayuda-arranque b { color: #7dff9e; }

.pausa { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(4, 8, 18, 0.6); }
.pausa-panel { padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 16rem; align-items: stretch; }
.pausa-panel .titulo { font-size: 2.6rem; text-align: center; }

/* ------------------------------------------------------------------------------------------ */
/* Resultados */

.resultados { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(4, 8, 18, 0.55); animation: aparecer 0.3s; padding: 0.8rem; }
.resultados-panel { width: min(40rem, 96vw); max-height: calc(100vh - 2.4rem); overflow-y: auto; touch-action: pan-y; padding: 0.9rem 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; scrollbar-width: none; }
.resultados-panel .cinta { margin-top: 0; }
.resultados-panel.copa .linea-res { padding: 0.05rem 0; }
.cinta { align-self: center; margin-top: -1.8rem; padding: 0.35rem 1.8rem; font-size: 1.9rem; color: #fff; transform: skewX(-8deg);
  background: linear-gradient(180deg, #ff6b5a, #c8231c); border-radius: 0.5rem; box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.4); }
.cinta.buena { background: linear-gradient(180deg, #ffd35a, #ff9d14); color: #2a1600; }
.cinta > span { display: inline-block; transform: skewX(8deg); }
.linea-res { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; font-size: 0.95rem; padding: 0.2rem 0; }
.linea-res .num { font-size: 1.2rem; display: flex; align-items: center; gap: 0.3rem; }
.linea-res .num svg { width: 1.1rem; height: 1.1rem; }
.linea-res.total { margin-top: 0.2rem; padding: 0.4rem 0.7rem; border-radius: 0.7rem; background: rgba(0, 0, 0, 0.35); }
.linea-res.total .num { font-size: 1.7rem; color: var(--oro); }
.dist-grande { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 3rem; line-height: 1; }
.sello { padding: 0.3rem 0.7rem; border-radius: 0.5rem; background: linear-gradient(180deg, #ffd35a, #ff9d14); color: #2a1600; transform: rotate(4deg); font-size: 1.05rem; }
.tabla-copa { display: flex; flex-direction: column; gap: 0.3rem; }
.tabla-copa .fila { display: grid; grid-template-columns: 2rem 2.6rem 1fr auto auto; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 0.6rem; background: rgba(8, 12, 26, 0.45); }
.tabla-copa .fila.yo { background: rgba(255, 176, 32, 0.18); border: 1px solid rgba(255, 176, 32, 0.5); }
.tabla-copa canvas { width: 2.6rem; height: 2.6rem; }

/* ------------------------------------------------------------------------------------------ */
/* Carga y orientación */

.carga { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1d2a4e, #070b18 75%); transition: opacity 0.4s; }
.carga.fuera { opacity: 0; pointer-events: none; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.logo .titulo { font-size: 4.2rem; background: linear-gradient(180deg, #ffe38a, #ff9d14); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0.25rem 0 rgba(0, 0, 0, 0.45)); }
.logo small { color: var(--tenue); letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.8rem; }
.carga .barra-progreso { width: 16rem; margin-top: 1rem; height: 0.5rem; }
.girar { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; text-align: center; padding: 2rem; background: #070b18; font-size: 18px; }
@media (orientation: portrait) and (max-width: 700px) { .girar { display: grid; } }
.girar svg { width: 64px; height: 64px; margin-bottom: 12px; animation: gira 1.6s infinite; }
@keyframes gira { 50% { transform: rotate(90deg); } }

/* Pantallas bajas (móviles en horizontal): todo un poco más compacto */
@media (max-height: 420px) {
  .pestana { min-width: 4.2rem; padding: 0.2rem 0.5rem; }
  .modo.principal { min-height: 3.6rem; }
}
.hud-clima .ico { color: #bfe3ff; }
.hud-clima.nuevo { animation: chipClima 0.7s ease-out; }
@keyframes chipClima { 30% { transform: scale(1.14); color: #fff; background: rgba(31, 95, 214, 0.75); } }
.hud-prevision { display: flex; align-items: center; gap: 0.05rem; margin-left: 0.1rem; padding-left: 0.3rem; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.hud-prevision .flecha { width: 0.75rem; height: 0.75rem; display: grid; place-items: center; color: #ffd35a; }
.hud-prevision .flecha svg { width: 100%; height: 100%; }
.hud-clima .hud-prevision .ico { color: #ffd35a; animation: prevision 0.9s ease-in-out infinite alternate; }
@keyframes prevision { from { opacity: 0.5; } to { opacity: 1; } }

/* Finales de la carrera (juego/hud.js → final): cartel grande con banda que cruza, letras que entran
   de golpe, la gasolina agotada que parpadea y los mandos que se apartan */
.hud.en-final .pedal, .hud.en-final .hud-botones, .hud.en-final .hud-marcador, .hud.en-final .hud-centro, .hud.en-final .hud-der > .boton-redondo { opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.hud-final { position: absolute; left: 0; right: 0; top: 27%; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; pointer-events: none; --banda: rgba(150, 12, 14, 0.9); --banda-2: rgba(96, 6, 8, 0.82); --letra: #fff; --perfil: #3a0506; }
.hud-final-banda { position: absolute; left: -4%; right: -4%; top: clamp(1.2rem, 4.2vw, 2.3rem); height: clamp(3.6rem, 12vw, 5.6rem); translate: 0 -50%; transform: skewY(-3deg) scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--banda-2) 14%, var(--banda) 50%, var(--banda-2) 86%, transparent);
  box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.25); animation: bandaFinal 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.hud-final b { position: relative; display: flex; font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: clamp(2.6rem, 8.5vw, 4.6rem); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; transform: rotate(-3deg); }
.hud-final b i { display: inline-block; font-style: inherit; color: var(--letra); opacity: 0; -webkit-text-stroke: 0.14rem var(--perfil); paint-order: stroke fill;
  text-shadow: 0 0.25rem 0 rgba(0, 0, 0, 0.5), 0 0 1.4rem rgba(0, 0, 0, 0.45); animation: letraFinal 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.hud-final-detalle { position: relative; margin-top: 0.15rem; padding: 0.05rem 0.9rem; border-radius: 1rem; background: rgba(8, 12, 26, 0.72); font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 1.55rem; color: #fff; font-variant-numeric: tabular-nums; opacity: 0; animation: aparecerFinal 0.3s 0.5s forwards; }
.hud-final-pista { position: absolute; left: 50%; bottom: max(1.1rem, env(safe-area-inset-bottom)); translate: -50% 0; white-space: nowrap; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); animation: pistaFinal 0.9s ease-in-out infinite alternate; }
@keyframes bandaFinal { to { transform: skewY(-3deg) scaleX(1); } }
@keyframes letraFinal { from { opacity: 0; transform: translateY(-1.3rem) scale(2.5) rotate(-14deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes aparecerFinal { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@keyframes pistaFinal { from { opacity: 0.35; } to { opacity: 0.95; } }
/* KO y vuelco: el cartel tiembla al llegar */
.hud-final.ko b { animation: temblorFinal 0.5s 0.32s; }
@keyframes temblorFinal { 20% { translate: -0.4rem 0.12rem; } 40% { translate: 0.34rem -0.16rem; } 60% { translate: -0.22rem 0.05rem; } 80% { translate: 0.12rem 0; } }
.hud-final.agua { --banda: rgba(20, 110, 190, 0.88); --banda-2: rgba(8, 60, 120, 0.8); --perfil: #062446; }
.hud-final.lava { --banda: rgba(220, 70, 10, 0.9); --banda-2: rgba(120, 22, 4, 0.82); --letra: #ffe27a; --perfil: #3a0a00; }
.hud-final.vacio { --banda: rgba(70, 40, 150, 0.88); --banda-2: rgba(24, 12, 60, 0.82); --perfil: #12062e; }
.hud-final.gasolina { --banda: rgba(40, 34, 30, 0.9); --banda-2: rgba(16, 14, 12, 0.82); --letra: #ffb020; --perfil: #1a0e00; }
.hud-final.rendido { --banda: rgba(30, 40, 60, 0.85); --banda-2: rgba(12, 16, 28, 0.8); }
/* meta: bandera a cuadros que ondea (los cuadros corren y la banda se mece) y letras doradas; va
   arriba, entre la gasolina y las monedas, y el arco de meta queda por debajo (render.js, foco 'meta') */
.hud-final.meta { top: max(0.5rem, 2.5%); --letra: var(--oro); --perfil: #2a1a00; }
.hud-final.meta .hud-final-banda { left: 50%; right: auto; width: min(30rem, 62vw); height: clamp(3rem, 10vw, 4.6rem); translate: -50% -50%; transform-origin: center; opacity: 0.9; overflow: hidden; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  animation: bandaFinal 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) forwards, ondeaFinal 1.2s ease-in-out 0.3s infinite alternate; }
.hud-final.meta .hud-final-banda::before { content: ''; position: absolute; inset: 0 -2.3rem 0 0; background: repeating-conic-gradient(#15171b 0 25%, #f4f5f7 0 50%) 0 0 / 1.15rem 1.15rem; animation: cuadrosFinal 0.9s linear infinite; }
.hud-final.meta b i { animation: letraFinal 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) forwards, saltoFinal 0.9s ease-in-out 1s infinite alternate; }
@keyframes cuadrosFinal { to { transform: translateX(-2.3rem); } }
@keyframes ondeaFinal { from { transform: skewY(-3deg) scaleX(1); } to { transform: skewY(-1deg) scaleX(1) scaleY(0.9); } }
@keyframes saltoFinal { from { transform: none; } to { transform: translateY(-0.18rem); } }
/* depósito vacío: el indicador parpadea en rojo */
.hud-gasolina.agotada { border-color: rgba(255, 81, 71, 0.9); animation: gasAgotada 0.8s infinite; }
.hud-gasolina.agotada .hud-ico { color: #ff6a5e; }
@keyframes gasAgotada { 0%, 45% { background: rgba(8, 12, 26, 0.6); box-shadow: none; } 50%, 95% { background: rgba(196, 26, 18, 0.88); box-shadow: 0 0 0 2px rgba(255, 81, 71, 0.9), 0 0 1.2rem rgba(255, 60, 40, 0.8); } }