/* =========================================
   VARIAVEIS GLOBAIS (O "DNA" do seu Design)
   ========================================= */
   :root {
    /* Cores Neon e Temas */
    --neon-blue: #00f3ff;
    --neon-pink: #ff00c8;
    --neon-purple: #9d00ff;
    --neon-green: #00ff88;
    --neon-yellow: #ffdd00;
    --neon-red: #ff3b3b;

    /* Fundos */
    --bg-dark: #0f0f1a;       /* Fundo da página */
    --bg-card: #1a1a2e;       /* Fundo dos cartões/paineis */
    --bg-input: #252540;      /* Fundo de inputs */

    /* Textos */
    --text-primary: white;
    --text-secondary: white;
    
    /* Fontes */
    --font-main: 'Segoe UI', system-ui, sans-serif;
    --font-gamer: 'Rajdhani', sans-serif; /* Se importar a fonte */

    /* Bordas e Sombras */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-pill: 50px;
    --shadow-neon: 0 0 10px rgba(0, 243, 255, 0.3);
}

/* =========================================
   RESET E BASE
   ========================================= */
* { box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 50% 0%, #2a1a4a 0%, var(--bg-dark) 70%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-main);
    margin: 0;
    padding: 0; /* Padding removido para barra superior encostar */
}

a { text-decoration: none; color: inherit; }

/* =========================================
   BARRA SUPERIOR (HEADER)
   ========================================= */
.app-header {
    display: flex;
    justify-content: space-between;
    
    align-items: center;
    padding: 15px 0px;
    background: rgba(15, 15, 26, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-logo {
    font-family: var(--font-gamer);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(to right, var(--neon-blue), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.btn-config-header {
    color: var(--text-secondary);
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-config-header:hover {
    color: var(--neon-blue);
    background: rgba(0, 243, 255, 0.1);
    transform: rotate(90deg);
}

.material-icons-round { font-size: 28px; }

/* =========================================
   BOTÕES PADRÃO (Para usar em todas as páginas)
   ========================================= */
.btn-neon {
    background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: var(--font-gamer);
}

.btn-neon:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.5);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--neon-purple);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: bold;
}

.btn-secondary:hover {
    background: rgba(157, 0, 255, 0.1);
}

.local-online-rank{
    display:grid; 
    gap:15px; 
    grid-template-columns: 1fr 1fr;
}

.rank{
    grid-column: 1/-1;
}

/* =========================================
   INPUTS E FORMULÁRIOS (Para telas de cadastro)
   ========================================= */
.input-group {
    margin-bottom: 20px;
    text-align: left;
}

label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

input[type="text"], 
input[type="number"], 
select {
    width: 100%;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
}

/* =========================================
   CARDS (Estilo Global)
   ========================================= */
.card-panel {
    background: var(--bg-card);
    margin : 0px auto;
    margin-top: 20px;
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
    max-width: 600px;
    width: 100%;
}

/* =========================================
   MODO CLARO (LIGHT MODE)
   ========================================= */
   body.light-mode {
    /* Invertendo Fundos */
    --bg-dark: #f0f2f5;       /* Fundo claro */
    --bg-card: #ffffff;       /* Cartões brancos */
    --bg-input: #e2e8f0;      /* Inputs cinza claro */

    /* Invertendo Textos */
    --text-primary: #1a202c;  /* Texto quase preto */
    --text-secondary: #4a5568; /* Texto cinza escuro */

    /* Ajuste de Sombras para o Claro */
    --shadow-neon: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Ajuste de Neons para ficarem visíveis no branco */
    --neon-blue: #007bb5;     /* Azul mais escuro/sólido */
    --neon-purple: #6b2c91;
    --neon-pink: #d63384;
    --neon-green: #198754;
    --neon-yellow: #d69e00;
    --neon-red: #dc3545;
}

/* --- SETUP & LISTAS --- */
.section-title {
    color: var(--neon-yellow);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}

.checklist-area {
    background: var(--bg-input);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.checklist-area label {
    background: rgba(255,255,255,0.05);
    padding: 8px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.2s;
    color: var(--text-primary);
    border: 1px solid transparent;
}

.checklist-area label:hover {
    border-color: var(--neon-yellow);
    background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
}

.checklist-area input {
    margin-right: 8px;
    accent-color: var(--neon-yellow);
    width: 16px; height: 16px;
}

/* --- OUTROS ELEMENTOS --- */
.simple-list { list-style: none; padding: 0; }
.simple-list li {
    background: rgba(255,255,255,0.05);
    padding: 10px; margin-bottom: 5px; border-radius: 5px;
    display: flex; justify-content: space-between;
    border-left: 3px solid var(--neon-purple);
}

.icon-btn { background:none; border:none; cursor:pointer; color:var(--text-secondary); font-size:1.2rem; }
.btn-quit { width: 100%; background: transparent; border: none; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }

/* =========================================
   SCROLLBAR PARA SALAS ATIVAS
   ========================================= */
   #active-rooms-list {
    max-height: 100px; /* Altura máxima antes de rolar */
    overflow-y: auto;  /* Ativa a rolagem vertical */
    padding-right: 5px; /* Espaço para não colar o texto na barra */

    /* Propriedades para Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--neon-blue) rgba(0,0,0,0.2);
}

/* Estilização da barra (Chrome, Edge, Safari) */
#active-rooms-list::-webkit-scrollbar {
    width: 6px; /* Barra mais fina */
    display: block; /* Garante que apareça, pois outras listas estão ocultando */
}

#active-rooms-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2); /* Fundo sutil */
    border-radius: 3px;
}

#active-rooms-list::-webkit-scrollbar-thumb {
    background-color: var(--neon-blue, #5555ff); /* Cor do tema do painel */
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.3);
}

#active-rooms-list::-webkit-scrollbar-thumb:hover {
    background-color: #fff; /* Destaque ao passar o mouse */
}

/* =========================================
   NOVOS ÍCONES SVG NEON
   ========================================= */
   .svg-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    
    /* Desenho da Linha */
    fill: none;
    stroke: rgb(var(--card-neon)); /* Usa a cor definida no HTML */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    
    /* Efeitos */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 5px rgba(var(--card-neon), 0.4));
}

/* Efeito ao passar o mouse */
.game-card:hover .svg-icon {
    stroke-width: 2.5;
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 0 15px rgba(var(--card-neon), 0.8));
}

/* Garante que a cor do card seja respeitada se não estiver definida */
.game-card[style*="--neon-blue"] { --card-neon: 0, 243, 255; }
.game-card[style*="--neon-red"] { --card-neon: 255, 59, 59; }
.game-card[style*="--neon-purple"] { --card-neon: 157, 0, 255; }
.game-card[style*="--neon-pink"] { --card-neon: 255, 0, 200; }
.game-card[style*="--neon-yellow"] { --card-neon: 255, 221, 0; }
.game-card[style*="--neon-green"] { --card-neon: 0, 255, 136; }