/* ============================================================
   CARRERAS — identidad "PANEL DE BOXES"
   Los menús no son una pantalla de juego: son el panel de
   cronometraje de un circuito. Todo sale de materiales reales
   del mundo del motor — asfalto, tiza de pista, pianos,
   señalización y el código de color del cronometraje.
   ============================================================ */


:root {
  /* --- superficies: ASFALTO DE NOCHE, no "gris de interfaz" ---
     Los grises neutros de antes leian como el fondo por defecto de cualquier
     app. Estos llevan una pizca de azul-verde: es la diferencia entre un gris
     y una carretera mojada bajo una farola. */
  --asfalto: #1b2128;
  --asfalto-alto: #242c34;
  --asfalto-hondo: #0d1116;
  --asfalto-filo: #070a0d;   /* el borde de la noche, para los degradados */
  --velo: 11, 15, 20;        /* el fondo en RGB suelto, para velos y sombras */
  --linea: rgba(240, 236, 225, .14);

  /* --- tinta: la tiza con la que se pinta la pista --- */
  --tiza: #f0ece1;
  --tiza-media: rgba(240, 236, 225, .62);
  /* .38 daba 3,11:1 de contraste sobre el asfalto, por debajo del minimo
     legible (4,5), y es el color de casi todo el texto de apoyo del juego: los
     pies de las tejas, los datos de la liga, las fechas del archivo. Al sol,
     en un movil, eso no se lee. .62 lo sube por encima del minimo sin cambiar
     el aspecto. */
  --tiza-baja: rgba(240, 236, 225, .62);

  /* --- acentos del kit de circuito --- */
  --piano: #d63a2a;          /* el rojo del piano: estructura, no adorno */
  --senal: #f5c518;          /* amarillo de señal: avisos y bloqueos */

  /* --- código real de cronometraje --- */
  --mejor-absoluto: #b06cf5; /* morado: el tiempo a batir */
  --mejor-propio: #3fd07a;   /* verde: tu marca */
  --peor: #ff7d6a;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  /* el mismo suelo que los paneles: si el cuerpo se queda plano, se ve la
     costura en cuanto algo no cubre la pantalla entera */
  background:
    radial-gradient(120% 62% at 50% 26%, rgba(150, 178, 205, .1) 0%, transparent 70%),
    linear-gradient(168deg, var(--asfalto-hondo) 0%, #131922 46%, var(--asfalto-filo) 100%);
  background-attachment: fixed;
  font-family: var(--mono);
  color: var(--tiza);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

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

.oculto { display: none !important; }

/* ---------- LA FIRMA: encintado de piano ----------
   Cada panel va encintado con el piano rojo-blanco del borde de
   pista, y el piano avanza despacio: estás parado en un tramo de
   circuito, no en un menú. */
@keyframes pianoCorre {
  to { background-position: 96px 0, 96px 0; }
}

.panel {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* `safe` es la diferencia entre centrado y roto: cuando el contenido es mas
     alto que la pantalla —lo normal en un movil— el centrado normal empuja lo
     de arriba FUERA de la ventana y ya no hay forma de llegar a ello ni
     desplazandose. Con safe, en cuanto no cabe, se alinea arriba. */
  justify-content: center;
  justify-content: safe center;
  gap: 18px;
  padding: 46px 26px;
  /* EL FONDO: un tramo de asfalto de noche bajo un foco, no una capa gris.
     Cuatro capas, de arriba abajo:
       1. el GRANO del asfalto (ruido fino) — sin esto cualquier oscuro se lee
          como color plano, y es lo que mas delata a una interfaz
       2. las MARCAS DE NEUMATICO: dos barridos diagonales larguisimos y casi
          invisibles, que dan direccion y velocidad sin dibujar nada
       3. el FOCO: una elipse de luz ancha y alta, que empuja el contenido
          hacia delante y deja las esquinas en penumbra
       4. el SUELO: el degradado de la noche, mas hondo por los bordes */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E"),
    repeating-linear-gradient(107deg,
      rgba(255, 255, 255, .022) 0 2px,
      transparent 2px 5px,
      rgba(0, 0, 0, .05) 5px 9px,
      transparent 9px 260px),
    radial-gradient(120% 62% at 50% 26%,
      rgba(150, 178, 205, .13) 0%,
      rgba(120, 145, 175, .05) 42%,
      transparent 72%),
    linear-gradient(168deg,
      var(--asfalto-hondo) 0%,
      #131922 46%,
      var(--asfalto-filo) 100%);
  background-size: 160px 160px, auto, auto, auto;
  /* soft-light y no overlay: el ruido tiene que ENSUCIAR el asfalto, no
     dibujarse encima. Con overlay a poco que suba se ve la estatica. */
  background-blend-mode: soft-light, normal, screen, normal;
  backdrop-filter: blur(3px);
  text-align: left;
  z-index: 10;
  overflow-y: auto;
}
.panel::before,
.panel::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  height: 14px;
  background-image:
    repeating-linear-gradient(90deg, var(--piano) 0 48px, transparent 48px 96px),
    linear-gradient(var(--tiza), var(--tiza));
  background-size: 96px 100%, 100% 100%;
  animation: pianoCorre 3.6s linear infinite;
}
.panel::before { top: 0; }
.panel::after { bottom: 0; animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .panel::before, .panel::after { animation: none; }
  /* quien pide menos movimiento no recibe el levantamiento de las tarjetas ni
     el zoom de la estampa: se queda el cambio de color, que informa igual */
  .pieza, .pieza canvas, .pieza::before { transition: none; }
  .pieza:hover, .pieza:focus-visible, .pieza:active { transform: none; }
  .pieza:hover canvas { transform: none; }
}

/* contenido centrado en columna, alineado a la izquierda dentro */
.panel > * { width: min(620px, 100%); margin-inline: auto; }

/* ---------- tipografía ---------- */
h1 {
  font-family: var(--display);
  font-size: clamp(56px, 15vw, 104px);
  line-height: .84;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tiza);
}
h2 {
  font-family: var(--display);
  font-size: clamp(32px, 8vw, 46px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* eyebrow: la etiqueta pequeña que encabeza cada bloque de datos */
.sub, .cartelEtiqueta, .ayuda.apretada {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tiza-baja);
}

.damero {
  height: 10px;
  width: 100%;
  background: repeating-conic-gradient(var(--tiza) 0% 25%, var(--asfalto-hondo) 0% 50%) 0 0 / 10px 10px;
}

.dato { font-size: 13px; color: var(--tiza-media); line-height: 1.5; }
.ayuda { font-size: 12px; color: var(--tiza-baja); line-height: 1.6; }
#avisoCopiado { user-select: text; -webkit-user-select: text; word-break: break-all; }

/* aviso de reto: no una píldora, una cinta de señalización */
.dato.reto {
  display: block;
  border-left: 5px solid var(--senal);
  background: rgba(245, 197, 24, .09);
  color: var(--senal);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 10px 14px;
}

/* tiempos: siempre mono, tabulares, con el peso de un crono */
.tiempoGrande {
  font-family: var(--mono);
  font-size: clamp(46px, 13vw, 68px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--mejor-propio);
}
.cinta { font-size: 24px; letter-spacing: .04em; }

/* ---------- CARTEL DE LA PISTA DE HOY ---------- */
#cartelDia {
  display: grid;
  gap: 6px;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--piano);
  padding: 16px 18px;
}
#cartelMundo {
  font-family: var(--display);
  font-size: clamp(26px, 6.5vw, 38px);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--tiza);
}
#cartelDatos { font-size: 12px; color: var(--tiza-media); font-variant-numeric: tabular-nums; }
#cartelCuenta { color: var(--senal); }

