/* Cell Animations */
@keyframes cellReveal {
    0% {
        transform: scale(0.8) rotateX(90deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes cellFlip {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    50% {
        transform: rotateY(90deg) scale(1.05);
    }
    100% {
        transform: rotateY(180deg) scale(1);
    }
}

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

@keyframes mineExplode {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.3) rotate(10deg);
    }
    100% {
        transform: scale(0.8) rotate(20deg);
        opacity: 0.7;
    }
}

@keyframes flagWave {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Button Animations */
@keyframes buttonHover {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-2px) scale(1.02);
    }
}

@keyframes buttonClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
    }
}

/* Status Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Number Color Animations */
@keyframes numberPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Victory Animation */
@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(5deg);
    }
    75% {
        transform: scale(1.1) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Confetti Animation */
@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotateZ(720deg);
        opacity: 0;
    }
}

@keyframes confettiSpin {
    0% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateZ(360deg) rotateX(180deg) rotateY(180deg);
    }
}

@keyframes celebrationPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

@keyframes celebrationBurst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0;
    }
}

@keyframes victoryTextFloat {
    0% {
        transform: translateY(50px) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0.9);
        opacity: 0;
    }
}

@keyframes fireworkBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

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

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

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

@keyframes victoryShake {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    10% {
        transform: translateX(-10px) translateY(-5px);
    }
    20% {
        transform: translateX(10px) translateY(5px);
    }
    30% {
        transform: translateX(-8px) translateY(-3px);
    }
    40% {
        transform: translateX(8px) translateY(3px);
    }
    50% {
        transform: translateX(-5px) translateY(-2px);
    }
}

@keyframes celebrationRise {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50vh) scale(1);
        opacity: 0;
    }
}

@keyframes sparkle {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes victoryGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 30px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes boardRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
    }
    50% {
        transform: rotateX(5deg) rotateY(5deg) scale(1.02);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg) scale(1);
    }
}

@keyframes textSparkle {
    0%, 100% {
        text-shadow: 
            0 0 0 rgba(99, 102, 241, 0.8),
            0 0 0 rgba(236, 72, 153, 0.8);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(99, 102, 241, 1),
            0 0 30px rgba(236, 72, 153, 1);
    }
}

/* ============================================
   GRAND CELEBRATION ANIMATIONS - ENHANCED
   ============================================ */

