/* ===== IMPORTAÇÕES ===== */
@import url('layouts/start-screen.css');
@import url('layouts/game-screen.css');
@import url('layouts/results-screen.css');
@import url('components/header.css');
@import url('components/images.css');

/* ===== ESTILOS GLOBAIS DO JOGO ===== */
.game-container {
    min-height: 60vh;
}

@media (max-width: 1024px) {
    .game-container {
        min-height: 40vh;
    }
}

/* ===== ANIMAÇÕES GLOBAIS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes confetti-fall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(var(--bs-success-rgb), 0.3); }
    50% { box-shadow: 0 0 20px rgba(var(--bs-success-rgb), 0.6); }
    100% { box-shadow: 0 0 5px rgba(var(--bs-success-rgb), 0.3); }
}

/* ===== CLASSES DE UTILIDADE ===== */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.shake {
    animation: shake 0.5s ease-in-out;
}