/* ---------- BOTONES: paneles de señalización, no píldoras ---------- */
button {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tiza);
  background: var(--asfalto-alto);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--tiza-baja);
  border-radius: 2px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  transition: background .12s linear, border-color .12s linear, transform .08s linear;
}
button:hover { background: #343a43; border-left-color: var(--tiza); }
button:active { transform: translateX(2px); }
button:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: wait; }

/* el botón principal es el panel de salida: piano a la izquierda y flecha */
button.principal {
  font-family: var(--display);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--asfalto-hondo);
  background: var(--tiza);
  border: none;
  border-left: 10px solid var(--piano);
  border-radius: 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
button.principal::after {
  content: '▶';
  font-size: 15px;
  color: var(--piano);
}
button.principal:hover { background: #fff; border-left-width: 16px; }
button.principal:active { transform: translateX(3px); }

.filaBotones { display: flex; gap: 8px; }
.filaBotones button { flex: 1; }

/* ---------- HUD en carrera ---------- */
#hud {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  z-index: 5;
  pointer-events: none;
}
#cronoGrupo {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
#crono, #delta, #puesto {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  background: rgba(11, 15, 20, .82);
  padding: 5px 14px;
}
#crono {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
}
#delta {
  font-size: 15px;
  font-weight: 600;
  color: var(--mejor-propio);
  display: flex;
  align-items: center;
}
#delta.detras { color: var(--peor); }
#puesto {
  font-size: 15px;
  font-weight: 700;
  color: var(--senal);
  display: flex;
  align-items: center;
}
/* El rival: a quién persigues ahora mismo y por cuánto. Es el marcador que
   convierte la vuelta en carrera, así que va pegado al crono, no perdido. */
#rival {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  background: rgba(11, 15, 20, .82);
  padding: 5px 14px;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
#rivalNombre {
  color: var(--tiza);
  text-transform: uppercase;
  letter-spacing: .04em;
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#rivalHueco { color: var(--peor); font-weight: 700; }
#rival.cazando #rivalHueco { color: var(--mejor-propio); }

/* Aviso de adelantamiento: entra, se lee y se va sola. */
#aviso {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  z-index: 13;
  margin: 0;
  padding: 10px 22px;
  font-family: var(--titular);
  font-size: clamp(20px, 6vw, 34px);
  letter-spacing: .02em;
  color: var(--asfalto);
  background: var(--senal);
  white-space: nowrap;
  pointer-events: none;
  animation: avisoEntra .28s ease-out;
}
#aviso.perdiendo { background: var(--piano); color: var(--tiza); }
@keyframes avisoEntra {
  from { opacity: 0; transform: translateX(-50%) scale(.86); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #aviso { animation: none; }
}

#btnSonido, #btnMusica, #btnReiniciar, #btnSaltarTuto {
  position: fixed;
  z-index: 12;
  font-size: 11px;
  /* 44x44 es el minimo para un dedo: estos median 45x33 y se fallaban */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-left-width: 3px;
  background: rgba(11, 15, 20, .8);
}
#btnSonido { left: 10px; top: calc(env(safe-area-inset-top, 0px) + 10px); }
/* justo debajo del de sonido: son dos gustos distintos y se apagan aparte */
#btnMusica { left: 10px; top: calc(env(safe-area-inset-top, 0px) + 62px); }
#btnMusica.apagado, #btnSonido.apagado { opacity: .55; border-left-color: var(--tiza-baja); }
#btnReiniciar {
  right: 10px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  pointer-events: auto;
}
#btnSaltarTuto { right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }

