/* style.css */

/* Variáveis de cores e tamanhos */
:root {
    --background-opacity: 0.5;
    --primary-font: Arial, sans-serif;
    --color-white: #fff;
    --color-black: #000;
    --color-green: green;
    --color-red: red;
    --color-gray: #333;
    --animation-duration: 0.5s;
    --nucleotide-size: 100px;
    --slot-border-color: #999;
    --slot-correct-border-color: green;
    --slot-incorrect-border-color: red;
    --transition-ease: 0.3s ease;
}

/* Corpo da página */
body {
    font-family: var(--primary-font);
    display: block; /* Remove flex do body */
    margin: 0; /* Remove margens padrão */
    padding: 0; /* Remove padding padrão */
    overflow-x: hidden; /* Evitar rolagem horizontal */
    background: url('../img/logo.webp') center top no-repeat, rgba(255, 255, 255, 0.3);
    background-size: 115%;
    background-position-y: center;
    animation: colorChange 45s infinite alternate;
}

/* Animação de cor de fundo */
@keyframes colorChange {
    0% { background-color: rgba(255, 0, 0, var(--background-opacity)); }
    25% { background-color: rgba(0, 255, 0, var(--background-opacity)); }
    50% { background-color: rgba(0, 0, 255, var(--background-opacity)); }
    75% { background-color: rgba(255, 255, 0, var(--background-opacity)); }
    100% { background-color: rgba(255, 0, 255, var(--background-opacity)); }
}

/* Título do jogo */
.game-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2em;
    color: var(--color-white);
    text-shadow: 2px 2px 5px var(--color-black);
}

/* Barra de Status */
.status-bar {
    display: flex; /* Flexbox para distribuição interna */
    justify-content: space-between; /* Espaçamento entre elementos internos */
    align-items: center; /* Centralizar verticalmente o conteúdo interno */
    width: 100%; /* Largura total do contêiner pai */
    max-width: 800px; /* Largura máxima para limitar o tamanho */
    margin: 0 auto 20px auto; /* Centralizar horizontalmente e adicionar margem inferior */
    padding: 15px 25px; /* Aumentar padding para espaçamento */
    background: linear-gradient(135deg, #6b11cb50, #2574fc62); /* Fundo de gradiente moderno */
    border-radius: 15px; /* Bordas arredondadas para suavizar */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para profundidade */
    box-sizing: border-box; /* Inclui padding e bordas no cálculo de largura */
}

/* Estilo para a contagem de pontos */
.score-board {
    font-size: 1.8em; /* Aumentar o tamanho da fonte para destaque */
    color: #ffffff; /* Texto branco para contraste */
    font-weight: bold; /* Negrito para melhor legibilidade */
    display: flex; /* Flexbox para alinhar ícones e texto */
    align-items: center; /* Centralizar verticalmente */
    gap: 8px; /* Espaçamento entre ícone e texto */
}

/* Ícone para contagem de pontos (opcional) */
.score-board::before {
    content: '⭐'; /* Ícone de estrela */
    font-size: 1.5em; /* Tamanho do ícone */
    color: #ffd700; /* Cor dourada para o ícone */
    margin-right: 5px; /* Espaçamento entre o ícone e a pontuação */
}

/* Estilo para vidas */
.lives {
    display: flex;
    gap: 10px;
}

.life {
    width: 40px;
    height: 40px;
    opacity: 1;
    transition: opacity var(--transition-ease);
}

@keyframes lifeLostPulse {
    0% {
        transform: scale(1); /* Tamanho original */
        opacity: 1; /* Opacidade total */
    }
    50% {
        transform: scale(1.3); /* Leve aumento */
        opacity: 0.5; /* Leve desbotamento */
    }
    100% {
        transform: scale(1); /* Voltar ao tamanho original */
        opacity: 1; /* Voltar à opacidade total */
    }
}

/* Classe para aplicar animação de pulso em vida perdida */
.life.lost {
    animation: lifeLostPulse 0.7s ease-in-out 4; /* Animação de pulso por 3 vezes */
    opacity: 0.5; /* Opacidade reduzida para indicar vida perdida */
    transition: opacity 0.3s ease; /* Transição suave de opacidade */
}

/* Animação de aumento ao adicionar pontos */
@keyframes scoreIncrease {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); } /* Leve aumento */
    100% { transform: scale(1); }
}

/* Aplicando animação ao atualizar a pontuação */
.score-board.updated {
    animation: scoreIncrease 0.5s ease-out; /* Animação suave */
}


