/* styles.css */

/* ------------------------- */
/* Reset Básico e Box Model  */
/* ------------------------- */
* {
  box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho do elemento */
  margin: 0;             /* Remove margens padrão */
  padding: 0;            /* Remove paddings padrão */
}

/* ------------------------- */
/* Estilos Globais e Body    */
/* ------------------------- */
body {
    /* Gradiente de fundo escuro */
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    /* Cor de texto padrão clara */
    color: #e0e0ff;
    /* Fonte padrão (fallback para sans-serif) */
    font-family: 'Arial', sans-serif;
    /* Layout flexível para ocupar toda a altura e centralizar */
    display: flex;
    flex-direction: column; /* Empilha main e footer verticalmente */
    min-height: 100vh;      /* Garante que o body ocupe pelo menos toda a altura da viewport */
    line-height: 1.6;       /* Melhora a legibilidade */
}

/* ------------------------- */
/* Layout Principal          */
/* ------------------------- */
.main-content {
    /* Área principal flexível para ocupar espaço disponível */
    flex-grow: 1;
    /* Centraliza o container do jogo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px; /* Espaçamento nas laterais e topo/base */
}

/* ------------------------- */
/* Container do Jogo         */
/* ------------------------- */
.game-container {
    /* Fundo escuro semi-transparente */
    background: rgba(40, 42, 54, 0.85); /* Cor base Dracula com transparência */
    padding: 30px;
    border-radius: 15px;
    /* Sombra sutil para dar profundidade */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    text-align: center;
    /* Largura máxima para evitar que fique muito largo em telas grandes */
    max-width: 550px;
    width: 95%; /* Responsivo em telas menores */
    border: 1px solid #6272a4; /* Borda sutil com cor da paleta */
}

/* ------------------------- */
/* Cabeçalho (Título)        */
/* ------------------------- */
h1 {
    /* Fonte especial Orbitron */
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5em; /* Tamanho grande e impactante */
    margin-bottom: 15px;
    font-weight: 700;
    /* Remove seleção de texto para estética */
    user-select: none;
}

/* Estilo específico para a parte "GΞΞK" do título */
h1 .geek {
    color: #50fa7b; /* Verde neon */
    text-shadow: 0 0 5px rgba(80, 250, 123, 0.7); /* Brilho suave */
}

/* Estilo específico para a parte "CΦDΞ/FORCA" do título */
h1 .code {
    color: #ff79c6; /* Rosa neon */
    text-shadow: 0 0 5px rgba(255, 121, 198, 0.7); /* Brilho suave */
}

/* ------------------------- */
/* Placar                    */
/* ------------------------- */
#scoreboard {
    font-size: 1.1em;
    color: #bd93f9; /* Roxo claro */
    margin-bottom: 15px;
    font-weight: bold;
    /* Layout flexível para espaçamento */
    display: flex;
    justify-content: center;
    gap: 25px; /* Espaço entre os scores */
    flex-wrap: wrap; /* Quebra linha em telas pequenas */
}

#scoreboard span span {
    color: #f1fa8c; /* Amarelo claro para os números */
}

/* ------------------------- */
/* Display da Palavra        */
/* ------------------------- */
#word-display {
    font-size: 2.2em;
    color: #f8f8f2; /* Branco Dracula */
    margin: 20px 0;
    letter-spacing: 8px; /* Espaçamento entre letras/underscores */
    min-height: 45px; /* Altura mínima para evitar colapso */
    font-weight: bold;
    user-select: none; /* Evita seleção acidental */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ------------------------- */
/* Canvas da Forca           */
/* ------------------------- */
#hangman {
    /* Canvas com tamanho definido no HTML */
    margin: 10px auto 15px auto; /* Centraliza e adiciona margens */
    display: block; /* Garante que margem auto funcione */
    /* background-color: rgba(255, 255, 255, 0.05); */ /* Fundo sutil (opcional) */
    /* border-radius: 5px; */ /* Borda arredondada (opcional) */
}

/* ------------------------- */
/* Teclado Virtual           */
/* ------------------------- */
#keyboard {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Espaçamento entre teclas */
    justify-content: center;
    margin: 20px 0;
    max-width: 450px; /* Limita largura do teclado */
    margin-left: auto;  /* Centraliza o teclado se for menor que o container */
    margin-right: auto;
}

/* Estilo base das teclas */
.key {
    width: 40px;
    height: 40px;
    background: #44475a; /* Cinza escuro */
    color: #f8f8f2; /* Branco Dracula */
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; /* Centraliza o texto na tecla */
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

/* Efeito ao passar o mouse sobre a tecla */
.key:hover:not(:disabled) { /* Não aplica hover se desabilitado */
    background: #6272a4; /* Cinza mais claro */
    transform: translateY(-2px); /* Leve elevação */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.4);
}

/* Estilo da tecla desabilitada */
.key:disabled {
    background: #282a36; /* Cor base Dracula (bem escura) */
    color: #6272a4; /* Cor de texto apagada */
    cursor: not-allowed;
    transform: none; /* Remove elevação */
    box-shadow: none; /* Remove sombra */
}

