/* Sala de espera de la tele mientras el móvil configura la partida. Todo cuelga de .tv-lobby (oculta por defecto): sin ella no cambia nada. */
/* ---- Sala de espera de la tele (el móvil configura). Unidad fluida --u (px) fijada por JS: u = min(ancho/96, alto/54). Sin scroll de 960x540 a 3840x2160. ---- */
.tv-lobby { z-index: 200; background: #0e0a1c; display: block; overflow: hidden; --u: 20px; font-size: calc(var(--u) * 1.5); color: #fff; }
.tv-lobby.hidden { display: none; }
.tvl-wrap { position: absolute; top: calc(var(--u) * 1.5); right: calc(var(--u) * 2.5); bottom: calc(var(--u) * 1.5); left: calc(var(--u) * 2.5); display: flex; flex-direction: column; }
.tvl-head { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 5); }
.tvl-title { display: flex; align-items: center; }
.tvl-mascot { display: block; height: calc(var(--u) * 4.6); width: auto; margin-right: calc(var(--u) * 1.2); filter: drop-shadow(0 calc(var(--u) * 0.15) calc(var(--u) * 0.3) rgba(0, 0, 0, 0.5)); }
.tvl-head h2 { margin: 0; font-size: calc(var(--u) * 3); color: #f0abfc; }
.tvl-status { font-size: calc(var(--u) * 1.7); color: #fde68a; text-align: right; }
.tvl-body { flex: 1; display: flex; min-height: 0; }
.tvl-side { width: calc(var(--u) * 28); flex: none; text-align: center; }
.tvl-side canvas { width: calc(var(--u) * 24); height: calc(var(--u) * 24); background: #fff; padding: calc(var(--u) * 0.8); border-radius: calc(var(--u) * 1); image-rendering: pixelated; box-sizing: content-box; }
.tvl-scan { font-size: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 0.6); color: #e9d5ff; }
.tvl-code { font-size: calc(var(--u) * 1.5); font-weight: 900; letter-spacing: 0.08em; margin-top: calc(var(--u) * 0.4); word-break: break-all; color: #fff; }
.tvl-pads { font-size: calc(var(--u) * 1.7); margin-top: calc(var(--u) * 0.8); color: #bbf7d0; }
.tvl-main { flex: 1; min-width: 0; padding-left: calc(var(--u) * 2); display: flex; flex-direction: column; }
.tvl-board { font-size: calc(var(--u) * 2); font-weight: 800; height: calc(var(--u) * 4); color: #e9d5ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvl-players { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: calc(var(--u) * 3.8); column-gap: calc(var(--u) * 1.5); row-gap: calc(var(--u) * 0.4); align-content: start; overflow: hidden; }
.tvl-player { display: flex; align-items: center; background: #1e1b4b; border-radius: calc(var(--u) * 0.8); padding: 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.9); min-width: 0; }
.tvl-player span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvl-player .e { margin-right: calc(var(--u) * 1); }
.tvl-player .pair { margin-left: auto; font-size: calc(var(--u) * 1.4); color: #f9a8d4; padding-left: calc(var(--u) * 0.8); }
.tvl-actions { height: calc(var(--u) * 5.5); display: flex; align-items: center; justify-content: center; }
.tvl-actions button { font-size: calc(var(--u) * 1.6); min-height: calc(var(--u) * 3.6); padding: 0 calc(var(--u) * 2); margin: 0 calc(var(--u) * 1); }
html.lobby-open, html.lobby-open body { overflow: hidden; }

/* ---- Fase 18, D5: sala de espera de la tele sobre el fondo hero-sala-espera-2 con el QR real dentro de su recuadro blanco ----
 * El escenario es 16:9 (96u × 54u, como el resto de la sala): el recuadro blanco del fondo está en x 56 %, y 25,78 %, 26,09 % × 48,5 % (img/hero-sala-espera-qr.json, js/hero-qr.js).
 * Los contenedores internos no llevan caja propia: todo se coloca en absoluto sobre el escenario (sin display: contents, que Chromium 60 no tiene). */
.tv-lobby { background: #0e0a1c; }
.tv-lobby .tvl-wrap { top: 50%; left: 50%; right: auto; bottom: auto; width: calc(var(--u) * 96); height: calc(var(--u) * 54); margin-left: calc(var(--u) * -48); margin-top: calc(var(--u) * -27); display: block; background: #1a1030 url(../img/hero-sala-espera-1280.jpg) center / 100% 100% no-repeat; background-image: url(../img/hero-sala-espera-1920.webp); }
.tv-lobby .tvl-wrap:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(14, 10, 28, 0.78) 0%, rgba(14, 10, 28, 0.4) 24%, rgba(14, 10, 28, 0) 34%); }
.tv-lobby .tvl-head { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 1.6); width: calc(var(--u) * 22); height: auto; display: block; }
.tv-lobby .tvl-title { display: block; }
.tv-lobby .tvl-mascot { display: none; }
.tv-lobby .tvl-head h2 { font-size: calc(var(--u) * 2.4); line-height: 1.1; color: #fff; text-shadow: 0 0 calc(var(--u) * 0.4) #ff3d8b; }
.tv-lobby .tvl-status { margin-top: calc(var(--u) * 0.5); font-size: calc(var(--u) * 1.5); text-align: left; color: #ffe9a8; }
.tv-lobby .tvl-body, .tv-lobby .tvl-side, .tv-lobby .tvl-main { position: static; display: block; width: auto; height: 0; padding: 0; margin: 0; }
.tv-lobby .tvl-side canvas { position: absolute; left: calc(var(--u) * 53.95); top: calc(var(--u) * 14.5); width: calc(var(--u) * 24.8); height: calc(var(--u) * 24.8); padding: calc(var(--u) * 0.3); border-radius: calc(var(--u) * 0.6); background: #fff; }
.tv-lobby .tvl-scan { position: absolute; left: calc(var(--u) * 55.5); top: calc(var(--u) * 10.4); width: calc(var(--u) * 22); margin: 0; font-size: calc(var(--u) * 1.4); font-weight: 800; text-align: center; color: #fff; text-shadow: 0 0 calc(var(--u) * 0.3) #000; }
.tv-lobby .tvl-code { position: absolute; left: calc(var(--u) * 56.4); top: calc(var(--u) * 41); width: calc(var(--u) * 20); margin: 0; font-size: calc(var(--u) * 2.1); line-height: 1.25; letter-spacing: 0.12em; text-align: center; word-break: normal; color: #fff; text-shadow: 0 0 calc(var(--u) * 0.4) #ff3d8b, 0 calc(var(--u) * 0.1) calc(var(--u) * 0.3) #000; }
.tv-lobby .tvl-pads { position: absolute; left: calc(var(--u) * 52.4); top: calc(var(--u) * 46.4); width: calc(var(--u) * 27.6); margin: 0; font-size: calc(var(--u) * 1.5); text-align: center; color: #bbf7d0; text-shadow: 0 0 calc(var(--u) * 0.3) #000; }
.tv-lobby .tvl-board { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 9); width: calc(var(--u) * 21); height: auto; font-size: calc(var(--u) * 1.6); font-weight: 800; color: #ffe9a8; white-space: normal; text-shadow: 0 0 calc(var(--u) * 0.3) #000; }
.tv-lobby .tvl-players { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 12); width: calc(var(--u) * 21); height: calc(var(--u) * 30); display: block; overflow: hidden; }
.tv-lobby .tvl-player { height: calc(var(--u) * 2.5); margin-bottom: calc(var(--u) * 0.35); background: rgba(30, 27, 75, 0.85); font-size: calc(var(--u) * 1.5); }
.tv-lobby .tvl-actions { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 43.5); width: calc(var(--u) * 21); height: auto; display: block; }
.tv-lobby .tvl-actions button { display: block; width: 100%; margin: 0 0 calc(var(--u) * 0.5); min-height: calc(var(--u) * 3.3); padding: 0 calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.3); }

/* ---- Fase 18, D5: espera online con el fondo hero-sala-espera-2 y el QR de la invitación dentro de su recuadro (todo en %, escala con la imagen) ---- */
.lobby-hero { position: relative; width: 100%; padding-top: 55.8%; margin: 6px 0 4px; border: 2px solid rgba(139, 92, 255, 0.45); border-radius: 18px; overflow: hidden; background: #1a1030 url(../img/hero-sala-espera-1280.jpg) center / 100% 100% no-repeat; background-image: url(../img/hero-sala-espera-1280.webp); box-sizing: content-box; }
.lobby-hero canvas { position: absolute; left: 56.8%; top: 28.3%; width: 24.5%; height: auto; background: #fff; image-rendering: pixelated; }
.lobby #lobbyCode, .lobby .room-code { display: inline-block; margin-left: 6px; padding: 2px 14px; border-radius: 12px; background: rgba(139, 92, 255, 0.16); border: 2px solid #8b5cff; color: #f6f1fa; font: 800 1.9rem/1.2 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: 0.3em; }
.lobby .mascot-wrap { display: none; }