/* ==========================================================================
   sofapop · Base de la TELE (1920×1080, Sony Bravia / TV Bro)
   Requiere tokens.css. Escala: 1rem = 3vh ≈ 32 px a 1080 p.
   Ningún texto para jugadores baja de 1rem (32 px).
   Rendimiento: sin box-shadow, sin filter/blur, sin canvas; solo se animan
   transform y opacity. Los degradados son estáticos.
   ========================================================================== */

html { font-size: 3vh; }
body {
  margin: 0;
  background: var(--tg-bg);
  color: var(--tg-ink);
  font-family: var(--tg-font);
  font-weight: var(--tg-w-regular);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Foco (mando de la tele) ------------------------------------
   Aplica a cualquier elemento navegable con flechas + OK. Si el JS gestiona
   el foco con una clase, usa .foco; si usa el foco nativo, :focus-visible. */
.foco,
:focus-visible {
  outline: .1875rem solid var(--tg-focus);   /* 6 px */
  outline-offset: .125rem;                    /* 4 px */
}
.tg-focusable { transition: transform var(--tg-fast) var(--tg-ease); }
.tg-focusable.foco, .tg-focusable:focus-visible { transform: scale(1.03); }

/* ---------- Cabecera ---------------------------------------------------- */
.tg-header { height: 3.75rem; padding: 0 2.5rem; display: flex; align-items: center; gap: 2rem; }
.tg-logo { display: flex; align-items: center; gap: .375rem; }
.tg-logo svg { width: 2.125rem; height: 2.125rem; }
.tg-logo__txt { font-size: 1.5625rem; font-weight: var(--tg-w-strong); letter-spacing: -.05em; line-height: 1; transform: translateY(.12em); } /* centrado con el cuerpo de la tele, no con las antenas */
/* Logo vivo: cada 7 s mueve las antenas y guiña el ojo. Solo transform. */
.tg-logo--vivo .l-ant, .tg-logo--vivo .l-ojo { transform-box: fill-box; animation: 7s ease-in-out 1s infinite both; }
.tg-logo--vivo .l-ant--i { transform-origin: 100% 100%; animation-name: tg-antena-i; }
.tg-logo--vivo .l-ant--d { transform-origin: 0 100%; animation-name: tg-antena-d; animation-delay: 1.08s; }
.tg-logo--vivo .l-ojo { transform-origin: 50% 50%; animation-name: tg-guino; }
@keyframes tg-antena-i { 0%, 18%, 100% { transform: rotate(0); } 5% { transform: rotate(-16deg); } 10% { transform: rotate(10deg); } 14% { transform: rotate(-4deg); } }
@keyframes tg-antena-d { 0%, 18%, 100% { transform: rotate(0); } 5% { transform: rotate(16deg); } 10% { transform: rotate(-10deg); } 14% { transform: rotate(4deg); } }
@keyframes tg-guino { 0%, 21%, 25%, 100% { transform: scaleY(1); } 23% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .tg-logo--vivo .l-ant, .tg-logo--vivo .l-ojo { animation: none; } }

.tg-tabs { display: flex; gap: 1.5rem; align-items: center; }
.tg-tab {
  font-size: 1.0625rem; line-height: 1.2; color: var(--tg-muted);
  padding: .3125rem 0 .25rem; border-bottom: .15625rem solid transparent;
}
.tg-tab--activa { color: var(--tg-primary); font-weight: var(--tg-w-medium); border-bottom-color: var(--tg-primary); }

/* ---------- Botones ---------------------------------------------------- */
.tg-btn {
  appearance: none; border: 0; cursor: pointer;
  height: 1.875rem; padding: 0 .8125rem 0 .6875rem;   /* 60 px de alto */
  border-radius: var(--tg-r-pill);
  background: var(--tg-primary); color: #fff;
  font: var(--tg-w-medium) 1rem/1 var(--tg-font);
  display: inline-flex; align-items: center; gap: .3125rem;
}
.tg-btn svg { width: .75rem; height: .75rem; }
.tg-btn--grande { height: 3rem; padding: 0 1.625rem 0 1.375rem; font-size: 1.25rem; }
.tg-btn--sec { background: var(--tg-surface); color: var(--tg-ink); }

/* ---------- Franja de la sala (bajo la cabecera) ------------------------ */
.tg-sala {
  margin: 0 2.5rem; height: 4.5rem;
  border-bottom: .0625rem solid var(--tg-line);
  display: flex; align-items: center; gap: .375rem;
}
.tg-sala__unirse { display: flex; align-items: center; gap: .625rem; padding-right: .875rem; border-right: .0625rem solid var(--tg-line); height: 3.5rem; }
.tg-sala__texto { font-size: 1rem; color: var(--tg-ink-2); line-height: 1.1; }
.tg-sala__url { font-weight: var(--tg-w-medium); color: var(--tg-primary); }
.tg-sala__jugadores { margin-left: auto; display: flex; gap: .3125rem; }

#qr, .tg-qr {
  width: 3.75rem; height: 3.75rem; box-sizing: border-box;
  border: .0625rem solid var(--tg-line); border-radius: .5rem; background: #fff;
}
#qr img, #qr svg, #qr canvas { width: 100%; height: 100%; } /* el QR lo pinta el JS */