/* ------------------------- */
/* Status e Mensagem Final   */
/* ------------------------- */
#status {
    font-size: 1.1em;
    color: #f1fa8c; /* Amarelo claro */
    margin: 10px 0;
    min-height: 25px;
    font-weight: bold;
}

#final-message {
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 15px;
    min-height: 30px;
    color: #ff79c6; /* Rosa neon (cor padrão para derrota) */
    text-shadow: 0 0 4px rgba(255, 121, 198, 0.6);
}

/* Classe para mensagem de vitória */
#final-message.winner {
     color: #50fa7b; /* Verde neon */
     text-shadow: 0 0 4px rgba(80, 250, 123, 0.6);
}

/* ------------------------- */
/* Botão de Controle (Reset) */
/* ------------------------- */
.control-button {
    padding: 12px 35px;
    font-size: 1.1em;
    font-weight: bold;
    background: #bd93f9; /* Roxo claro */
    color: #282a36; /* Texto escuro para contraste */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-top: 15px;
    text-transform: uppercase; /* Deixa o texto em maiúsculas */
}

/* Efeito hover no botão de controle */
.control-button:hover:not(:disabled) {
    background: #caa9fa; /* Roxo um pouco mais claro */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(189, 147, 249, 0.4); /* Sombra roxa */
}

/* Estilo do botão desabilitado */
.control-button:disabled {
     background: #44475a; /* Cinza escuro */
     color: #6272a4; /* Cor de texto apagada */
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
}

/* ------------------------- */
/* Rodapé                    */
/* ------------------------- */
footer {
    /* Não cresce, mantendo-se no final */
    flex-shrink: 0;
    /* Fundo ligeiramente diferente para destacar */
    background: #16213e;
    color: #8be9fd; /* Ciano claro para texto do rodapé */
    padding: 15px 10px;
    text-align: center;
    font-size: 0.9em;
    margin-top: 20px; /* Espaço acima do rodapé */
    border-top: 1px solid #44475a; /* Linha sutil de separação */
}

.footer-links {
    margin-bottom: 8px;
}

.footer-links a {
    color: #bd93f9; /* Roxo claro para links */
    text-decoration: none; /* Remove sublinhado */
    margin: 0 5px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #50fa7b; /* Verde neon no hover */
    text-decoration: underline; /* Adiciona sublinhado no hover */
}

.footer-links span {
    color: #6272a4; /* Cinza para separadores */
    margin: 0 3px;
}

.copyright {
    font-size: 0.85em;
    color: #6272a4; /* Cinza mais claro */
}

/* Estilos .geek e .code também no rodapé */
.footer-links .geek, .copyright .geek {
    color: #50fa7b;
    font-weight: bold;
}
.footer-links .code, .copyright .code {
    color: #ff79c6;
    font-weight: bold;
}

/* ------------------------- */
/* Responsividade            */
/* ------------------------- */

/* Telas Médias (Tablets e Desktops pequenos) */
@media (max-width: 600px) {
    h1 {
        font-size: 2em; /* Reduz tamanho do título */
    }

    #word-display {
        font-size: 1.8em; /* Reduz tamanho da palavra */
        letter-spacing: 6px;
    }

    .key {
        width: 35px; /* Reduz tamanho das teclas */
        height: 35px;
        font-size: 1em;
    }

    #keyboard {
        gap: 6px; /* Reduz espaçamento das teclas */
        max-width: 100%; /* Permite que o teclado use mais largura */
    }

    .game-container {
        padding: 20px; /* Reduz padding interno */
    }

    .control-button {
        padding: 10px 30px; /* Reduz padding do botão */
        font-size: 1em;
    }

    #hangman {
        width: 140px;  /* Reduz ligeiramente o canvas */
        height: 160px;
    }
}

/* Telas Pequenas (Smartphones) */
@media (max-width: 420px) {
    h1 {
        font-size: 1.7em; /* Reduz ainda mais o título */
    }

     #scoreboard {
        font-size: 1em;
        gap: 15px; /* Menos espaço no placar */
    }

    #word-display {
        font-size: 1.5em; /* Reduz palavra */
        letter-spacing: 4px;
        margin: 15px 0;
    }

    .key {
        width: 32px; /* Teclas ainda menores */
        height: 32px;
        font-size: 0.9em;
    }

     #keyboard {
        gap: 5px; /* Espaçamento mínimo */
    }

    .game-container {
        padding: 15px; /* Padding mínimo */
        width: 98%; /* Quase largura total */
    }

     #status, #final-message {
        font-size: 1em; /* Reduz texto de status/final */
     }

     #final-message {
         font-size: 1.1em;
     }

    .control-button {
        padding: 9px 25px;
    }

     #hangman {
        width: 120px; /* Canvas menor */
        height: 140px;
    }

    footer {
        font-size: 0.8em; /* Texto do rodapé menor */
    }

    .footer-links a, .footer-links span {
        margin: 0 2px; /* Menos espaço nos links do rodapé */
    }
}