/* el objetivo, en el panel de la liga */
.objetivoVidas {
  display: grid;
  gap: 5px;
  margin: 2px 0 12px;
  padding: 9px 11px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--mejor-propio);
  border-radius: 2px;
  background: var(--asfalto);
}
.objetivoVidas.fallado { border-left-color: var(--piano); opacity: .75; }
.ovHuellas { display: flex; gap: 4px; }
.ovTexto { font-size: 11px; color: var(--tiza-baja); line-height: 1.4; }

/* ---------- las siete vidas ---------- */
#vidasHud { display: flex; gap: 3px; margin-bottom: 3px; }
.vida {
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;      /* una huella, no un corazon */
  transform: rotate(-45deg);
  background: var(--mejor-propio);
  box-shadow: 0 0 6px rgba(63, 208, 122, .5);
}
.vida.ida {
  background: none;
  border: 1px solid var(--tiza-baja);
  box-shadow: none;
}
#vidasHud.sinVidas .vida { border-color: var(--piano); }

/* ---------- que vuelta es esta ---------- */
#tipoVuelta {
  align-self: start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 3px 8px;
  border-radius: 2px;
  background: rgba(11, 15, 20, .78);
  border: 1px solid var(--linea);
  color: var(--tiza-baja);
  margin-bottom: 2px;
}
/* el intento que puntua se ve de lejos: es el que no se puede repetir */
#tipoVuelta.oficial {
  color: var(--tiza);
  background: var(--piano);
  border-color: var(--piano);
}

/* ---------- pausa ---------- */
/* Volver de una llamada y encontrarte ya conduciendo contra un muro es
   perder la vuelta por algo que no has hecho. El simulador ya se congela solo
   al esconderse la pestaña; lo que faltaba era decirlo y esperar al dedo. */
#pausa {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  background: rgba(10, 12, 15, .72);
  backdrop-filter: blur(2px);
}
#pausa .pTit {
  font-family: var(--display);
  font-size: clamp(38px, 13vw, 64px);
  letter-spacing: .04em;
  color: var(--tiza);
}
#pausa .pPie { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--tiza-baja); }

/* ---------- cuenta atrás ---------- */
#cuenta {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: clamp(90px, 26vw, 170px);
  color: var(--tiza);
  text-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  z-index: 8;
  pointer-events: none;
}

/* ---------- overlay de controles (primera vuelta) ---------- */
#tuto {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  z-index: 7;
  pointer-events: none;
}
#tuto .zona {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--tiza);
  animation: latido 1.2s ease-in-out infinite;
}
#tuto .zona:first-child { background: linear-gradient(90deg, rgba(214, 58, 42, .22), transparent 72%); }
#tuto .zona:nth-child(2) { background: linear-gradient(270deg, rgba(214, 58, 42, .22), transparent 72%); }
#tuto p {
  position: absolute;
  bottom: 12vh;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tiza-media);
}
@keyframes latido { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- postas del tutorial ---------- */
#posta {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14vh;
  z-index: 9;
  pointer-events: none;
  animation: entraPosta .16s linear;
}
.postaCaja {
  background: var(--asfalto-hondo);
  border: 1px solid var(--linea);
  border-left: 6px solid var(--senal);
  border-radius: 2px;
  padding: 14px 20px;
  max-width: min(440px, 88vw);
  text-align: left;
}
#postaTitulo {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--senal);
}
#postaTexto { font-size: 12px; line-height: 1.55; color: var(--tiza-media); margin-top: 6px; }
@keyframes entraPosta { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- campo de nombre ---------- */
#formNombre { display: flex; gap: 8px; align-items: stretch; }
#formNombre.oculto { display: none; }
#inputNombre {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--tiza);
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--senal);
  border-radius: 2px;
  padding: 12px 14px;
  flex: 1;
  user-select: text;
  -webkit-user-select: text;
}
#inputNombre:focus { outline: 2px solid var(--senal); outline-offset: 1px; }
#formNombre .principal { font-size: 18px; padding: 12px 18px; flex: none; }

/* ---- «Mas» en la pantalla de meta ---- */
#masMeta { width: min(620px, 100%); margin-inline: auto; }
#masMeta summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tiza-baja);
  text-align: center;
}
#masMeta summary::-webkit-details-marker { display: none; }
#masMeta summary:hover { color: var(--tiza); }
#masMeta[open] summary { color: var(--tiza); }
#masMeta button { width: 100%; margin-bottom: 6px; }

/* ---- el aviso de la pista nueva ---- */
#ofertaAviso {
  display: grid;
  gap: 4px;
  width: min(620px, 100%);
  margin: 4px auto 8px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--senal);
  border-radius: 2px;
  background: var(--asfalto);
  text-align: left;
}
.oaTit { font-size: 15px; font-weight: 700; }
.oaPie { font-size: 11.5px; color: var(--tiza-baja); line-height: 1.45; }
.oaBotones { display: flex; gap: 8px; margin-top: 8px; }
.oaBotones .principal { flex: 1; }
#avisoCaja { display: grid; gap: 7px; }