/* Código en fichas. El JS debe pintar cada letra en un <span>:
   <div id="codigo"><span>C</span><span>D</span><span>Y</span><span>R</span></div> */
#codigo { display: flex; gap: .25rem; }
#codigo > span {
  width: 2rem; height: 2.375rem; border-radius: .4375rem;
  background: var(--tg-primary-soft); color: var(--tg-primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: var(--tg-w-strong);
}
#codigo.tg-codigo--grande > span { width: 3.75rem; height: 4.375rem; border-radius: .75rem; font-size: 2.75rem; }

/* ---------- Jugador (tarjeta compacta: personaje + punto + nombre) ------
   Estructura que genera el JS:
   <div class="tarjeta [ausente] [anfitrion] [libre]">
     <div class="avatar"> <img|svg> <span class="punto [reconectando]"></span>
       <span class="corona"></span> </div>
     <div class="nombre">Lucía</div>
   </div> */
.tarjeta { width: 3.5rem; display: flex; flex-direction: column; align-items: center; gap: .125rem; }
.tarjeta .avatar {
  position: relative; width: 2.625rem; height: 2.625rem; border-radius: var(--tg-r-pill);
  background: var(--tg-surface); display: flex; align-items: center; justify-content: center;
}
.tarjeta .avatar > img, .tarjeta .avatar > svg { width: 69%; height: 69%; }
.tarjeta .avatar > img.selfie { width: 100%; height: 100%; border-radius: var(--tg-r-pill); object-fit: cover; }
.tarjeta .nombre { font-size: 1rem; font-weight: var(--tg-w-medium); line-height: 1.05; white-space: nowrap; max-width: 3.5rem; overflow: hidden; text-overflow: ellipsis; }
.punto {
  position: absolute; right: -.0625rem; bottom: -.0625rem;
  width: .8125rem; height: .8125rem; box-sizing: border-box; border-radius: var(--tg-r-pill);
  background: var(--tg-online); border: .125rem solid var(--tg-bg);
}
.punto.reconectando { background: var(--tg-idle); }
.tarjeta.ausente { opacity: .75; }
.tarjeta .corona { display: none; }
.tarjeta.anfitrion .corona {
  display: flex; position: absolute; left: -.1875rem; top: -.25rem;
  width: 1.125rem; height: 1.125rem; box-sizing: border-box; border-radius: var(--tg-r-pill);
  background: var(--tg-host); border: .09375rem solid #fff; align-items: center; justify-content: center;
}
.tarjeta.libre .avatar { background: transparent; border: .09375rem dashed var(--tg-line-strong); box-sizing: border-box; }
.tarjeta.libre .nombre { font-weight: var(--tg-w-regular); color: var(--tg-muted); }

/* ---------- Ficha de juego (portada 16:9 + datos) ---------------------- */
.ficha-juego { display: flex; flex-direction: column; gap: .4375rem; }
.ficha-juego__portada {
  position: relative; aspect-ratio: 16 / 9; border-radius: .75rem; overflow: hidden;
  background: var(--fondo, var(--tg-surface));
}
.ficha-juego__portada > svg, .ficha-juego__portada > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-juego__play {
  position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border-radius: var(--tg-r-pill); background: rgba(20, 16, 36, .6);
  display: flex; align-items: center; justify-content: center;
}
.ficha-juego__control {
  position: absolute; left: .5625rem; bottom: .5625rem; height: 1.625rem; padding: 0 .5625rem;
  border-radius: var(--tg-r-pill); background: #fff; color: var(--tg-ink);
  display: flex; align-items: center; font-size: 1rem; font-weight: var(--tg-w-medium);
}
.ficha-juego__datos { display: flex; align-items: center; gap: .5rem; }
.ficha-juego__icono { width: 2.25rem; height: 2.25rem; flex: none; border-radius: .5625rem; display: flex; align-items: center; justify-content: center; }
.ficha-juego__nombre { font-size: 1.0625rem; font-weight: var(--tg-w-medium); line-height: 1.1; }
.ficha-juego__genero { font-size: 1rem; color: var(--tg-muted); line-height: 1.1; }
.ficha-juego.foco, .ficha-juego:focus-visible { outline: none; }
.ficha-juego.foco .ficha-juego__portada, .ficha-juego:focus-visible .ficha-juego__portada {
  outline: .1875rem solid var(--tg-focus); outline-offset: .125rem;
}

