/* ============================================================
   BRK JUEGOS — BASE COMPARTIDA
   Variables de color, tipografía, pantallas home/lobby/equipos/
   opciones/apuestas, barras de carrera, overlay y toast.
   Común a Sudoku, Memoria y Sopa de Letras — lo específico de
   cada juego (tablero, media queries de layout) vive en el
   <style> inline de su index.html, después de este archivo.
   ============================================================ */

  :root {
    --noche: #050d18;
    --noche-2: #0b1728;
    --tinta: #081426;
    --crema: #f7f8fb;
    --coral: #ff5264;
    --naranja: #ff8a38;
    --menta: #22e3ae;
    --oro: #ffc23d;
    --cyan: #28d8ff;
    --violeta: #b159ff;
    --gris: #99a8bd;
    --texto: var(--crema);      /* texto principal: cambia con el tema */
    --ink-strong: #050d18;      /* tinta fija para texto sobre botones de color, no cambia con el tema */
    --ink-strong-rgb: 5,13,24;  /* mismo tono, para poder bajarle la opacidad en texto secundario sobre botones de color */
    --borde-rgb: 247,248,251;   /* RGB (sin alfa) usado en los bordes translúcidos */

    /* Tablero: sí cambia con el tema (oscuro por defecto) */
    --papel: #0b1728;
    --crema-2: #12213a;         /* casilla relacionada */
    --papel-samenum: #1a2d4d;   /* mismo número */
    --papel-selected: #24406e;  /* casilla seleccionada */
    --papel-linea: rgba(255,255,255,0.14);
    --papel-caja: #f7f8fb;      /* líneas gruesas de las cajas 3x3 */
    --papel-tinta: #f7f8fb;     /* color de los números */
    --papel-nota: #8fa3c4;      /* color de las notas a lápiz */
  }

  [data-theme="light"] { --panel-top: #ffffff;
    --noche: #f4f6fb;
    --noche-2: #ffffff;
    --gris: #5b6478;
    --texto: #0b1120;
    --borde-rgb: 11,17,32;

    --papel: #eef2f8;
    --crema-2: #e2ecf7;
    --papel-samenum: #d7e6f6;
    --papel-selected: #c7def4;
    --papel-linea: #cfd9e6;
    --papel-caja: #0b1120;
    --papel-tinta: #0b1120;
    --papel-nota: #6b7690;
  }
  [data-theme="light"] body { background-image: none; }
  /* Antes en modo día el fondo de .overlay se aclaraba a 50% de opacidad
     — se veía bien de fondo, pero el texto claro fijo (ver .overlay h2/p
     más abajo) quedaba sin contraste encima de ese gris medio, sobre todo
     con blur y la página clara transparentándose (el aviso de "Te invitan
     a apostar" reportado). Se deja igual de oscuro que en modo noche —
     un scrim de modal no necesita adaptarse al tema de la página. */

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

  html, body {
    /* Evita que un arrastre cerca del borde izq/der de la pantalla (ej.
       marcando una palabra pegada al borde en Sopa) dispare el gesto nativo
       de "volver atrás" del navegador y saque de la partida sin querer. */
    overscroll-behavior-x: none;
  }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--noche);
    background-image: radial-gradient(circle at 50% -8%, rgba(33,79,139,.25), transparent 30rem), linear-gradient(180deg, var(--noche) 0%, var(--tinta) 100%);
    color: var(--texto);
    min-height: 100vh;
    min-height: 100dvh;
    /* Que se sienta app, no página: nada de seleccionar texto ni el menú
       de copiar/definir al mantener presionado. Los campos de texto (nombre,
       respuestas) se re-habilitan abajo. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  input, textarea, [contenteditable="true"], [contenteditable=""] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
  [data-theme="light"] body { background-image: radial-gradient(circle at 50% -8%, rgba(40,216,255,.10), transparent 30rem); }

  .screen { display: none; min-height: 100vh; min-height: 100dvh; padding: 24px 16px 40px; }
  .screen.active { display: flex; flex-direction: column; align-items: center; }

  h1.logo {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.05;
    text-align: center;
    letter-spacing: -0.02em;
  }
  h1.logo .battle { color: var(--coral); display: block; }
  .brk {
    font-family: 'Unbounded', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--gris);
    text-transform: uppercase;
    margin-top: 10px;
    text-align: center;
  }

  /* ---------- HOME ---------- */
  #screen-home { justify-content: center; gap: 8px; }
  .card {
    position: relative;
    background: var(--noche-2);
    border: 1px solid rgba(var(--borde-rgb),0.08);
    border-radius: 20px;
    padding: 24px 20px;
    width: 100%;
    max-width: 400px;
    margin-top: 28px;
  }
  /* Mejores tiempos: ícono redondo a la altura de la foto de perfil, sin
     texto ni fondo — no debe competir visualmente con solo/multijugador. */
  .card-corner-link {
    position: absolute; top: 20px; right: 20px;
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    font-size: 20px; line-height: 1;
  }
  .card-corner-link:active { opacity: .6; }

  /* Texto descriptivo del juego: contenido real para SEO/AdSense, debajo
     de la tarjeta de juego, sin competir visualmente con los botones. */
  .game-info {
    max-width: 400px;
    margin: 18px auto 0;
    padding: 16px 24px 0;
    border-top: 1px solid rgba(var(--borde-rgb),0.08);
    color: var(--gris);
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
  }
  .game-info strong { color: var(--texto); font-weight: 600; }

  /* Sección "Cómo jugar": contenido real y sustancial (no solo una línea),
     pensado para las políticas de contenido de AdSense. Va justo debajo
     de .game-info. Es un <details> nativo: cerrado por defecto (no estorba
     visualmente) pero el texto sigue en el HTML, así que cuenta igual como
     contenido de la página para un crawler. */
  .how-to-play { max-width: 400px; margin: 14px auto 0; padding: 0 24px; text-align: left; }
  .how-to-play summary {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--gris); text-align: center; cursor: pointer; padding: 4px 0; list-style: none;
  }
  .how-to-play summary::-webkit-details-marker { display: none; }
  .how-to-play summary::after { content: ' ▾'; }
  .how-to-play[open] summary::after { content: ' ▴'; }
  .how-to-play ul { margin: 8px 0 0; padding-left: 18px; color: var(--gris); font-size: 12.5px; line-height: 1.5; }
  .how-to-play li { margin: 4px 0; }

  /* Dos contenedores separados: "Jugar solo" vs "Multijugador" (crear +
     unirse). Fondo propio (más oscuro que la tarjeta) para que de verdad se
     lean como dos cajas distintas y no una sola lista continua. */
  .mode-group {
    background: var(--noche);
    border: 1px solid rgba(var(--borde-rgb),0.12);
    border-radius: 16px;
    padding: 16px 14px;
    margin-top: 22px;
  }
  .mode-group-title {
    font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
    margin-bottom: 12px;
  }
  .mode-group-sub { font-size: 12.5px; color: var(--gris); margin: -8px 0 12px; line-height: 1.4; }
  .mode-group .stack { margin-top: 0; }
  label { font-size: 13px; font-weight: 600; color: var(--gris); display: block; margin-bottom: 6px; }
  input[type="text"] {
    width: 100%;
    background: var(--noche);
    border: 1.5px solid rgba(var(--borde-rgb),0.15);
    border-radius: 12px;
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    padding: 13px 14px;
    outline: none;
  }
  input[type="text"]:focus { border-color: var(--coral); }
  input.code-input {
    text-transform: uppercase;
    letter-spacing: 0.4em;
    text-align: center;
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
  }
  /* Todos los botones comparten la MISMA pastilla de neón que el selector de
     dificultad: pastilla translúcida, borde luminoso, etiqueta en Unbounded
     con glow. Solo cambia el tono (--pill-c) según la acción, y ese tono es
     el mismo en los 8 juegos → los menús se ven iguales entre sí. */
  .btn {
    display: block;
    width: 100%;
    border-radius: 14px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 15px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
    --pill-c: #7f8ea5;
    border: 1.5px solid color-mix(in srgb, var(--pill-c) 55%, transparent);
    background: color-mix(in srgb, var(--pill-c) 12%, transparent);
    color: color-mix(in srgb, var(--pill-c) 34%, var(--crema));
    box-shadow:
      0 0 16px color-mix(in srgb, var(--pill-c) 20%, transparent),
      0 0 0 1px color-mix(in srgb, var(--pill-c) 12%, transparent) inset;
    text-shadow: 0 0 12px color-mix(in srgb, var(--pill-c) 40%, transparent);
  }
  .btn:active {
    transform: scale(0.98);
    box-shadow:
      0 0 26px color-mix(in srgb, var(--pill-c) 48%, transparent),
      0 0 0 1px var(--pill-c) inset;
  }
  /* Convención de color por acción, igual en todos los juegos (no a
     criterio de cada pantalla): Crear partida = oro, Unirme/Empezar
     partida = menta, Volver/Salir = coral. Mantenerla consistente evita
     que cada juego reinvente su propio significado de color. */
  .btn-coral { --pill-c: var(--coral); background: color-mix(in srgb, var(--coral) 17%, transparent); }
  .btn-menta { --pill-c: var(--menta); }
  .btn-oro   { --pill-c: var(--oro); }
  .btn-cyan  { --pill-c: var(--cyan); }
  .btn-ghost { --pill-c: #7f8ea5; }
  [data-theme="light"] .btn {
    background: color-mix(in srgb, var(--pill-c) 12%, #ffffff);
    color: color-mix(in srgb, var(--pill-c) 60%, #0b1120);
    text-shadow: none;
  }
  .btn:disabled { opacity: 0.4; cursor: default; }
  .stack { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
  .divider { text-align: center; color: var(--gris); font-size: 12px; font-weight: 600; margin: 6px 0; letter-spacing: .1em; }

  /* ---------- INICIO SIMPLIFICADO ----------
     Antes #screen-home tenía dos cajas (.mode-group solo / multi) con
     botón + hint + campo de código + botón. Ahora: saludo grande + dos
     botones. "Multijugador" abre #screen-multi (crear / unirse). */
  .home-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
  .home-action { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 15px; }
  .home-action .ha-sub {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11.5px;
    letter-spacing: 0; text-transform: none; text-shadow: none; opacity: .82;
  }
  #screen-home .home-greeting { align-items: center; gap: 13px; margin-bottom: 22px; }
  #screen-home .home-greeting .chip { width: 44px; height: 44px; font-size: 17px; }
  #screen-home .home-greeting-name { font-weight: 800; font-size: 18px; line-height: 1.15; }
  #screen-home .home-greeting-coins { color: var(--oro); font-size: 13px; font-weight: 800; margin-top: 3px; }
  /* En inicio el saludo grande ya trae avatar + monedas: el badge fijo de
     la esquina sobra (y tapaba el 🏆). Sigue visible en lobby y partida. */
  body:has(#screen-home.active) #coins-fixed-badge { display: none !important; }
  /* Multijugador (nivel 2) */
  /* calc() en vez de un número fijo: en celulares con isla/barra de
     gestión (safe-area-inset-bottom > 0) la pastilla fija de "Salir" baja
     esa misma distancia (ver #btn-back-bottom en cada juego), así que si
     este hueco no crece igual, el último botón terminaba tapado/cruzado
     con la pastilla en esos teléfonos. */
  #screen-multi { justify-content: center; gap: 8px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  #screen-multi .multi-actions { display: flex; flex-direction: column; gap: 12px; }
  #screen-multi .multi-sep { text-align: center; color: var(--gris); font-size: 11px; font-weight: 700; letter-spacing: .12em; margin: 8px 0 2px; }

  /* ---------- LOBBY ---------- */
  /* Antes la sala arrancaba pegada a la barra fija de arriba (padding-top:60
     era el mínimo para no solaparse con el badge de monedas ~54-57px) y con
     todo el aire abajo — "muy arriba" al venir de #screen-multi centrado.
     Ahora: padding-top 88 (piso: el bloque nunca sube más que eso, no choca
     con la barra fija) + justify-content:center (cuando la sala es corta se
     centra en vertical; cuando crece con jugadores/opciones el .screen se
     estira —min-height, no alto fijo— y el center deja de aplicar, el
     contenido arranca en 88 y hace scroll normal, sin recortarse arriba). */
  #screen-lobby { padding-top: 88px; justify-content: center; }
  .room-code-box { text-align: center; margin: 24px 0 6px; }
  .room-code-label { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--gris); text-transform: uppercase; }
  .room-code {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: clamp(44px, 14vw, 68px);
    letter-spacing: 0.18em;
    color: var(--oro);
    margin-top: 4px;
  }
  .share-row { display: flex; gap: 10px; width: 100%; max-width: 400px; margin-top: 14px; }
  .lobby-players { width: 100%; max-width: 400px; margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
  .lobby-player {
    display: flex; align-items: center; gap: 12px;
    background: var(--noche-2);
    border: 1px solid rgba(var(--borde-rgb),0.08);
    border-radius: 14px;
    padding: 12px 14px;
    animation: pop-in .25s ease;
  }
  @keyframes pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .chip {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--ink-strong); flex-shrink: 0; overflow: hidden;
  }
  .chip img { width: 100%; height: 100%; object-fit: cover; }
  .lobby-player .pname { font-weight: 800; font-size: 15px; flex: 1; }
  .host-tag { font-size: 11px; font-weight: 700; color: var(--oro); letter-spacing: .08em; }
  /* Estado de apuesta por jugador (reemplaza el "★ ANFITRIÓN" mientras hay
     una apuesta activa, para que se vea quién ya aceptó/rechazó/no ha
     respondido, no solo quién es el anfitrión). */
  .bet-status { font-size: 11px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
  .bet-status.in { color: var(--menta); }
  .bet-status.out { color: var(--coral); }
  .bet-status.pending { color: var(--oro); }
  .game-footer-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; padding-bottom: 4px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .link-danger {
    width: 100%;
    background: rgba(255,82,100,0.08);
    border: 1.5px solid rgba(255,82,100,0.35);
    border-radius: 12px;
    color: var(--coral);
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 11px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease;
  }
  .link-danger:active { background: rgba(255,82,100,0.18); transform: scale(0.97); }
  .btn-kick {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    border: 1px solid rgba(255,82,100,0.35); background: rgba(255,82,100,0.12);
    color: var(--coral); font-size: 14px; font-weight: 800; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .btn-kick:active { transform: scale(0.92); }
  .miembro-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .miembro-row .btn-kick { width: 20px; height: 20px; font-size: 11px; }
  .diff-row { display: flex; gap: 8px; width: 100%; max-width: 400px; margin-top: 22px; }
  /* Fila compacta de dificultad / modo (multijugador): mismo semáforo de neón
     que el selector de "Jugar solo". El color lo fija --neon según data-diff /
     data-mode (ver "SISTEMA NEÓN" abajo); al seleccionar se enciende el halo. */
  .diff-btn, .mode-btn {
    flex: 1; padding: 11px 4px; border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--neon, #64748b) 42%, transparent);
    background: color-mix(in srgb, var(--neon, #64748b) 7%, transparent);
    color: color-mix(in srgb, var(--neon, var(--gris)) 55%, var(--texto));
    font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12.5px;
    letter-spacing: .02em; cursor: pointer;
    transition: box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .diff-btn.selected, .mode-btn.selected {
    border-color: var(--neon, var(--crema));
    background: color-mix(in srgb, var(--neon, var(--crema)) 16%, transparent);
    color: #fff;
    box-shadow: 0 0 15px color-mix(in srgb, var(--neon, #fff) 50%, transparent),
                0 0 0 1px var(--neon, var(--crema)) inset;
    text-shadow: 0 0 9px color-mix(in srgb, var(--neon, #fff) 60%, transparent);
  }
  [data-theme="light"] .diff-btn.selected, [data-theme="light"] .mode-btn.selected { color: var(--ink-strong); text-shadow: none; }
  .diff-btn:disabled, .mode-btn:disabled { cursor: default; opacity: .9; }
  .mode-btn[data-mode="individual"] { --neon: var(--cyan); }
  .mode-btn[data-mode="equipos"] { --neon: var(--coral); }

  .teams-area { display: flex; gap: 10px; width: 100%; max-width: 400px; margin-top: 18px; }
  .team-box {
    flex: 1; border-radius: 16px; padding: 14px 12px; cursor: pointer;
    border: 1.5px solid rgba(var(--borde-rgb),0.15); background: var(--noche-2);
    transition: transform .12s ease;
  }
  .team-box:active { transform: scale(0.97); }
  .team-box.team-oro.mine { border-color: var(--oro); background: linear-gradient(135deg, rgba(255,209,102,0.16), var(--noche-2) 60%); }
  .team-box.team-menta.mine { border-color: var(--menta); background: linear-gradient(135deg, rgba(61,220,151,0.16), var(--noche-2) 60%); }
  .team-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px; }
  .team-oro .team-title { color: var(--oro); }
  .team-menta .team-title { color: var(--menta); }
  .team-members { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 44px; }
  .team-members .miembro { font-size: 13px; font-weight: 700; }
  .team-hint { font-size: 11px; color: var(--gris); font-weight: 600; margin-top: 8px; }
  .cell.team { color: var(--cyan); font-weight: 400; }

  .opts-panel {
    width: 100%; max-width: 400px; margin-top: 18px;
    background: var(--noche-2); border: 1px solid rgba(var(--borde-rgb),0.08);
    border-radius: 16px; padding: 14px 16px;
  }
  .opts-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
  .opt-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 13px; font-weight: 600; cursor: pointer;
    border-top: 1px solid rgba(var(--borde-rgb),0.06);
  }
  .opt-row:first-of-type { border-top: none; }
  .opts-panel.guest .opt-row { cursor: default; }
  .opt-switch {
    width: 38px; height: 22px; border-radius: 99px; position: relative; flex-shrink: 0;
    background: rgba(var(--borde-rgb),0.15); transition: background .15s;
  }
  .opt-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--crema); transition: transform .15s;
  }
  .opt-switch.on { background: var(--menta); }
  .opt-switch.on::after { transform: translateX(16px); }

  .bet-panel { width: 100%; max-width: 400px; margin-top: 14px; background: var(--noche-2); border: 1px solid rgba(255,194,61,0.25); border-radius: 16px; padding: 14px 16px; }
  .bet-row { display: flex; gap: 8px; align-items: center; }
  .bet-amount-input {
    flex: 1; background: var(--noche); border: 1.5px solid rgba(var(--borde-rgb),0.2); border-radius: 10px;
    color: var(--texto); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; padding: 10px 12px; outline: none;
  }
  .bet-amount-input:focus { border-color: var(--oro); }
  .btn-bet-toggle { border: none; border-radius: 10px; padding: 11px 16px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12px; cursor: pointer; color: var(--ink-strong); background: var(--oro); white-space: nowrap; }
  .btn-bet-toggle.desactivar { background: transparent; color: var(--gris); border: 1.5px solid rgba(var(--borde-rgb),0.2); }
  /* Por qué "Desactivar" está apagado cuando ya hay otro jugador apostado
     (ver renderBet()): antes solo se explicaba con el atributo title, que
     en celular no se ve nunca (no hay hover) — el botón parecía roto sin
     ninguna pista. */
  .bet-toggle-hint { color: var(--coral); font-size: 11.5px; font-weight: 700; margin-top: 8px; text-align: center; }
  .bet-info-text { font-size: 17px; font-weight: 800; font-family: 'Unbounded', sans-serif; line-height: 1.4; color: var(--oro); text-align: center; padding: 10px 12px; background: rgba(255,194,61,0.12); border: 1px solid rgba(255,194,61,0.3); border-radius: 12px; }
  /* var(--oro) es un dorado claro pensado para fondo oscuro — en modo día,
     con .bet-panel ya casi blanco detrás, el texto quedaba dorado claro
     sobre fondo claro (bajo contraste, no se leía bien cuánto se apostaba).
     Override con un ámbar más oscuro/saturado, más fondo/borde con más
     cuerpo para que la caja se distinga del panel blanco. */
  [data-theme="light"] .bet-info-text { color: #8a5a00; background: rgba(255,194,61,0.22); border-color: rgba(255,194,61,0.55); }

  .marcador {
    width: 100%; max-width: 420px; margin-top: 14px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--oro);
  }
  .best-time { font-size: 11px; font-weight: 700; color: var(--gris); margin-top: 2px; }
  .reward-line { font-size: 11px; font-weight: 800; color: var(--oro); margin-top: 3px; }
  .reward-line.claimed { font-weight: 700; color: var(--gris); }
  .solo-reward-hint {
    font-size: 12px; font-weight: 700; font-family: 'Unbounded', sans-serif; line-height: 1.4;
    color: var(--oro); text-align: center; margin-top: 4px;
  }
  .record-badge { color: var(--menta); font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px; margin-top: 8px; }
  .bet-result-badge { color: var(--oro); font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px; margin-top: 8px; text-align: center; }
  #coin-reward-badge.ya-cobrado { color: var(--gris); }
  .lobby-hint { color: var(--gris); font-size: 13px; margin-top: 16px; text-align: center; }
  #btn-start { max-width: 400px; margin-top: 18px; }

  /* ---------- JUEGO ---------- */
  #screen-game { padding-top: 60px; padding-left: 20px; padding-right: 20px; justify-content: center; gap: 12px; }
  .game-wrap { width: 100%; max-width: 980px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

  /* La pista de carrera */
  .race {
    width: 100%;
    max-width: var(--board-w);
    background: var(--noche-2);
    border: 1px solid rgba(var(--borde-rgb),0.08);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .lane { display: flex; align-items: center; gap: 8px; }
  .lane .chip { width: 26px; height: 26px; font-size: 11px; position: relative; overflow: visible; }
  /* La X de expulsar va como insignia encima del avatar, no como un
     elemento más de la fila — si compite por ancho con .track, la barra
     de quien tiene el botón queda más corta que la de los demás y
     alguien con más porcentaje puede parecer que va perdiendo. */
  .lane .btn-kick.lane-kick {
    position: absolute; top: -6px; right: -8px;
    width: 16px; height: 16px; font-size: 9px; z-index: 2;
  }
  .lane .lane-name { font-size: 12px; font-weight: 700; width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
  .lane .track { flex: 1; height: 12px; background: var(--noche); border-radius: 99px; overflow: hidden; position: relative; }
  .lane .fill { height: 100%; border-radius: 99px; background: var(--menta); width: 0%; transition: width .45s cubic-bezier(.22,1,.36,1); }
  .lane.me .fill { background: var(--oro); }
  .lane .pct { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 800; width: 44px; text-align: right; flex-shrink: 0; }
  .lane.eliminated { opacity: 0.45; }
  .lane.eliminated .fill { background: var(--gris); }
  .lane .crown { font-size: 13px; width: 16px; flex-shrink: 0; text-align: center; }


  .overlay {
    position: fixed; inset: 0;
    background: rgba(15,16,32,0.88);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
    z-index: 50;
    text-align: center;
    padding: 20px;
  }
  .overlay.active { display: flex; }
  .countdown-num {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: 120px;
    color: var(--oro);
    animation: count-pop 1s ease infinite;
  }
  @keyframes count-pop { 0% { transform: scale(0.5); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
  /* Colores fijos (no var(--texto)/var(--gris)): el fondo de .overlay es
     siempre oscuro, en los dos temas — pero esas variables SÍ cambian con
     el tema (pensadas para el fondo de la página, no para este scrim). En
     modo día --texto se vuelve casi negro y quedaba texto oscuro sobre
     fondo oscuro, ilegible (p.ej. el aviso de "Te invitan a apostar"). En
     modo noche --texto ya es claro, por eso ahí se veía bien. */
  .overlay h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 24px; margin-bottom: 10px; color: #f7f8fb; }
  .overlay p { color: #99a8bd; font-size: 15px; max-width: 320px; }

  /* ---------- PODIO ---------- */
  #screen-podium { justify-content: center; }
  .podium-title { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: clamp(26px, 7vw, 38px); text-align: center; }
  .podium-list { width: 100%; max-width: 420px; margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
  .podium-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--noche-2);
    border: 1px solid rgba(var(--borde-rgb),0.08);
    border-radius: 16px;
    padding: 14px 16px;
    animation: pop-in .3s ease both;
  }
  .podium-row.first { border-color: var(--oro); background: linear-gradient(135deg, rgba(255,209,102,0.16), var(--noche-2) 55%); }
  .podium-medal { font-size: 26px; width: 34px; text-align: center; flex-shrink: 0; }
  .podium-rank { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; color: var(--gris); width: 34px; text-align: center; flex-shrink: 0; }
  .podium-info { flex: 1; }
  .podium-name { font-weight: 800; font-size: 16px; }
  .podium-detail { font-size: 12px; color: var(--gris); font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
    background: var(--crema); color: var(--ink-strong);
    font-weight: 700; font-size: 14px;
    padding: 12px 20px; border-radius: 99px;
    transition: transform .3s ease;
    z-index: 99;
    white-space: nowrap;
  }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* ---------- OVERLAY DE CARGA ---------- */
  .brk-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--coral), var(--oro), var(--cyan), var(--violeta), var(--coral));
    animation: brk-spin .85s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  }
  @keyframes brk-spin { to { transform: rotate(360deg); } }
  #overlay-loading p { margin-top: 16px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; color: #f7f8fb; }
  #overlay-loading { z-index: 90; }

  /* ============================================================
     SISTEMA NEÓN — selector de dificultad "Jugar solo"
     Basado en el arte de los juegos (assets/games) y la paleta de
     la marca (assets/icons). Semáforo por nivel:
       Fácil → cian   ·   Medio → oro   ·   Difícil → coral   ·   Experto → violeta
     El color se inyecta en --neon y todo el bloque (borde, halo,
     texto, puntos de nivel) se deriva de ahí.
     ============================================================ */
  .solo-diff[data-diff="facil"]   { --neon: var(--cyan); }
  .solo-diff[data-diff="medio"]   { --neon: var(--oro); }
  .solo-diff[data-diff="dificil"] { --neon: var(--coral); }
  .solo-diff[data-diff="experto"] { --neon: var(--violeta); }
  .diff-btn[data-diff="facil"]    { --neon: var(--cyan); }
  .diff-btn[data-diff="medio"]    { --neon: var(--oro); }
  .diff-btn[data-diff="dificil"]  { --neon: var(--coral); }
  .diff-btn[data-diff="experto"]  { --neon: var(--violeta); }

  /* La pastilla */
  .solo-diff.btn.btn-ghost {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center;
    gap: 7px;
    min-height: 64px;
    text-align: left;
    padding: 16px 116px 16px 18px;   /* hueco a la derecha para la recompensa */
    border-radius: 16px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 700; font-size: 16.5px;
    letter-spacing: .04em; text-transform: uppercase;
    color: color-mix(in srgb, var(--neon, #8aa0bd) 78%, var(--crema));
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--neon, #64748b) 12%, transparent),
        color-mix(in srgb, var(--neon, #64748b) 4%, transparent));
    border: 1.5px solid color-mix(in srgb, var(--neon, #64748b) 55%, transparent);
    box-shadow:
      0 0 14px color-mix(in srgb, var(--neon, #000) 22%, transparent),
      0 0 0 1px color-mix(in srgb, var(--neon, #000) 14%, transparent) inset;
    text-shadow: 0 0 12px color-mix(in srgb, var(--neon, #000) 45%, transparent);
    transition: box-shadow .16s ease, background .16s ease, transform .12s ease;
  }
  .solo-diff.btn.btn-ghost:hover,
  .solo-diff.btn.btn-ghost:focus-visible {
    background: color-mix(in srgb, var(--neon, #64748b) 18%, transparent);
    box-shadow:
      0 0 24px color-mix(in srgb, var(--neon, #000) 48%, transparent),
      0 0 0 1px var(--neon, #64748b) inset;
    outline: none;
  }
  .solo-diff.btn.btn-ghost:active { transform: scale(0.985); }

  /* Puntos de nivel — dibujados con radial-gradient (no glifos ● ○, que
     tienen tamaños distintos). Todas las bolitas miden lo mismo: las
     "prendidas" van a color pleno + glow, las "apagadas" al mismo tono
     pero tenue. Sin tocar el HTML. */
  .solo-diff.btn.btn-ghost { --dot-off: color-mix(in srgb, var(--neon, #64748b) 22%, transparent); }
  .solo-diff[data-diff]::before {
    content: "";
    order: 1;
    display: block;
    height: 7px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--neon, #000) 60%, transparent));
  }
  .solo-diff[data-diff="facil"]::before {
    width: 31px;
    background-image:
      radial-gradient(circle 3.2px at 4px 50%,  var(--neon)    98%, transparent 100%),
      radial-gradient(circle 3.2px at 15.5px 50%, var(--dot-off) 98%, transparent 100%),
      radial-gradient(circle 3.2px at 27px 50%, var(--dot-off) 98%, transparent 100%);
  }
  .solo-diff[data-diff="medio"]::before {
    width: 31px;
    background-image:
      radial-gradient(circle 3.2px at 4px 50%,  var(--neon)    98%, transparent 100%),
      radial-gradient(circle 3.2px at 15.5px 50%, var(--neon)    98%, transparent 100%),
      radial-gradient(circle 3.2px at 27px 50%, var(--dot-off) 98%, transparent 100%);
  }
  .solo-diff[data-diff="dificil"]::before {
    width: 31px;
    background-image:
      radial-gradient(circle 3.2px at 4px 50%,  var(--neon) 98%, transparent 100%),
      radial-gradient(circle 3.2px at 15.5px 50%, var(--neon) 98%, transparent 100%),
      radial-gradient(circle 3.2px at 27px 50%, var(--neon) 98%, transparent 100%);
  }
  .solo-diff[data-diff="experto"]::before {
    width: 42.5px;
    background-image:
      radial-gradient(circle 3.2px at 4px 50%,  var(--neon) 98%, transparent 100%),
      radial-gradient(circle 3.2px at 15.5px 50%, var(--neon) 98%, transparent 100%),
      radial-gradient(circle 3.2px at 27px 50%, var(--neon) 98%, transparent 100%),
      radial-gradient(circle 3.2px at 38.5px 50%, var(--neon) 98%, transparent 100%);
  }

  /* "Mejor: 0:19" — lo rellena el JS en .best-time */
  .solo-diff .best-time {
    order: 2; margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px;
    letter-spacing: 0; text-transform: none;
    color: var(--gris); text-shadow: none;
  }
  .solo-diff .best-time:empty { display: none; }

  /* "💰 +5" anclado a la derecha, centrado vertical */
  .solo-diff .reward-line {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    margin: 0;
    font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13.5px;
    letter-spacing: 0; text-transform: none;
    color: var(--oro); text-shadow: 0 0 10px rgba(255,194,61,.5);
    text-align: right; max-width: 96px; line-height: 1.25;
  }
  .solo-diff .reward-line.claimed { color: var(--gris); text-shadow: none; font-weight: 600; font-size: 11.5px; }

  /* Marco del panel "Partida en solitario" */
  /* Centrado vertical, pero sin recortar arriba si el contenido es más alto
     que la pantalla (safe center → cae a flex-start y deja hacer scroll). */
  #overlay-solo { padding: 24px 12px; justify-content: safe center; overflow-y: auto; }
  #overlay-solo h2 { position: relative; font-size: 26px; }
  #overlay-solo > p { font-size: 14px; max-width: 340px; margin-top: 4px; }
  #overlay-solo h2::after {
    content: "BRK JUEGOS";
    display: block; margin-top: 8px;
    font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 9px;
    letter-spacing: .34em; color: var(--gris); text-transform: uppercase;
  }
  #overlay-solo .stack {
    background: linear-gradient(180deg, #0c1a2f, #0a1424);
    border: 1px solid rgba(var(--borde-rgb),0.12);
    border-radius: 22px;
    padding: 18px 16px;
    gap: 11px;
    box-shadow: 0 0 44px rgba(40,120,255,.14), 0 24px 60px rgba(0,0,0,.42);
  }
  /* "Cancelar" — fuera del cuadro de dificultades y más abajo, pero con la
     misma pastilla de neón que el resto (tono gris neutro, hereda de .btn-ghost). */
  #overlay-solo .solo-cancel {
    width: 100%; max-width: 400px;
    margin-top: 18px;
  }
  [data-theme="light"] #overlay-solo .stack {
    background: #ffffff;
    box-shadow: 0 0 30px rgba(40,120,255,.10), 0 18px 44px rgba(0,0,0,.12);
  }
  [data-theme="light"] .solo-diff.btn.btn-ghost {
    color: color-mix(in srgb, var(--neon, #334155) 72%, #0b1120);
    background: color-mix(in srgb, var(--neon, #64748b) 9%, #ffffff);
    text-shadow: none;
  }

  /* ============================================================
     SISTEMA NEÓN — pantalla de inicio + lobby
     Cada juego define su color de identidad en --acento (en el
     <style> de su propio index.html). Todo lo de aquí lo deriva.
     Los halos de contenedor van MUY sutiles a propósito: el brillo
     fuerte se reserva para botones y elementos activos.
     ============================================================ */
  :root { --acento: var(--cyan); }

  /* Tarjeta principal del menú */
  .card {
    background: linear-gradient(180deg, var(--panel-top, #0c1a2e), var(--noche-2) 72%);
    border-color: color-mix(in srgb, var(--acento) 24%, transparent);
    box-shadow:
      0 0 34px color-mix(in srgb, var(--acento) 9%, transparent),
      0 22px 50px rgba(0,0,0,.40);
  }

  /* "Solo" vs "Multijugador": cada caja con su acento */
  .mode-group { background: rgba(3,8,16,0.34); border-color: rgba(var(--borde-rgb),0.10); }
  .mode-group.solo {
    border-color: color-mix(in srgb, var(--acento) 32%, transparent);
    box-shadow: inset 0 0 22px -14px color-mix(in srgb, var(--acento) 90%, transparent),
                0 0 18px -8px color-mix(in srgb, var(--acento) 55%, transparent);
  }
  .mode-group.solo .mode-group-title { color: color-mix(in srgb, var(--acento) 72%, var(--crema)); }
  .mode-group.multi {
    border-color: color-mix(in srgb, var(--coral) 30%, transparent);
    box-shadow: inset 0 0 22px -14px color-mix(in srgb, var(--coral) 90%, transparent),
                0 0 18px -8px color-mix(in srgb, var(--coral) 55%, transparent);
  }
  .mode-group.multi .mode-group-title { color: color-mix(in srgb, var(--coral) 78%, var(--crema)); }

  /* Campos de texto: foco con halo del acento */
  input[type="text"]:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
  }
  input.code-input:focus {
    border-color: var(--oro);
    box-shadow: 0 0 0 3px rgba(255,194,61,.20), 0 0 18px rgba(255,194,61,.22);
  }

  /* ---- Lobby ---- */
  .room-code { text-shadow: 0 0 24px rgba(255,194,61,.45); }
  .lobby-player, .opts-panel, .bet-panel, .podium-row {
    background: linear-gradient(180deg, var(--panel-top, #0c1a2e), var(--noche-2) 76%);
  }
  .lobby-player { border-color: color-mix(in srgb, var(--acento) 16%, rgba(var(--borde-rgb),0.08)); }
  .podium-row.first {
    box-shadow: 0 0 28px rgba(255,194,61,.20), 0 0 0 1px rgba(255,194,61,.25) inset;
  }
  .team-box { box-shadow: 0 0 18px -10px color-mix(in srgb, var(--acento) 60%, transparent); }

  /* Panel "Opciones de partida": mismo marco/glow y cabecera que el resto
     del sistema neón (antes se veía como una caja plana suelta). */
  .opts-panel {
    background: linear-gradient(180deg, #0c1a2f, #0a1424);
    border: 1px solid color-mix(in srgb, var(--acento) 20%, rgba(var(--borde-rgb),0.10));
    border-radius: 18px;
    box-shadow: 0 0 26px color-mix(in srgb, var(--acento) 9%, transparent), 0 18px 44px rgba(0,0,0,.34);
  }
  .opts-panel > .opts-title {
    color: color-mix(in srgb, var(--acento) 58%, var(--crema));
    text-shadow: 0 0 12px color-mix(in srgb, var(--acento) 28%, transparent);
  }
  .opts-collapsible .opts-chevron { color: color-mix(in srgb, var(--acento) 65%, var(--gris)); }
  .opt-row { border-top-color: rgba(var(--borde-rgb),0.08); }
  .opt-switch.on {
    background: var(--acento);
    box-shadow: 0 0 12px color-mix(in srgb, var(--acento) 55%, transparent);
  }
  #overlay-solo .opts-panel { border-radius: 22px; }

  /* Cuadro fijo para la lista de jugadores del lobby (mismo lenguaje visual
     que .opts-panel: marco/glow con el acento del juego) — sin este tope,
     cada jugador que entra empuja "¡Empezar partida!" más abajo hasta
     sacarlo de la pantalla. Con esto la lista misma se desplaza puertas
     adentro, como ya hace el panel "Jugar por monedas" de arriba, y el
     botón de empezar queda siempre a la vista justo debajo sin importar
     cuánta gente haya entrado. Solo aplica al lobby real (#lobby-players,
     por id) — el mismo #leaderboard-list que reusa la clase .lobby-players
     para el ranking ya trae su propio alto/scroll en línea y no necesita
     este marco.
  */
  #lobby-players {
    background: linear-gradient(180deg, #0c1a2f, #0a1424);
    border: 1px solid color-mix(in srgb, var(--acento) 20%, rgba(var(--borde-rgb),0.10));
    border-radius: 18px;
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
  }
  [data-theme="light"] #lobby-players { background: var(--noche-2); }

  /* Switch de día/noche con estética neón (la maqueta base vive en el
     <style> de cada juego; esto la reviste). */
  #btn-theme.theme-switch {
    background: rgba(3,8,16,0.45);
    border: 1.5px solid color-mix(in srgb, var(--cyan) 38%, transparent);
    box-shadow: inset 0 0 14px -7px color-mix(in srgb, var(--cyan) 85%, transparent),
                0 0 14px -6px color-mix(in srgb, var(--cyan) 55%, transparent);
  }
  #btn-theme.theme-switch .knob {
    background: var(--violeta);
    box-shadow: 0 0 10px color-mix(in srgb, var(--violeta) 75%, transparent);
  }
  [data-theme="light"] #btn-theme.theme-switch {
    border-color: color-mix(in srgb, var(--oro) 45%, transparent);
    box-shadow: inset 0 0 14px -7px color-mix(in srgb, var(--oro) 85%, transparent),
                0 0 14px -6px rgba(255,194,61,.5);
  }
  [data-theme="light"] #btn-theme.theme-switch .knob {
    background: var(--oro);
    box-shadow: 0 0 10px rgba(255,194,61,.75);
  }

  [data-theme="light"] .card {
    background: #ffffff;
    box-shadow: 0 0 24px color-mix(in srgb, var(--acento) 12%, transparent), 0 16px 40px rgba(0,0,0,.10);
  }
  [data-theme="light"] .mode-group { background: rgba(9,17,32,0.03); }
  [data-theme="light"] .lobby-player,
  [data-theme="light"] .opts-panel,
  [data-theme="light"] .bet-panel,
  [data-theme="light"] .podium-row { background: var(--noche-2); }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }