/* Piñita Bot Productions — plataforma de juegos (Fase 22): menú, «Elegir juego», configuración, marca por juego, ventanas que se adaptan a la altura.
 * Compatibilidad con Chromium ~60: sin gap en flexbox (márgenes), sin inset, aspect-ratio ni min()/max()/clamp(); grid con grid-gap; var() siempre con reserva. */

/* ---------- menú fijo ---------- */
.menu-btn { position: fixed; z-index: 240; right: 12px; top: 10px; min-height: 40px; margin: 0; padding: 0 16px; border: 2px solid #8b5cff; border-radius: 20px; background: rgba(15, 10, 28, 0.85); color: #e3d9ff; font: 700 15px 'DM Sans', system-ui, sans-serif; box-shadow: none; }
.menu-btn:focus, .menu-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.game-on .menu-btn, html.overlay-open .menu-btn, html.pad-mode .menu-btn { display: none; }
.home-sign { right: 120px; }
html.home-wide .home-sign { right: calc(150 * var(--sp-u, 1px)); }
html.tv-mode .menu-btn { top: 0.6rem; right: 1rem; min-height: 2.6rem; padding: 0 1.1rem; font-size: 1.2rem; }
html.tv-mode.home-wide .home-sign { right: calc(190 * var(--sp-u, 1px)); }

/* ---------- pantallas de la plataforma (superposiciones a pantalla completa) ---------- */
.plat-screen { display: flex; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 270; padding: 0; text-align: left; background: radial-gradient(520px 420px at 50% 40%, #3a1260 0%, rgba(58, 18, 96, 0) 70%), #0f0a1c; -webkit-backdrop-filter: none; backdrop-filter: none; }
.plat-screen.hidden { display: none; }
.ps-inner { box-sizing: border-box; width: 100%; max-width: 1100px; margin: 0 auto; padding: 14px 16px 64px; }
.ps-narrow { max-width: 640px; }
.ps-head { display: flex; flex-wrap: wrap; align-items: center; position: -webkit-sticky; position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px 10px; background: #0f0a1c; background: rgba(15, 10, 28, 0.96); }
.ps-head h2 { margin: 0 auto 0 0; color: #f6f1fa; font: 800 28px/1.15 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; }
.ps-sub { order: 3; flex-basis: 100%; margin: 4px 0 0; color: #cdbfe6; font: 400 15px/1.3 'DM Sans', system-ui, sans-serif; }
.ps-head button { order: 2; margin: 0; }
.ps-msg { margin: 8px 0 0; padding: 10px 14px; border: 2px solid #ffc94d; border-radius: 14px; color: #ffe9a8; background: rgba(255, 201, 77, 0.08); font: 700 15px/1.35 'DM Sans', system-ui, sans-serif; }

/* ---------- Elegir juego ---------- */
.gm-item { display: flex; flex-direction: column; min-width: 0; }
.gm-item .gm-card { flex: 1 1 auto; }
.gm-how { display: block; margin-top: 6px; min-height: 44px; padding: 10px 8px; border: 2px solid #8b5cff; border-radius: 22px; background: rgba(139, 92, 255, 0.14); color: #e3d9ff; -webkit-text-fill-color: #e3d9ff; font: 700 16px 'DM Sans', system-ui, sans-serif; text-align: center; text-decoration: none; }
.gm-how:focus, .gm-how:hover { outline: 3px solid #fff; outline-offset: 2px; }
html.tv-mode .gm-how { font-size: 1.2rem; }
.gm-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 18px; margin-top: 14px; }
.board-screen .bs-card, .gm-card { transform: none; }
.plat-screen .gm-card {
  position: relative; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: auto; min-width: 0; height: auto; margin: 0; padding: 14px 14px 16px; overflow: hidden;
  border: 3px solid #ff3d8b; border-radius: 22px; background: rgba(255, 61, 139, 0.1); box-shadow: 0 0 22px rgba(255, 61, 139, 0.45);
  color: #f6f1fa; -webkit-text-fill-color: #f6f1fa; font: 400 15px/1.3 'DM Sans', system-ui, sans-serif; text-align: center; cursor: pointer; filter: none;
}
.plat-screen .gm-card * { -webkit-text-fill-color: currentColor; }
.plat-screen .gm-card:hover { transform: none; filter: none; }
.plat-screen .gm-card.is-soon { border-color: #8b5cff; background: rgba(139, 92, 255, 0.08); box-shadow: 0 0 14px rgba(139, 92, 255, 0.3); }
.plat-screen .gm-card:focus, .plat-screen .gm-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.plat-screen .gm-card:focus:not(:focus-visible) { outline: 0; }
.gm-pic { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 230px; }
.gm-icon { font-size: 78px; line-height: 1; }
.gm-pic.is-anim .gm-icon { display: none; }
.gm-pic .pa { filter: drop-shadow(0 0 10px rgba(255, 61, 139, 0.5)); }
.gm-soon { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 2px 10px; border: 2px solid #3de0c8; border-radius: 12px; background: rgba(15, 10, 28, 0.85); color: #3de0c8; font: 800 11px/1.3 'DM Sans', system-ui, sans-serif; letter-spacing: 1.5px; }
.gm-name { margin-top: 8px; color: #f6f1fa; font: 800 26px/1.15 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; }
.gm-desc { display: block; min-height: 3.9em; margin-top: 6px; color: #e3d9ff; font-size: 15px; }
.gm-players { margin-top: 6px; color: #cdbfe6; font-size: 13px; letter-spacing: 1px; }

/* ---------- Menú ---------- */
.mn-list { display: block; margin-top: 12px; }
.mn-list .mn-item { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 56px; margin: 0 0 10px; padding: 0 20px; border: 2px solid #8b5cff; border-radius: 28px; background: rgba(139, 92, 255, 0.12); color: #e3d9ff; -webkit-text-fill-color: #e3d9ff; font: 700 20px/1.2 'DM Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; box-shadow: none; text-align: left; }
.mn-list .mn-item:hover { background: rgba(139, 92, 255, 0.24); transform: none; filter: none; }
.mn-list .mn-item:focus, .mn-list .mn-item:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mn-ico { width: 40px; flex: none; font-size: 24px; }

/* ---------- Configuración ---------- */
.cf-inner.setup { background: none; border: 0; box-shadow: none; text-align: left; padding-top: 14px; }
.cf-inner .opts { margin: 14px 0 0; border: 1px solid rgba(139, 92, 255, 0.35); border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
.cf-inner .opts legend { padding: 0 8px; color: #e3d9ff; font: 800 16px 'Bricolage Grotesque', system-ui, sans-serif; }
.cf-inner .check { display: flex; align-items: center; margin: 10px 0 6px; text-align: left; }
.cf-inner .hint { margin: 4px 0 8px; text-align: left; }
.cf-inner .advanced-links { margin-top: 14px; text-align: center; }

/* ---------- marca de agua: la de cada juego solo dentro de ese juego; fuera, la de la plataforma ---------- */
.creator-mark { white-space: nowrap; }
html:not(.in-game-mark) .creator-mark { opacity: 0.85; }

/* ---------- ventanas que se adaptan a la altura de la pantalla (las opciones nunca se cortan) ---------- */
.modal-overlay .modal { max-height: 94%; max-height: 94vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
#modalChoices.many { display: flex; flex-wrap: wrap; justify-content: center; }
#modalChoices.many button { display: block !important; width: auto !important; flex: 1 1 42%; min-width: 0; margin: 4px !important; }
html.tv-mode #modalChoices.many button { flex-basis: 30%; min-height: 3rem; font-size: 1.15rem; padding: 0.2rem 0.5rem; }
html.tv-mode .modal-overlay .modal { max-height: 96%; }
html.tv-mode .modal h3 { margin-bottom: 0.4rem; }

/* ---------- ventana de contacto ---------- */
.contacto-panel { z-index: 700; }
.ct-box { max-width: 420px; text-align: center; }
.ct-addr { margin: 4px 0 10px; color: #ffe9a8; font: 800 1.15rem 'DM Sans', system-ui, sans-serif; word-break: break-all; }
.ct-qr { display: block; width: 170px; height: 170px; margin: 6px auto 10px; padding: 8px; background: #fff; border-radius: 10px; image-rendering: pixelated; box-sizing: border-box; }
.ct-row { display: flex; flex-wrap: wrap; justify-content: center; }
.ct-row button, .ct-btn { margin: 4px; }
.ct-btn { display: inline-block; min-height: 46px; line-height: 46px; padding: 0 22px; border-radius: 999px; background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); color: #fff; font: 800 16px 'DM Sans', system-ui, sans-serif; text-decoration: none; }
.ct-btn:focus, .ct-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.tv-mode .ct-box { max-width: 30rem; }
html.tv-mode .ct-addr { font-size: 1.7rem; }
html.tv-mode .ct-qr { width: 12rem; height: 12rem; }
html.tv-mode .ct-btn { min-height: 3.2rem; line-height: 3.2rem; font-size: 1.4rem; }

/* ---------- «Elegir tablero»: botón Jugar ---------- */
.bs-head .bs-play { order: 4; margin: 0 0 0 10px; height: 46px; min-height: 46px; padding: 0 30px; border: 0; border-radius: 23px; background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); color: #fff; -webkit-text-fill-color: #fff; font: 800 18px 'DM Sans', system-ui, sans-serif; box-shadow: 0 0 18px rgba(255, 61, 139, 0.6); }
.board-screen .bs-head button#bsBack { order: 2; margin: 0; }
.board-screen .bs-head .bs-play { order: 3; }
.board-screen .bs-foot { margin-top: 18px; text-align: center; }

/* ---------- tele ---------- */
html.tv-mode .ps-inner { max-width: none; padding: 1rem 2rem 3rem; padding: 3vh 5vw 3vh; }   /* margen de seguridad (overscan) */
html.tv-mode .ps-head h2 { font-size: 2.4rem; }
html.tv-mode .ps-sub { font-size: 1.4rem; }
html.tv-mode .gm-grid { grid-template-columns: repeat(3, 1fr); grid-gap: 1.2rem; margin-top: 1.2vh; }
html.tv-mode .gm-item-soon { display: none; }   /* «Próximamente» no se enseña en la tele: las tres portadas caben siempre completas */
html.tv-mode .gm-pic { height: 11rem; height: 27vh; }
html.tv-mode .plat-screen .gm-card { padding: 0.8rem 0.8rem 0.9rem; }
html.tv-mode .gm-desc { min-height: 0; }
html.tv-mode .gm-how { min-height: 2.6rem; padding: 0.5rem 0.4rem; margin-top: 0.5rem; }
html.tv-mode #gamesScreen .ps-head { margin-bottom: 0.4rem; }
html.tv-mode #gamesScreen .ps-crumbs { margin: 0.2rem 0 0.4rem; }
html.tv-mode #gamesScreen .ps-sub { margin: 0.2rem 0; }
html.tv-mode .gm-name { font-size: 2rem; }
html.tv-mode .gm-desc { font-size: 1.3rem; }
html.tv-mode .gm-players { font-size: 1.1rem; }
html.tv-mode .gm-soon { font-size: 1rem; }
html.tv-mode .mn-list .mn-item { min-height: 3.6rem; font-size: 1.7rem; }
html.tv-mode .ps-narrow { max-width: 44rem; }
html.tv-mode .plat-screen .gm-card { border-width: 0.2rem; box-shadow: none; }
html.tv-mode .plat-screen .gm-card:focus, html.tv-mode .plat-screen .gm-card:focus-visible { outline-width: 0.3rem; }
html.tv-mode .gm-pic .pa { filter: none; }
html.tv-mode .bs-head .bs-play { height: 3.4rem; font-size: 1.7rem; box-shadow: none; }
html.home-wide .board-screen .bs-head button#bsBack { margin-left: auto; }
html.home-wide .board-screen .bs-head .bs-play { margin-left: calc(14 * var(--sp-u, 1px)); }
@media (max-width: 900px) { .gm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .gm-grid { grid-template-columns: 1fr 1fr; grid-gap: 10px; } .plat-screen .gm-card { padding: 10px 8px 12px; } .gm-pic { height: 130px; } .gm-icon { font-size: 56px; } .gm-name { font-size: 20px; } .gm-desc { font-size: 13px; } .ps-head h2 { font-size: 24px; } }

/* ---------- partida en el MÓVIL (vertical): tablero y «Tirar dado» siempre a la vista, sin scroll (Fase 22, C) ----------
 * El botón de tirar queda fijo abajo; Piñita, el turno y la casilla se compactan; la marca del juego va al final de la página (nunca tapa un botón);
 * la lista de jugadores (hasta 16) es una rejilla de dos columnas debajo del pliegue. */
@media (max-width: 700px) {
  html.game-on:not(.tv-mode):not(.home-wide) body { padding-bottom: 84px; }
  html.game-on:not(.tv-mode):not(.home-wide) .creator-mark { position: static; display: block; width: -webkit-fit-content; width: fit-content; margin: 10px auto 0; pointer-events: none; }
  html.game-on:not(.tv-mode):not(.home-wide) .game-head { margin: 0 0 4px; }
  html.game-on:not(.tv-mode):not(.home-wide) .gh-face { height: 34px; margin-right: 8px; }
  html.game-on:not(.tv-mode):not(.home-wide) .gh-logo { font-size: 22px; }
  html.game-on:not(.tv-mode):not(.home-wide) .gh-level { margin-left: 8px; font-size: 11px; padding: 1px 9px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .sidebar { margin-top: 6px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .sidebar > * { margin-top: 6px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .turn-badge { padding: 6px 12px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .turn-badge .dice { width: 46px; height: 46px; font-size: 28px; border-radius: 12px; }
  html.game-on:not(.tv-mode):not(.home-wide) .turn-emoji { font-size: 24px; margin-right: 10px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game #currentPlayerName { font-size: 18px; }
  html.game-on:not(.tv-mode):not(.home-wide) .cell-card { padding: 8px 12px; }
  html.game-on:not(.tv-mode):not(.home-wide) .cc-kicker { font-size: 11px; }
  html.game-on:not(.tv-mode):not(.home-wide) .cc-text { font-size: 16px; margin-top: 2px; }
  html.game-on:not(.tv-mode):not(.home-wide) .ps-stage { height: 64px; min-width: 40px; margin-right: 8px; }
  html.game-on:not(.tv-mode):not(.home-wide) .ps-bubble { margin-bottom: 6px; padding: 7px 11px; font-size: 14px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .dice-area { position: fixed; z-index: 120; left: 10px; right: 10px; bottom: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 6px; border-radius: 34px; background: rgba(15, 10, 28, 0.94); box-shadow: 0 0 14px rgba(0, 0, 0, 0.6); }
  html.game-on:not(.tv-mode):not(.home-wide) .game .dice-area button { height: 50px; min-height: 50px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .players-list { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 6px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .player-row { display: flex; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; }
}
@media (max-width: 700px) and (max-height: 700px) {
  html.game-on:not(.tv-mode):not(.home-wide) .game .turn-badge { padding: 3px 10px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .turn-badge .dice { width: 40px; height: 40px; font-size: 24px; }
  html.game-on:not(.tv-mode):not(.home-wide) .cc-kicker { display: none; }
  html.game-on:not(.tv-mode):not(.home-wide) .cell-card { padding: 5px 12px; }
  html.game-on:not(.tv-mode):not(.home-wide) .cc-text { font-size: 15px; }
  html.game-on:not(.tv-mode):not(.home-wide) .game .sidebar > * { margin-top: 4px; }
  html.game-on:not(.tv-mode):not(.home-wide) .ps-stage { height: 50px; min-width: 32px; }
  html.game-on:not(.tv-mode):not(.home-wide) .ps-bubble { margin-bottom: 4px; padding: 5px 10px; font-size: 13px; }
}

/* ---------- pantalla del ganador: tarjeta centrada con Piñita (antes era una franja que tapaba el tablero) ---------- */
.winner-banner:not(.hidden) {
  position: fixed; z-index: 500; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  width: 88%; max-width: 520px; max-height: 94%; overflow-y: auto; box-sizing: border-box; margin: 0; padding: 20px 20px 16px;
  -webkit-animation: none; animation: none;
  background: #1a1030; background-image: linear-gradient(160deg, rgba(255, 61, 139, 0.35), rgba(139, 92, 255, 0.35)); color: #f6f1fa;
  border: 3px solid #ff3d8b; border-radius: 24px; font: 800 24px/1.25 'Bricolage Grotesque', system-ui, sans-serif;
  box-shadow: 0 0 0 100vmax rgba(8, 4, 18, 0.8), 0 0 40px rgba(255, 61, 139, 0.55);
}
.winner-banner .mascot-celebrate { display: block; margin: 8px auto 4px; height: 130px; width: auto; }
.winner-banner .banner-mark { margin: 4px 0 10px; font: 700 13px 'DM Sans', system-ui, sans-serif; letter-spacing: 0.05em; opacity: 0.8; }
.winner-actions { display: flex; flex-wrap: wrap; justify-content: center; }
.winner-actions button { margin: 4px; min-height: 48px; padding: 0 22px; font: 800 17px 'DM Sans', system-ui, sans-serif; }
.winner-actions button:focus, .winner-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.tv-in-game .winner-banner:not(.hidden) { max-width: 38rem; padding: 1.2rem 1.4rem 1rem; border-width: 0.2rem; border-radius: 1.4rem; font-size: 2.2rem; box-shadow: 0 0 0 100vmax rgba(8, 4, 18, 0.82); }
html.tv-in-game .winner-banner .mascot-celebrate { height: 11rem; }
html.tv-in-game .winner-banner .banner-mark { font-size: 1rem; }
html.tv-in-game .winner-actions button { min-height: 3.4rem; font-size: 1.6rem; padding: 0 1.6rem; }
/* los botones del menú se ven igual que los enlaces (el tema de tele daba a los <button> otra forma) */
.mn-list button.mn-item { margin: 0 0 10px; border-radius: 28px; border: 2px solid #8b5cff; background: rgba(139, 92, 255, 0.12); background-image: none; box-shadow: none; padding: 0 20px; -webkit-text-fill-color: #e3d9ff; }
html.tv-mode .mn-list button.mn-item { margin: 0 0 10px; }
/* el subtítulo de la voz nunca tapa «Tirar dado» en el móvil: se coloca justo encima del botón fijo */
@media (max-width: 700px) {
  html.game-on:not(.tv-mode):not(.home-wide) .speech-caption { bottom: 84px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); font-size: 15px; max-width: 94vw; }
}

/* ---------- acciones de la jugada en el sitio del dado (Fase 23): «Hecho» y «Saltar» en vez de «Tirar dado» ---------- */
.dice-area.has-actions #btnRoll { display: none !important; }
.ps-bubble .nm { color: #ff3d8b; font-weight: 900; }

/* «Saltar» con el mismo tamaño que «Hecho» (si no, quedaba diminuto) */
.game .dice-area.has-actions #btnEndTurn, .game .dice-area.has-actions #btnPasoBar { display: block; flex: 1 1 0; min-height: 54px; height: 54px; margin: 0 6px 0 0; font-size: 18px; border-radius: 27px; }
.game .dice-area.has-actions #btnPasoBar { margin-right: 0; background: rgba(61, 224, 200, 0.12); border: 2px solid #3de0c8; -webkit-text-fill-color: #bff5ec; }
html.home-wide:not(.tv-mode) .game .dice-area.has-actions #btnEndTurn, html.home-wide:not(.tv-mode) .game .dice-area.has-actions #btnPasoBar { height: calc(58 * var(--sp-u, 1px)); min-height: calc(58 * var(--sp-u, 1px)); font-size: calc(20 * var(--sp-u, 1px)); border-radius: calc(29 * var(--sp-u, 1px)); }
html.tv-in-game .game .dice-area.has-actions #btnEndTurn, html.tv-in-game .game .dice-area.has-actions #btnPasoBar { height: 3.4rem; min-height: 3.4rem; font-size: 1.7rem; border-radius: 1.7rem; padding: 0 1.2rem; }
html.tv-in-game .game .dice-area.has-actions #btnEndTurn { flex: 2 1 0; }
html.game-on:not(.tv-mode):not(.home-wide) .game .dice-area.has-actions #btnEndTurn, html.game-on:not(.tv-mode):not(.home-wide) .game .dice-area.has-actions #btnPasoBar { height: 50px; min-height: 50px; }

/* cartel de elegir a alguien con muchos jugadores (hasta 16): rejilla de columnas, sin botones cortados */
#modalChoices.many { display: flex; flex-wrap: wrap; justify-content: center; }
html.tv-mode #modalChoices.many button { flex-basis: 23%; font-size: 1.05rem; }
#modal .modal { max-height: 94vh; overflow-y: auto; }

/* tele: el panel lateral se desplaza (el foco del mando lo lleva a cada botón); con muchos jugadores la lista es compacta */
html.tv-in-game .game .sidebar { overflow-y: auto; overflow-x: hidden; }
.players-list.many .player-row span:last-child { display: none; }
.players-list.many .player-row { padding: 2px 8px; }

/* camino de flechas entre casillas (0 → META) */
.board svg.board-path { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; opacity: 0.9; }
html.tv-mode .board svg.board-path { opacity: 0.85; }

/* ======================= Fase 23: pestañas de Configuración, menú agrupado, migas de pan, editor ======================= */
.ps-crumbs { margin: 2px 0 8px; color: #cdbfe6; font: 400 14px/1.3 'DM Sans', system-ui, sans-serif; }
.ps-crumbs b { color: #fff; }
html.tv-mode .ps-crumbs { font-size: 1.15rem; }
.ps-end { margin: 22px 0 0; text-align: center; }
.ps-playnow { min-height: 52px; padding: 0 34px; border: 0; border-radius: 26px; background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); color: #fff; -webkit-text-fill-color: #fff; font: 800 18px 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.ps-playnow:focus, .ps-playnow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.tv-mode .ps-playnow { min-height: 3.4rem; font-size: 1.6rem; box-shadow: none; }
.plat-screen .ps-head > button { order: 0; margin: 0 14px 0 0; }
.plat-screen .ps-head > h2 { margin: 0 auto 0 0; }
.plat-screen .ps-head > button + h2 { margin-left: 0; }

/* portada: solo jugadores y «Elegir juego» (Sala online, Unirse y Móvil como mando viven en el menú y en «Elegir juego») */
#setup .start-actions #btnOnlineCreate, #setup .start-actions #btnOnlineJoin, #setup .start-actions #btnPadSetup { display: none !important; }
.gm-more { margin: 22px 0 0; padding: 12px 14px; border: 1px solid rgba(139, 92, 255, 0.35); border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
.gm-more-t { display: block; margin: 0 0 8px; color: #e3d9ff; font: 800 15px 'DM Sans', system-ui, sans-serif; }
.gm-more button { margin: 0 8px 8px 0; min-height: 46px; }
html.tv-mode .gm-more-t { font-size: 1.3rem; }
html.tv-mode .gm-more button { min-height: 3rem; font-size: 1.3rem; }

/* configuración con pestañas */
.cf-inner { max-width: 860px; }
.cf-tabs { display: flex; flex-wrap: wrap; margin: 6px 0 4px; }
.cf-tabs button { margin: 0 8px 8px 0; min-height: 46px; padding: 0 16px; border: 2px solid #8b5cff; border-radius: 23px; background: rgba(139, 92, 255, 0.12); background-image: none; box-shadow: none; color: #e3d9ff; -webkit-text-fill-color: #e3d9ff; font: 700 15px 'DM Sans', system-ui, sans-serif; }
.cf-tabs button.is-on { background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); border-color: #ff3d8b; color: #fff; -webkit-text-fill-color: #fff; }
.cf-tabs button:focus, .cf-tabs button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.tv-mode .cf-tabs button { min-height: 3rem; font-size: 1.25rem; padding: 0 1rem; }
.cf-panel.hidden { display: none; }
.cf-inner select { max-width: 100%; }
.cf-inner .board-tools button { margin: 4px 8px 4px 0; }
.voice-row { display: block; margin: 8px 0; }
.voice-row span { display: block; margin-bottom: 4px; color: #e3d9ff; }
.cf-inner .check select { display: block; margin-top: 6px; }

/* menú: grupos con título; en pantallas anchas, dos columnas */
.mn-list { display: block; }
.mn-group { margin: 0 0 14px; }
.mn-gt { margin: 10px 0 6px; color: #cdbfe6; font: 800 14px 'DM Sans', system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
html.tv-mode .mn-gt { font-size: 1.1rem; }
.mn-list .mn-item.is-off { opacity: 0.45; }
.mn-quick { display: flex; flex-wrap: wrap; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgba(139, 92, 255, 0.35); }
.mn-qbtn { min-height: 52px; margin: 0 12px 8px 0; padding: 0 22px; border: 2px solid #8b5cff; border-radius: 26px; background: rgba(139, 92, 255, 0.18); background-image: none; box-shadow: none; color: #fff; -webkit-text-fill-color: #fff; font: 800 17px 'DM Sans', system-ui, sans-serif; }
.mn-qbtn:focus, .mn-qbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html.tv-mode .mn-qbtn { min-height: 3.2rem; font-size: 1.4rem; }
@media (min-width: 900px) {
  #menuScreen .ps-inner { max-width: 960px; }
  .mn-list { display: flex; flex-wrap: wrap; }
  .mn-group { width: 48%; margin-right: 2%; box-sizing: border-box; }
  .mn-list .mn-item { min-height: 50px; }
}

/* editor de tableros (página propia) */
.edh-h { margin: 18px 0 6px; color: #e3d9ff; font: 800 18px 'Bricolage Grotesque', system-ui, sans-serif; }
.edh-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; padding: 8px 12px; border: 1px solid rgba(139, 92, 255, 0.35); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.edh-name { flex: 1 1 160px; font-weight: 800; color: #f6f1fa; }
.edh-sum { flex: 2 1 200px; color: #cdbfe6; font-size: 14px; }
.edh-row button { margin: 4px 0 4px 8px; min-height: 42px; }
.edh-new { display: flex; flex-wrap: wrap; align-items: center; }
.edh-new > * { margin: 0 12px 8px 0; }
#editor .ps-crumbs { text-align: left; }

/* tamaño del texto (menús, ventanas y panel de Piñita) */
html.txt-g .ps-inner, html.txt-g #modal .modal, html.txt-g .cell-card, html.txt-g .ps-bubble { zoom: 1.12; }
html.txt-xg .ps-inner, html.txt-xg #modal .modal, html.txt-xg .cell-card, html.txt-xg .ps-bubble { zoom: 1.28; }
.cf-inner .opts { max-width: none; margin: 10px 0 6px; }
@media (min-width: 900px) {
  .cf-panel { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .cf-panel .opts { width: 48.5%; box-sizing: border-box; margin-right: 1.5%; }
}
.ps-end button.ps-playnow, html.tv-mode .ps-end button.ps-playnow { border: 0; background-color: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); }

/* ---------- atajos del mando visibles (solo en la tele) ---------- */
.key-hints, .gh-keys { display: none; }
html.tv-mode .key-hints { display: block; position: fixed; left: 0.8rem; bottom: 0.5rem; z-index: 260; padding: 0.15rem 0.7rem; border-radius: 1rem; background: rgba(15, 10, 28, 0.85); color: #cdbfe6; font: 700 0.95rem 'DM Sans', system-ui, sans-serif; pointer-events: none; }
html.tv-mode.game-on .key-hints { display: none; }
html.tv-mode .gh-keys { display: inline-block; margin-left: 0.8rem; color: #cdbfe6; font: 700 0.85rem 'DM Sans', system-ui, sans-serif; white-space: nowrap; }

/* ---------- temas de color por tablero (suave / picante / hot / intenso): tinte del fondo de la partida ---------- */
html[data-board="suave"].game-on body { background-image: radial-gradient(ellipse at 80% 0%, rgba(78, 224, 143, 0.16), rgba(78, 224, 143, 0) 55%), radial-gradient(ellipse at 0% 100%, rgba(78, 224, 143, 0.08), rgba(78, 224, 143, 0) 50%); }
html[data-board="picante"].game-on body { background-image: radial-gradient(ellipse at 80% 0%, rgba(255, 201, 77, 0.16), rgba(255, 201, 77, 0) 55%), radial-gradient(ellipse at 0% 100%, rgba(255, 201, 77, 0.08), rgba(255, 201, 77, 0) 50%); }
html[data-board="hot"].game-on body { background-image: radial-gradient(ellipse at 80% 0%, rgba(255, 138, 61, 0.2), rgba(255, 138, 61, 0) 55%), radial-gradient(ellipse at 0% 100%, rgba(255, 138, 61, 0.1), rgba(255, 138, 61, 0) 50%); }
html[data-board="intenso"].game-on body { background-image: radial-gradient(ellipse at 80% 0%, rgba(255, 61, 79, 0.24), rgba(255, 61, 79, 0) 55%), radial-gradient(ellipse at 0% 100%, rgba(255, 61, 79, 0.12), rgba(255, 61, 79, 0) 50%); }

/* ---------- resumen final ---------- */
.sum-gana { margin: 0 0 6px; color: #ffe9a8; font: 800 22px 'Bricolage Grotesque', system-ui, sans-serif; }
.sum-vis { margin: 0 0 10px; color: #cdbfe6; font-size: 14px; }
.sum-row { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 6px; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); text-align: left; }
.sum-row strong { flex: 1 1 110px; color: #fff; }
.sum-apodo { flex: 2 1 160px; color: #ffd1e6; font-weight: 700; }
.sum-datos { flex: 1 1 110px; color: #cdbfe6; font-size: 13px; }
.sum-list { max-height: 38vh; overflow-y: auto; }
html.tv-mode .sum-row { font-size: 1.15rem; } html.tv-mode .sum-gana { font-size: 1.8rem; }

/* ---------- Modo Noche: luces ambientales (opt-in); el color y la fuerza dependen del tablero ---------- */
.night-lights { display: none; }
html.night-on .night-lights { display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; mix-blend-mode: screen; pointer-events: none; --nl: 246, 241, 250; --nla: 0.14; }
html[data-board="suave"].night-on .night-lights { --nl: 78, 224, 143; --nla: 0.18; }
html[data-board="picante"].night-on .night-lights { --nl: 255, 201, 77; --nla: 0.22; }
html[data-board="hot"].night-on .night-lights { --nl: 255, 138, 61; --nla: 0.28; }
html[data-board="intenso"].night-on .night-lights { --nl: 255, 61, 79; --nla: 0.34; }
.night-lights i { position: absolute; display: block; width: 60%; height: 70%; border-radius: 50%; }
.night-lights .nl-a { left: -12%; top: -18%; background: radial-gradient(circle, rgba(var(--nl, 246, 241, 250), var(--nla, 0.14)) 0%, rgba(var(--nl, 246, 241, 250), 0) 68%); }
.night-lights .nl-b { right: -14%; bottom: -22%; background: radial-gradient(circle, rgba(var(--nl, 246, 241, 250), var(--nla, 0.14)) 0%, rgba(var(--nl, 246, 241, 250), 0) 68%); }
html.night-on:not(.tv-mode) .night-lights i { -webkit-animation: nl-pulso 7s ease-in-out infinite alternate; animation: nl-pulso 7s ease-in-out infinite alternate; }
html.night-on:not(.tv-mode) .night-lights .nl-b { -webkit-animation-delay: -3.5s; animation-delay: -3.5s; }
@-webkit-keyframes nl-pulso { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes nl-pulso { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.night-on .night-lights i { -webkit-animation: none !important; animation: none !important; } }

/* retos por pareja (Configuración → Seguridad) */
.cp-card { margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(255, 61, 139, 0.45); border-radius: 14px; background: rgba(255, 61, 139, 0.06); }
.cp-card strong { display: block; margin: 0 0 4px; color: #ffd1e6; }
.cp-t { margin: 8px 0 2px; color: #cdbfe6; font: 700 13px 'DM Sans', system-ui, sans-serif; }
.cp-opt { display: block; margin: 4px 0; }

/* ======================= Ruleta de retos ======================= */
.rl-niveles { display: flex; flex-wrap: wrap; margin: 8px 0; }
.rl-nivel { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 23%; min-width: 130px; min-height: 120px; margin: 0 1% 12px 0; padding: 10px; border: 3px solid #fff; border-radius: 20px; background: rgba(255, 255, 255, 0.05); background-image: none; box-shadow: none; font-family: 'DM Sans', system-ui, sans-serif; cursor: pointer; -webkit-text-fill-color: currentColor; }
/* Fase 27: botones de nivel con la iluminación y el diseño de «Elegir tablero» (borde y brillo del color del nivel, halo detrás de Piñita, más intensidad = más brillo y más tamaño) */
.rl-nivel.rl-tarjeta { --bc: #f6f1fa; --bc-rgb: 246, 241, 250; position: relative; overflow: hidden; justify-content: flex-start; padding: 12px 8px 12px; width: 23.5%; margin: 0 1% 12px 0;
  border: 3px solid #f6f1fa; border: 3px solid var(--bc, #f6f1fa); border-radius: 22px; background: rgba(246, 241, 250, 0.1); background: rgba(var(--bc-rgb, 246, 241, 250), 0.1);
  box-shadow: 0 0 16px rgba(246, 241, 250, 0.45); box-shadow: 0 0 16px rgba(var(--bc-rgb, 246, 241, 250), 0.5); color: #f6f1fa; -webkit-text-fill-color: #f6f1fa; }
.rl-nivel.rl-tarjeta * { -webkit-text-fill-color: currentColor; }
.rl-nivel.rl-tarjeta[data-level="3"] { box-shadow: 0 0 20px rgba(255, 201, 77, 0.6); box-shadow: 0 0 20px rgba(var(--bc-rgb, 255, 201, 77), 0.6); }
.rl-nivel.rl-tarjeta[data-level="4"] { background: rgba(255, 138, 61, 0.13); background: rgba(var(--bc-rgb, 255, 138, 61), 0.13); box-shadow: 0 0 26px rgba(255, 138, 61, 0.7); box-shadow: 0 0 26px rgba(var(--bc-rgb, 255, 138, 61), 0.7); }
.rl-nivel.rl-tarjeta[data-level="5"] { background: rgba(255, 61, 79, 0.15); background: rgba(var(--bc-rgb, 255, 61, 79), 0.15); box-shadow: 0 0 32px rgba(255, 61, 79, 0.8); box-shadow: 0 0 32px rgba(var(--bc-rgb, 255, 61, 79), 0.8); }
.rl-nivel.rl-tarjeta:focus, .rl-nivel.rl-tarjeta:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.rl-halo { position: absolute; left: 50%; top: 16%; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 241, 250, 0.4) 0%, rgba(0, 0, 0, 0) 70%); background: radial-gradient(circle, rgba(var(--bc-rgb, 246, 241, 250), 0.45) 0%, rgba(0, 0, 0, 0) 70%); }
.rl-lab { position: relative; margin-bottom: 4px; color: #f6f1fa; color: var(--bc, #f6f1fa); font: 700 12px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: 1.5px; text-align: center; }
.rl-tarjeta .rl-pic { margin: 0 0 6px; }
.rl-tarjeta .rl-pic { height: 190px; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: center; justify-content: center; }   /* misma altura en las cuatro: Piñita crece con el nivel dentro */
.rl-tarjeta .rl-pic .pa, .rl-tarjeta .rl-pic-img { height: 82%; width: auto; } .rl-tarjeta[data-level="3"] .rl-pic .pa, .rl-tarjeta[data-level="3"] .rl-pic-img { height: 88%; } .rl-tarjeta[data-level="4"] .rl-pic .pa, .rl-tarjeta[data-level="4"] .rl-pic-img { height: 94%; } .rl-tarjeta[data-level="5"] .rl-pic .pa, .rl-tarjeta[data-level="5"] .rl-pic-img { height: 100%; }
.rl-tarjeta .rl-pic .pa, .rl-tarjeta .rl-pic-img { filter: drop-shadow(0 0 9px rgba(246, 241, 250, 0.6)); filter: drop-shadow(0 0 9px rgba(var(--bc-rgb, 246, 241, 250), 0.7)); }
.rl-tarjeta[data-level="4"] .rl-pic .pa, .rl-tarjeta[data-level="4"] .rl-pic-img { filter: drop-shadow(0 0 12px rgba(var(--bc-rgb, 255, 138, 61), 0.85)) saturate(1.2); }
.rl-tarjeta[data-level="5"] .rl-pic .pa, .rl-tarjeta[data-level="5"] .rl-pic-img { filter: drop-shadow(0 0 15px rgba(var(--bc-rgb, 255, 61, 79), 0.95)) saturate(1.3) contrast(1.05); }
.rl-tarjeta .rl-nivel-n { position: relative; color: #f6f1fa; font-size: 24px; }
.rl-tarjeta .rl-nivel-l { position: relative; }
.rl-llamas { position: relative; display: block; margin-top: 6px; font-size: 15px; letter-spacing: 3px; line-height: 1.1; }
html.tv-mode .rl-nivel.rl-tarjeta { box-shadow: none; border-width: 0.25rem; } html.tv-mode .rl-lab { font-size: 1.1rem; } html.tv-mode .rl-llamas { font-size: 1.4rem; }
html.tv-mode .rl-tarjeta .rl-pic .pa, html.tv-mode .rl-tarjeta .rl-pic-img { filter: none; }
.rl-pic { position: relative; display: block; width: 100%; height: 130px; margin: 0 0 8px; text-align: center; overflow: hidden; }
.rl-pic-img { display: block; height: 100%; width: auto; margin: 0 auto; }
.rl-pic.is-anim .rl-pic-img { display: none; }
.rl-pic .pa { display: inline-block; height: 100%; vertical-align: bottom; filter: drop-shadow(0 0 8px rgba(255, 61, 139, 0.45)); }   /* inline-block: el ancho sale de la proporción del fotograma (con block se estiraba y Piñita salía apretada) */
.rl-nivel { min-height: 190px; }
.rl-nivel-n { font: 800 26px 'Bricolage Grotesque', system-ui, sans-serif; }
.rl-nivel-l { margin-top: 4px; color: #e3d9ff; -webkit-text-fill-color: #e3d9ff; font-size: 14px; }
.rl-nivel:focus, .rl-nivel:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.rl-juego { display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
.rl-wheel { position: relative; flex: none; width: 46%; max-width: 460px; min-width: 240px; margin: 0 4% 12px 0; }
.rl-svg { display: block; width: 100%; height: auto; }
#rlRot { -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.rl-wheel { filter: drop-shadow(0 0 14px rgba(255, 61, 139, 0.45)); }
.rl-pointer { position: absolute; left: 50%; top: -3%; width: 11%; height: 14%; margin-left: -5.5%; z-index: 2; -webkit-transform-origin: 50% 22%; transform-origin: 50% 22%; filter: drop-shadow(0 0 6px #ffe27a); }
.rl-pointer.rl-tic { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); }
.rl-pointer.rl-rebote { -webkit-animation: rl-rebote 0.65s ease-out 1; animation: rl-rebote 0.65s ease-out 1; }
@-webkit-keyframes rl-rebote { 0% { -webkit-transform: rotate(-26deg); } 30% { -webkit-transform: rotate(14deg); } 55% { -webkit-transform: rotate(-8deg); } 80% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(0); } }
@keyframes rl-rebote { 0% { transform: rotate(-26deg); } 30% { transform: rotate(14deg); } 55% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
.rl-bombilla { fill: #ffe27a; }
.rl-b0 { -webkit-animation: rl-bomb 0.9s steps(1) infinite; animation: rl-bomb 0.9s steps(1) infinite; }
.rl-b1 { -webkit-animation: rl-bomb 0.9s steps(1) infinite 0.45s; animation: rl-bomb 0.9s steps(1) infinite 0.45s; }
@-webkit-keyframes rl-bomb { 0% { fill: #fff6c2; } 50% { fill: #b5672a; } 100% { fill: #fff6c2; } }
@keyframes rl-bomb { 0% { fill: #fff6c2; } 50% { fill: #b5672a; } 100% { fill: #fff6c2; } }
.rl-gana { -webkit-animation: rl-gana 0.6s ease-in-out infinite alternate; animation: rl-gana 0.6s ease-in-out infinite alternate; }
@-webkit-keyframes rl-gana { from { opacity: 1; } to { opacity: 0.62; } }
@keyframes rl-gana { from { opacity: 1; } to { opacity: 0.62; } }
.rl-chispas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.rl-chispas i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; opacity: 0; -webkit-animation: rl-chispa 1.2s ease-out 1 forwards; animation: rl-chispa 1.2s ease-out 1 forwards; }
@-webkit-keyframes rl-chispa { 0% { opacity: 1; -webkit-transform: translate(0, 0) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translate(var(--dx, 60px), var(--dy, 60px)) rotate(360deg); } }
@keyframes rl-chispa { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--dx, 60px), var(--dy, 60px)) rotate(360deg); } }
.rl-opts { display: flex; flex-wrap: wrap; margin: 6px 0 4px; }
.rl-opts .check { margin: 0 18px 6px 0; }
@media (prefers-reduced-motion: reduce) { .rl-b0, .rl-b1, .rl-gana, .rl-chispas i, .rl-pointer.rl-rebote { -webkit-animation: none !important; animation: none !important; } }
html.tv-mode .rl-opts .check { font-size: 1.4rem; }
.rl-panel { flex: 1 1 280px; min-width: 0; }
.rl-who { display: flex; align-items: center; margin: 0 0 8px; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); font: 800 24px 'Bricolage Grotesque', system-ui, sans-serif; color: #fff; }
.rl-emoji { margin-right: 10px; font-size: 30px; }
.rl-say { display: flex; align-items: flex-end; margin: 6px 0; }
.rl-stage { height: 110px; min-width: 70px; }
.rl-reto { margin: 8px 0; padding: 10px 14px; border: 2px solid #ff3d8b; border-radius: 16px; background: rgba(255, 61, 139, 0.1); color: #fff; font: 800 20px/1.3 'DM Sans', system-ui, sans-serif; }
.rl-actions { display: flex; flex-wrap: wrap; margin: 8px 0; }
.rl-actions button { flex: 1 1 140px; min-height: 54px; margin: 0 8px 8px 0; border-radius: 27px; font: 800 18px 'DM Sans', system-ui, sans-serif; }
.rl-actions .rl-main { background: #ff3d8b; background-image: linear-gradient(90deg, #ff3d8b, #ff7a45); border: 0; color: #fff; -webkit-text-fill-color: #fff; }
.rl-actions .pass { border: 2px solid #3de0c8; background: rgba(61, 224, 200, 0.12); color: #bff5ec; -webkit-text-fill-color: #bff5ec; }
.rl-actions button:focus, .rl-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rl-players { display: flex; flex-wrap: wrap; margin: 8px 0; }
.rl-chip { margin: 0 6px 6px 0; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #e3d9ff; font-size: 13px; }
.rl-chip.on { border-color: #ff3d8b; background: rgba(255, 61, 139, 0.22); color: #fff; }
html.tv-mode .rl-nivel-n { font-size: 2.2rem; } html.tv-mode .rl-nivel-l { font-size: 1.2rem; } html.tv-mode .rl-nivel { min-height: 9rem; min-height: 38vh; } html.tv-mode .rl-pic { height: 22vh; }
html.tv-mode .rl-who { font-size: 2rem; } html.tv-mode .rl-reto { font-size: 1.6rem; } html.tv-mode .rl-actions button { min-height: 3.4rem; font-size: 1.6rem; }
html.tv-mode .rl-chip { font-size: 1.05rem; } html.tv-mode .rl-wheel { width: 40%; }
@media (max-width: 700px) { .rl-nivel.rl-tarjeta { width: 48%; } .rl-tarjeta .rl-pic { height: 150px; } .rl-pic { height: 100px; } .rl-nivel { min-height: 160px; } .rl-wheel { width: 100%; margin-right: 0; max-width: 320px; margin-left: auto; margin-right: auto; } .rl-nivel { width: 48%; } }

/* Fase 23: en la tele con el tablero en juego, la marca de autoría sube a la esquina de arriba para no tapar los botones de abajo (16 jugadores) */
html.tv-in-game .creator-mark { top: 4px; bottom: auto; right: 8px; }

.rl-resumen { max-width: 820px; margin: 10px 0; }
.rl-resumen .rs-titulo { margin: 4px 0 8px; font: 800 26px 'Bricolage Grotesque', system-ui, sans-serif; }
.rl-resumen .rs-total { margin: 0 0 10px; font-weight: 700; }
.rs-botones { display: flex; flex-wrap: wrap; margin-top: 12px; }
.rs-botones button { flex: 1 1 200px; min-height: 58px; margin: 0 8px 8px 0; border-radius: 29px; font: 800 19px 'DM Sans', system-ui, sans-serif; }
.rs-botones button:focus { outline: 3px solid #fff; outline-offset: 3px; }
html.tv-mode .rl-resumen .rs-titulo { font-size: 2.2rem; } html.tv-mode .rs-botones button { font-size: 1.5rem; min-height: 4rem; }

.timer-row { margin: 8px 0 0; }
.timer-row #btnTimer { display: block; width: 100%; min-height: 52px; border-radius: 26px; border: 2px solid #ffc94d; background: rgba(255, 201, 77, 0.14); color: #ffe9a8; -webkit-text-fill-color: #ffe9a8; font: 800 19px 'DM Sans', system-ui, sans-serif; }
.timer-row #btnTimer:focus, #rlTimer:focus, #vorTimer:focus { outline: 3px solid #fff; outline-offset: 3px; }
#rlTimer, #vorTimer { flex: 1 1 100%; min-height: 54px; margin: 0 8px 8px 0; border: 2px solid #ffc94d; border-radius: 27px; background: rgba(255, 201, 77, 0.14); color: #ffe9a8; -webkit-text-fill-color: #ffe9a8; font: 800 18px 'DM Sans', system-ui, sans-serif; }
html.tv-mode .timer-row #btnTimer, html.tv-mode #rlTimer, html.tv-mode #vorTimer { font-size: 1.5rem; min-height: 3.6rem; }

/* ======================= Verdad o reto (Fase 24) ======================= */
.vor-juego { max-width: 820px; margin-top: 10px; }
.vor-elige { display: flex; flex-wrap: wrap; width: 100%; }
.vor-elige button { flex: 1 1 150px; min-height: 64px; margin: 0 8px 8px 0; border-radius: 32px; font: 800 20px 'DM Sans', system-ui, sans-serif; }
.vor-elige .vor-reto { background: #ff8a3d; background-image: linear-gradient(90deg, #ff8a3d, #ff3d4f); }
.vor-elige button:focus, .vor-elige button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vor-carta { display: block; font-size: 22px; line-height: 1.35; }
.vor-carta span { display: block; }
.vor-chupito { display: inline-block; margin: 0 0 8px; padding: 4px 14px; border-radius: 999px; background: #ffc94d; color: #2a1740; -webkit-text-fill-color: #2a1740; font: 800 16px 'DM Sans', system-ui, sans-serif; letter-spacing: 0.02em; }
.vor-etiqueta { display: inline-block; margin: 0 0 8px; padding: 4px 14px; border-radius: 999px; background: #ff3d4f; color: #fff; -webkit-text-fill-color: #fff; font: 800 16px 'DM Sans', system-ui, sans-serif; }
.vor-texto { font-weight: 700; }
.vor-pie { display: flex; flex-wrap: wrap; margin-top: 8px; }
.vor-pie button { margin: 0 8px 8px 0; }
#rlFin { margin-left: 6px; }
html.tv-mode .vor-carta { font-size: 1.7rem; } html.tv-mode .vor-elige button { font-size: 1.6rem; min-height: 5rem; }
html.tv-mode .vor-chupito, html.tv-mode .vor-etiqueta { font-size: 1.3rem; }

/* Fase 25: el subtítulo negro de la voz tapaba la lista de jugadores en la tele. Piñita ya enseña el mismo texto en su bocadillo, así que el subtítulo
   solo sale en modo avanzado y, en la tele, en una franja fija ARRIBA que no tapa tablero, jugadores ni botones. */
html:not(.adv-mode) .speech-caption { display: none !important; }
html.tv-mode.adv-mode .speech-caption { top: 0.5rem; bottom: auto; left: 50%; max-width: 46vw; padding: 0.3em 0.8em; font-size: 1.3rem; border-radius: 0.8rem; }