/* ============================================================
   LA LIGA — veinte, siete jornadas, se sube y se baja
   ============================================================ */
.pestanas { display: flex; gap: 4px; margin-bottom: 10px; }
.pestana {
  flex: 1;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 9px 4px;
  text-align: center;
  border-left-width: 1px;
  background: var(--asfalto);
  color: var(--tiza-baja);
}
.pestana.activa {
  color: var(--asfalto-hondo);
  background: var(--tiza);
  border-color: var(--tiza);
}
.pestana:hover { border-left-width: 1px; }
.hoja { width: 100%; }

.ligaChapa {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linea);
}
.lgDiv { font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.lgGrupo { font-size: 11px; letter-spacing: .18em; color: var(--tiza-baja); }
.ligaDatos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 7px 0 12px;
  font-size: 11px;
  color: var(--tiza-baja);
}
.ligaDatos b { color: var(--tiza); font-size: 14px; }

.tablaLiga { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tablaLiga th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tiza-baja);
  text-align: left;
  padding: 0 6px 6px;
  border-bottom: 1px solid var(--linea);
}
.tablaLiga td { padding: 7px 6px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.05); }
.tablaLiga .cPos { width: 26px; color: var(--tiza-baja); font-size: 11px; }
.tablaLiga .cNum { width: 34px; text-align: right; }
.tablaLiga .cPts { font-weight: 700; }
.tablaLiga .cNombre { display: flex; align-items: center; gap: 6px; }
/* la fila propia se ve sin buscarla: es la pregunta que trae a la gente */
.tablaLiga tr.yo td { background: rgba(63, 208, 122, .1); color: var(--tiza); font-weight: 600; }
.tablaLiga tr.yo .cPos { color: var(--mejor-propio); font-weight: 700; }
.tablaLiga tr.sube .cPos { box-shadow: inset 3px 0 0 var(--mejor-propio); }
.tablaLiga tr.baja .cPos { box-shadow: inset 3px 0 0 var(--piano); }
.esIA {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 1px 4px;
  border: 1px solid var(--tiza-baja);
  border-radius: 2px;
  color: var(--tiza-baja);
}
.lgVic { font-size: 11px; color: var(--tiza-baja); }
.pinta { display: inline-block; width: 9px; height: 9px; vertical-align: -1px; border-radius: 1px; }
.pinta.sube { background: var(--mejor-propio); }
.pinta.baja { background: var(--piano); }

.fichaJornada {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-left: 3px solid transparent;
  border-radius: 2px;
  margin-bottom: 5px;
  background: var(--asfalto);
}
.fichaJornada.hoy { border-left-color: var(--piano); }
.fichaJornada.porVenir { opacity: .5; }
.jNum { font-size: 12px; font-weight: 700; color: var(--tiza-baja); width: 26px; flex: none; }
.jCol { display: grid; gap: 1px; flex: 1; min-width: 0; }
.jFecha { font-size: 12px; font-weight: 600; }
.jGana, .jCuantos { font-size: 11px; color: var(--tiza-baja); }
.jGana.vacia { font-style: italic; }
.jMio {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mejor-propio);
  text-align: right;
  flex: none;
}
.jMio.cero { color: var(--piano); font-weight: 400; font-size: 11px; }
.jMio.pendiente { color: var(--tiza-baja); }

.reglas { margin: 0; padding-left: 20px; display: grid; gap: 11px; }
.reglas li { font-size: 12.5px; line-height: 1.5; color: var(--tiza-baja); }
.reglas b { color: var(--tiza); }

/* ---- el golpe de la liga en la pantalla de meta ---- */
#golpeLiga {
  display: grid;
  gap: 2px;
  width: min(620px, 100%);
  margin: 2px auto 6px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--piano);
  border-radius: 2px;
  background: var(--asfalto);
  text-align: left;
}
.glTit { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--tiza-baja); }
.glLinea { font-size: 14px; }
.glLinea b { font-size: 19px; }
.glPie { font-size: 11px; color: var(--tiza-baja); }

/* ---- la teja del menú ---- */
#tejaLigaTabla { display: grid; gap: 1px; margin-top: 6px; width: 100%; }
.tejaFila {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 6px;
  font-size: 11px;
  color: var(--tiza-baja);
  font-variant-numeric: tabular-nums;
}
.tejaFila { text-transform: none; letter-spacing: 0; }   /* son nombres */
.tejaFila.yo { color: var(--mejor-propio); font-weight: 700; }
.tfNom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   LOS MUNDOS — familias: el primer nivel
   ============================================================ */
#listaFamilias { display: grid; gap: 8px; }
.fichaFamilia {
  /* es un boton, pero no debe parecer un boton de la casa: es una portada */
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 3px solid transparent;
  border-radius: 3px;
  text-align: left;
  cursor: pointer;
  transition: border-left-color .12s linear;
}
.fichaFamilia:hover { border-left-color: var(--piano); background: var(--asfalto); }
/* es un <button>, y el boton de la casa va en mayusculas con mucho tracking:
   aqui hay frases enteras, y en versales no se leen */
