/* ============================================================
   SAPIENS — style.css
   Identidad: "NOCHE DORADA" — base negra cálida, oro vivo y un
   turquesa luminoso en los elementos interactivos.
   Comparte mundo con contenido.css (oscuro + dorado) pero sube
   la intensidad: fondo más profundo y más cálido, oro más
   saturado y contrastes más marcados. Al entrar al juego se
   nota que estás en otro sitio.
   (La paleta vive en :root — todo el CSS bebe de estas variables.
   Los nombres antiguos —paper, ink, wood, banana— se conservan
   para no romper las 500+ referencias var() del archivo, pero su
   significado está invertido: paper = superficie oscura,
   ink = texto claro.)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Superficies: negro cálido, de más profundo a más elevado ── */
  --paper:      #100c08;   /* superficie base */
  --paper-2:    #1b1510;   /* superficie elevada */
  --paper-3:    #251d14;   /* insets, barras, huecos */
  --card:       #16110b;   /* tarjetas y modales */
  --ink:        #f7edd4;   /* texto principal (claro) */
  --ink-soft:   #cdbc95;
  --ink-dim:    #94856b;
  --rule:       rgba(240,180,41,0.16);   /* bordes tintados en oro */
  --rule-md:    rgba(240,180,41,0.34);

  /* ── Acentos ── */
  --cobalt:     #f0b429;   /* oro vivo: acento principal y acciones */
  --cobalt-dim: #8a5c10;   /* oro profundo: relieve y estado pulsado */
  --coral:      #ff5a3c;   /* peligro */
  --coral-dim:  #c03318;
  --moss:       #3ddc84;   /* acierto */
  --gold:       #f0b429;   /* oro vivo (identidad) */
  --gold-soft:  #ffd75e;   /* oro luminoso (highlights) */
  --gold-title-variant: #debb52; /* --gold-soft con ~13% menos luminosidad: mismo dorado, visiblemente distinto — solo para el bloque de título de portada */
  --silver:     #9a927f;
  --silver-dim: #6f6858;
  --lila-tenue: #b5a2c7;   /* texto secundario sobre el ciruela de El Farol */

  /* ── Relieve y acento neón ──
     El acento interactivo es el morado del cerebro del logo,
     muestreado del propio logo.png (tono 294°): --hoja para
     rellenos, bordes y anillos; --neon-rosa para texto y halos,
     que necesita más contraste (7,8:1 sobre el fondo frente a
     los 4,3:1 del tono base). */
  --wood:       #6b4a12;
  --wood-dark:  #050302;   /* sombra dura: más negra que el fondo */
  --hoja:       #BE33CA;   /* morado neón: foco, bordes, estados vivos */
  --banana:     #ffd75e;

  /* ── Sapiens — identidad visual ── */
  --bg-crema:   #0a0705;   /* fondo global: negro cálido profundo */
  --neon-rosa:  #E37BE6;   /* morado neón luminoso: texto y halos */
  --neon-glow:  0 0 12px rgba(240,180,41,0.55), 0 0 28px rgba(240,180,41,0.25);

  /* Compatibilidad con nombres usados en otras partes del CSS */
  --bg-0:       var(--bg-crema);
  --bg-1:       var(--card);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--paper-3);
  --accent:     var(--cobalt);
  --accent-dim: var(--cobalt-dim);
  --danger:     var(--coral);
  --danger-dim: var(--coral-dim);
  --success:    var(--moss);
  --warn:       var(--gold);
  --text-pri:   var(--ink);
  --text-sec:   var(--ink-soft);
  --text-dim:   var(--ink-dim);
  --border:     var(--rule);
  --border-md:  var(--rule-md);
  /* OJO: --purple ya NO es morado. El morado pasó a ser el acento
     global (--hoja), así que Camufla tu Cultura hereda el turquesa
     que aquel dejó libre. Se conserva el nombre para no romper las
     referencias existentes, igual que --paper o --ink. */
  --purple:     #35e0c0;   /* Camufla tu Cultura — turquesa */
  --cyan:       var(--cobalt);
  --orange:     var(--coral);

  --font-head:  'Fraunces', Georgia, serif;
  --font-body:  'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --trans:      all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-crema);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Textura muy tenue: grano dorado casi imperceptible + halo cálido
   arriba. Sustituye a la antigua textura de papel. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 130% 75% at 50% -10%, rgba(240,180,41,0.07) 0%, transparent 62%),
    radial-gradient(rgba(240,180,41,0.05) 0.6px, transparent 0.6px);
  background-size: 100% 100%, 15px 15px;
  opacity: 0.85;
}

/* ═══ SCREENS ═══════════════════════════════════════════════ */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: translateY(12px);
}
.screen.active { opacity: 1; pointer-events: all; transform: translateY(0); }
.screen.hidden { display: none !important; }

/* ═══ HOME ══════════════════════════════════════════════════ */
#screen-home {
  /* El fondo lo pone el bloque "FONDOS DEL HOME" del final del
     archivo (antes eran las ilustraciones de selva). */
  background: transparent;
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
.home-bg-grid {
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% 38px;
  opacity: 0.22;
}
.home-bg-grid::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(240,180,41,0.07) 0%, transparent 70%);
}
/* .home-content es hijo en flujo de .screen, que es un contenedor flex
   en columna con ALTURA DEFINIDA (position:fixed; inset:0). Aquí vivía
   un `min-height: 100%` que costó caro: todo elemento flex tiene por
   defecto `min-height: auto`, que resuelve al tamaño mínimo automático
   basado en el contenido, y es lo único que impide que el flex lo
   encoja por debajo de lo que mide. Un min-height explícito SUSTITUYE
   ese auto y desactiva la protección: el panel quedaba clavado en el
   100 % de la ventana y las tarjetas sobrantes se pintaban FUERA de su
   caja, encima del pie. De ahí el `margin-top` mágico del pie, que
   creció de 2,5rem a 14rem tarjeta a tarjeta sin llegar nunca.

   `flex: 1 0 auto` hace las dos cosas que se necesitaban:
     · grow 1   → llena la pantalla cuando sobra sitio, así los
                  auto-márgenes que centran #menu-main siguen valiendo;
     · shrink 0 → no se encoge JAMÁS por debajo de su contenido, así que
                  el pie va detrás y lo empuja hacia abajo él solo.
   No devolver aquí ningún min-height en % ni en vh: _layout.js falla. */
.home-content {
  position: relative;
  padding: 2.25rem 1.5rem 2rem;
  display: flex; flex-direction: column;
  gap: 1.75rem;
  flex: 1 0 auto;
  width: 100%; max-width: 480px; margin: 0 auto;   /* centrado simétrico en móvil y portátil */
}

/* ── Bloque de título: ficha de concurso con sello ── */
.home-title-block {
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 0.12rem;
  padding-top: 0.5rem;
}

/* ── Logo cuadrado estilo icono de app — pantalla de inicio ── */
.home-logo-wrap {
  width: 280px;
  height: 280px;
  max-width: 70vw;
  max-height: 70vw;
  margin: 0 auto 0.6rem;
  border-radius: 56px;
  overflow: hidden;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.55),
    0 0 0 1px var(--rule);
  flex-shrink: 0;
}
.home-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-title-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.34em;
  color: var(--gold); font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.home-title-main {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.8rem, 8vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);   /* relieve sutil sobre el fondo oscuro */
  white-space: nowrap;
}
.home-title-sub {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  margin-top: 0.2rem;
}

/* ── Acciones ── */
.home-actions { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Contenedor botón + hint ── */
.home-btn-group { display: flex; flex-direction: column; gap: 0.4rem; }

/* ── Texto de ayuda bajo cada botón ── */
.btn-hint {
  font-size: 0.71rem;
  color: var(--text-sec);
  font-weight: 300;
  line-height: 1.4;
  padding: 0 0.2rem;
}
.btn-hint--center { text-align: center; padding: 0; }

/* ── Reglas ── */
.home-rules { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.25rem; margin-top: auto; }
.rule-item  { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--ink-soft); font-weight: 500; }
.rule-dot   { width: 5px; height: 5px; border-radius: 50%; background: var(--cobalt); flex-shrink: 0; opacity: 0.7; }

/* ═══ BUTTONS ═══════════════════════════════════════════════ */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 1rem 1.5rem;
  background: var(--cobalt); color: #14100a;
  border: none; border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  cursor: pointer; transition: var(--trans); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 0 var(--cobalt-dim);
}
.btn-primary:active { transform: translateY(1px) scale(0.99); background: var(--cobalt-dim); box-shadow: none; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 1rem 1.5rem;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--rule-md); border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: var(--trans); -webkit-tap-highlight-color: transparent;
}
.btn-secondary:active { transform: scale(0.97); background: var(--paper-2); }
.btn-icon  { font-size: 1.1rem; line-height: 1; }
.btn-small { padding: 0.75rem 1.25rem; font-size: 0.875rem; }

/* ═══ MODAL ═════════════════════════════════════════════════ */
/* Entrada Y salida: se pasa de un simple display:none a una
   transición real, así que la tarjeta se desliza también al cerrar,
   no solo al abrir. El modal se queda montado en el DOM en reposo
   (barato: es position:fixed, no mueve nada alrededor) y se apaga
   con opacity + visibility, no con display. */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; z-index: 100;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  opacity: 1;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}
.modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.modal-card {
  width: 100%; background: var(--bg-1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-top: 1px solid var(--border-md);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.modal-overlay.hidden .modal-card { transform: translateY(100%); }
.modal-title    { font-family: var(--font-head); font-size: 1.8rem; color: var(--text-pri); }
.input-group    { display: flex; flex-direction: column; gap: 0.4rem; }
.input-label    { font-size: 0.75rem; font-weight: 500; color: var(--text-sec); letter-spacing: 0.1em; text-transform: uppercase; }
.game-input     { width: 100%; padding: 0.875rem 1rem; background: var(--bg-2); border: 1px solid var(--border-md); border-radius: var(--radius-sm); color: var(--text-pri); font-family: var(--font-body); font-size: 1rem; font-weight: 500; outline: none; transition: border-color 0.2s ease; -webkit-appearance: none; }
.game-input:focus { border-color: var(--accent); }
.game-input::placeholder { color: var(--text-dim); }
.modal-actions  { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

/* ═══ LOBBY ═════════════════════════════════════════════════ */
#screen-lobby { background: var(--bg-0); }
.lobby-header {
  background: var(--bg-1); border-bottom: 1px solid var(--border);
  padding: 2rem 1.75rem 1.5rem;
  padding-top: calc(2rem + env(safe-area-inset-top, 0));
  text-align: center; flex-shrink: 0;
}
.lobby-tag  { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; color: var(--text-sec); text-transform: uppercase; margin-bottom: 0.3rem; }
.lobby-code { font-family: var(--font-head); font-size: 3.5rem; letter-spacing: 0.15em; color: var(--accent); line-height: 1; }
.lobby-hint { font-size: 0.8rem; color: var(--text-sec); margin-top: 0.4rem; }
.players-list { flex: 1; padding: 1.25rem 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; }
.player-slot {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 1.125rem;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  animation: fadeIn 0.25s ease both;
}
.player-slot.empty { opacity: 0.3; border-style: dashed; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.player-avatar   { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--accent); flex-shrink: 0; border: 1.5px solid var(--border-md); }
.player-name     { font-weight: 500; font-size: 0.95rem; color: var(--text-pri); }
.player-hp-mini  { margin-left: auto; font-size: 0.8rem; color: var(--success); font-weight: 500; }
.player-tag-host { font-size: 0.65rem; letter-spacing: 0.12em; background: rgba(240,180,41,0.14); color: var(--accent); padding: 2px 7px; border-radius: 4px; text-transform: uppercase; }
.lobby-footer    { padding: 1.25rem 1.75rem calc(1.5rem + env(safe-area-inset-bottom,0)); background: var(--bg-1); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.75rem; flex-shrink: 0; }
.player-count    { font-size: 0.8rem; color: var(--text-sec); text-align: center; }

/* ═══ GAME SCREEN ═══════════════════════════════════════════ */
#screen-game { background: var(--bg-0); padding-top: env(safe-area-inset-top, 0); }

.game-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 0.75rem; flex-shrink: 0;
}
.round-badge  { display: flex; flex-direction: column; align-items: flex-start; }
.round-label  { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--text-sec); text-transform: uppercase; font-weight: 500; }
.round-num    { font-family: var(--font-head); font-size: 2rem; color: var(--text-pri); line-height: 1; }

/* Cronómetro circular */
.timer-ring-wrap { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.timer-svg       { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer-bg        { fill: none; stroke: var(--bg-3); stroke-width: 4; }
.timer-arc       { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.3s ease; }
.timer-arc.danger  { stroke: var(--danger); }
.timer-arc.warning { stroke: var(--warn); }
.timer-num         { position: relative; font-family: var(--font-head); font-size: 1.3rem; color: var(--text-pri); line-height: 1; }
.timer-num.danger  { color: var(--danger); }

/* Display de vida propia */
.hp-display { display: flex; flex-direction: column; align-items: flex-end; }
.hp-label   { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--text-sec); text-transform: uppercase; font-weight: 500; }
.hp-value   { font-family: var(--font-head); font-size: 2rem; color: var(--success); line-height: 1; transition: color 0.5s ease; }
.hp-value.low  { color: var(--danger); }
.hp-value.warn { color: var(--warn); }

/* Barra de HP propia */
.hp-bar-wrap { height: 3px; background: var(--bg-3); flex-shrink: 0; }
.hp-bar {
  height: 100%;
  background: var(--success);
  transition: width 1.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease;
  border-radius: 0 2px 2px 0;
}
.hp-bar.warn { background: var(--warn); }
.hp-bar.low  { background: var(--danger); }

/* Panel de pregunta */
#question-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.question-category { padding: 1.25rem 1.5rem 0.25rem; font-size: 0.65rem; letter-spacing: 0.25em; font-weight: 600; color: var(--accent); text-transform: uppercase; flex-shrink: 0; }
.question-card     { margin: 0 1.25rem; padding: 1.25rem 1.375rem; background: var(--bg-1); border: 1px solid var(--border-md); border-radius: var(--radius-md); flex-shrink: 0; }
.question-text     { font-size: 1.05rem; font-weight: 400; line-height: 1.55; color: var(--text-pri); }

/* Slider */
.slider-section       { padding: 1.5rem 1.5rem 0.5rem; display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; }
.slider-value-display { font-family: var(--font-head); font-size: 3.5rem; color: var(--accent); text-align: center; line-height: 1; letter-spacing: 0.03em; transition: color 0.15s ease; }
.slider-wrap          { display: flex; align-items: center; gap: 0.75rem; }
.slider-bound         { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; min-width: 2.5rem; flex-shrink: 0; }
.slider-bound:last-child { text-align: right; }

.game-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: var(--bg-3); border-radius: 2px; outline: none; cursor: pointer; }
/* El pulgar es oro, pero el halo que lo rodea es el morado neón
   del logo: marca el elemento que estás manipulando. */
.game-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 0 4px rgba(227,123,230,0.26), 0 0 14px rgba(227,123,230,0.38); transition: box-shadow 0.2s ease, transform 0.15s ease; }
.game-slider::-webkit-slider-thumb:active { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(227,123,230,0.28), 0 0 20px rgba(227,123,230,0.52); }
.game-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; box-shadow: 0 0 0 4px rgba(227,123,230,0.26); }
.game-slider:disabled { opacity: 0.3; cursor: not-allowed; }
.game-slider:disabled::-webkit-slider-thumb { cursor: not-allowed; }

/* Botón enviar */
.submit-wrap { padding: 0.75rem 1.25rem 1rem; flex-shrink: 0; }
.btn-submit  {
  width: 100%; padding: 1.1rem;
  background: var(--accent); color: #14100a;
  border: none; border-radius: var(--radius-md);
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.03em;
  cursor: pointer; transition: var(--trans); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 0 var(--cobalt-dim);
}
.btn-submit:active   { transform: translateY(2px); box-shadow: none; }
.btn-submit:disabled { background: var(--bg-3); color: var(--text-dim); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-submit.sent     { background: var(--bg-2); color: var(--success); border: 1px solid var(--success); box-shadow: none; }

/* Indicador de espera */
.waiting-indicator { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.75rem; }
.waiting-indicator.hidden { display: none; }
.waiting-text { font-size: 0.8rem; color: var(--text-sec); }
.waiting-dots { display: flex; gap: 6px; }
.waiting-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim);
  animation: dotBounce 1.2s ease infinite;
}
.waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}

/* ═══ RESULTS PANEL ═════════════════════════════════════════ */
.results-panel {
  position: absolute;
  inset: 0;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 0);
  z-index: 10;
  animation: resultsReveal 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.results-panel.hidden { display: none; }

