/* ==========================================================================
   1. ESTRUTURA GERAL E BLINDAGEM DO NAVEGADOR
   ========================================================================== */
html, body {
    /* Fontes amigáveis e arredondadas para um visual de jogo */
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; 
    margin: 0; 
    background-color: #e4ebf1; /* Fundo cinza/azulado suave */
    color: #2c3e50;            /* Texto sempre em grafite escuro */
    
    /* Trava a largura da página para evitar barra de rolagem horizontal nativa */
    max-width: 100vw;
    overflow-x: hidden; 
}

/* Telas principais do jogo (Menu, Jogo em si) */
.tela { display: none; height: 100vh; }
.tela.ativa { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}


/* ==========================================================================
   2. BOTÕES E TEXTOS PADRÃO (EFEITO TÁTIL/BRINQUEDO)
   ========================================================================== */
button {
    font-family: inherit;
    border: 3px solid #2c3e50;
    border-radius: 12px;
    box-shadow: 4px 4px 0px #2c3e50; /* Sombra sólida que dá o efeito 3D cartunesco */
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

/* Efeito de botão sendo afundado ao clicar */
button:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px #2c3e50;
}

.titulo { 
    font-size: 4rem; 
    margin-bottom: 2rem; 
    color: #ffffff;
    /* Contorno grosso usando sombras múltiplas */
    text-shadow: 4px 4px 0px #2c3e50, -2px -2px 0px #2c3e50, 2px -2px 0px #2c3e50, -2px 2px 0px #2c3e50; 
    letter-spacing: 2px;
}

/* Botões do Menu Inicial */
.menu-botoes button { 
    display: block; 
    width: 220px; 
    margin: 15px auto; 
    padding: 15px; 
    font-size: 1.2rem;
    background-color: #ffffff;
    color: #2c3e50;
}
.menu-botoes button:hover { background-color: #f0f4f8; }


/* ==========================================================================
   3. TELA DE JOGO E PAINEL (LAYOUT BLINDADO)
   ========================================================================== */
#tela-jogo { 
    flex-direction: row; 
    width: 100vw;       /* Trava exatamente na largura da tela */
    height: 100vh;      /* Trava exatamente na altura da tela */
    padding: 15px; 
    box-sizing: border-box;
    overflow: hidden;   /* Proíbe a página de quebrar caso o tabuleiro cresça muito */
}

/* --- PAINEL LATERAL (ESQUERDA) --- */
.painel-lateral { 
    width: 250px;              /* Largura fixa */
    flex-shrink: 0;            /* O navegador NUNCA vai esmagar ou diminuir o painel */
    display: flex;
    flex-direction: column;
    height: 100%;              /* Ocupa a altura da tela toda */
    overflow-y: auto;          /* Se houver muitos grupos, a rolagem acontece SÓ aqui dentro */
    background: #ffffff; 
    padding: 20px; 
    border-radius: 16px; 
    border: 4px solid #2c3e50;
    box-shadow: 6px 6px 0px #2c3e50;
    margin-right: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 20;               /* Garante que o painel fique sempre por cima de qualquer tabuleiro */
}

.painel-lateral > button {
    margin-bottom: 0;
}

/* --- ÁREA PRINCIPAL DO TABULEIRO (DIREITA) --- */
.area-principal { 
    flex-grow: 1;                /* Ocupa o restante do espaço da tela */
    height: 100%;
    overflow: auto;              /* A MÁGICA 2: Se o tabuleiro for enorme (zoom), a rolagem fica SÓ aqui */
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;      /* Empilha verticalmente */
    align-items: center;         /* Centraliza o tabuleiro na horizontal */
    justify-content: flex-start; /* Trava o tabuleiro no TOPO da área, excelente para o zoom */
}


/* ==========================================================================
   4. LISTA DE GRUPOS (GRID INTELIGENTE)
   ========================================================================== */
#tabela-grupos {
    display: flex;
    flex-direction: column; /* Força a ser sempre uma lista vertical */
    gap: 8px;
    width: 100%;
}

.grupo-item { 
    font-size: 0.9rem;
    padding: 8px !important; 
}

.grupo-item.ativo { 
    background: #e4ebf1; 
    border: 3px solid #2c3e50;
    border-radius: 8px;
    box-shadow: 2px 2px 0px #2c3e50;
}


/* ==========================================================================
   5. TABULEIRO, CASAS E PEÇAS
   ========================================================================== */
