/* --- 1. VARIÁVEIS E BASE (Design System) --- */
:root {
    /* Paleta Lúdica e Premium */
    --primary: #2563eb;       /* Azul Royal */
    --primary-dark: #1e40af;
    --secondary: #f97316;     /* Laranja Vibrante */
    --accent: #8b5cf6;        /* Roxo */
    --success: #22c55e;       /* Verde */
    --error: #ef4444;         /* Vermelho */
    
    --bg-app: #f0f9ff;        /* Fundo azulzinho claro */
    --surface: #ffffff;
    --text-main: #1e293b;
    --text-light: #64748b;
    
    --radius: 20px;
    --shadow: 0 4px 0 rgba(0,0,0,0.15); /* Sombra "durinha" estilo game */
    --shadow-soft: 0 10px 25px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: 'Nunito', sans-serif; }

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 15px;
}

#app {
    width: 100%;
    max-width: 500px; /* Largura máxima ideal para mobile */
    padding-bottom: 20px;
    animation: fadeIn 0.4s ease-out;
}

h1, h2, h3 { font-family: 'Fredoka', sans-serif; margin: 0; }

/* --- 2. TELA INICIAL --- */
#tela-inicial { text-align: center; padding-top: 20px; }
.logo-area { margin-bottom: 30px; }
.logo-area h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; }
.logo-area p { color: var(--text-light); margin: 0; }

.card-nivel-usuario {
    background: var(--surface);
    padding: 15px 20px;
    border-radius: var(--radius);
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex; justify-content: space-between; align-items: center;
    border: 2px solid #e2e8f0;
}

/* BOTÕES ESTILO GAME (Menu) */
.btn-menu {
    border: none;
    width: 100%;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    color: white;
    box-shadow: var(--shadow);
    transition: transform 0.1s, box-shadow 0.1s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.btn-menu:active { transform: translateY(4px); box-shadow: none; }
.btn-menu span { display: block; font-size: 1.3rem; font-weight: 800; font-family: 'Fredoka', sans-serif; }
.btn-menu small { font-size: 0.9rem; opacity: 0.9; font-weight: 600; }

/* Cores dos Botões */
.azul { background: var(--primary); }
.azul:hover { background: var(--primary-dark); }
.verde { background: var(--success); }
.roxo { background: var(--accent); }

.btn-link {
    background: none; border: none; color: var(--text-light);
    text-decoration: underline; cursor: pointer; font-size: 0.9rem;
}

/* --- 3. TELAS INTERNAS (Estudo e Seleção) --- */
.oculto { display: none !important; }

.cabecalho-interno {
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 25px; padding-top: 10px;
}
.cabecalho-interno h2 { color: var(--text-main); font-size: 1.5rem; }

.btn-voltar {
    background: var(--surface);
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    padding: 8px 16px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Grid de Seleção de Números (1 a 10) */
.grid-botoes {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 por linha */
    gap: 15px;
}

/* --- 4. LAYOUT SPLIT VIEW (O Novo Design Híbrido) --- */
.layout-dividido {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px;
    position: relative;
}

.coluna-lista { flex: 1; transition: 0.3s; }
.coluna-quiz { 
    flex: 1; 
    display: none; /* Inicia oculta */
    animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito elástico */
}

/* --- ESTILOS DA LISTA (LADO ESQUERDO) --- */
.lista-tabuada ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}

.linha-tabuada {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px;
    background: white;
    border-radius: 16px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-light);
    border: 2px solid transparent;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Quando vira interrogação */
.resposta-oculta {
    color: #cbd5e1; /* Cinza claro */
    font-weight: 400;
}
.resultado-num {
    font-family: 'Fredoka', sans-serif;
    min-width: 30px; text-align: center;
}

/* O FOCO: Linha ativa na pergunta */
.linha-tabuada.focada {
    border-color: var(--primary);
    background-color: #eff6ff;
    color: var(--primary);
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
    z-index: 2;
}

/* Feedbacks na Lista */
.linha-tabuada.revelada-certa {
    background-color: #dcfce7; color: #166534; border-color: transparent;
}
.linha-tabuada.revelada-erro {
    background-color: #fee2e2; color: #991b1b;
}

/* --- ESTILOS DO CARD LATERAL (LADO DIREITO) --- */
.card-quiz-flutuante {
    background: white;
    padding: 25px 20px;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    text-align: center;
    position: sticky;
    top: 20px;
    border: 1px solid #f1f5f9;
}

.pergunta-destaque {
    font-size: 2.2rem;
    font-family: 'Fredoka', sans-serif;
    color: var(--text-main);
    margin-bottom: 25px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 18px;
    border: 2px dashed #cbd5e1;
}

.grid-opcoes-lateral {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-lateral {
    padding: 20px 10px; /* Mais alto */
    font-size: 1.5rem;
    font-weight: 900;     /* Fonte mais grossa */
    font-family: 'Fredoka', sans-serif;
    color: var(--text-main);
    background: white;
    
    /* A Mágica do 3D */
    border: 2px solid #cbd5e1;
    border-bottom-width: 6px; /* Borda grossa embaixo */
    border-radius: 16px;
    
    cursor: pointer;
    transition: all 0.1s;
    position: relative;
}
.btn-lateral:active {
    transform: translateY(4px); /* Desce */
    border-bottom-width: 2px;   /* Sombra diminui */
    background: #f1f5f9;
}
.btn-lateral:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.btn-lateral.certo { 
    background: #dcfce7; border-color: var(--success); color: #166534; 
    box-shadow: 0 4px 0 #86efac;
}
.btn-lateral.errado { 
    background: #fee2e2; border-color: var(--error); color: #991b1b; 
    box-shadow: 0 4px 0 #fca5a5;
}

/* --- 5. TELA DE JOGO (TELA CHEIA - Treino/Desafio) --- */
#header-jogo { margin-bottom: 20px; }
.topo-info {
    display: flex; justify-content: space-between; align-items: center;
    background: white; padding: 10px 20px; border-radius: 50px;
    box-shadow: var(--shadow-soft); margin-bottom: 15px;
}
#timer-display { font-weight: 800; font-family: monospace; font-size: 1.2rem; }
#placar-display { font-weight: 800; color: var(--secondary); font-size: 1.2rem; }

.barra-progresso {
    height: 8px; background: #e2e8f0; border-radius: 10px; overflow: hidden;
}
#barra-fill {
    height: 100%; background: var(--secondary); width: 100%; transition: width 1s linear;
}

.area-pergunta {
    background: white;
    padding: 40px 20px;
    border-radius: 24px;
    text-align: center;
    margin-bottom: 25px;
    font-size: 3.5rem;
    font-family: 'Fredoka', sans-serif;
    color: var(--text-main);
    box-shadow: var(--shadow);
    display: flex; justify-content: center; gap: 15px; align-items: center;
}
.sinal, .igual { color: var(--text-light); opacity: 0.5; }

/* Botões de Opção (Tela Cheia) - Reusa estilos */
.botao-opcao {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius);
    padding: 20px;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    box-shadow: 0 5px 0 #e2e8f0;
    cursor: pointer;
    width: 100%;
}
.botao-opcao:active { transform: translateY(4px); box-shadow: none; }
.botao-opcao.correto { background: #dcfce7; border-color: var(--success); color: #166534; box-shadow: 0 5px 0 #86efac; }
.botao-opcao.errado { background: #fee2e2; border-color: var(--error); color: #991b1b; box-shadow: 0 5px 0 #fca5a5; }

/* --- 6. TELA RESULTADO --- */
#tela-resultado { text-align: center; padding-top: 30px; }
.placar-final {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    width: 150px; height: 150px;
    border-radius: 50%; margin: 20px auto;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: white; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}
#pontos-final { font-size: 3rem; font-weight: 800; line-height: 1; font-family: 'Fredoka', sans-serif; }
#msg-motivacional { font-size: 1.4rem; font-weight: 700; margin-bottom: 30px; color: var(--text-main); }

/* --- 7. PUBLICIDADE --- */
.ad-banner-container {
    background: #e2e8f0;
    color: #94a3b8;
    height: 60px;
    display: flex; align-items: center; justify-content: center;
    margin: 20px 0; border-radius: 12px;
    font-size: 0.8rem; border: 1px dashed #cbd5e1;
}
.retangulo-medio { height: 250px; }

/* --- 8. RESPONSIVIDADE (MOBILE) --- */
@media (max-width: 700px) {
    .layout-dividido {
        flex-direction: column-reverse; /* No celular, Quiz fica EM CIMA da lista */
    }
    .coluna-quiz {
        width: 100%;
        position: sticky;
        top: 10px;
        z-index: 100;
    }
    .card-quiz-flutuante {
        padding: 15px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15); /* Sombra mais forte para destacar */
        border: 2px solid var(--primary); /* Borda para separar visualmente */
    }
    .pergunta-destaque {
        font-size: 2rem; margin-bottom: 15px; padding: 10px;
    }
    .btn-lateral { padding: 12px; font-size: 1.1rem; }
    
    /* Ajuste para a lista não ficar escondida */
    .coluna-lista { width: 100%; margin-top: 10px; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
/* --- TELA DE RESULTADO PREMIUM --- */
#tela-resultado { padding: 20px; animation: slideUp 0.5s ease-out; }

.resultado-header h2 { font-size: 1.8rem; color: var(--text-main); margin-bottom: 5px; }
.subtitulo-resumo { color: var(--text-light); font-weight: 600; margin: 0; }

/* Gráfico Circular (SVG) */
.placar-circular {
    width: 140px; margin: 25px auto;
}
.circular-chart { display: block; margin: 10px auto; max-width: 100%; max-height: 250px; }
.circle-bg { fill: none; stroke: #e2e8f0; stroke-width: 2.5; }
.circle { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 1s ease-out; }
.percentage { fill: var(--text-main); font-family: 'Fredoka', sans-serif; font-weight: bold; font-size: 0.5em; text-anchor: middle; }

/* Cores do Gráfico */
.stroke-verde { stroke: var(--success); }
.stroke-amarelo { stroke: #eab308; }
.stroke-vermelho { stroke: var(--error); }

/* Grid de Estatísticas */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 15px 5px;
    border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
}

.stat-valor { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.stat-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }

/* Cores dos Cards */
.stat-card.verde .stat-valor { color: var(--success); }
.stat-card.vermelho .stat-valor { color: var(--error); }
.stat-card.azul .stat-valor { color: var(--primary); }

#msg-motivacional {
    font-size: 1.3rem; margin-bottom: 25px; font-weight: 700; color: var(--text-main);
}

/* --- ESTILO PARA O BOTÃO NEUTRO (Menu Inicial) --- */
.btn-menu.neutro {
    background: white;
    color: var(--text-main); /* Cor escura */
    border: 2px solid #cbd5e1; /* Borda cinza */
    box-shadow: 0 4px 0 #cbd5e1; /* Sombra cinza */
}

.btn-menu.neutro:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-menu.neutro:active {
    box-shadow: 0 2px 0 #cbd5e1;
    transform: translateY(2px);
}
/* --- TELA DE SELEÇÃO PREMIUM (Botões de Nível) --- */

/* Ajuste do Grid */
#lista-numeros-tabuada {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 20px;
    padding: 10px;
}

/* O Botão de Nível */
.btn-nivel {
    background: white;
    border: 2px solid white; /* Borda invisível para alinhar */
    border-radius: 24px;
    height: 120px; /* Mais alto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06); /* Sombra suave premium */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efeito elástico */
    opacity: 0; /* Começa invisível para a animação */
    animation: popIn 0.5s forwards; /* Animação de entrada */
}

/* Efeito Hover (Mouse ou Toque) */
.btn-nivel:active, .btn-nivel:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.15);
    border-color: #e0e7ff;
}

