/* Teléfonos: impide que Safari/Chrome agranden el texto por su cuenta (rompe el escenario escalado). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Maquetación del flujo (main.js): marcador fijo, paneles de apuesta/respuesta y revelación.
   Solo usa los tokens --se-* de theme.css. Prefijo propio: .g- */

/* ---------- marcador inferior ---------- */
.g-scoreboard {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  height: 290px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #1A0B3BCC 45%);
}
.g-scoreboard > * { pointer-events: auto; }

/* ---------- botón "siguiente" con texto ---------- */
.btn-next {
  width: auto;
  gap: 18px;
  padding: 16px 30px 16px 38px;
}
.btn-next__label { font-family: var(--se-font-title); font-size: 34px; white-space: nowrap; }
.btn-next__icon { width: 64px !important; }
.has-scoreboard .screen .btn-next { bottom: 300px; right: 60px; }
.btn-next.anim-pulse { animation: se-pulse 1s ease-in-out infinite; }

/* ---------- textos auxiliares ---------- */
.g-keys { position: absolute; bottom: 58px; font-size: 22px; opacity: .7; }
.g-hl { color: var(--se-yellow); text-shadow: 0 6px 0 var(--se-ink); }
.g-deco--br { right: 40px; bottom: 90px; width: 250px; rotate: 18deg; }
.g-deco--gavel { top: 560px; right: 300px; width: 190px; rotate: -18deg; }
.g-deco--moneybag { top: 140px; left: 120px; width: 240px; rotate: -10deg; }

/* ---------- configuración ---------- */
.g-chips { display: flex; flex-wrap: wrap; gap: 14px; }
.g-chips .chip { min-width: 84px; min-height: 62px; font-size: 30px; }
.g-chips .chip[aria-pressed='true'] { background: var(--se-ok); }
.g-check input { width: 38px !important; min-height: 38px !important; height: 38px; accent-color: var(--se-ok); box-shadow: none !important; }

/* ---------- pregunta ---------- */
.has-scoreboard .screen--question { padding-bottom: 300px; gap: 16px; }
.screen--question .q-text { font-size: 42px; min-height: 2.4em; }
.screen--question .q-option { min-height: 92px; padding-top: 14px; padding-bottom: 14px; font-size: 32px; }
.screen--question .q-options { gap: 16px; margin-top: 4px; }
.screen--question.is-allin { background: var(--se-yellow); }
.screen--question.is-allin .q-number { color: var(--se-ink); background: var(--se-gold); }

/* barrido de suspense antes de revelar */
.q-option.is-scanning {
  border-color: var(--se-ink);
  color: var(--se-ink);
  background: var(--se-yellow);
  box-shadow: 0 8px 0 var(--se-ink), 0 0 40px #FFE84DAA;
  transform: scale(1.02);
}
.q-option.is-scanning .q-option__letter { background: var(--se-white); }

