/* Sala_Juegos - Estilos base, mobile-first.
 * Paleta sobria estilo Forjiato: azul + grises + acentos clidos.
 */

:root {
    --bg:        #0f1419;
    --bg-alt:    #1a2028;
    --card:      #232b35;
    --borde:     #2f3845;
    --texto:     #e6e9ee;
    --texto-suave: #9ba6b5;
    --primario:  #1f6feb;
    --primario-hover: #387ff2;
    --secundario: #2f3845;
    --peligro:   #d94343;
    --exito:     #2ea043;
    --acento:    #f0b400;
    --radio:     10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout general ===== */
.topbar {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--borde);
    padding: 0.85rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar__logo {
    color: var(--texto);
    font-weight: 600;
    font-size: 1.1rem;
}
.topbar__logo:hover { text-decoration: none; color: var(--primario); }

.contenido {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
}

.piepagina {
    text-align: center;
    color: var(--texto-suave);
    padding: 2rem 1rem;
}

/* ===== Hero ===== */
.hero { text-align: center; padding: 2rem 0 1rem; }
.hero__titulo { font-size: 2rem; margin: 0 0 0.5rem; }
.hero__sub { color: var(--texto-suave); margin: 0 0 1.5rem; }
.hero__acciones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 360px;
    margin: 0 auto;
}

/* ===== Tarjetas ===== */
.tarjeta {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.5rem 1.25rem;
    margin: 1rem auto;
    max-width: 480px;
}
.tarjeta--centrado { text-align: center; }
.tarjeta h1 { margin-top: 0; }

/* ===== Formularios ===== */
.formulario { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo__etiqueta { font-size: 0.9rem; color: var(--texto-suave); }
.campo input[type="text"],
.campo input[type="password"] {
    background: var(--bg);
    border: 1px solid var(--borde);
    color: var(--texto);
    padding: 0.75rem;
    border-radius: var(--radio);
    font-size: 1rem;
    width: 100%;
}
.campo input:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px rgba(31,111,235,0.25);
}
.campo-opcional summary {
    cursor: pointer;
    color: var(--texto-suave);
    padding: 0.5rem 0;
}