/* ---------- Progreso de la partida (Juego n de 6) ---------------------- */
.tg-progreso { display: flex; gap: .25rem; }
.tg-progreso > span { width: 1.75rem; height: .375rem; border-radius: .1875rem; background: var(--tg-line); }
.tg-progreso > span.hecho { background: var(--tg-primary); }

/* ---------- Instrucciones (comunes a los 6 juegos) --------------------- */
#juego-titulo { font-size: 2.75rem; font-weight: var(--tg-w-medium); letter-spacing: var(--tg-tracking-title); line-height: 1; }
.juego-instrucciones { display: flex; flex-direction: column; gap: .5625rem; }
.juego-instrucciones li { list-style: none; display: flex; gap: .5625rem; font-size: 1.125rem; line-height: 1.3; color: var(--tg-ink-2); }
.tg-pastilla {
  height: 1.75rem; padding: 0 .6875rem; border-radius: var(--tg-r-pill);
  background: var(--tg-primary-soft); color: var(--tg-primary-dark);
  display: inline-flex; align-items: center; gap: .3125rem; font-size: 1rem; font-weight: var(--tg-w-medium);
}

/* ---------- Cuenta atrás ---------------------------------------------- */
.tg-pantalla-cuenta { background: radial-gradient(circle at 50% 50%, #7C4DEB 0%, var(--tg-primary) 45%, #4E25B0 100%); color: #fff; }
.juego-cuenta {
  width: 18.75rem; height: 18.75rem; border-radius: var(--tg-r-pill); background: #fff;
  color: var(--tg-primary); display: flex; align-items: center; justify-content: center;
  font-size: 13rem; font-weight: var(--tg-w-strong); line-height: 1; letter-spacing: -.04em;
  will-change: transform, opacity;
}
/* Animación por número: entra grande y se asienta (solo transform/opacity) */
@keyframes tg-cuenta { from { transform: scale(1.25); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.juego-cuenta.tic { animation: tg-cuenta var(--tg-base) var(--tg-ease) both; }

/* ---------- Ranking del juego ----------------------------------------- */
.juego-ranking { display: flex; flex-direction: column; gap: .5rem; }
.juego-fila {
  height: 4.125rem; box-sizing: border-box; border-radius: var(--tg-r-pill);
  background: var(--tg-surface); padding: 0 1.25rem 0 .5rem;
  display: flex; align-items: center; gap: .75rem;
}
.juego-fila:first-child { background: var(--tg-surface-lilac); }
.juego-fila .tg-suma {
  margin-left: auto; height: 1.875rem; padding: 0 .6875rem; border-radius: var(--tg-r-pill);
  background: var(--tg-primary); color: #fff; display: flex; align-items: center;
  font-size: 1.125rem; font-weight: var(--tg-w-medium);
}
.tg-medalla {
  width: 1.6875rem; height: 1.6875rem; border-radius: var(--tg-r-pill); border: .09375rem solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: var(--tg-w-strong);
}
.tg-medalla--1 { background: var(--tg-medal-1); }
.tg-medalla--2 { background: var(--tg-medal-2); }
.tg-medalla--3 { background: var(--tg-medal-3); }

/* ---------- Podio ------------------------------------------------------ */
.podio { display: flex; justify-content: center; align-items: flex-end; gap: .75rem; }
.podio-puesto { width: 11.25rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.podio-puesto .tg-bloque {
  width: 100%; border-radius: .875rem .875rem 0 0; box-sizing: border-box; padding-top: .75rem;
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
  font-size: 1.125rem;
}
.podio-puesto .tg-bloque b { font-size: 3rem; font-weight: var(--tg-w-strong); line-height: 1; }
.podio-1 .tg-bloque { height: 8.75rem; background: var(--tg-primary); color: #fff; }
.podio-2 .tg-bloque { height: 6.25rem; background: var(--tg-primary-soft); color: var(--tg-primary-dark); }
.podio-3 .tg-bloque { height: 4.6875rem; background: var(--tg-surface); color: var(--tg-ink-2); }
.podio-4 { display: none; } /* 4.º y siguientes: solo en el ranking */

/* ---------- Pausa ------------------------------------------------------ */
.tg-velo { position: fixed; inset: 0; background: rgba(20, 16, 36, .72); }
.tg-dialogo { background: #fff; border-radius: 1.375rem; padding: 1.75rem 2rem; text-align: center; }