@keyframes resultsReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bloque respuesta correcta */
.results-correct-wrap {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-md);
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: center;
  flex-shrink: 0;
}
.results-correct-label {
  font-size: 0.65rem; letter-spacing: 0.2em; font-weight: 600;
  color: var(--success); text-transform: uppercase; margin-bottom: 0.25rem;
}
.results-correct-num {
  font-family: var(--font-head);
  font-size: 4.5rem;
  color: var(--text-pri);
  line-height: 1;
  animation: numPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay: 0.15s;
}
@keyframes numPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.results-question-mini {
  font-size: 0.78rem; color: var(--text-sec); margin-top: 0.3rem;
  line-height: 1.4; padding: 0 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Lista de jugadores en resultados */
.results-players {
  padding: 1rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Tarjetas viejas rp-card (legacy — reemplazadas por rp-card2) */
/* rp-you sigue en uso */
.rp-you { font-size: 0.62rem; color: var(--accent); letter-spacing: 0.06em; font-family: var(--font-body); }

/* ═══ DEAD SCREEN ═══════════════════════════════════════════ */
#screen-dead { background: var(--bg-0); justify-content: center; align-items: center; padding: 2rem; }
.dead-content { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.dead-skull   { font-size: 4rem; line-height: 1; animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.7; transform:scale(0.95); } }
.dead-title   { font-family: var(--font-head); font-size: 2.8rem; line-height: 1.05; letter-spacing: 0.04em; color: var(--danger); }
.dead-sub     { font-size: 0.9rem; color: var(--text-sec); font-weight: 300; }
.dead-stats   { display: flex; gap: 2.5rem; margin-top: 0.5rem; }
.stat-item    { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.stat-val     { font-family: var(--font-head); font-size: 2.5rem; color: var(--text-pri); line-height: 1; }
.stat-name    { font-size: 0.75rem; color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.12em; }

/* ═══ WINNER SCREEN ═════════════════════════════════════════ */
#screen-winner { background: var(--bg-0); justify-content: center; align-items: center; overflow: hidden; }
.winner-bg     { position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(240,180,41,0.16) 0%, transparent 70%); pointer-events: none; }

/* Confetti */
.confetti-wrap { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.winner-content    { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; padding: 2rem; max-width: 420px; width: 100%; }
.winner-crown      { font-size: 4rem; line-height: 1; animation: float 3s ease-in-out infinite; }
@keyframes float   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
.winner-eyebrow    { font-size: 0.7rem; letter-spacing: 0.25em; color: var(--accent); font-weight: 600; text-transform: uppercase; }
.winner-name       { font-family: var(--font-head); font-size: 4rem; color: var(--text-pri); line-height: 1; letter-spacing: 0.03em; }
.winner-hp-line    { font-size: 0.9rem; color: var(--success); font-weight: 500; }
.winner-rounds-line { font-size: 0.85rem; color: var(--text-sec); }

/* Ranking final */
.final-ranking { width: 100%; margin: 0.75rem 0 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.final-rank-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.875rem;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.final-rank-pos       { font-family: var(--font-head); font-size: 1.2rem; color: var(--text-dim); width: 24px; text-align: center; flex-shrink: 0; }
.final-rank-pos.gold  { color: var(--accent); }
.final-rank-name      { font-size: 0.9rem; font-weight: 500; color: var(--text-pri); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.final-rank-hp        { font-size: 0.8rem; color: var(--text-sec); flex-shrink: 0; }
.final-rank-hp.alive  { color: var(--success); }

/* ═══ UTILIDADES ════════════════════════════════════════════ */
.shake { animation: shake 0.4s ease; }
@keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }

.screen-flash-red  { animation: flashRed 0.6s ease; }
@keyframes flashRed { 0%,100% { background:var(--bg-0); } 50% { background:rgba(255,68,68,0.12); } }

.question-enter { animation: questionSlide 0.35s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes questionSlide { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* ═══ PASO 3 — ELEMENTOS MULTIJUGADOR ══════════════════════ */

/* Overlay de carga */
.loading-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,12,0.88);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem;
}
.loading-overlay.hidden { display: none; }

.loading-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(240,180,41,0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
  font-size: 0.9rem; color: var(--text-sec);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
}

/* Toast de error */
.error-toast {
  position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  left: 1rem; right: 1rem; z-index: 300;
  background: rgba(255,68,68,0.12);
  border: 1px solid rgba(255,68,68,0.4);
  color: #ff8888;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; text-align: center;
  backdrop-filter: blur(6px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s;
}
.error-toast.hidden {
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.25s;
}

/* Badge online lobby */
.player-tag-online {
  font-size: 0.6rem; letter-spacing: 0.08em;
  background: rgba(74,255,176,0.1); color: var(--success);
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
  font-weight: 600;
}

/* ═══ MENÚ PRINCIPAL — TRANSICIONES ══════════════════════════ */
.menu-hidden  { display: none !important; }
.menu-visible { display: flex !important; animation: menuSlideIn 0.28s cubic-bezier(0.4,0,0.2,1) both; }
.menu-exit    { animation: menuSlideOut 0.2s cubic-bezier(0.4,0,0.2,1) both; }

@keyframes menuSlideIn  { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes menuSlideOut { from { opacity:1; transform:translateX(0); }   to { opacity:0; transform:translateX(-24px); } }

/* ═══ "FLOW" SAPIENS — secciones reutilizables para el futuro ═══ */
/* Cualquier pantalla nueva (ej. #seccion-amigos) solo necesita la
   clase .app-section para heredar fondo crema, tipografías y los
   botones neón ya definidos arriba. La transición la gestiona
   mostrarSeccion() en game.js. */
.app-section { width: 100%; }
.app-section.fade-hidden  { display: none; }
.app-section.fade-visible {
  display: flex;
  flex-direction: column;
  animation: appSectionFadeIn 0.35s ease both;
}
@keyframes appSectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabecera submenú */
.submenu-header {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 0.5rem;
}
.submenu-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-head); font-size: 1.6rem;
  color: var(--text-pri); letter-spacing: 0.05em;
}
.btn-back {
  background: none; border: none;
  color: var(--text-sec);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  cursor: pointer; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm);
  transition: var(--trans); -webkit-tap-highlight-color: transparent;
}
.btn-back:active { color: var(--text-pri); background: var(--bg-2); }

/* ── RETO DIARIO — tarjeta dorada destacada ── */
.btn-daily {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; padding: 1.6rem 1.75rem;
  background: var(--card);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-md);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans); position: relative; overflow: hidden;
  box-shadow: 0 3px 0 var(--gold), 0 10px 22px rgba(0,0,0,0.45);
}
.btn-daily::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 70px; height: 70px;
  background: radial-gradient(circle at top right, rgba(240,180,41,0.18), transparent 70%);
  pointer-events: none;
}
.btn-daily:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 var(--gold), 0 12px 26px rgba(0,0,0,0.5); }
.btn-daily:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold); }

.btn-daily-icon  { font-size: 1.8rem; color: var(--gold); flex-shrink: 0; line-height: 1; position: relative; }
.btn-daily-text  { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 0.1rem; position: relative; }
.btn-daily-label { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--ink); letter-spacing: 0.01em; line-height: 1; }
.btn-daily-arrow { font-size: 1.4rem; color: var(--gold); flex-shrink: 0; position: relative; }

/* ── GRID 2 COLUMNAS (legacy, se conserva por compatibilidad) ── */
.home-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  width: 100%;
}

/* ── RANKED — tarjeta sello azul cobalto (legacy, botón eliminado del HTML) ── */
.btn-mode {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 1.1rem 0.5rem;
  width: 100%;
  min-height: 88px;
  background: var(--card);
  border: 2px solid var(--cobalt);
  border-radius: var(--radius-md);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans); position: relative; overflow: hidden;
  box-shadow: 0 3px 0 var(--cobalt);
}
.btn-mode:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 var(--cobalt); }
.btn-mode:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cobalt); }

/* ── AMIGOS — tarjeta sello plateado ── */
.btn-mode-friends {
  border: 2px solid var(--silver);
  box-shadow: 0 3px 0 var(--silver-dim);
}
.btn-mode-friends:hover  { box-shadow: 0 4px 0 var(--silver-dim); }
.btn-mode-friends:active { box-shadow: 0 1px 0 var(--silver-dim); }

/* ── Variante a ancho completo (sustituye al grid de 2 columnas tras eliminar RANKED) ── */
.btn-mode-full {
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 96px;
  padding: 1.4rem 1.75rem;
}
.btn-mode-full .btn-mode-icon  { font-size: 1.9rem; }
.btn-mode-full .btn-mode-title { font-size: 1.2rem; }

.btn-mode-icon  { font-size: 1.7rem; line-height: 1; position: relative; }
.btn-mode-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: 0.01em; position: relative; }
.btn-mode-sub   { font-size: 0.68rem; color: var(--ink-dim); font-weight: 500; position: relative; }

/* ── BOTONES GRANDES submenú ── */
.btn-mode-big {
  display: flex; align-items: center; gap: 1.1rem;
  width: 100%; padding: 1.25rem 1.4rem;
  background: var(--card);
  border: 2px solid var(--coral);
  border-radius: var(--radius-md); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: var(--trans);
  position: relative; overflow: hidden; text-align: left;
  box-shadow: 0 3px 0 var(--coral);
}
.btn-mode-big:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 var(--coral); }
.btn-mode-big:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--coral); }

/* ── Los 3 modos de "Jugar con amigos" en plateado (solo estas tarjetas) ── */
#btn-mode-survival, #btn-mode-bomb, #btn-mode-engano {
  border-color: var(--silver);
  box-shadow: 0 3px 0 var(--silver-dim);
}
#btn-mode-survival:hover,  #btn-mode-bomb:hover,  #btn-mode-engano:hover  { box-shadow: 0 4px 0 var(--silver-dim); }
#btn-mode-survival:active, #btn-mode-bomb:active, #btn-mode-engano:active { box-shadow: 0 1px 0 var(--silver-dim); }

/* ── Los modos de "Retos Diarios" en dorado (igual que el botón de Retos Diarios) ── */
#btn-pregunta-diaria, #btn-cortocircuito, #btn-modo-inverso, #btn-modo-calculo {
  border-color: var(--gold);
  box-shadow: 0 3px 0 var(--gold);
}
#btn-pregunta-diaria:hover,  #btn-cortocircuito:hover,  #btn-modo-inverso:hover,  #btn-modo-calculo:hover  { box-shadow: 0 4px 0 var(--gold); }
#btn-pregunta-diaria:active, #btn-cortocircuito:active, #btn-modo-inverso:active, #btn-modo-calculo:active { box-shadow: 0 1px 0 var(--gold); }

/* ── Los 2 modos de "Juego Libre" en verde ── */
#btn-mas-o-menos, #btn-duelo-categorias {
  border-color: var(--moss);
  box-shadow: 0 3px 0 var(--moss);
}
#btn-mas-o-menos:hover,  #btn-duelo-categorias:hover  { box-shadow: 0 4px 0 var(--moss); }
#btn-mas-o-menos:active, #btn-duelo-categorias:active { box-shadow: 0 1px 0 var(--moss); }

/* ── El Gran Concurso: sección propia en portada, dorado reforzado ── */
.btn-mode-concurso {
  border: 2px solid var(--gold);
  box-shadow: 0 3px 0 var(--gold);
}
.btn-mode-concurso:hover  { box-shadow: 0 4px 0 var(--gold); }
.btn-mode-concurso:active { box-shadow: 0 1px 0 var(--gold); }
.btn-mode-concurso .btn-mode-icon { color: var(--gold); }

/* ── JUEGO LIBRE: sección propia en portada, sello verde ── */
.btn-mode-libre {
  border: 2px solid var(--moss);
  box-shadow: 0 3px 0 var(--moss);
}
.btn-mode-libre:hover  { box-shadow: 0 4px 0 var(--moss); }
.btn-mode-libre:active { box-shadow: 0 1px 0 var(--moss); }
.btn-mode-libre .btn-mode-icon { color: var(--moss); }

/* Patata Caliente — eliminada */

.bmb-icon  { font-size: 2rem; line-height: 1; flex-shrink: 0; position: relative; }
/* Los emoji traen su propio color; ◈ no, y quedaría apagado entre ellos.
   Se le da el acento de su modo, el mismo azul de [data-tema="distancia"].
   Y se agranda: un emoji llena el cuadratín entero, mientras que un glifo
   geométrico ocupa en torno al 70 %, así que al mismo font-size se ve
   más pequeño que sus vecinos. El line-height baja a la vez para que la
   caja siga midiendo lo mismo y la tarjeta no crezca respecto a las
   otras cuatro de Juego Libre. */
.bmb-icon--distancia { color: #4fa3e0; font-size: 2.8rem; line-height: 0.9; }
.bmb-info  { display: flex; flex-direction: column; gap: 0.2rem; position: relative; }
.bmb-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: 0.01em; }
.bmb-sub   { font-size: 0.75rem; color: var(--ink-dim); font-weight: 500; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════
   BOTONES APILADOS EN WINNER Y DEAD
   ══════════════════════════════════════════════════════════ */
.winner-btns {
  display: flex; flex-direction: column; gap: 0.65rem;
  width: 100%;
}
.dead-btns {
  display: flex; flex-direction: column; gap: 0.65rem;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   HUECOS DE ANUNCIOS DE VIDEOJUEGOS
   ══════════════════════════════════════════════════════════ */
.ad-slot {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Winner: entre ranking y botones */
.ad-slot--winner {
  margin: 0.5rem 0 0.75rem;
  max-width: 420px;
}
/* Dead: entre stats y botones */
.ad-slot--dead {
  margin: 0.75rem 0;
  max-width: 360px;
}
/* Daily: al pie del reto */
.ad-slot--daily {
  margin: 0.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0));
}

.ad-inner {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 90px;
  display: flex; flex-direction: column;
}
.ad-label {
  font-size: 0.52rem; letter-spacing: 0.18em; font-weight: 600;
  color: var(--text-dim); text-transform: uppercase;
  padding: 4px 8px 2px;
  border-bottom: 1px solid var(--border);
  display: block;
}
.ad-content {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 80px;
  /* Tamaño recomendado: 300×250 (medium rectangle) para redes de videojuegos.
     Pega el tag del anunciante dentro de .ad-content y borra .ad-placeholder. */
}
/* Placeholder visual hasta que haya anuncio real */
.ad-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.35rem; padding: 1rem;
  opacity: 0.3;
}
.ad-placeholder-icon { font-size: 1.6rem; line-height: 1; }
.ad-placeholder-text { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.08em; }

/* ════════════════════════════════════════════════════════════
   MODO CAMUFLA TU CULTURA — btn en menú
   ══════════════════════════════════════════════════════════ */
.btn-mode-big-engano {
  border-color: var(--purple);
  box-shadow: 0 3px 0 var(--purple);
}
.btn-mode-big-engano:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 var(--purple); }
.btn-mode-big-engano:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--purple); }

/* ════════════════════════════════════════════════════════════
   PANTALLA CAMUFLA TU CULTURA — screen-engano
   ══════════════════════════════════════════════════════════ */
/* Fondo base + viñeta morada tenue: mantiene el matiz identificativo
   del modo sin subir la luminosidad. */
#screen-engano {
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse 110% 60% at 50% 0%, rgba(53,224,192,0.10) 0%, transparent 62%);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0);
}

/* Cabecera */
.eng-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem 0.6rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.eng-ronda-badge { display: flex; flex-direction: column; gap: 2px; }
.eng-ronda-label {
  font-family: var(--font-head); font-size: 1rem; color: #35e0c0;
  letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(53,224,192,0.5);
}
.eng-ronda-num { font-size: 0.7rem; color: var(--text-sec); }

.eng-phase-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.eng-phase-label { font-size: 0.72rem; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.eng-timer {
  font-family: var(--font-head); font-size: 1.7rem; color: var(--text-pri); line-height: 1;
  transition: color 0.3s ease;
}
.eng-timer--danger { color: var(--danger); animation: timerPulse 0.5s ease infinite alternate; }

/* Body principal — scrollable */
.eng-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
}

/* Categoría / pregunta compartida */
.eng-cat {
  font-size: 0.6rem; letter-spacing: 0.25em; font-weight: 600;
  color: #35e0c0; text-transform: uppercase;
}
.eng-question-card {
  background: var(--bg-1); border: 1px solid rgba(53,224,192,0.25);
  border-radius: var(--radius-md); padding: 1rem 1.125rem;
}
.eng-question-text { font-size: 1rem; line-height: 1.5; color: var(--text-pri); }

/* ── Pantalla de espera genérica ── */
.eng-waiting {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center; padding: 2rem;
}
.eng-waiting-icon { font-size: 2.5rem; }
.eng-waiting-text { font-size: 0.9rem; color: var(--text-sec); }

/* ── Protagonista esperando ── */
.eng-protag-wait {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; text-align: center; padding: 2rem 1rem;
  background: var(--bg-1); border: 1px solid rgba(240,180,41,0.28);
  border-radius: var(--radius-md);
}
.eng-protag-icon { font-size: 2.8rem; animation: bombFloat 2.5s ease-in-out infinite; }
.eng-protag-title {
  font-family: var(--font-head); font-size: 1.5rem; color: var(--accent);
  letter-spacing: 0.04em;
}
.eng-protag-sub { font-size: 0.85rem; color: var(--text-sec); line-height: 1.5; }

/* ── Revelación pregunta+respuesta a trampeadores ── */
.eng-question-reveal { display: flex; flex-direction: column; gap: 0.75rem; }
.eng-answer-reveal {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: rgba(74,255,176,0.07); border: 1px solid rgba(74,255,176,0.3);
  border-radius: var(--radius-md);
}
.eng-answer-label {
  font-size: 0.6rem; letter-spacing: 0.2em; color: var(--success);
  text-transform: uppercase; font-weight: 700;
}
.eng-answer-val {
  font-family: var(--font-head); font-size: 1.5rem; color: var(--success);
  text-shadow: 0 0 10px rgba(74,255,176,0.4);
}

/* ── Formulario de trampa ── */
.eng-trap-form {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1rem; background: var(--bg-1);
  border: 1px solid var(--border-md); border-radius: var(--radius-md);
}
.eng-trap-label { font-size: 0.85rem; color: var(--text-sec); line-height: 1.4; }
.eng-trap-label strong { color: var(--text-pri); }
.eng-trap-input { font-size: 1rem; }
.eng-trap-btn { font-size: 0.9rem; }
.eng-trap-sent {
  text-align: center; font-size: 0.85rem; color: var(--success);
  padding: 0.6rem; background: rgba(74,255,176,0.08);
  border-radius: var(--radius-sm);
}