/* O Número Grande e Colorido */
.num-grande {
    font-size: 3.5rem;
    font-family: 'Fredoka', sans-serif;
    font-weight: 800;
    line-height: 1;
    /* Gradiente no Texto */
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* O Texto "Tabuada" pequeno */
.label-pequeno {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 1.5px;
}

/* Decoração de Fundo (Bolinhas sutis) */
.btn-nivel::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    opacity: 0.05;
    border-radius: 50%;
}

/* Animação de Entrada */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.5) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}





/* --- 9. ANIMAÇÕES PREMIUM (Adicione ao final do style.css) --- */

/* Efeito de Treme-Treme (Erro) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.animacao-erro {
    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
    border-color: var(--error) !important;
}

/* Efeito de Pulso (Acerto) */
@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}


/* --- 9. EFEITOS PREMIUM (Adicione no final do style.css) --- */

/* Treme-Treme (Quando errar) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.animacao-erro {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    background-color: #fee2e2 !important;
    border-color: var(--error) !important;
}

/* Pulso Verde (Quando acertar) */
@keyframes pulse-green {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}



.btn-voltar {
    background: var(--surface);
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    padding: 8px 20px; /* Aumentei um pouquinho a área de toque */
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.05); /* Sombra 3D leve */
    
    /* --- CORREÇÃO DE CAMADA --- */
    position: relative; 
    z-index: 9999; /* Garante que fique acima de tudo */
}

.btn-voltar:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* --- ESTILO DO NOVO PAINEL GERAL DE TABUADAS --- */

/* O container que segura tudo */
#container-grade-completa {
    display: grid;
    /* Cria 2 colunas automáticas no celular */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    padding: 10px;
    padding-bottom: 80px; /* Espaço extra no final pra não cortar */
}

/* O cartão individual de cada tabuada */
.card-tabuada-resumo {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden; /* Pra borda redonda funcionar no cabeçalho */
    border: 2px solid transparent;
    transition: all 0.2s;
}

.card-tabuada-resumo:hover {
    border-color: var(--primary-light);
    transform: translateY(-3px);
}

/* Cabeçalho do cartão (Ex: "Tabuada do 5") */
.card-header-tab {
    background: var(--primary-light);
    color: var(--primary-dark);
    text-align: center;
    font-weight: 800;
    padding: 8px;
    font-size: 1.1rem;
}

