/* --- CONFIGURAÇÃO GLOBAL --- */
* {
    /* Reseta o espaçamento para evitar bugs de alinhamento */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Faz as bordas e padding não aumentarem o tamanho */
}

html, body {
    width: 100vw;
    height: 100vh;
    background-color: #000; /* Fundo preto para as barras */
    overflow: hidden; /* Remove barras de rolagem */
    
    /* Centraliza a "caixa mágica" */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Define a fonte padrão */
    font-family: 'Exo 2', sans-serif;
    color: #fff;

    /* Remove seleção de texto e highlight de toque no mobile */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- A "CAIXA MÁGICA" --- */
#game-container {
    position: relative; /* Base para os elementos internos */
    background: #08081a; /* Cor de fundo do jogo */

    /* A MÁGICA DA PROPORÇÃO (4:3) */
    /* 1. Tenta preencher 100% da LARGURA */
    width: 100vw; 
    /* 2. Calcula a ALTURA baseado na largura (600 / 800 = 0.75) */
    height: calc(100vw * 0.75); 
    
    /* 3. LIMITES: Se a altura calculada for MAIOR que a tela... */
    max-height: 100vh;
    /* 4. ...então recalcula a LARGURA baseado na altura (800 / 600 = 1.333) */
    max-width: calc(100vh * 1.333);
}

/* --- EMPILHAMENTO DOS ELEMENTOS --- */
/* Todos os filhos diretos do container ficam empilhados */

#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Camada de baixo (fundo) */
}

#gameUI {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* Só o topo */
    z-index: 5; /* Camada do placar (acima do canvas) */

    /* Estilo do Placar */
    padding-top: 10px;
    font-size: 3rem; /* Tamanho do placar */
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px #fff;
    
    /* Centraliza o placar e o botão */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* MODAIS (Telas de menu, pausa, etc.) */
#soundPermissionScreen,
#startScreen,
#pauseMenu,
#endScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Camada mais alta (acima de tudo) */
    
    /* Fundo escuro */
    background-color: rgba(8, 8, 26, 0.9);
    
    /* Centraliza a caixa de diálogo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Estilo da caixa de diálogo */
    padding: 20px;
    text-align: center;
}

/* --- CLASSE UTILITÁRIA --- */
.hidden {
    /* !important é necessário para sobrescrever o "display: flex" */
    display: none !important; 
}

/* --- ESTILO DOS ELEMENTOS INTERNOS --- */

h1, h2 {
    color: #00f0ff;
    text-shadow: 0 0 15px #00f0ff;
    margin-bottom: 20px;
}

p {
    font-size: 1.1rem;
    line-height: 1.5;
    max-width: 500px; /* Limita a largura do texto */
    margin-bottom: 25px;
}

button {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 8px;
    padding: 15px 25px; /* Bom para toque */
    font-size: 1.1rem;
    font-family: 'Exo 2', sans-serif;
    font-weight: bold;
    cursor: pointer;
    margin: 5px;
    min-width: 220px; /* Largura mínima dos botões */
    transition: all 0.2s ease; /* Efeito suave */
}

button:active, button:hover {
    background-color: #00f0ff;
    color: #08081a;
    box-shadow: 0 0 20px #00f0ff;
}

.game-mode-selection {
    display: flex;
    flex-wrap: wrap; /* Deixa os botões quebrarem a linha em telas pequenas */
    justify-content: center;
}

/* Botão de Pausa Específico */
#pauseButton {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    margin: 0 40px; /* Espaço entre os scores */
    min-width: 45px; /* Reseta a largura mínima */
}

#pauseButton:active, #pauseButton:hover {
    background-color: #fff;
    color: #08081a;
}