/* ── Fase elección ── */
.eng-election { display: flex; flex-direction: column; gap: 0.85rem; }
.eng-waiting-protag {
  text-align: center; font-size: 0.85rem; color: var(--text-sec);
  padding: 0.5rem;
}
.eng-options-grid {
  display: flex; flex-direction: column; gap: 0.6rem;
}
.eng-option-btn {
  width: 100%; padding: 1rem 1.125rem;
  background: var(--bg-1); border: 1.5px solid var(--border-md);
  border-radius: var(--radius-md);
  color: var(--text-pri); font-family: var(--font-body); font-size: 0.95rem;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
}
.eng-option-btn:not(.eng-option-btn--disabled):active {
  transform: scale(0.98); border-color: #35e0c0; background: rgba(53,224,192,0.06);
}
.eng-option-btn--disabled {
  opacity: 0.45; cursor: default;
}
.eng-options-grid--locked .eng-option-btn { opacity: 0.35; }
.eng-option-btn--chosen {
  border-color: #35e0c0 !important;
  background: rgba(53,224,192,0.12) !important;
}
.eng-option-btn:disabled { cursor: not-allowed; }

/* ── Resolución ── */
.eng-resolution { display: flex; flex-direction: column; gap: 0.85rem; }
.eng-res-header {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 1.25rem; border-radius: var(--radius-md);
  text-align: center; border: 1px solid;
}
.eng-res-header--win  { background: rgba(74,255,176,0.07); border-color: rgba(74,255,176,0.3); }
.eng-res-header--lose { background: rgba(255,68,68,0.07);  border-color: rgba(255,68,68,0.3); }
.eng-res-icon { font-size: 2rem; }
.eng-res-title { font-family: var(--font-head); font-size: 1.4rem; color: var(--text-pri); }
.eng-res-engano { font-size: 0.82rem; color: var(--text-sec); }
.eng-res-engano strong { color: #35e0c0; }

.eng-res-correct-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.75rem; background: rgba(74,255,176,0.05);
  border: 1px solid rgba(74,255,176,0.2); border-radius: var(--radius-sm);
}
.eng-res-correct-label { font-size: 0.58rem; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }
.eng-res-correct-val { font-size: 0.95rem; font-weight: 700; color: var(--success); }

.eng-res-opts { display: flex; flex-direction: column; gap: 0.5rem; }
.eng-res-opt {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); position: relative;
}
.eng-res-opt-text { font-size: 0.9rem; color: var(--text-pri); }
.eng-res-autor { font-size: 0.65rem; color: var(--text-dim); }
.eng-res-chosen-tag {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  font-size: 0.7rem; color: var(--accent); font-weight: 700;
}
.eng-res-opt--correct { border-color: rgba(74,255,176,0.4); background: rgba(74,255,176,0.05); }
.eng-res-opt--correct .eng-res-opt-text { color: var(--success); font-weight: 600; }
.eng-res-opt--wrong { border-color: rgba(255,68,68,0.4); background: rgba(255,68,68,0.05); }
.eng-res-opt--correct-chosen { border-color: rgba(74,255,176,0.6); background: rgba(74,255,176,0.1); }

.eng-local-delta {
  text-align: center; font-family: var(--font-head); font-size: 1.6rem;
  padding: 0.6rem; border-radius: var(--radius-sm);
}
.eng-delta--pos { color: var(--success); background: rgba(74,255,176,0.06); }
.eng-delta--neg { color: var(--danger);  background: rgba(255,68,68,0.06); }

/* ── Marcador inferior ── */
.eng-scoreboard-wrap {
  flex-shrink: 0;
  padding: 0.6rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0));
  background: var(--bg-1); border-top: 1px solid var(--border);
}
.eng-scoreboard-title {
  font-size: 0.58rem; letter-spacing: 0.2em; color: var(--text-dim);
  text-transform: uppercase; margin-bottom: 0.4rem;
}
.eng-scoreboard { display: flex; flex-direction: column; gap: 0.3rem; max-height: 140px; overflow-y: auto; }
.eng-score-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg-2); border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.eng-score-row--local  { border: 1px solid rgba(240,180,41,0.34); }
.eng-score-row--protag { border: 1px solid rgba(53,224,192,0.35); }
.eng-score-pos  { color: var(--text-dim); width: 16px; text-align: center; flex-shrink: 0; }
.eng-score-name { flex: 1; color: var(--text-pri); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eng-score-pts  { font-weight: 700; color: var(--accent); flex-shrink: 0; }

/* ═══ RETO DIARIO ════════════════════════════════════════════ */
#screen-daily {
  background: var(--bg-0);
  overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0);
}

.daily-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.5rem 1.5rem 1rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 5;
}

.daily-header-title {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 0.4rem;
  flex: 1;
}

.daily-star { color: var(--gold); }

.daily-streak-badge {
  background: rgba(245,200,66,0.15);
  border: 1px solid rgba(245,200,66,0.35);
  color: var(--gold);
  font-size: 0.8rem; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
  display: flex; align-items: center; gap: 4px;
}

.daily-body {
  position: relative; /* ancla la celebración de confeti a esta área */
  padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; gap: 1.25rem;
}

.daily-category {
  font-size: 0.65rem; letter-spacing: 0.25em; font-weight: 600;
  color: var(--accent); text-transform: uppercase;
}

.daily-question-card {
  background: var(--bg-1);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.375rem;
}

.daily-question-text {
  font-size: 1.05rem; font-weight: 400; line-height: 1.55; color: var(--text-pri);
}

.daily-options {
  display: flex; flex-direction: column; gap: 0.6rem;
}

.daily-option {
  display: flex; align-items: center; gap: 0.875rem;
  width: 100%; padding: 0.875rem 1rem;
  background: var(--bg-1);
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius-md);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans); text-align: left;
  color: var(--text-pri); font-family: var(--font-body);
}
.daily-option:not(:disabled):active { transform: scale(0.98); border-color: var(--accent); }
.daily-option:disabled { cursor: default; }

.daily-opt-letter {
  font-family: var(--font-head); font-size: 1rem; color: var(--accent);
  width: 22px; flex-shrink: 0; text-align: center;
}
.daily-opt-text { font-size: 0.9rem; font-weight: 400; line-height: 1.4; }

/* Estados de opciones post-respuesta */
.daily-opt-correct {
  border-color: var(--success) !important;
  background: rgba(74,255,176,0.08) !important;
}
.daily-opt-correct .daily-opt-letter { color: var(--success); }

.daily-opt-wrong {
  border-color: var(--danger) !important;
  background: rgba(255,68,68,0.08) !important;
}
.daily-opt-wrong .daily-opt-letter { color: var(--danger); }

.daily-opt-dim {
  opacity: 0.4;
  border-color: var(--border) !important;
}

/* Resultado */
.daily-result {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.daily-result.hidden { display: none; }

.daily-result-correct, .daily-result-wrong {
  padding: 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid;
}
.daily-result-correct {
  background: rgba(74,255,176,0.06);
  border-color: rgba(74,255,176,0.25);
}
.daily-result-wrong {
  background: rgba(255,68,68,0.06);
  border-color: rgba(255,68,68,0.25);
}

.daily-result-icon {
  font-size: 2rem; font-weight: 700; line-height: 1;
}
.daily-result-correct .daily-result-icon { color: var(--success); }
.daily-result-wrong   .daily-result-icon { color: var(--danger); }

.daily-result-title {
  font-family: var(--font-head); font-size: 1.6rem; letter-spacing: 0.06em;
}
.daily-result-correct .daily-result-title { color: var(--success); }
.daily-result-wrong   .daily-result-title { color: var(--danger); }

.daily-result-streak { font-size: 0.85rem; color: var(--text-sec); }
.daily-result-answer { font-size: 0.85rem; color: var(--text-sec); }
.daily-result-answer strong { color: var(--text-pri); }

.daily-share-btn {
  margin-top: 0.5rem;
  padding: 0.7rem 1.25rem;
  background: rgba(74,255,176,0.1);
  border: 1px solid rgba(74,255,176,0.3);
  border-radius: var(--radius-md);
  color: var(--success); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: var(--trans); -webkit-tap-highlight-color: transparent;
}
.daily-share-btn:active { transform: scale(0.97); }

/* ── MÁS O MENOS (Juego Libre) ── */
.mom-pregunta {
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.mom-duelo {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}
.mom-carta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  min-height: 140px;
  background: var(--bg-1);
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius-md);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
  color: var(--text-pri); font-family: var(--font-body);
  text-align: center;
}
.mom-carta:not(:disabled):active { transform: scale(0.97); border-color: var(--moss); }
.mom-carta:disabled { cursor: default; }
.mom-carta-nombre { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.mom-carta-precio {
  font-family: var(--font-head);
  font-size: 1.3rem; font-weight: 800;
  color: var(--gold-soft);
}
.mom-carta-precio.hidden { display: none; }
.mom-vs {
  align-self: center;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.mom-carta--correcta   { border-color: var(--success) !important; background: rgba(74,255,176,0.08) !important; }
.mom-carta--incorrecta { border-color: var(--danger)  !important; background: rgba(255,68,68,0.08) !important; }
.mom-carta--dim { opacity: 0.4; }
.mom-partidas-restantes { text-align: center; font-size: 0.8rem; color: var(--text-dim); }

/* La carta "ya sabida" (precio visible desde el principio de la ronda,
   a partir de la 2ª) lleva una etiqueta y un tinte propio para que se
   note de un vistazo cuál es la que ya conoces. */
.mom-carta-tag {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(74,255,176,0.15);
  color: var(--success);
  border: 1px solid rgba(74,255,176,0.35);
}
.mom-carta-tag--nueva {
  background: rgba(227,123,230,0.15);
  color: var(--neon-rosa);
  border-color: rgba(227,123,230,0.35);
}
.mom-carta--conocida {
  border-color: rgba(74,255,176,0.35);
  background: linear-gradient(180deg, rgba(74,255,176,0.07), var(--bg-1) 65%);
}

/* Fondo propio de Más o Menos: viñeta verde tenue, misma receta que
   usan otras pantallas de modo (p. ej. #screen-engano) para dar
   identidad sin subir la luminosidad. */
#screen-mas-o-menos {
  background-color: var(--bg-0);
  background-image: radial-gradient(ellipse 110% 60% at 50% 0%, rgba(61,220,132,0.09) 0%, transparent 62%);
}
/* Fondo propio de Duelo de Categorías: viñeta en el morado neón del
   propio "VS" del marcador, distinta de la de Más o Menos. */
#screen-duelo {
  background-color: var(--bg-0);
  background-image: radial-gradient(ellipse 110% 60% at 50% 0%, rgba(227,123,230,0.08) 0%, transparent 62%);
}
/* Fondo propio de ¿Quién lo dijo?: viñeta dorada tenue, distinta del
   verde de Más o Menos y del morado de Duelo — ninguna otra pantalla
   de modo usa todavía el dorado como viñeta. */
#screen-quien-lo-dijo {
  background-color: var(--bg-0);
  background-image: radial-gradient(ellipse 110% 60% at 50% 0%, rgba(255,215,94,0.09) 0%, transparent 62%);
}

/* ── ¿QUIÉN LO DIJO? (Juego Libre) ──────────────────────────
   Misma receta visual que .mom-carta/.mom-duelo (dos opciones lado a
   lado, feedback por color + texto), adaptada: aquí el botón es solo
   el nombre del personaje —grande y estilizado, sin imagen (Fase 0,
   principio 5)— y la frase en disputa vive en su propia tarjeta
   encima, a modo de cita. */
.qld-frase-card {
  background: var(--bg-1);
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  text-align: center;
}
.qld-frase-texto {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.qld-frase-texto::before { content: '“'; color: var(--ink); }
.qld-frase-texto::after  { content: '”'; color: var(--ink); }
.qld-revelado {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-sec);
  margin-top: 0.5rem;
}
.qld-duelo {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0.9rem;
}
.qld-carta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.75rem 1rem;
  min-height: 120px;
  background: var(--bg-1);
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius-md);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
  color: var(--text-pri); font-family: var(--font-body);
  text-align: center;
}
.qld-carta:disabled { cursor: default; }
.qld-carta-nombre {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}
.qld-carta-descriptor {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sec);
}
.qld-carta--correcta   { border-color: var(--success) !important; background: rgba(74,255,176,0.08) !important; }
.qld-carta--incorrecta { border-color: var(--danger)  !important; background: rgba(255,68,68,0.08) !important; }
.qld-carta--dim { opacity: 0.4; }
.qld-partidas-restantes { text-align: center; font-size: 0.8rem; color: var(--text-dim); }

/* ── DUELO DE CATEGORÍAS (Juego Libre) ── */
.duelo-instruccion { text-align: center; font-size: 0.85rem; color: var(--text-sec); }
.duelo-chip {
  padding: 0.55rem 0.9rem;
  background: var(--bg-1);
  border: 1.5px solid var(--border-md);
  border-radius: 999px;
  color: var(--text-pri); font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
}
.duelo-chip:active { transform: scale(0.96); }
.duelo-chip:focus-visible { outline: none; border-color: var(--hoja); box-shadow: 0 0 0 3px rgba(227,123,230,0.28); }
.duelo-chip--elegida-a { border-color: var(--moss); background: rgba(74,255,176,0.1); color: var(--moss); }
.duelo-chip--elegida-b { border-color: var(--hoja); background: rgba(190,51,202,0.12); color: var(--neon-rosa); }

/* Selector por grupos colapsables: con 50+ categorías friki y 30 de
   cultura general, mostrar todo de golpe en chips sueltos era un caos
   en móvil. Se agrupan por tema en barras plegables — solo un grupo
   abierto a la vez, el resto colapsado a max-height:0. */
.duelo-grupos { display: flex; flex-direction: column; gap: 0.6rem; }
.duelo-grupo {
  border: 1.5px solid var(--border-md);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  overflow: hidden;
}
.duelo-grupo-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  background: none; border: none;
  color: var(--text-pri); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
}
.duelo-grupo-header:active { background: var(--bg-2); }
.duelo-grupo--abierto > .duelo-grupo-header { color: var(--hoja); }
/* Cuántas categorías hay dentro. Con grupos de hasta veinte y el panel
   desplazándose por dentro, saber el número de antemano evita la duda
   de si se están viendo todas. El nombre se queda con el espacio
   sobrante para que la cuenta no se separe de la flecha. */
.duelo-grupo-nombre { flex: 1 1 auto; }
.duelo-grupo-cuenta {
  flex-shrink: 0;
  font-size: 0.7rem; font-weight: 700;
  color: var(--text-sec);
  background: var(--bg-2);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-variant-numeric: tabular-nums;
}
.duelo-grupo--abierto .duelo-grupo-cuenta { color: var(--hoja); }
.duelo-grupo-flecha {
  flex-shrink: 0;
  font-size: 0.7rem; color: var(--text-sec);
  transition: transform 0.25s ease, color 0.25s ease;
}
.duelo-grupo--abierto .duelo-grupo-flecha { transform: rotate(180deg); color: var(--hoja); }

.duelo-grupo-panel {
  max-height: 0; opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.22s ease;
}
/* Abierto: altura acotada y CON SCROLL PROPIO.
   Antes esto era un max-height fijo de 640 px con overflow:hidden. En
   un móvil, con un chip por columna, eso da para unas doce categorías:
   cualquier grupo más largo se recortaba en seco y las de abajo no se
   veían NI HABÍA FORMA DE LLEGAR A ELLAS. Ahora el panel se queda en
   una fracción de la pantalla y se desplaza por dentro.
   overscroll-behavior evita que al llegar al final el gesto siga
   arrastrando la página por debajo. */
.duelo-grupo--abierto > .duelo-grupo-panel {
  max-height: 58vh;
  opacity: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.duelo-grupo-panel-inner { padding: 0 0.75rem 0.85rem; }

.duelo-grupo-chips { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.duelo-grupo-chips .duelo-chip {
  width: 100%;
  border-radius: var(--radius-md);
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
@media (min-width: 480px) {
  .duelo-grupo-chips { grid-template-columns: repeat(2, 1fr); }
}

/* Vista previa del cruce elegido, justo encima de "EMPEZAR DUELO" —
   confirma de un vistazo qué se va a enfrentar antes de arrancar. */
.duelo-vs-preview {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  text-align: center;
  font-family: var(--font-head);
  font-size: 0.95rem;
}
.duelo-vs-preview-cat { font-weight: 700; }
.duelo-vs-preview-cat:first-child { color: var(--moss); }
.duelo-vs-preview-cat:last-child { color: var(--neon-rosa); }
.duelo-vs-preview-vs { flex-shrink: 0; color: var(--gold); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.05em; }

.duelo-marcador { display: flex; align-items: stretch; justify-content: space-between; gap: 0.75rem; }
.duelo-marcador-lado {
  flex: 1; min-width: 0; text-align: center;
  font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.6rem 0.4rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-md);
  background: var(--bg-1);
}
.duelo-marcador-lado strong { display: block; font-family: var(--font-head); font-size: 1.4rem; color: var(--ink); margin-top: 0.25rem; }
.duelo-marcador-activo { border-color: var(--hoja); color: var(--ink); font-weight: 700; }
.duelo-marcador-vs { flex-shrink: 0; align-self: center; font-family: var(--font-head); font-weight: 800; font-size: 0.8rem; color: var(--ink-dim); }

/* Banner "ya jugaste hoy" */
.daily-already-banner {
  background: var(--bg-1); border: 1px solid var(--border-md);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  text-align: center;
}
.daily-already-icon {
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--accent);
}
.daily-already-title { font-family: var(--font-head); font-size: 1.3rem; color: var(--text-pri); letter-spacing: 0.04em; }
.daily-already-sub   { font-size: 0.8rem; color: var(--text-sec); }
.daily-streak-row    { font-size: 0.82rem; color: var(--text-sec); margin-top: 0.2rem; }
.daily-streak-row strong { color: var(--gold); }

/* ── Clase utilitaria global ── */
.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════
   MODO BOMBA — btn en menú
   ══════════════════════════════════════════════════════════ */
.btn-mode-big-bomb {
  border-color: var(--coral);
  box-shadow: 0 3px 0 var(--coral);
}
.btn-mode-big-bomb:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 var(--coral); }
.btn-mode-big-bomb:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--coral); }