/* Sophisticated Confetti Animations */
@keyframes confettiFallLeft {
    0% {
        transform: translateY(-100vh) translateX(0) rotateZ(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(-100px) rotateZ(180deg);
        opacity: 1;
    }
    100% {
        transform: translateY(150vh) translateX(-200px) rotateZ(360deg);
        opacity: 0;
    }
}

@keyframes confettiFallRight {
    0% {
        transform: translateY(-100vh) translateX(0) rotateZ(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(100px) rotateZ(180deg);
        opacity: 1;
    }
    100% {
        transform: translateY(150vh) translateX(200px) rotateZ(360deg);
        opacity: 0;
    }
}

@keyframes confettiSpiral {
    0% {
        transform: translateY(-100vh) scale(0) rotateZ(0deg);
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) scale(1) rotateZ(720deg);
        opacity: 0;
    }
}

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

@keyframes rainbowShift {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes explosionBurst {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.3) rotate(360deg);
        opacity: 0;
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(99, 102, 241, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

@keyframes starburst {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateZ(0);
        opacity: 0;
    }
}

@keyframes ribbonWave {
    0% {
        transform: translateY(-100vh) rotateX(0deg) skewY(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) rotateX(45deg) skewY(10deg);
        opacity: 1;
    }
    100% {
        transform: translateY(150vh) rotateX(90deg) skewY(20deg);
        opacity: 0;
    }
}

@keyframes diamondSpin {
    0% {
        transform: translateY(-100vh) rotate(0deg) scale(0);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) rotate(180deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(150vh) rotate(360deg) scale(0);
        opacity: 0;
    }
}

@keyframes flutterBounce {
    0% {
        transform: translateY(-100vh) scaleY(1);
        opacity: 1;
    }
    25% {
        transform: translateY(-50vh) scaleY(0.8);
    }
    50% {
        transform: translateY(20vh) scaleY(1.1);
        opacity: 1;
    }
    75% {
        transform: translateY(80vh) scaleY(0.9);
    }
    100% {
        transform: translateY(150vh) scaleY(1);
        opacity: 0;
    }
}

@keyframes elegantFloat {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(150vh) translateX(50px) rotate(180deg);
        opacity: 0;
    }
}

@keyframes supernovaExplode {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: scale(1.3) rotate(90deg);
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes magicCascade {
    0% {
        transform: translateY(-200vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(200vh) translateX(0) scale(0);
        opacity: 0;
    }
}

/* Enhanced text animations */
@keyframes glitterFloat {
    0% {
        transform: translateY(-50px) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: translateY(-100px) scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes royalGlow {
    0% {
        text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(99, 102, 241, 1),
            0 0 40px rgba(236, 72, 153, 1),
            0 0 60px rgba(16, 185, 129, 0.8);
    }
    100% {
        text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    }
}

@keyframes expandingRing {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.8);
    }
    70% {
        box-shadow: 0 0 0 100px rgba(99, 102, 241, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

@keyframes colorfulShimmer {
    0% {
        background: linear-gradient(45deg, #6366f1, #ec4899);
        background-position: 0%;
    }
    50% {
        background: linear-gradient(45deg, #ec4899, #10b981);
        background-position: 50%;
    }
    100% {
        background: linear-gradient(45deg, #10b981, #6366f1);
        background-position: 100%;
    }
}

@keyframes multiColorFlash {
    0% { background: #6366f1; }
    25% { background: #ec4899; }
    50% { background: #10b981; }
    75% { background: #f59e0b; }
    100% { background: #6366f1; }
}

/* ============================================
   DRAMATIC MINE EXPLOSION ANIMATIONS
   ============================================ */

@keyframes mineInitialCrack {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1) rotate(5deg);
        filter: brightness(1.2);
    }
    50% {
        transform: scale(1.2) rotate(-5deg);
        filter: brightness(1.4);
    }
    75% {
        transform: scale(1.3) rotate(8deg);
        filter: brightness(1.5);
    }
    100% {
        transform: scale(0) rotate(360deg);
        filter: brightness(0);
    }
}

@keyframes mineChainReaction {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes mineShockwave {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes mineSpark {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        opacity: 0;
    }
}

@keyframes mineCrack {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) rotate(45deg);
        opacity: 0;
    }
}

@keyframes mineFlash {
    0% {
        background-color: #fbbf24;
        box-shadow: 0 0 10px #fbbf24;
    }
    50% {
        background-color: #ff6b00;
        box-shadow: 0 0 30px #ff6b00;
    }
    100% {
        background-color: #ef4444;
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes screenShake {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    10% {
        transform: translateX(-8px) translateY(-8px);
    }
    20% {
        transform: translateX(8px) translateY(-8px);
    }
    30% {
        transform: translateX(-8px) translateY(8px);
    }
    40% {
        transform: translateX(8px) translateY(8px);
    }
    50% {
        transform: translateX(-6px) translateY(-6px);
    }
    60% {
        transform: translateX(6px) translateY(-6px);
    }
    70% {
        transform: translateX(-4px) translateY(4px);
    }
    80% {
        transform: translateX(4px) translateY(4px);
    }
    90% {
        transform: translateX(-2px) translateY(-2px);
    }
}

@keyframes screenRedFlash {
    0% {
        background-color: rgba(239, 68, 68, 0);
    }
    50% {
        background-color: rgba(239, 68, 68, 0.3);
    }
    100% {
        background-color: rgba(239, 68, 68, 0);
    }
}

@keyframes chainReactionGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7);
    }
    100% {
        box-shadow: 0 0 0 30px rgba(255, 107, 0, 0);
    }
}