/* forca.css (versão aprimorada) */

#jogo-forca .game-options { margin-bottom: 2rem; }
.forca-info-bar { display: flex; justify-content: space-around; align-items: center; width: 100%; max-width: 500px; margin-bottom: 1rem; font-weight: 600; font-size: 1.2rem; }
.forca-info-bar .recorde { background-color: var(--cor-painel); padding: 5px 15px; border-radius: 20px; border: 1px solid var(--cor-borda); color: var(--cor-texto); }
.forca-info-bar .recorde span { color: var(--cor-sucesso); }
.forca-wrapper { display: flex; align-items: flex-end; justify-content: center; margin-bottom: 1.5rem; }
.forca-desenho { stroke: var(--cor-titulo); stroke-width: 4px; fill: none; }
.forca-parte { visibility: hidden; transition: visibility 0.2s; stroke-linecap: round; }
.forca-palavra { 
    display: flex; 
    gap: 15px; /* Aumenta o espaçamento entre as letras */
    flex-wrap: wrap; 
    justify-content: center; 
    margin-bottom: 1.5rem; 
    min-height: 80px; 
}
.forca-letra { 
    width: 60px; /* Aumenta a largura */
    height: 70px; /* Aumenta a altura */
    border-bottom: 4px solid var(--cor-principal-acao); 
    font-size: 3.5rem; /* Aumenta o tamanho da fonte */
    font-weight: 600; 
    color: var(--cor-titulo); 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    text-transform: uppercase; 
}
.forca-letras-erradas { margin-bottom: 1.5rem; font-size: 1.2rem; min-height: 50px;}
.forca-letras-erradas p { font-weight: 600; margin-bottom: 5px; }
.forca-letras-erradas span { color: var(--cor-erro); font-weight: bold; text-transform: uppercase; }
.forca-teclado { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; /* Aumenta o espaçamento entre os botões */
    justify-content: center; 
    width: 100%; /* O teclado pode ocupar a largura total do contêiner */
    max-width: 650px; 
    margin: 20px auto; /* Centraliza o teclado na página */
}
/* CORREÇÃO APLICADA AQUI: Seletor mais específico e remoção do max-width global */
#forca-teclado button {
    max-width: none;
    width: 60px; /* Aumenta a largura do botão */
    height: 60px; /* Aumenta a altura do botão */
    font-size: 2rem; /* Aumenta a fonte do botão */
    font-weight: 600; 
    cursor: pointer; 
    border: 1px solid var(--cor-borda); 
    border-radius: 8px; 
    background-color: #fff; 
    color: var(--cor-principal); 
    transition: all 0.2s; 
}
#forca-teclado button:disabled { background-color: #d1d9e6; color: #94a3b8; cursor: not-allowed; }
.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; }
.popup-container.show { display: flex; }
.popup { background: var(--cor-fundo); padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.popup button { margin-top: 20px; }
/* Adicione esta regra ao seu forca.css */

#forca-dica {
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--cor-principal-acao);
}