/* ════════════════════════════════════════════════════════════
   PANTALLA MODO BOMBA — screen-bomb
   ══════════════════════════════════════════════════════════ */
/* Fondo base + brasa roja tenue en el centro, donde vive la bomba. */
#screen-bomb {
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse 85% 45% at 50% 45%, rgba(255,90,60,0.10) 0%, transparent 65%);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0);
}

/* ── Cabecera ── */
.bomb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem 0.6rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bomb-round-badge   { display: flex; flex-direction: column; align-items: flex-start; }
.bomb-round-label   { font-size: 0.55rem; letter-spacing: 0.2em; color: var(--text-sec); text-transform: uppercase; }
.bomb-round-num     { font-family: var(--font-head); font-size: 1.8rem; color: var(--text-pri); line-height: 1; }
.bomb-header-title  { font-family: var(--font-head); font-size: 1.2rem; color: #ff4444;
                       letter-spacing: 0.06em;
                       text-shadow: 0 0 12px rgba(255,68,68,0.6); }

/* Timer de respuesta 10s */
.bomb-answer-timer-wrap {
  display: flex; flex-direction: column; align-items: center;
}
.bomb-answer-timer {
  font-family: var(--font-head); font-size: 2rem; color: var(--accent); line-height: 1;
  transition: color 0.3s ease;
}
.bomb-answer-timer.bomb-timer--danger { color: var(--danger); animation: timerPulse 0.5s ease infinite alternate; }
@keyframes timerPulse { from { opacity: 1; } to { opacity: 0.5; } }
.bomb-answer-timer-label { font-size: 0.55rem; color: var(--text-dim); letter-spacing: 0.1em; }

/* ── Indicador del jugador actual (siempre visible, nunca tapado) ── */
.bomb-turn-banner {
  flex-shrink: 0;
  text-align: center;
  font-family: var(--font-head);
  font-size: 1rem; letter-spacing: 0.04em;
  color: var(--text-pri);
  padding: 0.45rem 1rem;
  background: rgba(255,68,68,0.08);
  border-bottom: 1px solid rgba(255,68,68,0.18);
}
.bomb-turn-banner--you {
  color: #ff6b6b;
  background: rgba(255,68,68,0.16);
  text-shadow: 0 0 10px rgba(255,68,68,0.5);
}
.bomb-turn-banner--danger { animation: timerPulse 0.5s ease infinite alternate; }

/* ── Pregunta (visible para todos) ── */
.bomb-question-block {
  padding: 0.6rem 1.25rem 0.4rem;
  flex-shrink: 0;
}
.bomb-question-category {
  font-size: 0.58rem; letter-spacing: 0.2em; font-weight: 600;
  color: #ff4444; text-transform: uppercase; margin-bottom: 0.25rem;
  text-align: center;
}
.bomb-question-card {
  background: var(--bg-1); border: 1px solid rgba(255,68,68,0.25);
  border-radius: var(--radius-md); padding: 0.75rem 1rem;
}
.bomb-question-text {
  font-size: 0.92rem; font-weight: 400; line-height: 1.42; color: var(--text-pri);
  text-align: center;
}

/* ── Arena central ──
   Clave del arreglo: la arena se dimensiona con min(ancho_disponible,
   alto_disponible) usando una unidad basada en svh (small viewport
   height), así NUNCA se desborda verticalmente del contenedor flex
   aunque la pantalla sea baja (teclado abierto, navegador con barras
   visibles, etc.). Antes solo dependía del ancho y podía salirse. */
.bomb-center-wrap {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 90px;
  overflow: hidden;
  padding: 0.35rem 0.25rem;
}
.bomb-center {
  width: min(340px, 92vw, 42svh, 42vh);
  aspect-ratio: 1 / 1;
}

