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

/* --- FUNDO E RESPONSIVIDADE FORÇADA --- */
body {
    font-family: 'Fredoka One', cursive; 
    background-color: #4CAF50; /* VERDE ESCURO (Fundo da tela) */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; 
    padding: 8px 0;
}

#game-container {
    /* RESPONSIVIDADE: Ocupa tudo no mobile, limita no desktop */
    width: 100%; 
    max-width: 90%; /* Limite máximo para desktop */
    
    background-color: #FFFFFF; /* PAINEL BRANCO (Contraste) */
    padding: 10px; 
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    
    /* Layout interno para centralizar o conteúdo */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* --- TOPO E CONTROLES (ALINHAMENTO) --- */
#top-bar {
    width: 100%;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 8px;
    padding: 3px;
    border-bottom: 1px dashed #cccccc;
}

#settings {
    display: flex;
    gap: 10px;
    align-items: center;
}

#controls {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #ffe066; 
    border: 3px solid #ffc107;
    border-radius: 10px;
    padding: 8px 15px;
    font-size: 1.2em;
    color: #333;
}

#difficulty-select, #sound-button {
    font-family: 'Fredoka One', cursive;
    font-size: 0.9em;
    cursor: pointer;
}

#share-button {
    background-color: transparent;
    border: none;
    font-size: 1.0em; 
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    line-height: 1;
}

/* --- TABULEIRO E CÉLULAS (ESTÉTICA DE TERRA) --- */
#campo {
    width: 100%; 
    display: grid;
    gap: 2px;
    background-color: #FFFFFF; /* BRANCO (Fundo do gap) */
    border: 3px solid #CCCCCC; 
    border-radius: 5px;
}

/* Célula não clicada (Verde um pouco mais escuro) */
.celula {
    background-color: #A5D6A7; /* VERDE MAIS ESCURO */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
    border-radius: 3px; 
    border-bottom: 3px solid #81C784; 
    border-right: 3px solid #81C784;
}

/* Célula Revelada (Terra) */
.aberta {
    background-color: #D2B48C; /* Tan/Marrom claro (Terra) */
    cursor: default;
    border: 1px solid #B8860B; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* --- ESTILOS PARA DICAS EXTERNAS (NOVO) --- */
.dica-celula {
    background-color: #37A870; /* Azul Cinzento para Dicas */
    color: #E2FEF1;
    font-size: 0.9em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    user-select: none;
    line-height: 1;
}

/* Canto Superior Esquerdo (onde as dicas se encontram) */
.com-dicas::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
    background-color: #66CC99; 
    border-radius: 3px;
}

/* Cores dos Números */
.num-1 { color: #1E90FF; } 
.num-2 { color: #3CB371; } 
.num-3 { color: #FF4500; } 
.num-4 { color: #9932CC; } 
.num-5 { color: #8B0000; } 
.num-6 { color: #4682B4; } 
.num-7 { color: #36454F; } 
.num-8 { color: #FFD700; } 

.bomba { background-color: #FF5252 !important; color: white; } 
.bandeira { background-color: #FFEB3B; }