.fichaFamilia .fLem { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fichaFamilia.bloqueado { opacity: .62; }
.fichaFamilia canvas { display: block; width: 100%; height: 96px; object-fit: cover; }
.fichaFamilia .info {
  display: grid;
  gap: 2px;
  padding: 9px 12px 10px;
  /* el texto va sobre el borde inferior de la portada: sin este velo, un
     mundo claro se comia las letras */
  background: linear-gradient(180deg, rgba(11, 15, 20, .92), var(--asfalto) 22%);
  margin-top: -18px;
  position: relative;
}
.fichaFamilia .fNom { font-size: 17px; font-weight: 700; letter-spacing: .05em; }
.fichaFamilia .fLem { font-size: 12px; color: var(--tiza-baja); }
.fichaFamilia .fCuenta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tiza-baja);
  margin-top: 2px;
}

/* ---- el visor: el selector con sus flechas ---- */
/* El ancho lo pone el VISOR, no el lienzo. Al meter el canvas aquí dentro dejó
   de ser hijo directo del panel y se quedó sin el `width: min(620px,100%)`:
   sin ancho de CSS, el canvas mide lo que dice su atributo `width`, que es
   justo lo que le calculamos a partir de su tamaño... y crecía en cada
   apertura, realimentándose. */
#visor { position: relative; width: min(620px, 100%); margin-inline: auto; }
.flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 54px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 18, .55);
  border: 1px solid var(--linea);
  border-left-width: 1px;
  border-radius: 2px;
  color: var(--tiza);
}
.flecha:hover { background: rgba(30, 34, 40, .9); border-left-width: 1px; }
.flecha:active { transform: translateY(-50%) scale(.94); }
#btnIzq { left: 6px; }
#btnDer { right: 6px; }

/* ============================================================
   EL ARCHIVO — hoja de tiempos por jornada
   ============================================================ */
#listaDias {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(620px, 100%);
  max-height: 46vh;
  overflow-y: auto;
}
.fichaDia {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 3px solid transparent;
  border-radius: 2px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-left-color .12s linear, background .12s linear;
}
.fichaDia:hover { border-left-color: var(--piano); background: var(--asfalto-alto); }
.fichaDia canvas { width: 46px; height: 32px; flex: none; opacity: .85; }
.fichaDia .col { display: grid; gap: 1px; flex: 1; }
.fichaDia .diaFecha { font-size: 13px; font-weight: 600; }
.fichaDia .diaMundo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tiza-baja);
}
.fichaDia .diaDatos { font-size: 11px; color: var(--tiza-baja); font-variant-numeric: tabular-nums; }
.fichaDia .diaRec {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mejor-propio);
}
/* Las dos puertas de una pista pasada: el intento que cuenta se ve, el que no
   cuenta se lee. Si pesaran igual, se pulsaria el irreversible sin querer. */
.fichaDia .diaAcciones { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.fichaDia .diaIr,
.fichaDia .diaPract {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.fichaDia .diaIr {
  background: var(--piano);
  color: var(--asfalto-hondo);
  border: 1px solid var(--piano);
}
.fichaDia .diaPract {
  background: none;
  color: var(--tiza-baja);
  border: 1px solid var(--linea);
}
.fichaDia .diaPract:hover { color: var(--tiza); border-color: var(--tiza-baja); }
.fichaDia .diaGastado {
  font-size: 11px;
  color: var(--tiza-baja);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   EL SISTEMA — los mundos en orbita
   ============================================================ */
#sistema {
  width: 100%;               /* el limite de ancho lo pone #visor */
  /* alto fijo en proporcion: el sistema tiene que caber entero sin empujar
     al boton de correr fuera de la pantalla en un movil bajo */
  aspect-ratio: 16 / 11;
  max-height: 46vh;
  display: block;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: #05070e;
  touch-action: none;          /* el arrastre gira, no hace scroll */
  cursor: grab;
}
#sistema:active { cursor: grabbing; }
#fichaSistema {
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
  margin-top: 10px;
  min-height: 74px;            /* reservado: sin esto el panel salta al girar */
}
#sNombre { font-size: 19px; font-weight: 700; letter-spacing: .04em; }
#sLema { font-size: 12px; color: var(--tiza-baja); }
#sPie {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  flex-wrap: wrap;
  justify-content: center;
}
#sRec { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mejor-propio); }
#sRec.vacio { color: var(--tiza-baja); font-weight: 400; font-size: 12px; }
#sMedalla {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
#sMedalla:empty { display: none; }
#sTwist {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--senal);
}
#sTwist:empty { display: none; }
#mundos .principal { margin-top: 4px; }

/* ============================================================
   GARAJE — ficha de piloto
   ============================================================ */
#listaPilotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
  width: min(620px, 100%);
}
.fichaPiloto {
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-bottom: 3px solid transparent;
  border-radius: 2px;
  padding: 8px 4px 6px;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 3px;
  transition: border-bottom-color .12s linear, background .12s linear;
}
.fichaPiloto:hover { background: var(--asfalto-alto); }
.fichaPiloto.elegido { border-bottom-color: var(--piano); background: var(--asfalto-alto); }
.fichaPiloto canvas { width: 58px; height: 58px; }
.fichaPiloto .nombreGato {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tiza);
  text-align: center;
}
.fichaPiloto .rareza {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* la condicion va SEPARADA de la rareza, con su propia linea y su candado:
   pegadas se leian como una sola frase sin sentido */
.fichaPiloto .condicion {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--linea);
  width: 100%;
}
#fichaGrande {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--piano);
  border-radius: 2px;
  padding: 12px 16px;
}
#retratoPiloto { width: 116px; height: 116px; flex: none; }
#datosPiloto { display: grid; gap: 3px; }
#pilotoNombre {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
#pilotoRaza { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
#pilotoLema { font-size: 12px; color: var(--senal); line-height: 1.4; }
#pilotoDesc { font-size: 11px; color: var(--tiza-baja); line-height: 1.5; }

/* ---------- leyenda del código de cronometraje ---------- */
.leyenda {
  display: flex;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tiza-baja);
}
.leyenda span::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 5px;
  background: currentColor;
}
.leyenda .abs { color: var(--mejor-absoluto); }
.leyenda .propio { color: var(--mejor-propio); }

/* ---------- cabecera de marca: el nombre no es el héroe ----------
   El protagonista del menú es LA PISTA DE HOY; el nombre del juego
   se comporta como el rótulo de un circuito, arriba y discreto. */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
}
.marca h1 {
  font-size: clamp(22px, 5.5vw, 28px);
  letter-spacing: .01em;
  line-height: 1;
  flex: none;
}
.marca .damero { flex: 1; height: 8px; }

/* el cartel del día pasa a ser el bloque protagonista */
#cartelDia { padding: 18px 20px 14px; gap: 8px; }
#cartelMundo {
  font-size: clamp(34px, 9vw, 52px);
  line-height: .92;
}
.cartelPie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--linea);
  padding-top: 9px;
  margin-top: 2px;
}

/* el texto largo no se desparrama a lo ancho */
.ayuda, .dato { max-width: 46ch; }
.piePersonal { font-size: 11px; color: var(--tiza-baja); }

/* ---------- La pista de hoy: tarjeta con portada y play propio ---------- */
#cartelDia { padding: 0; display: block; overflow: hidden; }
#portadaDia {
  display: block;
  width: 100%;
  height: 112px;
  border-bottom: 1px solid var(--linea);
}
.cartelCuerpo { display: grid; gap: 9px; padding: 14px 18px 16px; }
#cartelDia .cartelPie { border-top: none; padding-top: 0; margin-top: -2px; }
#cartelDia .principal { margin-top: 3px; }

/* la barra de navegación reparte cuatro destinos por igual */
nav.filaBotones { gap: 6px; }
nav.filaBotones button { text-align: center; padding: 13px 6px; letter-spacing: .1em; }

/* la leyenda del cronometraje, ya en el pie */
.leyenda { justify-content: flex-start; }

@media (max-width: 420px) {
  nav.filaBotones { flex-wrap: wrap; }
  nav.filaBotones button { flex: 1 1 45%; }
}

/* ---- LA VIÑETA ---- */
/* Se lee de un vistazo y se cierra: la historia acompaña a la carrera, nunca
   la interrumpe. Por eso ocupa poco y tiene un solo botón. */
#vinetaLienzo {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--linea);
  margin-bottom: 14px;
}
#vineta h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 6vw, 30px);
  letter-spacing: .01em;
}
#vinetaTexto {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tiza);
  max-width: 46ch;
}
#vinetaCuenta { margin-bottom: 14px; }

#listaHistoria {
  display: grid;
  gap: 14px;
  max-height: 58vh;
  overflow-y: auto;
  margin-bottom: 12px;
}
.fichaVineta {
  border: 1px solid var(--linea);
  padding: 10px;
  background: rgba(0, 0, 0, .18);
}
.fichaVineta canvas {
  width: 100%;
  height: auto;
  display: block;
}
.fichaVineta h3 {
  margin: 10px 0 4px;
  font-family: var(--titular);
  font-size: 16px;
  letter-spacing: .03em;
}
.fichaVineta p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tiza);
  opacity: .82;
}

/* bautizar al michi: mismo trato que el campo del nombre de piloto */
#formGato { display: flex; gap: 8px; margin-bottom: 4px; }
#formGato input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--tiza);
  background: var(--asfalto-hondo);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--senal);
  border-radius: 2px;
  padding: 12px 14px;
}
#formGato input::placeholder { color: var(--tiza-baja); }
#formGato input:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }

/* el titular de la vuelta: lo que le pasó a tu michi, en una línea */
.titular {
  font-size: 15px;
  line-height: 1.5;
  color: var(--senal);
  border-left: 4px solid var(--senal);
  background: rgba(245, 197, 24, .08);
  padding: 9px 13px;
}

/* gatos que aún no has ganado: se ven, apagados, con lo que falta para tenerlos */
.fichaPiloto.cerrado { opacity: .5; }
.fichaPiloto.cerrado canvas { filter: grayscale(1); }
.fichaPiloto .condicion {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--senal);
  padding: 0 6px 6px;
}
.condicionGrande {
  font-size: 13px;
  color: var(--senal);
  border-left: 3px solid var(--senal);
  padding-left: 10px;
  margin-top: 6px;
}

/* ---- TU CUENTA ---- */
/* El codigo es lo unico que rescata tu coleccion, asi que se trata como un
   dato serio: mono, grande, seleccionable y tapado hasta que lo pides. */
