/* === Symbol Win Animation === */
@keyframes symbolWin {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    100% {
        transform: scale(1.15);
        filter: brightness(1.4);
        text-shadow: 0 0 20px rgba(0, 153, 255, 0.8);
    }
}

/* === Jackpot Pulse === */
@keyframes jackpotPulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 159, 28, 0.6);
    }
    100% {
        transform: scale(1.1);
        text-shadow: 0 0 40px rgba(255, 159, 28, 1), 0 0 60px rgba(255, 159, 28, 0.8);
    }
}

/* === Jackpot Ticker Glow === */
@keyframes tickerGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 159, 28, 0.4);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 159, 28, 0.8), 0 0 30px rgba(255, 159, 28, 0.4);
    }
}

#jackpot-display {
    animation: tickerGlow 2s ease-in-out infinite;
}

/* === Spin Button Pulse (when idle) === */
@keyframes spinPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 153, 255, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 35px rgba(0, 153, 255, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
}

.spin-btn:not(:disabled) {
    animation: spinPulse 2s ease-in-out infinite;
}

.spin-btn:hover {
    animation: none;
}

/* === Big Win Flash === */
@keyframes bigWinFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.big-win-text {
    animation: bigWinFlash 0.3s ease-in-out 5;
    font-size: 2.5rem;
    color: #FF9F1C;
    text-shadow: 0 0 30px rgba(255, 159, 28, 1);
}

/* === Scatter Hit Sparkle === */
@keyframes scatterSparkle {
    0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
    25% { transform: scale(1.3) rotate(5deg); filter: brightness(1.5); }
    50% { transform: scale(1) rotate(-5deg); filter: brightness(1.2); }
    75% { transform: scale(1.2) rotate(3deg); filter: brightness(1.4); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

.symbol.scatter-hit {
    animation: scatterSparkle 0.8s ease-in-out;
}

/* === Reel Bounce on Stop === */
@keyframes reelBounce {
    0% { transform: translateY(var(--overshoot)); }
    40% { transform: translateY(var(--target)); }
    60% { transform: translateY(calc(var(--target) - 5px)); }
    80% { transform: translateY(var(--target)); }
    90% { transform: translateY(calc(var(--target) - 2px)); }
    100% { transform: translateY(var(--target)); }
}

/* === Coin Particle === */
@keyframes coinFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(400px) rotate(720deg) scale(0.5);
    }
}

.coin-particle {
    position: absolute;
    font-size: 1.5rem;
    pointer-events: none;
    z-index: 200;
    animation: coinFall 2s ease-in forwards;
}

/* === Fade In/Out === */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* === Count Up Animation Helper (for JS) === */
.count-up {
    transition: none;
}

/* === Scatter Frame Pulse (Free Spins Trigger) === */
@keyframes scatterFramePulse {
    0%, 100% {
        box-shadow: inset 0 0 0 3px #00D4FF, 0 0 15px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.4);
    }
    50% {
        box-shadow: inset 0 0 0 3px #00D4FF, 0 0 25px rgba(0, 212, 255, 1), 0 0 45px rgba(0, 212, 255, 0.8);
    }
}

/* === Crown Frame Pulse (Bonus Game Trigger) === */
@keyframes crownFramePulse {
    0%, 100% {
        box-shadow: inset 0 0 0 3px #FFD700, 0 0 18px rgba(255, 215, 0, 0.65), 0 0 35px rgba(255, 215, 0, 0.45);
    }
    50% {
        box-shadow: inset 0 0 0 3px #FFD700, 0 0 25px rgba(255, 215, 0, 1), 0 0 45px rgba(255, 215, 0, 0.9);
    }
}

/* === Symbol Highlight Base Class === */
.symbol.highlight {
    border-radius: 8px;
    position: relative;
    z-index: 10;
}

/* === Scatter Highlight (cyan) === */
.symbol.highlight-scatter {
    position: relative;
    z-index: 10;
    animation: scatterFramePulse 0.8s ease-in-out infinite;
}

/* === Crown Highlight (gold/orange) === */
.symbol.highlight-crown {
    position: relative;
    z-index: 10;
    animation: crownFramePulse 0.8s ease-in-out infinite;
}