/* Container principal */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 20px auto; /* Centralizar o container */
    padding: 10px; /* Padding interno */
    box-sizing: border-box; /* Inclui padding e borda na largura total */
    min-height: 100vh; /* Altura mínima de 100% da viewport */
    overflow-y: visible; /* Permitir que o conteúdo se expanda */
}

/* Coluna de nucleotídeos */
.nucleotides-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto; /* Permitir rolagem horizontal */
}

/* Nucleotídeo */
.nucleotide {
    width: var(--nucleotide-size);
    height: var(--nucleotide-size);
    cursor: grab;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    background-color: var(--color-white);
}

/* Área de drop */
.drop-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    min-height: 100px;
    margin-top: 20px;
    overflow-x: auto; /* Permitir rolagem horizontal */
}

/* Contêiner para slots e letras */
.slot-container {
    display: flex;
    flex-direction: column; /* Alinhar o slot e a letra verticalmente */
    align-items: center;
    margin: 10px;
    background: linear-gradient(135deg, #ffffff, #f0f0f0); /* Fundo de gradiente suave */
    border-radius: 12px; /* Bordas mais arredondadas */
    padding: 10px; /* Padding interno para espaçamento */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
}

/* Slots de nucleotídeos */
.slot {
    width: var(--nucleotide-size);
    height: var(--nucleotide-size);
    border: 2px solid var(--slot-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 10px; /* Bordas mais arredondadas */
    background-color: rgba(255, 255, 255, 0.9); /* Fundo branco semitransparente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */
    transition: border-color var(--transition-ease), transform 0.2s ease, box-shadow 0.2s ease; /* Transições suaves */
    cursor: pointer;
}
.slot:hover, .slot.dragover {
    background-color: #e0f7fa; /* Fundo azul claro ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra mais intensa no hover */
    transform: scale(1.05); /* Leve aumento no hover */
}
/* Estilos para dicas de letras */
.letter-hint {
    margin-top: 8px; /* Espaço entre o slot e a letra */
    font-size: 1.4em; /* Ajuste de tamanho da fonte */
    font-weight: bold; /* Negrito para destaque */
    color: var(--color-black); /* Cor do texto */
    pointer-events: none; /* Para não interferir com o drag-drop */
    text-align: center;
}

/* Nucleotídeo dentro de um slot */
.slot .nucleotide {
    background-color: transparent;
    border: none;
    width: 80%; /* Ajuste de tamanho para caber no slot */
    height: 80%;
}


/* Slot correto */
.slot.correct {
    display: flex; /* Alinhamento flexível */
    border-color: var(--slot-correct-border-color); /* Cor de borda verde */
    animation: correctPulse var(--animation-duration); /* Animação de pulso */
    background: linear-gradient(135deg, #a5d6a7, #81c784); /* Fundo de gradiente verde */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); /* Efeito de brilho */
}
.slot.correct img {
    scale: 0.9;
}

/* Esconder dica de letra se o slot estiver correto */
.slot.correct .letter-hint {
    display: none; /* Esconder a letra quando o slot estiver correto */
}

/* Animação de slot correto */
@keyframes correctPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 255, 0, 1); }
}

/* Slot incorreto */
.slot.incorrect {
    border-color: var(--slot-incorrect-border-color); /* Cor de borda vermelha */
    animation: incorrectShake var(--animation-duration); /* Animação de tremer */
    background: linear-gradient(135deg, #ffcdd2, #e57373); /* Fundo de gradiente vermelho */
}


/* Animação de slot incorreto */
@keyframes incorrectShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Feedback */
.feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px; /* Mais espaçamento para destaque */
    border-radius: 12px; /* Bordas mais arredondadas */
    display: none; /* Inicialmente oculto */
    text-align: center;
    color: #fff; /* Texto branco para contraste */
    font-size: 2em; /* Fonte maior para destaque */
    font-weight: bold; /* Texto em negrito */
    background: linear-gradient(135deg, #4caf50, #81c784); /* Fundo de gradiente suave */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(76, 175, 80, 0.5); /* Sombra para profundidade e brilho */
    z-index: 1000;
    animation: feedbackAppear 1.2s ease-out 2s; /* Animação de entrada suave */
}

/* Animação de entrada para feedback */
@keyframes feedbackAppear {
    0% {
        transform: translate(-50%, -50%) scale(0.8); /* Começa menor e um pouco fora de foco */
        opacity: 0; /* Invisível no início */
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1); /* Leve expansão */
        opacity: 1; /* Totalmente visível */
    }
    100% {
        transform: translate(-50%, -50%) scale(1); /* Volta ao tamanho normal */
    }
}