/* O corpo onde ficam as continhas */
.card-body-tab {
    padding: 10px;
    font-family: 'Roboto Mono', monospace; /* Fonte monoespaçada fica melhor pra alinhar números */
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* As linhas individuais (ex: 5 x 1 = 5) */
.linha-resumo-item {
    display: flex;
    justify-content: space-between; /* Separa a conta do resultado */
    border-bottom: 1px dashed #eee;
    padding: 2px 0;
}
.linha-resumo-item strong {
    color: var(--primary);
}

/* O mini botão de praticar no final do cartão */
.btn-mini-praticar {
    width: 100%;
    border: none;
    background: var(--primary);
    color: white;
    padding: 8px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Fredoka', sans-serif;
}
.btn-mini-praticar:hover {
    background: var(--primary-dark);
}
/* --- NOVO LAYOUT: LOUSA INTERATIVA --- */

/* 1. O Card da Lousa (A "Quadro Negro" moderna) */
.card-lousa-container {
    background: #1e293b; /* Azul escuro quase preto (Lousa moderna) */
    color: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(30, 41, 59, 0.3);
    border: 4px solid #334155;
}

#titulo-lousa-dinamico {
    text-align: center;
    color: #38bdf8; /* Azul cyan neon */
    margin-bottom: 15px;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* O Grid de 2 Colunas */
.grid-lousa-bipartida {
    display: grid;
    
    /* Define 2 colunas com larguras iguais */
    grid-template-columns: 1fr 1fr;
    
    /* TRUQUE NOVO: Força ter exatamente 5 linhas */
    grid-template-rows: repeat(5, auto);
    
    /* TRUQUE NOVO: Preenche em COLUNA (de cima pra baixo) e não linha */
    grid-auto-flow: column;
    
    /* Espaçamentos */
    column-gap: 30px; /* Aumentei um pouco pra separar bem as contas */
    row-gap: 10px;
}

.item-lousa {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    display: flex;
    justify-content: space-between; /* Alinha números nas pontas */
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}

.destaque-resultado { color: #4ade80; font-weight: 800; }

/* 2. Seletores (Bolinhas) */
.area-seletores-container p {
    text-align: center; color: var(--text-light); font-weight: 700; margin-bottom: 10px;
}

.scroll-horizontal-seletores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Quebra linha se precisar */
    gap: 10px;
    margin-bottom: 30px;
}

.btn-seletor-redondo {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: white;
    color: var(--text-light);
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 0 #cbd5e1;
}

.btn-seletor-redondo:active { transform: translateY(4px); box-shadow: none; }

/* Estado Ativo (Selecionado) */
.btn-seletor-redondo.ativo {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 0 var(--primary-dark);
    transform: scale(1.1);
}

/* Botão Praticar Fixo Embaixo */
.area-acao-fixa {
    position: sticky;
    bottom: 20px;
}
/* 1. CABEÇALHO ALINHADO (Botão e Título na mesma linha) */
.header-tela {
    display: flex;               /* Ativa o modo linha */
    align-items: center;         /* Centraliza verticalmente */
    justify-content: flex-start; /* Alinha tudo à esquerda */
    gap: 15px;                   /* Espaço entre o botão e o título */
    margin-bottom: 15px;
    padding: 0 5px;
}

.header-tela h2 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin: 0;
    /* Truque para o título não quebrar linha em tela pequena */
    white-space: nowrap; 
}


/* 2. LOUSA COMPACTA (Contas centralizadas) */
.item-lousa {
    font-family: 'Fredoka', sans-serif; /* Fonte arredondada fica melhor aqui */
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    
    /* MUDANÇA AQUI: Centralizar e Juntar */
    display: flex;
    justify-content: center; /* Junta tudo no centro */
    align-items: center;
    gap: 8px;                /* Espacinho pequeno entre a conta e o resultado */
    
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}

/* Tiramos a cor diferente só do resultado para ficar uniforme,
   ou mantemos se você gostar. Vou manter sutil. */
.destaque-resultado { 
    color: #4ade80; /* Verde neon suave */
    font-weight: 700;
}

/* --- ESTILO DO QUIZ NA LOUSA (Visual Card Retomado) --- */

.card-pergunta-focada {
    background: white;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Sombra mais forte */
    text-align: center;
    border: 2px solid #e2e8f0;
    animation: slideUp 0.3s ease-out;
    
    /* Centraliza na tela se precisar */
    max-width: 400px;
    margin: 20px auto 0 auto; 
}

.pergunta-texto-grande {
    font-size: 2.8rem; /* Aumentei a fonte */
    font-family: 'Fredoka', sans-serif;
    color: var(--text-main);
    margin-bottom: 25px;
    
    /* O visual de "Caixa Tracejada" do antigo */
    background: #f8fafc;
    border-radius: 18px;
    padding: 15px;
    border: 3px dashed #cbd5e1;
}

/* Feedback de Texto (Muito Bem!) */
.feedback-texto {
    min-height: 30px; /* Garante espaço fixo pra não pular a tela */
    margin-top: 20px; 
    font-weight: 800;
    font-size: 1.2rem;
    font-family: 'Nunito', sans-serif;
    transition: all 0.3s;
}

/* DESTAQUE NA LOUSA (Linha Ativa) */
.item-lousa.ativa-no-quiz {
    background: rgba(37, 99, 235, 0.3); /* Azul mais visível */
    border: 2px solid #60a5fa;
    border-radius: 8px;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
    z-index: 10;
    padding: 5px 10px; /* Ajuste para o texto não colar na borda */
}
/* --- AJUSTE DE LAYOUT (Preencher a tela toda) --- */
#tela-estudo {
    display: flex;
    flex-direction: column;
    min-height: 85vh; /* Força a tela a ter altura mínima */
    justify-content: space-between; /* Distribui os itens (Topo, Meio, Fim) */
}

/* --- O SUPER BOTÃO VERDE --- */
#btn-acao-praticar-dinamico {
    flex-direction: row; /* Ícone ao lado do texto, não em cima */
    align-items: center;
    justify-content: center;
    gap: 15px; /* Espaço entre o ícone e o texto */
    
    font-size: 1.4rem !important; /* Texto bem maior */
    padding: 25px 20px; /* Mais "gordinho" */
    width: 100%;
    
    box-shadow: 0 8px 0 #15803d; /* Sombra 3D mais grossa pra dar peso */
    transform: translateY(-2px);
}

#btn-acao-praticar-dinamico:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* --- TELA DE CONFIGURAÇÃO DE TREINO --- */

.titulo-secao-config {
    color: var(--text-light);
    margin-bottom: 15px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 5px;
}

/* 1. CARDS DE MODO (Botões vs Teclado) */
.grid-config-modo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.card-opcao-treino {
    background: white;
    border: 3px solid transparent;
    border-radius: 20px;
    padding: 20px 10px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.card-opcao-treino .icon-grande { font-size: 2.5rem; }
.card-opcao-treino strong { display: block; font-size: 1.1rem; color: var(--text-main); }
.card-opcao-treino small { color: var(--text-light); font-size: 0.8rem; }
.card-opcao-treino .check-icon { 
    position: absolute; top: 10px; right: 10px; 
    background: var(--success); color: white; border-radius: 50%; 
    width: 20px; height: 20px; font-size: 0.8rem; 
    display: none; justify-content: center; align-items: center;
}

/* Estado Selecionado */
.card-opcao-treino.selecionado {
    border-color: var(--primary);
    background: #eff6ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.15);
}
.card-opcao-treino.selecionado .check-icon { display: flex; }


/* 2. BOTÕES DE QUANTIDADE */
.grid-config-qtd {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btn-qtd-redondo {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: white;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-qtd-redondo.selecionado {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}
/* --- PADRONIZAÇÃO DE TELAS (Estudo + Config) --- */
#tela-estudo, #tela-config-treino {
    display: flex;
    flex-direction: column;
    min-height: 85vh; /* Garante altura para empurrar o rodapé */
    justify-content: space-between;
}
/* Aplica o mesmo estilo do botão de Praticar ao botão de Iniciar Jogo */
#btn-acao-praticar-dinamico, 
#btn-iniciar-treino-custom {
    flex-direction: row; 
    align-items: center; 
    justify-content: center;
    gap: 15px;
    
    font-size: 1.4rem !important; /* Texto grande */
    padding: 25px 20px;           /* Botão alto */
    width: 100%;
    
    box-shadow: 0 8px 0 #15803d;  /* Sombra 3D grossa */
    transform: translateY(-2px);
    margin-bottom: 15px; /* Espaço para a publicidade embaixo */
}

#btn-acao-praticar-dinamico:active, 
#btn-iniciar-treino-custom:active {
    transform: translateY(4px);
    box-shadow: none;
}
/* --- TECLADO NUMÉRICO PERSONALIZADO --- */

.teclado-custom-wrapper {
    width: 100%;
    max-width: 320px; /* Largura ideal para não ficar gigante em tablet */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* O Visor (Tela onde o número aparece) */
.visor-resposta {
    font-size: 3.5rem; /* Número bem grande */
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--text-main);
    background: white;
    border: 3px solid #cbd5e1;
    border-radius: 20px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.05); /* Sombra interna */
    transition: all 0.3s;
}