/* ===== Botones ===== */
.btn {
    display: inline-block;
    padding: 0.65rem 1.1rem;
    border-radius: var(--radio);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn--primario { background: var(--primario); color: white; }
.btn--primario:hover { background: var(--primario-hover); }
.btn--secundario { background: var(--secundario); color: var(--texto); }
.btn--secundario:hover { background: #3a4452; }
.btn--peligro { background: transparent; color: var(--peligro); border-color: var(--peligro); }
.btn--peligro:hover { background: rgba(217,67,67,0.1); }
.btn--grande { padding: 0.85rem 1.25rem; font-size: 1.05rem; }

/* ===== Alertas ===== */
.alerta {
    padding: 0.85rem 1rem;
    border-radius: var(--radio);
    margin: 1rem 0;
}
.alerta--error { background: rgba(217,67,67,0.15); border: 1px solid var(--peligro); }
.alerta--importante {
    background: rgba(240,180,0,0.12);
    border: 1px solid var(--acento);
    color: #ffefb3;
}
.alerta--importante .clave-admin {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    background: #1a1100;
    color: var(--acento);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    margin: 0.5rem 0;
}
.alerta--importante p { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* ===== Lobby ===== */
.sala-cabecera {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}
.sala-cabecera h1 { margin: 0; }
.codigo-sala {
    margin: 0.5rem 0 0;
    color: var(--texto-suave);
    font-size: 1rem;
}
.codigo-sala__valor {
    background: var(--bg-alt);
    color: var(--acento);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    letter-spacing: 0.15em;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}
.btn-copiar {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    margin-left: 0.25rem;
}
.sala-cabecera__acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.grid-lobby {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bloque {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.25rem;
}
.bloque h2 { margin-top: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }

.contador {
    background: var(--bg);
    color: var(--texto-suave);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.85rem;
}

/* ===== Lista de jugadores ===== */
.lista-jugadores { list-style: none; padding: 0; margin: 0; }
.lista-jugadores li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--borde);
}
.lista-jugadores li:last-child { border-bottom: none; }
.lista-jugadores .punto {
    width: 9px; height: 9px; border-radius: 50%;
    background: #555;
    flex-shrink: 0;
}
.lista-jugadores li.conectado .punto {
    background: var(--exito);
    box-shadow: 0 0 0 3px rgba(46,160,67,0.2);
}
.badge-admin, .badge-yo {
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-admin { background: var(--acento); color: #1a1100; }
.badge-yo { background: var(--primario); color: white; }

/* ===== Juegos ===== */
.lista-juegos { list-style: none; padding: 0; margin: 0; }
.lista-juegos li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--borde);
}
.lista-juegos li.proximamente { color: var(--texto-suave); }
.lista-juegos .emoji { display: inline-block; width: 1.5em; }

.rejilla-juegos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}
.card-juego {
    background: var(--bg-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 0.5rem;
    color: var(--texto);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    transition: transform 0.05s, background 0.15s;
}
.card-juego:hover:not(:disabled) { background: var(--card); }
.card-juego:active:not(:disabled) { transform: scale(0.97); }
.card-juego:disabled { opacity: 0.5; cursor: not-allowed; }
.card-juego__emoji { font-size: 2rem; }
.card-juego__nombre { font-weight: 600; }
.card-juego small { color: var(--texto-suave); font-size: 0.75rem; }

/* ===== Mis salas en home ===== */
.mis-salas {
    max-width: 480px;
    margin: 1.5rem auto 0;
}
.mis-salas h2 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}
.mis-salas__sub {
    margin: 0 0 0.75rem;
    color: var(--texto-suave);
    font-size: 0.88rem;
}
.lista-mis-salas {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mi-sala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.75rem 1rem;
    color: var(--texto);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.mi-sala:hover {
    border-color: var(--primario);
    background: var(--bg-alt);
    text-decoration: none;
}
.mi-sala__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.mi-sala__nombre {
    color: var(--texto);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mi-sala__meta {
    color: var(--texto-suave);
    font-size: 0.82rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.mi-sala__codigo {
    background: var(--bg-alt);
    color: var(--acento);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.1em;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    font-size: 0.78rem;
}
.mi-sala__hace {
    color: var(--texto-suave);
    font-size: 0.75rem;
}
.mi-sala__presencia {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--texto-suave);
    margin-top: 0.1rem;
}
.mi-sala__presencia--activa { color: #6ee7a8; }
.mi-sala__presencia--vacia  { color: var(--texto-suave); }
.presencia-punto {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #555;
    display: inline-block;
    flex-shrink: 0;
}
.presencia-punto.on {
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
    animation: presenciaPulso 2s ease-in-out infinite;
}
@keyframes presenciaPulso {
    0%, 100% { box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.05); }
}
body.tema-casino .mi-sala__presencia--activa { color: #f0c84e; }
body.tema-casino .presencia-punto.on {
    background: #f0c84e;
    box-shadow: 0 0 0 3px rgba(240, 200, 78, 0.2);
}
body.tema-casino @keyframes presenciaPulso {
    0%, 100% { box-shadow: 0 0 0 3px rgba(240, 200, 78, 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(240, 200, 78, 0.06); }
}
.mi-sala__cta {
    color: var(--primario);
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.bloque-juegos {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.25rem;
    margin-top: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.texto-suave { color: var(--texto-suave); font-size: 0.92rem; }
.texto-centrado { text-align: center; }
.form-salir { margin-top: 1.5rem; text-align: center; }
.oculto { display: none !important; }

/* ===== Botones extra ===== */
.btn--small { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.alerta--neutro { background: var(--bg-alt); border: 1px solid var(--borde); }

/* ===== Partidas pendientes ===== */
.bloque--destacado {
    background: linear-gradient(135deg, rgba(31,111,235,0.15), rgba(240,180,0,0.08));
    border: 1px solid var(--primario);
}
.lista-pendientes { list-style: none; padding: 0; margin: 0; }
.lista-pendientes li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--borde);
}
.lista-pendientes li:last-child { border-bottom: none; }
.pendiente-icono { font-size: 1.5rem; }
.pendiente-info { flex: 1; }

/* ===== Loteria Mexicana ===== */
.loteria-canto {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem;
    margin: 1rem auto;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.loteria-canto__etiqueta {
    color: var(--texto-suave);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.loteria-canto__carta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, #fdfaf0 0%, #ebe0c6 100%);
    border: 2px solid var(--acento);
    border-radius: var(--radio);
    color: #1a1100;
    min-width: 200px;
    transition: transform 0.4s;
}
.loteria-canto__carta--animar {
    animation: loteriaFlip 0.6s ease-out;
}
@keyframes loteriaFlip {
    0%   { transform: rotateY(90deg) scale(0.9); }
    50%  { transform: rotateY(0deg) scale(1.05); }
    100% { transform: rotateY(0deg) scale(1); }
}
.loteria-carta__emoji {
    font-size: 3.2rem;
    line-height: 1;
}
.loteria-carta__nombre {
    font-weight: 700;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
}
.loteria-canto__contador {
    color: var(--texto-suave);
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    font-size: 0.9rem;
}
.loteria-canto__contador span { color: var(--acento); font-weight: 700; }

.loteria-tabla-wrap {
    max-width: 480px;
    margin: 1rem auto;
}
.loteria-tabla-titulo {
    margin: 0 0 0.5rem;
    color: var(--texto-suave);
    font-size: 0.95rem;
    text-align: center;
}
.loteria-tabla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: var(--borde);
    padding: 4px;
    border-radius: 8px;
    border: 2px solid var(--acento);
}
.loteria-celda {
    background: linear-gradient(180deg, #fdfaf0 0%, #ebe0c6 100%);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 6px;
    color: #1a1100;
    padding: 0.4rem 0.2rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    aspect-ratio: 1 / 1.1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    transition: transform 0.1s, background 0.15s;
}
.loteria-celda:hover:not(:disabled) { background: #fff; }
.loteria-celda:active:not(:disabled) { transform: scale(0.94); }
.loteria-celda__emoji { font-size: 1.7rem; line-height: 1; }
.loteria-celda__nombre {
    font-size: 0.65rem;
    text-align: center;
    line-height: 1.1;
    color: #6b5a2f;
}
.loteria-celda--marcada::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(217,67,67,0.6) 35%, transparent 70%);
    border-radius: 50%;
    margin: 12%;
    pointer-events: none;
    animation: loteriaPonerFrijol 0.2s ease-out;
}
@keyframes loteriaPonerFrijol {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.loteria-celda--rechazada {
    animation: loteriaShake 0.4s;
    border-color: var(--peligro);
}
@keyframes loteriaShake {
    0%, 100% { transform: translateX(0); }
    25%  { transform: translateX(-4px); }
    75%  { transform: translateX(4px); }
}

.loteria-historial {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.75rem 1rem;
    margin: 1rem auto;
    max-width: 480px;
}
.loteria-historial h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--texto-suave);
}
.loteria-historial__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}
.loteria-mini {
    font-size: 1.3rem;
    background: var(--bg-alt);
    border-radius: 6px;
    padding: 2px 4px;
}

/* Imagen real de la carta (en la tabla, carta cantada y historial) */
.loteria-celda__img {
    width: 82%;
    max-width: 82%;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 75%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.loteria-carta__img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: 8px;
    background: #f8f2e1;
    padding: 6px;
}
.loteria-mini-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    background: #f8f2e1;
    padding: 2px;
    cursor: help;
}
@media (max-width: 420px) {
    .loteria-carta__img { width: 110px; height: 110px; }
    .loteria-mini-img { width: 28px; height: 28px; }
}

/* ===== Frijolitos (moneda virtual) ===== */
/* Icono inline del frijolito (igual tamaño que un emoji en el texto) */
.fri {
    display: inline-block;
    height: 1em;
    width: auto;
    vertical-align: -0.15em;
    user-select: none;
}
.loteria-pozo__valor + .fri,
.loteria-saldo__valor + .fri { height: 1.1em; vertical-align: -0.2em; }
.loteria-overlay__pozo .fri { height: 1.2em; vertical-align: -0.2em; }

.mi-saldo {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    color: var(--texto-suave);
}
.mi-saldo strong {
    color: #d4af37;
    font-size: 1.1rem;
}

.jugador-frijoles {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: var(--texto-suave);
    white-space: nowrap;
}

/* Badge de ubicacion: donde esta el jugador */
.badge-ubicacion {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    margin-left: auto;
}
.badge-ubicacion--lobby {
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto-suave);
    border: 1px solid var(--borde);
}
.badge-ubicacion--jugando {
    background: rgba(46, 204, 113, 0.15);
    color: #6ee7a8;
    border: 1px solid rgba(46, 204, 113, 0.35);
    font-weight: 600;
}
body.tema-casino .badge-ubicacion--lobby {
    background: rgba(212, 175, 55, 0.06);
    border-color: rgba(212, 175, 55, 0.25);
    color: rgba(245, 241, 227, 0.7);
}
body.tema-casino .badge-ubicacion--jugando {
    background: rgba(240, 200, 78, 0.18);
    border-color: rgba(240, 200, 78, 0.5);
    color: #f0c84e;
}
.jugador-frijoles__valor {
    color: #d4af37;
    font-weight: 700;
}

.btn-dar-frijoles {
    background: var(--bg-alt);
    color: var(--texto);
    border: 1px solid var(--borde);
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}
.btn-dar-frijoles:hover {
    background: #d4af37;
    color: #1a1100;
    border-color: #d4af37;
}

.lista-jugadores li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dar-rapidos {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}

/* Bloque pozo + saldo en la partida de Loteria */
.loteria-economia {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(139, 105, 20, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin: 0.5rem 0 1rem;
}
.loteria-pozo, .loteria-saldo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.loteria-pozo__etiqueta, .loteria-saldo__etiqueta {
    font-size: 0.8rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.loteria-pozo__valor {
    font-size: 1.8rem;
    color: #d4af37;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.3s ease-out;
}
.loteria-saldo__valor {
    font-size: 1.4rem;
    color: var(--texto);
    font-weight: 700;
}

.loteria-overlay__pozo {
    margin: 1rem 0;
    padding: 0.6rem 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 1.2rem;
    color: #1a1100;
    font-weight: 700;
}

/* Toggle de voz */
.btn-voz {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    background: var(--bg-alt);
    color: var(--texto);
    border: 1px solid var(--borde);
}
.btn-voz--off {
    opacity: 0.6;
    background: transparent;
}

/* Overlay del ganador */
.loteria-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: loteriaOverlayFade 0.3s ease-out;
    padding: 1rem;
}
@keyframes loteriaOverlayFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.loteria-overlay__caja {
    background: linear-gradient(160deg, #d4af37 0%, #b8932d 50%, #8b6914 100%);
    border: 4px solid #f0c84e;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 80px rgba(240, 200, 78, 0.5);
    color: #1a1100;
    animation: loteriaOverlayPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes loteriaOverlayPop {
    from { transform: scale(0.3) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}
.loteria-overlay__titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.05em;
    animation: loteriaTituloPulsa 1s ease-in-out infinite alternate;
}
@keyframes loteriaTituloPulsa {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}
.loteria-overlay__mensaje {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: #1a1100;
}
.loteria-overlay__mensaje strong {
    color: #1a1100;
    font-weight: 800;
}
.loteria-overlay .btn {
    background: #1a1100 !important;
    color: #f0c84e !important;
    border-color: #1a1100 !important;
}
@media (max-width: 480px) {
    .loteria-overlay__titulo { font-size: 1.8rem; }
    .loteria-overlay__mensaje { font-size: 1.1rem; }
    .loteria-overlay__caja { padding: 1.5rem 1.5rem; }
}

@media (max-width: 420px) {
    .loteria-celda__emoji { font-size: 1.3rem; }
    .loteria-celda__nombre { font-size: 0.55rem; }
    .loteria-carta__emoji { font-size: 2.6rem; }
}

/* Tema casino para loteria */
body.tema-casino .loteria-tabla {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.4);
}
body.tema-casino .loteria-canto {
    background: linear-gradient(160deg, rgba(13, 50, 36, 0.92), rgba(5, 25, 18, 0.96));
    border-color: rgba(212, 175, 55, 0.3);
}
body.tema-casino .loteria-historial {
    background: linear-gradient(160deg, rgba(13, 50, 36, 0.92), rgba(5, 25, 18, 0.96));
    border-color: rgba(212, 175, 55, 0.3);
}
body.tema-casino .loteria-mini { background: rgba(212, 175, 55, 0.15); }

/* ===== Sudoku ===== */
.sudoku-cuerpo {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.sudoku-panel {
    flex: 0 1 460px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.sudoku-panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--texto-suave);
    font-size: 0.92rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.sudoku-panel__cabeza strong { color: var(--texto); }
.sudoku-stats {
    display: inline-flex;
    gap: 0.85rem;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    font-size: 0.92rem;
}
.sudoku-stats strong, .sudoku-stats span span:first-child { color: var(--acento); }
.sudoku-stats__err { color: var(--peligro); }

.sudoku-tablero {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 1px;
    background: var(--borde);
    padding: 3px;
    border: 2px solid var(--acento);
    border-radius: 6px;
    aspect-ratio: 1 / 1;
}
.sudoku-celda {
    background: var(--bg-alt);
    border: none;
    color: var(--texto);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.sudoku-celda:hover:not(:disabled) { background: var(--card); }
.sudoku-celda--sel {
    background: rgba(31, 111, 235, 0.32) !important;
    box-shadow: inset 0 0 0 2px var(--primario);
}
.sudoku-celda--pista {
    color: var(--acento);
    background: var(--bg);
    cursor: default;
}
/* Lineas mas gruesas separando bloques 3x3 */
.sudoku-celda--bordeR { border-right: 2px solid var(--acento); }
.sudoku-celda--bordeB { border-bottom: 2px solid var(--acento); }

.sudoku-pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.sudoku-pad__btn {
    background: var(--bg-alt);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 8px;
    padding: 0.7rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sudoku-pad__btn:hover { background: var(--card); border-color: var(--primario); }
.sudoku-pad__btn:active { transform: scale(0.95); }
.sudoku-pad__btn--borrar {
    background: rgba(217, 67, 67, 0.18);
    border-color: var(--peligro);
    color: var(--peligro);
}

.sudoku-rival {
    flex: 0 1 240px;
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.85rem 1rem;
    height: max-content;
}
.sudoku-rival__cabeza {
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
}
.sudoku-rival__cabeza strong { color: var(--texto); font-size: 1.05rem; }
.sudoku-rival__cabeza small  { color: var(--texto-suave); font-size: 0.75rem; }
.sudoku-rival__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sudoku-rival__stats li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    background: var(--bg-alt);
    border-radius: 6px;
    font-size: 0.92rem;
}
.sudoku-rival__stats span { color: var(--texto-suave); }
.sudoku-rival__stats strong {
    color: var(--acento);
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}

@media (max-width: 720px) {
    .sudoku-celda { font-size: 1rem; }
    .sudoku-pad__btn { font-size: 1rem; padding: 0.55rem 0; }
    .sudoku-rival { flex: 1 1 100%; max-width: 480px; }
}

/* Tema casino para sudoku */
body.tema-casino .sudoku-tablero { border-color: #d4af37; background: rgba(212, 175, 55, 0.4); }
body.tema-casino .sudoku-celda--pista { color: #d4af37; }
body.tema-casino .sudoku-celda--bordeR { border-right-color: #d4af37; }
body.tema-casino .sudoku-celda--bordeB { border-bottom-color: #d4af37; }
body.tema-casino .sudoku-rival {
    background: linear-gradient(160deg, rgba(13, 50, 36, 0.92), rgba(5, 25, 18, 0.96));
    border-color: rgba(212, 175, 55, 0.3);
}
body.tema-casino .sudoku-rival__stats strong { color: #d4af37; }

/* ===== Conecta 4 ===== */
.c4-tablero-wrap {
    max-width: 480px;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.c4-flechas {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 0 6px;
}
.c4-flecha {
    background: transparent;
    border: none;
    color: var(--texto-suave);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.c4-flecha:hover { background: rgba(31,111,235,0.15); color: var(--primario); }
.c4-flecha:active { transform: translateY(2px); }
.c4-tablero {
    background: #1a3a8c;
    padding: 6px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    aspect-ratio: 7 / 6;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
.c4-celda {
    background: var(--bg);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}
.c4-celda:hover { background: var(--bg-alt); }
.c4-celda--R { background: #e54d4d; box-shadow: inset 0 -3px 5px rgba(0,0,0,0.3); }
.c4-celda--Y { background: #f0c648; box-shadow: inset 0 -3px 5px rgba(0,0,0,0.3); }
.c4-celda--R:hover, .c4-celda--Y:hover { /* no cambiar al hover si tiene ficha */ }
.c4-celda--gano {
    animation: c4-pulsa 0.6s ease-in-out 3;
    box-shadow: 0 0 12px 4px rgba(46,160,67,0.6), inset 0 -3px 5px rgba(0,0,0,0.3);
}
.c4-celda--cayendo {
    animation: c4-caer 0.4s ease-out;
}
@keyframes c4-pulsa {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@keyframes c4-caer {
    from { transform: translateY(-300%); }
    to   { transform: translateY(0); }
}

.c4-ficha {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1;
}
/* !important para vencer a .jugador-card__ficha que tiene color var(--acento) */
.c4-ficha.c4-ficha--R, span.c4-color-R { color: #e54d4d !important; }
.c4-ficha.c4-ficha--Y, span.c4-color-Y { color: #f0c648 !important; }

@media (max-width: 480px) {
    .c4-tablero { gap: 4px; padding: 4px; }
    .c4-flechas { gap: 4px; padding: 0 4px; }
    .c4-flecha { font-size: 0.95rem; }
}

/* ===== Selector de nivel del Puzzle 15 ===== */
.puzzle-nivel {
    background: var(--bg-alt);
    border-radius: var(--radio);
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.puzzle-nivel__etiqueta {
    color: var(--texto-suave);
    font-size: 0.85rem;
}
.puzzle-nivel__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.puzzle-nivel__btn {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--borde);
    color: var(--texto-suave);
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.puzzle-nivel__btn:hover { background: var(--card); color: var(--texto); }
.puzzle-nivel__btn--activo {
    background: var(--primario);
    border-color: var(--primario);
    color: white;
}

/* ===== Puzzle 15 ===== */
/* Mobile-first: por defecto los paneles van apilados, ocupando 100% del
   ancho hasta un maximo de 400px. En escritorio el versus los pone en row. */
.puzzle-cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0;
}
.puzzle-panel {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.85rem;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}
.puzzle-panel__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    color: var(--texto-suave);
    font-size: 0.9rem;
}
.puzzle-panel__cabeza strong { color: var(--texto); }
.puzzle-panel__movs strong, .puzzle-panel__movs span {
    color: var(--acento);
    font-weight: 700;
}

.puzzle-tablero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: var(--bg);
    padding: 4px;
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}
.puzzle-ficha {
    background: var(--bg-alt);
    border: 1px solid var(--borde);
    border-radius: 6px;
    color: var(--texto);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s, background 0.12s;
    box-sizing: border-box;
    padding: 0;
    line-height: 1;
}
.puzzle-ficha:hover:not(:disabled):not(.puzzle-ficha--hueco) {
    background: var(--card);
    border-color: var(--primario);
}
.puzzle-ficha:active:not(:disabled):not(.puzzle-ficha--hueco) {
    transform: scale(0.94);
}
.puzzle-ficha--hueco {
    background: transparent;
    border-color: transparent;
    cursor: default;
}
/* Tablero del rival: sin interactividad, fichas mas chicas */
.puzzle-tablero--rival .puzzle-ficha {
    font-size: 1.1rem;
    cursor: default;
}
.puzzle-cuerpo--versus .puzzle-panel:nth-child(2) {
    opacity: 0.9;
}

/* Escritorio: en versus, paneles al lado */
@media (min-width: 760px) {
    .puzzle-cuerpo--versus {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }
    .puzzle-cuerpo--versus .puzzle-panel {
        flex: 0 1 360px;
    }
}

/* ===== Chat de sala ===== */
.chat-sala {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.75rem 1rem;
    margin: 1.5rem auto;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.chat-sala h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--texto-suave);
    font-weight: 600;
}
.chat-mensajes {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
.chat-msg {
    background: var(--bg-alt);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    max-width: 85%;
    align-self: flex-start;
    word-wrap: break-word;
    animation: deslizaIn 0.2s ease-out;
}
.chat-msg--mio {
    background: rgba(31,111,235,0.18);
    border: 1px solid rgba(31,111,235,0.35);
    align-self: flex-end;
}
.chat-msg__cabeza {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.chat-msg__cabeza strong {
    color: var(--acento);
    font-size: 0.78rem;
    font-weight: 600;
}
.chat-msg--mio .chat-msg__cabeza strong { color: #4ea1ff; }
.chat-msg__cabeza time {
    color: var(--texto-suave);
    font-size: 0.7rem;
}
.chat-msg__texto {
    color: var(--texto);
    font-size: 0.92rem;
    line-height: 1.35;
    white-space: pre-wrap;
}
.chat-form {
    display: flex;
    gap: 0.4rem;
}
.chat-form input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--borde);
    color: var(--texto);
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.95rem;
}
.chat-form input:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px rgba(31,111,235,0.2);
}
.chat-form button {
    background: var(--primario);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 0.9rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-form button:hover { background: var(--primario-hover); }

@media (max-width: 720px) {
    .chat-sala { margin: 1rem auto; padding: 0.5rem 0.75rem; }
    .chat-mensajes { height: 140px; }
    .chat-sala h3 { font-size: 0.85rem; }
}

/* ===== Tabs de records ===== */
.tabs-records {
    display: flex;
    gap: 4px;
    margin: 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--borde);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    white-space: nowrap;
}
.tabs-records::-webkit-scrollbar { height: 4px; }
.tabs-records .tab {
    flex: 0 0 auto;
    white-space: nowrap;
}
.tab {
    background: transparent;
    border: none;
    color: var(--texto-suave);
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--texto); }
.tab--activo {
    color: var(--acento);
    border-bottom-color: var(--acento);
    font-weight: 600;
}
.tab-contenido { display: none; }
.tab-contenido--activo { display: block; }

/* ===== Tabla de records ===== */
.tabla-records {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}
.tabla-records th, .tabla-records td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--borde);
}
.tabla-records th {
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tabla-records td.num, .tabla-records th:nth-child(n+2) { text-align: center; }
.tabla-records .fila-yo { background: rgba(31,111,235,0.08); }
.tabla-records .fila-yo td { font-weight: 600; }

/* ===== Partida ===== */
.partida-cabecera {
    text-align: center;
    margin: 0.5rem 0 1.25rem;
    position: relative;
}
.partida-cabecera h1 { margin: 0.5rem 0; font-size: 1.6rem; }
.btn-volver {
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: var(--texto-suave);
    font-size: 0.9rem;
}

.jugadores-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}
.jugador-card {
    background: var(--card);
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    max-width: 200px;
    transition: border-color 0.2s, transform 0.15s;
}
.jugador-card--turno {
    border-color: var(--acento);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240,180,0,0.25);
}
.jugador-card__ficha {
    font-size: 2rem;
    font-weight: 700;
    color: var(--acento);
    line-height: 1;
}
.jugador-card__nombre {
    font-size: 0.95rem;
    color: var(--texto);
}
.jugadores-vs__separador {
    font-weight: 700;
    color: var(--texto-suave);
    font-size: 1.2rem;
}

/* ===== Tablero Gato ===== */
.tablero-gato {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 360px;
    margin: 1.5rem auto;
    aspect-ratio: 1 / 1;
    background: var(--borde);
    padding: 6px;
    border-radius: var(--radio);
}
.celda {
    background: var(--card);
    border: none;
    border-radius: 8px;
    font-size: 3rem;
    font-weight: 700;
    color: var(--texto);
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.celda:hover:not(:disabled) { background: var(--bg-alt); }
.celda:active:not(:disabled) { transform: scale(0.96); }
.celda:disabled { cursor: default; }
.celda--x { color: #4ea1ff; }
.celda--o { color: #ffb84e; }
.celda--gano {
    background: rgba(46,160,67,0.25);
    animation: pulsar 0.6s ease-in-out 3;
}
.tablero-gato[data-estado="terminada"] .celda { cursor: default; }

@keyframes pulsar {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.acciones-partida {
    text-align: center;
    margin: 1.5rem 0;
}

/* ===== Ahorcado ===== */
.ahorcado-cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0;
}
.horca-wrap {
    text-align: center;
}
.horca {
    width: 180px;
    height: 198px;
    color: var(--texto);
}
.horca .parte {
    opacity: 0;
    transition: opacity 0.3s;
}
.horca[data-errores="1"] .parte--1,
.horca[data-errores="2"] .parte--1,
.horca[data-errores="2"] .parte--2,
.horca[data-errores="3"] .parte--1,
.horca[data-errores="3"] .parte--2,
.horca[data-errores="3"] .parte--3,
.horca[data-errores="4"] .parte--1,
.horca[data-errores="4"] .parte--2,
.horca[data-errores="4"] .parte--3,
.horca[data-errores="4"] .parte--4,
.horca[data-errores="5"] .parte--1,
.horca[data-errores="5"] .parte--2,
.horca[data-errores="5"] .parte--3,
.horca[data-errores="5"] .parte--4,
.horca[data-errores="5"] .parte--5,
.horca[data-errores="6"] .parte {
    opacity: 1;
}
.horca[data-errores="6"] .parte { color: var(--peligro); }

.errores-contador {
    margin: 0.5rem 0 0;
    color: var(--texto-suave);
    font-size: 0.95rem;
}
.errores-contador strong { color: var(--acento); font-size: 1.1rem; }

.contadores-juego {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    align-items: center;
}
.contador-pill {
    margin: 0;
    padding: 0.35rem 0.85rem;
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--texto-suave);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.contador-pill span { font-size: 0.85rem; }
.contador-pill strong { color: var(--exito); font-size: 1rem; }
.contador-pill--error strong { color: var(--peligro); }

.palabra-y-letras {
    width: 100%;
    max-width: 560px;
}

.palabra-mostrada {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1.5rem;
}
.letra-hueco {
    width: 2.2rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid var(--texto-suave);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--texto);
    text-transform: uppercase;
}
.letra-hueco--revelada {
    border-bottom-color: var(--exito);
    color: var(--acento);
    animation: aparece 0.3s ease-out;
}
@keyframes aparece {
    from { transform: scale(1.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.teclado {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    margin: 0.5rem 0;
}
.tecla {
    background: var(--bg-alt);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 6px;
    padding: 0.55rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.1s, transform 0.05s;
}
.tecla:hover:not(:disabled) { background: var(--card); }
.tecla:active:not(:disabled) { transform: scale(0.93); }
.tecla:disabled { opacity: 0.55; cursor: default; }
.tecla--acerto {
    background: rgba(46,160,67,0.25) !important;
    color: var(--exito);
    border-color: var(--exito);
    opacity: 1;
}
.tecla--fallo {
    background: rgba(217,67,67,0.2) !important;
    color: var(--peligro);
    border-color: var(--peligro);
    opacity: 1;
    text-decoration: line-through;
}

/* ===== Asteroides ===== */
.asteroides-hud {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
    background: var(--bg-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}
.asteroides-hud > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.asteroides-hud span {
    color: var(--texto-suave);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.asteroides-hud strong { color: var(--acento); font-size: 1.05rem; }

.asteroides-marco {
    position: relative;
    background: #05070b;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
}
.btn-fullscreen {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.btn-fullscreen:hover { background: rgba(0,0,0,0.8); }
.btn-fullscreen:active { transform: scale(0.92); }

/* ===== Modo inmersivo (pantalla completa simulada) ===== */
body.asteroides-inmersivo {
    overflow: hidden;
    /* Bloquear gestos del browser: nada de pinch, double-tap zoom, swipe */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
}
body.asteroides-inmersivo #ast-canvas,
body.asteroides-inmersivo .asteroides-marco,
body.asteroides-inmersivo .asteroides-controles {
    touch-action: none;
}
body.asteroides-inmersivo .topbar,
body.asteroides-inmersivo .piepagina,
body.asteroides-inmersivo .partida-cabecera,
body.asteroides-inmersivo .asteroides-hud,
body.asteroides-inmersivo .acciones-partida,
body.asteroides-inmersivo #chat-contenedor {
    display: none !important;
}
body.asteroides-inmersivo .contenido {
    max-width: none;
    padding: 0;
    margin: 0;
}
body.asteroides-inmersivo .asteroides-marco {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    border: none;
    z-index: 1000;
}
body.asteroides-inmersivo .asteroides-controles {
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    z-index: 1001;
    padding: 0 1rem;
    max-width: none;
}
body.asteroides-inmersivo .btn-fullscreen {
    background: rgba(217,67,67,0.7);
    border-color: var(--peligro);
}
body.asteroides-inmersivo .btn-fullscreen::before {
    content: '✖';
}
body.asteroides-inmersivo .btn-fullscreen {
    font-size: 0;
}
body.asteroides-inmersivo .btn-fullscreen::before {
    font-size: 1.1rem;
}
#ast-canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.asteroides-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 11, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--texto);
    padding: 1rem;
}
.asteroides-overlay h2 { margin: 0 0 0.5rem; color: var(--acento); }
.asteroides-overlay strong { color: var(--acento); font-size: 1.4rem; }

.asteroides-controles {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem auto;
    padding: 0 0.75rem;
    max-width: 720px;
}
.ast-dpad {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}
.ast-tecla {
    background: var(--card);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 12px;
    width: 72px;
    height: 64px;
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 110px;
}
.ast-tecla:active { background: var(--bg-alt); transform: scale(0.92); }
.ast-tecla--fuego {
    background: rgba(217,67,67,0.25);
    border-color: var(--peligro);
    color: var(--peligro);
    width: 100%;
    max-width: none;
    height: 92px;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
}
.ast-tecla--fuego:active { background: rgba(217,67,67,0.4); }

@media (max-width: 720px) {
    .ast-tecla { height: 60px; font-size: 1.7rem; }
    .ast-tecla--fuego { height: 100px; font-size: 1.2rem; }
    .asteroides-hud {
        grid-template-columns: repeat(5, 1fr);
        padding: 0.4rem 0.5rem;
        gap: 0.25rem;
    }
    .asteroides-hud span { font-size: 0.6rem; }
    .asteroides-hud strong { font-size: 0.9rem; }
    .asteroides-marco {
        aspect-ratio: 4 / 3;
        max-height: 55vh;
    }
}

/* ===== HUD mini (visible solo en modo inmersivo) ===== */
.ast-hud-mini {
    display: none;
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    background: rgba(0,0,0,0.55);
    color: var(--texto);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.78rem;
    gap: 0.9rem;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    pointer-events: none;
}
.ast-hud-mini span { white-space: nowrap; }
.ast-hud-mini strong { color: var(--acento); margin-left: 2px; }
body.asteroides-inmersivo .ast-hud-mini { display: flex; }


/* ===== Historial de intentos (Ahorcado) ===== */
.historial-intentos {
    background: var(--bg-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    max-height: 220px;
    overflow-y: auto;
}
.historial-intentos h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--texto-suave);
    font-weight: 600;
}
.historial-intentos ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.historial-intentos li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    background: var(--card);
    font-size: 0.95rem;
    animation: deslizaIn 0.25s ease-out;
}
@keyframes deslizaIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.intento-ico {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
}
.intento--acerto .intento-ico {
    background: rgba(46,160,67,0.25);
    color: var(--exito);
}
.intento--fallo .intento-ico {
    background: rgba(217,67,67,0.25);
    color: var(--peligro);
}
.intento-jugador {
    flex: 1;
    color: var(--texto);
    font-weight: 500;
}
.intento-letra {
    background: var(--bg);
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}
.intento--acerto .intento-letra { color: var(--exito); }
.intento--fallo .intento-letra { color: var(--peligro); }

/* Palabra del elector (modalidad elegida): se ve completa con dorado */
.palabra-mostrada--elector .letra-hueco {
    border-bottom-color: var(--acento);
    color: var(--acento);
}

.jugador-card small {
    color: var(--texto-suave);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== Modal ===== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
    animation: modalFade 0.15s ease-out;
}
.modal[hidden] { display: none; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal__caja {
    background: var(--card);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.5rem;
    max-width: 440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal__caja h3 { margin: 0 0 0.5rem; }

.opcion-modalidad {
    background: var(--bg-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.25rem;
    color: var(--texto);
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.15s, border-color 0.15s;
}
.opcion-modalidad:hover {
    background: var(--card);
    border-color: var(--primario);
}
.opcion-modalidad strong { font-size: 1.05rem; }
.opcion-modalidad small { color: var(--texto-suave); }

@media (min-width: 720px) {
    .ahorcado-cuerpo {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 2rem;
    }
    .horca { width: 220px; height: 242px; }
}
@media (max-width: 420px) {
    .teclado { grid-template-columns: repeat(7, 1fr); }
    .letra-hueco { width: 1.8rem; height: 2.4rem; font-size: 1.3rem; }
}


/* =====================================================
   TEMA CASINO - Solo aplica cuando body tiene .tema-casino
   (se agrega desde lobby.php). Mesa verde + dorado +
   tipografia Playfair Display en titulos.
   ===================================================== */
body.tema-casino {
    background:
      radial-gradient(ellipse at center top, #1a5d3f 0%, #0a3525 60%, #05201a 100%);
    background-attachment: fixed;
    color: #f5f1e3;
}
body.tema-casino .topbar {
    background: linear-gradient(180deg, rgba(8, 30, 22, 0.96), rgba(5, 20, 14, 0.92));
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
body.tema-casino .topbar__logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #d4af37;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Cabecera de la sala: nombre como letrero dorado */
body.tema-casino .sala-cabecera h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    color: #f0c84e;
    font-size: 2.3rem;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 14px rgba(240, 200, 78, 0.25);
}
body.tema-casino .codigo-sala { color: rgba(245, 241, 227, 0.75); }
body.tema-casino .codigo-sala__valor {
    background: linear-gradient(135deg, #d4af37, #b8932d);
    color: #1a1100;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    letter-spacing: 0.18em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.2);
    font-weight: 700;
}
body.tema-casino .btn-copiar { color: #d4af37; }

/* Bloques: cards mas oscuros con borde dorado tenue */
body.tema-casino .bloque,
body.tema-casino .chat-sala {
    background: linear-gradient(160deg, rgba(13, 50, 36, 0.92), rgba(5, 25, 18, 0.96));
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212, 175, 55, 0.08);
}
body.tema-casino .bloque h2,
body.tema-casino .chat-sala h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: #d4af37;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Bloque destacado (partidas pendientes): rojo profundo con borde dorado */
body.tema-casino .bloque--destacado {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.45), rgba(40, 25, 10, 0.85));
    border: 1px solid #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2), 0 6px 18px rgba(0,0,0,0.5);
}

/* Cards de juego: como cartas de baraja levantandose al hover */
body.tema-casino .rejilla-juegos {
    perspective: 800px;
}
body.tema-casino .card-juego {
    background: linear-gradient(180deg, #fdfaf0 0%, #ebe0c6 100%);
    border: 2px solid #d4af37;
    color: #1a1100;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.tema-casino .card-juego:hover:not(:disabled) {
    transform: translateY(-8px) rotate(-2deg);
    box-shadow: 0 14px 24px rgba(0,0,0,0.6), 0 0 16px rgba(240, 200, 78, 0.25);
}
body.tema-casino .card-juego:nth-child(even):hover:not(:disabled) {
    transform: translateY(-8px) rotate(2deg);
}
body.tema-casino .card-juego__nombre { color: #1a1100; font-weight: 700; }
body.tema-casino .card-juego small { color: #6b5a2f; }
body.tema-casino .card-juego:disabled {
    background: linear-gradient(180deg, #2a3a2a 0%, #1a2a1a 100%);
    color: rgba(245, 241, 227, 0.45);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: none;
    opacity: 0.7;
}

/* Lista de jugadores: asientos en la mesa */
body.tema-casino .lista-jugadores li {
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
    padding: 0.65rem 0;
}
body.tema-casino .lista-jugadores li:last-child { border-bottom: none; }
body.tema-casino .lista-jugadores .punto { background: #555; }
body.tema-casino .lista-jugadores li.conectado .punto {
    background: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.7);
}
body.tema-casino .badge-admin {
    background: linear-gradient(135deg, #d4af37, #b8932d);
    color: #1a1100;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
body.tema-casino .badge-yo {
    background: linear-gradient(135deg, #4ea1ff, #2980b9);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Records: tabla de honor */
body.tema-casino .tabla-records thead th {
    color: #d4af37;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 0.05em;
}
body.tema-casino .tabla-records td { border-bottom-color: rgba(212, 175, 55, 0.12); }
body.tema-casino .tabla-records tbody tr:first-child td { color: #f0c84e; font-weight: 700; }
body.tema-casino .tabla-records tr.fila-yo { background: rgba(212, 175, 55, 0.1); }
body.tema-casino .tab { color: rgba(245, 241, 227, 0.7); }
body.tema-casino .tab--activo { color: #d4af37; border-bottom-color: #d4af37; }

/* Alerta de clave admin: cofre del tesoro */
body.tema-casino .alerta--importante {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.35), rgba(212, 175, 55, 0.18));
    border: 1px solid #d4af37;
    color: #f5f1e3;
}
body.tema-casino .alerta--importante .clave-admin {
    background: #1a1100;
    color: #f0c84e;
    border: 1px solid #d4af37;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* Botones */
body.tema-casino .btn--peligro {
    background: linear-gradient(135deg, #8b1a1a, #6b0d0d);
    color: #f5f1e3;
    border-color: #d4af37;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
body.tema-casino .btn--peligro:hover { background: linear-gradient(135deg, #a52a2a, #7a1414); }
body.tema-casino .btn--primario {
    background: linear-gradient(135deg, #d4af37, #b8932d);
    color: #1a1100;
    border-color: #f0c84e;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
    font-weight: 700;
}
body.tema-casino .btn--primario:hover { background: linear-gradient(135deg, #e7c54b, #c9a233); }
body.tema-casino .btn--secundario {
    background: linear-gradient(135deg, #2c4a3a, #1a3528);
    color: #f5f1e3;
    border: 1px solid rgba(212, 175, 55, 0.4);
}
body.tema-casino .btn--secundario:hover { background: linear-gradient(135deg, #3a6049, #284535); }

/* Chat: tonos mas calidos */
body.tema-casino .chat-mensajes {
    background: rgba(5, 20, 14, 0.7);
    border-color: rgba(212, 175, 55, 0.25);
}
body.tema-casino .chat-msg { background: rgba(212, 175, 55, 0.07); }
body.tema-casino .chat-msg--mio {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(184, 147, 45, 0.18));
    border: 1px solid rgba(212, 175, 55, 0.5);
}
body.tema-casino .chat-msg__cabeza strong { color: #d4af37; }
body.tema-casino .chat-msg--mio .chat-msg__cabeza strong { color: #f0c84e; }
body.tema-casino .chat-form input {
    background: rgba(5, 20, 14, 0.7);
    border-color: rgba(212, 175, 55, 0.3);
    color: #f5f1e3;
}
body.tema-casino .chat-form input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
body.tema-casino .chat-form button {
    background: linear-gradient(135deg, #d4af37, #b8932d);
    color: #1a1100;
}

body.tema-casino .piepagina { color: rgba(245, 241, 227, 0.4); }

/* ===== Home en tema casino ===== */
body.tema-casino .hero__titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    color: #f0c84e;
    font-size: 2.6rem;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 18px rgba(240, 200, 78, 0.2);
}
body.tema-casino .hero__sub {
    color: rgba(245, 241, 227, 0.85);
    font-size: 1.05rem;
}
body.tema-casino .bloque-juegos {
    background: linear-gradient(160deg, rgba(13, 50, 36, 0.92), rgba(5, 25, 18, 0.96));
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212, 175, 55, 0.08);
}
body.tema-casino .bloque-juegos h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: #d4af37;
    font-weight: 700;
}
body.tema-casino .lista-juegos li {
    border-bottom-color: rgba(212, 175, 55, 0.15);
    color: #f5f1e3;
}
body.tema-casino .lista-juegos li.proximamente {
    color: rgba(245, 241, 227, 0.4);
}

/* "Mis salas" en home tambien */
body.tema-casino .mis-salas h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: #d4af37;
}
body.tema-casino .mis-salas__sub { color: rgba(245, 241, 227, 0.7); }
body.tema-casino .mi-sala {
    background: linear-gradient(160deg, rgba(13, 50, 36, 0.92), rgba(5, 25, 18, 0.96));
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #f5f1e3;
}
body.tema-casino .mi-sala:hover {
    border-color: #d4af37;
    background: linear-gradient(160deg, rgba(20, 65, 45, 0.95), rgba(10, 35, 25, 0.98));
}
body.tema-casino .mi-sala__nombre { color: #f5f1e3; }
body.tema-casino .mi-sala__meta { color: rgba(245, 241, 227, 0.7); }
body.tema-casino .mi-sala__codigo {
    background: linear-gradient(135deg, #d4af37, #b8932d);
    color: #1a1100;
    font-weight: 700;
}
body.tema-casino .mi-sala__cta { color: #d4af37; }

/* ===== Crear/Entrar en tema casino ===== */
body.tema-casino .tarjeta {
    background: linear-gradient(160deg, rgba(13, 50, 36, 0.92), rgba(5, 25, 18, 0.96));
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(212, 175, 55, 0.1);
    color: #f5f1e3;
}
body.tema-casino .tarjeta h1 {
    font-family: 'Playfair Display', Georgia, serif;
    color: #f0c84e;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
body.tema-casino .texto-suave { color: rgba(245, 241, 227, 0.7); }
body.tema-casino .campo__etiqueta { color: rgba(245, 241, 227, 0.85); }
body.tema-casino .campo input[type="text"],
body.tema-casino .campo input[type="password"] {
    background: rgba(5, 20, 14, 0.7);
    border-color: rgba(212, 175, 55, 0.35);
    color: #f5f1e3;
}
body.tema-casino .campo input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}
body.tema-casino .campo-opcional summary {
    color: #d4af37;
}
body.tema-casino .alerta--error {
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.35), rgba(60, 10, 10, 0.7));
    border-color: #8b1a1a;
    color: #fcd5cb;
}

/* ===== Tablet y escritorio ===== */
@media (min-width: 720px) {
    .hero__acciones { flex-direction: row; justify-content: center; }
    .sala-cabecera { flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .grid-lobby { display: grid; grid-template-columns: 1fr 1fr; }
    .bloque:nth-child(3) { grid-column: 1 / -1; }
}