:root { 
    --bg:#09090b; 
    --card:#121216; 
    --sidebar:#020617; 
    --accent:#22c55e; 
    --text-main:#fafafa; 
    --text-muted:#a1a1aa; 
    --border:#27272a; 
    --font:'Plus Jakarta Sans', sans-serif; 
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }

/* AJUSTE MOBILE: Impede que a tela balance para os lados */
body { background:var(--bg); color:var(--text-main); font-family:var(--font); min-height:100vh; width: 100%; overflow-x: hidden; }

.app-container { display:flex; height:100vh; width: 100%; position: relative; }

/* SIDEBAR: Transição de gaveta para o mobile */
.sidebar { 
    width:260px; 
    background:var(--sidebar); 
    border-right:1px solid var(--border); 
    padding:32px 24px; 
    overflow-y:auto; 
    flex-shrink: 0; 
    transition: transform 0.3s ease-in-out; 
    z-index: 1100;
}
.sidebar::-webkit-scrollbar { display: none; }

.brand { display:flex; align-items:center; gap:12px; margin-bottom:40px; font-size:18px; font-weight:900; color: var(--accent); }

.nav-btn { background:none; border:none; color:var(--text-muted); font-weight:800; cursor:pointer; padding:12px 15px; border-radius:10px; width: 100%; text-align: left; transition: 0.3s; margin-bottom: 5px; }
.nav-btn:hover { background:rgba(255,255,255,0.05); color:#fff; }
.nav-btn.active { background:var(--accent); color:#000; }
.nav-btn.pro { border:1px solid #fbbf24; color:#fbbf24; }

li[data-league] { cursor: pointer; padding: 10px; border-radius: 8px; transition: 0.3s; color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 10px; }
li[data-league]:hover { background: rgba(255,255,255,0.05); }
.active-green { background: rgba(34,197,94,0.1) !important; color: #fff !important; }

/* MAIN CONTENT: Ocupa 100% no mobile */
.main-content { flex:1; overflow-y:auto; padding:40px; width: 100%; position: relative; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; gap: 15px; flex-wrap: wrap; }

.green-meter { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); padding:10px 15px; border-radius:16px; display:flex; align-items:center; gap:10px; }

/* GRIDS RESPONSIVOS */
#games, .cards-container { display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:20px; width: 100%; }
.game-card { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:24px; text-align:center; transition:0.3s; width: 100%; }

.btn-analyze { width:100%; padding:14px; background:var(--accent); color:#000; border:none; border-radius:12px; font-weight:900; cursor:pointer; margin-top: 15px; font-size: 12px; }

/* ELEMENTOS MOBILE (SANDUICHE E OVERLAY) */
.menu-toggle { display: none; background: #18181b; border: 1px solid var(--border); color: #fff; padding: 10px; border-radius: 8px; cursor: pointer; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 1000; }

@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .sidebar { 
        position: fixed; left: 0; top: 0; bottom: 0; 
        transform: translateX(-100%); width: 280px; 
        box-shadow: 10px 0 30px #000; 
    }
    .sidebar.open { transform: translateX(0) !important; }
    .sidebar-overlay.active { display: block; }
    .main-content { padding: 20px 15px 100px 15px; }
    #games, .cards-container { grid-template-columns: 1fr; }
    .green-meter { order: 3; width: 100%; justify-content: center; }
}

/* MODAIS */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(15px); justify-content:center; align-items:center; z-index:2000; padding: 20px; }
.mvd-box { background:#121216; border:1px solid var(--border); padding:30px; border-radius:20px; width:100%; max-width:400px; text-align: center; }

.spin { animation: spin 2s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
/* ==========================================
   CSS NOVO E COMPLETO PARA O LOGIN (FIX)
   Colar no final do arquivo style.css
   ========================================== */

/* Container geral do modal de login (garante centralização) */
#authModal {
    display: none; /* Escondido por padrão, JS mostra */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9); /* Fundo preto transparente */
    backdrop-filter: blur(10px); /* Efeito blur de fundo */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
}

/* A caixa de login em si */
#authModal .mvd-box {
    background: #121216; /* Fundo cinza escuro da caixa */
    border: 1px solid #27272a; /* Borda sutil */
    padding: 40px 30px;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* Sombra */
}

/* O Título h2 (Arrumando tamanho e cor) */
#authTitle {
    color: #22c55e; /* Verde GreenLab */
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 30px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Estilo para os inputs genéricos do modal */
#authModal .mvd-input {
    display: block; /* OBRIGATÓRIO: Faz ficar um embaixo do outro */
    width: 100%; /* Largura total da caixa */
    background: rgba(255, 255, 255, 0.05); /* Fundo escuro sutil */
    border: 1px solid #27272a; /* Borda sutil */
    color: #fff; /* Texto branco dentro */
    padding: 15px 20px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 15px; /* Espaço para o input de baixo */
    box-sizing: border-box; /* Garante que padding não quebre largura */
    transition: 0.3s;
}

/* Efeito ao clicar no input */
#authModal .mvd-input:focus {
    outline: none;
    border-color: #22c55e;
    background: rgba(255, 255, 255, 0.08);
}

/* Botão de Entrar (Design profissional) */
#authBtn {
    width: 100%; /* Largura total */
    background: #22c55e; /* Verde GreenLab */
    color: #000; /* Texto preto */
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 10px;
    transition: opacity 0.3s;
}

#authBtn:hover {
    opacity: 0.9;
}

#authBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Links de Cadastro e Fechar */
#authModal button[id="authToggleBtn"] {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #fbbf24; /* Amarelo */
    font-weight: bold;
    font-size: 13px;
    margin-top: 25px;
    cursor: pointer;
    transition: 0.3s;
}

#authModal button[id="authToggleBtn"]:hover {
    color: #fff;
}

/* Botão Fechar simples no fundo */
#authModal button[onclick="closeAuth()"] {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #a1a1aa; /* Cinza mute */
    font-size: 12px;
    margin-top: 20px;
    cursor: pointer;
    transition: 0.3s;
}

#authModal button[onclick="closeAuth()"]:hover {
    color: #fff;
}