/* Swinger Party — modo tele. TODAS las reglas cuelgan de .tv-mode / .tv-in-game / .tv-remote: sin esas clases (móvil y ordenador) esta hoja no cambia nada.
 * Unidad: 1rem = «u». js/tv.js fija el tamaño de html para que 1u = min(ancho/96, alto/54): en 1920x1080 vale 20 px y todo escala igual en 960x540 o 3840x2160.
 * Mínimos a 1080p: texto de casillas 20 px (1u), registro y botones secundarios 24 px (1.2u), botones 56 px (≥2.8u), contraste ≥ 4,5:1 (dado y botones ≥ 7:1).
 * Compatibilidad con Chromium ~60: sin min()/max()/clamp(), sin gap en flexbox (rejilla o márgenes) y sin aspect-ratio (el tablero se dimensiona con --tv-board). */

html.tv-mode { font-size: 20px; }
.tv-mode body { font-size: 1rem; padding: 0.8rem 1rem; }
.tv-mode h1 { font-size: 2.2rem; }
.tv-mode h2 { font-size: 1.6rem; }
.tv-mode label, .tv-mode .hint, .tv-mode .check { font-size: 1.1rem; opacity: 1; }
.tv-mode .hint { color: #e5e7eb; }

/* Botones: sólidos, texto blanco y grueso, ≥ 56 px de alto, contraste alto */
.tv-mode button, .tv-mode select, .tv-mode input[type="text"], .tv-mode input:not([type]) { font-size: 1.2rem; min-height: 2.9rem; }
.tv-mode button {
  background: #3b1a7a; background-image: none; color: #fff; -webkit-text-fill-color: #fff; text-shadow: none; font-weight: 800;
  border: 0.15rem solid #ddd6fe; border-radius: 0.8rem; padding: 0.4rem 1.2rem; margin: 0.35rem; box-shadow: none; filter: none; transform: none;
  white-space: normal; line-height: 1.15;
}
.tv-mode button.secondary { background: #312e81; background-image: none; }
.tv-mode button:hover { filter: none; transform: none; box-shadow: none; }
.tv-mode button:disabled { opacity: 0.6; }
.tv-mode select, .tv-mode input { background: #fff; color: #111; border: 0.15rem solid #7c3aed; padding: 0.3rem 0.6rem; }
.tv-mode .emoji-picker span { font-size: 2rem; min-width: 3rem; min-height: 3rem; display: inline-block; text-align: center; line-height: 3rem; }
.tv-mode .board-card { font-size: 1.15rem; padding: 0.7rem 0.9rem; width: 12rem; }

/* Foco del mando: grueso, amarillo, siempre visible */
.tv-mode :focus { outline: 0.3rem solid #facc15 !important; outline-offset: 0.2rem; box-shadow: 0 0 0 0.5rem rgba(250,204,21,0.3); position: relative; z-index: 10; }
.tv-mode .cell:focus { z-index: 20; }

/* Inicio: botones principales grandes, arriba */
.tv-mode .start-actions { gap: 0; }
.tv-mode .start-actions button { min-height: 3.4rem; font-size: 1.4rem; }
.tv-mode .start-actions #btnChooseGame { font-size: 1.6rem; padding: 0.5rem 2rem; background: #5b21b6; }
.tv-mode .advanced > summary { font-size: 1.3rem; padding: 0.8rem 0.4rem; }
.tv-mode .modal { max-width: 55rem; width: 90%; }
.tv-mode .modal h3 { font-size: 1.9rem; }
.tv-mode .modal p, .tv-mode .modal .modal-text { font-size: 1.5rem; color: #fff; }
.tv-mode .modal button { font-size: 1.4rem; min-height: 3.2rem; }
.tv-mode .speech-caption { font-size: 2.2rem; bottom: 2rem; }
.tv-mode .creator-mark { font-size: 0.9rem; }

/* ===== Partida: cabe en 100vw x 100vh sin scroll ===== */
.tv-in-game h1 { display: none; }
.tv-in-game, .tv-in-game body { height: 100%; overflow: hidden; }
.tv-in-game body { padding: 0; min-height: 0; }
.tv-in-game #game { position: fixed; top: 0; right: 0; bottom: 0; left: 0; max-width: none; width: auto; padding: 0; }
.tv-in-game .board-wrapper {
  position: absolute; top: 0.9rem; right: 1rem; bottom: 0.9rem; left: 1rem; display: grid; align-items: stretch;
  grid-template-columns: var(--tv-board, 50rem) 1fr 19rem; grid-template-rows: 100%; grid-column-gap: 1rem; min-height: 0;
}
.tv-in-game .board { grid-column: 1; grid-row: 1; width: var(--tv-board, 50rem); height: var(--tv-board, 50rem); align-self: center; padding: 0.3rem; grid-gap: 0.25rem; border-radius: 0.6rem; }
.tv-in-game .log-panel { grid-column: 2; grid-row: 1; min-width: 0; max-width: none; width: auto; height: 100%; padding: 0.7rem; min-height: 0; }
.tv-in-game .sidebar { grid-column: 3; grid-row: 1; min-width: 0; max-width: none; width: auto; height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* Registro: ≥ 24 px, contraste alto, lo más nuevo ABAJO y el scroll interno anclado abajo */
.tv-in-game .log-panel .log, .tv-in-game .log {
  flex: 1; min-height: 0; max-height: none; height: 100%; overflow-y: auto; display: flex; flex-direction: column-reverse; justify-content: flex-start;
  font-size: 1.2rem; line-height: 1.3; color: #fff; background: #0b0816; padding: 0.5rem 0.6rem;
}
.tv-in-game .log > div { padding: 0.25rem 0; border-top: 1px solid #4c1d95; }
.tv-in-game .log .log-latest { background: #4c1d95; color: #fff; font-weight: 700; border-radius: 0.4rem; padding: 0.3rem 0.4rem; }
.tv-in-game .panel-title { font-size: 1rem; color: #f5f3ff; }

/* Casillas legibles a 3 metros: ≥ 20 px, fondos sólidos con contraste ≥ 4,5:1 y nada tenue */
.tv-mode .cell { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; padding: 0.1rem 0.1rem 1.15rem 0.1rem; color: #fff; background: #374151; background-image: none; text-shadow: none; border: 0.1rem solid #e5e7eb; box-shadow: none; }
.tv-mode .cell.cell-long { padding-bottom: 0.1rem; }
.tv-mode .cell.black { background: #1f2937; background-image: none; color: #fff; }
.tv-mode .cell.blue { background: #38bdf8; background-image: none; color: #04111a; text-shadow: none; }
.tv-mode .cell.salida, .tv-mode .cell.ganador { background: #7e22ce; background-image: none; color: #fff; font-size: 1rem; font-weight: 900; overflow: visible; }
.tv-mode .cell-full { display: inline !important; }
.tv-mode .cell-compact { display: none !important; }
.tv-mode .cell .path-arrow { opacity: 1; font-size: 1rem; }
.tv-mode .token { font-size: 1.15rem; }
.tv-mode .tokens { max-width: 85%; }
/* Casilla del jugador con el turno y casillas con fichas, resaltadas */
.tv-mode .cell.cell-turn { outline: 0.3rem solid #facc15; outline-offset: -0.3rem; z-index: 6; }
.tv-mode .cell.cell-occ { box-shadow: inset 0 0 0 0.25rem #f5d0fe; }

/* Columna de controles (sin mando en el móvil) */
.tv-in-game .turn-badge { padding: 0.5rem 0.7rem; background: #2e1065; border: 0.12rem solid #c4b5fd; }
.tv-in-game .turn-badge strong { font-size: 1rem; opacity: 1; color: #f5f3ff; }
.tv-in-game #currentPlayerName { font-size: 2rem; color: #fff; }
.tv-in-game .players-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0.3rem 0; }
.tv-in-game .player-row { padding: 0.35rem 0.5rem; margin-bottom: 0.25rem; font-size: 1.1rem; color: #fff; background: #1e1b4b; }
.tv-in-game .player-row.active { background: #5b21b6; border-color: #facc15; }
.tv-in-game .player-row span[style] { opacity: 1 !important; font-size: 1rem !important; }
.tv-in-game .player-emoji { font-size: 1.6rem; }
.tv-in-game .dice-area { padding: 0.4rem; background: #0b0816; border: 0.12rem solid #c4b5fd; }
.tv-in-game .dice { width: 4.2rem; height: 4.2rem; font-size: 2.8rem; margin: 0.2rem auto; background: #fff; color: #000; border-radius: 0.8rem; }
.tv-in-game #btnRoll { display: block; width: 100%; min-height: 4.5rem; font-size: 1.9rem; background: #5b21b6; color: #fff; -webkit-text-fill-color: #fff; margin: 0.3rem 0; }
.tv-in-game .ctrl-row { display: block; }
.tv-in-game .ctrl-row button { display: block; width: 100%; min-height: 2.8rem; font-size: 1.2rem !important; margin: 0.25rem 0 !important; padding: 0.3rem 0.5rem !important; }

/* ===== Mando en el móvil activo: la tele es solo tablero + registro + estado ===== */
.tv-remote.tv-in-game .board-wrapper { grid-template-columns: var(--tv-board, 50rem) 1fr; grid-template-rows: auto 100%; grid-template-rows: auto minmax(0, 1fr); }
.tv-remote.tv-in-game .board { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.tv-remote.tv-in-game .sidebar { grid-column: 2; grid-row: 1; height: auto; max-height: 40vh; }
.tv-remote.tv-in-game .log-panel { grid-column: 2; grid-row: 2; }
.tv-remote.tv-in-game .sidebar .ctrl-row, .tv-remote.tv-in-game .sidebar #btnRoll, .tv-remote.tv-in-game .sidebar #btnEndTurn { display: none; }
.tv-remote.tv-in-game .sidebar .players-list { flex: none; max-height: none; overflow: visible; display: block; }
.tv-remote.tv-in-game .sidebar .players-list .player-row { display: inline-block; margin: 0.15rem 0.3rem 0.15rem 0; padding: 0.25rem 0.5rem; white-space: nowrap; font-size: 1.05rem; }
.tv-remote.tv-in-game .sidebar .players-list .player-row > * { display: inline-block; vertical-align: middle; margin-left: 0.3rem; }
.tv-remote.tv-in-game .sidebar .panel-title { display: none; }
.tv-remote.tv-in-game .sidebar .dice-area { padding: 0.2rem 0.6rem; text-align: left; display: block; }
.tv-remote.tv-in-game .sidebar .dice-area .panel-title { display: none; }
.tv-remote.tv-in-game .sidebar .dice { display: inline-block; vertical-align: middle; margin: 0 0.6rem 0 0; line-height: 4.2rem; text-align: center; }
.tv-remote.tv-in-game .tv-status { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; padding: 0.4rem 0.2rem; }
/* Ventanas de decisión: con móvil conectado son solo lectura (se responde en el móvil) */
.tv-remote.pad-on #modal:not([data-kind="local"]) .modal button { display: none !important; }
.tv-remote.pad-on #modal:not([data-kind="local"]) .modal .modal-wait { display: block; font-size: 1.6rem; font-weight: 800; color: #facc15; margin-top: 0.8rem; }
.modal-wait { display: none; }

/* Estado «Esperando a X…» (solo con mando activo en la tele) */
.tv-status { display: none; }

/* QR pequeño en una esquina */
.tv-qr { position: fixed; right: 0.8rem; bottom: 0.8rem; z-index: 300; background: #fff; color: #000; padding: 0.4rem; border-radius: 0.5rem; text-align: center; font-size: 0.8rem; line-height: 1.15; max-width: 9.5rem; }
.tv-qr canvas, .tv-qr img { display: block; width: 8.5rem; height: 8.5rem; margin: 0 auto 0.2rem; image-rendering: pixelated; }
.tv-qr b { font-size: 0.85rem; word-break: break-all; }