:root {
    --red: #ef4444;
    --blue: #3b82f6;
    --yellow: #f59e0b;
    --green: #10b981;
    --purple: #8b5cf6;
    --pink: #ec4899;
    --indigo: #6366f1;
    --teal: #14b8a6;
}

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

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

.game-over {
    animation: shake 0.5s ease-in-out;
    background: linear-gradient(45deg, var(--red), var(--pink), var(--purple));
    background-size: 400% 400%;
    animation: gradient 2s ease infinite, shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    transition: background 0.5s ease;
}