/* Estados do Visor */
.visor-resposta.ativo { border-color: var(--primary); }
.visor-resposta.sucesso { background: #dcfce7; color: var(--success); border-color: var(--success); }
.visor-resposta.erro { background: #fee2e2; color: var(--error); border-color: var(--error); font-size: 2rem; } /* Diminui fonte pra caber mensagem de erro se precisar */

/* O Grid das Teclas */
.grid-teclado-num {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Colunas iguais */
    gap: 12px;
}

/* Botões Numéricos */
.btn-num {
    background: white;
    border: 2px solid #e2e8f0;
    border-bottom-width: 5px; /* Efeito 3D */
    border-radius: 16px;
    
    font-size: 2rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: var(--text-main);
    
    padding: 15px 0;
    cursor: pointer;
    transition: all 0.1s;
    touch-action: manipulation; /* Melhora resposta ao toque */
}

.btn-num:active {
    transform: translateY(3px); /* Afunda quando clica */
    border-bottom-width: 2px;
    background: #f1f5f9;
}

/* Botão Apagar (Diferente dos números) */
.btn-num.acao-apagar {
    background: #fef2f2;
    color: var(--error);
    border-color: #fecaca;
    font-size: 1.5rem;
}
/* Garante que o texto dos botões menus esteja sempre no meio */
.btn-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* --- AJUSTE: Botão Voltar dentro do Cabeçalho do Jogo --- */
#header-jogo .btn-voltar {
    margin: 0;           /* Remove margens externas */
    padding: 6px 15px;   /* Um pouco mais compacto que o normal */
    font-size: 0.9rem;   /* Texto levemente menor para alinhar com o placar */
    background: white;   /* Garante fundo branco */
    color: var(--text-main);
    box-shadow: 0 2px 0 #e2e8f0; /* Sombra sutil */
    height: auto;
}
/* --- NOVOS MODOS DE JOGO --- */

/* 1. MODO VERDADEIRO OU FALSO */
.grid-vf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.btn-vf {
    padding: 20px 0;
    border-radius: 20px;
    border: none;
    font-size: 2.5rem; /* Ícone Grande */
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 6px 0 rgba(0,0,0,0.1);
    color: white;
    text-shadow: 0 2px 0 rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.btn-vf span { font-size: 1rem; margin-top: 5px; opacity: 0.9; }

.btn-vf.verdadeiro { background: #22c55e; box-shadow: 0 6px 0 #15803d; }
.btn-vf.verdadeiro:active { transform: translateY(6px); box-shadow: none; }

.btn-vf.falso { background: #ef4444; box-shadow: 0 6px 0 #b91c1c; }
.btn-vf.falso:active { transform: translateY(6px); box-shadow: none; }


/* 2. MODO INVERSO (Qual é a Conta?) */
.visor-inverso-numero {
    font-size: 5rem; /* Número GIGANTE */
    color: var(--primary);
    font-weight: 800;
    text-align: center;
    text-shadow: 3px 3px 0px rgba(37, 99, 235, 0.1);
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.subtitulo-inverso {
    text-align: center;
    color: var(--text-light);
    font-weight: 700;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* Animaçãozinha de entrada */
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
/* --- SLIDER DE QUANTIDADE PERSONALIZADA --- */

.container-slider-qtd {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 15px;
    margin-top: 20px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.label-slider {
    font-size: 1.1rem;
    color: var(--text-main);
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

#valor-slider-display {
    color: var(--primary);
    font-size: 1.4rem;
}

/* Estilo da Barra (Range Input) */
input[type=range] {
    -webkit-appearance: none; /* Remove estilo padrão */
    width: 100%;
    background: transparent;
    margin: 10px 0;
}

input[type=range]:focus { outline: none; }

/* O Trilho (Caminho cinza) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: #e2e8f0;
    border-radius: 6px;
}

/* A Bolinha (Thumb) */
input[type=range]::-webkit-slider-thumb {
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px; /* Centraliza no trilho */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 3px solid white;
}
/* --- AJUSTE: MENSAGEM DENTRO DO CARD --- */

.area-pergunta {
    /* Força o conteúdo a ficar um embaixo do outro */
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 5px; /* Espaço entre a conta e a mensagem */
    
    /* Garante o visual do Card Branco */
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Nova classe para manter a conta (4 x 4 = ?) na horizontal */
.linha-equacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* Ajuste no texto de feedback para caber bonito no card */
#feedback-jogo-tela-cheia {
    min-height: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 5px;
    text-align: center;
}
/* --- NOVO HEADER DO JOGO (Com Progresso) --- */
.info-progresso {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1; /* Ocupa o centro do header */
}

.texto-contador {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 2px;
}

.barra-fina-bg {
    width: 100px; /* Largura da barra de progresso */
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.barra-fina-fill {
    height: 100%;
    background: var(--success);
    width: 0%;
    transition: width 0.3s ease;
}

/* --- MELHORIA: BOTÕES VERDADEIRO / FALSO GIGANTES --- */
.grid-vf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
    /* Preenche o espaço que sobrava */
    height: 180px; 
}

.btn-vf {
    height: 100%; /* Força altura total */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    font-size: 3rem; /* Emojis gigantes */
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-vf span {
    font-size: 1.2rem;
    font-weight: 800;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- BADGE DO MODO (Etiqueta no topo da pergunta) --- */
.badge-modo {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.badge-modo.botoes { background: #e0f2fe; color: #0284c7; }
.badge-modo.teclado { background: #f3e8ff; color: #9333ea; }
.badge-modo.verdadeiro-falso { background: #ffedd5; color: #ea580c; }
.badge-modo.inverso { background: #fce7f3; color: #db2777; }

/* --- ETIQUETAS DE MODO DE JOGO (Estilo Pílula) --- */
.badge-pilula {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px; /* Bem arredondado */
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px; /* Espaço até a conta */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Cores específicas para cada modo */
.badge-azul    { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.badge-roxo    { background: #f3e8ff; color: #9333ea; border: 1px solid #e9d5ff; }
.badge-laranja { background: #ffedd5; color: #ea580c; border: 1px solid #fed7aa; }
.badge-rosa    { background: #fce7f3; color: #db2777; border: 1px solid #fbcfe8; }

/* --- NOVOS ESTILOS: HISTÓRICO E DETALHES (Adicionar ao final do style.css) --- */

/* Grade de Botões dos Modos (4 botões quadrados) */
.grid-botoes-historico {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

/* Estilo Base dos Botões de Modo */
.btn-hist-modo {
    border: none;
    border-radius: 12px;
    padding: 15px 10px;
    color: white;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1);
    transition: transform 0.1s;
    text-align: center;
    display: flex;
    flex-direction: column; /* Ícone em cima do texto */
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.btn-hist-modo:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Cores Específicas dos Botões */
.btn-hist-modo.roxo { background: var(--accent, #8b5cf6); }
.btn-hist-modo.laranja { background: var(--error, #ef4444); } /* Vermelho/Laranja */
.btn-hist-modo.verde { background: var(--success, #22c55e); }
.btn-hist-modo.azul { background: var(--primary, #2563eb); }

/* Painel de Detalhes (Oculto por padrão, aparece ao clicar) */
.painel-detalhes {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px;
    animation: fadeIn 0.3s ease;
    margin-top: 20px;
    scroll-margin-top: 20px; /* Ajuda no scroll automático */
}

.header-detalhes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.header-detalhes h4 {
    font-size: 1.2rem;
    color: var(--text-main, #1e293b);
    text-transform: uppercase;
    margin: 0;
    font-weight: 800;
}

.btn-fechar-mini {
    background: #e2e8f0;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-light, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.btn-fechar-mini:hover {
    background: #cbd5e1;
}

/* Card Dourado de Recorde */
.card-recorde-destaque {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    margin-bottom: 20px;
}
.card-recorde-destaque span {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
}
.card-recorde-destaque strong {
    font-size: 1.5rem;
    font-family: 'Fredoka', sans-serif;
}

/* Lista Simples de Partidas (Mini) */
.lista-simples {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-mini {
    background: white;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e2e8f0;
    font-size: 0.9rem;
}
.item-mini span.pts {
    font-weight: 800;
    color: var(--primary, #2563eb);
}
/* --- Ajustes Botões Dificuldade --- */
.grid-config-qtd {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    gap: 20px; /* Espaço menor entre os botões */
    margin-bottom: 20px;
}

.btn-qtd-redondo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: white;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.5rem; /* Aumentei um pouco o emoji */
    font-weight: 700;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Caixa de Explicação da Dificuldade --- */
#texto-explicacao-dificuldade {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    font-size: 0.95rem;
    margin-top: 10px;
    line-height: 1.5;
    animation: fadeIn 0.3s ease-out;
}

#texto-explicacao-dificuldade strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: #0284c7;
}
/* --- Rótulos do Gráfico (Porcentagem) --- */
.barra-wrapper {
    position: relative; /* Necessário para posicionar o texto */
    overflow: visible; /* Deixa o texto sair pra fora se precisar */
    justify-content: flex-end;
}

.rotulo-barra {
    position: absolute;
    bottom: 100%; /* Fica logo acima da barra */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 2px;
    z-index: 5;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Ajuste para quando a barra é muito pequena */
.barra-wrapper:hover .rotulo-barra {
    color: var(--primary);
    transform: translateX(-50%) scale(1.2);
}
/* --- Rótulos de Porcentagem no Gráfico --- */
.barra-wrapper {
    position: relative; /* Necessário para posicionar o texto flutuante */
    overflow: visible;  /* Permite que o texto saia da caixa se necessário */
    justify-content: flex-end;
}

.rotulo-barra {
    position: absolute;
    bottom: 100%; /* Posiciona exatamente acima da barra */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-light); /* Cor cinza suave */
    margin-bottom: 4px;
    z-index: 5;
    white-space: nowrap;
}

/* Quando passar o mouse, dá um destaque */
.barra-wrapper:hover .rotulo-barra {
    color: var(--primary);
    transform: translateX(-50%) scale(1.1);
}
/* --- LOJA E AVATAR --- */

/* Header Home com Avatar */
.header-home-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
}

.avatar-circle-home {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    border: 3px solid var(--primary);
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    animation: pulse 2s infinite;
}

.saldo-badge {
    background: #fffbeb;
    color: #b45309;
    font-weight: 800;
    padding: 8px 15px;
    border-radius: 20px;
    border: 2px solid #fcd34d;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
}

/* Botão Amarelo (Loja) */
.amarelo { background: #eab308; }
.amarelo:hover { background: #ca8a04; }

/* Tela Loja */
.banner-saldo-loja {
    background: white;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 20px;
    border: 2px solid #fcd34d;
    box-shadow: 0 4px 10px rgba(234, 179, 8, 0.15);
}
.texto-dourado { font-size: 2rem; color: #d97706; display: block; font-family: 'Fredoka', sans-serif; }

.grid-loja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding-bottom: 40px;
}

.card-avatar {
    background: white;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #e2e8f0;
    transition: all 0.2s;
}

.avatar-icon { font-size: 4rem; margin-bottom: 5px; }
.avatar-nome { font-weight: 700; margin-bottom: 10px; color: var(--text-main); }

.card-avatar.equipado { border-color: var(--success); background: #f0fdf4; box-shadow: 0 0 15px rgba(34, 197, 94, 0.2); }
.card-avatar.bloqueado .avatar-icon { filter: grayscale(100%); opacity: 0.5; }

.btn-loja-acao {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.8rem;
}
.btn-comprar { background: var(--primary); color: white; }
.btn-usar { background: white; border: 2px solid var(--primary); color: var(--primary); }
.btn-equipado { background: var(--success); color: white; cursor: default; }
.btn-caro { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }
/* --- MENU LATERAL (DRAWER) --- */

/* Botão Hambúrguer no Header */
.btn-hamburguer {
    background: white;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--primary);
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Fundo Escuro (Overlay) */
#overlay-menu {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.2s ease-out;
}

/* A Gaveta do Menu */
#menu-lateral {
    position: fixed;
    top: 0; left: 0;
    width: 280px; /* Largura do menu */
    height: 100%;
    background: var(--bg-app);
    z-index: 2000;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    transform: translateX(-100%); /* Começa escondido na esquerda */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

#menu-lateral.aberto {
    transform: translateX(0); /* Desliza para dentro */
}

/* Conteúdo do Menu */
.menu-header {
    background: var(--primary);
    color: white;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-bottom-right-radius: 30px;
}

.avatar-menu-grande {
    font-size: 4rem;
    background: white;
    width: 90px; height: 90px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 4px solid #93c5fd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.menu-lista {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.btn-item-menu {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 15px;
    border-radius: 12px;
    text-align: left;
    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    color: var(--text-main);
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    transition: all 0.2s;
}

.btn-item-menu:active {
    background: #f1f5f9;
    transform: scale(0.98);
}

.versao-app {
    margin-top: auto;
    text-align: center;
    padding: 20px;
    color: var(--text-light);
    font-size: 0.8rem;
    opacity: 0.7;
}
/* --- LAYOUT HOME (CLEAN & CARD BRANCO) --- */

/* Ajuste do fundo para destacar o branco */
body { background-color: #f1f5f9; }

/* 1. Topo */
.header-topo-limpo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 10px;
}

.btn-icon-quadrado {
    background: white;
    border: 1px solid #e2e8f0;
    color: var(--primary);
    width: 45px; height: 45px;
    border-radius: 12px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.logo-header-texto {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--primary);
    text-align: center;
}

.saldo-badge-pill {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. Card Branco de Saudação */
.card-boas-vindas-topo {
    background: white;
    margin: 0 20px 25px 20px;
    padding: 15px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra suave para destacar */
}

.avatar-saudacao {
    width: 55px; height: 55px;
    font-size: 2rem;
    background: #eff6ff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e2e8f0;
}

.texto-saudacao-container {
    display: flex;
    flex-direction: column;
}

.texto-saudacao-container strong {
    font-size: 1.1rem;
    color: #0f172a;
}

.texto-saudacao-container span {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
}

/* 3. Label e Botões */
.label-secao-home {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.container-botoes-originais {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Garante que os botões originais tenham o estilo certo */
.btn-menu {
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.1); /* Efeito 3D sutil */
    transition: transform 0.1s;
}
.btn-menu:active { transform: translateY(2px); box-shadow: none; }
/* --- LAYOUT HOME (AJUSTE FINAL: ALINHAMENTO E CENTRALIZAÇÃO) --- */

/* Fundo */
body { background-color: #f1f5f9; }

/* 1. Topo */
.header-topo-limpo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px; /* Margem padrão 20px */
    margin-bottom: 5px;
}

.btn-icon-quadrado {
    background: white;
    border: 1px solid #e2e8f0;
    color: var(--primary);
    width: 45px; height: 45px;
    border-radius: 12px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.logo-header-texto {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.5rem; /* Aumentado */
    color: var(--primary);
    text-align: center;
    letter-spacing: -0.5px;
    flex-grow: 1; /* Ocupa o espaço central */
}

.saldo-badge-pill {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
    padding: 8px 12px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. Card Branco de Saudação */
.card-boas-vindas-topo {
    background: white;
    margin: 10px 20px 25px 20px; /* Margem lateral 20px (igual publicidade) */
    padding: 20px;
    border-radius: 24px;
    
    /* Mágica da Centralização mantendo lado-a-lado */
    display: flex;
    flex-direction: row;       /* Avatar ao lado do texto */
    justify-content: center;   /* Centraliza o conjunto no meio do card */
    align-items: center;       /* Alinha verticalmente */
    gap: 15px;                 /* Espaço entre avatar e texto */
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.avatar-saudacao {
    width: 60px; height: 60px;
    font-size: 2.2rem;
    background: #eff6ff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #e2e8f0;
    flex-shrink: 0; /* Impede que o avatar amasse */
}

.texto-saudacao-container {
    display: flex;
    flex-direction: column;
    text-align: left; /* Texto alinhado à esquerda do bloco dele */
}

.texto-saudacao-container strong {
    font-size: 1.25rem;
    color: #0f172a;
    line-height: 1.2;
}

.texto-saudacao-container span {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

/* 3. Label e Botões */
.label-secao-home {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.container-botoes-originais {
    padding: 0 20px; /* Garante o alinhamento com a margem do card branco */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Botões Largos */
.btn-menu {
    width: 100%; /* Ocupa todo o espaço disponível no container */
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: none;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Banner Publicidade - Forçar alinhamento */
.ad-banner-container {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: auto !important;
    border-radius: 18px;
    
    /* AQUI ESTÁ A CORREÇÃO: */
    margin-top: 30px !important;    /* Empurra para baixo (descola dos botões) */
    margin-bottom: 30px !important; /* Garante espaço no final da tela */
}
/* --- BOTÕES COM EFEITO 3D SÓLIDO (CAMADA CINZA) --- */

/* Base do botão */
.btn-menu {
    width: 100%;
    border-radius: 18px;
    padding: 20px;
    border: none;
    text-align: left;
    position: relative;
    overflow: hidden;
    color: white;
    
    /* O EFEITO 3D CINZA ESTÁ AQUI: */
    box-shadow: 0 6px 0 #cbd5e1; 
    
    /* Importante: Transição suave ao clicar */
    transition: transform 0.1s, box-shadow 0.1s;
    margin-bottom: 5px; /* Espaço para a sombra não encavalar */
}

/* Efeito de clique (O botão "afunda") */
.btn-menu:active {
    transform: translateY(4px); /* Desce 4 pixels */
    box-shadow: 0 2px 0 #cbd5e1; /* A sombra diminui */
}

/* As cores continuam as mesmas, mas sem a sombra colorida */
.btn-menu.azul {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.btn-menu.verde {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.btn-menu.roxo {
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
}
/* --- LAYOUT HOME (LARGURA TOTAL / MOBILE OTIMIZADO) --- */

/* Fundo */
body { background-color: #f1f5f9; }

/* 1. Topo */
.header-topo-limpo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* REDUZIDO de 20px para 12px nas laterais */
    padding: 15px 12px; 
    margin-bottom: 5px;
}

.btn-icon-quadrado {
    background: white;
    border: 1px solid #e2e8f0;
    color: var(--primary);
    width: 45px; height: 45px;
    border-radius: 12px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.logo-header-texto {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    text-align: center;
    letter-spacing: -0.5px;
    flex-grow: 1;
}

.saldo-badge-pill {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
    padding: 8px 12px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. Card Branco de Saudação */
.card-boas-vindas-topo {
    background: white;
    /* REDUZIDO margem lateral de 20px para 12px */
    margin: 10px 12px 25px 12px; 
    padding: 20px;
    border-radius: 24px;
    
    display: flex;
    flex-direction: row;     
    justify-content: center; 
    align-items: center;     
    gap: 15px;               
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.avatar-saudacao {
    width: 60px; height: 60px;
    font-size: 2.2rem;
    background: #eff6ff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #e2e8f0;
    flex-shrink: 0;
}

.texto-saudacao-container {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.texto-saudacao-container strong {
    font-size: 1.25rem;
    color: #0f172a;
    line-height: 1.2;
}

.texto-saudacao-container span {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

/* 3. Label e Botões */
.label-secao-home {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b; 
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.container-botoes-originais {
    /* REDUZIDO padding lateral de 20px para 12px */
    padding: 0 12px; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Botões Largos */
.btn-menu {
    width: 100%;
    border-radius: 18px;
    padding: 20px;
    border: none;
    text-align: left;
    position: relative;
    overflow: hidden;
    color: white;
    
    /* Efeito 3D Sólido Cinza */
    box-shadow: 0 6px 0 #cbd5e1; 
    transition: transform 0.1s, box-shadow 0.1s;
    margin-bottom: 5px;
}

.btn-menu:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #cbd5e1;
}

/* Cores dos Botões */
.btn-menu.azul { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.btn-menu.verde { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.btn-menu.roxo { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); }

/* Banner Publicidade - Alinhado com o resto */
.ad-banner-container {
    /* REDUZIDO margem lateral de 20px para 12px */
    margin-left: 12px !important;
    margin-right: 12px !important;
    width: auto !important;
    border-radius: 18px;
    
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}


@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* --- CORREÇÃO PARA CELULARES (Evita cortar botões) --- */

@media (max-height: 800px) {
    /* 1. Diminui o número gigante do modo Inverso */
    .visor-inverso-numero {
        font-size: 3.5rem; /* Era 5rem */
        line-height: 1;
        margin-bottom: 5px;
    }

    /* 2. Compacta o Teclado Numérico */
    .teclado-custom-wrapper {
        gap: 8px; /* Menos espaço entre visor e teclas */
    }
    
    .visor-resposta {
        height: 60px; /* Visor mais baixo */
        font-size: 2.5rem;
    }

    .btn-num {
        padding: 8px 0; /* Teclas mais finas */
        font-size: 1.6rem;
        border-bottom-width: 3px;
    }

    /* 3. Ajustes Gerais de Espaço no Card */
    .area-pergunta {
        padding: 10px;
        margin-bottom: 10px;
        min-height: auto; /* Remove altura forçada */
    }

    .badge-pilula {
        margin-bottom: 5px;
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    /* 4. Garante que se sobrar algo, dá pra rolar a tela */
    #container-jogo {
        overflow-y: auto;
        padding-bottom: 80px; /* Espaço extra pro scroll */
        max-height: 85vh;
        display: block; /* Garante scroll */
    }
}
/* --- AJUSTES DO TECLADO INTEGRADO --- */

/* Botão Confirmar (Dentro do Grid) */
.btn-num.acao-ok {
    background: var(--success);
    color: white;
    border-color: #15803d; /* Borda verde escura */
    font-size: 1.8rem;
}

.btn-num.acao-ok:active {
    background: #166534;
    transform: translateY(3px);
}

/* Botão Apagar (Ajuste visual) */
.btn-num.acao-apagar {
    background: #fee2e2;
    color: var(--error);
    border-color: #fca5a5;
}

/* Garante que ícones fiquem centralizados */
.btn-num {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove padding extra pra centralizar melhor */
    height: 65px; /* Altura fixa para ficar uniforme */
}
/* DENTRO DE @media (max-width: 768px) { ... */

    /* 1. CARD DA PERGUNTA (Geral) */
    .area-pergunta {
        padding: 16px !important; /* Padding reduzido */
        margin-bottom: 5px !important;
        border-radius: 16px !important;
        min-height: auto !important;
        gap: 0 !important; /* Remove espaços extras entre elementos internos */
    }

    /* 2. MODO INVERSO (O Grande Vilão) - Redução Drástica */
    .visor-inverso-numero {
        font-size: 4rem !important; /* Reduzi de 5rem para 3rem */
        line-height: 2;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .subtitulo-inverso {
        font-size: 2rem !important; /* Fonte menor */
        margin-bottom: 5px !important; /* Cola no número */
        line-height: 1.2;
    }

    /* 3. BOTÕES DE OPÇÃO (Para garantir que caibam 4) */
    .botao-opcao {
        padding: 20px !important; /* Botões mais finos */
        font-size: 1.9rem !important;
        margin-bottom: 0 !important; /* Remove margem extra se tiver */
    }
    
    /* Grade de opções (container dos botões) */
    .grid-opcoes {
        gap: 8px !important; /* Aproxima os botões um do outro */
    }

/* } FIM DO @media */
/* Cor Laranja para o Menu */
.laranja { background: var(--secondary); }
.laranja:hover { background: #ea580c; }

/* Estilo da Lista de Histórico */
.lista-historico {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-historico {
    background: white;
    padding: 15px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 5px solid #e2e8f0;
}

/* Cores da borda baseadas no desempenho */
.item-historico.bom { border-left-color: var(--success); }
.item-historico.medio { border-left-color: #eab308; }
.item-historico.ruim { border-left-color: var(--error); }

.hist-info strong { display: block; color: var(--text-main); font-size: 1rem; }
.hist-info small { color: var(--text-light); font-size: 0.8rem; }

.hist-placar {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary);
}

.msg-vazio {
    text-align: center; color: var(--text-light); font-style: italic; margin-top: 20px;
}
/* --- GRÁFICO DE DESEMPENHO --- */
.card-grafico {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.grafico-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;
}

.grafico-header h3 {
    font-size: 1rem;
    color: var(--text-main);
}

/* Botões de Filtro (Pílulas Pretas/Escuras) */
.botoes-filtro {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 30px;
}

.btn-filtro {
    border: none;
    background: transparent;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filtro.ativo {
    background: #1e293b; /* Preto/Cinza escuro */
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Área das Barras */
.area-barras {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 180px; /* Altura do gráfico */
    padding-bottom: 5px;
    border-bottom: 2px solid #e2e8f0;
}

.barra-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 8%; /* Largura relativa pra caber 10 */
}

.barra {
    width: 100%;
    background: #67e8f9; /* Ciano bonito (imagem) */
    border-radius: 4px 4px 0 0;
    transition: height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-height: 4px; /* Pra não sumir se for 0 */
}

/* Cores alternadas sutilmente ou gradiente se quiser */
.barra:hover { opacity: 0.8; }

.barra-wrapper span {
    margin-top: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-light);
}
/* --- LAYOUT HOME (LARGURA TOTAL / MOBILE OTIMIZADO) --- */

/* Fundo */
body { background-color: #f1f5f9; }

/* 1. Topo */
.header-topo-limpo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* REDUZIDO de 20px para 12px nas laterais */
    padding: 15px 12px; 
    margin-bottom: 5px;
}

.btn-icon-quadrado {
    background: white;
    border: 1px solid #e2e8f0;
    color: var(--primary);
    width: 45px; height: 45px;
    border-radius: 12px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.logo-header-texto {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    text-align: center;
    letter-spacing: -0.5px;
    flex-grow: 1;
}

.saldo-badge-pill {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
    padding: 8px 12px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. Card Branco de Saudação */
.card-boas-vindas-topo {
    background: white;
    /* REDUZIDO margem lateral de 20px para 12px */
    margin: 10px 12px 25px 12px; 
    padding: 20px;
    border-radius: 24px;
    
    display: flex;
    flex-direction: row;     
    justify-content: center; 
    align-items: center;     
    gap: 15px;               
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.avatar-saudacao {
    width: 60px; height: 60px;
    font-size: 2.2rem;
    background: #eff6ff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #e2e8f0;
    flex-shrink: 0;
}

.texto-saudacao-container {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.texto-saudacao-container strong {
    font-size: 1.25rem;
    color: #0f172a;
    line-height: 1.2;
}

.texto-saudacao-container span {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

/* 3. Label e Botões */
.label-secao-home {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b; 
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.container-botoes-originais {
    /* REDUZIDO padding lateral de 20px para 12px */
    padding: 0 12px; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Botões Largos */
.btn-menu {
    width: 100%;
    border-radius: 18px;
    padding: 20px;
    border: none;
    text-align: left;
    position: relative;
    overflow: hidden;
    color: white;
    
    /* Efeito 3D Sólido Cinza */
    box-shadow: 0 6px 0 #cbd5e1; 
    transition: transform 0.1s, box-shadow 0.1s;
    margin-bottom: 5px;
}

.btn-menu:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #cbd5e1;
}

/* Cores dos Botões */
.btn-menu.azul { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.btn-menu.verde { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.btn-menu.roxo { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%); }

/* Banner Publicidade - Alinhado com o resto */
.ad-banner-container {
    /* REDUZIDO margem lateral de 20px para 12px */
    margin-left: 12px !important;
    margin-right: 12px !important;
    width: auto !important;
    border-radius: 18px;
    
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

/* --- 12. RESPONSIVIDADE (MOBILE / TELAS PEQUENAS) --- */
@media (max-width: 768px) or (max-height: 800px) {
    /* Ajustes para telas apertadas */
    
    /* Modo Inverso */
    .visor-inverso-numero { font-size: 3.5rem !important; line-height: 1; margin: 20px !important; }
    .subtitulo-inverso { font-size: 1.2rem !important; margin-bottom: 10px !important; }

    /* Teclado Compacto */
    .teclado-custom-wrapper { gap: 8px; }
    .visor-resposta { height: 60px; font-size: 2.5rem; }
    .btn-num { padding: 8px 0; font-size: 1.6rem; border-bottom-width: 3px; height: 55px; }

    /* Área da Pergunta */
    .area-pergunta { padding: 15px !important; margin-bottom: 10px !important; min-height: auto !important; }
    
    /* Botões de Opção */
    .botao-opcao { padding: 15px !important; font-size: 1.6rem !important; }
    .grid-opcoes { gap: 10px !important; }

    /* Scroll */
    #container-jogo { overflow-y: auto; padding-bottom: 80px; max-height: 85vh; display: block; }
}
/* =======================================================
   CORREÇÃO FINAL: LARGURA TOTAL (TELA CHEIA NO CELULAR)
   Cole isto no FINAL do seu style.css
   ======================================================= */

/* 1. Remove a "moldura" invisível de 15px que travava a tela */
body {
    padding: 0.5 !important; /* Zera o padding geral */
}

/* 2. Ajusta o Topo para encostar mais nas bordas */
.header-topo-limpo {
    padding: 15px 8px !important; /* Apenas 8px de respiro lateral */
}

/* 3. Estica o Card de Boas-Vindas */
.card-boas-vindas-topo {
    /* Margem lateral de apenas 6px (quase colado) */
    margin: 10px 6px 20px 6px !important; 
}

/* 4. Estica os Botões de Ação (Estudar, Praticar...) */
.container-botoes-originais {
    padding: 0 6px !important; /* Padding lateral reduzido para 6px */
}

/* 5. Estica a Publicidade para alinhar com o resto */
.ad-banner-container {
    margin-left: 6px !important;
    margin-right: 6px !important;
    width: auto !important;
}

/* 6. Garante que as telas internas tenham um mínimo de respiro */
#tela-estudo, 
#tela-config-treino, 
#tela-desempenho, 
#tela-loja, 
#tela-config-desafio {
    padding: 0 10px !important;
}

/* =================================================
   RODAPÉ DO MASCOTE (RESTAURAÇÃO)
   ================================================= */

.game-footer-mascote {
    width: 100%;
    max-width: 500px; /* Trava na largura de celular */
    margin: 0 auto;   /* Centraliza se sobrar espaço */
	margin-top: 30px !important;
    
    /* Configurações anti-bug da linha */
    background: transparent; 
    padding: 10px 15px 20px 15px;
    flex-shrink: 0; /* Impede que seja esmagado */
    
    /* Ajuste de Altura (Mude aqui se quiser subir/descer) */
    margin-bottom: 0px; 
}

.mascote-container {
    background: white;
    border-radius: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 15px;
    
    /* Sombra e Borda Suaves */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border: 2px solid #e2e8f0;
}

.avatar-game-footer {
    width: 50px; 
    height: 50px;
    font-size: 2rem;
    background: #eff6ff;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}

.texto-mascote-container {
    font-family: 'Fredoka', sans-serif;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Animação suave no texto */
.animacao-digitacao {
    animation: fadeIn 0.5s ease-out;
}
/* =================================================
   TELA DE REGRAS (MANUAL DO MESTRE)
   ================================================= */

/* Introdução */
.intro-regras {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
    text-align: center;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Títulos das Seções */
.titulo-secao-regras {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.3rem;
    color: var(--text-main);
    margin-bottom: 5px;
    display: flex; align-items: center; gap: 8px;
}
.titulo-secao-regras.destaque { color: var(--secondary); }

.desc-secao {
    margin: 0 0 20px 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

.divisor-secao {
    height: 1px;
    background: #e2e8f0;
    margin: 30px 0;
}

/* Grid de Cartões */
.grid-regras {
    display: grid;
    grid-template-columns: 1fr; /* 1 por linha no celular */
    gap: 15px;
}
/* No tablet/PC vira 2 colunas */
@media (min-width: 600px) {
    .grid-regras { grid-template-columns: 1fr 1fr; }
}

/* O Cartão de Regra */
.card-regra {
    background: white;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    border-left: 5px solid #cbd5e1; /* Cor padrão */
    transition: transform 0.2s;
}

.card-regra:active { transform: scale(0.98); }

/* Cabeçalho do Cartão */
.header-regra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #f1f5f9;
}

.icon-regra {
    font-size: 1.5rem;
    background: #f8fafc;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.header-regra strong {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    color: var(--text-main);
}

/* Lista de Regras (Bullets) */
.lista-regras {
    margin: 0; padding-left: 20px;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}
.lista-regras li { margin-bottom: 5px; }

/* --- CORES ESPECÍFICAS DOS CARTÕES --- */
/* Prática */
.card-regra.azul    { border-left-color: var(--primary); }
.card-regra.roxo    { border-left-color: var(--accent); }
.card-regra.laranja { border-left-color: var(--secondary); }
.card-regra.rosa    { border-left-color: #db2777; }

/* Desafios */
.card-regra.premium { border-left-color: #f59e0b; background: #fffbeb; } /* Fundo amarelinho */
.card-regra.perigo  { border-left-color: var(--error); }
.card-regra.recarga { border-left-color: var(--success); }
.card-regra.speed   { border-left-color: #0ea5e9; }
/* =================================================
   TELA DE TERMOS E PRIVACIDADE (NOVO)
   ================================================= */

.card-termos {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #f1f5f9;
    margin-bottom: 30px;
}

.card-termos h3 {
    color: var(--primary); /* Azul do app */
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 800;
    font-family: 'Fredoka', sans-serif;
}

/* Espaço extra antes do segundo título */
.card-termos h3:not(:first-child) {
    margin-top: 30px;
}

.card-termos p {
    color: var(--text-light); /* Cinza elegante */
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 0.95rem;
    text-align: justify;
}

.card-termos ul {
    color: var(--text-light);
    padding-left: 20px;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.card-termos li {
    margin-bottom: 8px;
}

.card-termos strong {
    color: var(--text-main);
}
/* =================================================
   TELA DE CONFIGURAÇÕES (SWITCHES E LISTAS)
   ================================================= */

.card-config-item {
    background: white;
    padding: 15px 20px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
}

.info-config {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1rem;
}

.icon-config {
    width: 40px; height: 40px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

.card-config-item.perigo {
    border-color: #fca5a5;
    background: #fef2f2;
}
.card-config-item.perigo small {
    font-weight: 400; color: var(--error);
}

/* --- O SWITCH (BOTÃO LIGAR/DESLIGAR) --- */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1; /* Cinza desligado */
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background-color: var(--success); /* Verde ligado */
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--success);
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* Arredondado */
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* Botão Mini de Ação */
.btn-acao-mini {
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.85rem;
}
.btn-acao-mini.vermelho {
    background: white; border: 1px solid var(--error); color: var(--error);
}
.btn-acao-mini.vermelho:active {
    background: var(--error); color: white;
}

.versao-config {
    text-align: center;
    margin-top: 40px;
    color: var(--text-light);
    font-size: 0.8rem;
    opacity: 0.6;
    line-height: 1.5;
}
/* =================================================
   CORREÇÃO FINAL DE LAYOUT (SEPARAÇÃO DE MODOS)
   ================================================= */

/* Container Geral do Header */
#header-jogo {
    position: relative; /* Referência para os itens absolutos */
    display: flex;
    justify-content: center; /* Centraliza o conteúdo principal (timer/contador) */
    align-items: center;
    width: 100%;
    min-height: 60px;
    padding: 10px;
    margin-bottom: 20px;
}

/* 1. ITENS FIXOS NAS LATERAIS (Comuns aos dois modos) */

/* Botão Voltar -> Fixo na Esquerda */
#btn-sair-jogo {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    z-index: 20;
}

/* Estrelas -> Fixo na Direita */
#placar-display {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    z-index: 20;
    
    /* Visual de Pílula Amarela */
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex; align-items: center; gap: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. AJUSTES ESPECÍFICOS DO MODO DESAFIO */

/* Quando estiver no desafio, o header precisa ser um pouco mais alto */
#header-jogo.modo-desafio {
    padding-top: 15px; /* Espaço extra */
}

/* A área do Timer + Barra fica no centro exato */
#area-timer-desafio {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 200px; /* Limita largura pra barra não esticar demais */
}

#timer-display {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.8rem; /* Timer Grande */
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin-bottom: 5px;
}

.barra-progresso {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

/* 3. AJUSTES DO MODO TREINO (Só pra garantir) */
.modo-treino .info-progresso {
    /* O contador já fica centralizado pelo justify-content: center do pai */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* ==========================================================
   LAYOUT BLINDADO: MODO DESAFIO (BARRA 100% REAL)
   ========================================================== */

/* 1. Header no Desafio: Mais alto para caber os 2 andares */
#header-jogo.modo-desafio {
    height: 90px !important; 
    padding: 0 !important;   /* Zera padding para a barra tocar as bordas */
    margin-bottom: 0px !important; /* Cola no card de baixo */
    position: relative !important; /* Referência para os itens soltos */
}

/* 2. Botão Voltar (Fixo Esquerda/Topo) */
.modo-desafio #btn-sair-jogo {
    position: absolute !important;
    left: 20px !important;
    top: 15px !important;
    z-index: 20;
}

/* 3. Estrelas (Fixo Direita/Topo) */
.modo-desafio #placar-display {
    position: absolute !important;
    right: 20px !important;
    top: 15px !important;
    z-index: 20;
    
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
    border-radius: 20px;
    padding: 5px 12px;
    display: flex; gap: 5px;
}

/* 4. Contador "Feitas" (Fixo Centro/Topo) */
.modo-desafio .info-progresso {
    position: absolute !important;
    left: 50% !important;
    top: 20px !important;
    transform: translateX(-50%) !important;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-light);
    z-index: 10;
}
/* Esconde a barra cinza fina */
.modo-desafio .barra-fina-bg { display: none !important; }

/* 5. A ÁREA DO TIMER (Container invisível que segura o show) */
/* Vamos tirar qualquer flexbox que possa estar encolhendo as coisas */
.modo-desafio #area-timer-desafio {
    position: static !important; /* Deixa os filhos se posicionarem pelo Header */
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 6. O CRONÔMETRO (Flutuando na esquerda inferior) */
.modo-desafio #timer-display {
    position: absolute !important;
    left: 20px !important;  /* Alinhado com o botão voltar */
    bottom: 12px !important; /* Logo acima da barra laranja */
    
    font-family: 'Fredoka', sans-serif;
    font-size: 1.6rem !important;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    z-index: 10;
    text-align: left !important;
    width: auto !important;
    margin: 0 !important;
}

/* 7. A BARRA LARANJA (100% da tela, colada no chão) */
.modo-desafio .barra-progresso {
    position: absolute !important;
    bottom: 0 !important;    /* Cola no chão */
    left: 0 !important;      /* Cola na esquerda */
    width: 100% !important;  /* Ocupa TUDO */
    height: 8px !important;
    
    background: #f1f5f9;     /* Fundo cinza claro */
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
    z-index: 5;
}

.modo-desafio #barra-fill {
    background: #f97316 !important; /* Laranja */
    height: 100%;
    display: block;
    /* Borda arredondada só na ponta que avança */
    border-radius: 0 4px 4px 0; 
}