/* Pontuação */
#score {
    color: var(--color-black);
    transition: color var(--transition-ease);
}

/* Tela de Fim de Jogo */
.game-over {
    position: fixed;
    top: 50%; /* Centralizar verticalmente */
    left: 50%; /* Centralizar horizontalmente */
    transform: translate(-50%, -50%); /* Ajustar para centro exato */
    background-color: rgba(0, 0, 0, 0.85); /* Fundo escuro semitransparente */
    padding: 40px 20px; /* Espaçamento interno */
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra para profundidade */
    border-radius: 15px; /* Bordas arredondadas */
    z-index: 2000;
    display: none; /* Mantido oculto até o fim do jogo */
    width: 90%;
    max-width: 400px; /* Limitar largura máxima */
    animation: fadeIn 0.5s ease-out; /* Animação de entrada suave */
}

/* Animação de entrada suave */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); } /* Começa fora da tela */
    to { opacity: 1; transform: translate(-50%, -50%); } /* Animação para o centro */
}

/* Título "Game Over" */
.game-over h2 {
    font-size: 2.5em; /* Tamanho maior para destaque */
    margin-bottom: 20px; /* Espaçamento inferior */
    color: #efe8e8; /* Cor clara para contraste */
    text-shadow: 2px 2px 5px #000; /* Sombra de texto para destacar */
    margin-top: 0; /* Remover margem superior */
}

/* Pontuação final */
p#final-score {
    font-size: 1.5em; /* Tamanho maior para visibilidade */
    color: #ffffff; /* Cor branca para contraste */
    margin-bottom: 20px; /* Espaçamento inferior */
    font-weight: bold; /* Negrito para destaque */
}

/* Botão de reiniciar */
#restart-btn {
    padding: 12px 24px; /* Mais espaçamento para clique fácil */
    font-size: 1.2em; /* Aumentar o tamanho da fonte */
    color: #fff; /* Texto branco */
    background-color: #007bff; /* Cor de fundo azul */
    border: none; /* Remover bordas padrão */
    border-radius: 8px; /* Bordas arredondadas */
    cursor: pointer; /* Indicador de clique */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
}

/* Hover no botão de reiniciar */
#restart-btn:hover {
    background-color: #0056b3; /* Cor de fundo mais escura */
    transform: scale(1.05); /* Leve aumento no hover */
}

/* Animação de brilho correto */
@keyframes correctGlow {
    0% { box-shadow: 0 0 0 rgba(0, 255, 0, 0.8); }
    50% { box-shadow: 0 0 10px rgba(0, 255, 0, 1); }
    100% { box-shadow: 0 0 0 rgba(0, 255, 0, 0.8); }
}

.slot.correct-glow {
    animation: correctGlow var(--animation-duration) ease-out;
}
/* Estilos de rolagem para contêineres */
.nucleotides-scroll, .drop-scroll {
    max-height: 150px; /* Altura máxima ajustável */
    overflow-y: auto; /* Permitir rolagem vertical */
    display: flex;
    flex-wrap: wrap; /* Flex para layout responsivo */
    justify-content: center;
    padding: 5px;
    width: 100%; /* Para alinhar ao contêiner principal */
}


/* Media Queries para dispositivos móveis */
@media (max-width: 600px) {
    .status-bar {
        flex-direction: column;
        align-items: center;
    }

    /* Modo compacto para contêiner principal */
    .container {
        display: flex;
        flex-direction: column; /* Empilhar elementos verticalmente */
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
        padding: 0 10px; /* Padding para dar espaço */
    }

    /* Área de nucleotídeos e slots ajustada */
    .nucleotides-column, .drop-area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: auto; /* Permitir rolagem horizontal */
        padding: 10px;
    }
    .nucleotides-column .nucleotide{
        width: 90px;
        height: 90px;
    }    

    /* Nucleotídeos menores para caberem na tela */
    .nucleotide, .slot {
        min-width: 60px;
        min-height: 60px;
        width: 60px;
        height: 60px;
        padding: 0;
        margin: 5px; /* Margem menor para dispositivos móveis */
    }

    /* Estilo para o contêiner do slot */
    .slot-container {
        margin: 5px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 5px;
        flex-basis: 60px; /* Para manter o tamanho dos slots consistente */
    }

    /* Ajustes de feedback e botões */
    .game-title {
        font-size: 1.5em;
    }
    
    .feedback {
        width: 90%; /* Tornar feedback adaptável ao dispositivo */
    }
}