#jogo-mastermind .game-options { margin-top: 1.5rem; margin-bottom: 1rem; }
.titulo-com-ajuda { display: flex; justify-content: center; align-items: center; gap: 15px; }
.ajuda-btn { font-family: 'Poppins', sans-serif; background: var(--cor-fundo); border: 1px solid var(--cor-borda); color: var(--cor-principal-acao); width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px var(--cor-sombra); transition: all 0.2s; }
.ajuda-btn:hover { transform: scale(1.1); }
.recorde { margin-top: 1.5rem; font-weight: 600; background-color: var(--cor-painel); padding: 8px 15px; border-radius: 20px; border: 1px solid var(--cor-borda); color: var(--cor-texto); }
.recorde span { color: var(--cor-sucesso); }
.ajuda-texto { text-align: left; margin: 20px 0; max-width: 400px; }
.ajuda-texto p { margin-bottom: 10px; display: flex; align-items: center; }
.pino-exemplo { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); display: inline-block; margin-right: 10px; flex-shrink: 0; }
.pino-exemplo.preto { background-color: black; }
.pino-exemplo.branco { background-color: white; }
.mastermind-area { background: var(--cor-painel); border: 1px solid var(--cor-borda); padding: 1.5rem; border-radius: 16px; box-shadow: 0 4px 15px var(--cor-sombra); }
.codigo-secreto { display: flex; justify-content: center; gap: 10px; margin-bottom: 1rem; padding: 10px; background-color: var(--cor-fundo); border-radius: 8px; min-height: 50px; }
#codigo-revelado { margin-top: 10px; min-height: auto; }
.tentativa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 5px; border-radius: 8px; background-color: var(--cor-fundo); transition: all 0.2s; }
.tentativa.ativa { outline: 3px solid var(--cor-principal-acao); }
/* ANIMAÇÃO DE VITÓRIA */
.tentativa.venceu { animation: pulse-success 1.2s ease-in-out; }
@keyframes pulse-success { 0% { box-shadow: 0 0 0 0 rgba(96, 165, 97, 0.7); } 50% { box-shadow: 0 0 0 10px rgba(96, 165, 97, 0); } 100% { box-shadow: 0 0 0 0 rgba(96, 165, 97, 0); } }
.pinos-chute, .pinos-feedback { display: flex; gap: 10px; }
.pino-cor { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--cor-borda); background-color: #e0e0e0; }
.pinos-feedback { width: 50px; height: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; }
.pino-resultado { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); background-color: #d1d9e6; transform: scale(0); animation: pop-in 0.3s ease-out forwards; }
.pino-resultado:nth-child(2) { animation-delay: 0.1s; } .pino-resultado:nth-child(3) { animation-delay: 0.2s; } .pino-resultado:nth-child(4) { animation-delay: 0.3s; } .pino-resultado:nth-child(5) { animation-delay: 0.4s; }
@keyframes pop-in { from { transform: scale(0); } to { transform: scale(1); } }
.pino-resultado.preto { background-color: black; }
.pino-resultado.branco { background-color: white; }
.paleta-container { margin-top: 2rem; }
#paleta-cores { display: flex; justify-content: center; gap: 15px; margin-top: 1rem; flex-wrap: wrap; }
.cor-selecao { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform 0.2s; }
.cor-selecao:hover { transform: scale(1.1); border-color: var(--cor-principal-acao); }
.controles-mastermind { display: flex; gap: 1rem; margin-top: 2rem; justify-content: center; }
.controles-mastermind .action-btn { background: var(--cor-sucesso); }
.controles-mastermind .reset-btn { background: var(--cor-erro); margin-top: 0; }
.popup-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 10; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.popup-container.show { opacity: 1; pointer-events: auto; }
.popup { background: var(--cor-fundo); padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transform: scale(0.95); transition: transform 0.3s ease; }
.popup-container.show .popup { transform: scale(1); }
/* ADICIONE ESTA REGRA NO FINAL DO ARQUIVO */

.titulo-com-ajuda {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 0.75rem; /* Ajusta o espaçamento do título */
}