#cuentaCaja {
  display: grid;
  gap: 8px;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--mejor-absoluto);
  padding: 14px 16px;
}
.codigo {
  font-family: var(--mono);
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--mejor-absoluto);
  user-select: text;
  -webkit-user-select: text;
}
#formRescate { display: flex; gap: 8px; }
#formRescate input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tiza);
  background: var(--asfalto-hondo);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--mejor-absoluto);
  border-radius: 2px;
  padding: 12px 14px;
}
#formRescate input::placeholder { color: var(--tiza-baja); letter-spacing: .1em; }
#formRescate input:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }

/* ============================================================
   EL MOSAICO DEL MENÚ
   Piezas de distinto peso, cada una enseñando su contenido. El
   color no viene de una paleta prestada: viene de los mundos.
   ============================================================ */
#barraJugador {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  padding: 8px 12px;
}
#miRetrato { width: 46px; height: 46px; }
.quienSoy { min-width: 0; }
#miNombre {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tiza);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marcaChica { text-align: right; }
.marcaChica p {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--tiza-media);
}
.marcaChica .damero { height: 5px; width: 74px; margin-top: 3px; }

#mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#mosaico .grande { grid-column: 1 / -1; }

/* la pieza: un panel de señalización con contenido dentro */
.pieza {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: grid;
  align-content: end;
  min-height: 132px;
  /* ELEVACION. Una sombra honda y un filo de luz arriba: sobre un fondo oscuro,
     sin el filo la tarjeta se funde con el suelo y parece un agujero. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 10px 22px -14px rgba(0, 0, 0, .9);
  transition: transform .16s cubic-bezier(.2, .7, .3, 1),
              box-shadow .16s ease, border-color .16s ease;
}
/* EL CARRIL de color: la identidad de cada sitio. Era un borde plano; ahora es
   una veta que se apaga hacia abajo y engorda cuando eliges la tarjeta. */
.pieza::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 3;
  background: linear-gradient(180deg, var(--rail, var(--tiza-baja)), transparent 130%);
  transition: width .16s ease, filter .16s ease;
}
.pieza:hover, .pieza:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(240, 236, 225, .28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 18px 30px -16px rgba(0, 0, 0, .95);
}
.pieza:hover::before, .pieza:focus-visible::before { width: 6px; filter: brightness(1.5); }
.pieza:hover canvas { opacity: 1; transform: scale(1.04); }
.pieza:active { transform: translateY(-1px) scale(.995); }
.pieza canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: opacity .16s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
/* La sombra sobre la que se lee el texto, en dos tiempos: una caida larga y
   suave para que la estampa respire arriba, y un pie casi opaco para que las
   letras tengan suelo. La segunda capa oscurece el lado del carril. */
.pieza::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(var(--velo), 0) 28%, rgba(var(--velo), .55) 64%, rgba(var(--velo), .95) 100%),
    linear-gradient(90deg, rgba(var(--velo), .5), transparent 55%);
  pointer-events: none;
}
.tejaTitulo, .tejaPie { position: relative; z-index: 2; }
.tejaTitulo {
  font-family: var(--display);
  font-size: clamp(22px, 5.6vw, 32px);
  line-height: .96;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--tiza);
  padding: 0 14px;
  /* la sombra despega el titulo de la estampa cuando el dibujo es claro */
  text-shadow: 0 2px 10px rgba(var(--velo), .8);
}
.tejaPie {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  /* Menos tracking y en DOS lineas si hace falta. En una sola linea, en
     versales y con .14em, «Corre la del dia y entras» se salia 37 px de una
     teja de 201: cuatro de cada cinco subtitulos acababan cortados con
     puntos suspensivos, que es la forma mas cara de no decir nada. */
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tiza-baja);
  padding: 4px 14px 12px;
  line-height: 1.35;
  overflow-wrap: break-word;
  text-shadow: 0 1px 6px rgba(var(--velo), .9);
}
/* cada pieza toma prestado el color de lo que representa */
.pieza.mundos { --rail: #4fa845; }
/* la liga es la pieza que dice si te han pasado por delante: ocupa el ancho
   entero porque lleva tabla dentro, y una tabla en media columna no se lee */
.pieza.liga {
  grid-column: 1 / -1;      /* en movil, ancho entero: lleva tabla dentro */
  --rail: var(--mejor-propio);
  align-content: start;
  padding: 13px 16px 15px;
  min-height: 0;
}
.pieza.liga .tejaTitulo, .pieza.liga .tejaPie { padding-left: 0; padding-right: 0; }
.pieza.liga .tejaPie { padding-bottom: 0; }
.pieza.historia { --rail: var(--mejor-absoluto); }
.pieza.garaje { --rail: var(--senal); }
.pieza.chica {
  min-height: 84px;
  align-content: end;
  --rail: rgba(240, 236, 225, .45);
}
/* Las dos piezas chicas no tienen estampa propia —no hay nada que dibujar en
   «archivo»— y se quedaban en cajas de texto vacias, que es justo lo que hace
   que un menu parezca a medio hacer. Se les pinta el kit de circuito: el piano
   en una esquina y la linea discontinua del asfalto, muy apagados. */
.pieza.chica::after {
  background:
    repeating-linear-gradient(135deg,
      rgba(214, 58, 42, .5) 0 14px,
      rgba(240, 236, 225, .5) 14px 28px);
  -webkit-mask-image: radial-gradient(90px 90px at 100% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(90px 90px at 100% 0%, #000 0%, transparent 72%);
  opacity: .16;
}
/* la discontinua, cruzando por detras del texto */
.pieza.chica::before {
  box-shadow:
    58px 0 0 -1px rgba(240, 236, 225, .05),
    116px 0 0 -1px rgba(240, 236, 225, .04);
}
.pieza.chica .tejaTitulo { font-size: clamp(17px, 4.4vw, 21px); }

/* la pieza grande conserva su cartel: es la cita del día, no una teja más */
#cartelDia { --rail: var(--piano); align-content: start; }
#cartelDia canvas { position: static; height: auto; opacity: 1; }
#cartelDia::after { display: none; }
#cartelDia .cartelCuerpo { display: grid; gap: 6px; padding: 14px 16px 16px; }

/* En pantalla grande el mosaico deja de ir encajonado en 620 px: con la
   ventana a 1014 las tejas median 201 px y no cabia ni el subtitulo. */
@media (min-width: 900px) {
  #menu > #mosaico { width: min(920px, 100%); }
}

@media (min-width: 620px) {
  #mosaico { grid-template-columns: repeat(3, 1fr); }
  #mosaico .grande { grid-column: 1 / -1; }
  .pieza.liga { grid-column: span 1; }
  .pieza.garaje { grid-column: auto; }
}

/* LA PÁGINA DE CÓMIC. Ancho completo y alto libre: se lee bajando, que es
   como se lee un tebeo en el móvil. El marco lo trae ya pintado el lienzo. */
.comicPagina{
  display:block;
  width:100%;
  max-width:760px;
  margin:0 auto;
  height:auto;
  border-radius:4px;
}
.fichaVineta{cursor:pointer}

/* El rótulo de las siete vidas. Solo sale hasta que se gasta la primera:
   después estorba, porque ya sabes lo que son. */
#vidasHud { align-items: center; }
.vidasRotulo {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--tiza-baja);
  margin-right: 4px;
}

/* Cuanto llevas de una hazana. La barra va DETRAS del texto con un degradado
   duro: un «7 de 20» a secas es un dato; con la barra es una carrera. */
.progresoHazana {
  display: block;
  margin-top: 4px;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--tiza);
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--mejor-propio) 0 var(--hecho, 0%),
    rgba(255, 255, 255, .07) var(--hecho, 0%) 100%);
}

