/* Etapa 5 — estilos de la linea de tiempo propia.
   El resto de la pantalla sigue feo a proposito: la grilla de timelines ajenas
   es la etapa 6 y la vista de apuestas la etapa 9. */

:root {
  /* Los huecos NO se achican nunca. Con 30 cartas la timeline se desplaza en
     horizontal, pero cada blanco sigue midiendo lo que mide un dedo.
     48px es el minimo tocable recomendado (WCAG 2.5.8 pide 24, Apple 44). */
  --hueco-ancho: 48px;
  --carta-ancho: 116px;
  --carta-alto: 104px;

  /* brief §6 — carbon azulado, no negro puro. Las cartas de era resaltan
     mucho mas sobre oscuro, y es lo comodo para jugar de noche. */
  --fondo: #12131a;
  --panel: #1b1d26;
  --superficie: #22242f;
  --borde: #2c2f3b;
  --texto: #eef0f4;
  --tenue: #9aa0b2;
  --acento: #4c9aff;
  --acento-fuerte: #2f7fe0;
  --ok: #2ea44f;
  --peligro: #e2564f;
  --oro: #f4c542;

  /* brief §5 — dos familias, no mas. El caracter va en los años y las eras. */
  --fuente-ui: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-anio: 'Bebas Neue', var(--fuente-ui);
}

body {
  font-family: var(--fuente-ui);
  margin: 0;
  padding: 12px;
  background: var(--fondo);
  color: var(--texto);
  /* la pagina nunca se desplaza en horizontal: solo la timeline por dentro */
  overflow-x: hidden;
}

/* brief §8 — nada de animacion se ve, pero WAAPI si respeta esto por su
   cuenta (Eras.reducirMovimiento en JS). Esto cubre lo poco que queda en CSS. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------- fondo de galaxia --- */
/*
   Puro CSS: gradientes radiales chiquitos en un mosaico que se repite, mas
   `background-position` animado. Eso es trabajo de compositor (GPU), no
   repintado por frame — nada de canvas, nada de JS corriendo en un loop.
   Como no hay requestAnimationFrame ni intervalo, el navegador ya lo frena
   solo cuando la pestaña esta en segundo plano: no hace falta pausarlo a
   mano.

   z-index: -1 lo deja SIEMPRE detras del contenido normal (que pinta en el
   nivel de apilamiento no-negativo), sin tocar el z-index de nada mas.
   Sutil a proposito: opacidades bajas, puntos chicos, sin color saturado —
   las cartas de era son lo que tiene que llamar la atencion.
*/
#fondoGalaxia {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--fondo);
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 90px 120px, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1.4px 1.4px at 160px 60px, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1px 1px at 210px 170px, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1.3px 1.3px at 260px 20px, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1px 1px at 40px 190px, rgba(255, 255, 255, .28), transparent),
    radial-gradient(1.5px 1.5px at 300px 100px, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1px 1px at 130px 220px, rgba(255, 255, 255, .3), transparent);
  background-repeat: repeat;
  background-size: 340px 240px;
  animation: galaxiaDeriva 260s linear infinite;
}
#fondoGalaxia::after {
  content: "";
  position: absolute;
  inset: -10% -10%;
  background-image:
    radial-gradient(1px 1px at 50px 80px, rgba(255, 255, 255, .22), transparent),
    radial-gradient(1.1px 1.1px at 150px 40px, rgba(255, 255, 255, .18), transparent),
    radial-gradient(1px 1px at 250px 150px, rgba(255, 255, 255, .2), transparent),
    radial-gradient(.8px .8px at 320px 60px, rgba(255, 255, 255, .16), transparent),
    radial-gradient(1px 1px at 80px 200px, rgba(255, 255, 255, .16), transparent);
  background-repeat: repeat;
  background-size: 480px 380px;
  animation: galaxiaDerivaLenta 420s linear infinite reverse;
}
/* el tinte por era: un color de fondo (no un gradiente) porque eso SI
   transiciona solo con CSS. mix-blend-mode lo funde en vez de taparlo. */
.fondo-galaxia-tinte {
  position: absolute;
  inset: 0;
  background-color: transparent;
  mix-blend-mode: soft-light;
  transition: background-color 7s ease;
}

@keyframes galaxiaDeriva {
  from { background-position: 0 0; }
  to { background-position: -680px -480px; }
}
@keyframes galaxiaDerivaLenta {
  from { background-position: 0 0; }
  to { background-position: 960px -760px; }
}

@media (prefers-reduced-motion: reduce) {
  #fondoGalaxia, #fondoGalaxia::after { animation: none; }
  .fondo-galaxia-tinte { transition: none; }
}

button { font: inherit; min-height: 44px; }

/* ---------------------------------- mensaje flotante de acierto/fallo -- */

.toast-resultado {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 1100;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55);
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast-resultado[hidden] { display: none; }
.toast-resultado.acierto { background: var(--ok); }
.toast-resultado.fallo { background: var(--peligro); }
.toast-resultado-icono { font-size: 19px; }

/* ------------------------------------------------------ linea de tiempo */

.tl-marco {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 0 4px;
  margin: 8px 0;
}

.tl-titulo {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 12px 8px;
  font-weight: 600;
}
.tl-titulo .tl-sub { font-weight: 400; color: var(--tenue); font-size: 13px; }

/* la pista se desplaza sola, el resto de la pagina no se mueve */
.tl-pista {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0;
  padding: 4px 12px 12px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tl-carta {
  position: relative;
  flex: 0 0 var(--carta-ancho);
  width: var(--carta-ancho);
  min-height: var(--carta-alto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.tl-anio {
  font-family: var(--fuente-anio);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
}
.tl-nombre { font-size: 12px; line-height: 1.25; }
.tl-artista { font-size: 11px; opacity: .75; line-height: 1.2; }

/* --------------------------------------------------- brief §2 y §3 ------
   Objetos, no divs: sombra real, rotacion propia por carta, grosor con
   borde inferior mas oscuro, y la paleta de su era. Restringido a modo
   completo (§3, restriccion dura): en la grilla comprimida todo se reduce
   a un color plano y el año — la legibilidad manda sobre el concepto. */
:is(.tl-pista:not(.compacta), .portada-fondo) .tl-carta {
  transform: rotate(var(--rot, 0deg));
  background: var(--era-bg, var(--superficie));
  color: var(--era-fg, var(--texto));
  border-color: var(--era-accent, var(--borde));
  border-bottom-width: 4px;
  border-bottom-color: var(--era-borde-grueso, rgba(0, 0, 0, .45));
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .45),
    0 6px 10px -4px rgba(0, 0, 0, .55),
    0 14px 22px -12px rgba(0, 0, 0, .5);
}
:is(.tl-pista:not(.compacta), .portada-fondo) .tl-anio { font-size: 30px; color: var(--era-fg, var(--texto)); }
:is(.tl-pista:not(.compacta), .portada-fondo) .tl-carta .tl-nombre,
:is(.tl-pista:not(.compacta), .portada-fondo) .tl-carta .tl-artista { color: var(--era-fg, var(--texto)); }

.tl-soporte {
  position: absolute;
  top: 6px; right: 6px;
  width: 16px; height: 16px;
  color: var(--era-accent, currentColor);
  opacity: .85;
}
.tl-soporte svg { width: 100%; height: 100%; display: block; }

/* --- 1950-60s: vinilo. Papel crema, tinta gastada, marco tipo sello --- */
.era-5060 {
  --era-bg: linear-gradient(165deg, #f1e8d2 0%, #e2d2a8 100%);
  --era-fg: #3b2a1d;
  --era-accent: #7a2e2e;
  --era-borde-grueso: #5a2020;
  --era-compacto-fg: #f1e8d2;
}
:is(.tl-pista:not(.compacta), .portada-fondo) .era-5060 {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .45),
    0 6px 10px -4px rgba(0, 0, 0, .55),
    0 14px 22px -12px rgba(0, 0, 0, .5),
    inset 0 0 0 3px rgba(122, 46, 46, .32);
}

/* --- 1970s: vinilo. Naranja quemado, marron, mostaza --- */
.era-1970 {
  --era-bg: linear-gradient(165deg, #d9711f 0%, #7a3b12 100%);
  --era-fg: #fff3e0;
  --era-accent: #e8b923;
  --era-borde-grueso: #4a2408;
  --era-compacto-fg: #3b2408;
}

/* --- 1980s: casete. Negro con neon, grilla en perspectiva --- */
.era-1980 {
  --era-bg:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 7px),
    linear-gradient(165deg, #140e1e 0%, #1c1030 100%);
  --era-fg: #fdf3ff;
  --era-accent: #ff2fd0;
  --era-accent2: #26e0ff;
  --era-borde-grueso: #05030a;
  --era-compacto-fg: #ffffff;
}
:is(.tl-pista:not(.compacta), .portada-fondo) .era-1980 .tl-anio {
  text-shadow: 0 0 6px var(--era-accent), 0 0 16px var(--era-accent2);
}

/* --- 1990s: CD. Color plano saturado, contraste tipo LCD --- */
.era-1990 {
  --era-bg: linear-gradient(165deg, #4b2fd6 0%, #3823ad 100%);
  --era-fg: #f2f0ff;
  --era-accent: #c6ff3d;
  --era-borde-grueso: #241876;
  --era-compacto-fg: #14210a;
}

/* --- 2000s: CD. Cromado, brillo diagonal --- */
.era-2000 {
  --era-bg: linear-gradient(150deg, #eef2f5 0%, #c3cbd4 45%, #8b95a1 100%);
  --era-fg: #16202b;
  --era-accent: #2f8fe0;
  --era-borde-grueso: #5c6570;
  --era-compacto-fg: #ffffff;
}
:is(.tl-pista:not(.compacta), .portada-fondo) .era-2000::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .25) 100%);
  pointer-events: none;
}

/* --- 2010s-hoy: streaming. Plano, mucho blanco, geometrico --- */
.era-2010 {
  --era-bg: #f5f6f8;
  --era-fg: #14161a;
  --era-accent: var(--acento);
  --era-borde-grueso: #d6d9de;
  --era-compacto-fg: #ffffff;
}

/* --- el hueco: ancho fijo, alto completo, siempre tocable --- */
.tl-hueco {
  flex: 0 0 var(--hueco-ancho);
  width: var(--hueco-ancho);
  min-height: var(--carta-alto);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 2px dashed transparent;
  border-radius: 8px;
  color: var(--tenue);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  /* que el dedo no dispare zoom ni seleccion de texto */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tl-hueco::before {
  content: "";
  width: 3px; height: 62%;
  background: var(--borde);
  border-radius: 2px;
}
.tl-hueco:disabled { cursor: default; }
.tl-hueco:not(:disabled):hover { border-color: var(--acento); }
.tl-hueco:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }

.tl-hueco.sel {
  border-color: var(--acento);
  background: rgba(76, 154, 255, .16);
}
.tl-hueco.sel::before { background: var(--acento); width: 5px; height: 84%; }

.tl-hueco.bloqueado {
  border-color: var(--ok);
  background: rgba(46, 164, 79, .2);
}
.tl-hueco.bloqueado::before { background: var(--ok); width: 5px; height: 84%; }

/* el hueco vetado en la fase de apuestas (§4.5.4) */
.tl-hueco.vetado { opacity: .35; }
.tl-hueco.vetado::before { background: var(--peligro); }

/* ------------------------------------------------- barra de colocacion */

/* Fija abajo: en un telefono la accion principal siempre queda bajo el pulgar. */
.tl-barra {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-barra[hidden] { display: none; }

.tl-donde {
  text-align: center;
  font-size: 15px;
  min-height: 22px;
}
.tl-donde strong { color: var(--acento); }

.tl-controles { display: flex; gap: 8px; align-items: stretch; }

/* Estos dos botones son la razon por la que no hace falta acertar el hueco:
   se toca cerca y se afina con las flechas. */
.tl-paso {
  flex: 0 0 84px;
  font-size: 22px;
  background: #2b313b;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.tl-paso:disabled { opacity: .4; cursor: default; }
.tl-paso:active:not(:disabled) { background: #39414e; }

.tl-confirmar {
  flex: 1 1 auto;
  min-height: 52px;
  font-size: 17px;
  font-weight: 700;
  background: var(--ok);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.tl-confirmar:disabled { background: #3a4048; color: var(--tenue); cursor: default; }

/* En pantallas angostas las flechas se agrandan todavia mas */
@media (max-width: 480px) {
  :root { --carta-ancho: 104px; }
  .tl-paso { flex-basis: 72px; min-height: 52px; }
}

/* ------------------------------- pista compacta (grilla, §8.1) --------- */

/* Mismo componente, medidas chicas. Aca los huecos NO son tocables (nadie
   coloca sobre la timeline ajena fuera de la fase de apuestas), asi que pueden
   ser finos sin costo. */
.tl-pista.compacta {
  --carta-ancho: 46px;
  --carta-alto: 30px;
  --hueco-ancho: 6px;
  padding: 2px 12px 8px;
  gap: 0;
}
.tl-pista.compacta .tl-carta {
  padding: 2px 4px;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  /* brief §3, restriccion dura: en la grilla la era es SOLO un color plano
     y el año. Nada de sombra, rotacion, gradientes ni icono de soporte. */
  background: var(--era-accent, var(--superficie));
  color: var(--era-compacto-fg, #fff);
  border-color: transparent;
}
.tl-pista.compacta .tl-anio { font-size: 12px; font-weight: 600; }
.tl-pista.compacta .tl-hueco::before { width: 1px; height: 40%; }

/* ------------------------------------- grilla de timelines ajenas ------ */

.gr-fila {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.gr-fila.es-turno {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento) inset, 0 0 16px rgba(76, 154, 255, .35);
}

/* La cabecera es lo que se mira: nombre, cartas y monedas en grande. */
.gr-cab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
}
.gr-cab:disabled { cursor: default; }
.gr-cab:not(:disabled):hover { background: rgba(255,255,255,.04); }
.gr-cab:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }

.gr-chevron { color: var(--tenue); width: 12px; flex: 0 0 12px; }
.gr-nombre { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-nombre.desconectado { color: var(--tenue); text-decoration: line-through; }

.gr-marcas { font-size: 11px; color: var(--acento); letter-spacing: .5px; flex: 0 0 auto; }

/* los dos numeros que importan */
.gr-cuenta {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.gr-monedas {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  flex: 0 0 auto; min-width: 58px; text-align: right;
  color: var(--oro); text-shadow: 0 0 8px rgba(244, 197, 66, .35);
}

.gr-vacio { color: var(--tenue); font-size: 12px; padding: 4px 12px 10px; }

.gr-fila.expandida { border-color: var(--acento); }

@media (max-width: 480px) {
  .gr-cuenta { font-size: 18px; }
  .gr-monedas { font-size: 15px; min-width: 50px; }
  .gr-nombre { font-size: 15px; }
}

/* ------------------------------------- adivinanza (etapa 7, §4.2/§8.3) - */

/* Pegado arriba. La barra de colocacion es sticky abajo, asi que no chocan:
   el de turno tiene una arriba y otra abajo, y el resto solo esta. */
.adv {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 10px;
}
.adv.sonando {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento) inset, 0 0 16px rgba(76, 154, 255, .35);
}
.adv.cerrada { opacity: .75; }

.adv-fila1 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.adv-titulo { font-size: 15px; font-weight: 600; }
.adv-monedas {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  color: var(--oro); text-shadow: 0 0 8px rgba(244, 197, 66, .35);
}
.adv-monedas.gano { color: var(--ok); text-shadow: none; }

.adv-campos { display: flex; gap: 8px; }
.adv-campos input {
  flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 16px; /* 16px evita el zoom de iOS */
}
.adv-campos input:disabled { opacity: .5; }
.adv-enviar {
  flex: 0 0 auto; min-width: 92px;
  background: var(--acento-fuerte); color: #fff;
  border: none; border-radius: 6px; font-weight: 700; cursor: pointer;
  touch-action: manipulation;
}
.adv-enviar:disabled { background: #3a4048; color: var(--tenue); cursor: default; }

.adv-estado { margin-top: 8px; font-size: 14px; min-height: 20px; }
.adv-estado.aviso { color: #ffd9a8; }
.adv-estado.cierre { color: var(--tenue); }
.adv-estado.premio { color: var(--ok); font-weight: 600; }

.adv-acertaron { margin-top: 4px; font-size: 13px; color: var(--tenue); }
.adv-acertaron:empty { display: none; }
.adv-acertaron .primero { color: var(--ok); font-weight: 700; }

@media (max-width: 480px) {
  .adv-campos { flex-wrap: wrap; }
  .adv-campos input { flex: 1 1 45%; }
  .adv-enviar { flex: 1 1 100%; min-height: 48px; }
}

/* -------------------------------- gasto de monedas (etapa 8, §4.4) ----- */

.gasto {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
}
.gasto[hidden] { display: none; }

/* La compra aparece justo despues de fallar, que es un momento confuso.
   Se marca fuerte para que no se lea como algo que pasa solo. */
.gasto.compra { border-color: #a4661f; background: #33240f; }

.gasto-cabecera { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.gasto-texto { font-size: 14px; line-height: 1.45; margin-bottom: 8px; color: #e2e5ea; }
.gasto-texto strong { color: #ffd9a8; }
.gasto-texto .falta { color: var(--peligro); font-weight: 700; }

.gasto-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.gasto-btn, .gasto-si, .gasto-no {
  min-height: 48px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0 16px;
  border: 1px solid transparent;
}
.gasto-btn { background: var(--acento-fuerte); color: #fff; flex: 1 1 auto; }
.gasto-btn:disabled { background: #3a4048; color: var(--tenue); cursor: default; }
.gasto-si { background: var(--ok); color: #fff; flex: 1 1 auto; }
.gasto-no {
  background: transparent; color: var(--texto);
  border-color: var(--borde); flex: 0 0 auto; min-width: 110px;
}
.gasto-no:hover { background: rgba(255,255,255,.05); }

/* el saldo resultante, que es lo que de verdad se quiere saber antes de pagar */
.gasto-saldo { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .gasto-btn, .gasto-si { flex: 1 1 100%; }
  .gasto-no { flex: 1 1 100%; }
}

/* ---------------------------- ventana de apuestas (etapa 9, §4.5/§8.2) - */

.apuesta {
  background: #1b2436;
  border: 2px solid var(--acento);
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0;
}
.apuesta[hidden] { display: none; }

.apuesta-cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 16px; font-weight: 700; margin-bottom: 6px;
}
.apuesta-reloj {
  font-variant-numeric: tabular-nums; color: #ffd9a8; font-weight: 700;
  flex: 0 0 auto;
}

/* Es la unica mecanica que el grupo no ha jugado nunca: el texto tiene que
   ensenarla solo, sin que nadie explique nada. */
.apuesta-explica { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.apuesta-explica ul { margin: 6px 0 0; padding-left: 20px; }
.apuesta-explica li { margin-bottom: 3px; }
.apuesta-explica strong { color: var(--acento); }
.apuesta-explica .cuesta { color: #ffd9a8; }
.apuesta-explica .falta { color: var(--peligro); font-weight: 700; }

.apuesta-controles { display: flex; gap: 8px; align-items: stretch; }
.apuesta-confirma { margin-top: 4px; }
.apuesta-acciones { display: flex; margin-top: 8px; }
.apuesta-acciones[hidden] { display: none; }
.apuesta-acciones .gasto-no { flex: 1 1 auto; }

/* Sin reloj hay que decir a quien se esta esperando. */
.apuesta-esperando { margin-top: 8px; font-size: 13px; color: var(--tenue); }
.apuesta-esperando:empty { display: none; }
.apuesta-esperando strong { color: #ffd9a8; }

@media (max-width: 480px) {
  .apuesta-controles .tl-paso { flex-basis: 64px; }
}

/* ---------------------------------- controles del host (salida manual) - */

/* Discreto a proposito: esta siempre visible, pero no compite con la accion
   del turno. Es una salida de emergencia, no algo que se use cada ronda. */
.host {
  border: 1px dashed var(--borde);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px 0;
  background: rgba(255,255,255,.02);
}
.host[hidden] { display: none; }
.host-titulo { font-size: 11px; letter-spacing: .6px; color: var(--tenue); margin-bottom: 6px; }
.host-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.host-btn {
  flex: 1 1 auto; min-height: 40px;
  background: transparent; color: var(--tenue);
  border: 1px solid var(--borde); border-radius: 8px;
  font-size: 13px; cursor: pointer; touch-action: manipulation; padding: 0 12px;
}
.host-btn:hover { color: var(--texto); border-color: var(--peligro); }
.host-btn[hidden] { display: none; }
.host-confirma { margin-top: 6px; }

/* ------------------------------- contador del timeout de turno (§5.3) -- */

.aviso-turno {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #4a2a12;
  border: 1px solid #a4661f;
  color: #ffd9a8;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 15px;
}
.aviso-turno[hidden] { display: none; }
.aviso-turno.urgente { background: #4d1f1f; border-color: var(--peligro); color: #ffc9c9; }
.aviso-turno .cuenta {
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 46px; text-align: center;
}

/* ------------------------------------------------------------ el resto */

hr { border: none; border-top: 1px solid var(--borde); margin: 14px 0; }
input { font: inherit; padding: 6px; background: #22262e; color: var(--texto);
        border: 1px solid var(--borde); border-radius: 6px; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3, h4 { font-size: 15px; margin-bottom: 6px; }

/* ============================================================
   Portada / Crear sala / Unirse / Lobby — brief_visual_anazo.md
   Escritorio es el caso principal (todos juegan desde PC): las medidas
   base asumen pantalla ancha, y el @media al final angosta para movil
   sin que sea movil lo que manda el diseño.
   ============================================================ */

/* -------------------------------------------------------- portada ----- */

.portada {
  position: relative;
  /* bordea la pantalla completa aunque body tenga su propio padding */
  margin: -12px;
  width: calc(100% + 24px);
  min-height: calc(100vh + 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 24px;
  box-sizing: border-box;
}
.portada[hidden] { display: none; }

.portada-fondo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* vineta: mantiene el centro legible sin esconder del todo las cartas */
.portada-fondo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--fondo) 0%, rgba(18, 19, 26, .55) 45%, var(--fondo) 92%);
}
.portada-carta {
  position: absolute;
  width: 132px;
  min-height: 118px;
  opacity: .55;
  filter: saturate(.85);
}
.portada-carta .tl-anio { font-size: 32px; }

.portada-contenido {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.portada-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--tenue);
  font-weight: 600;
  margin: 0;
}
.portada-logo {
  font-family: var(--fuente-anio);
  font-size: clamp(72px, 10vw, 140px);
  /* 1.15 y no menos: con background-clip:text el degradado solo pinta
     dentro de la caja de linea, y una linea mas ajustada corta la tilde de
     la Ñ (Bebas Neue la dibuja bastante alta). */
  line-height: 1.15;
  letter-spacing: 1px;
  margin: 0;
  background: linear-gradient(160deg, #fff 0%, var(--acento) 65%, #8fc3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(76, 154, 255, .25));
}
.portada-tagline {
  font-size: 17px;
  line-height: 1.5;
  color: var(--tenue);
  max-width: 480px;
  margin: 0;
}
.portada-acciones {
  margin-top: 10px;
  display: flex;
  gap: 14px;
}

/* -------------------------------------------------------- botones cta - */

.cta {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0 22px;
  min-height: 50px;
  touch-action: manipulation;
  background: var(--acento-fuerte);
  color: #fff;
}
.cta:hover { background: var(--acento); }
.cta:disabled { background: #3a4048; color: var(--tenue); cursor: default; }
.cta-secundaria { background: transparent; color: var(--texto); border-color: var(--borde); }
.cta-secundaria:hover { border-color: var(--acento); color: var(--acento); background: transparent; }
.cta-grande { font-size: 17px; min-height: 56px; padding: 0 28px; }

/* --------------------------------------------- crear sala / unirse ---- */

.panel-entrada {
  position: relative;
  max-width: 480px;
  margin: 64px auto;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel-entrada[hidden] { display: none; }
.panel-entrada h2 { font-size: 22px; margin: 4px 0 0; }

.volver {
  align-self: flex-start;
  background: none; border: none; color: var(--tenue);
  font: inherit; font-size: 14px; cursor: pointer; padding: 4px 0;
}
.volver:hover { color: var(--texto); }

.campo-texto {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--tenue); font-weight: 600;
}
.campo-texto input {
  font-size: 16px; padding: 12px 14px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
}
.campo-texto input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.campo-codigo {
  text-transform: uppercase; letter-spacing: 4px;
  font-family: var(--fuente-anio); font-size: 22px !important; text-align: center;
}

.picker { display: flex; flex-direction: column; gap: 8px; }
.picker-etiqueta { font-size: 13px; color: var(--tenue); font-weight: 600; }
.picker-opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.picker-opcion {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 10px 16px; min-height: 44px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
  touch-action: manipulation;
}
.picker-opcion:hover { border-color: var(--acento); }
.picker-opcion.sel { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #fff; }

/* Solo tiene efecto con DEBUG=true en el servidor (en produccion el valor se
   ignora), pero un <details> colapsado sigue siendo visible y clickeable
   para cualquiera. Mismo criterio que el resto de lo tecnico (?debug o el
   atajo de teclado): oculto por defecto via body.debug. */
.ajustes-prueba { display: none; font-size: 13px; color: var(--tenue); }
body.debug .ajustes-prueba { display: block; }
.ajustes-prueba summary { cursor: pointer; }
.ajustes-nota { margin: 8px 0; line-height: 1.4; }
.ajustes-prueba .campo-chico { margin-top: 8px; }
.ajustes-prueba .campo-chico input { max-width: 160px; }

/* ------------------------------------------------------------- velo --- */

#velo {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(18, 19, 26, .96);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#velo[hidden] { display: none; }
.velo-tarjeta {
  max-width: 460px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.velo-tarjeta h2 { font-size: 22px; margin: 0; }
.velo-btn {
  font-size: 20px; font-weight: 800;
  padding: 0 40px; min-height: 64px; width: min(100%, 380px);
  border-radius: 12px; border: none; cursor: pointer;
  background: var(--ok); color: #fff;
}
.velo-btn:hover { filter: brightness(1.08); }
.velo-btn:disabled { background: #3a4048; color: var(--tenue); cursor: wait; }
#veloAviso { line-height: 1.5; color: var(--texto); margin: 0; }
#veloAviso2 { font-size: 13px; color: var(--tenue); margin: 0; }
#veloError { color: var(--peligro); font-weight: 700; margin: 0; }
#veloError:empty { display: none; }

/* ------------------------------------------------------------ lobby --- */

.lobby {
  max-width: 760px;
  margin: 48px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.lobby[hidden] { display: none; }

.lobby-codigo-bloque {
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 28px;
}
.lobby-etiqueta {
  font-size: 13px; color: var(--tenue); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.lobby-codigo-fila {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.lobby-codigo-grande {
  font-family: var(--fuente-anio);
  font-size: 64px;
  letter-spacing: 10px;
  line-height: 1;
  color: var(--texto);
}
.lobby-copiar {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 10px 16px; min-height: 44px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
}
.lobby-copiar:hover { border-color: var(--acento); }
.lobby-copiar:disabled { color: var(--ok); border-color: var(--ok); cursor: default; }
.lobby-instruccion { margin: 10px 0 0; color: var(--tenue); font-size: 13px; }

.lobby-jugadores h3 { margin-bottom: 12px; }
.lobby-lista { display: flex; flex-direction: column; gap: 8px; }
.lobby-jugador {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px 14px;
}
.lobby-jugador-punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.lobby-jugador-punto.ok { background: var(--ok); box-shadow: 0 0 6px rgba(46, 164, 79, .6); }
.lobby-jugador-punto.pendiente { background: #b8860b; animation: lobbyPulso 1.4s ease-in-out infinite; }
.lobby-jugador-nombre { font-weight: 600; flex: 1 1 auto; }
.lobby-jugador-marca {
  font-size: 11px; letter-spacing: .5px; color: var(--acento);
  border: 1px solid var(--acento); border-radius: 999px; padding: 2px 8px;
}
.lobby-jugador-marca.desconectado { color: var(--tenue); border-color: var(--borde); }

@keyframes lobbyPulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* que se note cuando alguien nuevo entra */
.lobby-jugador.recien-llegado { animation: lobbyEntrada .5s ease-out; }
@keyframes lobbyEntrada {
  from { transform: translateY(-10px); opacity: 0; background: rgba(76, 154, 255, .25); }
  to { transform: translateY(0); opacity: 1; }
}

.lobby-acciones { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lobby-acciones .cta { width: min(100%, 320px); }
.lobby-acciones .cta[hidden] { display: none; }
.lobby-espera-texto { color: var(--tenue); font-size: 14px; min-height: 20px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .lobby-jugador-punto.pendiente { animation: none; }
  .lobby-jugador.recien-llegado { animation: none; }
}

/* ------------------------------------------------------ fin de partida */

.fin-partida { max-width: 560px; margin: 64px auto; padding: 0 24px; }
.fin-partida[hidden] { display: none; }

.fin-partida-tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fin-partida-trofeo { font-size: 52px; line-height: 1; }
.fin-partida-eyebrow { color: var(--tenue); font-size: 13px; margin: 4px 0 0; }
.fin-partida-titulo {
  font-family: var(--fuente-anio);
  font-size: 44px;
  letter-spacing: .5px;
  line-height: 1.1;
  color: var(--oro);
  text-shadow: 0 0 24px rgba(244, 197, 66, .35);
  margin: 0;
}

.fin-partida-tabla { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 16px 0 6px; }
.fin-partida-fila {
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 10px 14px;
}
.fin-partida-fila.ganador { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro) inset; }
.fin-partida-puesto { font-weight: 700; color: var(--tenue); width: 20px; flex: 0 0 auto; }
.fin-partida-nombre { flex: 1 1 auto; text-align: left; font-weight: 600; }
.fin-partida-cartas { font-variant-numeric: tabular-nums; color: var(--tenue); flex: 0 0 auto; }

.fin-partida-espera { color: var(--tenue); font-size: 14px; margin: 8px 0 0; min-height: 20px; }
.fin-partida-tarjeta .cta { width: min(100%, 320px); }
.fin-partida-tarjeta .cta[hidden] { display: none; }

/* ------------------------------------------------------- panel-debug -- */

/* Telemetria de las etapas 1-3 y el log crudo: siguen vivos porque
   cliente.js los escribe en cada render(), solo que ya no son lo primero
   que se ve — de hecho no se ven en absoluto salvo en modo debug
   (?debug en la URL, o escribiendo "debug" en la pantalla). Nunca se
   dejan de escribir, solo de mostrar: aplicarModoDebug() en cliente.js
   solo alterna esta clase en <body>. */
.panel-debug { display: none; }
body.debug .panel-debug {
  display: block;
  max-width: 980px; margin: 24px auto; padding: 0 24px 24px;
  font-size: 12px; color: var(--tenue);
}
.panel-debug summary { cursor: pointer; padding: 8px 0; }
.panel-debug pre {
  white-space: pre-wrap; word-break: break-word;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 10px;
}

/* ============================================================
   Sección 7 — animaciones que sí merecen protagonismo.
   ============================================================ */

/* -------------------------------------------------- moneda / contador -- */

.mis-monedas {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; font-weight: 700; vertical-align: middle;
  margin-left: 8px;
  color: var(--oro); text-shadow: 0 0 8px rgba(244, 197, 66, .35);
}

/* clones flotantes: la moneda que vuela, nada mas. Position fija para no
   depender del flujo del documento mientras cruza la pantalla. */
.animacion-clon {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}
.animacion-moneda { display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* ------------------------------------------------- §7.1 la revelacion -- */

.escenario { display: flex; justify-content: center; margin: 4px 0 14px; perspective: 900px; }
.escenario[hidden] { display: none; }

.escenario-carta {
  position: relative;
  width: 150px;
  height: 132px;
  transform-style: preserve-3d;
}
.escenario-cara {
  position: absolute; inset: 0;
  border-radius: 10px;
  border: 1px solid var(--borde);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .55), 0 14px 22px -12px rgba(0, 0, 0, .5);
}

/* el dorso: patron geometrico fijo, IGUAL para todas las cartas. Nunca
   recibe una clase de era (brief §8: "no puede filtrar nada de la era"). */
.escenario-dorso {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, var(--superficie), var(--panel));
}
.escenario-dorso::after {
  content: "♪";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--tenue); opacity: .5;
}

/* el frente: rotado 180 de fabrica, asi que cuando la carta ya volteo
   (el wrapper esta a 180) esta cara queda mirando al frente y no al reves.
   La clase de era se agrega a mano en manejarResolucion(). */
.escenario-frente {
  transform: rotateY(180deg);
  background: var(--era-bg, var(--superficie));
  color: var(--era-fg, var(--texto));
  border-color: var(--era-accent, var(--borde));
}
.escenario-frente .tl-anio { font-size: 34px; }
.escenario-frente .tl-soporte { top: 8px; right: 8px; }

@media (prefers-reduced-motion: reduce) {
  .escenario { perspective: none; }
}

/* --------------------------------------------------- §7.2 el anillo --- */

.anillo {
  position: relative;
  width: calc(var(--anillo-radio, 90px) * 2 + 64px);
  height: calc(var(--anillo-radio, 90px) * 2 + 64px);
  max-width: 100%;
  margin: 8px auto 18px;
}
.anillo-avatar {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--tenue);
  font-size: 13px; font-weight: 700;
  transform: rotate(var(--angulo)) translate(var(--anillo-radio, 90px)) rotate(calc(-1 * var(--angulo)));
}
.anillo-avatar.activo {
  width: 64px; height: 64px; margin: -32px;
  background: var(--acento-fuerte);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 0 0 3px var(--acento), 0 0 24px rgba(76, 154, 255, .5);
  z-index: 2;
}
.anillo-avatar.desconectado { opacity: .4; text-decoration: line-through; }

@media (max-width: 640px) {
  .anillo { transform: scale(.82); margin: 0 auto 6px; }
}

/* ============================================================
   Panel de reproduccion flotante + zona de acciones.
   El de YouTube JAMAS se muestra: trae titulo y portada, o sea la
   respuesta. Todo lo de aca es un sustituto que no filtra nada.
   ============================================================ */

.juego-layout { display: block; }
.juego-principal { min-width: 0; }

@media (min-width: 1180px) {
  /* Solo se vuelve grilla de dos columnas cuando el reproductor esta
     activo — si no, quedaria una columna vacia de 340px sin sentido. */
  .juego-layout.reproductor-activo {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: start;
    gap: 20px;
  }
  .juego-layout.reproductor-activo .juego-principal { order: 1; }
  .juego-layout.reproductor-activo .reproductor { order: 2; position: sticky; top: 16px; }
}

.reproductor {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reproductor[hidden] { display: none; }

/* --- zona izquierda: disco, waveform, progreso, volumen --- */

.reproductor-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borde);
}
.reproductor-audio[hidden] { display: none; }

.disco-girando {
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .05) 0deg 4deg, transparent 4deg 8deg),
    radial-gradient(circle at 35% 35%, #363c50, #14151c 70%);
  border: 1px solid var(--borde);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
  animation: girarDisco 3s linear infinite;
}
.disco-anillo { position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .12); }
.disco-hoyo {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px;
  border-radius: 50%;
  background: var(--fondo);
  border: 1px solid var(--borde);
}
@keyframes girarDisco { to { transform: rotate(360deg); } }

.waveform { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 32px; }
.waveform-barra {
  width: 4px; height: 6px;
  border-radius: 2px;
  background: var(--acento);
  opacity: .5;
  transition: opacity .2s;
}
.waveform.sonando .waveform-barra { opacity: 1; animation: waveformPulso .9s ease-in-out infinite alternate; }
.waveform-barra:nth-child(odd) { animation-duration: .8s; }
.waveform-barra:nth-child(3n) { animation-delay: -.5s; }
.waveform-barra:nth-child(4n) { animation-delay: -.25s; }
.waveform-barra:nth-child(5n) { animation-delay: -.7s; }
@keyframes waveformPulso { from { height: 6px; } to { height: 28px; } }

.reproductor-progreso {
  width: 100%; height: 6px;
  border-radius: 999px;
  background: var(--superficie);
  overflow: hidden;
}
.reproductor-progreso-barra {
  height: 100%; width: 0%;
  background: var(--acento);
  border-radius: 999px;
  transition: width .25s linear;
}

.reproductor-volumen { display: flex; align-items: center; gap: 10px; width: 100%; }
.reproductor-volumen-icono { font-size: 15px; flex: 0 0 auto; }
.reproductor-volumen-slider {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: var(--superficie);
  cursor: pointer;
}
.reproductor-volumen-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--acento);
  border: 2px solid var(--fondo);
  cursor: pointer;
  transition: transform .15s;
}
.reproductor-volumen-slider:hover::-webkit-slider-thumb { transform: scale(1.15); }
.reproductor-volumen-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--acento);
  border: 2px solid var(--fondo);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .disco-girando { animation: none; }
  .waveform.sonando .waveform-barra { animation: none; height: 16px; }
}

/* --- zona derecha: adivinanza + gastos, reubicados sin tocar su logica --- */

.reproductor-acciones { display: flex; flex-direction: column; gap: 12px; }
/* dentro del panel flotante no hace falta el margen/sticky que tenian
   cuando vivian sueltos en el flujo principal */
.reproductor-acciones .adv { margin: 0; position: static; }
.reproductor-acciones .gasto { margin: 0; }

/* ------------------------------------------- el boton que destraba todo */

.turno-accion {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 18px 0 22px;
}
.btn-reproducir {
  width: 104px; height: 104px;
  border-radius: 50%;
  border: none;
  background: var(--acento-fuerte);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 10px 26px -8px rgba(76, 154, 255, .55);
  transition: background .15s, transform .1s;
}
.btn-reproducir-icono { font-size: 38px; margin-left: 4px; }
.btn-reproducir:not(:disabled) { animation: pulsoReproducir 2.2s ease-in-out infinite; }
.btn-reproducir:not(:disabled):hover { background: var(--acento); transform: scale(1.05); }
.btn-reproducir:not(:disabled):active { transform: scale(.95); }
.btn-reproducir:disabled { background: var(--superficie); color: var(--tenue); box-shadow: none; cursor: default; }
@keyframes pulsoReproducir {
  0%, 100% { box-shadow: 0 10px 26px -8px rgba(76, 154, 255, .55), 0 0 0 0 rgba(76, 154, 255, .45); }
  50% { box-shadow: 0 10px 26px -8px rgba(76, 154, 255, .55), 0 0 0 18px rgba(76, 154, 255, 0); }
}
.btn-reproducir-etiqueta { color: var(--tenue); font-size: 14px; font-weight: 600; margin: 0; }
.btn-reproducir-etiqueta:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-reproducir:not(:disabled) { animation: none; }
}

/* ============================================================
   Estados de hover/presionado — que se sientan parte del diseño y no
   botones de formulario. Sobre todo confirmar colocacion y apostar,
   las decisiones que importan.
   ============================================================ */

.tl-confirmar {
  transition: background .15s, transform .1s, box-shadow .15s;
}
.tl-confirmar:not(:disabled):hover {
  background: #35b768;
  box-shadow: 0 6px 16px -6px rgba(46, 164, 79, .55);
}
.tl-confirmar:not(:disabled):active { transform: scale(.97); background: #24893f; box-shadow: none; }

.gasto-btn, .gasto-si, .gasto-no, .cta, .picker-opcion, .host-btn, .tl-paso, .lobby-copiar, .adv-enviar {
  transition: filter .15s, transform .1s, box-shadow .15s, background-color .15s, border-color .15s;
}

.gasto-si:hover { filter: brightness(1.12); box-shadow: 0 6px 16px -6px rgba(46, 164, 79, .5); }
.gasto-si:active { transform: scale(.96); filter: brightness(.95); box-shadow: none; }
.gasto-btn:not(:disabled):hover { filter: brightness(1.1); box-shadow: 0 6px 16px -6px rgba(47, 127, 224, .5); }
.gasto-btn:not(:disabled):active { transform: scale(.97); filter: brightness(.95); box-shadow: none; }
.gasto-no:active { transform: scale(.96); }
.adv-enviar:not(:disabled):hover { filter: brightness(1.1); }
.adv-enviar:not(:disabled):active { transform: scale(.96); }

.cta:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(76, 154, 255, .4); }
.cta:not(:disabled):active { transform: scale(.97); box-shadow: none; }

.picker-opcion:active { transform: scale(.95); }
.host-btn:active { transform: scale(.96); }
.tl-paso:not(:disabled):active { transform: scale(.93); }
.lobby-copiar:active { transform: scale(.95); }

.tl-hueco:not(:disabled):active::before { background: var(--acento); width: 5px; }

@media (prefers-reduced-motion: reduce) {
  .tl-confirmar, .gasto-btn, .gasto-si, .gasto-no, .cta, .picker-opcion,
  .host-btn, .tl-paso, .lobby-copiar, .adv-enviar {
    transition: none;
  }
}

/* ============================================================
   Movil: sigue funcionando, pero deja de ser lo que manda.
   ============================================================ */
@media (max-width: 640px) {
  .portada-logo { font-size: clamp(52px, 18vw, 84px); }
  .portada-tagline { font-size: 15px; }
  .portada-acciones { flex-direction: column; width: 100%; }
  .portada-acciones .cta { width: 100%; }
  .portada-carta { width: 92px; min-height: 82px; }
  .portada-carta .tl-anio { font-size: 22px; }

  .panel-entrada { margin: 24px 16px; padding: 22px; }

  .lobby { margin: 24px auto; padding: 0 16px; }
  .lobby-codigo-grande { font-size: 40px; letter-spacing: 6px; }
  .lobby-codigo-bloque { padding: 20px; }

  .fin-partida { margin: 24px 16px; padding: 0; }
  .fin-partida-tarjeta { padding: 26px 20px; }
  .fin-partida-titulo { font-size: 34px; }

  .btn-reproducir { width: 88px; height: 88px; }
  .btn-reproducir-icono { font-size: 32px; }
}