:root {
    --cor-fundo: #121212;
    --cor-superficie: #1E1E1E;
    --cor-destaque: #00BFFF;
    --cor-texto-principal: #E0E0E0;
    --cor-texto-secundario: #A0A0A0;
    --cor-sucesso: #4CAF50;
    --cor-erro: #F44336;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
.main-container { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; }
.main-title { margin-bottom: 20px; font-size: 2rem; color: var(--cor-destaque); }
.game-board { display: flex; width: 100%; gap: 20px; }
.player-column, .ai-column { flex: 1; display: flex; flex-direction: column; gap: 20px; }
section { background-color: var(--cor-superficie); padding: 20px; border-radius: 16px; }
.area-title { font-weight: 600; margin-bottom: 12px; color: var(--cor-texto-secundario); text-align: center; font-size: 1rem; }
.code-display { display: flex; justify-content: center; gap: 10px; }
.digit-box { width: 50px; height: 60px; background-color: var(--cor-fundo); border: 2px solid #444; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 700; transition: background-color 0.3s, color 0.3s; }
.history-log { height: 200px; overflow-y: auto; padding: 10px; background-color: var(--cor-fundo); border-radius: 8px; }
.input-area { display: flex; gap: 10px; }
#guess-input { flex-grow: 1; padding: 15px; background-color: var(--cor-fundo); border: 2px solid #444; border-radius: 8px; color: var(--cor-texto-principal); font-size: 1.2rem; text-align: center; }
#submit-guess { padding: 15px 25px; background-color: var(--cor-destaque); color: #121212; font-weight: 700; font-size: 1rem; border: none; border-radius: 8px; cursor: pointer; transition: filter 0.2s ease-in-out; }
#submit-guess:hover { filter: brightness(1.2); }
#submit-guess:disabled { background-color: #555; cursor: not-allowed; }
.end-game-display { margin-top: 20px; text-align: center; }
#end-game-message { margin-bottom: 15px; font-size: 1.5rem; }
#play-again-button { padding: 15px 30px; background-color: var(--cor-sucesso); color: #121212; font-weight: 700; font-size: 1.2rem; border: none; border-radius: 8px; cursor: pointer; transition: filter 0.2s ease-in-out; }
#play-again-button:hover { filter: brightness(1.2); }
.hidden { display: none !important; }
.history-item.success { color: var(--cor-sucesso); }
.history-item.info { color: var(--cor-destaque); }
.history-item.error { color: var(--cor-erro); }
@keyframes pop-in { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
.digit-revealed-animation { animation: pop-in 0.4s ease-out; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; flex-direction:column; justify-content: center; align-items: center; z-index: 1000; }
.modal { position: relative; background-color: var(--cor-superficie); padding: 40px; border-radius: 16px; text-align: center; display: flex; flex-direction: column; gap: 15px; width: 90%; max-width: 400px; }
.modal h1 { color: var(--cor-destaque); }
.modal h2 { color: var(--cor-texto-principal); margin-bottom: 10px; }
.difficulty-btn, .menu-btn { padding: 15px 30px; font-size: 1.1rem; font-weight: 600; border: 2px solid var(--cor-destaque); background-color: transparent; color: var(--cor-destaque); border-radius: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s; width: 100%; }
.difficulty-btn:hover, .menu-btn:hover { background-color: var(--cor-destaque); color: var(--cor-fundo); }
.menu-btn.success { border-color: var(--cor-sucesso); color: var(--cor-sucesso); }
.menu-btn.success:hover { background-color: var(--cor-sucesso); color: var(--cor-fundo); }
.difficulty-info { margin-top: 15px; color: var(--cor-texto-secundario); font-size: 0.9rem; }
.digit-box.ai-revealed {
    background-color: var(--cor-sucesso); /* Fundo Verde */
    color: var(--cor-fundo);              /* Texto Escuro para contraste */
    border-color: var(--cor-sucesso);     /* Borda Verde */
}
.player-secret { text-align: center; margin-top: 15px; color: var(--cor-texto-secundario); font-size: 0.9rem; }
.player-secret span { font-weight: 600; color: var(--cor-texto-principal); }
.multiplayer-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid #444; width: 100%; display: flex; flex-direction: column; gap: 15px; }
.join-room-area { display: flex; gap: 10px; }
#room-id-input { flex-grow: 1; background-color: var(--cor-fundo); border: 2px solid #444; border-radius: 8px; color: var(--cor-texto-principal); text-align: center; font-size: 1rem; padding: 10px; }
.room-info-display { margin-bottom: 15px; font-size: 0.9rem; color: var(--cor-texto-secundario); background-color: var(--cor-superficie); padding: 10px; border-radius: 8px; }
.room-info-display span { color: var(--cor-destaque); font-weight: 600; cursor: pointer; text-decoration: underline; }
.modal-header-icons { position: absolute; top: 15px; right: 15px; display: flex; gap: 10px; }
.icon-btn { background-color: transparent; border: 2px solid var(--cor-texto-secundario); color: var(--cor-texto-secundario); width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; }
.icon-btn:hover { background-color: var(--cor-destaque); color: var(--cor-fundo); border-color: var(--cor-destaque); }
.close-btn { position: absolute; top: 15px; right: 15px; background-color: transparent; border: none; color: var(--cor-texto-secundario); font-size: 1.5rem; font-weight: 700; cursor: pointer; line-height: 1; }
.close-btn:hover { color: var(--cor-destaque); }
.option-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.option-item label { font-weight: 600; }
input[type="range"] { width: 80%; }
.rules-content { text-align: left; color: var(--cor-texto-secundario); display: flex; flex-direction: column; gap: 15px; }
.rules-content p { line-height: 1.6; }
.rules-content strong { color: var(--cor-texto-principal); }
.feedback-example.success { color: var(--cor-sucesso); }
.feedback-example.info { color: var(--cor-destaque); }
@media (max-width: 768px) { .game-board { flex-direction: column; } }
/* =============================================== */
/* ESTILOS PARA DISPOSITIVOS MÓVEIS (CELULARES) */
/* =============================================== */
@media (max-width: 500px) {

    /* --- GERAL --- */
    body {
        /* Reduz o espaçamento nas laterais do corpo */
        padding: 10px;
    }

    section {
        /* Diminui o padding interno das seções */
        padding: 15px;
    }

    .game-board {
        /* Diminui o espaço entre as colunas quando empilhadas */
        gap: 15px;
    }

    /* --- FONTES --- */
    .main-title {
        font-size: 1.5rem; /* Reduz o título principal "Sua Vez!" */
    }

    .area-title {
        font-size: 0.9rem; /* Reduz os títulos das áreas */
    }

    /* --- CAIXAS DE DÍGITOS --- */
    .code-display {
        gap: 8px; /* Diminui o espaço entre as caixas */
    }

    .digit-box {
        /* Deixa as caixas de dígitos menores e mais responsivas */
        width: 45px;
        height: 55px;
        font-size: 1.8rem;
    }

    /* --- ÁREA DE INPUT --- */
    #guess-input {
        padding: 12px;
        font-size: 1rem;
    }

    #submit-guess {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    /* --- MODAIS (Pop-ups) --- */
    .modal {
        /* Diminui o padding dos modais para dar mais espaço ao conteúdo */
        padding: 25px;
        gap: 12px;
    }
    
    .modal h2 {
        font-size: 1.2rem;
    }

    .menu-btn, .difficulty-btn {
        padding: 12px;
        font-size: 1rem;
    }
}
/* Adicionado para que os ícones possam ser posicionados em relação a ele */
.main-container {
    position: relative;
}

/* Container para os ícones na tela do jogo */
.game-header-icons {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 10; /* Garante que fiquem sobrepostos a outros elementos */
}

/* Ajuste para o título não ficar embaixo dos ícones em telas pequenas */
@media (max-width: 500px) {
    .main-title {
        /* Adiciona um espaço no topo para os botões */
        margin-top: 45px;
    }
}