/* ===== Sparkle Animations ===== */
.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fff 0%, transparent 70%);
    border-radius: 50%;
    animation: sparkle 1s ease-out forwards;
    pointer-events: none;
}

@keyframes sparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(2) rotate(180deg);
        opacity: 0;
    }
}

/* ===== Rainbow Trail ===== */
.rainbow-trail {
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    pointer-events: none;
    animation: rainbowFade 0.5s ease-out forwards;
    z-index: 50;
}

@keyframes rainbowFade {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* ===== Star Burst ===== */
.star-burst {
    position: absolute;
    font-size: 2rem;
    animation: starBurst 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes starBurst {
    0% {
        transform: scale(0) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) translateY(-50px);
        opacity: 0;
    }
}

/* ===== Floating Hearts ===== */
.floating-heart {
    position: fixed;
    font-size: 1.5rem;
    animation: floatUp 2s ease-out forwards;
    pointer-events: none;
    z-index: 60;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(0.5);
        opacity: 0;
    }
}

/* ===== Card Collect Animation ===== */
.card-collect {
    animation: cardCollect 0.8s ease-out forwards;
}

@keyframes cardCollect {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ===== Screen Transitions ===== */
.screen-enter {
    animation: slideIn 0.4s ease-out forwards;
}

.screen-exit {
    animation: slideOut 0.4s ease-out forwards;
}

@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* ===== Pony Bounce ===== */
.pony-bounce {
    animation: ponyBounce 0.5s ease;
}

@keyframes ponyBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-15px) rotate(-5deg); }
    50% { transform: translateY(-25px) rotate(5deg); }
    75% { transform: translateY(-15px) rotate(-3deg); }
}

/* ===== Pony Sad ===== */
.pony-sad {
    animation: ponySad 0.5s ease;
}

@keyframes ponySad {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px) rotate(-3deg); }
}

/* ===== Continuous Idle Animation ===== */
.pony-idle {
    animation: ponyIdle 3s ease-in-out infinite;
}

@keyframes ponyIdle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    75% { transform: translateY(-5px) rotate(-2deg); }
}

/* ===== Button Glow ===== */
.btn-glow {
    animation: btnGlow 2s ease-in-out infinite;
}

@keyframes btnGlow {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(196, 76, 255, 0.4);
    }
    50% {
        box-shadow: 0 6px 30px rgba(196, 76, 255, 0.7), 0 0 60px rgba(196, 76, 255, 0.4);
    }
}

/* ===== Timer Warning ===== */
.timer-warning {
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
        color: #ff4757;
    }
    50% {
        transform: scale(1.1);
        color: #ff6b9d;
    }
}

/* ===== Difficulty Background Animations ===== */
.bg-easy {
    background: linear-gradient(180deg, #e8fff0 0%, #d4f5e9 50%, #e8fff0 100%);
    animation: bgEasy 10s ease-in-out infinite;
}

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

.bg-medium {
    background: linear-gradient(180deg, #fff8e8 0%, #ffe4b5 50%, #fff8e8 100%);
    animation: bgMedium 8s ease-in-out infinite;
}

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

.bg-hard {
    background: linear-gradient(180deg, #ffe8f0 0%, #ffccd5 50%, #ffe8f0 100%);
    animation: bgHard 6s ease-in-out infinite;
}

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

.bg-infinite {
    background: linear-gradient(180deg, #e8f4ff 0%, #d4e6f1 50%, #e8f4ff 100%);
    animation: bgInfinite 12s ease-in-out infinite;
}

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

.bg-hell {
    background: linear-gradient(180deg, #1a0000 0%, #4a0000 25%, #8b0000 50%, #4a0000 75%, #1a0000 100%);
    animation: bgHell 3s ease-in-out infinite;
}

@keyframes bgHell {
    0%, 100% {
        background-position: 0% 0%;
        filter: brightness(1);
    }
    50% {
        background-position: 100% 100%;
        filter: brightness(1.2);
    }
}

/* ===== Number Pop ===== */
.number-pop {
    animation: numberPop 0.3s ease-out;
}

@keyframes numberPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ===== Confetti ===== */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 100;
    animation: confettiFall 3s ease-out forwards;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ===== Shake Animation for Timer ===== */
.shake {
    animation: shake 0.3s ease-in-out;
}

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