.bomb-arena {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Capa interna con margen de seguridad: los nodos se posicionan
   relativos a ESTA capa, nunca al borde real de .bomb-arena, así
   ningún avatar puede salirse hacia la pregunta de arriba */
.bomb-arena-inner {
  position: absolute;
  top: 18%; left: 18%; right: 18%; bottom: 18%;
}

/* Bomba — SIEMPRE fija en el centro exacto de la circunferencia */
.bomb-icon-wrap {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.bomb-emoji {
  font-size: clamp(2rem, 9svh, 2.9rem); line-height: 1;
  animation: bombFloat 2s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
@keyframes bombFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.bomb-explode-anim {
  animation: bombBoom 0.4s cubic-bezier(0.36,0.07,0.19,0.97) both !important;
}
@keyframes bombBoom {
  0%   { transform: scale(1); }
  30%  { transform: scale(2.2); }
  60%  { transform: scale(1.6) rotate(15deg); }
  100% { transform: scale(1); }
}

/* Flecha que sale del centro (la bomba) y rota para señalar
   siempre al jugador activo. Pivota exactamente sobre el punto
   central usando el patrón clásico de "aguja de reloj": el
   elemento se ancla por su extremo superior (transform-origin)
   en el centro, y crece hacia abajo por defecto (0deg = sur). */
.bomb-arrow {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 30%;
  min-height: 50px; max-height: 90px;
  transform-origin: top center;
  clip-path: polygon(50% 100%, 100% 64%, 70% 64%, 70% 0%, 30% 0%, 30% 64%, 0% 64%);
  background: linear-gradient(to bottom, rgba(255,68,68,0.55), #ff4444);
  filter: drop-shadow(0 0 7px rgba(255,68,68,0.7));
  z-index: 2;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
  animation: bombArrowPulse 1s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bombArrowPulse {
  from { filter: drop-shadow(0 0 5px rgba(255,68,68,0.5)); }
  to   { filter: drop-shadow(0 0 12px rgba(255,68,68,0.9)); }
}

/* Nodos de jugador alrededor de la bomba */
.bomb-player-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  z-index: 3;
  width: 92px;
}
.bomb-node-avatar {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--bg-3); border: 3px solid var(--border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: var(--text-sec);
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.bomb-player-node--active .bomb-node-avatar {
  border-color: #ff4444;
  background: rgba(255,68,68,0.15);
  color: var(--text-pri);
  box-shadow: 0 0 14px rgba(255,68,68,0.6);
  animation: activePulse 1s ease-in-out infinite;
}
.bomb-player-node--dead .bomb-node-avatar {
  opacity: 0.4; border-color: var(--border); background: var(--bg-2);
}
@keyframes activePulse {
  0%,100% { box-shadow: 0 0 10px rgba(255,68,68,0.5); }
  50%     { box-shadow: 0 0 22px rgba(255,68,68,0.9); }
}
.bomb-node-name {
  font-size: 0.72rem; color: var(--text-sec); text-align: center;
  max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.bomb-player-node--dead .bomb-node-name { opacity: 0.45; text-decoration: line-through; }
.bomb-node-fails { display: flex; gap: 3px; }

/* Puntos de fallo (se usan tanto en los nodos de la arena como
   en las píldoras de "vidas" de la barra inferior) */
.fail-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--border-md);
  display: inline-block;
}
.fail-dot--used { background: var(--danger); border-color: var(--danger); }

/* ── Lista de jugadores: fila horizontal compacta con scroll.
   Ya no apila altura vertical (la info principal está en los
   nodos circulares de la arena); esto es solo un resumen rápido. */
/* Los carriles pasan a ser la vista principal (antes lo era el canvas 3D):
   ocupan el espacio libre y se apilan en vertical, uno por jugador. */
.bomb-players-section {
  padding: 0.4rem 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.bomb-players-list {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.bomb-prow {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 26px;
  transition: all 0.25s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.bomb-prow--active { border-color: rgba(255,68,68,0.5); background: rgba(255,68,68,0.06); }
.bomb-prow--local  { border-color: rgba(240,180,41,0.34); }
.bomb-prow--dead   { opacity: 0.4; }

.bomb-prow-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--accent);
}
.bomb-prow-name    { font-size: 0.84rem; font-weight: 600; color: var(--text-pri); max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.bomb-prow-fails   { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.bomb-prow-failcount { font-size: 0.68rem; color: var(--text-dim); margin-left: 2px; }
.bomb-prow-dead    { font-size: 0.85rem; flex-shrink: 0; }
.bomb-prow-bomb    { font-size: 0.95rem; flex-shrink: 0; }

/* ── Poderes: 3 huecos fijos del jugador local (Fase 2 — sin efectos
   todavía, solo se reciben y se consultan) ── */
.bomb-poderes-panel {
  display: flex; gap: 0.5rem;
  /* Es el último bloque en flujo de #screen-bomb (los carriles quedan
     por encima y el feedback va en position:fixed), así que se apoya en
     el borde inferior: sin el safe-area, en un iPhone con indicador de
     inicio los huecos quedan medio tapados por debajo. */
  padding: 0 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0));
  flex-shrink: 0;
}
.bomb-poder-slot {
  flex: 1; min-width: 0;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0.4rem 0.5rem;
  background: var(--bg-1); border: 1.5px dashed var(--border-md);
  border-radius: var(--radius-md);
  text-align: center;
  transition: var(--trans);
}
.bomb-poder-vacio { color: var(--text-dim); font-size: 1.1rem; }
.bomb-poder-slot--lleno {
  flex-direction: column; align-items: stretch;
  border-style: solid; border-color: var(--gold, #e8b93f);
  background: rgba(232,185,63,0.08);
}
.bomb-poder-slot-head { display: flex; align-items: center; gap: 0.35rem; }
.bomb-poder-icono { font-size: 1.1rem; flex-shrink: 0; }
.bomb-poder-nombre {
  flex: 1; min-width: 0;
  font-size: 0.72rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-pri);
}
.bomb-poder-info {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border-md);
  background: transparent; color: var(--text-sec);
  font-size: 0.7rem; font-weight: 800;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.bomb-poder-info:hover,
.bomb-poder-info[aria-expanded="true"] {
  border-color: var(--gold, #e8b93f); color: var(--gold, #e8b93f);
}
.bomb-poder-explicacion {
  margin: 0.4rem 0 0; font-size: 0.68rem; line-height: 1.35;
  color: var(--text-sec); text-align: left;
}
.bomb-poder-usar {
  margin-top: 0.45rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--gold, #e8b93f);
  background: rgba(232,185,63,0.14);
  color: var(--gold, #e8b93f);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
}
.bomb-poder-usar:disabled {
  opacity: 0.4; cursor: default;
}
.bomb-poder-pasivo {
  margin-top: 0.45rem;
  font-size: 0.64rem; font-style: italic;
  color: var(--text-dim);
}

/* ── Selector de rival (poderes con objetivo: Robo, Congelar, Intercambio, Contagio…) ── */
.bomb-poder-rivales {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.3rem;
  margin-top: 0.45rem;
}
.bomb-poder-rival {
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-md);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font-size: 0.66rem; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
}
.bomb-poder-rival:hover {
  border-color: var(--gold, #e8b93f); color: var(--gold, #e8b93f);
}
.bomb-poder-cancelar {
  padding: 0.28rem 0.4rem;
  border: none; background: transparent;
  color: var(--text-dim);
  font-size: 0.64rem; text-decoration: underline;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* Apuesta a ciegas: una fila por rival, con los dos botones de predicción */
.bomb-poder-rival-fila {
  display: flex; align-items: center; gap: 0.35rem;
  width: 100%;
}
.bomb-poder-rival-nombre {
  flex: 1 1 auto;
  font-size: 0.66rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bomb-poder-apuesta {
  flex: 0 0 auto;
  padding: 0.22rem 0.4rem;
  border-radius: 7px;
  border: 1px solid var(--border-md);
  background: rgba(255,255,255,0.05);
  font-size: 0.72rem; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: var(--trans);
}
.bomb-poder-apuesta:hover { border-color: var(--gold, #e8b93f); }
.bomb-poder-apuesta:disabled { opacity: 0.4; cursor: default; }

/* Intercambio: no se puede guardar para más adelante, hay que avisarlo */
.bomb-poder-urgente {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em;
  color: #e07a7a;
}

/* ── Feedback flash ── */
.bomb-feedback {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 0.06em;
  padding: 0.9rem 1.75rem; border-radius: var(--radius-md);
  pointer-events: none; text-align: center;
  animation: feedbackPop 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes feedbackPop {
  from { transform: translate(-50%,-50%) scale(0.7); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
}
.bomb-feedback--pass {
  background: rgba(74,255,176,0.18); border: 1px solid rgba(74,255,176,0.5);
  color: var(--success);
}
.bomb-feedback--fail {
  background: rgba(255,170,68,0.18); border: 1px solid rgba(255,170,68,0.5);
  color: var(--warn);
}
.bomb-feedback--combo {
  background: rgba(240,180,41,0.20); border: 1px solid rgba(240,180,41,0.55);
  color: var(--gold, #e8b93f);
}
.bomb-feedback--escudo {
  background: rgba(79,163,224,0.20); border: 1px solid rgba(79,163,224,0.55);
  color: #4fa3e0;
}
.bomb-feedback--poder {
  background: rgba(232,185,63,0.16); border: 1px solid rgba(232,185,63,0.5);
  color: var(--gold, #e8b93f);
}
.bomb-feedback--poder-rival {
  background: rgba(224,122,122,0.18); border: 1px solid rgba(224,122,122,0.5);
  color: #e07a7a;
}
.bomb-feedback--explode {
  background: rgba(255,68,68,0.22); border: 1px solid rgba(255,68,68,0.6);
  color: var(--danger);
  font-size: 1.35rem;
}

/* ── Panel jugador activo (botones V/F) ── */
.bomb-answer-panel {
  padding: 0.5rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0));
  flex-shrink: 0;
}
.bomb-vf-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem;
}
.bomb-btn-vf {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem; padding: 0.85rem 0.5rem;
  border: 2px solid; border-radius: var(--radius-md);
  font-family: var(--font-body); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.18s ease;
  background: var(--bg-1);
}
.bomb-btn-vf:active { transform: scale(0.96); }
.bomb-btn-vf.disabled { opacity: 0.3; cursor: not-allowed; transform: none !important; }

.bomb-btn-v {
  border-color: var(--success);
  box-shadow: 0 0 14px rgba(74,255,176,0.3);
}
.bomb-btn-v:not(.disabled):active { background: rgba(74,255,176,0.12); }
.bomb-btn-f {
  border-color: var(--danger);
  box-shadow: 0 0 14px rgba(255,68,68,0.3);
}
.bomb-btn-f:not(.disabled):active { background: rgba(255,68,68,0.1); }

.bomb-vf-icon  { font-size: 1.5rem; line-height: 1; }
.bomb-btn-v .bomb-vf-icon { color: var(--success); }
.bomb-btn-f .bomb-vf-icon { color: var(--danger); }
.bomb-vf-label { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--text-pri); }

/* ── Panel de espera (vivo, no activo) ── */
.bomb-wait-panel {
  padding: 0.75rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bomb-wait-text {
  font-size: 0.9rem; color: var(--text-sec); text-align: center;
  padding: 0.75rem 1.25rem;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── Panel espectador (eliminado) ── */
.bomb-spectator-panel {
  padding: 0.75rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  flex-shrink: 0;
}
.bomb-spec-skull { font-size: 1.8rem; }
.bomb-spec-text  {
  font-size: 0.82rem; color: var(--danger); text-align: center;
  padding: 0.6rem 1rem;
  background: rgba(255,68,68,0.06); border: 1px solid rgba(255,68,68,0.2);
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════
   PANTALLA DE RESULTADOS — REDISEÑO v2
   ══════════════════════════════════════════════════════════ */

/* ── Respuesta correcta: más grande y visible ── */
.results-correct-wrap {
  background: var(--bg-1);
  border-bottom: 2px solid rgba(74,255,176,0.3);
  padding: 1.25rem 1.5rem 1rem;
  text-align: center;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 5;
}
.results-correct-label {
  font-size: 0.6rem; letter-spacing: 0.28em; font-weight: 700;
  color: var(--success); text-transform: uppercase; margin-bottom: 0.15rem;
}
.results-correct-num {
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 14vw, 5.5rem);
  color: var(--success);
  line-height: 1;
  text-shadow: 0 0 24px rgba(74,255,176,0.5);
  animation: numPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay: 0.1s;
}
.results-question-mini {
  font-size: 0.78rem; color: var(--text-sec); margin-top: 0.3rem;
  line-height: 1.45; padding: 0 0.5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Lista de jugadores ── */
.results-players {
  padding: 0.75rem 1rem 0;
  display: flex; flex-direction: column; gap: 0.55rem;
  flex-shrink: 0;
}

/* ── TARJETA DE RESULTADO v2 ── */
.rp-card2 {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.9rem;
  animation: fadeIn 0.3s ease both;
  transition: border-color 0.3s ease;
}
.rp-card2--local  { border-color: rgba(240,180,41,0.38); background: rgba(240,180,41,0.04); }
.rp-card2--winner { border-color: rgba(74,255,176,0.4);  background: rgba(74,255,176,0.04); }
.rp-card2--dead   { opacity: 0.45; border-color: rgba(255,68,68,0.2); }

/* Número de posición */
.rp2-rank {
  font-family: var(--font-head);
  font-size: 1.6rem; color: var(--text-dim);
  line-height: 1; flex-shrink: 0;
  width: 26px; text-align: center;
  padding-top: 2px;
}
.rp-card2--winner .rp2-rank { color: var(--success); }

/* Cuerpo de la tarjeta */
.rp2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }

/* Fila superior: avatar + nombre + respuesta */
.rp2-top {
  display: flex; align-items: center; gap: 0.65rem;
}
.rp2-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--accent);
  border: 1.5px solid var(--border-md);
}
.rp2-avatar--win  { color: var(--success); border-color: rgba(74,255,176,0.5); }
.rp2-avatar--dead { color: var(--danger);  border-color: rgba(255,68,68,0.35); }

.rp2-nameblock {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.05rem;
}
.rp2-name {
  font-size: 0.9rem; font-weight: 600; color: var(--text-pri);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp2-time { font-size: 0.68rem; color: var(--text-dim); }

/* Bloque de respuesta del jugador */
.rp2-answered {
  display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
  gap: 0.1rem;
}
.rp2-answered-label {
  font-size: 0.58rem; letter-spacing: 0.12em; color: var(--text-dim);
  text-transform: uppercase;
}
.rp2-answered-val {
  font-family: var(--font-head); font-size: 1.5rem; color: var(--text-sec);
  line-height: 1;
}
.rp2-answered-exact { color: var(--success); text-shadow: 0 0 10px rgba(74,255,176,0.6); }
.rp2-distance {
  font-size: 0.65rem; color: var(--text-dim); text-align: right; line-height: 1.2;
}

/* Fila de barra HP */
.rp2-hp-row {
  display: flex; flex-direction: column; gap: 0.3rem;
}
.rp2-hp-bar-wrap {
  height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden;
}
.rp2-hp-bar {
  height: 100%; border-radius: 3px;
  transition: width 1.4s cubic-bezier(0.4,0,0.2,1), background-color 0.5s ease;
}
.rp2-hp-nums {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem;
}
.rp2-hp-before { color: var(--text-dim); }
.rp2-hp-arrow  { color: var(--text-dim); font-size: 0.65rem; }
.rp2-hp-after  { font-weight: 700; }
.rp2-hp-delta  { margin-left: auto; font-weight: 700; font-size: 0.82rem; }
.rp2-hp-delta.positive { color: var(--success); }
.rp2-hp-delta.negative { color: var(--danger); }
.rp2-hp-delta.neutral  { color: var(--text-dim); }

/* Fila de razones/motivos */
.rp2-reasons {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.rp-reason {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 20px;
}
.reason-good { background: rgba(74,255,176,0.12); color: var(--success); }
.reason-bad  { background: rgba(255,68,68,0.12);  color: #ff8888; }
.reason-dead { background: rgba(255,68,68,0.12);  color: var(--danger); }

/* ── Caja "Tu resultado" rediseñada ── */
.results-local-damage {
  margin: 0.65rem 1rem 0;
  flex-shrink: 0;
}
.rld2-wrap {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid;
  display: flex; align-items: center; gap: 1rem;
  text-align: left;
}
.rld2-wrap.rld-positive {
  background: rgba(74,255,176,0.07);
  border-color: rgba(74,255,176,0.3);
}
.rld2-wrap.rld-negative {
  background: rgba(255,68,68,0.07);
  border-color: rgba(255,68,68,0.3);
}
.rld2-wrap.rld-neutral {
  background: var(--bg-1);
  border-color: var(--border-md);
}
.rld2-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.rld2-main {
  font-family: var(--font-head); font-size: 2rem; line-height: 1;
  flex-shrink: 0;
}
.rld-positive .rld2-main { color: var(--success); }
.rld-negative .rld2-main { color: var(--danger); }
.rld-neutral  .rld2-main { color: var(--text-sec); }
.rld2-lines {
  font-size: 0.75rem; color: var(--text-sec); line-height: 1.55;
  flex: 1;
}

/* ── Cuenta atrás ajustada ── */
.results-next {
  padding: 0.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  flex-shrink: 0; margin-top: auto;
}
.results-next-label { font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.results-next-count { font-family: var(--font-head); font-size: 2.2rem; color: var(--accent); line-height: 1; }

/* ══════════════ MODO CARRERA: CARRILES 2D ══════════════ */
/* Un carril por jugador (máx. 6). La ficha se desliza hacia la meta con
   una transición CSS. El host emite estado cada 250 ms, pero el DOM se
   construye una sola vez: si se reconstruyera, la ficha daría saltos
   en vez de deslizarse. */

.race-lane {
  --tok: var(--accent);
  position: relative;   /* ancla la celebración de confeti a este carril */
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  background: var(--surface, rgba(255,255,255,0.05));
  border: 1px solid transparent;
  transition: opacity 0.4s ease, border-color 0.3s ease;
}
.race-lane--local { border-color: var(--accent); }

.race-lane-head {
  display: flex; align-items: center; gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.race-lane-name {
  flex: 1; min-width: 0;
  font-size: 0.78rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.race-lane-crown { flex-shrink: 0; }
.race-lane-check { color: var(--success); font-weight: 800; flex-shrink: 0; }
.race-lane-racha {
  font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
  color: var(--gold, #e8b93f);
}
/* Espía (Fase 5): solo lo pinta el navegador de quien usó el poder —
   nadie más recibe este dato en su interfaz. */
.race-lane-espia {
  font-size: 0.64rem; font-weight: 800; flex-shrink: 0;
  color: #e07a7a;
  letter-spacing: 0.02em;
}
.race-lane-steps {
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem; font-weight: 700; flex-shrink: 0;
  color: var(--tok);
}

/* Pista: raíl + meta. El padding izquierdo deja sitio a la mitad de la
   ficha cuando está en el paso 0, para que no se recorte. */
.race-lane-track {
  display: flex; align-items: center; gap: 0.4rem;
  padding-left: 13px;
}
.race-lane-rail {
  position: relative; flex: 1; height: 10px; border-radius: 5px;
  background: rgba(255,255,255,0.10);
  /* 15 marcas = 15 pasos: el avance se puede CONTAR, no solo estimar */
  background-image: repeating-linear-gradient(90deg,
    transparent 0 calc(100% / 15 - 1px),
    rgba(255,255,255,0.16) calc(100% / 15 - 1px) calc(100% / 15));
}
.race-lane-trail {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, transparent, var(--tok));
  opacity: 0.55;
  transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.race-lane-token {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tok); color: #17130c;
  font-size: 0.6rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  transition: left 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.race-lane-goal { font-size: 0.95rem; flex-shrink: 0; }

/* Acierto: la ficha rebota (sustituye al salto de alegría 3D) */
.race-lane--up .race-lane-token { animation: raceTokenPop 0.6s ease; }
@keyframes raceTokenPop {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  40%      { transform: translate(-50%, -95%) scale(1.25); }
}

/* Fallo: sacudida lateral + destello rojo (sustituye al trompo 3D) */
.race-lane--down .race-lane-token { animation: raceTokenShake 0.8s ease; }
@keyframes raceTokenShake {
  0%, 100%      { transform: translate(-50%, -50%) rotate(0deg); }
  15%, 45%, 75% { transform: translate(-68%, -50%) rotate(-14deg); }
  30%, 60%, 90% { transform: translate(-32%, -50%) rotate(14deg); }
}
.race-lane--down { animation: raceLaneFlash 0.8s ease; }
@keyframes raceLaneFlash {
  0%, 100% { background: var(--surface, rgba(255,255,255,0.05)); }
  30%      { background: rgba(224,122,122,0.22); }
}

/* Racha armada (>= 3 aciertos seguidos): borde dorado permanente
   mientras dura, discreto — el badge 🔥 ya lleva la cifra. */
.race-lane--combo { border-color: var(--gold, #e8b93f); }

/* Acierto en modo bonus (delta +2): su propia animación, más marcada
   que el rebote normal, nunca a la vez que race-lane--up. */
.race-lane--combohit { animation: raceComboFlash 0.9s ease; }
@keyframes raceComboFlash {
  0%, 100% { background: var(--surface, rgba(255,255,255,0.05)); }
  30%      { background: rgba(232,185,63,0.28); }
}
.race-lane--combohit .race-lane-token { animation: raceComboPop 0.9s ease; }
@keyframes raceComboPop {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
  40%      { transform: translate(-50%, -95%) scale(1.35); box-shadow: 0 0 0 6px rgba(232,185,63,0.55), 0 2px 6px rgba(0,0,0,0.45); }
}

/* Cierre de partida: el ganador se destaca, el resto se atenúa */
.race-lane--win {
  border-color: var(--gold, #e8b93f);
  background: rgba(232,185,63,0.12);
}
.race-lane--win .race-lane-trail {
  background: linear-gradient(90deg, var(--gold-soft, #f5d98a), var(--gold, #e8b93f));
  opacity: 1;
}
.race-lane--dim { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .race-lane-trail, .race-lane-token { transition: none; }
  .race-lane--up .race-lane-token,
  .race-lane--down .race-lane-token,
  .race-lane--down,
  .race-lane--combohit .race-lane-token,
  .race-lane--combohit { animation: none; }
}

/* ══════════════ SALA DE ESPERA: ANTESALA + JUGADORES ══════════════ */

/* Panel dividido 70/30 (apilado en móvil) */
.lobby-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 1rem;
  align-items: start;
  padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom, 0));
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .lobby-split { grid-template-columns: 1fr; }
}

.lobby-left, .lobby-right {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}

/* ── Antesala: cómo se juega este modo ── */
.lobby-section-title {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}

.lobby-modo {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem 1rem;
}
.lobby-modo-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.lobby-modo-icono { font-size: 1.5rem; line-height: 1; }
.lobby-modo-nombre {
  font-family: var(--font-head, inherit);
  font-size: 1rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--accent);
}
.lobby-modo-intro {
  font-size: 0.84rem; line-height: 1.4;
  color: var(--text-sec); margin: 0 0 0.6rem;
}
.lobby-modo-reglas {
  margin: 0; padding-left: 1.1rem;
  display: flex; flex-direction: column; gap: 0.28rem;
}
.lobby-modo-reglas li { font-size: 0.8rem; line-height: 1.35; }

/* ── Botón LISTO ── */
.btn-lobby-ready {
  width: 100%;
  padding: 1rem;
  border: none; border-radius: 16px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #14100a;
  font-family: var(--font-head);
  font-size: 1.35rem; font-weight: 900; letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--cobalt-dim);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-lobby-ready:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cobalt-dim); }
.btn-lobby-ready.is-ready {
  background: var(--success); color: #072616;
  cursor: default; box-shadow: none;
}

/* ── Lista de jugadores ── */
.tribe-title {
  font-family: var(--font-head);
  font-size: 1rem; font-weight: 800; letter-spacing: 0.06em;
}
.tribe-list { display: flex; flex-direction: column; gap: 0.45rem; }
.tribe-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--paper);
}
.tribe-row--local { border-color: var(--accent); }
.tribe-row--empty { opacity: 0.45; border-style: dashed; }
.tribe-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #14100a;
  font-size: 0.66rem; font-weight: 800;
}
.tribe-row--empty .tribe-avatar { background: transparent; color: var(--text-dim); border: 1.5px dashed var(--border); }
.tribe-info  { flex: 1; min-width: 0; }
.tribe-name  {
  font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tribe-host {
  margin-left: 0.3rem;
  font-size: 0.56rem; font-weight: 800;
  padding: 0.1rem 0.35rem; border-radius: 6px;
  background: var(--accent); color: #14100a;
  vertical-align: middle;
}
.tribe-status {
  flex-shrink: 0;
  font-size: 0.62rem; font-weight: 800;
  padding: 0.25rem 0.45rem; border-radius: 8px;
  background: rgba(255,255,255,0.07); color: var(--text-sec);
  white-space: nowrap;
}
.tribe-status--ready { background: var(--success); color: #072616; }

/* El botón Iniciar deshabilitado debe verse claramente bloqueado */
#btn-start-game:disabled { opacity: 0.5; cursor: not-allowed; }

/* ══════════════ EL FAROL (mesa de apuestas) ══════════════ */

/* Fondo: la misma base negra cálida del resto del juego, con un halo
   ciruela que le da matiz propio sin salirse de la paleta. El oro se
   mantiene como color de identidad. Antes era fieltro verde jungla. */
.ban-escena {
  background:
    radial-gradient(ellipse at 50% 35%, #251a30 0%, #170f1e 55%, var(--bg-crema) 100%);
  color: var(--ink);
}
.ban-escena .eng-ronda-label,
.ban-escena .eng-phase-label { color: var(--gold-soft); }
.ban-escena .eng-timer {
  background: var(--bg-crema); color: var(--gold-soft);
  border: 2px solid var(--gold); border-radius: 10px;
  padding: 0.15rem 0.5rem; font-weight: 800;
}
.ban-escena .eng-scoreboard-title { color: var(--lila-tenue); }

/* ── POZO CENTRAL: racimo en el centro de la mesa ── */
/* ═══ ¿REAL O INVENTADO? (Juego Libre) ════════════════════════
   La afirmación manda: ocupa el centro y es lo más grande de la
   pantalla. Debajo, dos botones del mismo tamaño y el mismo peso —si
   uno pesara más que el otro, sería una pista. */
#screen-real-inventado {
  --ri-acento: #7ec8a9;
  background: var(--bg-0);
  padding-top: env(safe-area-inset-top, 0);
}

.ri-portada, .ri-fin {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.55rem; text-align: center; padding: 1.2rem 0;
}
.ri-intro { margin: 0; max-width: 30ch; color: var(--text-sec); font-size: 0.95rem; line-height: 1.5; }
/* El aviso de la portada: es la única instrucción que de verdad hace
   falta dar, así que se separa del resto sin gritar. */
.ri-intro--aviso {
  font-size: 0.85rem; color: var(--text-dim);
  border-top: 1px solid var(--rule); padding-top: 0.55rem; margin-top: 0.15rem;
}
.ri-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem;
  font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-dim);
  text-transform: uppercase; font-weight: 700; margin-bottom: 0.3rem;
}
.ri-btn { width: 100%; max-width: 22rem; }
.ri-aviso { font-size: 0.85rem; color: var(--text-sec); text-align: center; margin: 0.8rem 0 0; }

/* ── Una ronda ── */
.ri-ronda { display: flex; flex-direction: column; gap: 0.9rem; }
.ri-categoria {
  font-size: 0.6rem; letter-spacing: 0.2em; font-weight: 700;
  color: var(--ri-acento); text-transform: uppercase; text-align: center;
}
.ri-afirmacion {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: 1.22rem; line-height: 1.42; color: var(--text-pri);
  padding: 0.4rem 0.2rem;
}

/* Los dos botones: mismo tamaño, mismo peso, misma tipografía. La
   única diferencia entre ellos es la palabra que llevan escrita.
   NO añadir aquí un selector por opción (ni .ri-opcion--real, ni
   [data-real="1"], ni :first-child): en un modo de dos salidas,
   cualquier diferencia visual estable entre los botones es una pista
   gratis. Las únicas variantes son las de DESPUÉS de responder. */
.ri-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.ri-opcion {
  position: relative;
  padding: 1.1rem 0.6rem;
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink); background: var(--card);
  border: 2px solid var(--rule-md); border-radius: 16px;
  box-shadow: 0 4px 0 var(--wood-dark);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
}
.ri-opcion:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }
.ri-opcion:disabled { cursor: default; opacity: 0.75; }
.ri-opcion--acertada { border-color: var(--success); color: var(--success); opacity: 1; }
.ri-opcion--fallada  { border-color: var(--danger);  color: var(--danger);  opacity: 1; }
.ri-marca { margin-left: 0.4rem; font-size: 0.95rem; }

/* ── Feedback ── */
.ri-feedback {
  border-radius: 14px; padding: 0.85rem 1rem; border: 1px solid;
  display: flex; flex-direction: column; gap: 0.3rem;
  animation: ri-entra 0.18s ease-out;
}
.ri-feedback--bien { background: rgba(74,255,176,0.07); border-color: rgba(74,255,176,0.28); }
.ri-feedback--mal  { background: rgba(255,68,68,0.07);  border-color: rgba(255,68,68,0.28); }
.ri-feedback-titulo { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: 0.05em; }
.ri-feedback--bien .ri-feedback-titulo { color: var(--success); }
.ri-feedback--mal  .ri-feedback-titulo { color: var(--danger); }
.ri-feedback-dato { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-sec); }

/* ── Fin de partida ── */
.ri-racha-final {
  font-family: var(--font-head); font-size: 3.4rem; line-height: 1;
  color: var(--ri-acento); font-variant-numeric: tabular-nums;
}
.ri-racha-etq {
  margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim); font-weight: 700;
}

@keyframes ri-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ri-feedback { animation: none; }
  .ri-opcion { transition: none; }
}

/* ═══ ¿CUÁNTO NOS CONOCEMOS? (Con amigos) ═════════════════════
   Modo social: uno elige, los demás adivinan. Acento coral, distinto
   de los cuatro modos de Juego Libre y de los otros de Con amigos. */
#screen-conocemos {
  /* Rosa magenta. El coral de la Fase 1 (#ff8a6b) quedaba a 67 de
     distancia del --coral de PELIGRO (#ff5a3c): un acento de modo tan
     cerca del color de error se lee como si algo fuera mal. Este está
     a 85 o más de todos los demás acentos del proyecto, incluidos el
     violeta de ¿Antes o después? y el morado --hoja. */
  --cn-acento: #f06fa8;
  background: var(--bg-0);
  padding-top: env(safe-area-inset-top, 0);
}

/* Marcador siempre visible, bajo la cabecera. */
.cn-marcador {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.35rem 0.7rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.cn-punto {
  font-size: 0.75rem; color: var(--text-sec);
  font-variant-numeric: tabular-nums;
}
.cn-punto strong { color: var(--cn-acento); }
/* Quien gana no se marca solo con color: también con la corona. */
.cn-punto--gana::after { content: ' 👑'; }

.cn-ronda, .cn-resol, .cn-fin {
  display: flex; flex-direction: column; gap: 0.8rem;
}
.cn-fase {
  text-align: center;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--cn-acento);
}
.cn-enunciado {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: 1.15rem; line-height: 1.4; color: var(--text-pri);
}
.cn-eleccion {
  margin: 0; text-align: center; text-wrap: balance;
  font-family: var(--font-head); font-size: 1.25rem; line-height: 1.3;
  color: var(--cn-acento);
}

/* Las cuatro opciones comparten clase A PROPÓSITO: ninguna puede
   destacar sobre las otras, o dejaría de ser una elección sincera. */
.cn-opciones { display: flex; flex-direction: column; gap: 0.55rem; }
.cn-opcion {
  padding: 0.95rem 0.9rem;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 600;
  line-height: 1.35; text-align: center; text-wrap: balance;
  color: var(--ink); background: var(--card);
  border: 2px solid var(--rule-md); border-radius: 16px;
  box-shadow: 0 4px 0 var(--wood-dark);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
}
.cn-opcion:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }
.cn-opcion:disabled { cursor: default; opacity: 0.6; }
/* La propia, marcada con borde Y con una marca: nunca solo color. */
.cn-opcion--mia { border-color: var(--cn-acento); color: var(--cn-acento); opacity: 1; }
.cn-opcion--mia::after { content: ' ✓'; }

/* La fila de cerraduras: quién ha bloqueado ya su elección. Es la
   tensión de la ronda y no filtra nada — solo lleva nombres. El estado
   va con marca (✓ / ⋯) además de con color. */
.cn-listos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem;
}
.cn-ficha {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px; border: 1px solid var(--rule);
  font-size: 0.72rem; color: var(--text-dim);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cn-ficha--lista { border-color: var(--cn-acento); color: var(--cn-acento); }
.cn-ficha-marca { font-size: 0.8em; }

.cn-espera {
  min-height: 1.2rem; text-align: center;
  font-size: 0.8rem; color: var(--text-dim);
}

/* Resolución y clasificación */
.cn-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.cn-fila {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 12px; border: 1px solid var(--rule);
  font-size: 0.88rem;
}
.cn-fila--bien { border-color: rgba(74,255,176,0.28); background: rgba(74,255,176,0.06); }
.cn-fila--mal  { border-color: rgba(255,68,68,0.24);  background: rgba(255,68,68,0.05); }
.cn-marca { flex-shrink: 0; }
.cn-fila--bien .cn-marca { color: var(--success); }
.cn-fila--mal  .cn-marca { color: var(--danger); }
.cn-quien { font-weight: 700; color: var(--text-pri); }
.cn-dijo  { color: var(--text-sec); margin-left: auto; text-align: right; }
.cn-bonus { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-sec); }
.cn-fin-titulo {
  text-align: center; font-family: var(--font-head);
  font-size: 1.6rem; line-height: 1.2; color: var(--cn-acento);
}

@media (prefers-reduced-motion: reduce) {
  .cn-opcion, .cn-ficha { transition: none; }
}

/* ═══ ¿ANTES O DESPUÉS? (Juego Libre) ═════════════════════════
   Modo de racha: dos cosas y una línea de tiempo. Acento propio, ni
   el verde de ¿Real o inventado? ni el azul del gemelo de distancias. */
#screen-antes-despues {
  /* Violeta. Los otros modos de Juego Libre ya tienen el oro de
     ¿Cuánto tarda? (#f0b429), el azul de ¿A qué distancia está?
     (#4fa3e0) y el verde de ¿Real o inventado? (#7ec8a9). El dorado
     que llevaba este en la Fase 1 se confundía con el primero. */
  --ad-acento: #b48ce0;
  background: var(--bg-0);
  padding-top: env(safe-area-inset-top, 0);
}

.ad-portada, .ad-fin {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.55rem; text-align: center; padding: 1.2rem 0;
}
.ad-intro { margin: 0; max-width: 30ch; color: var(--text-sec); font-size: 0.95rem; line-height: 1.5; }
.ad-intro--aviso {
  font-size: 0.85rem; color: var(--text-dim);
  border-top: 1px solid var(--rule); padding-top: 0.55rem; margin-top: 0.15rem;
}
.ad-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem;
  font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-dim);
  text-transform: uppercase; font-weight: 700; margin-bottom: 0.3rem;
}
.ad-btn { width: 100%; max-width: 22rem; }
.ad-aviso { font-size: 0.85rem; color: var(--text-sec); text-align: center; margin: 0.8rem 0 0; }

/* ── Una ronda ── */
.ad-ronda { display: flex; flex-direction: column; gap: 0.9rem; }
.ad-pregunta {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: 1.1rem; line-height: 1.4; color: var(--text-pri);
  padding: 0.4rem 0.2rem 0;
}
.ad-ancla {
  margin: 0; text-align: center; font-size: 0.95rem; color: var(--text-sec);
}
.ad-ancla strong { color: var(--ad-acento); font-variant-numeric: tabular-nums; }

/* Los dos eventos se apilan y comparten clase A PROPÓSITO. NO añadir
   aquí un selector por lado (ni [data-valor="a"], ni :first-child):
   en un modo de dos salidas, cualquier diferencia visual estable
   entre los botones es una pista gratis. Las únicas variantes son las
   de DESPUÉS de responder. */
.ad-opciones { display: flex; flex-direction: column; gap: 0.5rem; }
.ad-opciones--fecha { flex-direction: row; }
.ad-opciones--fecha .ad-opcion { flex: 1; }
.ad-vs {
  text-align: center; font-family: var(--font-head); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
}
.ad-opcion {
  position: relative;
  padding: 1rem 0.9rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  line-height: 1.35; text-align: center; text-wrap: balance;
  color: var(--ink); background: var(--card);
  border: 2px solid var(--rule-md); border-radius: 16px;
  box-shadow: 0 4px 0 var(--wood-dark);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
}
.ad-opciones--fecha .ad-opcion {
  font-family: var(--font-head); font-size: 1.05rem; letter-spacing: 0.04em;
  padding: 1.1rem 0.6rem;
}
.ad-opcion:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }
.ad-opcion:disabled { cursor: default; opacity: 0.75; }
.ad-opcion--acertada { border-color: var(--success); color: var(--success); opacity: 1; }
.ad-opcion--fallada  { border-color: var(--danger);  color: var(--danger);  opacity: 1; }
.ad-marca { margin-left: 0.4rem; font-size: 0.95rem; }

/* ── Feedback: siempre con las fechas de verdad ── */
.ad-feedback {
  border-radius: 14px; padding: 0.85rem 1rem; border: 1px solid;
  display: flex; flex-direction: column; gap: 0.4rem;
  animation: ad-entra 0.18s ease-out;
}
.ad-feedback--bien { background: rgba(74,255,176,0.07); border-color: rgba(74,255,176,0.28); }
.ad-feedback--mal  { background: rgba(255,68,68,0.07);  border-color: rgba(255,68,68,0.28); }
.ad-feedback-titulo { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: 0.05em; }
.ad-feedback--bien .ad-feedback-titulo { color: var(--success); }
.ad-feedback--mal  .ad-feedback-titulo { color: var(--danger); }
/* El eje: las dos cosas reordenadas de la más antigua a la más
   reciente. Es la respuesta hecha imagen, y la seña de identidad de
   esta pantalla. El orden no se deja al color: cada hito lleva escrito
   "antes" o "después". */
.ad-eje {
  list-style: none; margin: 0; padding: 0 0 0 0.9rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  border-left: 2px solid var(--ad-acento);
}
.ad-hito { display: flex; flex-direction: column; gap: 0.1rem; position: relative; }
.ad-hito::before {
  content: ''; position: absolute;
  left: -1.32rem; top: 0.42rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--ad-acento);
}
.ad-hito-orden {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--ad-acento);
}
.ad-hito-texto { font-size: 0.88rem; line-height: 1.4; color: var(--text-sec); }
.ad-hito-anio {
  font-family: var(--font-head); font-size: 1rem;
  color: var(--text-pri); font-variant-numeric: tabular-nums;
}

