/* ================================================================
       ROOT VARIABLES
    ================================================================ */
    :root {
      /* Colores base dinámicos y alegres (Estilo Trivial) */
      --bg: #150935; /* Failsafe */
      --bg-grad1: #411175;
      --bg-grad2: #160a33;
      --bg-grad3: #080517;
      
      /* Glassmorphism backgrounds (cajas translúcidas) en lugar de grises lúgubres */
      --bg2: rgba(255, 255, 255, 0.05); /* Ligeramente más claro que el fondo */
      --bg3: rgba(255, 255, 255, 0.09); /* Destacado sutil */
      --bg4: rgba(255, 255, 255, 0.15); /* Interacción hover / foco */
      
      /* Acentos vibrantes de juego */
      --cyan: #00e5ff;
      --mag: #ff006e;
      --lime: #b8ff00;
      --orange: #ff9500;
      --purple: #a855f7;
      --red: #ff3b30;
      
      /* Textos relucientes */
      --text: #ffffff;
      --text2: rgba(255, 255, 255, 0.7);
      --text3: rgba(255, 255, 255, 0.4);
      --border: rgba(255, 255, 255, 0.15);
      --bord2: rgba(255, 255, 255, 0.25);
      
      /* Glows base */
      --gcyan: 0 0 24px rgba(0, 229, 255, .4), 0 0 60px rgba(0, 229, 255, .2);
      --gmag: 0 0 24px rgba(255, 0, 110, .4), 0 0 60px rgba(255, 0, 110, .2);
      --r: 16px;
      --rsm: 10px;
    }

    /* ================================================================
       RESET & BASE
    ================================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      background: radial-gradient(circle at 50% 0%, var(--bg-grad1) 0%, var(--bg-grad2) 55%, var(--bg-grad3) 100%);
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    #app {
      width: 100vw;
      height: 100dvh;
      position: relative;
      overflow: hidden;
    }

    /* Luces de escenario (Sustituye al Grid Cyberpunk sombrío) */
    #app::before {
      content: '';
      position: fixed;
      inset: 0;
      background: 
        radial-gradient(circle at 15% 80%, rgba(0, 229, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(255, 0, 110, 0.1) 0%, transparent 45%);
      pointer-events: none;
      z-index: 0;
    }

    /* ================================================================
       SCREEN SYSTEM
    ================================================================ */
    .screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 5vw, 24px);
      z-index: 1;
      opacity: 0;
      transform: scale(.97) translateY(8px);
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .screen.active {
      opacity: 1;
      transform: none;
      pointer-events: all;
    }

    /* Fix para pantallas largas en móvil y asegurar que el botón de abajo siempre sea accesible */
    .screen {
      justify-content: flex-start !important;
      padding-top: 15px !important;
      padding-bottom: 100px !important; /* Espacio para el búnker fijo */
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    /* Welcome: bloque principal centrado verticalmente; el copyright se queda abajo gracias a margin-top:auto inline */
    #screen-welcome {
      justify-content: center !important;
      padding-top: 48px !important;
      padding-bottom: 12px !important;
    }
    /* Welcome: logo arriba, copyright abajo, y el grupo intermedio (nombre → avatares → Comenzar → Guía/Actualizar) centrado verticalmente en la pantalla */
    #screen-welcome .tc {
      margin-top: 80px !important; /* baja más el logo respecto al top */
      margin-bottom: auto !important; /* hueco auto para centrar el grupo intermedio */
    }
    #screen-welcome .tc > div:first-child {
      font-size: 1rem !important;
      letter-spacing: 4px !important;
      margin-bottom: 12px !important;
    }
    #screen-welcome .logo {
      font-size: clamp(3.6rem, 16vw, 6.8rem) !important;
      position: relative;
      isolation: isolate;
      display: inline-block;
      width: auto;
    }
    /* Apple-logo glow (Dribbble "apple_logo_glow") — halo iridiscente rotando + bloom blanco pulsante detrás del logo */
    #screen-welcome .logo::before,
    #screen-welcome .logo::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      pointer-events: none;
      z-index: -1;
      border-radius: 50%;
      will-change: transform, opacity;
    }
    #screen-welcome .logo::before {
      width: 140%;
      height: 220%;
      background: conic-gradient(from 0deg,
        #22d3ee 0%,
        #a855f7 20%,
        #ec4899 40%,
        #f59e0b 55%,
        #22c55e 70%,
        #3b82f6 85%,
        #22d3ee 100%);
      filter: blur(38px);
      opacity: 0.55;
      transform: translate(-50%, -50%);
      animation: logoGlowSpin 6s linear infinite;
    }
    #screen-welcome .logo::after {
      width: 95%;
      height: 170%;
      background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
      filter: blur(18px);
      transform: translate(-50%, -50%) scale(1);
      animation: logoGlowPulse 2.8s ease-in-out infinite;
    }
    @keyframes logoGlowSpin {
      to { transform: translate(-50%, -50%) rotate(1turn); }
    }
    @keyframes logoGlowPulse {
      0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.95); }
      50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.12); }
    }
    /* El texto va por encima del halo */
    #screen-welcome .logo .c1,
    #screen-welcome .logo .c2 { position: relative; z-index: 1; }
    @media (prefers-reduced-motion: reduce) {
      #screen-welcome .logo::before,
      #screen-welcome .logo::after { animation: none; }
    }

    /* Forzar que los IDs específicos sigan la regla de scroll */
    #screen-lobby,
    #screen-score,
    #screen-roundbreak,
    #screen-round-result,
    #screen-mid-scores,
    #screen-r3-intro,
    #screen-r3-question,
    #screen-r4-intro,
    #screen-r4-pick,
    #screen-r4-panel,
    #screen-shop,
    #screen-r5-intro,
    #screen-r5-question {
      display: flex !important;
      padding-bottom: 120px !important; /* Espacio extra para el bunker fijo */
    }

    /* ================================================================
       TYPOGRAPHY
    ================================================================ */
    .display {
      font-family: 'Bebas Neue', cursive;
      letter-spacing: .06em;
    }

    h1 {
      font-family: 'Bebas Neue', cursive;
      font-size: 3rem;
      letter-spacing: .08em;
    }

    h2 {
      font-size: 1.5rem;
      font-weight: 700;
    }

    /* ================================================================
       LOGO
    ================================================================ */
    .logo {
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(2.2rem, 10vw, 4.5rem);
      letter-spacing: .05em;
      line-height: 1;
      text-align: center;
    }

    .logo .c1 {
      color: var(--cyan);
    }

    .logo .c2 {
      color: var(--text);
    }

    /* v3.22.4 — Logo como imagen cuadrada con fondo (sustituye al texto QUIZ + ARENA).
       El contenedor .logo conserva el halo iridiscente del welcome detrás. */
    .logo-img {
      display: block;
      margin: 0 auto;
      width: clamp(180px, 55vw, 260px);
      height: auto;
      max-width: 100%;
      border-radius: 18px;
    }
    #screen-welcome .logo-img {
      width: clamp(220px, 62vw, 320px);
    }

    .logo-sub {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--text3);
      text-align: center;
      margin-top: 4px;
    }

    /* ================================================================
       BUTTONS
    ================================================================ */
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 340px;
      height: 56px;
      border-radius: var(--r);
      border: none;
      cursor: pointer;
      font-family: 'Exo 2', sans-serif;
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: all .13s ease;
      position: relative;
      overflow: hidden;
    }

    .btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0);
      transition: background .1s;
    }

    .btn:active::after {
      background: rgba(255, 255, 255, .1);
    }

    .btn:active {
      transform: scale(.96);
    }

    .btn:disabled {
      opacity: .38;
      pointer-events: none;
    }

    .btn-primary {
      background: var(--cyan);
      color: #000;
      box-shadow: var(--gcyan);
    }

    .btn-outline {
      background: transparent;
      color: var(--cyan);
      border: 1.5px solid var(--cyan);
    }

    .btn-mag {
      background: var(--mag);
      color: #fff;
      box-shadow: var(--gmag);
    }

    .btn-ghost {
      background: var(--bg3);
      color: var(--text2);
      border: 1.5px solid var(--bord2);
    }

    .ready-count {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .22);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .5px;
      vertical-align: middle;
    }
    .btn-ghost .ready-count {
      background: rgba(255, 255, 255, .08);
    }

    .btn-danger {
      background: transparent;
      color: var(--red);
      border: 1.5px solid rgba(255, 59, 48, .28);
    }

    .btn-sm {
      height: 44px;
      font-size: .8rem;
      max-width: 200px;
    }

    /* ================================================================
       INPUTS
    ================================================================ */
    .lbl {
      display: block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text2);
      margin-bottom: 8px;
    }

    .inp {
      width: 100%;
      max-width: 340px;
      height: 52px;
      background: var(--bg3);
      border: 1.5px solid var(--bord2);
      border-radius: var(--r);
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      font-size: 1rem;
      font-weight: 500;
      padding: 0 16px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

    .inp:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0, 229, 255, .1);
    }

    .inp-code {
      font-family: 'Bebas Neue', cursive;
      font-size: 2rem;
      letter-spacing: .3em;
      text-align: center;
      text-transform: uppercase;
    }

    /* ================================================================
       CARDS
    ================================================================ */
    .card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 18px;
      width: 100%;
      max-width: 360px;
    }

    /* ================================================================
       AVATAR PICKER
    ================================================================ */
    .av-grid {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 8px 0 16px;
    }

    .av-opt {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 2.5px solid transparent;
      cursor: pointer;
      transition: all .15s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      background: none;
    }

    .av-opt.sel {
      border-color: #fff;
      transform: scale(1.15);
      box-shadow: 0 0 14px currentColor;
    }

    /* ================================================================
       PLAYER ITEMS
    ================================================================ */
    .p-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--rsm);
      animation: slideIn .28s ease;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-16px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .p-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    .p-name {
      font-weight: 600;
      font-size: .95rem;
    }

    .p-host {
      margin-left: auto;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--orange);
      background: rgba(255, 149, 0, .1);
      padding: 3px 8px;
      border-radius: 20px;
      border: 1px solid rgba(255, 149, 0, .22);
    }

    .p-score {
      margin-left: auto;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.2rem;
      color: var(--cyan);
    }

    /* ================================================================
       ROOM CODE DISPLAY
    ================================================================ */
    .code-wrap {
      text-align: center;
      margin: 20px 0;
    }

    .code-lbl {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--text2);
      margin-bottom: 6px;
    }

    .code-val {
      font-family: 'Bebas Neue', cursive;
      font-size: 4rem;
      letter-spacing: .32em;
      color: var(--cyan);
      text-shadow: var(--gcyan);
      line-height: 1;
    }

    /* ================================================================
       WAITING DOTS
    ================================================================ */
    .dots {
      display: flex;
      gap: 5px;
    }

    .dots span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--cyan);
      animation: dp 1.4s ease infinite;
    }

    .dots span:nth-child(2) {
      animation-delay: .2s;
    }

    .dots span:nth-child(3) {
      animation-delay: .4s;
    }

    @keyframes dp {

      0%,
      80%,
      100% {
        opacity: .25;
        transform: scale(.75);
      }

      40% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .wait-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .8rem;
      color: var(--text2);
      margin: 8px 0 16px;
    }

    /* ================================================================
       COUNTDOWN
    ================================================================ */
    .cd-num {
      font-family: 'Bebas Neue', cursive;
      font-size: 14rem;
      line-height: 1;
      text-shadow: 0 0 30px rgba(0,0,0,0.5);
      z-index: 5;
      transition: color 0.3s ease;
      animation: cdPopStrong 1s cubic-bezier(0.2, 0, 0.2, 1) infinite;
    }

    .cd-label {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: -20px;
      animation: cdTextFade 1s ease infinite;
    }

    @keyframes cdPopStrong {
      0% { transform: scale(2.5); opacity: 0; filter: blur(10px); }
      15% { transform: scale(1); opacity: 1; filter: blur(0); }
      85% { transform: scale(0.95); opacity: 1; filter: blur(0); }
      100% { transform: scale(0.8); opacity: 0; filter: blur(5px); }
    }

    @keyframes cdTextFade {
      0%, 100% { opacity: 0.4; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-5px); }
    }

    @keyframes arenaShake {
      0%, 100% { transform: translate(0, 0); }
      10%, 30% { transform: translate(-2px, -2px); }
      20%, 40% { transform: translate(2px, 2px); }
      50% { transform: translate(-3px, 1px); }
    }

    .shake-arena { animation: arenaShake 0.4s ease-in-out; }

    /* ================================================================
       PLAYER HUD — Bomba maestra + Búnker (vidas) + Puntos (v2.14)
       Layout:
         - Bomba full-width centrada (con cables a ambos lados)
         - Marcador PTS absoluto arriba-dcha, tamaño fijo (hasta 4 díg.)
         - Zona búnker debajo: icono progresivo que se va rompiendo
           según vidas perdidas (5 niveles de daño + "ELIMINADO")
    ================================================================ */
    .player-hud {
      width: calc(100% + (clamp(16px, 5vw, 24px) * 2));
      margin-left: calc(-1 * clamp(16px, 5vw, 24px));
      margin-right: calc(-1 * clamp(16px, 5vw, 24px));
      margin-top: -15px; /* Compensa padding-top: 15px de .screen */
      margin-bottom: 12px;
      padding: 10px 0 12px;
      padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
      display: flex;
      flex-direction: column;
      align-items: center; 
      gap: 6px;
      background: transparent;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }
    .player-hud::before {
      /* textura de rejilla sutil */
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 12px 12px;
      pointer-events: none;
      opacity: 0.5;
    }

    /* ── Marcador de puntos (fijo arriba-derecha, superpuesto) ─ */
    .hud-score {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 8px);
      right: 8px;
      z-index: 5;
      min-width: 62px;
      padding: 3px 6px 4px;
      background: rgba(10, 15, 30, 0.9);
      border: 1.2px solid rgba(0,229,255,0.3);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.4);
      transition: transform 0.3s;
    }
    @media (max-width: 359px) {
      .hud-score {
        transform: scale(0.85);
        right: 4px;
      }
    }
    .hud-score-val {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.05rem;
      color: var(--cyan);
      text-shadow: 0 0 5px rgba(0,229,255,0.4);
      letter-spacing: 0.02em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .hud-score-lbl {
      font-size: 0.45rem;
      font-weight: 700;
      color: var(--text3);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-top: 1px;
      opacity: 0.8;
    }

    /* ── Botón de pausa (fijo arriba-izquierda, superpuesto) ── */
    .hud-pause {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 8px);
      left: 8px;
      z-index: 6;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(10, 15, 30, 0.9);
      border: 1.2px solid rgba(255, 149, 0, 0.45);
      color: #ff9500;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.4);
      transition: transform 0.2s, background 0.2s;
      padding: 0;
    }
    .hud-pause:hover { transform: scale(1.05); background: rgba(255, 149, 0, 0.15); }
    .hud-pause:active { transform: scale(0.95); }
    @media (max-width: 359px) {
      .hud-pause { transform: scale(0.85); left: 4px; }
    }

    /* ── Overlay de pausa activa ───────────────────────────── */
    .pause-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      /* Fondo 100% opaco para ocultar por completo lo que haya detrás
         (ej. la siguiente pregunta si el host la arma antes de ver la pausa). */
      background: radial-gradient(circle at 50% 40%, #1a0f3a 0%, #06060e 70%, #000 100%);
      background-color: #06060e;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 20px;
      text-align: center;
      animation: pause-fade .25s ease;
    }
    @keyframes pause-fade { from { opacity: 0 } to { opacity: 1 } }
    .pause-overlay .pause-icon {
      font-size: 4rem;
      filter: drop-shadow(0 0 20px rgba(255,149,0,.5));
    }
    .pause-overlay h2 {
      font-family: 'Bebas Neue', cursive;
      font-size: 2.5rem;
      letter-spacing: .15em;
      color: #ff9500;
      text-shadow: 0 0 18px rgba(255,149,0,.5);
      margin: 0;
    }
    .pause-overlay .pause-sub { color: var(--text2); font-size: 0.9rem; max-width: 320px; }
    .pause-overlay .pause-by { color: var(--cyan); font-weight: 700; }

    /* ── Toast flotante de votación de pausa ───────────────── */
    .pause-vote-float {
      position: fixed;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      background: rgba(10, 15, 30, 0.95);
      border: 2px solid #ff9500;
      border-radius: 14px;
      padding: 16px 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 30px rgba(255,149,0,.4);
      width: min(92vw, 360px);
      animation: pause-vote-in .3s ease;
    }
    @keyframes pause-vote-in {
      from { opacity: 0; transform: translate(-50%, -20px); }
      to   { opacity: 1; transform: translate(-50%, 0); }
    }
    .pause-vote-float .pvf-title {
      font-weight: 800; color: #ff9500; font-size: 0.95rem;
      margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
    }
    .pause-vote-float .pvf-sub { color: var(--text2); font-size: 0.82rem; margin-bottom: 12px; }
    .pause-vote-float .pvf-timer {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.4rem; color: var(--cyan);
      letter-spacing: .1em; margin-bottom: 10px;
    }
    .pause-vote-float .pvf-btns { display: flex; gap: 8px; }
    .pause-vote-float .pvf-btn {
      flex: 1; padding: 10px; border-radius: 10px; border: none;
      font-weight: 800; cursor: pointer; font-size: 0.88rem;
      letter-spacing: .05em; text-transform: uppercase;
    }
    .pause-vote-float .pvf-yes { background: #ff9500; color: #1a0f00; }
    .pause-vote-float .pvf-no  { background: rgba(255,255,255,.08); color: var(--text2); border: 1px solid var(--border); }
    .pause-vote-float .pvf-btn:disabled { opacity: .5; cursor: not-allowed; }
    .pause-vote-float .pvf-count { font-size: 0.75rem; color: var(--text3); margin-top: 8px; text-align: center; }

    /* ── Bloque central: bomba + cables SVG (full-width) ─────── */
    .hud-bomb-core {
      position: relative;
      width: 100%;
      height: clamp(84px, 22vw, 120px); /* Aumentado de 64-104 a 84-120 */
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      z-index: 1;
      padding: 0; /* Eliminado padding lateral para maximizar centrado real */
    }
    .hud-cables-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }
    .hud-cable-path {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke: var(--cable-color, #888);
      filter: drop-shadow(0 0 4px var(--cable-color, transparent)) drop-shadow(0 0 8px var(--cable-color, transparent));
      transition: opacity .3s, stroke .3s, filter .3s;
    }
    .hud-cable-path.hud-cable-cut {
      stroke: #3a3a48;
      stroke-dasharray: 3 4;
      opacity: 0.45;
      filter: none;
    }

    /* ── Dispositivo bomba circular (metálico) ───────────────── */
    .hud-bomb-device {
      position: relative;
      width: clamp(72px, 20vw, 96px);
      height: clamp(72px, 20vw, 96px);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 28%, #505064 0%, #2d2d3c 52%, #121220 100%);
      border: 3px solid #3a3a4a; /* Borde un poco más grueso */
      box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.12),
        inset 0 -2px 4px rgba(0,0,0,0.6),
        0 4px 15px rgba(0,0,0,0.7),
        0 0 20px rgba(255,60,60,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      z-index: 3;
      transition: all 0.5s ease;
    }
    .hud-bomb-device.hud-bomb-safe {
      background: radial-gradient(circle at 35% 28%, #304040 0%, #1a2a2a 52%, #0a1010 100%);
      border-color: #008855;
      box-shadow: 0 0 30px rgba(0,255,136,0.15);
    }
    /* tornillos decorativos */
    .hud-bomb-device::before,
    .hud-bomb-device::after {
      content: '';
      position: absolute;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #5a5a6a, #1a1a26);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
    }
    .hud-bomb-device::before { top: 5px; left: 5px; }
    .hud-bomb-device::after  { bottom: 5px; right: 5px; }

    /* Anillo de progreso alrededor de la bomba */
    .hud-bomb-ring {
      position: absolute;
      inset: -5px;
      width: calc(100% + 10px);
      height: calc(100% + 10px);
      pointer-events: none;
      transform: rotate(-90deg);
    }
    .hud-bomb-ring circle {
      fill: none;
      stroke-width: 2.2;
    }
    .hud-bomb-ring .hud-ring-bg {
      stroke: rgba(255,255,255,0.07);
    }
    .hud-bomb-ring .hud-ring-prog {
      stroke: #ffb34d;
      stroke-linecap: round;
      filter: drop-shadow(0 0 4px rgba(255,160,60,0.8));
      transition: stroke-dashoffset .5s ease, stroke .3s;
    }

    /* Contenedor interno del dispositivo (armed + display) */
    .hud-bomb-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 72%;
      pointer-events: none;
    }

    /* Etiqueta SYSTEM: ARMED dentro de la bomba (tipo referencia) */
    .hud-bomb-armed {
      font-size: clamp(0.32rem, 1.2vw, 0.42rem);
      font-weight: 800;
      letter-spacing: 0.14em;
      color: #ffb34d;
      text-shadow: 0 0 3px rgba(255,160,50,0.7);
      white-space: nowrap;
      line-height: 1;
    }
    .hud-bomb-armed .hud-bomb-armed-dot {
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #ff4d4d;
      box-shadow: 0 0 4px #ff4d4d;
      margin-right: 2px;
      vertical-align: 1px;
      animation: hudArmedBlink 1.4s ease-in-out infinite;
    }
    @keyframes hudArmedBlink {
      0%,100% { opacity: 1; }
      50%     { opacity: 0.3; }
    }

    /* Display digital X/6 */
    .hud-bomb-display {
      width: 100%;
      padding: 2px 0;
      border-radius: 4px;
      background: linear-gradient(180deg, #1a1500 0%, #0a0800 100%);
      border: 1px solid #3a2e05;
      box-shadow:
        inset 0 0 6px rgba(0,0,0,0.9),
        inset 0 1px 0 rgba(255,180,60,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', cursive;
      font-size: clamp(0.85rem, 3.2vw, 1.1rem);
      color: #ffb84d;
      text-shadow: 0 0 6px rgba(255,160,50,0.9), 0 0 2px rgba(255,160,50,0.6);
      letter-spacing: 0.04em;
      line-height: 1;
    }
    .hud-bomb-display .hud-bomb-sep {
      color: #7a5a1a;
      padding: 0 1px;
      font-size: 0.85em;
    }
    .hud-bomb-display .hud-bomb-total {
      color: #cc8a33;
    }

    /* ── Zona búnker (vidas como búnker que se rompe) ────────── */
    .hud-bunker-wrap {
      position: fixed;
      bottom: 0px;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 16px);
      z-index: 50;
      pointer-events: none; /* Evita bloquear botones que queden por debajo */
    }
    .hud-bunker-svg {
      width: clamp(116px, 30vw, 150px);
      height: auto;
      display: block;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55));
      transition: filter .4s;
    }
    /* Estructura base del búnker */
    .hud-bunker-svg .bunker-body {
      transition: opacity .4s;
    }
    /* Niveles de daño — ocultos por defecto, se activan por data-damage */
    .hud-bunker-svg .bunker-dmg {
      opacity: 0;
      transition: opacity .4s;
    }
    .hud-bunker-wrap[data-damage="1"] .bunker-dmg-1,
    .hud-bunker-wrap[data-damage="2"] .bunker-dmg-1,
    .hud-bunker-wrap[data-damage="2"] .bunker-dmg-2,
    .hud-bunker-wrap[data-damage="3"] .bunker-dmg-1,
    .hud-bunker-wrap[data-damage="3"] .bunker-dmg-2,
    .hud-bunker-wrap[data-damage="3"] .bunker-dmg-3,
    .hud-bunker-wrap[data-damage="4"] .bunker-dmg-1,
    .hud-bunker-wrap[data-damage="4"] .bunker-dmg-2,
    .hud-bunker-wrap[data-damage="4"] .bunker-dmg-3,
    .hud-bunker-wrap[data-damage="4"] .bunker-dmg-4,
    .hud-bunker-wrap[data-damage="5"] .bunker-dmg-5 {
      opacity: 1;
    }
    /* Destruido: difumina la base, resalta la ruina, tinte rojo */
    .hud-bunker-wrap[data-damage="5"] .bunker-body { opacity: 0.18; }
    .hud-bunker-wrap[data-damage="5"] .hud-bunker-svg {
      filter: drop-shadow(0 0 6px rgba(255,60,60,0.45));
    }

    /* Luz de antena parpadeante (antena sólo visible en damages < 4) */
    .bunker-antenna-light {
      animation: bunkerAntLight 1.8s ease-in-out infinite;
    }
    .hud-bunker-wrap[data-damage="3"] .bunker-antenna,
    .hud-bunker-wrap[data-damage="4"] .bunker-antenna,
    .hud-bunker-wrap[data-damage="5"] .bunker-antenna {
      opacity: 0.25;
    }
    @keyframes bunkerAntLight {
      0%,100% { fill: #ff4d4d; filter: drop-shadow(0 0 2px #ff4d4d); }
      50%     { fill: #5a1a1a; filter: none; }
    }

    /* Vidas debajo del búnker */
    .hud-lives-row {
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: center;
      min-height: 18px;
    }
    .hud-life {
      font-size: 0.95rem;
      line-height: 1;
      filter: drop-shadow(0 0 3px rgba(80,180,255,0.6));
      transition: filter .25s, opacity .25s, transform .25s;
    }
    .hud-life.hud-life-lost {
      filter: grayscale(1) brightness(0.32);
      opacity: 0.32;
      transform: scale(0.78);
    }

    /* Etiqueta ELIMINADO (sustituye a las vidas cuando lives=0) */
    .hud-eliminated {
      display: none;
      font-family: 'Bebas Neue', cursive;
      font-size: 1rem;
      color: #ff4d4d;
      letter-spacing: 0.2em;
      text-shadow: 0 0 8px rgba(255,77,77,0.85), 0 0 2px rgba(255,77,77,0.6);
      animation: hudEliminatedPulse 1.6s ease-in-out infinite;
      min-height: 18px;
    }
    .hud-bunker-wrap[data-damage="5"] .hud-lives-row { display: none; }
    .hud-bunker-wrap[data-damage="5"] .hud-eliminated { display: block; }
    @keyframes hudEliminatedPulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%     { opacity: 0.55; transform: scale(0.97); }
    }

    /* Ajuste fino para que el q-header no quede demasiado separado del HUD */
    .player-hud + .q-header { padding-top: 6px; }

    /* Responsive extra — pantallas muy estrechas */
    /* Responsive extra — pantallas muy estrechas (Ajustado v3.2.1) */
    @media (max-width: 360px) {
      .player-hud { padding-bottom: 8px; }
      .hud-score { transform: scale(0.8); right: 2px; top: calc(env(safe-area-inset-top, 0px) + 2px); }
      .hud-score-val { font-size: 1rem; }
      .hud-bomb-core { padding: 0; }
      .hud-bomb-device { transform: scale(0.9); }
      .hud-life { font-size: 0.8rem; }
    }

    /* ================================================================
       RONDA 3 — MECHA Y PELIGRO (EFECTOS VISUALES)
    ================================================================ */
    .r3-danger-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 100;
      display: none;
    }
    #screen-r3-question:not(.is-not-holder) .r3-danger-overlay {
      display: block;
    }
    /* Viñeta de peligro pulsante */
    /* Viñeta de peligro pulsante y elegante */
    .r3-danger-vignette {
      position: absolute;
      inset: 0;
      /* Capa de rojo profundo en bordes */
      background: radial-gradient(circle, transparent 45%, rgba(220, 0, 0, calc(var(--r3-int, 0) * 0.4)) 130%);
      /* Sombra interior para sensación de opresión */
      box-shadow: 
        inset 0 0 calc(15px + (var(--r3-int, 0) * 130px)) rgba(0, 0, 0, calc(var(--r3-int, 0) * 0.7)),
        inset 0 0 50px rgba(255, 40, 0, calc(var(--r3-int, 0) * 0.2));
      animation: r3DangerPulse calc(2s - (var(--r3-int, 0) * 1.6s)) ease-in-out infinite;
      z-index: 1;
      opacity: 0;
    }
    #screen-r3-question:not(.is-not-holder) .r3-danger-vignette {
      opacity: 1;
    }
    @keyframes r3DangerPulse {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }
    /* Mecha en el borde como SVG */
    .r3-screen-fuse-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
    .r3-screen-fuse-path {
      fill: none;
      stroke: #ff9d00;
      stroke-width: 3px; /* Más fina */
      stroke-linecap: round;
      vector-effect: non-scaling-stroke; /* Evita que se ensanche en pantallas estrechas */
      stroke-dasharray: 400; 
      stroke-dashoffset: 0;
      filter: drop-shadow(0 0 5px #ff3030) drop-shadow(0 0 10px #ff5a00);
      transition: stroke-dashoffset 0.1s linear;
    }
    .r3-screen-fuse-spark {
      position: absolute;
      width: 14px;
      height: 14px;
      background: radial-gradient(circle, #fff 0%, #fffc00 40%, #ff7a30 70%, transparent 100%);
      border-radius: 50%;
      box-shadow: 0 0 12px #ff7a30, 0 0 24px #ff3030;
      transform: translate(-50%, -50%);
      z-index: 3;
      pointer-events: none;
      animation: r3SparkFlicker 0.08s infinite alternate;
    }
    @keyframes r3SparkFlicker {
      from { transform: translate(-50%, -50%) scale(0.85); opacity: 0.8; }
      to   { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    }

    /* ================================================================
       RONDA 3 — Pasa la Bomba (Patata Caliente)
    ================================================================ */
    #screen-r3-question {
      justify-content: flex-start;
      padding: 0;
      gap: 0;
    }
    .r3-stage {
      width: 100%;
      padding: 10px 16px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      box-sizing: border-box;
    }
    .r3-bomb-wrap {
      position: relative;
      width: 110px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 6px;
    }
    .r3-bomb {
      font-size: 5rem;
      line-height: 1;
      filter: drop-shadow(0 0 14px rgba(255,80,80,0.7));
      animation: r3BombShake 0.6s ease-in-out infinite;
    }
    @keyframes r3BombShake {
      0%,100% { transform: rotate(-2deg) scale(1); }
      25% { transform: rotate(2deg) scale(1.02); }
      50% { transform: rotate(-1deg) scale(0.99); }
      75% { transform: rotate(1deg) scale(1.01); }
    }
    .r3-bomb.r3-hot {
      animation-duration: 0.25s;
      filter: drop-shadow(0 0 20px #ff3030) drop-shadow(0 0 8px #ff9030);
    }
    .r3-fuse {
      position: absolute;
      top: -4px;
      right: 14px;
      font-size: 1.5rem;
      animation: r3FuseFlicker 0.4s infinite alternate;
      pointer-events: none;
    }
    @keyframes r3FuseFlicker {
      0% { opacity: 1; transform: scale(1) rotate(-8deg); }
      100% { opacity: 0.55; transform: scale(0.85) rotate(8deg); }
    }
    .r3-timer-big {
      font-family: 'Bebas Neue', cursive;
      font-size: 2.6rem;
      line-height: 1;
      color: #ffb34d;
      text-shadow: 0 0 10px rgba(255,120,40,0.55);
      letter-spacing: 0.02em;
      transition: color .25s, text-shadow .25s;
    }
    .r3-timer-big.r3-timer-critical {
      color: #ff3030;
      text-shadow: 0 0 14px rgba(255,50,30,0.85);
      animation: r3TimerPulse 0.6s ease infinite;
    }
    @keyframes r3TimerPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    .r3-holder-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      background: rgba(255,80,80,0.12);
      border: 1.5px solid rgba(255,80,80,0.45);
      border-radius: 999px;
      max-width: 90%;
    }
    .r3-holder-av {
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      border: 2px solid currentColor;
    }
    .r3-holder-lbl {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .r3-holder-lbl .r3-holder-me {
      color: #ffd84d;
      font-weight: 900;
    }
    .r3-q-text {
      padding: 8px 16px 4px;
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
      flex-shrink: 0;
    }
    #opts-r3 {
      padding: 8px 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .opt-r3-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: var(--bg3);
      border: 2px solid var(--border);
      border-radius: 14px;
      color: var(--text);
      text-align: left;
      font-family: inherit;
      font-size: 0.95rem;
      cursor: pointer;
      transition: transform .1s, border-color .15s, background .15s, opacity .2s;
      width: 100%;
      min-height: 52px;
    }
    .opt-r3-btn:not(:disabled):active { transform: scale(0.98); }
    .opt-r3-btn:disabled { opacity: 0.55; cursor: not-allowed; }
    .opt-r3-btn.r3-not-holder { opacity: 0.4; }
    .opt-r3-btn.sel { border-color: var(--cyan); background: rgba(0,229,255,0.1); }
    .opt-r3-btn.cor { border-color: #22c55e; background: rgba(34,197,94,0.18); }
    .opt-r3-btn.wrg { border-color: #ef4444; background: rgba(239,68,68,0.18); }
    .opt-r3-ltr {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.4rem;
      width: 28px;
      color: var(--cyan);
      flex-shrink: 0;
    }
    .opt-r3-txt { flex: 1; }

    /* Banner "está con X" para no-portadores */
    .r3-wait-banner {
      display: none;
      margin: 4px 14px 0;
      padding: 10px 14px;
      background: rgba(255,80,80,0.1);
      border: 1px solid rgba(255,80,80,0.35);
      border-radius: 10px;
      font-size: 0.82rem;
      color: var(--text2);
      text-align: center;
    }
    #screen-r3-question.is-not-holder .r3-wait-banner { display: block; }
    #screen-r3-question.r3-reveal .r3-wait-banner,
    #screen-r3-question.r3-reveal.is-not-holder .r3-wait-banner { display: none; }

    /* Banner de veredicto (acierto/fallo/explosión) — visible para todos */
    .r3-verdict {
      display: none;
      margin: 4px 14px 0;
      padding: 12px 14px;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 600;
      text-align: center;
      animation: r3VerdictIn 0.25s ease-out;
    }
    .r3-verdict.ok  { background: rgba(34,197,94,0.15);  border: 1px solid rgba(34,197,94,0.55);  color: #bbf7d0; }
    .r3-verdict.bad { background: rgba(239,68,68,0.15);  border: 1px solid rgba(239,68,68,0.55);  color: #fecaca; }
    .r3-verdict.boom{ background: rgba(255,90,0,0.18);   border: 1px solid rgba(255,90,0,0.6);    color: #ffd4a8; }
    #screen-r3-question.r3-reveal .r3-verdict { display: block; }
    @keyframes r3VerdictIn {
      from { transform: translateY(-6px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

    /* Flash de explosión */
    .r3-explode-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, #ff5a00, #ff1100 40%, rgba(0,0,0,0.9) 80%);
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
      z-index: 10;
      animation: r3Explode 0.9s ease-out;
    }
    @keyframes r3Explode {
      0%   { transform: scale(0.2); opacity: 0; }
      25%  { transform: scale(1.2); opacity: 1; }
      100% { transform: scale(1);   opacity: 0; }
    }

    /* Pantalla intro de R3 (usa estilos de roundbreak) */
    #screen-r3-intro .rb-badge { filter: drop-shadow(0 0 8px rgba(255,80,80,0.6)); }
    #screen-r3-intro .rb-title { color: #ff7a4d; }

    /* ================================================================
       TIENDA DE PÁNICO (entre R3 y R5)
    ================================================================ */
    #screen-shop .rb-badge { filter: drop-shadow(0 0 10px rgba(255,200,80,0.7)); }
    #screen-shop .rb-title { color: #ffc74d; }
    .shop-card {
      width: 100%;
      max-width: 340px;
      padding: 14px 16px;
      background: linear-gradient(160deg, rgba(255,200,80,0.1), rgba(255,80,80,0.08));
      border: 2px solid rgba(255,200,80,0.4);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .shop-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
    }
    .shop-row .shop-lbl { flex: 1; color: var(--text); }
    .shop-row .shop-val { font-family: 'Bebas Neue', cursive; font-size: 1.1rem; color: #ffc74d; }
    .btn-buy-life {
      background: linear-gradient(135deg, #ff6b00, #ff2030);
      color: #fff;
      border: 2px solid #ffcc66;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 14px 18px;
      border-radius: 14px;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 0 14px rgba(255,80,40,0.45);
      animation: shopPulse 1.2s ease-in-out infinite;
      flex-shrink: 0;
    }
    .btn-buy-life:disabled {
      filter: grayscale(0.8) brightness(0.6);
      cursor: not-allowed;
      animation: none;
      box-shadow: none;
    }
    @keyframes shopPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(255,80,40,0.45); }
      50%      { transform: scale(1.03); box-shadow: 0 0 22px rgba(255,80,40,0.7); }
    }
    .shop-countdown {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.3rem;
      color: #ffc74d;
      letter-spacing: 0.08em;
    }
    .shop-countdown.shop-urgent { color: #ff3030; animation: r3TimerPulse 0.6s ease infinite; }

    /* ================================================================
       RONDA 4 — La Bolsa (20 chips: 10 correctas + 10 señuelos)
    ================================================================ */
    #screen-r4-intro .rb-badge { filter: drop-shadow(0 0 10px rgba(184,255,0,0.55)); }
    #screen-r4-intro .rb-title { color: #b8ff00; }

    /* Pantalla "elige bolsa" (jugador con menos puntos) */
    #screen-r4-pick {
      padding: 14px 14px 16px;
      gap: 10px;
      align-items: center;
    }
    #screen-r4-pick .r4-pick-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.55rem;
      letter-spacing: 0.06em;
      text-align: center;
      color: #b8ff00;
    }
    #screen-r4-pick .r4-pick-sub {
      font-size: 0.88rem;
      color: var(--text2);
      text-align: center;
      margin-bottom: 6px;
    }
    .r4-bag-card {
      width: 100%;
      max-width: 360px;
      padding: 14px 16px;
      background: var(--bg3);
      border: 2px solid var(--border);
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: left;
      font-family: inherit;
      color: var(--text);
      cursor: pointer;
      transition: transform .12s, border-color .2s, background .2s;
    }
    .r4-bag-card:not(:disabled):hover { transform: translateY(-1px); }
    .r4-bag-card:not(:disabled):active { transform: scale(0.98); }
    .r4-bag-card.disabled { opacity: 0.6; cursor: not-allowed; }
    .r4-bag-card .r4-bag-emoji {
      font-size: 1.8rem; flex-shrink: 0;
    }
    .r4-bag-card .r4-bag-tema {
      flex: 1;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.25;
    }
    .r4-bag-card .r4-bag-cat {
      font-size: 0.72rem;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    #r4-pick-countdown {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.4rem;
      color: #b8ff00;
      margin-top: 4px;
    }
    #r4-pick-countdown.urgent { color: #ff3030; animation: r3TimerPulse 0.6s ease infinite; }
    .r4-pick-waiting {
      padding: 10px 14px;
      background: rgba(184,255,0,0.07);
      border: 1px solid rgba(184,255,0,0.25);
      border-radius: 10px;
      font-size: 0.85rem;
      color: var(--text2);
      text-align: center;
      max-width: 340px;
    }

    /* Pantalla "panel" (20 chips) */
    #screen-r4-panel {
      padding: 8px 10px 14px;
      gap: 6px;
    }
    .r4-panel-head {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 6px;
    }
    .r4-panel-head .r4-tema {
      flex: 1;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.2;
    }
    .r4-panel-head .r4-remaining {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.2rem;
      color: #b8ff00;
      letter-spacing: 0.06em;
    }
    .r4-panel-head .r4-remaining.low { color: #ff9500; }
    .r4-panel-meta {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.78rem;
      color: var(--text2);
      padding: 0 6px 4px;
    }
    .r4-chips-grid {
      width: 100%;
      flex: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 38px;
      gap: 5px;
      /* Scrollbar SIEMPRE reservado para evitar "saltos" al seleccionar un chip
         (en iOS/Android el scrollbar aparece/desaparece y eso provoca reflow).
         overflow-y:scroll + scrollbar-gutter:stable bloquea ese movimiento. */
      overflow-y: scroll;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding-bottom: 6px;
      /* Ancla de scroll: impide que el navegador desplace el contenido
         cuando el DOM cambia ligeramente (badges, clases cor/wrg). */
      overflow-anchor: none;
    }
    @media (min-width: 420px) {
      .r4-chips-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 42px; }
    }
    .r4-chip-btn {
      padding: 4px 6px;
      background: var(--bg3);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: inherit;
      font-size: 0.9rem;
      line-height: 1.1;
      cursor: pointer;
      transition: transform .08s, border-color .15s, background .15s, opacity .2s;
      /* Altura fija controlada por grid-auto-rows. Centramos el texto
         dentro del botón y evitamos que el contenido salga del chip para
         que la selección (cor/wrg + badge) no reordene ninguna fila. */
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      text-align: center;
      overflow: hidden;
      word-break: break-word;
      hyphens: auto;
    }
    .r4-chip-btn:not(:disabled):active { transform: scale(0.96); }
    .r4-chip-btn:disabled { cursor: not-allowed; }
    .r4-chip-btn.cor {
      border-color: #22c55e;
      background: rgba(34,197,94,0.2);
      color: #d1fae5;
    }
    .r4-chip-btn.wrg {
      border-color: #ef4444;
      background: rgba(239,68,68,0.2);
      color: #fecaca;
      opacity: 0.85;
    }
    .r4-chip-by {
      position: absolute;
      top: -8px;
      right: -4px;
      font-size: 0.7rem;
      padding: 1px 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 999px;
      white-space: nowrap;
    }
    .r4-elim-banner {
      display: none;
      margin: 4px 10px 0;
      padding: 8px 12px;
      background: rgba(239,68,68,0.15);
      border: 1px solid rgba(239,68,68,0.45);
      border-radius: 10px;
      font-size: 0.82rem;
      color: #fecaca;
      text-align: center;
    }
    #screen-r4-panel.is-eliminated .r4-elim-banner { display: block; }
    #screen-r4-panel.is-eliminated .r4-chip-btn:not(.cor):not(.wrg) { opacity: 0.45; }
    .r4-verdict {
      padding: 8px 14px;
      border-radius: 8px;
      text-align: center;
      font-size: 0.95rem;
      font-weight: 700;
      display: none;
      position: absolute;
      top: 140px;
      left: 0;
      right: 0;
      margin: 0 auto;
      max-width: 320px;
      z-index: 50;
      box-shadow: 0 8px 24px rgba(0,0,0,0.8);
      backdrop-filter: blur(4px);
    }
    .r4-verdict.show { display: block; }
    .r4-verdict.ok  { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.5); color: #bbf7d0; }
    .r4-verdict.bad { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.5); color: #fecaca; }

    /* ================================================================
       RONDA 5 — Minibombas de Supervivencia
    ================================================================ */
    #screen-r5-intro .rb-badge { filter: drop-shadow(0 0 10px rgba(255,120,40,0.7)); }
    #screen-r5-intro .rb-title { color: #ff7a4d; }

    #screen-r5-question {
      justify-content: flex-start;
      padding: 0;
      gap: 0;
    }
    .r5-stage {
      width: 100%;
      padding: 10px 16px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      box-sizing: border-box;
    }
    /* Mecha: barra horizontal que se consume con una llama en el borde */
    .r5-fuse-track {
      position: relative;
      width: 100%;
      max-width: 340px;
      height: 22px;
      display: flex;
      align-items: center;
    }
    .r5-fuse-rail {
      position: absolute;
      inset: 9px 0;
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
    }
    .r5-fuse-fill {
      position: absolute;
      inset: 9px 0 9px 0;
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(90deg, #ff2030, #ff7a30 50%, #ffc74d);
      width: 100%;
      transform-origin: left center;
      transition: none;
    }
    .r5-fuse-flame {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 100%;
      font-size: 1.3rem;
      filter: drop-shadow(0 0 8px #ff7a30);
      animation: r3FuseFlicker 0.3s infinite alternate;
    }
    .r5-bomb-mini {
      font-size: 2rem;
      line-height: 1;
      filter: drop-shadow(0 0 6px rgba(255,80,80,0.6));
      animation: r3BombShake 0.6s ease-in-out infinite;
    }
    .r5-header-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 340px;
    }
    .r5-timer-big {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      color: #ffb34d;
      line-height: 1;
      margin-left: auto;
    }
    .r5-timer-big.r5-critical { color: #ff3030; animation: r3TimerPulse 0.6s ease infinite; }

    .r5-q-text {
      padding: 10px 16px 6px;
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
      flex-shrink: 0;
    }

    /* Chips para preseleccionar el cable al que irán los +100 si aciertas */
    .r5-cable-picker {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding: 4px 14px 10px;
      flex-wrap: wrap;
    }
    .r5-cable-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid transparent;
      background: rgba(255,255,255,0.05);
      color: var(--text2);
      transition: transform .12s, border-color .2s, background .2s, opacity .2s;
      user-select: none;
    }
    .r5-cable-chip .r5-chip-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--chip-color, #888);
      box-shadow: 0 0 4px var(--chip-color, #888);
    }
    .r5-cable-chip:not(:disabled):hover { transform: translateY(-1px); }
    .r5-cable-chip.sel {
      border-color: var(--chip-color, #fff);
      background: rgba(255,255,255,0.12);
      color: var(--text);
      box-shadow: 0 0 10px var(--chip-color, #fff);
    }
    .r5-cable-chip.cut {
      opacity: 0.35;
      pointer-events: none;
      text-decoration: line-through;
    }

    /* Opciones A/B (solo 2, al 50/50) */
    #opts-r5 {
      padding: 6px 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .opt-r5-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: var(--bg3);
      border: 2px solid var(--border);
      border-radius: 14px;
      color: var(--text);
      text-align: left;
      font-family: inherit;
      font-size: 0.95rem;
      cursor: pointer;
      transition: transform .1s, border-color .15s, background .15s, opacity .2s;
      width: 100%;
      min-height: 52px;
    }
    .opt-r5-btn:not(:disabled):active { transform: scale(0.98); }
    .opt-r5-btn:disabled { cursor: not-allowed; opacity: 0.7; }
    .opt-r5-btn.sel { border-color: var(--cyan); background: rgba(0,229,255,0.1); }
    .opt-r5-btn.cor { border-color: #22c55e; background: rgba(34,197,94,0.18); }
    .opt-r5-btn.wrg { border-color: #ef4444; background: rgba(239,68,68,0.18); }
    .opt-r5-ltr {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.4rem;
      width: 28px;
      color: var(--cyan);
      flex-shrink: 0;
    }
    .opt-r5-txt { flex: 1; }

    /* Estado espectador (0 vidas) */
    #screen-r5-question.is-spectator .opt-r5-btn { opacity: 0.45; cursor: not-allowed; }
    #screen-r5-question.is-spectator .r5-cable-picker { display: none; }
    .r5-spectator-banner {
      display: none;
      margin: 4px 14px 0;
      padding: 10px 14px;
      background: rgba(150,150,150,0.15);
      border: 1px solid rgba(200,200,200,0.35);
      border-radius: 10px;
      font-size: 0.82rem;
      color: var(--text2);
      text-align: center;
    }
    #screen-r5-question.is-spectator .r5-spectator-banner { display: block; }

    /* Overlay de explosión (reutiliza el de R3 con display:flex cuando se activa) */
    .r5-explode-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, #ff5a00, #ff1100 40%, rgba(0,0,0,0.9) 80%);
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
      z-index: 10;
      animation: r3Explode 0.9s ease-out;
    }

    /* R5 — etiqueta de progreso del duelo y cartas versus */
    .r5-duelo-lbl {
      font-size: 0.75rem;
      color: var(--text2);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-left: 10px;
    }
    .r5-versus {
      width: 100%;
      padding: 8px 14px 6px;
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 10px;
      box-sizing: border-box;
    }
    .r5-vs-card {
      flex: 1;
      min-height: 110px;
      padding: 14px 10px;
      background: linear-gradient(160deg, rgba(0,229,255,0.08), rgba(0,0,0,0.25));
      border: 2.5px solid var(--border);
      border-radius: 18px;
      color: var(--text);
      font-family: inherit;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      transition: transform .12s, border-color .2s, background .2s, box-shadow .2s;
      position: relative;
    }
    .r5-vs-card:not(:disabled):active { transform: scale(0.97); }
    .r5-vs-card:disabled { cursor: not-allowed; }
    .r5-vs-card.sel {
      border-color: #ffd84d;
      background: linear-gradient(160deg, rgba(255,216,77,0.18), rgba(255,120,40,0.08));
      box-shadow: 0 0 18px rgba(255,216,77,0.35);
    }
    .r5-vs-card.cor {
      border-color: #22c55e;
      background: linear-gradient(160deg, rgba(34,197,94,0.25), rgba(0,0,0,0.3));
      box-shadow: 0 0 18px rgba(34,197,94,0.45);
    }
    .r5-vs-card.wrg {
      border-color: #ef4444;
      background: linear-gradient(160deg, rgba(239,68,68,0.25), rgba(0,0,0,0.3));
    }
    .r5-vs-ltr {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.5rem;
      color: var(--cyan);
      line-height: 1;
    }
    .r5-vs-txt {
      font-size: 1.15rem;
      font-weight: 800;
      line-height: 1.1;
    }
    .r5-vs-sep {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.2rem;
      color: var(--text2);
      letter-spacing: 0.15em;
    }

    /* Roster (vivos / fuera) */
    .r5-roster {
      width: 100%;
      padding: 2px 14px 6px;
      display: flex;
      gap: 10px;
      box-sizing: border-box;
    }
    .r5-roster-col {
      flex: 1;
      min-width: 0;
      padding: 6px 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .r5-roster-title {
      font-size: 0.62rem;
      color: var(--text3);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .r5-roster-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-height: 22px;
    }
    .r5-roster-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 0.72rem;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .r5-roster-item.out { opacity: 0.55; text-decoration: line-through; }

    /* Modal de corte de cable (overlay post-victoria de duelo) */
    .r5-cable-modal {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 20;
    }
    .r5-cable-modal.active { display: flex; }
    .r5-cable-modal-inner {
      max-width: 340px;
      width: 92%;
      padding: 18px 18px 14px;
      background: linear-gradient(160deg, #1a1a2e, #0b0b17);
      border: 2px solid #ffd84d;
      border-radius: 18px;
      box-shadow: 0 0 30px rgba(255,216,77,0.3);
      text-align: center;
    }
    .r5-cable-modal-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      color: #ffd84d;
      letter-spacing: 0.06em;
      text-shadow: 0 0 10px rgba(255,216,77,0.35);
    }
    .r5-cable-modal-sub {
      font-size: 0.78rem;
      color: var(--text2);
      margin: 4px 0 12px;
    }
    .r5-cable-modal-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
    }

    /* ================================================================
       QUESTION SCREEN
    ================================================================ */
    #screen-question {
      justify-content: flex-start;
      padding: 0;
    }

    .q-header {
      width: 100%;
      padding: 14px 18px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .q-round {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text2);
    }

    .q-cat {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .cp-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      background: var(--bg3);
      border: 2px solid var(--border);
      border-radius: 14px;
      cursor: pointer;
      transition: transform .15s, border-color .15s, background .15s;
      color: var(--text);
      text-align: left;
      width: 100%;
      font-family: inherit;
      font-size: 1rem;
    }
    .cp-card.disabled { opacity: .45; cursor: not-allowed; }
    .cp-card:not(.disabled):hover { transform: translateY(-2px); }
    .cp-emoji { font-size: 1.8rem; line-height: 1; }
    .cp-name  { flex: 1; font-weight: 700; letter-spacing: .02em; }

    /* Timer */
    .timer-wrap {
      width: 100%;
      padding: 10px 18px;
      flex-shrink: 0;
    }

    .timer-bg {
      width: 100%;
      height: 6px;
      background: var(--bg4);
      border-radius: 3px;
      overflow: hidden;
    }

    .timer-fill {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--cyan), var(--mag));
      transition: width .1s linear;
    }

    .timer-secs {
      text-align: right;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.8rem;
      color: var(--cyan);
      margin-top: 3px;
      line-height: 1;
      transition: color .3s;
    }

    .timer-secs.urgent {
      color: var(--red);
      animation: timerPulse .5s ease infinite;
    }

    @keyframes timerPulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .6;
      }
    }

    /* Question body */
    .q-body {
      flex: 1;
      width: 100%;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
    }

    .q-text {
      font-size: clamp(0.95rem, 5vw, 1.2rem);
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
    }

    /* Options */
    .opts-grid {
      width: 100%;
      padding: 8px 14px 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(6px, 2vw, 9px);
      flex-shrink: 1; /* Permitimos encoger si el alto es crítico */
      overflow-y: visible;
    }

    .opt-btn {
      display: flex;
      align-items: center;
      gap: clamp(4px, 1.5vw, 9px);
      padding: clamp(6px, 1.5vw, 10px);
      background: var(--bg3);
      border: 1.5px solid var(--bord2);
      border-radius: var(--r);
      cursor: pointer;
      transition: all .13s;
      min-height: clamp(44px, 10vh, 52px);
      text-align: left;
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
    }

    .opt-btn:active:not(:disabled) {
      transform: scale(.96);
      border-color: var(--cyan);
      background: rgba(0, 229, 255, .07);
    }

    .opt-btn.sel {
      border-color: var(--cyan) !important;
      background: rgba(0, 229, 255, .07) !important;
    }

    .opt-btn.cor {
      border-color: var(--lime) !important;
      background: rgba(184, 255, 0, .08) !important;
      animation: corFlash .5s ease;
    }

    .opt-btn.wrg {
      border-color: var(--red) !important;
      background: rgba(255, 59, 48, .07) !important;
      animation: shake .4s ease;
    }

    .opt-btn:disabled {
      cursor: default;
    }

    @keyframes corFlash {
      0% {
        transform: scale(1);
      }

      35% {
        transform: scale(1.04);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      22% {
        transform: translateX(-7px);
      }

      44% {
        transform: translateX(7px);
      }

      66% {
        transform: translateX(-4px);
      }

      88% {
        transform: translateX(4px);
      }
    }

    .opt-ltr {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--bg4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', cursive;
      font-size: .9rem;
      letter-spacing: 0;
      flex-shrink: 0;
      color: var(--text2);
    }

    .opt-txt {
      font-size: .83rem;
      font-weight: 500;
      line-height: 1.3;
      padding-top: 3px;
    }

    /* ================================================================
       BUZZ CONTAINER
    ================================================================ */
    .buzz-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 20px 20px;
    }

    .buzz-btn {
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: var(--mag);
      border: none;
      cursor: pointer;
      font-family: 'Bebas Neue', cursive;
      font-size: 2.3rem;
      letter-spacing: .05em;
      color: #fff;
      box-shadow: var(--gmag), 0 10px 40px rgba(255, 0, 110, .4);
      transition: all .1s;
      animation: buzzPulse 2s ease infinite;
    }

    .buzz-btn:active {
      transform: scale(.9);
      box-shadow: 0 0 50px rgba(255, 0, 110, .9);
    }

    .buzz-btn.disabled {
      background: var(--bg4);
      color: var(--text3);
      animation: none;
      box-shadow: none;
      pointer-events: none;
    }

    @keyframes buzzPulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
        box-shadow: var(--gmag), 0 14px 56px rgba(255, 0, 110, .55);
      }
    }

    .buzzed-info {
      margin-top: 20px;
      text-align: center;
    }

    .buzzed-name {
      font-family: 'Bebas Neue', cursive;
      font-size: 2rem;
      color: var(--mag);
    }

    .buzzed-sub {
      font-size: .78rem;
      color: var(--text2);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    /* ================================================================
       ROUND RESULT
    ================================================================ */
    #screen-round-result {
      gap: 14px;
    }

    .res-icon {
      font-size: 4.5rem;
      animation: resPop .4s ease;
    }

    @keyframes resPop {
      0% {
        transform: scale(0);
      }

      70% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

    .res-lbl {
      font-size: .72rem;
      color: var(--text2);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 4px;
      text-align: center;
    }

    .res-ans {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--lime);
      text-align: center;
    }

    .res-expl {
      width: 100%;
      max-width: 360px;
      background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
      border: 1px solid var(--border);
      border-left: 3px solid var(--cyan);
      border-radius: 10px;
      padding: 14px 16px;
      animation: explFadeIn .32s ease-out both;
    }

    .res-expl-lbl {
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--cyan);
      font-weight: 700;
      margin-bottom: 6px;
      opacity: .9;
    }

    .res-expl-txt {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--text2);
      margin: 0;
    }

    @keyframes explFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }

    .res-p-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--bg3);
      border-radius: var(--rsm);
    }

    .res-pts {
      margin-left: auto;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.1rem;
    }

    .pos {
      color: var(--lime);
    }

    .neg {
      color: var(--red);
    }

    .zer {
      color: var(--text3);
    }

    /* ================================================================
       SCORES
    ================================================================ */
    .sc-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--r);
    }

    .sc-item.top {
      border-color: rgba(255, 215, 0, .28);
      background: rgba(255, 215, 0, .04);
    }

    .sc-rank {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.4rem;
      width: 28px;
      text-align: center;
      color: var(--text2);
    }

    .sc-rank.r1 {
      color: gold;
    }

    .sc-rank.r2 {
      color: silver;
    }

    .sc-rank.r3 {
      color: #cd7f32;
    }

    .sc-score {
      margin-left: auto;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      color: var(--cyan);
    }

    /* ================================================================
       FINAL SCREEN
    ================================================================ */
    .crown {
      font-size: 4rem;
      animation: crownBounce 1.2s ease infinite;
    }

    @keyframes crownBounce {

      0%,
      100% {
        transform: translateY(0) rotate(-5deg);
      }

      50% {
        transform: translateY(-12px) rotate(5deg);
      }
    }

    /* Confetti */
    .conf {
      position: fixed;
      border-radius: 2px;
      animation: confFall linear forwards;
      pointer-events: none;
      z-index: 2000;
    }

    @keyframes confFall {
      0% {
        transform: translateY(-20px) rotate(0);
        opacity: 1;
      }

      100% {
        transform: translateY(105vh) rotate(720deg);
        opacity: 0;
      }
    }

    /* ================================================================
       FINAL SCREEN — v3.20.0
       Estados por jugador en el ranking final:
         .fin-winner   → ganador de la desactivación, intacto y resaltado
         .fin-exploded → perdedor del duelo final: tarjeta reventada/quemada
         .fin-blood    → muerto por falta de vidas: sangre goteando
       Y overlay fullscreen .final-boom-overlay para el POV del perdedor.
    ================================================================ */

    /* Necesario para superponer las capas (.blood-layer, .explode-layer) */
    .sc-item {
      position: relative;
      overflow: hidden;
    }

    /* —— GANADOR INTACTO —— */
    .sc-item.fin-winner {
      border-color: rgba(255, 215, 77, .6) !important;
      background:
        radial-gradient(circle at 50% -20%, rgba(255, 215, 77, .25), transparent 60%),
        rgba(255, 215, 77, .08) !important;
      box-shadow: 0 0 0 1px rgba(255, 215, 77, .35), 0 0 24px rgba(255, 215, 77, .35);
      animation: finWinnerGlow 2.4s ease-in-out infinite;
    }

    @keyframes finWinnerGlow {
      0%, 100% { box-shadow: 0 0 0 1px rgba(255, 215, 77, .35), 0 0 24px rgba(255, 215, 77, .35); }
      50%      { box-shadow: 0 0 0 1px rgba(255, 215, 77, .55), 0 0 38px rgba(255, 215, 77, .55); }
    }

    /* —— PERDEDOR EXPLOTADO —— */
    .sc-item.fin-exploded {
      border-color: rgba(255, 64, 32, .55) !important;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(120, 30, 0, .55), transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 80, 0, .25), transparent 60%),
        #1a0606 !important;
      color: #f5d4cc;
      animation: finShake 0.45s cubic-bezier(.36,.07,.19,.97) 1;
      /* Recorta los bordes con un efecto "trozos arrancados" */
      clip-path: polygon(
        0% 0%, 8% 6%, 22% 0%, 36% 8%, 52% 0%, 68% 6%, 84% 0%, 100% 6%,
        100% 100%, 88% 94%, 72% 100%, 56% 92%, 40% 100%, 24% 94%, 10% 100%, 0% 92%
      );
    }
    .sc-item.fin-exploded .sc-score {
      color: #ff6a4a;
      text-shadow: 0 0 8px rgba(255, 80, 40, .55);
    }
    .sc-item.fin-exploded .p-name {
      filter: drop-shadow(0 0 1px rgba(0,0,0,.8));
    }

    @keyframes finShake {
      10%, 90% { transform: translate3d(-1px, 0, 0); }
      20%, 80% { transform: translate3d(2px, 0, 0); }
      30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
      40%, 60% { transform: translate3d(4px, 0, 0); }
    }

    .explode-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
    }
    /* Quemaduras de los bordes */
    .explode-layer .ex-burn {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 12% 30%, rgba(0,0,0,.55) 0 18px, transparent 24px),
        radial-gradient(circle at 88% 70%, rgba(0,0,0,.55) 0 22px, transparent 28px),
        radial-gradient(circle at 60% 10%, rgba(0,0,0,.45) 0 14px, transparent 18px),
        linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.45));
      mix-blend-mode: multiply;
      opacity: .9;
    }
    /* Grietas blancas/rojas */
    .explode-layer .ex-crack {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, transparent 38%, rgba(255,80,40,.45) 39%, transparent 40%),
        linear-gradient(70deg,  transparent 58%, rgba(255,255,255,.18) 59%, transparent 60%),
        linear-gradient(155deg, transparent 22%, rgba(255,40,20,.30) 23%, transparent 24%);
      filter: blur(.4px);
      opacity: .85;
    }
    .explode-layer .ex-icon {
      position: absolute;
      top: 4px;
      right: 8px;
      font-size: 1.2rem;
      filter: drop-shadow(0 0 6px rgba(255,90,40,.85));
      animation: exIconPulse 1.4s ease-in-out infinite;
    }
    @keyframes exIconPulse {
      0%, 100% { transform: scale(1); opacity: .9; }
      50%      { transform: scale(1.2); opacity: 1; }
    }

    /* —— MUERTO POR FALTA DE VIDAS — sangre goteando —— */
    .sc-item.fin-blood {
      border-color: rgba(180, 20, 20, .55) !important;
      background:
        linear-gradient(180deg, rgba(80, 0, 0, .35), rgba(20, 0, 0, .25)),
        var(--bg3) !important;
      color: #f0d0d0;
    }
    .sc-item.fin-blood .sc-score {
      color: #ff7a7a;
    }
    .blood-layer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }
    /* Capa rojo carmín en el borde superior */
    .blood-layer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 14px;
      background:
        radial-gradient(ellipse at 12% 0, #6a0000 0 10px, transparent 11px),
        radial-gradient(ellipse at 32% 0, #8a0000 0  8px, transparent  9px),
        radial-gradient(ellipse at 55% 0, #6a0000 0 12px, transparent 13px),
        radial-gradient(ellipse at 78% 0, #8a0000 0  9px, transparent 10px),
        radial-gradient(ellipse at 92% 0, #6a0000 0 11px, transparent 12px),
        linear-gradient(180deg, #5a0000, transparent);
      filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
    }
    /* Gotas que caen */
    .blood-layer::after {
      content: '';
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      height: 100%;
      background-image:
        radial-gradient(circle at 18%  -4px, #b80000 0 3px, transparent 4px),
        radial-gradient(circle at 42%  -4px, #a00000 0 4px, transparent 5px),
        radial-gradient(circle at 67%  -4px, #b80000 0 3px, transparent 4px),
        radial-gradient(circle at 88%  -4px, #a00000 0 3px, transparent 4px);
      background-repeat: no-repeat;
      animation: bloodDrip 3.4s ease-in infinite;
    }
    @keyframes bloodDrip {
      0%   { transform: translateY(-6px); opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translateY(160%); opacity: 0; }
    }

    /* —— OVERLAY FULLSCREEN DE EXPLOSIÓN (POV perdedor) —— */
    .final-boom-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      pointer-events: none;
      overflow: hidden;
    }
    .final-boom-overlay .boom-flash {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 50%, #fff 0%, #ffd060 12%, #ff4a00 30%, rgba(80,0,0,.85) 60%, transparent 80%);
      animation: boomFlash 0.55s ease-out forwards;
    }
    .final-boom-overlay .boom-shock {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      transform: translate(-50%, -50%);
      border: 6px solid rgba(255, 200, 80, .9);
      border-radius: 50%;
      animation: boomShock 0.9s ease-out forwards;
    }
    .final-boom-overlay .boom-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 7rem;
      filter: drop-shadow(0 0 18px rgba(255, 120, 40, .9));
      animation: boomIcon 1.6s ease-out forwards;
    }
    @keyframes boomFlash {
      0%   { opacity: 0; transform: scale(0.2); }
      30%  { opacity: 1; transform: scale(1.2); }
      100% { opacity: 0; transform: scale(2); }
    }
    @keyframes boomShock {
      0%   { width: 20px; height: 20px; opacity: 1; border-width: 8px; }
      100% { width: 220vmax; height: 220vmax; opacity: 0; border-width: 1px; }
    }
    @keyframes boomIcon {
      0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
      25%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
      70%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    }

    /* ================================================================
       TOAST
    ================================================================ */
    #toast-wrap {
      position: fixed;
      bottom: 88px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 900;
      display: flex;
      flex-direction: column-reverse;
      gap: 8px;
      align-items: center;
      pointer-events: none;
    }

    .toast {
      padding: 10px 20px;
      background: var(--bg4);
      border: 1px solid var(--bord2);
      border-radius: 24px;
      font-size: .85rem;
      font-weight: 500;
      white-space: nowrap;
      animation: toastIn .28s ease, toastOut .28s ease 2.7s forwards;
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes toastOut {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }

    /* ================================================================
       LOADING
    ================================================================ */
    #loading {
      position: fixed;
      inset: 0;
      background: rgba(6, 6, 14, .88);
      backdrop-filter: blur(8px);
      z-index: 800;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }

    #loading.on {
      opacity: 1;
      pointer-events: all;
    }

    .spin {
      width: 42px;
      height: 42px;
      border: 3px solid var(--bg4);
      border-top-color: var(--cyan);
      border-radius: 50%;
      animation: spin .75s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .loading-lbl {
      font-size: .82rem;
      color: var(--text2);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    /* ================================================================
       UTILS
    ================================================================ */
    .tc {
      text-align: center;
    }

    .muted {
      color: var(--text2);
    }

    .sm {
      font-size: .85rem;
    }

    .gap12 {
      gap: 12px;
    }

    .w340 {
      width: 100%;
      max-width: 340px;
    }

    .w360 {
      width: 100%;
      max-width: 360px;
    }

    .sep {
      width: 100%;
      max-width: 340px;
      height: 1px;
      background: var(--border);
      margin: 8px 0;
    }

    .sec-t {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 10px;
      text-align: left;
      width: 100%;
      max-width: 340px;
    }

    .back {
      position: absolute;
      top: 18px;
      left: 18px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--bg3);
      border: 1px solid var(--bord2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      z-index: 10;
      transition: all .15s;
    }

    .back:active {
      transform: scale(.88);
    }

    .flex-col {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .plist {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
      max-height: 280px;
      overflow-y: auto;
    }

    .slist {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 220px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .rlist {
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Answer count badges during question */
    .answered-count {
      text-align: center;
      font-size: .78rem;
      color: var(--text2);
      margin-top: 4px;
      font-weight: 500;
      padding-bottom: 4px;
      width: 100%;
    }

    /* ================================================================
       WAITING FOR OTHER PLAYERS
    ================================================================ */
    .wait-ans {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, var(--bg) 80%, transparent);
      padding: 18px 20px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 5;
      pointer-events: none;
    }

    .wait-ans-lbl {
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text2);
    }

    .wait-avatars {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .wait-av-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .wait-av-emoji {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      transition: all .3s;
    }

    .wait-av-emoji.answered {
      box-shadow: 0 0 0 2px var(--lime);
    }

    .wait-av-nick {
      font-size: .6rem;
      color: var(--text2);
      max-width: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    /* Badge de elección sobre cada opción */
    .choice-badges {
      display: flex;
      gap: 3px;
      flex-wrap: wrap;
      margin-top: 4px;
      min-height: 20px;
    }

    .choice-badge {
      font-size: .65rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      white-space: nowrap;
      animation: badgePop .3s ease;
    }

    @keyframes badgePop {
      from { transform: scale(0); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }

    /* Ronda Rápida label */
    .round-type-lbl {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--lime);
      background: rgba(184,255,0,.1);
      border: 1px solid rgba(184,255,0,.25);
      border-radius: 10px;
      padding: 2px 8px;
      margin-bottom: 2px;
      display: inline-block;
    }

    /* ================================================================
       RONDA 2 — EL PODIO
    ================================================================ */
    .round-type-lbl.r2 {
      color: #ffd700;
      background: rgba(255,215,0,.1);
      border-color: rgba(255,215,0,.28);
    }

    /* Contenedor de 5 opciones en columna */
    #opts-r2 {
      width: 100%;
      padding: 6px 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      flex-shrink: 0;
    }

    .opt-r2-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 13px;
      background: var(--bg3);
      border: 1.5px solid var(--bord2);
      border-radius: var(--r);
      cursor: pointer;
      transition: all .15s;
      min-height: 54px;
      text-align: left;
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .opt-r2-btn:active:not(:disabled) {
      transform: scale(.98);
      border-color: #ffd700;
      background: rgba(255,215,0,.07);
    }

    /* Opción elegida por MÍ */
    .opt-r2-btn.mine {
      border-color: #ffd700 !important;
      background: rgba(255,215,0,.08) !important;
      box-shadow: 0 0 18px rgba(255,215,0,.15);
    }

    /* Opción tomada por OTRO jugador */
    .opt-r2-btn.taken {
      border-color: var(--border) !important;
      background: var(--bg2) !important;
      opacity: .55;
      cursor: not-allowed;
    }

    /* Opción revelada con su puesto */
    .opt-r2-btn.reveal-1 { border-color: #ffd700 !important; background: rgba(255,215,0,.12) !important; }
    .opt-r2-btn.reveal-2 { border-color: silver !important;   background: rgba(192,192,192,.1) !important; }
    .opt-r2-btn.reveal-3 { border-color: #cd7f32 !important;  background: rgba(205,127,50,.1) !important; }
    .opt-r2-btn.reveal-4 { border-color: var(--text3) !important; background: rgba(68,68,90,.12) !important; }
    .opt-r2-btn.reveal-5 { border-color: var(--text3) !important; background: rgba(68,68,90,.08) !important; opacity:.7; }

    @keyframes revealPop {
      0%   { transform: scale(.96); opacity:.4; }
      55%  { transform: scale(1.03); }
      100% { transform: scale(1); opacity:1; }
    }
    .opt-r2-btn.reveal-1,
    .opt-r2-btn.reveal-2,
    .opt-r2-btn.reveal-3,
    .opt-r2-btn.reveal-4,
    .opt-r2-btn.reveal-5 {
      animation: revealPop .45s ease;
    }

    /* Número de letra A-E */
    .opt-r2-ltr {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', cursive;
      font-size: .95rem;
      letter-spacing: 0;
      flex-shrink: 0;
      color: var(--text2);
    }

    .opt-r2-txt {
      font-size: .83rem;
      font-weight: 500;
      line-height: 1.3;
      flex: 1;
    }

    /* Puesto display en revelación - Arriba Derecha */
    .reveal-rank-badge {
      position: absolute;
      right: 12px;
      top: 8px;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.1rem;
      opacity: 0;
      transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform: translateY(-5px);
    }

    /* Badge de puntos en revelación - Abajo Derecha */
    .opt-r2-pts {
      position: absolute;
      right: 12px;
      bottom: 8px;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.3rem;
      flex-shrink: 0;
      opacity: 0;
      transition: all .4s ease;
      transform: translateY(5px);
    }

    .opt-r2-btn[class*='reveal-'] .reveal-rank-badge,
    .opt-r2-btn[class*='reveal-'] .opt-r2-pts {
      opacity: 1;
      transform: translateY(0);
    }

    /* Badges de jugadores que eligieron esta opción */
    .opt-r2-badges {
      display: flex;
      gap: 3px;
      flex-wrap: wrap;
      margin-top: 3px;
      min-height: 20px;
    }

    /* Ajuste para que el texto no pise los badges de la derecha */
    .opt-r2-btn .opt-r2-txt {
      padding-right: 80px; /* Espacio para el ranking y puntos */
      min-height: 1.2em;
    }

    /* ================================================================
       PANTALLA INTERMEDIA CAMBIO DE RONDA
    ================================================================ */
    #screen-roundbreak {
      gap: 10px;
    }

    .rb-badge {
      font-family: 'Bebas Neue', cursive;
      font-size: 5rem;
      line-height: 1;
      background: linear-gradient(135deg, #ffd700, #ff9500);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: crownBounce 1.2s ease infinite;
      text-align: center;
    }

    .rb-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 2.2rem;
      letter-spacing: .06em;
      text-align: center;
    }

    .rb-sub {
      font-size: .82rem;
      color: var(--text2);
      text-align: center;
      letter-spacing: .08em;
      text-transform: uppercase;
      max-width: 300px;
      line-height: 1.5;
    }

    .rb-rules {
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 8px 0;
    }

    .rb-rule-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--rsm);
    }

    .rb-rule-pts {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.2rem;
      width: 52px;
      text-align: right;
      flex-shrink: 0;
    }

    .rb-rule-lbl {
      font-size: .82rem;
      color: var(--text2);
    }

    /* ================================================================
       QR CODE — sala (host) y escáner (invitado)
    ================================================================ */
    .qr-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
    }

    .qr-canvas-box {
      background: #fff;
      padding: 10px;
      border-radius: 14px;
      box-shadow: 0 0 22px rgba(0, 229, 255, .18), 0 4px 16px rgba(0, 0, 0, .4);
      line-height: 0;
    }

    .qr-canvas-box canvas,
    .qr-canvas-box img {
      display: block;
      width: 168px;
      height: 168px;
    }

    /* qrcodejs mete un <canvas> y un <img> de fallback dentro del contenedor;
       ocultamos el <img> para que no se solape visualmente con el canvas. */
    .qr-canvas-box img { display: none; }

    .qr-hint {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text2);
    }

    /* ================================================================
       CREATE ROOM — Sala del anfitrión (layout refinado)
    ================================================================ */
    #screen-create-room {
      padding: 28px 20px 32px !important;
      gap: 0;
    }

    .room-panel {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 0 auto;
    }

    .room-hd {
      text-align: center;
    }

    .room-hd h2 {
      font-size: 1.45rem;
      letter-spacing: .02em;
    }

    .room-hd p {
      margin-top: 6px;
      font-size: .85rem;
      color: var(--text2);
    }

    .room-share {
      background: linear-gradient(180deg, rgba(0, 229, 255, .05), rgba(0, 229, 255, 0) 70%);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 22px 18px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .room-share .code-wrap {
      margin: 0;
    }

    .room-share .code-val {
      font-size: 3.4rem;
      letter-spacing: .28em;
    }

    .room-share .qr-wrap {
      margin: 0;
      gap: 10px;
    }

    .room-players {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .plist-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .plist-hd .sec-t {
      margin-bottom: 0;
      width: auto;
    }

    .plist-count {
      font-family: 'Bebas Neue', cursive;
      font-size: .95rem;
      color: var(--cyan);
      letter-spacing: .12em;
      padding: 2px 12px;
      background: rgba(0, 229, 255, .08);
      border: 1px solid rgba(0, 229, 255, .22);
      border-radius: 999px;
      min-width: 34px;
      text-align: center;
    }

    .room-players .plist {
      margin-bottom: 0;
      max-height: 220px;
    }

    .plist-empty {
      padding: 18px 16px;
      border: 1px dashed var(--border);
      border-radius: var(--rsm);
      text-align: center;
      color: var(--text3);
      font-size: .82rem;
      letter-spacing: .02em;
    }

    .room-players .wait-row {
      justify-content: center;
      margin: 0;
    }

    .room-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 4px;
    }

    .room-actions .btn {
      max-width: none;
    }

    .room-actions .btn-danger {
      height: 44px;
    }

    @media (max-height: 720px) {
      #screen-create-room {
        padding-top: 20px !important;
      }
      .room-panel {
        gap: 16px;
      }
      .room-share {
        padding: 16px 16px 14px;
        gap: 12px;
      }
      .room-share .code-val {
        font-size: 2.9rem;
      }
      .qr-canvas-box canvas,
      .qr-canvas-box img {
        width: 148px;
        height: 148px;
      }
    }

    .qr-scan-overlay {
      position: fixed;
      inset: 0;
      background: rgba(6, 6, 14, .92);
      backdrop-filter: blur(10px);
      z-index: 1500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: qrOverlayIn .18s ease;
    }

    @keyframes qrOverlayIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .qr-scan-box {
      width: 100%;
      max-width: 340px;
      background: var(--bg2);
      border: 1px solid var(--bord2);
      border-radius: var(--r);
      padding: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .qr-scan-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      letter-spacing: .08em;
      color: var(--cyan);
      text-align: center;
    }

    #qr-reader {
      width: 100%;
      min-height: 260px;
      border-radius: var(--rsm);
      overflow: hidden;
      background: #000;
    }

    #qr-reader video {
      width: 100% !important;
      border-radius: var(--rsm);
    }

    /* Oculta el UI ruidoso que mete html5-qrcode (botones de cambio/torch que rara vez funcionan bien en PWA) */
    #qr-reader__dashboard_section_csr,
    #qr-reader__dashboard_section_swaplink,
    #qr-reader__header_message,
    #qr-reader__status_span {
      display: none !important;
    }

    .qr-scan-hint {
      font-size: .75rem;
      color: var(--text2);
      text-align: center;
      letter-spacing: .06em;
      min-height: 1.2em;
    }

    .qr-scan-hint.err {
      color: var(--red);
    }

    /* ================================================================
       PANEL DE ADMINISTRACIÓN (DEBUG)
    ================================================================ */
    #host-admin-panel {
      position: fixed;
      left: 14px;
      bottom: 84px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      pointer-events: none;
    }

    #host-admin-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--bg4);
      border: 1px solid var(--bord2);
      color: var(--text2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      pointer-events: all;
    }

    #host-admin-btn.open {
      transform: rotate(90deg);
      background: var(--cyan);
      color: #000;
      border-color: var(--cyan);
    }

    #host-admin-menu {
      background: rgba(28, 28, 46, 0.8);
      backdrop-filter: blur(12px);
      border: 1px solid var(--bord2);
      border-radius: var(--r);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transform: scale(0.9) translateX(-10px);
      transform-origin: bottom left;
      pointer-events: none;
      transition: all 0.2s ease;
      min-width: 180px;
    }

    #host-admin-menu.open {
      opacity: 1;
      transform: scale(1) translateX(0);
      pointer-events: all;
    }

    .admin-tool-btn {
      width: 100%;
      padding: 10px 14px;
      border-radius: var(--rsm);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.15s;
    }

    .admin-tool-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .admin-tool-btn:active {
      transform: scale(0.97);
    }

    .admin-tool-btn.danger {
      color: var(--red);
    }

    .admin-label {
      font-size: 0.6rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text3);
      padding: 2px 4px;
    }

    /* Media Queries de Emergencia para pantallas ultra-pequeñas */
    @media (max-height: 680px) {
      .screen { padding: 10px; justify-content: flex-start; }
      .tc { margin-bottom: 20px !important; }
      .av-grid { gap: 6px !important; }
      .opt-btn { min-height: 48px; padding: 6px 10px; }
      .q-body { min-height: 30px; }
      .hud-score { right: 5px; top: 4px; scale: 0.85; transform-origin: top right; }
    }
    @media (max-width: 340px) {
      .logo { font-size: 2.2rem; }
      .opt-btn { font-size: 0.85rem; }
    }

    /* ================================================================
       v3.9.0 — Salas públicas / PIN / expulsión
    ================================================================ */
    @keyframes qrScanLine {
      0%   { top: 0;    opacity: 1; }
      50%  { top: 100%; opacity: 1; }
      50.1%{ top: 100%; opacity: 0; }
      51%  { top: 0;    opacity: 0; }
      52%  { top: 0;    opacity: 1; }
      100% { top: 100%; opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      [style*="qrScanLine"] { animation: none !important; }
    }
    .pr-card {
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border: 1.5px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      cursor: pointer;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
      text-align:left;
    }
    .pr-card:hover { border-color: var(--cyan); transform: translateY(-1px); background: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02)); }
    .pr-card .pr-em { font-size:1.6rem; flex-shrink:0; }
    .pr-card .pr-name { font-weight:800; color:var(--text); font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pr-card .pr-meta { font-size:.7rem; color:var(--text2); margin-top:2px; display:flex; gap:8px; align-items:center; }
    .pr-card .pr-lock { color:#ffc400; font-size:.95rem; flex-shrink:0; }
    .pr-card .pr-arrow { font-size:1.1rem; color:var(--text2); opacity:.6; flex-shrink:0; }

    .visibility-toggle {
      display:flex; gap:6px; width:100%; max-width:340px; margin:8px auto 4px;
      background: rgba(0,0,0,0.25); padding:4px; border-radius:12px;
      border:1px solid rgba(255,255,255,0.08);
    }
    .visibility-toggle button {
      flex:1; padding:8px 6px; border:none; background:transparent;
      color:var(--text2); font-weight:700; font-size:.72rem;
      border-radius:9px; cursor:pointer; transition: all .15s ease;
      letter-spacing:.04em; text-transform:uppercase;
    }
    .visibility-toggle button.active {
      background: var(--cyan); color:#062028; box-shadow: 0 2px 10px rgba(0,229,255,0.3);
    }
    .visibility-toggle button:not(.active):hover { background: rgba(255,255,255,0.06); color:var(--text); }

    .kick-btn {
      background: rgba(255,80,100,0.12); border:1px solid rgba(255,80,100,0.4);
      color:#ff7788; width:28px; height:28px; min-width:28px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:.85rem; font-weight:800; cursor:pointer;
      transition: all .15s ease; padding:0; line-height:1;
    }
    .kick-btn:hover { background: rgba(255,80,100,0.25); border-color:#ff5577; color:#fff; }


    /* ================================================================
       AUTH (login / registro) + PROFILE SETUP (username + avatar)
       Pantallas: #screen-auth, #screen-profile-setup
    ================================================================ */

    /* Tarjeta principal del login */
    .auth-card {
      width: 100%;
      max-width: 360px;
      padding: 18px 18px 16px;
      background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid var(--border);
      border-radius: 18px;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Tabs Login / Crear cuenta */
    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      background: rgba(0,0,0,0.25);
      padding: 4px;
      border-radius: 12px;
      border: 1px solid var(--border);
    }
    .auth-tab {
      background: transparent;
      border: none;
      color: var(--text2);
      padding: 10px 8px;
      border-radius: 9px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }
    .auth-tab.active {
      background: linear-gradient(135deg, var(--cyan), #0099ff);
      color: #06121a;
      box-shadow: 0 4px 12px rgba(0,229,255,0.25);
    }
    .auth-tab:not(.active):hover { color: var(--text); background: rgba(255,255,255,0.05); }

    /* Form */
    .auth-form { display: flex; flex-direction: column; gap: 4px; }
    .auth-form .lbl { font-size: 0.72rem; color: var(--text2); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }

    .auth-link {
      align-self: flex-end;
      background: transparent;
      border: none;
      color: var(--text2);
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      margin-top: 6px;
      padding: 2px 0;
      transition: color 0.15s ease;
    }
    .auth-link:hover { color: var(--cyan); }

    .auth-error {
      background: rgba(255,59,48,0.08);
      border: 1px solid rgba(255,59,48,0.4);
      color: #ffb3ad;
      font-size: 0.78rem;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 10px;
      margin-top: 6px;
    }

    /* Separador "o" */
    .auth-sep {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text3);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin: 2px 0;
    }
    .auth-sep::before, .auth-sep::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* Botón Google: blanco con logo a la izquierda */
    .btn-google {
      width: 100%;
      height: 48px;
      background: #ffffff;
      color: #1f1f1f;
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 12px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.92rem;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    .btn-google:hover { background: #f4f4f4; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
    .btn-google:active { transform: translateY(1px); }
    .btn-google svg { flex-shrink: 0; }

    /* Disable visual feedback durante una llamada de auth */
    .btn[disabled], .btn-google[disabled] { opacity: 0.55; cursor: wait; pointer-events: none; }

    /* ----------------------------------------------------------------
       PROFILE SETUP
    ---------------------------------------------------------------- */

    /* Avatar dentro del preview circular */
    #ps-avatar-preview > .qa-avatar-svg,
    #ps-avatar-preview > .qa-avatar-img {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }
    #ps-avatar-preview > .qa-avatar-img { object-fit: cover; }

    /* Avatar dentro del chip del menú principal (#menu-av) y de cualquier .p-av */
    .p-av > .qa-avatar-svg,
    .p-av > .qa-avatar-img {
      width: 100% !important;
      height: 100% !important;
      display: block;
      border-radius: 50%;
      overflow: hidden;
    }
    .p-av > .qa-avatar-img { object-fit: cover; }
    /* Cuando el .p-av aloja un avatar SVG/img, neutralizamos el padding/font del chip
       (que estaba pensado para emojis con bg de color) */
    .p-av:has(> .qa-avatar-svg, > .qa-avatar-img) {
      padding: 0;
      background: transparent !important;
    }

    /* Feedback de disponibilidad */
    .ps-feedback { color: var(--text3); font-weight: 600; }
    .ps-feedback.ok { color: var(--lime); }
    .ps-feedback.err { color: #ff7788; }
    .ps-feedback.checking { color: var(--text2); font-style: italic; }

    /* Grid de avatares: la primera celda es la foto de Google si está disponible
       (la añade JS al abrir la pantalla). El resto son los SVGs custom. */
    .ps-avatar-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      max-height: 32vh;
      overflow-y: auto;
      padding: 4px;
      background: rgba(0,0,0,0.18);
      border-radius: 12px;
      border: 1px solid var(--border);
      scrollbar-width: thin;
      scrollbar-color: var(--bord2) transparent;
    }
    .ps-avatar-grid::-webkit-scrollbar { width: 6px; }
    .ps-avatar-grid::-webkit-scrollbar-thumb { background: var(--bord2); border-radius: 3px; }

    .ps-avatar-opt {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid transparent;
      background: rgba(0,0,0,0.2);
      cursor: pointer;
      padding: 0;
      transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .ps-avatar-opt:hover { transform: translateY(-1px); border-color: var(--bord2); }
    .ps-avatar-opt.sel  { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,229,255,0.25), 0 4px 14px rgba(0,229,255,0.25); }
    .ps-avatar-opt > svg,
    .ps-avatar-opt > .qa-avatar-svg,
    .ps-avatar-opt > .qa-avatar-img {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }
    .ps-avatar-opt > .qa-avatar-img { object-fit: cover; }

    /* Etiqueta "Google" sobre la opción de foto de Google */
    .ps-avatar-opt[data-kind="google"]::after {
      content: "Google";
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.7);
      color: #fff;
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 1px 6px;
      border-radius: 6px;
      pointer-events: none;
    }
    /* ================================================================
       FIN AUTH / PROFILE SETUP
    ================================================================ */

    /* ================================================================
       v3.11.0 · BOTTOM NAV (Inicio · Tienda · Ranking · Minijuegos · Perfil)
       Estilo: minimalismo profesional, glass sutil, acento cyan en activo.
    ================================================================ */
    .has-nav-bottom {
      padding-bottom: 110px !important;
    }

    .nav-bottom {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: max(14px, env(safe-area-inset-bottom, 14px));
      width: min(420px, calc(100vw - 24px));
      height: 64px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      align-items: stretch;
      gap: 2px;
      padding: 6px;
      background: rgba(14, 8, 36, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 22px;
      backdrop-filter: blur(22px) saturate(140%);
      -webkit-backdrop-filter: blur(22px) saturate(140%);
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      z-index: 50;
    }

    .nav-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 6px 2px;
      background: transparent;
      border: none;
      border-radius: 16px;
      color: var(--text3);
      font-family: 'Exo 2', sans-serif;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .nav-btn .nav-ico {
      width: 22px;
      height: 22px;
      display: block;
      stroke: currentColor;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.2s ease;
    }

    .nav-btn:hover { color: var(--text2); }
    .nav-btn:active { transform: scale(0.94); }

    .nav-btn.active {
      color: var(--cyan);
      background: rgba(0, 229, 255, 0.10);
      box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.25);
    }
    .nav-btn.active .nav-ico {
      filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45));
    }
    .nav-btn.active::before {
      content: '';
      position: absolute;
      top: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      height: 2px;
      border-radius: 2px;
      background: var(--cyan);
      box-shadow: 0 0 8px var(--cyan);
    }

    /* ================================================================
       v3.11.0 · PANTALLAS DE PESTAÑAS (Perfil · Ranking · Tienda · Minijuegos)
    ================================================================ */
    .tab-screen {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding-top: 8px;
    }

    .tab-head {
      text-align: center;
      margin-bottom: 4px;
    }
    .tab-head h2 {
      font-family: 'Bebas Neue', cursive;
      font-size: 2rem;
      letter-spacing: 0.05em;
      color: var(--text);
      line-height: 1;
    }
    .tab-head .sub {
      font-size: 0.72rem;
      color: var(--cyan);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-top: 6px;
    }

    .tab-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 18px;
      backdrop-filter: blur(10px);
    }

    /* --- PROFILE TAB --- */
    .profile-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 24px 18px;
      background: linear-gradient(160deg, rgba(0,229,255,0.10), rgba(255,255,255,0.02) 60%);
      border: 1px solid rgba(0, 229, 255, 0.18);
      border-radius: 22px;
      position: relative;
      overflow: hidden;
    }
    .profile-hero::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 140px; height: 140px;
      background: var(--cyan);
      filter: blur(60px);
      opacity: 0.18;
      pointer-events: none;
    }
    .profile-hero .p-av {
      width: 84px;
      height: 84px;
      font-size: 2.2rem;
      border: 2px solid var(--cyan);
      box-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
      background: rgba(0,0,0,0.25);
      z-index: 1;
    }
    .profile-hero .p-nick {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      color: var(--text);
      letter-spacing: 0.04em;
      z-index: 1;
    }
    .profile-hero .p-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.7rem;
      color: var(--text2);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      z-index: 1;
    }
    .profile-hero .p-status::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 8px var(--lime);
    }

    .profile-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
      width: 100%;
      text-align: left;
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
    }
    .profile-row:hover {
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.14);
    }
    .profile-row .pr-ico {
      width: 22px; height: 22px;
      stroke: var(--cyan);
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }
    .profile-row .pr-text {
      flex: 1;
      min-width: 0;
    }
    .profile-row .pr-text .pr-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.1;
    }
    .profile-row .pr-text .pr-sub {
      font-size: 0.7rem;
      color: var(--text2);
      margin-top: 2px;
    }
    .profile-row .pr-arrow {
      color: var(--text3);
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .profile-row.danger { border-color: rgba(255, 59, 48, 0.25); }
    .profile-row.danger .pr-ico { stroke: var(--red); }
    .profile-row.danger .pr-title { color: var(--red); }

    /* --- RANKING TAB (tabs internas) --- */
    .seg-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      padding: 4px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      border-radius: 14px;
    }
    .seg-tab {
      padding: 10px 4px;
      background: transparent;
      border: none;
      border-radius: 10px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text3);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .seg-tab:hover { color: var(--text2); }
    .seg-tab.active {
      background: var(--cyan);
      color: #06121b;
      box-shadow: 0 4px 12px rgba(0, 229, 255, 0.25);
    }

    .empty-state {
      padding: 36px 18px;
      text-align: center;
      color: var(--text2);
      background: rgba(255,255,255,0.02);
      border: 1px dashed rgba(255,255,255,0.10);
      border-radius: 16px;
    }
    .empty-state .es-ico {
      font-size: 2.4rem;
      opacity: 0.5;
      margin-bottom: 10px;
      display: block;
    }
    .empty-state .es-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.3rem;
      color: var(--text);
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }
    .empty-state .es-sub {
      font-size: 0.78rem;
      color: var(--text2);
      max-width: 260px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* --- "PRÓXIMAMENTE" --- */
    .coming-soon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 56px 24px;
      text-align: center;
      background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
      border: 1px solid var(--border);
      border-radius: 22px;
    }
    .coming-soon .cs-badge {
      display: inline-block;
      padding: 6px 14px;
      background: rgba(0, 229, 255, 0.12);
      color: var(--cyan);
      border: 1px solid rgba(0, 229, 255, 0.3);
      border-radius: 999px;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .coming-soon .cs-ico {
      width: 64px; height: 64px;
      stroke: var(--cyan);
      stroke-width: 1.4;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.35));
      margin-bottom: 18px;
    }
    .coming-soon .cs-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.8rem;
      color: var(--text);
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }
    .coming-soon .cs-sub {
      font-size: 0.82rem;
      color: var(--text2);
      max-width: 280px;
      line-height: 1.5;
    }

    /* Compactar nav en pantallas muy pequeñas */
    @media (max-width: 360px) {
      .nav-bottom { height: 60px; gap: 0; }
      .nav-btn { font-size: 0.58rem; }
      .nav-btn .nav-ico { width: 20px; height: 20px; }
    }

    /* ================================================================
       v3.13.0 · LISTAS DE RANKING E HISTORIAL
    ================================================================ */
    .rank-list, .hist-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .rank-row {
      display: grid;
      grid-template-columns: 44px 44px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    }
    .rank-row.is-me {
      background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(0,229,255,0.04));
      border-color: rgba(0,229,255,0.35);
      box-shadow: 0 0 18px rgba(0,229,255,0.10);
    }
    .rank-row .rk-pos {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.2rem;
      letter-spacing: 0.04em;
      color: var(--text2);
      text-align: center;
      line-height: 1;
    }
    .rank-row .rk-pos.top {
      font-size: 1.5rem;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
    }
    .rank-row .rk-av {
      width: 38px; height: 38px;
      border-radius: 50%;
      overflow: hidden;
      border: 1.5px solid rgba(255,255,255,0.15);
      background: rgba(0,0,0,0.25);
    }
    .rank-row .rk-av .qa-avatar-img,
    .rank-row .rk-av img,
    .rank-row .rk-av svg { width: 100%; height: 100%; object-fit: cover; display: block; }
    .rank-row .rk-info { min-width: 0; }
    .rank-row .rk-name {
      font-family: 'Exo 2', sans-serif;
      font-weight: 800;
      font-size: 0.92rem;
      color: var(--text);
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rank-row .rk-mine {
      display: inline-block;
      background: var(--cyan);
      color: #06121b;
      font-size: 0.55rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 1px 6px;
      border-radius: 6px;
      margin-left: 6px;
      vertical-align: middle;
      text-transform: uppercase;
    }
    .rank-row .rk-meta {
      font-size: 0.68rem;
      color: var(--text2);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .rank-row .rk-pts {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.35rem;
      color: var(--cyan);
      letter-spacing: 0.04em;
      line-height: 1;
      text-align: right;
    }
    .rank-row .rk-pts span {
      display: block;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.55rem;
      font-weight: 700;
      color: var(--text3);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* Historial */
    .hist-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-left: 3px solid var(--text3);
      border-radius: 12px;
    }
    .hist-row.tone-win {
      border-left-color: #ffd84d;
      background: linear-gradient(135deg, rgba(255,216,77,0.06), rgba(255,255,255,0.02));
    }
    .hist-row.tone-mid { border-left-color: var(--cyan); }
    .hist-row.tone-out { border-left-color: var(--red); }

    .hist-row .hi-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .hist-row .hi-pos {
      font-family: 'Bebas Neue', cursive;
      font-size: 1rem;
      color: var(--text);
      letter-spacing: 0.04em;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,255,255,0.10);
      padding: 4px 8px;
      border-radius: 8px;
      min-width: 46px;
      text-align: center;
      flex-shrink: 0;
    }
    .hist-row .hi-meta { min-width: 0; }
    .hist-row .hi-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.1;
    }
    .hist-row .hi-sub {
      font-size: 0.68rem;
      color: var(--text2);
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hist-row .hi-code {
      display: inline-block;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      padding: 0 5px;
      border-radius: 5px;
      font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
      font-size: 0.62rem;
      color: var(--text2);
      letter-spacing: 0.06em;
      margin-left: 4px;
    }
    .hist-row .hi-pts {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.25rem;
      color: var(--cyan);
      letter-spacing: 0.04em;
      line-height: 1;
      text-align: right;
      flex-shrink: 0;
    }
    .hist-row .hi-pts span {
      display: block;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.55rem;
      font-weight: 700;
      color: var(--text3);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-top: 2px;
    }
    .hist-row.tone-win .hi-pts { color: #ffd84d; }

    /* ================================================================
       v3.14.0 · AMIGOS · botón añadir, secciones, request rows, overlay
    ================================================================ */

    /* Botón "Añadir amigo" arriba de la pestaña */
    .btn-add-friend {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 14px 16px;
      background: linear-gradient(135deg, var(--cyan), #0099ff);
      color: #06121b;
      border: none;
      border-radius: 14px;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.15rem;
      letter-spacing: 0.05em;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 229, 255, 0.25);
      transition: transform 0.15s ease, box-shadow 0.2s ease;
    }
    .btn-add-friend:hover { box-shadow: 0 6px 22px rgba(0, 229, 255, 0.35); }
    .btn-add-friend:active { transform: scale(0.98); }
    .btn-add-friend svg {
      width: 22px; height: 22px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Secciones (Recibidas / Enviadas / Mis amigos) */
    .friends-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .friends-section .fs-hd {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Bebas Neue', cursive;
      font-size: 1.1rem;
      letter-spacing: 0.06em;
      color: var(--text2);
      padding: 4px 4px 2px;
    }
    .friends-section .fs-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      background: rgba(255,255,255,0.08);
      color: var(--text);
      border-radius: 999px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0;
    }

    /* Request rows (recibidas / enviadas) */
    .req-row {
      display: grid;
      grid-template-columns: 44px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
    }
    .req-row .rk-av {
      width: 38px; height: 38px;
      border-radius: 50%;
      overflow: hidden;
      border: 1.5px solid rgba(255,255,255,0.15);
      background: rgba(0,0,0,0.25);
    }
    .req-row .rk-av .qa-avatar-img,
    .req-row .rk-av img,
    .req-row .rk-av svg { width: 100%; height: 100%; object-fit: cover; display: block; }
    .req-row .req-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .ff-cta {
      padding: 8px 12px;
      border: none;
      border-radius: 10px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: filter 0.15s ease, transform 0.15s ease, background 0.2s ease;
    }
    .ff-cta:active { transform: scale(0.96); }
    .ff-cta:disabled { opacity: 0.5; cursor: default; }
    .ff-cta.add,
    .ff-cta.accept {
      background: var(--cyan);
      color: #06121b;
    }
    .ff-cta.add:hover,
    .ff-cta.accept:hover { filter: brightness(1.1); }
    .ff-cta.reject,
    .ff-cta.cancel {
      background: rgba(255,255,255,0.08);
      color: var(--text);
      border: 1px solid rgba(255,255,255,0.15);
    }
    .ff-cta.reject:hover,
    .ff-cta.cancel:hover { background: rgba(255,255,255,0.14); }

    /* Fila de amigo en mini-ranking entre amigos */
    .friend-row {
      grid-template-columns: 44px 44px 1fr auto auto;
      gap: 10px;
    }
    .friend-row .friend-remove {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text3);
      cursor: pointer;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      flex-shrink: 0;
    }
    .friend-row .friend-remove:hover {
      color: var(--red);
      border-color: rgba(255,59,48,0.35);
      background: rgba(255,59,48,0.08);
    }

    /* Badge en la nav inferior (icono Ranking) */
    .nav-ico-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .nav-badge {
      position: absolute;
      top: -6px;
      right: -8px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      background: var(--mag);
      color: #fff;
      border-radius: 999px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.6rem;
      font-weight: 800;
      line-height: 16px;
      text-align: center;
      letter-spacing: 0;
      box-shadow: 0 0 8px rgba(255, 0, 110, 0.45), 0 0 0 2px rgba(14, 8, 36, 1);
      pointer-events: none;
      animation: badgePop 0.3s ease;
    }
    @keyframes badgePop {
      from { transform: scale(0); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }

    /* ================================================================
       OVERLAY · Buscar amigo
    ================================================================ */
    .ff-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 4, 20, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 1000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 18vh 16px 24px;
      animation: ffOverlayIn 0.18s ease;
    }
    @keyframes ffOverlayIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .ff-box {
      width: 100%;
      max-width: 380px;
      background: linear-gradient(160deg, rgba(40, 22, 80, 0.95), rgba(14, 8, 36, 0.98));
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 22px;
      padding: 20px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
      animation: ffBoxIn 0.22s ease;
    }
    @keyframes ffBoxIn {
      from { opacity: 0; transform: translateY(-12px) scale(0.98); }
      to   { opacity: 1; transform: none; }
    }
    .ff-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .ff-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      letter-spacing: 0.05em;
      color: var(--text);
    }
    .ff-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text2);
      font-size: 0.9rem;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .ff-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    .ff-sub {
      font-size: 0.78rem;
      color: var(--text2);
      margin-bottom: 14px;
    }
    .ff-input-row {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
    }
    .ff-input-row input {
      flex: 1;
      padding: 12px 14px;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 10px;
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .ff-input-row input:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
    }
    .ff-search {
      padding: 0 18px;
      background: var(--cyan);
      color: #06121b;
      border: none;
      border-radius: 10px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: filter 0.15s ease, transform 0.15s ease;
    }
    .ff-search:hover { filter: brightness(1.1); }
    .ff-search:active { transform: scale(0.97); }

    .ff-result { display: flex; flex-direction: column; gap: 8px; }
    .ff-loading,
    .ff-empty {
      padding: 18px 14px;
      text-align: center;
      font-size: 0.82rem;
      color: var(--text2);
      background: rgba(255,255,255,0.03);
      border: 1px dashed rgba(255,255,255,0.10);
      border-radius: 12px;
    }

    .ff-card {
      display: grid;
      grid-template-columns: 44px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
    }
    .ff-card .ff-av {
      width: 44px; height: 44px;
      border-radius: 50%;
      overflow: hidden;
      border: 1.5px solid rgba(0,229,255,0.4);
      background: rgba(0,0,0,0.25);
    }
    .ff-card .ff-av img,
    .ff-card .ff-av svg,
    .ff-card .ff-av .qa-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ff-card .ff-meta { min-width: 0; }
    .ff-card .ff-name {
      font-family: 'Exo 2', sans-serif;
      font-weight: 800;
      font-size: 0.95rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ff-card .ff-stats {
      font-size: 0.7rem;
      color: var(--text2);
      margin-top: 2px;
    }
    .ff-tag {
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .ff-tag.self    { background: rgba(255,255,255,0.05); color: var(--text2); border: 1px solid rgba(255,255,255,0.10); }
    .ff-tag.ok      { background: rgba(184,255,0,0.10); color: var(--lime); border: 1px solid rgba(184,255,0,0.25); }
    .ff-tag.pending { background: rgba(255,196,0,0.10); color: #ffc400; border: 1px solid rgba(255,196,0,0.25); }
    .ff-tag.blocked { background: rgba(255,59,48,0.10); color: var(--red); border: 1px solid rgba(255,59,48,0.25); }

    /* ================================================================
       v3.15.0 · CARDS CLICKABLES (search / ranking / friends rows)
    ================================================================ */
    .ff-card-btn,
    .rank-row-btn {
      width: 100%;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      color: inherit;
      transition: background 0.15s ease, transform 0.1s ease, border-color 0.2s ease;
    }
    .ff-card-btn:hover,
    .rank-row-btn:hover { background: rgba(255,255,255,0.07); }
    .ff-card-btn:active,
    .rank-row-btn:active { transform: scale(0.99); }
    .ff-card-btn .ff-arrow {
      color: var(--text3);
      font-size: 1.05rem;
    }

    /* ================================================================
       v3.15.0 · BOTTOM SHEET contextual de jugador
    ================================================================ */
    .ush-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 4, 20, 0.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 1100;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: ushOverlayIn 0.18s ease;
    }
    @keyframes ushOverlayIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .ush-box {
      width: 100%;
      max-width: 460px;
      background: linear-gradient(180deg, rgba(40, 22, 80, 0.97), rgba(14, 8, 36, 0.99));
      border-top: 1px solid rgba(255,255,255,0.12);
      border-radius: 22px 22px 0 0;
      padding: 12px 18px max(20px, env(safe-area-inset-bottom, 16px));
      box-shadow: 0 -16px 60px rgba(0,0,0,0.55);
      animation: ushBoxIn 0.22s ease;
    }
    @keyframes ushBoxIn {
      from { transform: translateY(40px); opacity: 0; }
      to   { transform: none; opacity: 1; }
    }
    .ush-handle {
      width: 44px;
      height: 4px;
      border-radius: 4px;
      background: rgba(255,255,255,0.18);
      margin: 4px auto 14px;
    }
    .ush-head {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 4px 4px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      margin-bottom: 8px;
    }
    .ush-av {
      width: 64px; height: 64px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--cyan);
      background: rgba(0,0,0,0.25);
      box-shadow: 0 0 18px rgba(0, 229, 255, 0.20);
      flex-shrink: 0;
    }
    .ush-av img,
    .ush-av svg,
    .ush-av .qa-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ush-info { min-width: 0; }
    .ush-name {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.5rem;
      letter-spacing: 0.05em;
      color: var(--text);
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ush-stats {
      font-size: 0.78rem;
      color: var(--text2);
      margin-top: 4px;
    }
    .ush-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 4px;
    }
    .ush-btn {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      font-weight: 700;
      font-size: 0.92rem;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
      width: 100%;
      text-align: left;
    }
    .ush-btn:hover { background: rgba(255,255,255,0.09); }
    .ush-btn:active { transform: scale(0.98); }
    .ush-btn.primary {
      background: linear-gradient(135deg, var(--cyan), #0099ff);
      border-color: rgba(255,255,255,0.18);
      color: #06121b;
      box-shadow: 0 4px 16px rgba(0, 229, 255, 0.20);
    }
    .ush-btn.primary:hover { filter: brightness(1.05); }
    .ush-btn.danger {
      color: var(--red);
      border-color: rgba(255,59,48,0.2);
    }
    .ush-btn.danger:hover {
      background: rgba(255,59,48,0.08);
      border-color: rgba(255,59,48,0.35);
    }

    /* ================================================================
       v3.15.0 · MODAL DUELO ENTRANTE
    ================================================================ */
    .duel-incoming-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 4, 20, 0.86);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 1200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: ushOverlayIn 0.2s ease;
    }
    .duel-incoming-box {
      width: 100%;
      max-width: 360px;
      background: linear-gradient(160deg, rgba(255, 0, 110, 0.18), rgba(40, 22, 80, 0.95) 60%);
      border: 1px solid rgba(255, 0, 110, 0.35);
      border-radius: 22px;
      padding: 28px 24px;
      text-align: center;
      box-shadow: 0 0 60px rgba(255, 0, 110, 0.35), 0 24px 60px rgba(0,0,0,0.55);
      animation: duelPulse 1.4s ease-in-out infinite;
    }
    @keyframes duelPulse {
      0%, 100% { box-shadow: 0 0 40px rgba(255, 0, 110, 0.30), 0 24px 60px rgba(0,0,0,0.55); }
      50%      { box-shadow: 0 0 80px rgba(255, 0, 110, 0.55), 0 24px 60px rgba(0,0,0,0.55); }
    }
    .di-icon {
      font-size: 3.2rem;
      filter: drop-shadow(0 0 14px rgba(255, 0, 110, 0.6));
      margin-bottom: 6px;
    }
    .di-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.6rem;
      letter-spacing: 0.05em;
      color: var(--text);
      margin-bottom: 6px;
    }
    .di-from {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 14px;
    }
    .di-timer {
      display: inline-block;
      padding: 5px 14px;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.92rem;
      color: var(--text2);
      letter-spacing: 0.05em;
      margin-bottom: 18px;
    }
    .di-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 6px;
    }
    .di-actions .btn { height: 48px; }

    /* ================================================================
       v3.15.0 · BANNER "ESPERANDO DUELO" en screen-create-room
    ================================================================ */
    .duel-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 340px;
      margin: 12px auto 0;
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(255, 0, 110, 0.10), rgba(255, 0, 110, 0.02));
      border: 1px solid rgba(255, 0, 110, 0.30);
      border-radius: 14px;
      animation: bannerIn 0.25s ease;
    }
    @keyframes bannerIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: none; }
    }
    .duel-banner .db-spinner {
      width: 22px; height: 22px;
      border: 2.5px solid rgba(255, 0, 110, 0.25);
      border-top-color: var(--mag);
      border-radius: 50%;
      animation: dbSpin 0.9s linear infinite;
      flex-shrink: 0;
    }
    @keyframes dbSpin { to { transform: rotate(360deg); } }
    .duel-banner .db-text {
      flex: 1;
      min-width: 0;
      text-align: left;
    }
    .duel-banner .db-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.1rem;
      color: var(--text);
      letter-spacing: 0.04em;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .duel-banner .db-title span { color: var(--mag); }
    .duel-banner .db-sub {
      font-size: 0.7rem;
      color: var(--text2);
      margin-top: 2px;
    }
    .duel-banner .db-cancel {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.14);
      color: var(--text3);
      cursor: pointer;
      flex-shrink: 0;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .duel-banner .db-cancel:hover {
      color: var(--red);
      border-color: rgba(255,59,48,0.35);
    }

    /* ================================================================
       v3.15.0 · TOGGLE de "Usuarios bloqueados"
    ================================================================ */
    .friends-blocked-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 14px;
      background: transparent;
      border: 1px dashed rgba(255,255,255,0.12);
      border-radius: 12px;
      color: var(--text3);
      font-family: 'Exo 2', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      margin-top: 4px;
    }
    .friends-blocked-toggle:hover {
      color: var(--text2);
      border-color: rgba(255,255,255,0.20);
      background: rgba(255,255,255,0.02);
    }
    .friends-blocked-toggle svg {
      width: 16px; height: 16px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
    }

    /* ================================================================
       v3.15.1 · BOTONES DE ACCIÓN EN LA SALA (Copiar / Compartir / Invitar)
       Estética: glass minimalista, icono SVG outline, acento cyan en el
       primario (Invitar amigos). Lift sutil al hover, shrink al active.
    ================================================================ */
    .room-actions-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 340px;
      margin: 4px auto 0;
    }

    .room-action-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 14px 8px 12px;
      background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 14px;
      color: var(--text);
      font-family: 'Exo 2', sans-serif;
      cursor: pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
      isolation: isolate;
    }
    .room-action-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.08), transparent 70%);
      pointer-events: none;
      z-index: -1;
      opacity: 0.7;
    }
    .room-action-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.20);
      background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
      box-shadow: 0 6px 18px rgba(0,0,0,0.30);
    }
    .room-action-btn:active { transform: scale(0.97); }

    .room-action-btn .rab-ico {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--text);
      transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
      margin-bottom: 2px;
    }
    .room-action-btn:hover .rab-ico { color: var(--cyan); }

    .room-action-btn .rab-lbl {
      font-family: 'Bebas Neue', cursive;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      line-height: 1;
      color: var(--text);
    }
    .room-action-btn .rab-sub {
      font-family: 'Exo 2', sans-serif;
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text3);
    }

    /* Botón primario (Invitar amigos) — destacado con cyan suave */
    .room-action-btn.primary {
      border-color: rgba(0, 229, 255, 0.30);
      background: linear-gradient(160deg, rgba(0, 229, 255, 0.14), rgba(0, 229, 255, 0.03));
      box-shadow: 0 0 0 1px rgba(0,229,255,0.10), 0 6px 18px rgba(0,229,255,0.10);
    }
    .room-action-btn.primary .rab-ico,
    .room-action-btn.primary .rab-lbl { color: var(--cyan); }
    .room-action-btn.primary .rab-ico { filter: drop-shadow(0 0 6px rgba(0,229,255,0.45)); }
    .room-action-btn.primary .rab-sub { color: rgba(0, 229, 255, 0.65); }
    .room-action-btn.primary:hover {
      border-color: rgba(0, 229, 255, 0.55);
      background: linear-gradient(160deg, rgba(0, 229, 255, 0.20), rgba(0, 229, 255, 0.05));
      box-shadow: 0 0 0 1px rgba(0,229,255,0.20), 0 8px 22px rgba(0,229,255,0.18);
    }

    /* Feedback al copiar/compartir con éxito */
    .room-action-btn.is-success {
      border-color: rgba(184,255,0,0.40) !important;
      background: linear-gradient(160deg, rgba(184,255,0,0.12), rgba(184,255,0,0.02)) !important;
    }
    .room-action-btn.is-success .rab-ico,
    .room-action-btn.is-success .rab-lbl { color: var(--lime) !important; }

    @media (max-width: 360px) {
      .room-action-btn { padding: 12px 4px 10px; }
      .room-action-btn .rab-lbl { font-size: 0.85rem; }
      .room-action-btn .rab-ico { width: 20px; height: 20px; }
    }

    /* ================================================================
       v3.16.2 · BANNER de actualización disponible (flotante superior)
    ================================================================ */
    .update-banner {
      position: fixed;
      top: max(14px, env(safe-area-inset-top, 14px));
      left: 50%;
      transform: translate(-50%, -120%);
      width: min(440px, calc(100vw - 24px));
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 12px 12px 16px;
      background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(40, 22, 80, 0.95) 70%);
      border: 1px solid rgba(0, 229, 255, 0.35);
      border-radius: 16px;
      box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 28px rgba(0, 229, 255, 0.20);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      z-index: 1500;
      opacity: 0;
      transition: transform 0.32s cubic-bezier(.2,.9,.3,1.1), opacity 0.25s ease;
    }
    .update-banner.show {
      transform: translate(-50%, 0);
      opacity: 1;
    }

    .update-banner .ub-icon {
      width: 36px; height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 229, 255, 0.18);
      border: 1px solid rgba(0, 229, 255, 0.35);
      color: var(--cyan);
      flex-shrink: 0;
      animation: ubSpin 4s linear infinite;
    }
    .update-banner .ub-icon svg {
      width: 18px; height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    @keyframes ubSpin { to { transform: rotate(360deg); } }

    .update-banner .ub-text {
      flex: 1;
      min-width: 0;
    }
    .update-banner .ub-title {
      font-family: 'Bebas Neue', cursive;
      font-size: 1.1rem;
      letter-spacing: 0.05em;
      color: var(--text);
      line-height: 1;
    }
    .update-banner .ub-sub {
      font-size: 0.72rem;
      color: var(--text2);
      margin-top: 3px;
      line-height: 1.25;
    }

    .update-banner .ub-btn {
      padding: 9px 14px;
      background: var(--cyan);
      color: #06121b;
      border: none;
      border-radius: 10px;
      font-family: 'Exo 2', sans-serif;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      flex-shrink: 0;
      transition: filter 0.15s ease, transform 0.15s ease;
      box-shadow: 0 4px 14px rgba(0, 229, 255, 0.30);
    }
    .update-banner .ub-btn:hover  { filter: brightness(1.1); }
    .update-banner .ub-btn:active { transform: scale(0.96); }
    .update-banner .ub-btn:disabled { opacity: 0.6; cursor: default; }

    .update-banner .ub-close {
      width: 26px; height: 26px;
      flex-shrink: 0;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.10);
      color: var(--text3);
      border-radius: 50%;
      font-size: 0.7rem;
      cursor: pointer;
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .update-banner .ub-close:hover {
      color: var(--text);
      border-color: rgba(255,255,255,0.20);
      background: rgba(255,255,255,0.05);
    }

    @media (max-width: 480px) {
      .update-banner { padding: 10px 10px 10px 12px; gap: 8px; }
      .update-banner .ub-title { font-size: 0.95rem; }
      .update-banner .ub-sub { font-size: 0.66rem; }
      .update-banner .ub-btn { padding: 8px 10px; font-size: 0.7rem; }
    }