#tabuleiro { 
    display: grid; 
    gap: 10px; 
    background-color: #cbd5e1; 
    padding: 20px;
    border-radius: 20px;
    border: 4px solid #2c3e50;
    box-shadow: 8px 8px 0px rgba(44, 62, 80, 0.2);
    margin: 0 0 30px 0;           
    transform-origin: top center; 
}

/* Espaço do meio do tabuleiro (Onde fica a carta) */
#centro-tabuleiro {
    grid-column: 2 / 7;
    grid-row: 2 / 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin: 10px;
}

/* Caixas individuais do tabuleiro */
.casa { 
    width: 80px; 
    height: 80px; 
    background: #ffffff; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    border-radius: 12px; 
    position: relative; 
    border: 3px solid #2c3e50; 
    box-shadow: 3px 3px 0px rgba(44, 62, 80, 0.15);
}

/* Número transparente gigante no fundo da casa */
.casa .numero {
    font-weight: 900; 
    font-size: 1.6rem; 
    color: #2c3e50;
    opacity: 0.3; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* Textos de casas especiais (BP, DRE, etc) */
.efeito-casa {
    font-size: 0.8rem;
    font-weight: 800;
    z-index: 1;
    text-align: center;
}

.casa.bonus { background: #a8e6cf; } /* Fundo verde */
.casa.ruim { background: #ffb7b2; }  /* Fundo vermelho */

/* As bolinhas (jogadores) */
.peca { 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    position: absolute; 
    border: 3px solid #ffffff; 
    box-shadow: 2px 2px 0px rgba(0,0,0,0.4); 
    z-index: 10; 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Animação de pulo (bounce) */
}


/* ==========================================================================
   6. MODAIS E CARTA CENTRAL 3D
   ========================================================================== */
.modal { 
    display: none; 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(44, 62, 80, 0.8);
    align-items: center; justify-content: center; z-index: 100;
}
.modal.ativo { display: flex; }

.modal-conteudo { 
    background: white; 
    padding: 30px; 
    border-radius: 16px; 
    border: 4px solid #2c3e50;
    box-shadow: 8px 8px 0px #2c3e50;
    width: 80%; 
    max-width: 500px; 
    text-align: center; 
}

/* Sistema 3D da Carta */
.carta-mestra {
    width: 100%; height: 100%;
    perspective: 1000px;
    display: flex; align-items: center; justify-content: center;
}

.carta-inner {
    width: 95%; height: 95%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: 16px;
    border: 4px solid #2c3e50;
    box-shadow: 8px 8px 0px rgba(44, 62, 80, 0.3);
    background: transparent;
}

/* FÍSICA DA CARTA: Gira para o lado que foi clicado */
.carta-mestra.virada-direita .carta-inner { transform: rotateY(180deg); }
.carta-mestra.virada-esquerda .carta-inner { transform: rotateY(-180deg); }

.carta-frente, .carta-verso {
    width: 100%; height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; 
    justify-content: center;
    padding: 20px;
    background: #ffffff;
    box-sizing: border-box;
    overflow-y: auto;
}

.carta-verso { 
    transform: rotateY(180deg); 
    background: #f8fafc;
    justify-content: flex-start;
}

/* Botões 3 e 5 Formato Bola */
.btn-bola {
    width: 60px; height: 60px;
    border-radius: 50%;
    background-color: #2c3e50;
    color: #fff;
    font-size: 2rem;
    border: none;
    box-shadow: 0px 5px 0px #1a252f;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; 
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-bola:active {
    transform: translateY(5px);
    box-shadow: 0px 0px 0px #1a252f;
}

/* Alternativas das perguntas (A, B, C...) */
.alternativa { 
    display: block; 
    margin: 5px auto; 
    padding: 15px; 
    width: 100%; 
    background-color: #ffffff;
    text-align: left; 
    font-size: 1.1rem;
}
.alternativa:hover { background-color: #e4ebf1; }


/* ==========================================================================
   7. TOAST NOTIFICATION (POP-UP DE COMBOS)
   ========================================================================== */
.toast {
    opacity: 0; pointer-events: none;
    min-width: 300px;
    background-color: #ffffff;
    color: #2c3e50;
    text-align: center;
    border-radius: 12px;
    border: 4px solid #2c3e50;
    padding: 16px 20px;
    position: fixed; z-index: 10000;
    left: 50%; top: 50%; /* Centraliza no meio da tela */
    transform: translate(-50%, -50%) scale(0.8); /* Fica um pouco menor quando invisível */
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 6px 6px 0px #2c3e50;
    transition: opacity 0.3s ease, transform 0.3s ease; /* Animação de zoom */
}

/* Quando ele aparece, ele dá um pequeno "pulo" de zoom para o tamanho original */
.toast.mostrar { 
    opacity: 1; 
    pointer-events: auto; 
    transform: translate(-50%, -50%) scale(1); 
}


/* ==========================================================================
   8. MODO PROJETOR (TEXTOS GIGANTES PARA SALA DE AULA)
   ========================================================================== */
body.modo-projetor { font-size: 1.5rem; }
body.modo-projetor .titulo { font-size: 4.5rem; }

/* Painel Lateral: Alargado e com grid inteligente otimizado */
body.modo-projetor .painel-lateral { width: 260px; }
body.modo-projetor .painel-lateral button { font-size: 1.3rem; padding: 15px; }
body.modo-projetor .painel-lateral h3 { font-size: 2.2rem; margin: 10px 0; }

/* Letra turbinada para 1.8rem (quase o dobro do tamanho normal) */
body.modo-projetor .grupo-item { 
    font-size: 1.8rem !important; 
    padding: 12px !important; 
}

/* Tabuleiro GIGANTE */
body.modo-projetor #tabuleiro { gap: 15px; padding: 30px; }
body.modo-projetor .casa { width: 100px; height: 100px; }

/* Textos da Casa (Aqui garantimos a leitura de longe) */
body.modo-projetor .casa .numero { font-size: 4rem; opacity: 0.2; } 
body.modo-projetor .efeito-casa { font-size: 1.6rem !important; line-height: 1.1; } 
body.modo-projetor .efeito-casa small { font-size: 1.1rem !important; display: block; margin-top: 5px; }
body.modo-projetor .peca { width: 40px; height: 40px; border-width: 4px; }

/* Modais Projetor */
body.modo-projetor .modal-conteudo { width: 95%; max-width: 1400px; padding: 50px; }

/* Textos da Carta Central Projetor */
body.modo-projetor .carta-frente div:first-child { font-size: 2.2rem !important; margin-bottom: 30px !important; }
body.modo-projetor #texto-tempo { font-size: 2.2rem !important; margin-bottom: 20px !important; } 
body.modo-projetor #texto-pergunta { font-size: 2.4rem !important; line-height: 1.4; margin-bottom: 30px !important; } 
body.modo-projetor .btn-bola { width: 100px; height: 100px; font-size: 3.5rem; } 
body.modo-projetor .alternativa { font-size: 1.6rem; padding: 20px; } 

/* Pop-up Projetor e Botões Finais */
body.modo-projetor .toast { font-size: 1.6rem; padding: 25px 30px; }
body.modo-projetor .btn-dificuldade { font-size: 2.5rem !important; padding: 25px 50px !important; border-radius: 16px !important; }

/* ==========================================================================
   9. RESPONSIVIDADE (MOBILE / ECRÃS PEQUENOS)
   ========================================================================== */
/* Esconde o botão e o overlay por padrão (em Monitores e Projetores) */
#btn-menu-mobile { display: none; }
#overlay-mobile { display: none; }

@media (max-width: 950px), (max-height: 500px) {
    /* Transforma o Painel Lateral numa gaveta escondida à esquerda */
    .painel-lateral {
        position: fixed;
        top: 0;
        left: -320px; /* Fica fora do ecrã */
        width: 280px;
        height: 100%;
        z-index: 2000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animação suave */
        border-radius: 0 16px 16px 0; /* Arredonda só a direita */
        margin: 0;
        border-left: none;
    }

    /* Classe que o JavaScript vai adicionar para abrir a gaveta */
    .painel-lateral.aberto {
        left: 0;
    }

    /* O Botão Flutuante (Estilo Chat) */
    #btn-menu-mobile {
        display: flex;
        position: fixed;
        bottom: 25px;
        right: 25px;
        width: 65px;
        height: 65px;
        background-color: #007bff;
        color: white;
        font-size: 2.2rem;
        border-radius: 50%; /* Faz ficar redondo */
        border: 3px solid #2c3e50;
        box-shadow: 3px 4px 0px #2c3e50;
        z-index: 1500;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    #btn-menu-mobile:active {
        transform: translateY(4px);
        box-shadow: 0px 0px 0px #2c3e50;
    }

    /* O fundo escuro que foca a atenção no menu */
    #overlay-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(44, 62, 80, 0.6);
        backdrop-filter: blur(2px);
        z-index: 1999;
        display: none; /* Só aparece quando tem a classe ativa */
    }

    #overlay-mobile.ativo {
        display: block;
    }
    
    /* Dá um bocadinho mais de espaço para o tabuleiro no telemóvel */
    .area-principal {
        padding: 5px;
    }
}