/* ---------- panel de apuestas / respuestas (encima de las opciones) ---------- */
.q-panel:empty { display: none; }
.is-betting .q-panel,
.is-answering .q-panel {
  position: absolute;
  z-index: 5;
  top: 226px;
  right: 110px;
  bottom: 404px;
  left: 110px;
  display: flex;
  align-items: stretch;
}
.is-betting .q-options, .is-answering .q-options { opacity: .25; filter: blur(2px); transition: opacity .3s, filter .3s; }
.q-panel .bet-panel {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 0 34px;
  width: 100%;
  overflow: hidden;
  border-width: 4px;
  border-color: var(--se-yellow);
  box-shadow: 0 12px 0 var(--se-ink), 0 0 60px #1A0B3B66;
}
.bet-panel__title {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--se-yellow);
  font-family: var(--se-font-title);
  font-size: 34px;
  font-weight: 400;
  text-align: center;
}
.q-panel .bet-row { flex-wrap: nowrap; gap: 12px; padding: 7px 0; border-top: 2px solid #FFFFFF26; }
.q-panel .bet-row .team-tag { flex: 0 1 260px; min-width: 0; margin-right: 0; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-row__money { flex: 0 0 auto; min-width: 104px; color: var(--se-cyan); font-family: var(--se-font-title); font-size: 30px; }
.answer-row .bet-row__money { min-width: 180px; font-family: var(--se-font-body); font-size: 24px; }
.bet-row__chips { display: flex; flex: 1; gap: 10px; justify-content: flex-end; }
.q-panel .chip { min-width: 96px; min-height: 52px; padding: 6px 16px; font-size: 26px; }
.chip--reset { color: var(--se-white); background: var(--se-purple-light); border-style: solid; }
.bet-row__amount {
  flex: 0 0 150px;
  padding: 6px 12px;
  border-radius: 16px;
  color: var(--se-ink);
  background: var(--se-white);
  font-family: var(--se-font-title);
  font-size: 34px;
  text-align: center;
}
.bet-row__amount.is-empty { color: #6A607A; font-family: var(--se-font-body); font-size: 20px; }
.bet-row__note { flex: 1; color: var(--se-bad); font-size: 26px; text-align: right; }
.bet-row.is-bankrupt { opacity: .55; }

/* Respuestas en secreto: al bloquear, todos los botones se ven iguales para el público. */
.answer-row__btn { min-width: 84px !important; background: var(--se-cyan); }
.answer-row.is-locked .answer-row__btn { opacity: .45; background: var(--se-white); }
.answer-row__status { flex: 0 0 210px; font-size: 22px; text-align: right; opacity: .8; }
.answer-row.is-locked .answer-row__status { color: var(--se-ok); font-weight: 700; opacity: 1; }

/* ---------- revelación ---------- */
.is-revealing .q-panel { position: relative; z-index: 3; }
.reveal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 30px;
  border: 4px solid var(--se-purple-dark);
  border-radius: var(--se-radius);
  color: var(--se-white);
  background: var(--se-purple-dark);
  box-shadow: var(--se-shadow);
}
.reveal__answer { font-size: 32px; }
.reveal__answer strong { color: var(--se-ok); }
.reveal__explain { color: var(--se-cyan); font-size: 28px; }
.reveal__deltas { display: flex; flex-wrap: wrap; gap: 12px; }
.reveal__delta {
  padding: 6px 18px;
  border: 3px solid var(--se-ink);
  border-radius: var(--se-radius-pill);
  color: var(--se-ink);
  background: var(--team-color, var(--se-cyan));
  font-family: var(--se-font-title);
  font-size: 26px;
}
.reveal__delta.is-up::after { content: ' ▲'; color: #075C42; }
.reveal__delta.is-down::after { content: ' ▼'; color: #900B38; }

/* ---------- mini-juego y podio ocupan todo el escenario ---------- */
.screen--word { padding: 0; }
.screen--word::after { display: none; }
.word-host { position: absolute; inset: 0; }
.screen--podium { padding: 40px 60px 40px; }
.podium-host { position: relative; flex: 1; width: 100%; min-height: 0; }
.screen--podium .btn-next { bottom: 50px; }

@media (prefers-reduced-motion: reduce) {
  .btn-next.anim-pulse { animation: none; }
  .is-betting .q-options, .is-answering .q-options { filter: none; transition: none; }
}

/* ---------- detalles ---------- */
.hud > span:empty:not(.hud__spacer) { display: none; }
.is-revealing .timer { opacity: 0; transition: opacity .4s; }

/* =====================================================================
   MÓVILES
   - #stage.is-touch: pantallas táctiles (botones más grandes).
   - #stage.is-portrait: escenario vertical 1080 × 1920 (main.js cambia el tamaño).
   ===================================================================== */
html, body { overscroll-behavior: none; }
body.se-app { height: 100dvh; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
body.se-app input { -webkit-user-select: text; user-select: text; }

/* Táctil: objetivos de toque más grandes */
.is-touch .q-panel .chip { min-height: 68px; min-width: 104px; font-size: 30px; }
.is-touch .answer-row__btn { min-width: 116px !important; }
.is-touch .q-panel .bet-row { padding: 5px 0; }
.is-touch .hud__btn { min-width: 84px; min-height: 72px; }
.is-touch:not(.is-portrait) .is-betting .q-panel,
.is-touch:not(.is-portrait) .is-answering .q-panel { top: 196px; bottom: 396px; }

/* ---------- vertical: base ---------- */
.is-portrait .screen { padding: 150px 64px 150px; gap: 44px; }
.is-portrait .title-xl { font-size: 124px; }
.is-portrait .title-lg { font-size: 92px; }
.is-portrait .subtitle { font-size: 40px; }
.is-portrait .btn--big { font-size: 46px; min-height: 120px; }
.is-portrait .btn-next { right: 50%; translate: 50% 0; bottom: 110px; }
.is-portrait .hud { left: 40px; right: 40px; }
.is-portrait .deco--piggy { width: 300px; top: 150px; right: 30px; }
.is-portrait .deco--coins { width: 300px; bottom: 120px; left: 20px; }
.is-portrait .deco--bills { width: 230px; top: 150px; left: 30px; }

/* portada */
.is-portrait .screen--cover { gap: 70px; }
.is-portrait .screen--cover > header { width: 100%; gap: 60px; }
.is-portrait .screen--cover .title-xl { gap: 34px; margin-top: 140px; }
.is-portrait .screen--cover .title-xl .pill:first-child { transform: rotate(-6deg) translateX(-40px); padding-left: 70px; padding-right: 70px; }
.is-portrait .screen--cover .title-xl .pill:nth-child(2) { transform: rotate(3deg) translateX(20px); padding-left: 44px; padding-right: 44px; }
.is-portrait .screen--cover > footer { flex-direction: column; }
.is-portrait .screen--cover .deco--piggy { top: 170px; right: 30px; width: 300px; }
.is-portrait .screen--cover .deco--coins { bottom: 140px; left: 30px; width: 320px; }
.is-portrait .screen--cover .deco--bills { top: 200px; left: 30px; width: 240px; }
.is-portrait .g-deco--br { right: 30px; bottom: 170px; width: 240px; }
.is-portrait .g-deco--gavel { top: auto; bottom: 520px; right: 60px; width: 170px; }
.is-portrait .g-keys { display: none; }

/* reglas */
.is-portrait .screen--rules { padding-left: 70px; padding-right: 70px; }
.is-portrait .screen--rules > p { font-size: 52px; }
.is-portrait .screen--rules > aside { font-size: 40px; }
.is-portrait .screen--rules .deco--piggy { top: auto; bottom: 330px; right: 30px; width: 260px; }

/* cantidades: columnas apiladas */
.is-portrait .screen--bets .title-lg { font-size: 84px; }
.is-portrait .screen--bets > .bet-panel { grid-template-columns: 1fr; gap: 34px; }
.is-portrait .screen--bets .bet-panel > article { flex-direction: row; justify-content: space-between; min-height: 0; padding: 30px 46px; gap: 30px; }
.is-portrait .screen--bets .bet-panel > article:nth-child(2) { transform: rotate(-2deg); }
.is-portrait .screen--bets .bet-panel h3 { flex: 1; font-size: 44px; text-align: left; }
.is-portrait .screen--bets .bet-panel img { width: 150px; height: 130px; }
.is-portrait .screen--bets .chip { min-width: 220px; min-height: 120px; font-size: 64px; }

/* regla de tiempo */
.is-portrait .screen--timer-rule .title-lg { font-size: 84px; }
.is-portrait .screen--timer-rule .deco--bills { top: 200px; left: 30px; }
.is-portrait .screen--timer-rule .deco--piggy { top: auto; bottom: 260px; right: 40px; }

/* configuración */
.is-portrait .g-chips .chip { min-width: 110px; min-height: 80px; font-size: 36px; }

/* pregunta */
.is-portrait .g-scoreboard { height: 330px; }
.is-portrait.has-scoreboard .screen--question { padding: 150px 56px 350px; gap: 26px; }
.is-portrait .screen--question > .timer { top: 140px; right: 56px; }
.is-portrait .screen--question .q-text { font-size: 50px; max-width: 100%; margin-top: 40px; }
.is-portrait .screen--question .q-option { min-height: 130px; font-size: 38px; border-radius: 56px; }
.is-portrait .screen--question .q-options { gap: 26px; }
.is-portrait.has-scoreboard .screen .btn-next { bottom: 360px; right: 56px; translate: none; }
.is-portrait .is-betting .q-panel,
.is-portrait .is-answering .q-panel { top: 280px; right: 40px; bottom: 480px; left: 40px; }
.is-portrait .q-panel .bet-row { flex-wrap: wrap; row-gap: 12px; padding: 14px 0; }
.is-portrait .q-panel .bet-row .team-tag { flex: 1 1 auto; max-width: 560px; font-size: 32px; }
.is-portrait .q-panel .bet-row__chips { order: 3; flex: 1 1 100%; justify-content: space-between; }
.is-portrait .q-panel .chip { flex: 1; min-height: 78px; font-size: 32px; }
.is-portrait .answer-row__status { order: 2; flex: 0 0 auto; }
.is-portrait .reveal__answer { font-size: 38px; }
.is-portrait .reveal__explain { font-size: 34px; }

/* final y cierre */
.is-portrait .screen--allin .title-xl { font-size: 200px; }
.is-portrait .screen--allin .deco--bills { top: 200px; right: 20px; width: 260px; }
.is-portrait .g-deco--moneybag { top: 200px; left: 40px; width: 220px; }
.is-portrait .screen--thanks .title-xl { font-size: 110px; }
.is-portrait .screen--thanks > footer { flex-direction: column; }
.is-portrait .screen--podium .btn-next { bottom: 60px; }

/* juego de palabras: unidades a lo ancho del vertical */
.is-portrait .wg { --u: calc(100cqw / 1720); }
.is-portrait .wg__inner { padding: 150px 24px 60px; justify-content: space-around; }
.is-portrait .wg-header, .is-portrait .wg-result { zoom: 1.5; }
.is-portrait .wg-status { zoom: 1.6; flex-wrap: wrap; justify-content: center; }
.is-portrait .wg-teams { zoom: 1.7; flex-wrap: wrap; justify-content: center; }
.is-portrait .wg-controls { zoom: 1.8; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   HASTA 8 EQUIPOS + RENOMBRAR
   ===================================================================== */
:root { --se-team-7: #A3A9FF; --se-team-8: #F5D49A; }

/* configuración: filas con botón quitar y botón agregar */
.g-remove-team {
  flex: 0 0 56px; height: 56px; border: 3px solid var(--se-ink); border-radius: 50%;
  color: var(--se-white); background: var(--se-bad); box-shadow: 0 4px 0 var(--se-ink);
  font-size: 24px; font-weight: 700; line-height: 1;
}
.g-remove-team:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--se-ink); }

/* paneles de apuestas/respuestas: compactos con 6+ equipos y con desplazamiento de seguridad */
.q-panel .bet-panel { overflow-y: auto; overscroll-behavior: contain; }
.q-panel .bet-panel:has(.bet-row:nth-of-type(6)) .bet-row { padding: 3px 0; }
.q-panel .bet-panel:has(.bet-row:nth-of-type(6)) .chip { min-height: 46px; font-size: 24px; }
.q-panel .bet-panel:has(.bet-row:nth-of-type(6)) .team-tag { min-height: 46px; font-size: 22px; padding-block: 4px; }
.q-panel .bet-panel:has(.bet-row:nth-of-type(6)) .bet-row__amount { font-size: 28px; }
.is-betting .q-panel:has(.bet-row:nth-of-type(6)),
.is-answering .q-panel:has(.bet-row:nth-of-type(6)) { top: 190px; bottom: 396px; }
.is-portrait .is-betting .q-panel:has(.bet-row:nth-of-type(6)),
.is-portrait .is-answering .q-panel:has(.bet-row:nth-of-type(6)) { top: 250px; bottom: 460px; }
.is-portrait .q-panel .bet-panel:has(.bet-row:nth-of-type(6)) .bet-row { padding: 6px 0; row-gap: 6px; }
.is-portrait .q-panel .bet-panel:has(.bet-row:nth-of-type(6)) .chip { min-height: 58px; }

/* marcador con 7 u 8 atriles */
.sb-board[data-count="7"], .sb-board[data-count="8"] { gap: 10px; padding-inline: 16px; }
.sb-board[data-count="7"] .sb-team__money, .sb-board[data-count="8"] .sb-team__money { font-size: 38px; }
.sb-board[data-count="7"] .sb-team__name, .sb-board[data-count="8"] .sb-team__name { font-size: 19px; }
.is-portrait .sb-board { gap: 8px; padding-inline: 10px; }
.is-portrait .sb-board[data-count="5"] .sb-team__money, .is-portrait .sb-board[data-count="6"] .sb-team__money { font-size: 34px; }
.is-portrait .sb-board[data-count="7"] .sb-team__money, .is-portrait .sb-board[data-count="8"] .sb-team__money { font-size: 27px; }
.is-portrait .sb-board[data-count="7"] .sb-team__name, .is-portrait .sb-board[data-count="8"] .sb-team__name { font-size: 15px; }

/* Sala de espera: las tarjetas no se estiran cuando hay pocos equipos */
.lobby__teams, #stage.is-portrait .lobby__teams { grid-auto-rows: minmax(120px, auto); }
.lobby__remove { position: absolute; top: 12px; right: 12px; }

/* =====================================================================
   VERTICAL EN TELÉFONO: el escenario mide 1080 de ancho (≈0.3–0.4 px reales por px),
   así que todo lo táctil se agranda para quedar ≥ ~40 px reales.
   ===================================================================== */
.is-portrait .hud { top: 34px; gap: 18px; }
.is-portrait .hud > span:not(.hud__spacer) { font-size: 34px; padding: 12px 26px; }
.is-portrait .hud__btn { min-width: 112px; min-height: 104px; font-size: 44px; }
.is-portrait .btn { min-height: 120px; font-size: 44px; padding: 20px 46px; }
.is-portrait .btn--big { min-height: 150px; font-size: 54px; }
.is-portrait .btn-next { min-height: 120px; padding: 20px 36px 20px 48px; }
.is-portrait .btn-next__label { font-size: 46px; }
.is-portrait .btn-next__icon { width: 80px !important; }
.is-portrait .g-join-link { font-size: 38px; min-height: 104px; text-decoration: none; }
.g-join-link { text-decoration: none; }

/* portada */
.is-portrait .screen--cover .subtitle { font-size: 44px; }
.is-portrait .screen--cover > footer { gap: 30px; width: 100%; }
.is-portrait .screen--cover > footer .btn { width: 100%; max-width: 900px; }

/* configuración */
.is-portrait .g-chips .chip { min-width: 150px; min-height: 104px; font-size: 44px; }
.is-portrait .g-check input { width: 60px !important; height: 60px; min-height: 60px !important; }
.is-portrait .g-remove-team { flex-basis: 84px; height: 84px; font-size: 36px; }

/* pregunta */
.is-portrait .screen--question .q-number { font-size: 64px; }
.is-portrait .screen--question > .timer { width: 200px; height: 200px; font-size: 88px; }
.is-portrait .screen--question .q-text { font-size: 60px; margin-top: 70px; }
.is-portrait .screen--question .q-option { min-height: 170px; font-size: 48px; gap: 30px; }
.is-portrait .screen--question .q-option__letter { flex-basis: 96px; width: 96px; height: 96px; font-size: 56px; }

/* apuestas / respuestas: filas grandes */
.is-portrait .bet-panel__title { font-size: 46px; }
.is-portrait .q-panel .bet-row .team-tag { font-size: 40px; min-height: 80px; }
.is-portrait .bet-row__money { font-size: 40px; }
.is-portrait .bet-row__amount { flex-basis: 220px; font-size: 48px; }
.is-portrait .q-panel .chip { min-height: 110px; font-size: 42px; }
.is-portrait .answer-row__btn { min-height: 110px; font-size: 52px; }
.is-portrait .answer-row__status, .is-portrait .answer-row .bet-row__money { font-size: 32px; }
.is-portrait .q-panel .bet-panel:has(.bet-row:nth-of-type(6)) .chip { min-height: 90px; font-size: 36px; }

/* revelación */
.is-portrait .reveal__answer { font-size: 48px; }
.is-portrait .reveal__explain { font-size: 42px; }
.is-portrait .reveal__delta { font-size: 36px; }

/* marcador y diálogo */
.is-portrait .g-scoreboard { height: 360px; }
.is-portrait.has-scoreboard .screen--question { padding-bottom: 380px; }
.is-portrait.has-scoreboard .screen .btn-next { bottom: 390px; }

/* ajustes finos en vertical */
.is-portrait .hud > span:not(.hud__spacer) { white-space: nowrap; font-size: 30px; padding: 10px 22px; }
.is-portrait .hud__live { display: none; }
.is-portrait.has-scoreboard .screen--question { padding-top: 200px; }
.is-portrait .screen--question > .timer { top: 190px; }
.is-portrait .is-betting .q-panel,
.is-portrait .is-answering .q-panel { top: 300px; bottom: 540px; }
.is-portrait .is-betting .q-panel:has(.bet-row:nth-of-type(6)),
.is-portrait .is-answering .q-panel:has(.bet-row:nth-of-type(6)) { top: 290px; bottom: 540px; }
.is-portrait .screen--cover .deco--piggy { top: 120px; width: 250px; }
.is-portrait .screen--cover > header > .subtitle:first-child { margin-top: 120px; }


/* Presentador en vivo: el panel solo muestra el estado de cada equipo (deciden en su celular) */
.bet-panel.is-live .bet-row__chips { display: none; }
.bet-row__live { flex: 0 0 auto; min-width: 240px; color: var(--se-cyan); font-size: 26px; font-weight: 600; text-align: right; }
.bet-row.is-live-locked .bet-row__live { color: var(--se-ok); }
.bet-panel.is-live .answer-row__status { flex: 1; font-size: 26px; }
.bet-panel.is-live .bet-row { min-height: 64px; }
.is-portrait .bet-row__live, .is-portrait .bet-panel.is-live .answer-row__status { font-size: 36px; }
.is-portrait .bet-panel.is-live .bet-row { flex-wrap: nowrap; }
/* Palabra Relámpago: los equipos adivinan desde el celular */
.screen--word .wg-teams { display: none; }
.g-host-btn, .g-join-link { min-width: 640px; }
.is-portrait .g-host-btn, .is-portrait .g-join-link { min-width: 0; }