/* --- Reset e Fonte --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Tons de Cinza Monocromático e Neon */
:root {
    --gray-darkest: #1F1F1F; /* <--- PRETO TOTAL (Fundo Externo ATUAL) */
    --gray-dark: #1C1C1C;  /* <--- CINZA ESCURO (Fundo do Contêiner ATUAL) */  
    --gray-medium: #333333;  
    --gray-light: #555555;   
    
    --neon-blue: #00FFFF;
    --neon-green: #00FF00;
    --neon-pink: #FF00FF;
    --neon-magenta: #FF0099;
    --text-shadow: 0 0 5px currentColor;
    --font-color-main: #E0E0E0;
    
    --dica-size-mobile: 20px; 
}

/* --- ESTRUTURA E RESPONSIVIDADE --- */
body {
    font-family: 'Fredoka One', cursive;
    background-color: var(--gray-darkest);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px; 
    color: var(--font-color-main);
}

#game-container {
    width: 100%;
    max-width: 500px;
    /* ESTE É O NOVO AJUSTE! */
    margin-top: 20px; 
    background-color: var(--gray-dark);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid var(--gray-light); 
}

/* AJUSTE #1: Título Fininho */
#main-title {
    font-size: 1.2em; 
    font-weight: 100; /* FONTE FININHA */
    margin-bottom: 10px;
    color: var(--neon-blue);
    text-shadow: var(--text-shadow);
    text-align: center;
    font-style: normal; /* Sem itálico */
}

/* --- TOPO E CONTROLES (Alinhado e Solto) --- */
#top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 5px; /* Adicionado um padding leve para o alinhamento */
}

/* style.css (Onde estava o bloco #settings) */
#settings {
    flex-grow: 1;
    
    /* NOVO: Habilita o Flexbox para alinhar todos os itens horizontalmente */
    display: flex;
    align-items: center; 

    /* NOVO: Aplica espaçamento de 15px entre todos os filhos (select, spans, buttons) */
    gap: 19px; 
    
    /* REMOÇÃO: text-align: left; não é necessário com display: flex; */
    /* REMOVA a linha text-align: left; */
}

#flags-count, #timer {
    font-weight: normal; /* FININHO (Fonte normal Fredoka One) */
    color: var(--neon-white);
    text-shadow: var(--text-shadow);
    /* Garante que o span não seja bold, mesmo que o Fredoka One seja naturalmente forte */
    font-weight: 400; 
}

#difficulty-select {
    font-family: 'Fredoka One', cursive;
    font-size: 1.0em;
    cursor: pointer;
    background-color: #8D8D8D; /* Fundo Branco-Bege */
    color: #000000; /* Texto Preto */
    border: 1px solid #C0C0C0; /* Borda Cinza Clara */
    padding: 3px 5px;
    border-radius: 3px;
}
#share-button, #reset-button {
    background: transparent; border: none; font-size: 1.5em; padding: 0; cursor: pointer;
    transition: color 0.2s;
}

#share-button {
    color: var(--neon-pink);
    text-shadow: var(--text-shadow);
}


/* --- LAYOUT DO GRID RESPONSIVO --- */
#grid-wrapper {
    width: 100%; 
    max-width: 100%;
    display: grid;
    grid-template-columns: var(--dica-size-mobile) repeat(10, 1fr) var(--dica-size-mobile); 
    grid-template-rows: var(--dica-size-mobile) repeat(15, 1fr); 
    aspect-ratio: 12 / 16; 
    
    @media (max-width: 350px) {
        --dica-size-mobile: 15px; 
    }
}

/* POSICIONAMENTO */
#grid-corner { grid-column: 1 / 2; grid-row: 1 / 2; background-color: var(--gray-dark); } 
#dicas-superior { grid-column: 2 / 12; grid-row: 1; display: grid; grid-template-columns: repeat(10, 1fr); background-color: var(--gray-dark); border-right: 1px solid var(--gray-darkest); }
#dicas-lateral { grid-column: 1 / 2; grid-row: 2 / 17; display: grid; grid-template-rows: repeat(15, 1fr); background-color: var(--gray-dark); border-bottom: 1px solid var(--gray-darkest); }
#campo { grid-column: 2 / 12; grid-row: 2 / 17; width: 100%; display: grid; background-color: var(--gray-darkest); }

/* AJUSTE #3: Dicas Finas */
.dica-celula {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal; /* FININHO */
    color: var(--neon-blue); 
    text-shadow: var(--text-shadow);
    border: 1px solid var(--gray-darkest); 
    font-size: 0.7em;
}

/* --- CÉLULAS E ESTILOS NEON --- */
.celula {
    background-color: var(--gray-medium); 
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold; /* Mantém o bold nos números internos para contraste */
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--gray-darkest); 
    color: var(--font-color-main);
    font-size: 1.1em;
}

.aberta {
    background-color: var(--gray-light); 
    cursor: default;
    border: 1px solid var(--gray-dark);
}

/* Cores dos Números (Neon) */
.aberta > * { text-shadow: var(--text-shadow); }
.num-1 { color: var(--neon-blue); }
.num-2 { color: var(--neon-green); }
.num-3 { color: var(--neon-magenta); }
.num-4 { color: var(--neon-pink); }
.num-5 { color: #FFA500; }
.num-6 { color: #FFFF00; }
.num-7 { color: #800080; }
.num-8 { color: var(--font-color-main); }

/* style.css (Onde está o bloco .bomba) */
.bomba { 
    background-color: #FF0000 !important; 
    color: #FFFFFF; 
    text-shadow: 0 0 10px #FF0000; 
    
    /* NOVO: Diminui o tamanho do emoji. Comece com 1em. */
    font-size: 0.7em; 
}
/* --- ESTILO FOOTER --- */
#footer-bar {
    width: 100%;
    padding: 8px 0;
    margin-top: 15px;
    font-size: 0.8em;
    color: var(--gray-light);
    text-align: center;
    background-color: var(--gray-dark);
    border-top: 1px solid var(--gray-medium);
}