/* ── Fin de partida ── */
.ad-racha-final {
  font-family: var(--font-head); font-size: 3.4rem; line-height: 1;
  color: var(--ad-acento); font-variant-numeric: tabular-nums;
}
.ad-racha-etq {
  margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim); font-weight: 700;
}

@keyframes ad-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ad-feedback { animation: none; }
  .ad-opcion { transition: none; }
}

/* ═══ MODOS DE MAGNITUDES (Juego Libre) ═══════════════════════
   Pantalla compartida por "¿Cuánto tarda?" y su modo gemelo. El acento
   lo elige [data-tema] para que los dos no se sientan el mismo modo. */
#screen-quiz-magnitudes {
  --qm-acento: var(--accent);
  background: var(--bg-0);
  padding-top: env(safe-area-inset-top, 0);
}
#screen-quiz-magnitudes[data-tema="tiempo"]    { --qm-acento: #f0b429; }
#screen-quiz-magnitudes[data-tema="distancia"] { --qm-acento: #4fa3e0; }

/* El icono de la cabecera hereda de .daily-star, que es dorado fijo. A
   un emoji le da igual —trae su propio color—, pero un glifo monocromo
   como ◈ saldría pintado con el acento del modo de tiempos. Aquí manda
   el acento del modo que esté abierto. */
#screen-quiz-magnitudes .daily-star { color: var(--qm-acento); }

/* Mismo ajuste de tamaño que en la tarjeta del menú, y por el mismo
   motivo. Va acotado al tema de distancias: el ⏳ del gemelo es un emoji
   y ya llena su caja, así que agrandarlo lo dejaría desproporcionado.
   En em, no en rem, para que siga al tamaño de la cabecera si cambia. */
#screen-quiz-magnitudes[data-tema="distancia"] .daily-star {
  font-size: 1.35em;
  line-height: 0.9;
}

.qm-progreso {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-sec); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.qm-portada, .qm-resultado {
  display: flex; flex-direction: column; gap: 0.7rem; text-align: center;
}
.qm-intro { margin: 0; color: var(--text-sec); line-height: 1.5; }
.qm-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem;
  font-size: 0.72rem; color: var(--text-dim);
}
.qm-btn { width: 100%; }
.qm-aviso { font-size: 0.85rem; color: var(--text-sec); text-align: center; margin: 0.6rem 0 0; }

/* ── Marcador de cinco casillas ──
   Seña visual del modo y, a la vez, lo que el contador de texto no
   dice: cuántas llevas bien. Nunca depende solo del color — cada
   casilla resuelta lleva su ✓ o su ✗ dentro. */
.qm-pasos {
  display: flex; justify-content: center; gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.qm-paso {
  width: 1.6rem; height: 1.6rem; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--rule-md);
  background: var(--bg-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; line-height: 1;
  color: var(--text-dim);
}
.qm-paso--ahora {
  border-color: var(--qm-acento);
  border-width: 3px;
  color: var(--qm-acento);
}
.qm-paso--bien { border-color: var(--success); color: var(--success); background: rgba(74,255,176,0.12); }
.qm-paso--mal  { border-color: var(--danger);  color: var(--danger);  background: rgba(255,68,68,0.12); }

/* ── Una ronda ── */
.qm-ronda { display: flex; flex-direction: column; gap: 0.7rem; }
.qm-categoria {
  font-size: 0.6rem; letter-spacing: 0.2em; font-weight: 700;
  color: var(--qm-acento); text-transform: uppercase; text-align: center;
}
.qm-enunciado {
  margin: 0; font-family: var(--font-head); font-size: 1.15rem;
  line-height: 1.3; text-align: center; color: var(--text-pri);
}
.qm-opciones { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.3rem; }
.qm-opcion {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.8rem 0.9rem; border-radius: var(--radius-md);
  background: var(--card); border: 1.5px solid var(--rule-md);
  color: var(--ink); font-size: 0.95rem; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.qm-opcion:hover:not(:disabled) { border-color: var(--qm-acento); }
.qm-opcion:disabled { cursor: default; }
.qm-opcion-letra {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-1); border: 1px solid var(--rule-md);
  font-size: 0.72rem; font-weight: 800; color: var(--text-sec);
}
.qm-opcion-texto { flex: 1; }
.qm-marca { font-weight: 800; font-size: 1rem; }
/* El resultado nunca depende solo del color: cada opción lleva su marca */
.qm-opcion--correcta { border-color: var(--success); background: rgba(74,255,176,0.10); }
.qm-opcion--correcta .qm-opcion-letra { border-color: var(--success); color: var(--success); }
.qm-opcion--correcta .qm-marca { color: var(--success); }
.qm-opcion--fallada  { border-color: var(--danger);  background: rgba(255,68,68,0.10); }
.qm-opcion--fallada .qm-opcion-letra { border-color: var(--danger); color: var(--danger); }
.qm-opcion--fallada .qm-marca { color: var(--danger); }

.qm-feedback {
  border-radius: var(--radius-md); padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-md); background: var(--card);
  border-left-width: 4px;
  animation: qmEntra 0.25s ease both;
}
@keyframes qmEntra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qm-feedback--bien { border-left-color: var(--success); }
.qm-feedback--mal  { border-left-color: var(--danger); }
.qm-feedback-titulo { font-weight: 800; font-size: 0.85rem; }
.qm-feedback--bien .qm-feedback-titulo { color: var(--success); }
.qm-feedback--mal  .qm-feedback-titulo { color: var(--danger); }
.qm-feedback-dato { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--text-sec); }

/* ── Resultado final ── */
.qm-marcador {
  font-family: var(--font-head); font-size: 3.4rem; line-height: 1;
  color: var(--qm-acento); font-variant-numeric: tabular-nums;
}
.qm-marcador span { font-size: 1.4rem; color: var(--text-dim); }
.qm-veredicto {
  margin: 0.1rem 0 0.5rem; max-width: 30ch;
  font-size: 1rem; font-weight: 600; line-height: 1.35;
  color: var(--text-pri); text-wrap: balance;
}
.qm-resultado-sub { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--text-sec); }

@media (prefers-reduced-motion: reduce) {
  .qm-feedback { animation: none; }
  .qm-opcion { transition: none; }
}

/* ── Tu dinero: panel fijo, siempre visible ──
   Va por encima del bote a propósito: el saldo propio era antes una fila
   más del marcador y el jugador tenía que buscarlo. */
.ban-yo {
  margin: 0.5rem auto 0.2rem;
  width: fit-content; max-width: 92%;
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px solid var(--rule-md);
  transition: border-color 0.25s ease;
}
.ban-yo-label {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em;
  color: var(--text-dim); white-space: nowrap;
}
.ban-yo-count {
  font-family: var(--font-head); font-size: 1.35rem; font-weight: 900;
  color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ban-yo-delta {
  font-size: 0.74rem; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ban-yo-delta--sube { color: var(--success); }
.ban-yo-delta--baja { color: var(--danger); }
.ban-yo--quebrado .ban-yo-count { color: var(--text-dim); }

/* El pulso al cambiar el saldo: solo transform y opacity. */
.ban-yo--sube { border-color: var(--success); animation: banYoPulso 0.55s ease both; }
.ban-yo--baja { border-color: var(--danger);  animation: banYoPulso 0.55s ease both; }
@keyframes banYoPulso {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ── Tu ronda: el resumen en primera persona ── */
.ban-resumen {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--card);
  border: 1.5px solid var(--rule-md);
  border-left-width: 4px;
  display: flex; flex-direction: column; gap: 0.3rem;
  animation: banResumenEntra 0.3s ease both;
}
@keyframes banResumenEntra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ban-resumen--gana   { border-left-color: var(--success); }
.ban-resumen--pierde { border-left-color: var(--danger); }
.ban-resumen--igual  { border-left-color: var(--silver); }
.ban-resumen-titulo {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.18em;
  color: var(--text-dim);
}
.ban-resumen-linea { margin: 0; font-size: 0.85rem; line-height: 1.45; }
.ban-resumen-nota  { font-size: 0.78rem; color: var(--text-sec); font-style: italic; }
.ban-resumen-total {
  margin-top: 0.25rem; padding-top: 0.4rem;
  border-top: 1px solid var(--rule-md);
  font-size: 0.92rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
}
.ban-resumen-neto { font-weight: 800; font-variant-numeric: tabular-nums; }
.ban-resumen--gana   .ban-resumen-neto { color: var(--success); }
.ban-resumen--pierde .ban-resumen-neto { color: var(--danger); }
.ban-resumen--igual  .ban-resumen-neto { color: var(--text-dim); }
.ban-mas   { color: var(--success); }
.ban-menos { color: var(--danger); }

/* Empate en la cima: la victoria se comparte. Compartido por todos los
   modos que pintan #final-ranking, de ahí el prefijo final- y no ban-. */
.final-empate {
  padding: 0.6rem 0.85rem; margin-bottom: 0.6rem;
  border-radius: 10px;
  background: rgba(74,255,176,0.12);
  border: 1px solid rgba(74,255,176,0.42);
  font-size: 0.82rem; line-height: 1.45; text-align: center;
}

/* Explicación del bote sobrante en el podio final */
.ban-reparto-final {
  padding: 0.6rem 0.85rem; margin-bottom: 0.6rem;
  border-radius: 10px;
  background: rgba(240,180,41,0.12);
  border: 1px solid rgba(240,180,41,0.4);
  font-size: 0.8rem; line-height: 1.45; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ban-yo--sube, .ban-yo--baja, .ban-resumen { animation: none; }
}

.ban-pot {
  margin: 0.4rem auto;
  width: fit-content;
  display: flex; flex-direction: column; align-items: center;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.42);
  border: 2px dashed var(--gold);
  box-shadow: 0 0 24px rgba(240,180,41,0.28);
}
.ban-pot-racimo { font-size: 1.3rem; line-height: 1; }
.ban-pot-label  { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.16em; color: var(--lila-tenue); }
.ban-pot-count  {
  font-family: var(--font-head); font-size: 1.6rem; font-weight: 900;
  color: var(--gold-soft); line-height: 1;
}

/* ── Mesa central ── */
.ban-mesa {
  max-width: 640px; margin: 0 auto; width: 100%;
  padding: 0.5rem 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}

/* Las cartas de la mesa eran papel blanco (#fffcf5): sobre la paleta
   nocturna se convierten en tarjetas oscuras con reborde dorado. */
.ban-pregunta {
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--rule-md);
  border-radius: 14px; padding: 0.8rem 1rem;
  box-shadow: 0 6px 0 rgba(0,0,0,0.45);
}
.ban-pregunta-cat  { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; color: var(--ink-dim); }
.ban-pregunta-enun { font-size: 1rem; font-weight: 700; line-height: 1.35; }