/* ============================================================
   LA PUERTA — di quién eres, una vez, antes de que cuente
   ============================================================ */
.puertaCaja {
  display: grid;
  gap: 12px;
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 22px 20px 18px;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--senal);
  text-align: left;
}
.puertaCaja h2 {
  font-family: var(--display);
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1;
  letter-spacing: .02em;
  margin: 0;
  text-wrap: balance;
}
/* el botón de Google lo pinta Google; aquí solo se le hace sitio y se centra */
#botonGoogle, #botonGoogleGaraje { display: flex; justify-content: center; min-height: 44px; margin: 6px 0 2px; }
#botonGoogle:empty::after, #botonGoogleGaraje:empty::after {
  content: '…';
  color: var(--tiza-baja);
  align-self: center;
}
#btnPuertaLuego { font-size: 12px; }
#cuentaGoogle { display: grid; gap: 6px; }

/* ============================================================
   LA TIENDA — dos cosas, y nada que corra más rápido
   ============================================================ */
#tiendaCaja {
  display: grid;
  gap: 10px;
  background: var(--asfalto);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--senal);
  padding: 14px 16px;
}
.oferta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--linea);
}
.oferta:first-of-type { border-top: 0; padding-top: 2px; }
.ofertaTexto { display: grid; gap: 4px; min-width: 0; }
.ofertaTexto b { font-size: 15px; letter-spacing: .02em; }
.ofertaEstado { font-family: var(--mono); font-size: 11.5px; color: var(--senal); letter-spacing: .06em; }
.ofertaEstado:empty { display: none; }
.oferta .principal { white-space: nowrap; padding: 11px 14px; }
.oferta .principal:disabled { opacity: .5; }
.oferta.tuya .principal { display: none; }
.oferta.tuya .ofertaEstado { color: var(--mejor-propio); }
@media (max-width: 420px) {
  .oferta { grid-template-columns: 1fr; }
  .oferta .principal { width: 100%; }
}

/* quien lleva el pase, en la tabla de la liga: un nombre dorado y la marca */
.tablaLiga tr.pase .cNombre { color: var(--senal); }
.tablaLiga tr.pase .cNombre::before {
  content: '★';
  font-size: 10px;
  margin-right: 5px;
  vertical-align: 1px;
}
.ofertaLista { margin: 2px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--tiza-baja); }
.ofertaLista li::marker { color: var(--senal); }
#salirFuera { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--linea); }

/* el archivo: las pistas cerradas se VEN, con su candado y su precio a la vista */
.fichaDia.cerrada canvas { opacity: .45; }
.fichaDia.cerrada .diaFecha, .fichaDia.cerrada .diaMundo { color: var(--tiza-baja); }
.diaCerrada {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--senal);
  padding: 8px 10px;
  border: 1px solid var(--senal);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}
#botonGoogle.dosBotones { gap: 8px; flex-wrap: wrap; }
#botonGoogle.dosBotones button { flex: 1 1 45%; }