:root {
  --fondo: #0b0e14;
  --panel: #16223a;
  --texto: #f4f6f8;
  --suave: #9aa7b8;
  --foco: #f5b942;
  --acento: #22e6ab;
  --peligro: #e63946;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--fondo); color: var(--texto); font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
button { font: inherit; color: inherit; }

/* ---------- TV ---------- */
body.tv { overflow: hidden; width: 100vw; height: 100vh; }
#lienzo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; font-size: 36px; }
.seguro { position: absolute; left: 96px; top: 54px; right: 96px; bottom: 54px; }
.tv h1 { font-size: 72px; margin: 0 0 32px 0; }
.tv h2 { font-size: 48px; margin: 0 0 24px 0; }
.tv p { margin: 0 0 16px 0; }
.suave { color: var(--suave); }
.aviso { color: var(--foco); }
[data-foco] { -webkit-transition: -webkit-transform 120ms; transition: transform 120ms; outline: none; }
.enfocado { box-shadow: 0 0 0 8px var(--foco); -webkit-transform: scale(1.08); transform: scale(1.08); }
.boton { display: inline-block; background: var(--panel); border: 0; border-radius: 16px; padding: 20px 40px; margin: 0 32px 0 0; font-size: 40px; cursor: pointer; text-decoration: none; }
.boton.primario { background: var(--acento); color: var(--fondo); }
.tarjeta { display: inline-block; vertical-align: top; width: 400px; height: 440px; margin: 0 48px 48px 0; padding: 24px; background: var(--panel); border: 0; border-radius: 24px; text-align: center; cursor: pointer; }
.tarjeta img { display: block; margin: 0 auto 16px auto; }
.tarjeta-nombre { display: block; font-size: 40px; font-weight: 700; }
.etiqueta { display: inline-block; margin: 8px 0; padding: 2px 14px; border-radius: 999px; background: var(--fondo); color: var(--acento); font-size: 32px; }
.tarjeta-record { display: block; color: var(--suave); font-size: 32px; }
.vinculacion .qr { position: absolute; right: 0; top: 160px; }
.codigo-vinculacion { font-size: 140px; letter-spacing: 12px; font-weight: 800; margin: 24px 0; }
.qr { display: block; background: #fff; padding: 16px; border-radius: 16px; image-rendering: pixelated; }
.columna-qr { position: absolute; left: 0; top: 0; width: 560px; }
.columna-jugadores { position: absolute; left: 680px; top: 0; right: 0; }
.codigo-sala { font-size: 96px; font-weight: 800; letter-spacing: 10px; margin: 8px 0; }
.lista-jugadores { list-style: none; padding: 0; margin: 0 0 32px 0; }
.lista-jugadores li { display: inline-block; vertical-align: top; width: 260px; margin: 0 24px 24px 0; text-align: center; }
.lista-jugadores li.desconectado { opacity: 0.4; }
.lista-jugadores .avatar { display: block; margin: 0 auto 8px auto; }
.banda-reconexion { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; background: var(--peligro); text-align: center; }
.fin { text-align: center; padding-top: 240px; }
.fin h1 { font-size: 110px; margin-bottom: 64px; }
.cargando { min-height: 100px; }

/* ---------- pulsa-tu-boton ---------- */
.pulsa-carriles { list-style: none; padding: 0; margin: 0; }
.pulsa-carril { position: relative; height: 96px; margin: 0 0 20px 0; }
.pulsa-avatar { position: absolute; left: 0; top: 0; }
.pulsa-barra { position: absolute; left: 120px; right: 140px; top: 28px; height: 40px; background: var(--panel); border-radius: 20px; overflow: hidden; }
.pulsa-relleno { height: 100%; -webkit-transition: width 120ms; transition: width 120ms; }
.pulsa-numero { position: absolute; right: 0; top: 16px; font-size: 56px; font-weight: 800; }
.salta-0 { -webkit-animation: salto0 200ms; animation: salto0 200ms; }
.salta-1 { -webkit-animation: salto1 200ms; animation: salto1 200ms; }
@-webkit-keyframes salto0 { 50% { -webkit-transform: translateY(-20px); } }
@keyframes salto0 { 50% { transform: translateY(-20px); } }
@-webkit-keyframes salto1 { 50% { -webkit-transform: translateY(-20px); } }
@keyframes salto1 { 50% { transform: translateY(-20px); } }
.pulsa-movil { text-align: center; }
.pulsa-contador { font-size: 40px; font-weight: 800; margin: 16px 0; }
.pulsa-boton { width: 80vw; height: 80vw; max-width: 420px; max-height: 420px; border-radius: 50%; border: 0; font-size: 44px; font-weight: 800; color: #fff; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.pulsa-boton:active { -webkit-transform: scale(0.95); transform: scale(0.95); }

/* ---------- móvil ---------- */
body.movil { font-size: 18px; }
.movil-contenido { padding: 16px; max-width: 560px; margin: 0 auto; }
.movil-contenido h1 { font-size: 26px; margin: 8px 0 16px 0; }
.movil-contenido h2 { font-size: 22px; margin: 24px 0 12px 0; }
.movil-contenido .boton { font-size: 20px; padding: 12px 20px; margin: 0 8px 8px 0; }
.lista-perfiles button { display: block; width: 100%; margin: 0 0 12px 0; padding: 12px; background: var(--panel); border: 0; border-radius: 14px; font-size: 22px; text-align: left; cursor: pointer; }
.lista-perfiles .avatar { vertical-align: middle; margin: 0 12px 0 0; }
.espera { text-align: center; padding-top: 32px; }
.espera .avatar { display: block; margin: 0 auto 12px auto; }
.campo { display: block; margin: 0 0 12px 0; }
.campo input, .campo select { display: block; width: 100%; margin: 4px 0 0 0; padding: 10px; font-size: 18px; border-radius: 10px; border: 1px solid var(--suave); background: var(--fondo); color: var(--texto); }
.fila-admin { padding: 12px 0; border-bottom: 1px solid var(--panel); }
.fila-admin .avatar { vertical-align: middle; margin: 0 8px 0 0; }