/* lobby.css - Estilos de Menú, Configuración y UI General - VERSIÓN CORREGIDA */

/* --- ESTILO DE SCROLLBAR PERSONALIZADO (Para que no se vea gris fea) --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f0f0f; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d35400; }

/* ESTILOS VISUALES - GENERALES */
body { 
    margin: 0; 
   font-family: 'Chakra Petch', sans-serif;
    background-color: #111; 
    
    /* --- AJUSTES PARA PANTALLA MÓVIL (VIEWPORT) --- */
    height: 100dvh;   
    width: 100vw;     
    position: fixed;  
    top: 0;
    left: 0;
    overflow: hidden; /* Bloqueo global (el scroll se maneja por contenedor) */
    
    user-select: none; 
    -webkit-user-select: none;
    touch-action: none; 

    display: flex; 
    flex-direction: column; 
    color: white; 
}

/* Pantallas Generales (Login, Menu, etc) */
.screen { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100dvh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    background: #0f0f0f; 
    z-index: 2000; 
    transition: opacity 0.5s; 
    overflow: hidden;
}

.hidden { display: none !important; }
h1 { font-size: 64px; color: white; text-shadow: 0 0 15px #e67e22; margin-bottom: 40px; font-style: italic; letter-spacing: 2px; }
h1, h2, h3 { 
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700; /* Negrita fuerte */
    text-transform: uppercase; /* Siempre mayúsculas para títulos */
    letter-spacing: 1px; /* Un poco de aire entre letras */
    
    /* Mantenemos tus colores y sombras existentes */
    color: white; 
    /* ... resto de tu código h1 ... */
}
button, input, select, textarea, .menu-btn {
    font-family: 'Chakra Petch', sans-serif !important;
}
/* --- BOTONES Y FORMULARIOS --- */
.menu-btn {
    width: 300px;          
    height: 60px; /* Ligeramente más compacto */     
    padding: 10px;         
    margin: 8px; /* Menos margen para agrupar mejor */
    background: #ef7829;
    color: white;
    border: 2px solid #ffa85c;;
    font-size: 20px;
    font-family: monospace;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s;
    display: flex;         
    justify-content: center; 
    align-items: center;     
    gap: 15px;             
}

.menu-btn:hover { transform: scale(1.05); background: #e67e22; box-shadow: 0 0 20px #e67e22; }
.menu-btn:disabled { background: #555 !important; border-color: #777 !important; color: #999 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }

.config-row { margin: 10px 0; display: flex; justify-content: space-between; width: 400px; align-items: center; }
label { font-size: 20px; color: #aaa; }
select, input[type="number"], input[type="text"] { padding: 5px; font-size: 18px; border-radius: 5px; border: none; width: 150px; text-align: center; background: #222; color: white; border: 1px solid #444; }
input[type="checkbox"] { width: 25px; height: 25px; cursor: pointer; accent-color: #e67e22; }
.locked-input { pointer-events: none; opacity: 0.6; filter: grayscale(1); }

/* --- FONDOS ANIMADOS --- */
#screen-menu { background-color: #050505; background-image: linear-gradient(to bottom, rgba(10, 10, 10, 1) 0%, rgba(138, 43, 226, 0.2) 60%, rgba(0, 255, 255, 0.2) 100%), repeating-linear-gradient(90deg, transparent 0, transparent 48px, rgba(0, 255, 255, 0.1) 49px, rgba(0, 255, 255, 0.1) 50px), repeating-linear-gradient(0deg, transparent 0, transparent 48px, rgba(255, 0, 255, 0.1) 49px, rgba(255, 0, 255, 0.1) 50px); background-size: 100% 100%, 100px 100px, 100px 100px; animation: cyber-move 4s linear infinite; }
@keyframes cyber-move { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 0 0, -100px 0, 0 100px; } }
#screen-menu::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 1; }

#screen-config:not(.hidden), #screen-lobby:not(.hidden) { 
    background: radial-gradient(circle at top right, #2b0a3d 0%, #000000 100%) !important; 
    position: fixed; 
    top: 0; 
    left: 0;
    
    display: flex !important;
    flex-direction: column !important;

    /* Alineación superior */
    justify-content: flex-start !important; 

    align-items: center !important;
    gap: 10px !important; 
    
    width: 100%; 
    height: 100dvh !important; 
    
  
    padding: 5px 0 10px 0 !important; 

    box-sizing: border-box;
    overflow-y: auto !important; 
}
/* Estilos Inputs en Lobby */
#screen-config select, #screen-config input[type="number"], #screen-lobby select, #screen-lobby input[type="number"], #screen-lobby input[type="text"] { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; backdrop-filter: blur(5px); box-shadow: 0 0 10px rgba(138, 43, 226, 0.2); transition: all 0.3s; }
select:hover, input:hover { border-color: #d35400 !important; box-shadow: 0 0 15px rgba(211, 84, 0, 0.4); }
select option { background-color: #1a0525; color: #ffffff; padding: 10px; }

#lobby-list {
    width: 90%;
    max-width: 400px;
    
    /* --- MAGIA ELÁSTICA --- */
    /* Le decimos: "Ocupa el espacio que sobre, pero no empujes al botón fuera" */
    flex: 1;                 
    min-height: 100px;       /* Mínimo decente */
    max-height: 40vh;        /* Máximo 40% de la pantalla (evita que crezca infinito) */
    
    overflow-y: auto; 
    margin: 0; 
    
    background: rgba(0,0,0,0.3); 
    border: 1px solid #444; 
    border-radius: 5px;
}
.lobby-item { padding: 10px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; cursor: pointer; transition: background 0.2s; align-items: center; }
.lobby-item:hover { background: rgba(255,255,255,0.1); }
.lobby-item.my-room { border-left: 4px solid #00e676; background: rgba(0, 230, 118, 0.1); }
.lobby-btn-join { background: #d35400; border: none; color: white; padding: 5px 10px; border-radius: 3px; cursor: pointer; }
.lobby-btn-join:hover { background: #e67e22; }
.lobby-my-tag { color: #00e676; font-weight: bold; font-size: 12px; text-transform: uppercase; }

/* Paneles de estado (Dinero, Ranking) */
#jc-panel, #ranked-profile-header {
    width: 90%;
    max-width: 400px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 0;
}
#jc-panel div[style*="display: flex"] { flex-wrap: wrap; }

/* Otros componentes internos */
#lobby-settings { border: 1px solid #444; padding: 10px; border-radius: 5px; background: rgba(0,0,0,0.3); margin-bottom: 15px; width: 90%; max-width: 400px; box-sizing: border-box;}
.lobby-title-sec { color: #8e44ad; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; font-size: 12px; }
.player-row { display: flex; justify-content: space-between; align-items: center; padding: 5px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.kick-btn { background: transparent; border: 1px solid #c0392b; color: #c0392b; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-weight: bold; display: flex; justify-content: center; align-items: center; transition: all 0.2s; }
.kick-btn:hover { background: #c0392b; color: white; transform: scale(1.1); }

/* Salas de Dinero/Rank */
.money-room { border-left: 4px solid #f1c40f !important; background: rgba(241, 196, 15, 0.05); }
.money-tag { background: #f1c40f; color: black; font-weight: bold; padding: 2px 6px; border-radius: 4px; font-size: 12px; margin-right: 5px; }
.prize-tag { color: #00e676; font-weight: bold; margin-left: 10px; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #00e676; margin-right: 10px; }
.ranked-badge { background: #f1c40f; color: black; font-size: 10px; padding: 2px 5px; border-radius: 4px; font-weight: bold; text-transform: uppercase; margin-left: 5px; }
.ranked-locked { pointer-events: none; opacity: 0.8; background: #111 !important; color: #00e676 !important; border-color: #00e676 !important; font-weight: bold; box-shadow: 0 0 10px rgba(0, 230, 118, 0.2); }
.rank-badge-lg { font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; padding: 10px 20px; background: rgba(0,0,0,0.5); border-radius: 8px; display: inline-block; border: 1px solid #444; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.avg-elo-tag { font-size: 11px; background: #333; padding: 2px 6px; border-radius: 4px; color: #f1c40f; border: 1px solid #555; margin-left: 5px; }

/* Estilos de rangos individuales */
.rank-madera { color: #8d6e63; border-color: #5d4037; text-shadow: 0 0 5px #3e2723; }
.rank-bronce { color: #cd7f32; border-color: #a0522d; text-shadow: 0 0 5px #8b4513; }
.rank-plata  { color: #e0e0e0; border-color: #7f8c8d; text-shadow: 0 0 5px #bdc3c7; }
.rank-oro    { color: #f1c40f; border-color: #b7950b; text-shadow: 0 0 10px #f39c12; }
.rank-platino{ color: #00cec9; border-color: #00b894; text-shadow: 0 0 10px #55efc4; }
.rank-esmeralda { color: #2ecc71; border-color: #27ae60; text-shadow: 0 0 10px #2ecc71; }
.rank-diamante  { color: #74b9ff; border-color: #0984e3; text-shadow: 0 0 15px #0984e3; background: rgba(9, 132, 227, 0.1); }
.rank-challenger{ color: #ff7675; border-color: #d63031; text-shadow: 0 0 15px #d63031; animation: pulseRank 2s infinite; }
.rank-maestro   { color: #a29bfe; border-color: #6c5ce7; text-shadow: 0 0 20px #6c5ce7; animation: rainbowRank 3s infinite; }
@keyframes pulseRank { 50% { text-shadow: 0 0 25px #d63031; transform: scale(1.05); } }
@keyframes rainbowRank { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

/* Copy Code */
.code-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; position: relative; margin-bottom: 20px; }
.code-wrapper h1 { margin: 0 !important; line-height: 1; }
.btn-copy { background: transparent; border: 2px solid #555; color: white; font-size: 24px; cursor: pointer; border-radius: 8px; padding: 5px 10px; transition: all 0.2s; }
.btn-copy:hover { background: rgba(255, 255, 255, 0.1); border-color: #f1c40f; transform: scale(1.1); }
.btn-copy:active { transform: scale(0.95); }
.copy-msg { position: absolute; top: -30px; right: -10px; background: #00e676; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; transform: translateY(10px); }
.copy-msg.visible { opacity: 1; transform: translateY(0); }

/* Reglas */
.rules-container { background: rgba(0, 0, 0, 0.6); border: 1px solid #444; padding: 20px; border-radius: 10px; width: 90%; max-width: 600px; box-shadow: 0 0 20px rgba(0, 230, 118, 0.1); }
.rule-section { margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.rule-section:last-child { border-bottom: none; }
.rule-section h3 { color: #f39c12; margin-top: 0; text-transform: uppercase; font-size: 18px; border-left: 3px solid #f39c12; padding-left: 10px; }
.rule-list { list-style: none; padding: 0; }
.rule-list li { margin: 8px 0; font-size: 16px; color: #ddd; }
.rule-list li strong { color: #00e676; }
.warning { color: #e74c3c; font-style: italic; background: rgba(231, 76, 60, 0.1); padding: 5px; border-radius: 4px; }
#screen-rules::-webkit-scrollbar { width: 10px; }
#screen-rules::-webkit-scrollbar-track { background: #111; }
#screen-rules::-webkit-scrollbar-thumb { background: #444; border-radius: 5px; }
#screen-rules::-webkit-scrollbar-thumb:hover { background: #00e676; }


/* ----------------------------------- AJUSTES MÓVILES (CRÍTICO) ----------------------------------- */
@media screen and (max-width: 900px) {
    /* Contenedor Principal: Alineación segura arriba */
    #screen-lobby {
        justify-content: flex-start !important; 
        padding-top: 20px !important; /* Menos aire arriba */
        padding-bottom: 20px !important; 
        overflow-y: auto !important; /* Scroll activado si no entra */
        height: auto !important; 
        min-height: 100dvh; 
        gap: 10px !important; /* Menos espacio entre elementos */
    }

    /* Títulos */
    #screen-lobby h2 {
        font-size: 24px !important; 
        text-align: center;
        width: 100%;
        margin: 5px 0 10px 0;
        line-height: 1.1;
    }
    #screen-lobby h2 span[style*="font-size:48px"] { font-size: 28px !important; }
    
    /* Anchos fluidos */
    .config-row, 
    #lobby-settings, 
    .rules-container,
    #screen-register input,
    #jc-panel,
    #ranked-profile-header {
        width: 95% !important;
        max-width: 95% !important;     
    }

    /* Lista de Salas (Base Móvil) */
    #lobby-list {
        height: 220px !important; /* Altura generosa para Pro Max */
        width: 95% !important;
        margin-bottom: 10px;
        flex-shrink: 0; /* Evita que desaparezca */
    }

    /* Botones y Inputs */
    .menu-btn {
        width: 90% !important;  
        height: 50px !important; 
        font-size: 16px !important;
        margin: 8px auto; 
    }
    select, input[type="text"], input[type="number"] { width: 100% !important; }
    
    /* Botón Volver */
    #screen-lobby .menu-btn:last-of-type {
        margin-bottom: 30px !important; /* Espacio para el dedo */
    }
}

/* 2. NIVEL COMPACTO (ESPECÍFICO PARA IPHONE SE Y PANTALLAS CORTAS) */
/* Se activa si la altura es menor a 750px */
@media screen and (max-height: 750px) {
    
    #screen-lobby {
        padding-top: 10px !important;
        gap: 5px !important; /* Apretamos todo un poco más */
    }

    /* Achicamos la lista para que entre en el SE */
    #lobby-list {
        height: 140px !important; /* Altura reducida para pantallas cortas */
    }

    /* Botones más compactos */
    .menu-btn {
        height: 40px !important;
        font-size: 14px !important;
        margin: 8px auto;
    }

    /* Título más chico */
    #screen-lobby h2 {
        font-size: 20px !important;
        margin-bottom: 5px;
    }
    
    /* Emoji del título más chico */
    #screen-lobby h2 span[style*="font-size:48px"] { font-size: 24px !important; }
    
    /* Panel de Dinero más compacto */
    #jc-panel {
        padding: 5px !important;
        margin-bottom: 5px !important;
    }
    #user-jc-display { font-size: 24px !important; }
}

/* ESTILOS DE MODALES SUPERPUESTOS */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex; justify-content: center; align-items: center;
}

.modal-content {
    background: #1a0525;
    border: 2px solid #8e44ad;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 0 30px rgba(142, 68, 173, 0.3);
}

/* GRILLA DE PREMIOS */
.prizes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 10px;
}

.prize-card {
    background: linear-gradient(135deg, #2c3e50, #000);
    border: 1px solid #3498db;
    border-radius: 8px;
    padding: 15px 5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prize-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #3498db;
    background: #1f3a52;
    border-color: #00e676;
}

.prize-cash { 
    font-size: 18px;       /* Grande para el premio en plata */
    color: #00e676; 
    font-weight: bold; 
    margin-bottom: 5px;
}

.prize-coin { 
    font-size: 14px;       /* Pequeño para el costo en JC */
    color: #f1c40f; 
    font-weight: bold; 
}

/* --- EXCEPCIÓN PARA COMPRA (TIENDA) --- */
/* En la tienda usamos la clase .buy-card para invertir los tamaños
   porque ahí lo importante es el PRODUCTO (JC), no el precio */

.buy-card .prize-coin {
    font-size: 18px !important; /* JC vuelve a ser Grande en la tienda */
    margin-bottom: 5px;
    color: white !important;    /* Opcional: para que resalte más en fondo verde */
}

.buy-card .prize-cash {
    font-size: 14px !important; /* Precio vuelve a ser Pequeño en la tienda */
    color: #2ecc71 !important;
}

/* Ajuste para móvil: Tuerca */
@media screen and (max-width: 900px) {
    #btn-settings-lobby { top: 15px; right: 15px; }
}
.buy-card {
    border: 1px solid #27ae60 !important; /* Borde verde */
    background: linear-gradient(135deg, #145a32, #000) !important;
}

.buy-card:hover {
    box-shadow: 0 0 15px #2ecc71 !important; /* Brillo verde al pasar mouse */
    background: #1e8449 !important;
    transform: scale(1.05);
}

.buy-card .prize-coin {
    color: #fff !important;      /* Texto JC en blanco */
    text-shadow: 0 0 5px #f1c40f;
}

.buy-card .prize-cash {
    color: #2ecc71 !important;   /* Precio en verde */
    font-size: 16px;
}

#user-top-bar {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 15px;
    border-radius: 30px;
    border: 1px solid #444;
    transition: all 0.3s;
}

#user-top-bar:hover {
    border-color: #00e676;
    background: rgba(0, 0, 0, 0.8);
}

#user-top-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #00e676;
    object-fit: cover;
}

.user-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.2;
}

#user-top-name {
    font-size: 14px;
    color: white;
    font-weight: bold;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-link {
    font-size: 11px;
    color: #aaa;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.2s;
}

.logout-link:hover {
    color: #e74c3c;
    text-decoration: underline;
}

/* Ajuste móvil para que no moleste */
@media screen and (max-width: 900px) {
    #user-top-bar {
        top: 15px;
        right: 15px;
        padding: 5px 10px;
    }
    #user-top-name { display: none; } /* En móvil solo mostramos foto y cerrar */
}

#btn-leaderboard {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-size: 50px;
    cursor: pointer;
    filter: drop-shadow(0 0 10px #f1c40f);
    transition: transform 0.2s;
    z-index: 100;
    animation: floatTrophy 3s ease-in-out infinite;
}

#btn-leaderboard:hover {
    transform: scale(1.2) rotate(-10deg);
    filter: drop-shadow(0 0 20px #f1c40f);
}

@keyframes floatTrophy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Filas de la Tabla */
.lb-row {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.lb-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lb-pos { width: 30px; font-weight: bold; color: #aaa; }
.lb-flag {
    /* Forzamos la fuente que sí tiene banderas */
    font-family: 'Noto Color Emoji', 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
    
    font-size: 24px; /* Ajusta el tamaño */
    line-height: 1;  /* Evita que se desencuadre */
}
.lb-name { flex: 1; text-align: left; font-weight: bold; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;    margin-left: 4px;}
.lb-rank { width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Destacar al TOP 1, 2 y 3 */
.lb-row.top-1 { background: linear-gradient(90deg, rgba(241, 196, 15, 0.2), transparent); border-left: 3px solid #f1c40f; }
.lb-row.top-1 .lb-pos { color: #f1c40f; font-size: 1.2em; }

.lb-row.top-2 { border-left: 3px solid #bdc3c7; }
.lb-row.top-3 { border-left: 3px solid #cd7f32; }

/* Destacarte a ti mismo */
.lb-row.is-me {
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid #00e676;
}

#btn-chat-toggle {
    position: fixed; /* Asegúrate que sea fixed para que flote sobre todo */
    bottom: 20px;    /* Un poco más abajo para alinear con los botones */
    
    /* CAMBIO CLAVE: */
    right: 20px;     /* A la derecha */
    left: auto;      /* Reseteamos el left por si acaso */
    
    font-size: 40px;
    cursor: pointer;
    filter: drop-shadow(0 0 5px #00e676);
    transition: transform 0.2s;
    z-index: 100;
    
    /* Animación suave de flotación (ya la tenías, la mantenemos) */
    animation: floatTrophy 4s ease-in-out infinite reverse;
}


#btn-chat-toggle:hover { transform: scale(1.1); filter: drop-shadow(0 0 10px #00e676); }

#lobby-chat-box {
    position: fixed;
    bottom: 90px;
    left: 20px;
    width: 300px;
    height: 350px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #00e676;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    z-index: 200;
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.2);
    overflow: hidden;
}

/* Ajuste Móvil */
@media screen and (max-width: 600px) {
    #lobby-chat-box { width: 90%; left: 5%; bottom: 80px; height: 300px; }
     #btn-chat-toggle {
        right: 20px; /* Asegura que en móvil también esté a la derecha */
        left: auto;
        bottom: 25px;
    }
}

#chat-header {
    background: #00e676;
    color: black;
    padding: 5px 10px;
    font-weight: bold;
    display: flex; justify-content: space-between;
    font-size: 14px;
}
#chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.chat-msg-row { font-size: 13px; color: #ddd; word-break: break-word; }
.chat-msg-row b { color: #f1c40f; margin-right: 5px; }

.chat-input-area {
    display: flex;
    border-top: 1px solid #333;
    padding: 5px;
    background: #111;
}
#chat-input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    padding: 5px;
    outline: none;
}
.chat-input-area button {
    background: #00e676;
    border: none;
    cursor: pointer;
    padding: 0 10px;
    font-weight: bold;
}

has-unread {
    /* Animación de alerta */
    animation: msgAlert 1s infinite !important; 
    position: fixed; /* Mantiene posición */
}

/* El punto rojo de notificación */
.has-unread::after {
    content: "!";
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    border: 2px solid #111;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 5px red;
}

/* Animación de "Salto/Vibración" */
@keyframes msgAlert {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.2) rotate(-10deg); }
    20% { transform: scale(1.2) rotate(10deg); }
    30% { transform: scale(1.2) rotate(-10deg); }
    40% { transform: scale(1); }
}
#btn-arena-info {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Misma posición que leaderboard, ya que se alternan */
    width: 70px; /* Más grande que el standard */
    height: 70px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid #f1c40f;
    color: #f1c40f;
    font-size: 35px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 150; /* Por encima de elementos base */
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: floatInfo 4s ease-in-out infinite;
}

#btn-arena-info:hover {
    transform: scale(1.1) rotate(10deg);
    background: #f1c40f;
    color: #000;
    box-shadow: 0 0 25px #f1c40f;
}

@keyframes floatInfo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Scroll para el texto legal */
.legal-text::-webkit-scrollbar { width: 6px; }
.legal-text::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
.legal-text::-webkit-scrollbar-thumb:hover { background: #f1c40f; }

/* Estilo para el details/summary */
details[open] summary { margin-bottom: 10px; border-bottom: 1px solid #555; padding-bottom: 5px; }
details summary::-webkit-details-marker { display:none; } /* Ocultar triángulo default */

/* Ajuste Móvil */
@media screen and (max-width: 900px) {
    #btn-arena-info {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
        font-size: 28px;
    }
}

#arena-actions {
    display: flex;
    gap: 10px;
    width: 90%;
    max-width: 400px;  
    margin-top: 10px;   
    
    /* ESTAS DOS LÍNEAS SON LA CLAVE DEL CENTRADO: */
    margin-left: auto !important;
    margin-right: auto !important;
    
    margin-bottom: 10px;  
    box-sizing: border-box;
    justify-content: center; /* Asegura centrado interno */
}
/* Estilo específico para estos botones para que llenen el espacio */
#arena-actions .menu-btn {
    flex: 1;              /* Ambos botones ocupan el 50% del espacio disponible */
    width: auto !important; /* Sobrescribimos el ancho fijo de .menu-btn */
    margin: 0 !important;   /* Quitamos márgenes externos */
    font-size: 16px;      /* Un poco más chicos que el botón gigante de "Crear Sala" */
    height: 45px;         /* Altura cómoda pero compacta */
    padding: 0;
}

/* Colores específicos para identificarlos rápido */
.action-btn-green {
    background: #27ae60 !important;
    border-color: #2ecc71 !important;
}
.action-btn-green:hover {
    box-shadow: 0 0 15px #2ecc71 !important;
}

.action-btn-blue {
    background: #2980b9 !important;
    border-color: #3498db !important;
}
.action-btn-blue:hover {
    box-shadow: 0 0 15px #3498db !important;
}

/* AJUSTE PARA EL PANEL DE DINERO (Para que quede pegadito arriba) */
#jc-panel {
    margin-bottom: 5px !important; /* Reducimos margen inferior para que los botones parezcan parte del grupo */
}

.match-found-anim {
    color: #00e676;             /* Verde base */
    font-size: 28px;            /* Un poco más grande */
    font-weight: 900;           /* Extra negrita */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    
    /* La magia: animación suave de 0.8 segundos infinita */
    animation: neon-beat 3s ease-in-out infinite alternate;
}

@keyframes neon-beat {
    from {
        /* Estado normal */
        text-shadow: 0 0 10px #00e676, 0 0 20px #00e676;
        transform: scale(1);
    }
    to {
        /* Estado "Excitado" (Brillo máximo + Zoom) */
        /* El último valor #fff crea el núcleo blanco que hace que parezca luz real */
        text-shadow: 0 0 20px #00e676, 0 0 30px #00e676, 0 0 50px #fff, 0 0 70px #00e676;
        transform: scale(1.1); 
    }
}

#main-footer {
    position: absolute;
    bottom: calc(15px + env(safe-area-inset-bottom));
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Para que se acomode en celulares pequeños */
    gap: 10px;       /* Espacio entre elementos */

    z-index: 10;
    padding-bottom: 5px;

}

/* --- FOOTER PRINCIPAL UNIFICADO --- */
#main-footer {
    display: none !important; /* <--- CAMBIO CLAVE */
    
    position: fixed; 
    bottom: calc(15px + env(safe-area-inset-bottom));
    left: 0; 
    width: 100%;
    z-index: 2100;
    transform: translateZ(0);
    will-change: transform;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    gap: 10px;       
    padding-bottom: 5px;

    pointer-events: auto; 
}

/* 2. REGLAS PARA MOSTRARLO (Solo si el hermano anterior está visible) */
/* IMPORTANTE: El footer debe estar DESPUÉS de estos elementos en el HTML */

/* Mostrar en el Menú Principal */
#screen-menu:not(.hidden) ~ #main-footer {
    display: flex !important;
}

/* Mostrar en el Lobby (Opcional: Si quieres verlo mientras esperas partida) */
/* Si no lo quieres en el lobby, borra este bloque */
#screen-lobby:not(.hidden) ~ #main-footer {
    display: flex !important;
}

/* Reactivamos los clicks solo en los links/textos del footer */
#main-footer a, #main-footer span {
    pointer-events: auto;
}

/* EFECTO HOVER EN LINKS */
#main-footer a:hover {
    color: #00e676;               /* Verde Jodete */
    text-shadow: 0 0 5px #00e676; /* Brillo */
    transform: scale(1.05);       /* Pequeño zoom */
    text-decoration: none;
}

/* SEPARADOR VERTICAL (|) */
#main-footer .separator {
    color: #00e676;
    font-weight: bold;
    font-size: 11px;
    
    /* Alineación para coincidir con los links */
    display: flex;
    align-items: center;
    height: 20px; 
}

/* AJUSTE RESPONSIVE (Móviles pequeños < 400px) */
@media (max-width: 400px) {
    #main-footer {
        flex-direction: column; /* Apilar verticalmente */
        gap: 5px;
        bottom: 5px;
    }
    #main-footer .separator {
        display: none; /* Ocultar las barras | si están apilados */
    }
}

/* MARGEN DE SEGURIDAD PARA EL ÚLTIMO BOTÓN DEL MENÚ */
/* (Para que el botón "Reglas" no se encime con el footer) */
.screen .menu-btn:last-of-type {
    margin-bottom: 60px !important; 
}

.btn-purple:hover { 
        box-shadow: 0 0 20px #8e44ad !important; 
        background: #9b59b6 !important; /* Un tono más claro al pasar el mouse */
    }

    /* Clasificatoria (Azul) */
    .btn-blue {
        border-color: #3498db; 
        background: #21618c;
    }
    .btn-blue:hover { 
        box-shadow: 0 0 20px #3498db !important; 
        background: #3498db !important;
        border-color: #5dade2 !important;
    }

    /* Arena (Dorado) */
    .btn-gold:hover { 
        box-shadow: 0 0 20px #f1c40f !important; 
        background: #bb9d26 !important; 
        color: black !important; /* Para que se lea mejor en el amarillo */
    }

    /* Reglas (Verde) */
    .btn-green:hover { 
        box-shadow: 0 0 20px #2ecc71 !important; 
        background: #2ecc71 !important; 
    }

    /* Clase base para texto informativo (no links) en el footer */
.footer-info-item {
    font-size: 11px;
    font-family: 'Chakra Petch', sans-serif;
    display: flex;
    align-items: center;
    gap: 4px; /* Espacio pequeño entre el texto y la URL */
    height: 20px; /* Misma altura forzada que los links para alineación vertical */
    color: rgba(255, 255, 255, 0.4); /* Opacidad baja para el texto "Torneos..." */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap; /* Evita que se rompa en dos líneas */
}

/* Clase para la parte destacada (la URL) */
.footer-highlight {
    color: rgba(255, 255, 255, 0.80); /* Más blanco/opaco */
    font-weight: 600;
    text-shadow: 0 0 5px rgba(0, 230, 118, 0.1); /* Sutil brillo verde opcional */
}

/* Agrupamos a, a:visited y a:active para que SIEMPRE se vea gris y chico */
#main-footer a,
#main-footer a:visited,
#main-footer a:active {
    color: rgba(255, 255, 255, 0.4) !important; /* Forzamos el gris */
    font-size: 11px !important;                 /* Forzamos el tamaño pequeño */
    font-family: 'Chakra Petch', sans-serif !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    
    text-decoration: none !important;
    
    display: flex;         
    align-items: center;   
    gap: 6px;              
    line-height: 1;        
    transition: all 0.2s;
    cursor: pointer;
}

/* Estado Hover (Cuando pasas el mouse) - Verde Jodete */
#main-footer a:hover {
    color: #00e676 !important;               
    text-shadow: 0 0 5px #00e676; 
    transform: scale(1.05);       
    text-decoration: none !important;
}

/* --- PROMO APP MÓVIL (REDDISEÑO NEÓN) --- */
.mobile-app-promo {
    display: none;
}

@media screen and (max-width: 900px) {
    .mobile-app-promo {
        display: flex; /* Se controla vía JS, pero esto es la base */
        justify-content: center;
        align-items: stretch; /* Estirar para que tengan la misma altura */
        gap: 15px;
        margin-bottom: 30px;
        width: 95%;
        max-width: 380px;
        animation: fadeIn 0.8s ease-out;
    }

    /* Botón Play Store - Ajuste de altura */
  .btn-store-link {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Truco para eliminar el espacio extra de la imagen oficial */
    height: 54px; 
    overflow: hidden; 
    border-radius: 6px;
}

/* Imagen Oficial Google (Español) */
.btn-store-link img {
    height: 80px; /* La imagen es más grande que el contenedor para recortar bordes vacíos */
    margin-top: -2px; /* Pequeño ajuste vertical */
    object-fit: contain;
    transition: transform 0.2s;
}
.btn-store-link:active img { transform: scale(0.95); }

/* --- BOTÓN PWA NEÓN (Igualamos altura visual) --- */
.btn-pwa-neon {
    display: none; /* Se activa por JS */
    flex: 1; 
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    height: 54px; /* ALTURA CLAVE: Igual que el contenedor de Google */
    padding: 0 10px;
    
    /* Estilos Cyberpunk */
    background: rgba(0, 0, 0, 0.6); 
    border: 2px solid #00e676; 
    color: #ffffff; 
    border-radius: 8px; 
    cursor: pointer;
    
    /* GLOW INTENSO */
    box-shadow: 
        0 0 5px rgba(0, 230, 118, 0.6),
        0 0 15px rgba(0, 230, 118, 0.3),
        inset 0 0 10px rgba(0, 230, 118, 0.1);
        
    transition: all 0.15s ease-in-out;
    position: relative;
}

.btn-pwa-neon:active {
    transform: scale(0.97);
    background: rgba(0, 230, 118, 0.2);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.8);
}

.pwa-text-container {
    display: flex;
    flex-direction: row; /* Texto y flecha en línea */
    align-items: center;
    gap: 5px;
}

.pwa-title {
    font-family: sans-serif;
    font-weight: 900;
    font-size: 11px; /* Ajustado para que entre bien */
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 230, 118, 1);
}

.pwa-icon-shortcut {
    color: #00e676;
    filter: drop-shadow(0 0 2px #00e676);
}


}