/* Swinger Party — pantalla de la partida con la identidad del nivel (Fase 18, D3). Reproduce design/referencia-tablero (1440×900) y la adapta a móvil y tele.
 * Casillas por categoría (Beso #FF3D8B, Bebida #FFC94D, Pregunta #3DE0C8, Prenda #FF8A3D, Baile #8B5CFF, Libre #6F6788, META dorado→magenta),
 * marco y etiqueta con el color del tablero (variables --bc / --bc-rgb que pone js/game-view.js), casilla actual con borde blanco,
 * panel lateral: turno + dado, tarjeta de la casilla, Piñita (solo la cara) con su bocadillo, botones y registro.
 * Tres composiciones: MÓVIL (base, una columna) · PC (html.home-wide: dos columnas en la unidad --sp-u de home.js, maqueta 1440×900) · TELE (html.tv-in-game, rem fluido).
 * Compatibilidad con Chromium ~60: sin gap en flexbox, sin inset, aspect-ratio ni min()/max()/clamp(); grid con grid-gap; var() siempre con reserva.
 * (Escrito con la notación U(--variable, valor) y expandido a calc(); se edita a mano.) */

html.game-on .brand-bar { display: none; }
html.game-on.home-wide body { padding: 0; min-height: 0; }
.game { text-align: left; }
.board-wrapper { align-items: flex-start; }
.game-main { display: flex; flex-direction: column; align-items: center; }