.ban-panel {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: rgba(0,0,0,0.28);
  border-radius: 14px; padding: 0.9rem;
}
.ban-panel-label { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.ban-panel-hint  { font-size: 0.72rem; color: var(--lila-tenue); }
.ban-btn { width: 100%; }

.ban-slider-row { display: flex; align-items: center; gap: 0.8rem; }
.ban-slider-row input[type="range"] { flex: 1; accent-color: var(--gold); }
.ban-slider-val {
  font-family: var(--font-head); font-size: 1.3rem; font-weight: 900;
  color: var(--gold-soft); min-width: 3.2rem; text-align: right;
}

.ban-espera  { text-align: center; font-size: 0.78rem; color: var(--lila-tenue); }
.ban-observa {
  text-align: center; padding: 1rem;
  background: rgba(0,0,0,0.35); border-radius: 14px;
  font-size: 0.85rem; color: var(--ink-soft);
}

/* ── Votación: cartas sobre el fieltro ── */
.ban-voto-label { text-align: center; }
.ban-opciones { display: flex; flex-direction: column; gap: 0.5rem; }
.ban-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 2px solid var(--rule);
  background: var(--card); color: var(--ink);
  font-size: 0.9rem; font-weight: 700; text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45);
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.ban-opcion:not(:disabled):hover  { transform: translateY(-2px); border-color: var(--hoja); }
.ban-opcion:not(:disabled):active { transform: translateY(1px); }
.ban-opcion:disabled { opacity: 0.55; cursor: not-allowed; }
.ban-opcion--mia { border-color: var(--danger); opacity: 0.6; }
.ban-opcion--elegida { border-color: var(--gold); opacity: 1; box-shadow: 0 0 14px rgba(240,180,41,0.55); }
.ban-opcion-tag {
  flex-shrink: 0; font-size: 0.58rem; font-weight: 800;
  padding: 0.15rem 0.4rem; border-radius: 6px;
  background: var(--danger); color: #1a0d08;
}

/* ── Resolución ── */
.ban-correcta {
  text-align: center; padding: 0.7rem 1rem;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--rule-md);
  border-radius: 12px; font-size: 0.9rem;
}
.ban-feed { display: flex; flex-direction: column; gap: 0.4rem; }
.ban-ev {
  padding: 0.55rem 0.8rem; border-radius: 10px;
  background: rgba(0,0,0,0.35); font-size: 0.8rem; line-height: 1.4;
}
.ban-ev--timo       { border-left: 3px solid var(--gold); }
.ban-ev--farol      { border-left: 3px solid var(--silver); }
.ban-ev--sabio      { border-left: 3px solid var(--success); }
.ban-ev--bancarrota { border-left: 3px solid var(--danger); }

/* ── La mesa (marcador de jugadores) ── */
.ban-prow {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.32);
  margin-bottom: 0.35rem;
}
.ban-prow--local { outline: 1.5px solid var(--gold); }
.ban-prow--bancarrota { opacity: 0.55; }
.ban-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #14100a;
  font-weight: 800; font-size: 0.72rem; flex-shrink: 0;
}
.ban-prow--bancarrota .ban-av { background: var(--silver-dim); color: var(--ink); }
.ban-prow-info { flex: 1; min-width: 0; }
.ban-prow-name {
  font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ban-prow-estado { font-size: 0.6rem; color: var(--danger); font-weight: 800; letter-spacing: 0.06em; }
.ban-prow-apuesta {
  font-size: 0.68rem; font-weight: 800; color: var(--gold-soft);
  background: rgba(240,180,41,0.16); border-radius: 8px; padding: 0.2rem 0.4rem;
  flex-shrink: 0;
}
.ban-prow-bananas {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem; font-weight: 800; color: var(--gold-soft); flex-shrink: 0;
}

/* ── Bananas voladoras (robo animado) ── */
.ban-fly-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 900;
  overflow: hidden;
}
.ban-fly {
  position: absolute;
  font-size: 1.25rem;
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.45, -0.25, 0.55, 1.2), opacity 0.95s ease-in;
  will-change: transform, opacity;
}

/* ══════════════ BOTÓN FLOTANTE "SALIR DE LA SALA" 🚪 ══════════════ */
.btn-leave-room {
  /* fixed + ancestro .screen con transform → flota anclado a SU pantalla,
     por encima del scroll del contenido */
  position: fixed;
  top: calc(0.6rem + env(safe-area-inset-top, 0));
  left: 0.6rem;
  z-index: 950;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--wood-dark), 0 6px 14px rgba(0,0,0,0.45);
  color: var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-leave-room:hover  { transform: translateY(-1px); border-color: var(--rule-md); }
.btn-leave-room:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-dark); }
/* En la mesa nocturna del Bananero el botón mantiene contraste */
.ban-escena .btn-leave-room { border-color: var(--gold); background: var(--card); }

/* ════════════════════════════════════════════════════════════
   CAPA DE RELIEVE GLOBAL
   (va al final a propósito: sobrescribe los estilos base con el
   trazo grueso y la sombra dura. Conserva la contundencia del
   diseño anterior, pero con negro cálido y reborde dorado en
   lugar de madera.)
   ════════════════════════════════════════════════════════════ */

/* ── Botones: trazo + sombra dura ──
   Sobre fondo claro bastaba un trazo negro; sobre negro cálido ese
   trazo desaparecería, así que el contorno pasa a ser dorado (lo que
   dibuja la silueta) y el negro se reserva para la sombra dura de
   debajo (lo que da el relieve). */
.btn-primary, .btn-secondary, .btn-mode-big, .btn-daily,
.daily-option, .bomb-btn-vf, .btn-lobby-ready, .daily-share-btn, .mom-carta, .qld-carta {
  border: 2px solid var(--rule-md);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--wood-dark), 0 8px 18px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease,
              border-color 0.15s ease;
}
.btn-primary:not(:disabled):active, .btn-secondary:not(:disabled):active,
.btn-mode-big:not(:disabled):active, .btn-daily:not(:disabled):active,
.daily-option:not(:disabled):active, .bomb-btn-vf:not(:disabled):active,
.btn-lobby-ready:not(:disabled):active, .daily-share-btn:active,
.mom-carta:not(:disabled):active, .qld-carta:not(:disabled):active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--wood-dark);
}

/* Los botones de relleno oro macizo llevan su relieve en oro
   profundo: sobre ellos un borde dorado no se distinguiría. */
.btn-primary, .btn-lobby-ready {
  border-color: var(--cobalt-dim);
  box-shadow: 0 5px 0 var(--cobalt-dim), 0 8px 18px rgba(0, 0, 0, 0.5);
}
.btn-primary:not(:disabled):active,
.btn-lobby-ready:not(:disabled):active { box-shadow: 0 1px 0 var(--cobalt-dim); }

/* Los botones secundarios y las opciones encienden el morado neón
   al recibir foco de teclado o al pasar por encima. */
.btn-secondary:hover, .daily-option:not(:disabled):hover,
.daily-share-btn:hover, .mom-carta:not(:disabled):hover,
.qld-carta:not(:disabled):hover { border-color: var(--hoja); }
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-mode-big:focus-visible, .btn-daily:focus-visible,
.daily-option:focus-visible, .bomb-btn-vf:focus-visible,
.btn-lobby-ready:focus-visible, .daily-share-btn:focus-visible,
.mom-carta:focus-visible, .qld-carta:focus-visible {
  outline: none;
  border-color: var(--hoja);
  box-shadow: 0 5px 0 var(--wood-dark), 0 0 0 3px rgba(227,123,230,0.28);
}

/* (La textura de rayas de los botones de modo se eliminó: los
   recuadros van completamente lisos y limpios.) */

/* ── Contenedores: cartas ilustradas ── */
.modal-card, .daily-question-card, .bomb-question-card,
.lobby-left, .lobby-right, .home-rules {
  position: relative;
  border: 2px solid var(--rule-md);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--wood-dark), 0 14px 28px rgba(0, 0, 0, 0.55);
}

/* Inputs con el mismo trazo. El foco es el morado neón del logo:
   es la señal de "esto es lo que estás usando ahora mismo". */
.game-input {
  border: 2px solid var(--rule-md);
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4);
}
.game-input:focus {
  border-color: var(--hoja);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(227,123,230,0.22);
}

/* (Los detalles de selva —🌿 y 🍃 en las esquinas de modales,
   tarjetas y paneles del lobby— se retiraron con el cambio de
   paleta: las esquinas quedan limpias.) */

/* ── Overlay de carga ── */
.loading-overlay { background: rgba(8, 6, 4, 0.9); }
.loading-text { color: var(--gold-soft); font-weight: 700; }

/* ── El marcador del pozo y elementos dorados usan el plátano ── */
.daily-streak-badge { border: 2px solid var(--rule-md); box-shadow: 0 3px 0 var(--wood-dark); }

/* ══════════════ LA CADENA (modo 'calculo') ══════════════
   La regla del modo manda sobre el diseño: durante la secuencia NO
   puede haber nada en pantalla salvo la operación en curso, su
   posición y el tiempo. Por eso .calc-foco esconde la cabecera y el
   anuncio: cualquier elemento extra ayuda a hacer trampa mental.
   Oro = identidad (tiempo), morado = acento (posición y foco). */

/* ── Modo foco: solo la secuencia ── */
#screen-daily.calc-foco .daily-header,
#screen-daily.calc-foco .ad-slot--daily { display: none !important; }
#screen-daily.calc-foco .daily-body { padding-top: 0.5rem; }

.calc-portada { text-align: center; }
.calc-portada-titulo {
  font-family: var(--font-head, inherit);
  font-size: 1.15rem; font-weight: 800; color: var(--gold);
  margin-bottom: 0.5rem;
}
.calc-portada-texto { font-size: 0.9rem; line-height: 1.45; color: var(--text-sec); }
.calc-portada-aviso {
  margin-top: 0.6rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger, #ff5a3c);
}

.calc-btn-primario {
  width: 100%; margin-top: 1rem; padding: 1rem;
  border: none; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #14100a; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em;
}

/* Escena de la secuencia: SOLO la operación en curso. Nada más.
   Cualquier elemento extra aquí rompería el modo. */
.calc-escena {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.9rem, 4vh, 1.6rem);
  min-height: 62vh; text-align: center; padding: 0 0.5rem;
}
.calc-posicion {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--neon-rosa);
}

/* La operación: lo único que el jugador debe poder leer de un vistazo.
   tabular-nums evita que las cifras bailen de ancho al cambiar de paso. */
.calc-operacion {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.2rem, 21vw, 6rem);
  font-weight: 800; line-height: 1;
  color: var(--ink); letter-spacing: 0.01em;
  white-space: nowrap;
  min-height: 1.1em;                 /* el hueco no salta durante el corte */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.96);
}
/* Entrada breve: que se NOTE el cambio sin robar tiempo de lectura */
.calc-operacion.calc-op-in {
  opacity: 1; transform: scale(1);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.calc-barra {
  width: min(320px, 84%); height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.calc-barra-fill {
  height: 100%; width: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}

/* ── Fase de respuesta ── */
.calc-pregunta {
  font-size: 1rem; font-weight: 700; color: var(--text-sec);
  max-width: 22ch; line-height: 1.35;
}
.calc-input {
  width: min(260px, 86%); padding: 0.85rem 0.6rem;
  border-radius: 16px; border: 2px solid var(--hoja);
  background: var(--bg-1); color: var(--ink);
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 12vw, 2.6rem); font-weight: 800; text-align: center;
}
.calc-input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.18);
}
.calc-cuenta {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 800; color: var(--gold-soft);
  min-width: 2.5ch;                  /* no salta al pasar de 10 a 9 */
}
/* Últimos tres segundos: el número avisa sin animación que distraiga */
.calc-cuenta.calc-cuenta-urgente { color: var(--danger); }

/* ── Multijugador: cabecera, marcador y resolución de ronda ── */
#screen-calculo.calc-foco .calc-mp-header { display: none; }

.calc-mp-header {
  display: flex; justify-content: center; align-items: center;
  padding: 0.75rem 0.75rem 0.25rem;
}
.calc-mp-ronda {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em;
  color: var(--gold-soft);
}
.calc-mp-marcador {
  display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
  padding: 0 0.75rem 0.5rem;
}
.calc-mp-jug {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 20px; padding: 0.25rem 0.6rem;
  font-size: 0.72rem; font-weight: 700;
}
.calc-mp-jug--yo { border-color: var(--hoja); }
.calc-mp-jug--fuera { opacity: 0.4; }
.calc-mp-ronda--desempate { color: var(--neon-rosa); }
.calc-mp-nombre { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-mp-rondas {
  font-family: var(--font-mono, monospace);
  font-weight: 800; color: var(--gold);
}
.calc-mp-body { padding: 0 0.75rem 1rem; }
.calc-mp-espera { font-size: 0.78rem; color: var(--text-dim); min-height: 1.2em; }

.calc-mp-gana {
  text-align: center; font-size: 1rem; font-weight: 800;
  color: var(--gold-soft); margin-bottom: 0.3rem;
}
.calc-mp-real { text-align: center; font-size: 0.85rem; color: var(--text-sec); margin-bottom: 0.6rem; }
.calc-mp-filas { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; }
.calc-mp-fila {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem; border-radius: 10px;
  background: var(--bg-1); border: 1px solid var(--border);
  font-size: 0.82rem;
}
.calc-mp-fila--gana { border-color: var(--gold); background: rgba(240,180,41,0.10); }
.calc-mp-fila .calc-mp-nombre { flex: 1; max-width: none; }
.calc-mp-resp {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; font-weight: 800;
}
.calc-mp-marca { width: 3.5ch; text-align: right; font-size: 0.75rem; color: var(--text-dim); }

/* La solución: aquí SÍ se enseñan todos los resultados intermedios */
.calc-solucion {
  margin-top: 1rem; padding: 0.8rem;
  border-radius: 14px; background: var(--bg-1); border: 1px solid var(--border);
}
.calc-sol-titulo {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.5rem;
}
.calc-sol-fila {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0; border-top: 1px solid var(--border);
  font-family: var(--font-mono, monospace); font-size: 0.85rem;
}
.calc-sol-n { width: 1.4rem; flex-shrink: 0; color: var(--text-dim); font-size: 0.75rem; }
.calc-sol-op { flex: 1; min-width: 0; color: var(--text-sec); }
.calc-sol-res { font-weight: 800; color: var(--ink); }
.calc-sol-final { border-top-width: 2px; border-top-color: var(--gold); }
.calc-sol-final .calc-sol-res { color: var(--gold-soft); font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  .calc-operacion.calc-op-in { transition: none; }
  .calc-barra-fill { transition: none !important; }
}

/* ══════════════ GRAN CONCURSO: HOLD-TO-BET ══════════════ */

/* Hold-to-bet: sin gestos de scroll/zoom sobre los botones ± */
.cc-step {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Racha del concurso en las estadísticas */
.cc-stats-streak {
  margin-top: 10px;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}

/* (La cartera global de la cabecera de Retos Diarios se retiró: ahora
   cada reto muestra SU racha en su botón 🔥 / 🏆.) */

/* ════════════════════════════════════════════════════════════
   FONDOS DEL HOME Y DE LAS PANTALLAS DE NAVEGACIÓN
   Las ilustraciones de selva se eliminaron del repositorio con el
   rebranding; el CSS ya no carga ninguna imagen de fondo.
   En su lugar, el mismo negro cálido del resto del
   juego con un halo dorado muy tenue arriba y un reflejo morado
   abajo, que dan profundidad sin competir con las tarjetas.
   showMenu() sigue alternando .bg-principal / .bg-amigos; ahora
   ambas comparten fondo.
   ════════════════════════════════════════════════════════════ */
#screen-home.bg-principal,
#screen-home.bg-amigos,
#screen-lobby, #screen-winner, #screen-dead {
  background-color: var(--bg-crema) !important;
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 0%,   rgba(240,180,41,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 100% 55% at 50% 100%, rgba(190,51,202,0.08) 0%, transparent 65%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* (Aquí había un `#screen-home .home-content { position: relative;
   z-index: auto; }` que repetía el position de la regla base y le
   contradecía el z-index. Ganaba este, así que el valor efectivo era
   `auto`; retirarlo junto con aquel `z-index: 1` deja el mismo
   resultado con una regla menos. El contenido sigue por encima de
   .home-bg-grid por orden del DOM, que es lo que de verdad lo ponía
   ahí: los dos son posicionados y el panel viene después.) */

/* La retícula tenue vuelve a verse: antes se ocultaba porque
   estorbaba encima de las fotografías de selva. */
#screen-home.bg-principal .home-bg-grid,
#screen-home.bg-amigos .home-bg-grid { display: block; }

/* ════════════════════════════════════════════════════════════
   INSTRUCCIONES DE LOS MODOS
   ════════════════════════════════════════════════════════════ */

/* ── Retos Diarios: tarjeta + botón "?" a su derecha ── */
.daily-card-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.daily-card-row .btn-mode-big { flex: 1; min-width: 0; }

/* Columna de los dos botones circulares a la derecha de la tarjeta:
   arriba "?" (instrucciones), debajo 🔥 racha / 🏆 récords */
.daily-side-btns {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.daily-info-toggle, .daily-stat-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid var(--wood-dark);
  background: var(--card);
  color: var(--ink);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--wood-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.daily-info-toggle:active, .daily-stat-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--wood-dark);
}
/* Cuando el botón se llena de oro, el texto pasa a oscuro */
.daily-info-toggle.open { background: var(--banana); color: #14100a; }
.daily-stat-btn { background: var(--banana); color: #14100a; }
.daily-stat-btn:hover { filter: brightness(1.06); }

/* (Las lianas/barras separadoras se eliminaron: los modos se separan
   solo con espacio limpio — ver el gap de .home-actions.) */

/* ── Botón "?" circular junto a los títulos de sección ── */
.header-info-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid var(--wood-dark);
  background: var(--card);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--wood-dark), 0 6px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.header-info-btn:hover  { background: var(--banana); color: #14100a; }
.header-info-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--wood-dark); }

/* Lista de puntos dentro del modal de información */
.info-modal-list { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.info-modal-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--text-sec);
}
.info-modal-item::before { content: '▸'; flex-shrink: 0; color: var(--gold); }

/* ── Modal de racha / récords ── */
.stat-body { text-align: center; padding: 0.4rem 0 0.2rem; }
.stat-big {
  font-family: var(--font-head);
  font-size: 3.2rem; font-weight: 900; line-height: 1;
  color: var(--gold-soft);
  text-shadow: 0 0 22px rgba(240, 180, 41, 0.45);
  margin-bottom: 0.5rem;
}
.stat-line { font-size: 0.9rem; color: var(--text-sec); line-height: 1.6; }
.stat-note { font-size: 0.74rem; color: var(--text-dim); margin-top: 0.4rem; }

/* Recuadro colapsable: despliegue suave hacia abajo (grid 0fr→1fr) */
.daily-info-box {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, margin 0.3s ease;
  margin: 0;
}
.daily-info-box.open { grid-template-rows: 1fr; margin: 0.35rem 0 0.15rem; }
.daily-info-inner {
  overflow: hidden;
  min-height: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-sec);
  background: var(--card);
  border-radius: 12px;
  padding: 0 0.85rem;
  transition: padding 0.3s ease, border-width 0.3s ease;
}
.daily-info-box.open .daily-info-inner { padding: 0.65rem 0.85rem; }

/* ── Crear/Unirse a Sala: panel de instrucciones detalladas ── */
.modo-instrucciones {
  margin-top: 1.4rem;
  background: var(--card);
  border: 3px solid var(--wood-dark);
  border-radius: 18px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.6);
  padding: 1rem 1.1rem;
}
.modo-instr-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  /* Dorado de marca, el mismo que el resto de titulares */
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.modo-instr-text {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-sec);
}

/* ── Fondo: claro de selva con dosel vegetal arriba y abajo ── */
/* (El dosel vegetal de body::after se eliminó: al generarse como
   último hijo de <body> se pintaba POR ENCIMA de las pantallas y
   teñía/tapaba las imágenes de fondo del menú.) */

/* ════════════════════════════════════════════════════════════
   PULIDO VISUAL "SELVA LIMPIA" 🌿
   Marca compacta, tarjetas de madera flotantes y legibilidad
   sobre los fondos fotográficos.
   ════════════════════════════════════════════════════════════ */

/* ── Cabecera de marca: logo pequeño + Política de Privacidad ──
   (fixed dentro de #screen-home, que tiene transform → queda anclada
   a SU pantalla y desaparece con ella) */
/* Anclado a la PANTALLA. En el HTML vive FUERA de #menu-main, así que
   su referencia de posicionamiento es #screen-home (inset:0 = todo el
   viewport) y no .home-content, que está centrado (max-width:480px;
   margin:0 auto) — ahí era donde el logo acababa "centrado". Al estar
   fuera del menú, ningún flexbox suyo puede afectarle. */
.home-brand {
  position: absolute !important;
  top: 1.5rem !important;
  left: 1.5rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 999 !important;
}
/* Solo visible en el menú principal (lo alterna aplicarFondoHome) */
#screen-home:not(.brand-visible) .home-brand { display: none !important; }
.home-brand picture { display: block; flex-shrink: 0; line-height: 0; }
.home-brand-icon {
  width: 50px; height: 50px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
  flex-shrink: 0;
}
.home-brand-privacy {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(22, 17, 11, 0.92);
  border: 2px solid var(--rule-md);
  box-shadow: 0 2px 0 var(--wood-dark);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.home-brand-privacy:hover  { background: var(--banana); color: #14100a; }
.home-brand-privacy:active { transform: translateY(2px); box-shadow: none; }

/* Hueco superior para que el contenido no pise la cabecera de marca */
#menu-main { padding-top: 6rem; }

/* ── Título central: grande e imponente sobre la ilustración ── */
#menu-main .home-title-block {
  margin-top: auto;          /* empuja el bloque al centro vertical… */
  padding-top: 0;
}
#menu-main .home-actions { margin-bottom: auto; }  /* …y los botones justo debajo */

/* ══ Título de portada: oro luminoso sobre el negro cálido ══
   · paint-order: stroke fill → el contorno se dibuja DETRÁS del
     relleno, así el trazo crece hacia fuera y no deforma el interior.
   · El trazo negro se conserva (más fino) para despegar las letras
     del halo dorado del fondo; el brillo lo aporta el text-shadow. */

/* ── TÍTULO "SAPIENS": oro brillante + resplandor ── */
#menu-main .home-title-main {
  font-size: clamp(3.4rem, 14vw, 5.6rem);
  letter-spacing: 0.05em;
  color: var(--gold-soft) !important;
  -webkit-text-stroke: 3px #050302 !important;
  paint-order: stroke fill !important;
  /* Halo ambiental de siempre + un glow ceñido a la letra, muy sutil,
     del mismo dorado que el propio texto (--gold-soft). */
  text-shadow: 0 0 30px rgba(240, 180, 41, 0.45), 0 0 1px rgba(255, 215, 94, 0.25) !important;
}

/* ── FRASES: variante dorada arriba y debajo, idéntica entre las dos ──
   --gold-title-variant es --gold-soft con ~13% menos luminosidad:
   mismo tono dorado que el título, pero claramente distinguible. */
#menu-main .home-title-eyebrow {
  color: var(--gold-title-variant) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 0 16px rgba(222, 187, 82, 0.4) !important;
}
#menu-main .home-title-sub {
  color: var(--gold-title-variant) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}
#menu-main .home-title-eyebrow {
  font-family: var(--font-head);
  font-size: clamp(0.95rem, 3.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 0.35rem;
}
#menu-main .home-title-sub {
  font-size: clamp(1.05rem, 3.8vw, 1.5rem);
  font-weight: 600;
  margin-top: 0.45rem;
}

/* ── Espacio limpio entre modos (sustituye a las lianas/barras) ── */
.home-actions { gap: 2rem; }
/* En Retos Diarios cada tarjeta va pegada a SU desplegable, y son los
   bloques los que se separan 2rem entre sí. */
#menu-daily .home-actions { gap: 0; }
#menu-daily .daily-info-box     { margin: 0 0 2rem; }
#menu-daily .daily-info-box.open { margin: 0.5rem 0 2rem; }

/* ── Tarjetas de modo: superficie oscura + reborde dorado ── */
.btn-mode-big, .btn-daily, .btn-mode, .modo-instrucciones, .modal-card,
.daily-info-inner, .daily-info-toggle, .daily-stat-btn, .header-info-btn {
  background-color: var(--card) !important;
  background-image: none !important;   /* sin rayas ni texturas */
  border-color: var(--rule-md) !important;
}
.btn-mode-big, .btn-daily, .btn-mode, .modo-instrucciones, .modal-card {
  border-width: 2px !important;
  border-style: solid !important;
  box-shadow: 0 5px 0 var(--wood-dark), 0 14px 28px rgba(0, 0, 0, 0.55) !important;
}
.btn-mode-big:hover, .btn-daily:hover, .btn-mode:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 6px 0 var(--wood-dark), 0 16px 32px rgba(0, 0, 0, 0.6) !important;
}
.btn-mode-big:active, .btn-daily:active, .btn-mode:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--wood-dark), 0 6px 14px rgba(0, 0, 0, 0.5) !important;
}
/* Botones circulares "?" / 🔥 / 🏆 */
.daily-info-toggle, .daily-stat-btn, .header-info-btn {
  border-width: 2px !important;
  box-shadow: 0 3px 0 var(--wood-dark) !important;
}
.daily-stat-btn, .daily-info-toggle.open {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* Textos de las tarjetas: crema de alto contraste */
.btn-mode-big .bmb-title, .btn-daily .btn-daily-label,
.btn-mode .btn-mode-title { color: var(--ink); }
.btn-mode-big .bmb-sub, .modo-instr-text, .daily-info-inner { color: var(--ink-soft); }

/* ── Desplegables del menú principal ── */
.home-details {
  background: rgba(22, 17, 11, 0.94);
  border: 2px solid var(--rule-md);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--wood-dark);
  overflow: hidden;
}
.home-details-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold);
  display: flex; align-items: center; gap: 0.4rem;
  user-select: none;
}
.home-details-summary::-webkit-details-marker { display: none; }
.home-details-summary::after {
  content: '▾';
  margin-left: auto;
  transition: transform 0.2s ease;
}
.home-details[open] .home-details-summary::after { transform: rotate(180deg); }
.home-details-text {
  padding: 0 0.9rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── Tarjetas de modos/retos: trazo oscuro + flotando sobre el fondo ── */
.btn-mode-big, .btn-daily, .modo-instrucciones, .home-rules, .modal-card {
  border: 2px solid var(--rule-md);
  box-shadow: 0 5px 0 var(--wood-dark), 0 14px 28px rgba(0, 0, 0, 0.55);
}
/* El desplegable de instrucciones NO lleva ese borde fijo: al estar
   colapsado (altura 0) el borde seguía pintándose como una barra
   entre tarjetas. Solo se dibuja cuando está abierto. */
.daily-info-inner { border: 0 solid var(--rule-md); }
.daily-info-box.open .daily-info-inner { border-width: 2px; }
/* Texto de alto contraste dentro de las tarjetas */
.btn-mode-big .bmb-title, .btn-daily .btn-daily-label { color: var(--ink); }
.btn-mode-big .bmb-sub,   .modo-instr-text,
.daily-info-inner        { color: var(--ink-soft); }

/* ── Botón volver y títulos: píldora oscura + reborde dorado ── */
.btn-back {
  background: rgba(22, 17, 11, 0.92);
  border: 2px solid var(--rule-md);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--wood-dark), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.btn-back:active { color: var(--gold); background: rgba(22, 17, 11, 0.92); }
.submenu-title {
  background: rgba(22, 17, 11, 0.9);
  border: 2px solid var(--rule-md);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  color: var(--gold);
  text-shadow: none;
  box-shadow: 0 3px 0 var(--wood-dark), 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* ── Cabecera del lobby: código de sala destacado en oro ── */
.lobby-header {
  background: rgba(22, 17, 11, 0.92);
  border: 2px solid var(--rule-md);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--wood-dark), 0 14px 28px rgba(0, 0, 0, 0.55);
  padding: 0.9rem 1.2rem;
  margin: 0.75rem 1rem 0.5rem;
}
.lobby-header .lobby-tag,
.lobby-header .lobby-hint { color: var(--ink-dim); }
.lobby-header .lobby-code {
  color: var(--gold-soft);
  text-shadow: 0 0 24px rgba(240, 180, 41, 0.4);
}

/* ══════════════ PIE DE PÁGINA DEL SITIO (portada) ══════════════ */
.site-footer {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  z-index: 3;
  background: rgba(12, 9, 6, 0.94);
  border-top: 1px solid var(--rule);
  color: var(--ink);
  /* SIN margen mágico, y que no vuelva. Aquí hubo un `margin-top` que
     creció de 2,5rem a 8, a 12, a 13 y a 14rem, un empujón por cada
     tarjeta nueva, y nunca llegó: intentaba compensar a mano el
     contenido que .home-content desbordaba fuera de su caja (ver la
     nota larga en .home-content). Arreglado el desbordamiento, al pie
     lo empuja el propio contenido. Si algún día vuelve a solaparse, el
     fallo está arriba y no aquí: subir este número es exactamente el
     parche que ya falló cinco veces. _layout.js lo vigila. */
  margin-top: 0;
  padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0));
  font-family: 'Inter', system-ui, sans-serif;
}
.site-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.site-footer-col { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem;
}
.site-footer-col a {
  color: var(--ink-soft); text-decoration: none; font-size: 0.85rem; transition: color 0.15s;
}
.site-footer-col a:hover { color: var(--gold-soft); }
.site-footer-copy {
  max-width: 900px; margin: 1.75rem auto 0; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  text-align: center; font-size: 0.78rem; color: var(--ink-dim);
}

/* ══════════════════════════════════════════════════════════════
   AJUSTES: BOTÓN Y PANEL
   El botón es el espejo de .home-brand en la esquina opuesta y se
   oculta en los submenús por el mismo motivo que la marca: allí
   chocaría con el botón "?" de la cabecera.
   ══════════════════════════════════════════════════════════════ */

.home-settings {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rule-md);
  background: var(--card);
  color: var(--gold);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.home-settings:hover  { border-color: var(--gold); }
.home-settings:active { transform: scale(0.92); }
/* Solo visible en el menú principal (lo alterna aplicarFondoHome) */
#screen-home:not(.brand-visible) .home-settings { display: none; }

.ajustes-body { display: flex; flex-direction: column; gap: 0.35rem; }

.ajuste-fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.ajuste-fila:last-of-type { border-bottom: none; }

.ajuste-texto  { flex: 1; min-width: 0; text-align: left; }
.ajuste-nombre { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.ajuste-nota   { font-size: 0.78rem; color: var(--ink-dim); margin-top: 0.15rem; }

/* Interruptor: la bola se mueve con transform, nunca con left */
.ajuste-switch {
  flex-shrink: 0;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid var(--rule-md);
  background: var(--paper-3);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ajuste-switch-bola {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.18s ease, background 0.18s ease;
}
.ajuste-switch[aria-checked="true"] {
  background: var(--cobalt-dim);
  border-color: var(--gold);
}
.ajuste-switch[aria-checked="true"] .ajuste-switch-bola {
  background: var(--gold-soft);
  transform: translateX(22px);
}

.ajuste-aviso {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-dim);
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════
   MOTOR DE EFECTOS VISUALES — utilidades comunes
   Solo transform y opacity. Las clases las pone y las quita
   sapiensFx.js; aquí vive únicamente la animación.
   ══════════════════════════════════════════════════════════════ */

@keyframes fxDestello {
  0%   { transform: scale(1);    opacity: 1; }
  35%  { transform: scale(1.06); opacity: 0.85; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes fxSacudida {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-2px); }
}
@keyframes fxPulso {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.72; }
}
@keyframes fxEntrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fxSalida {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes fxCaida {
  from { transform: translate3d(0, -10vh, 0) rotate(0deg);   opacity: 1; }
  to   { transform: translate3d(0, 105vh, 0) rotate(540deg); opacity: 0; }
}

.fx-destello { animation: fxDestello 0.42s ease both; }
.fx-sacudida { animation: fxSacudida 0.42s ease both; }
.fx-pulso    { animation: fxPulso 0.6s ease both; }
.fx-entrada  { animation: fxEntrada 0.32s ease both; }
.fx-salida   { animation: fxSalida 0.26s ease both; }

.fx-celebracion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
}
.fx-celebracion i {
  position: absolute;
  top: 0;
  width: 9px;
  height: 14px;
  background: var(--gold);
  border-radius: 2px;
  animation-name: fxCaida;
  animation-timing-function: linear;
  animation-fill-mode: both;
  will-change: transform, opacity;
}
.fx-celebracion i:nth-child(3n)   { background: var(--gold-soft); }
.fx-celebracion i:nth-child(3n+1) { background: var(--moss); }

/* ══════════════════════════════════════════════════════════════
   APAGADO GLOBAL DE EFECTOS
   Dos vías que hacen lo mismo: la preferencia del usuario (clase
   .fx-off en <html>, que pone sapiensFx.js) y la del sistema.
   Se dejan fuera las animaciones de carga: informan de que algo
   está pasando y no son decoración.
   ══════════════════════════════════════════════════════════════ */

.fx-off .fx-destello,
.fx-off .fx-sacudida,
.fx-off .fx-pulso,
.fx-off .fx-entrada,
.fx-off .fx-salida { animation: none !important; }
.fx-off .fx-celebracion { display: none !important; }

/* Transiciones de la interfaz general (Fase 2): cambio de pantalla,
   apertura/cierre de modal, toast de error. No son .fx-*: existían
   desde antes de este motor, pero son igual de "efecto visual", así
   que también obedecen el interruptor y prefers-reduced-motion. */
.fx-off .screen,
.fx-off .modal-overlay, .fx-off .modal-overlay.hidden,
.fx-off .modal-card,
.fx-off .error-toast, .fx-off .error-toast.hidden { transition: none !important; }

/* Decoración en bucle infinito de antes de este motor: mismo criterio. */
.fx-off .eng-protag-icon,
.fx-off .eng-timer--danger,
.fx-off .cc-timer-low,
.fx-off .bomb-turn-banner--danger,
.fx-off .bomb-timer--danger,
.fx-off .screen-flash-red,
.fx-off .dead-skull,
.fx-off .winner-crown { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .fx-destello, .fx-sacudida, .fx-pulso,
  .fx-entrada, .fx-salida { animation: none !important; }
  .fx-celebracion { display: none !important; }

  .screen,
  .modal-overlay, .modal-overlay.hidden,
  .modal-card,
  .error-toast, .error-toast.hidden { transition: none !important; }

  /* Decoración en bucle infinito que hoy corre siempre */
  .eng-protag-icon,
  .eng-timer--danger,
  .cc-timer-low,
  .bomb-turn-banner--danger,
  .bomb-timer--danger,
  .dead-skull,
  .winner-crown { animation: none !important; }

  /* Un solo disparo (no en bucle), pero anima background y es un
     parpadeo real: la Fase de La Diana es el momento de cerrarlo. */
  .screen-flash-red { animation: none !important; }

  /* Grupos colapsables del Duelo de Categorías: sin transición, el
     grupo se abre/cierra directamente al estado final. */
  .duelo-grupo-panel, .duelo-grupo-flecha { transition: none !important; }
}