/* ---------- cabecera del juego ---------- */
.game-head { display: flex; align-items: center; justify-content: center; margin: 2px 0 10px; }
.gh-face { display: block; height: 48px; width: auto; margin-right: 10px; }
.gh-logo { color: #fff; font: 400 28px/1.2 'Pacifico', 'Brush Script MT', cursive; text-shadow: 0 0 6px #ff3d8b, 0 0 18px #ff3d8b; }
.gh-level { margin-left: 12px; padding: 2px 12px; border: 2px solid #f6f1fa; border: 2px solid var(--bc, #f6f1fa); border-radius: 16px; color: #f6f1fa; color: var(--bc, #f6f1fa); font: 800 13px/1.3 'DM Sans', system-ui, sans-serif; letter-spacing: 1px; box-shadow: 0 0 12px rgba(246, 241, 250, 0.5); box-shadow: 0 0 12px rgba(var(--bc-rgb, 246, 241, 250), 0.5); }

/* ---------- tablero: marco con el color del nivel ---------- */
.game .board {
  padding: 8px; grid-gap: 5px; border-radius: 22px; border: 3px solid #f6f1fa; border: 3px solid var(--bc, #f6f1fa);
  background: rgba(15, 10, 28, 0.7);
  box-shadow: 0 0 22px rgba(246, 241, 250, 0.7), inset 0 0 18px rgba(246, 241, 250, 0.25); box-shadow: 0 0 22px rgba(var(--bc-rgb, 246, 241, 250), 0.7), inset 0 0 18px rgba(var(--bc-rgb, 246, 241, 250), 0.25);
}

/* ---------- casillas ---------- */
.game .board .cell {
  --cc: #6f6788; --cc-rgb: 111, 103, 136;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; overflow: hidden;
  border: 2px solid #6f6788; border: 2px solid var(--cc, #6f6788); border-radius: 10px;
  background: rgba(111, 103, 136, 0.22); background: rgba(var(--cc-rgb, 111, 103, 136), 0.22);
  box-shadow: 0 0 6px rgba(111, 103, 136, 0.35); box-shadow: 0 0 6px rgba(var(--cc-rgb, 111, 103, 136), 0.35);
  color: #fff; text-shadow: none; font-weight: 700; cursor: pointer;
}
.game .board .cell[data-cat="vacia"] { background: none; border-color: transparent; box-shadow: none; cursor: default; }
.game .board .cell[data-cat="meta"] { background: #ffc94d; background-image: linear-gradient(135deg, #ffc94d, #ff3d8b); border-color: #ff3d8b; }
.game .board .cell[data-cat="salida"] { background: rgba(139, 92, 255, 0.3); }
.game .board .cell .cell-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; }
.game .board .cell .cell-full { display: none !important; }
.game .board .cell .cell-compact { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0; }
.game .board .cell .cell-icon { font-size: 22px; line-height: 1.05; }
.game .board .cell .cell-short { margin-top: 1px; color: #fff; font: 700 10px/1.1 'DM Sans', system-ui, sans-serif; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.game .board .cell .cell-special { display: flex; flex-direction: column; align-items: center; }
.game .board .cell .cell-num { position: absolute; left: 4px; top: 2px; z-index: 2; color: rgba(255, 255, 255, 0.65); font: 700 9px/1 'DM Sans', system-ui, sans-serif; }
.game .board .cell .path-arrow { display: none; }
.game .board .cell .tokens { right: 2px; bottom: 2px; max-width: 80%; }
.game .board .cell .token { font-size: 11px; }
.game .board .cell:focus { outline: 3px solid #fff; outline-offset: 1px; z-index: 9; }
.game .board .cell:focus:not(:focus-visible) { outline: 0; }
.game .board .cell:focus-visible { outline: 3px solid #fff; outline-offset: 1px; z-index: 9; }
/* casilla actual: borde blanco */
.game .board .cell.cell-turn { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, 0.7); outline: 0; z-index: 6; }
.game .board .cell.cell-occ { box-shadow: 0 0 6px rgba(111, 103, 136, 0.35); box-shadow: 0 0 6px rgba(var(--cc-rgb, 111, 103, 136), 0.35); }

/* ---------- panel lateral ---------- */
.game .sidebar { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; min-width: 0; width: 100%; margin-top: 14px; gap: 0; }
.game .sidebar > * { margin-top: 12px; }
.game .sidebar > :first-child, .game .sidebar > #tvStatus + .turn-badge { margin-top: 0; }
.game .turn-badge { display: flex; align-items: center; padding: 10px 14px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.turn-emoji { font-size: 30px; line-height: 1; margin-right: 12px; }
.turn-who { flex: 1; min-width: 0; }
.game .turn-badge strong { display: block; color: #cdbfe6; font: 400 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1px; opacity: 1; text-transform: uppercase; }
.game #currentPlayerName { display: block; color: #f6f1fa !important; font: 800 24px/1.15 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game .turn-badge .dice { flex: none; width: 60px; height: 60px; margin: 0 0 0 10px; border: 0; border-radius: 14px; background: #f6f1fa; color: #15101f; font: 800 34px 'Bricolage Grotesque', system-ui, sans-serif; box-shadow: 0 0 18px rgba(246, 241, 250, 0.6); }

.cell-card {
  --cc: #6f6788; --cc-rgb: 111, 103, 136;
  display: flex; flex-direction: column; padding: 16px; border-radius: 20px; border: 2px solid #6f6788; border: 2px solid var(--cc, #6f6788);
  background: rgba(111, 103, 136, 0.25); background: linear-gradient(160deg, rgba(111, 103, 136, 0.25), rgba(139, 92, 255, 0.18)); background: linear-gradient(160deg, rgba(var(--cc-rgb, 111, 103, 136), 0.25), rgba(139, 92, 255, 0.18));
  box-shadow: 0 0 18px rgba(111, 103, 136, 0.5); box-shadow: 0 0 18px rgba(var(--cc-rgb, 111, 103, 136), 0.5);
}
.cc-kicker { color: #f6f1fa; color: var(--cc, #f6f1fa); font: 700 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1px; }
.cc-text { margin-top: 6px; color: #f6f1fa; font: 800 24px/1.18 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; overflow-wrap: break-word; word-wrap: break-word; }

.pinita-say { display: flex; align-items: flex-end; }
.ps-stage { flex: none; display: flex; align-items: flex-end; height: 104px; min-width: 62px; margin-right: 12px; }
.ps-face { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 0 10px rgba(255, 61, 139, 0.5)); }
.ps-stage.is-anim .ps-face { display: none; }
.ps-stage .pa { filter: drop-shadow(0 0 10px rgba(255, 61, 139, 0.45)); }
.ps-stage.is-bob .ps-face { -webkit-animation: ps-bob 0.9s ease-in-out 2; animation: ps-bob 0.9s ease-in-out 2; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
@-webkit-keyframes ps-bob { 0%, 100% { -webkit-transform: rotate(-2deg); } 50% { -webkit-transform: rotate(2deg) translateY(-4px); } }
@keyframes ps-bob { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ps-stage.is-bob .ps-face { animation: none; -webkit-animation: none; } }
.ps-bubble { position: relative; flex: 1; min-width: 0; margin: 0 0 18px; padding: 10px 14px; border-radius: 16px; background: #f6f1fa; color: #1b1527; font: 700 16px/1.3 'DM Sans', system-ui, sans-serif; }
.ps-bubble:before { content: ''; position: absolute; left: -12px; bottom: 16px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 14px solid #f6f1fa; }

.game .dice-area { display: flex; align-items: center; padding: 0; border: 0; background: none; text-align: left; }
.game .dice-area button { flex: 1; height: 54px; min-height: 54px; margin: 0 8px 0 0; padding: 0 20px; border: 0; border-radius: 27px; background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); color: #fff; font: 800 18px 'DM Sans', system-ui, sans-serif; box-shadow: 0 0 20px rgba(255, 61, 139, 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.game .dice-area button:last-child { margin-right: 0; }
.game .dice-area button:disabled { opacity: 0.5; box-shadow: none; }
.game .dice-area #btnPasoBar { flex: none; padding: 0 26px; border: 2px solid #3de0c8; background: rgba(61, 224, 200, 0.1); color: #bff5ec; box-shadow: none; text-shadow: none; }
.game .dice-area #btnEndTurn { background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); border: 0; }

.game .players-title { margin: 2px 0 -4px; color: #cdbfe6; font: 400 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.game .players-list { display: flex; flex-wrap: wrap; max-height: none; overflow: visible; padding: 0; }
.game .player-row { display: inline-flex; align-items: center; margin: 0 6px 6px 0; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.05); font: 400 13px/1.2 'DM Sans', system-ui, sans-serif; color: #f6f1fa; }
.game .player-row.active { background: rgba(255, 61, 139, 0.2); border-color: #ff3d8b; box-shadow: none; }
.game .player-row .player-emoji { font-size: 16px; margin-right: 6px; }
.game .player-row span[style] { margin-left: 8px !important; font-size: 11px !important; opacity: 0.8; }

.game .ctrl-row { margin: 0; }
.game .ctrl-row button { font: 700 12px 'DM Sans', system-ui, sans-serif !important; min-height: 36px; padding: 6px 12px !important; border: 2px solid #8b5cff; background: rgba(139, 92, 255, 0.12); box-shadow: none; color: #e3d9ff; }

.game .log-panel { order: 0; flex: 1 1 auto; min-width: 0; max-width: none; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.game .log-panel .panel-title { color: #cdbfe6; font: 400 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1px; }
.game .log { min-height: 110px; max-height: 220px; background: none; padding: 0; color: #cdbfe6; font: 400 14px/1.35 'DM Sans', system-ui, sans-serif; }
.game .log div { margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: #cdbfe6; }
.game .log div.log-latest { color: #ffe9a8; font-weight: 700; text-decoration: none; background: none; }

/* SALIDA y META: solo icono y rótulo (el texto original de esas casillas no se pinta en la vista compacta) */
.game .board .cell[data-cat="salida"] .cell-text, .game .board .cell[data-cat="meta"] .cell-text { align-items: flex-start; padding-top: 4px; font-size: 0; }
.game .board .cell[data-cat="meta"] .ganador-text { display: none; }
.game .board .cell[data-cat="salida"] .cell-special .cell-short, .game .board .cell[data-cat="meta"] .cell-special .cell-short { font-size: 10px; }
.game .board .cell[data-cat="salida"] .tokens { left: 2px; right: 2px; bottom: 2px; max-width: none; justify-content: center; }
.game .board .cell[data-cat="salida"] .token { font-size: 9px; }
@media (max-width: 599px) { .game .board .cell .cell-num { display: none; } .game .board .cell .cell-short { font-size: 9px; } }
@media (max-width: 380px) { .gh-logo { font-size: 24px; } .game .board .cell .cell-icon { font-size: 18px; } .game .board .cell .cell-short { font-size: 9px; } .cc-text { font-size: 21px; } }
@media (min-width: 600px) { .game .board .cell .cell-num { font-size: 11px; left: 6px; top: 3px; } .game .board .cell .cell-icon { font-size: 26px; } .game .board .cell .cell-short { font-size: 11px; } }

/* ============================== PC (composición ancha) ============================== */
html.home-wide:not(.tv-mode) .game { width: calc(1440 * var(--sp-u, 1px)); max-width: none; min-height: calc(900 * var(--sp-u, 1px)); margin: 0 auto; padding: calc(36 * var(--sp-u, 1px)) calc(48 * var(--sp-u, 1px)); box-sizing: border-box; }
html.home-wide:not(.tv-mode) .board-wrapper { gap: 0; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; }
html.home-wide:not(.tv-mode) .game-main { flex: none; align-items: flex-start; }
html.home-wide:not(.tv-mode) .game-head { margin: 0 0 calc(14 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .gh-face { height: calc(60 * var(--sp-u, 1px)); margin-right: calc(14 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .gh-logo { font-size: calc(36 * var(--sp-u, 1px)); text-shadow: 0 0 calc(8 * var(--sp-u, 1px)) #ff3d8b, 0 0 calc(24 * var(--sp-u, 1px)) #ff3d8b; }
html.home-wide:not(.tv-mode) .gh-level { margin-left: calc(10 * var(--sp-u, 1px)); padding: calc(2 * var(--sp-u, 1px)) calc(12 * var(--sp-u, 1px)); border-width: calc(2 * var(--sp-u, 1px)); border-radius: calc(16 * var(--sp-u, 1px)); font-size: calc(14 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board { width: calc(726 * var(--sp-u, 1px)); height: calc(706 * var(--sp-u, 1px)); max-width: none; padding: calc(10 * var(--sp-u, 1px)); grid-gap: calc(6 * var(--sp-u, 1px)); grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, calc(92 * var(--sp-u, 1px))); border-width: calc(3 * var(--sp-u, 1px)); border-radius: calc(22 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell { border-radius: calc(12 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell .cell-icon { font-size: calc(26 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell .cell-short { font-size: calc(11 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell .cell-num { left: calc(6 * var(--sp-u, 1px)); top: calc(3 * var(--sp-u, 1px)); font-size: calc(11 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell .tokens { right: calc(4 * var(--sp-u, 1px)); bottom: calc(3 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell .token { font-size: calc(13 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell[data-cat="salida"] .token { font-size: calc(10 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .board .cell[data-cat="salida"] .cell-text, html.home-wide:not(.tv-mode) .game .board .cell[data-cat="meta"] .cell-text { padding-top: calc(8 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .sidebar { flex: 1; width: auto; margin: 0 0 0 calc(40 * var(--sp-u, 1px)); padding-top: calc(6 * var(--sp-u, 1px)); height: calc(828 * var(--sp-u, 1px)); box-sizing: border-box; }
html.home-wide:not(.tv-mode) .game .sidebar > * { margin-top: calc(14 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .sidebar > #tvStatus + .turn-badge { margin-top: 0; }
html.home-wide:not(.tv-mode) .game .turn-badge { padding: calc(12 * var(--sp-u, 1px)) calc(18 * var(--sp-u, 1px)); border-radius: calc(18 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .turn-emoji { font-size: calc(34 * var(--sp-u, 1px)); margin-right: calc(14 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .turn-badge strong { font-size: calc(13 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game #currentPlayerName { font-size: calc(28 * var(--sp-u, 1px)) !important; }
html.home-wide:not(.tv-mode) .game .turn-badge .dice { width: calc(70 * var(--sp-u, 1px)); height: calc(70 * var(--sp-u, 1px)); border-radius: calc(16 * var(--sp-u, 1px)); font-size: calc(40 * var(--sp-u, 1px)); margin-left: calc(14 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .cell-card { padding: calc(20 * var(--sp-u, 1px)); border-radius: calc(20 * var(--sp-u, 1px)); border-width: calc(2 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .cc-kicker { font-size: calc(13 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .cc-text { margin-top: calc(6 * var(--sp-u, 1px)); font-size: calc(32 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .ps-stage { height: calc(190 * var(--sp-u, 1px)); min-width: calc(110 * var(--sp-u, 1px)); margin-right: calc(14 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .ps-bubble { margin-bottom: calc(30 * var(--sp-u, 1px)); padding: calc(14 * var(--sp-u, 1px)) calc(18 * var(--sp-u, 1px)); border-radius: calc(18 * var(--sp-u, 1px)); font-size: calc(19 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .dice-area button { height: calc(58 * var(--sp-u, 1px)); min-height: calc(58 * var(--sp-u, 1px)); border-radius: calc(29 * var(--sp-u, 1px)); font-size: calc(20 * var(--sp-u, 1px)); margin-right: calc(10 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .dice-area #btnPasoBar { padding: 0 calc(28 * var(--sp-u, 1px)); font-size: calc(18 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .players-title { font-size: calc(13 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .player-row { font-size: calc(14 * var(--sp-u, 1px)); padding: calc(4 * var(--sp-u, 1px)) calc(12 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .ctrl-row button { font-size: calc(12 * var(--sp-u, 1px)) !important; min-height: 44px; }
html.home-wide:not(.tv-mode) .game .log-panel { margin-top: 0; min-height: 0; padding: calc(12 * var(--sp-u, 1px)) calc(16 * var(--sp-u, 1px)); border-radius: calc(16 * var(--sp-u, 1px)); display: flex; flex-direction: column; }
html.home-wide:not(.tv-mode) .game .log-panel .panel-title { font-size: calc(13 * var(--sp-u, 1px)); }
html.home-wide:not(.tv-mode) .game .log { flex: 1; min-height: 0; max-height: none; font-size: calc(15 * var(--sp-u, 1px)); }

/* ============================== TELE ============================== */
.tv-in-game .game .board-wrapper { grid-template-columns: var(--tv-board, 50rem) 1fr; grid-template-rows: auto 100%; grid-template-rows: auto minmax(0, 1fr); grid-column-gap: 1.2rem; }
.tv-in-game .game .game-main { display: contents; }
.tv-in-game .game .game-head { grid-column: 2; grid-row: 1; justify-content: flex-start; margin: 0 0 0.4rem; }
.tv-in-game .game .board { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: var(--tv-board, 50rem); height: var(--tv-board, 50rem); padding: 0.45rem; grid-gap: 0.28rem; grid-template-rows: repeat(7, minmax(0, 1fr)); border-width: 0.2rem; border-radius: 1rem; box-shadow: 0 0 0.8rem rgba(246, 241, 250, 0.7); box-shadow: 0 0 0.8rem rgba(var(--bc-rgb, 246, 241, 250), 0.7); }
.tv-in-game .game .sidebar { grid-column: 2; grid-row: 2; width: auto; height: auto; max-height: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; }
.tv-in-game .game .sidebar > * { margin-top: 0.6rem; }
.tv-in-game .game .sidebar > #tvStatus + .turn-badge { margin-top: 0; }
.tv-in-game .gh-face { height: 3rem; margin-right: 0.6rem; }
.tv-in-game .gh-logo { font-size: 2.2rem; text-shadow: 0 0 0.3rem #ff3d8b; }
.tv-in-game .gh-level { margin-left: 0.8rem; font-size: 1.4rem; padding: 0.1rem 0.8rem; border-width: 0.15rem; box-shadow: none; }
.tv-in-game .game .board .cell { border-width: 0.15rem; border-radius: 0.7rem; padding: 0; box-shadow: none; }
.tv-in-game .game .board .cell .cell-icon { font-size: 2rem; }
.tv-in-game .game .board .cell .cell-short { margin-top: 0.1rem; font-size: 1.3rem; font-weight: 700; color: #fff; }
.tv-in-game .game .board .cell .cell-num { left: 0.35rem; top: 0.15rem; font-size: 1rem; color: rgba(255, 255, 255, 0.8); }
.tv-in-game .game .board .cell .cell-compact { display: flex !important; }
.tv-in-game .game .board .cell .cell-full { display: none !important; }
.tv-in-game .game .board .cell .token { font-size: 1.2rem; }
.tv-in-game .game .board .cell .tokens { right: 0.2rem; bottom: 0.15rem; }
.tv-in-game .game .board .cell[data-cat="salida"] .token { font-size: 0.9rem; }
.tv-in-game .game .board .cell[data-cat="salida"] .cell-text, .tv-in-game .game .board .cell[data-cat="meta"] .cell-text { padding-top: 0.5rem; }
.tv-in-game .game .board .cell[data-cat="salida"] .cell-special .cell-short, .tv-in-game .game .board .cell[data-cat="meta"] .cell-special .cell-short { font-size: 1.2rem; }
.tv-in-game .game .board .cell.cell-turn { outline: 0; box-shadow: 0 0 0 0.2rem #fff; }
.tv-in-game .game .board .cell:focus, .tv-in-game .game .board .cell:focus-visible { outline: 0.25rem solid #fff !important; outline-offset: 0.05rem; box-shadow: none; }
.tv-in-game .game .turn-badge { padding: 0.5rem 0.9rem; border: 0; background: rgba(255, 255, 255, 0.08); }
.tv-in-game .turn-emoji { font-size: 2.4rem; margin-right: 0.8rem; }
.tv-in-game .game .turn-badge strong { font-size: 1rem; color: #e3d9ff; }
.tv-in-game .game #currentPlayerName { font-size: 2rem !important; color: #f6f1fa !important; }
.tv-in-game .game .turn-badge .dice { width: 4rem; height: 4rem; margin: 0 0 0 0.8rem; font-size: 2.6rem; border-radius: 0.9rem; box-shadow: none; }
.tv-in-game .cell-card { padding: 0.7rem 0.9rem; border-width: 0.15rem; border-radius: 1rem; box-shadow: none; }
.tv-in-game .cc-kicker { font-size: 1.1rem; }
.tv-in-game .cc-text { font-size: 1.6rem; margin-top: 0.2rem; }
.tv-in-game .ps-stage { height: 6.4rem; min-width: 3.6rem; margin-right: 0.8rem; }
.tv-in-game .ps-face, .tv-in-game .ps-stage .pa { filter: none; }
.tv-in-game .ps-bubble { margin-bottom: 0.9rem; padding: 0.5rem 0.8rem; border-radius: 0.9rem; font-size: 1.4rem; }
.tv-in-game .ps-bubble:before { left: -0.6rem; bottom: 0.8rem; border-width: 0.5rem; border-left-width: 0; border-right-width: 0.7rem; }
.tv-in-game .game .dice-area { padding: 0; background: none; border: 0; }
.tv-in-game .game .dice-area button, .tv-in-game .game #btnRoll { display: block; flex: 1; width: auto; min-height: 3.4rem; height: 3.4rem; margin: 0 0.6rem 0 0; font-size: 1.7rem; background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); color: #fff; -webkit-text-fill-color: #fff; box-shadow: none; }
.tv-in-game .game .dice-area #btnPasoBar { flex: none; padding: 0 1.4rem; background: rgba(61, 224, 200, 0.1); -webkit-text-fill-color: #bff5ec; }
.tv-in-game .game .players-title { font-size: 1.1rem; margin: 0; }
.tv-in-game .game .players-list { flex: none; margin: 0; min-height: 0; overflow: visible; }
.tv-in-game .game .player-row { padding: 0.15rem 0.7rem; margin: 0 0.4rem 0.3rem 0; font-size: 1.3rem; background: rgba(255, 255, 255, 0.07); }
.tv-in-game .game .player-row.active { background: rgba(255, 61, 139, 0.25); border-color: #ff3d8b; }
.tv-in-game .game .player-row .player-emoji { font-size: 1.5rem; }
.tv-in-game .game .ctrl-row { display: flex; flex-wrap: wrap; }
.tv-in-game .game .ctrl-row button { display: block; width: auto; flex: 1 1 30%; min-height: 2.6rem; margin: 0.15rem !important; padding: 0.2rem 0.5rem !important; font-size: 1.15rem !important; background: rgba(139, 92, 255, 0.15); -webkit-text-fill-color: #e3d9ff; }
.tv-in-game .game .log-panel { flex: 1 1 auto; min-height: 0; height: auto; padding: 0.4rem 0.8rem; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.05); }
.tv-in-game .game .log-panel .panel-title { font-size: 1.1rem; }
.tv-in-game .game .log { flex: 1; min-height: 0; height: auto; font-size: 1.4rem; color: #fff; background: none; padding: 0; }
.tv-in-game .game .log div { color: #e3d9ff; }
.tv-in-game .game .log div.log-latest { color: #ffe9a8; background: none; }
/* mando en el móvil: la tele solo enseña tablero, estado y registro */
.tv-remote.tv-in-game .game .board { grid-row: 1 / span 2; }
.tv-remote.tv-in-game .game .sidebar { grid-column: 2; grid-row: 2; max-height: none; }
.tv-remote.tv-in-game .game .sidebar .dice-area, .tv-remote.tv-in-game .game .sidebar .ctrl-row { display: none; }
.tv-remote.tv-in-game .game .sidebar .players-list { display: flex; }

/* confeti del ganador (4 s, sin clics; en la tele más pequeño y sin giro) */
.confeti { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 650; }
.confeti span { position: absolute; top: -40px; font-size: 28px; -webkit-animation: confeti-cae 3s linear forwards; animation: confeti-cae 3s linear forwards; }
@-webkit-keyframes confeti-cae { from { -webkit-transform: translateY(0) rotate(0deg); } to { -webkit-transform: translateY(110vh) rotate(360deg); } }
@keyframes confeti-cae { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(110vh) rotate(360deg); } }
.tv-mode .confeti span { font-size: 2rem; -webkit-animation-name: confeti-cae-tv; animation-name: confeti-cae-tv; }
@-webkit-keyframes confeti-cae-tv { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(110vh); } }
@keyframes confeti-cae-tv { from { transform: translateY(0); } to { transform: translateY(110vh); } }
@media (prefers-reduced-motion: reduce) { .confeti { display: none; } }