/* ===========================
   ANIMATED PAYTABLE STYLES
   =========================== */

/* Paytable Row Hover Animation */
.paytable-row {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.paytable-row:hover {
    transform: translateX(5px);
}

/* Hover State Animation */
.paytable-item.paytable-hover {
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5),
                0 0 20px rgba(255, 215, 0, 0.3) !important;
}

/* Symbol Display Animations */
.paytable-hover .symbol-text {
    animation: symbolPulse 0.6s ease-in-out infinite;
}

@keyframes symbolPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }
}

/* Jackpot Tier Special Effects */
.paytable-jackpot .paytable-item {
    border: 2px solid #ffd700;
}

.paytable-jackpot .paytable-item.paytable-hover {
    box-shadow: 0 8px 32px rgba(255, 107, 107, 0.6),
                0 0 30px rgba(255, 215, 0, 0.5) !important;
    animation: jackpotShine 1.5s ease-in-out infinite;
}

@keyframes jackpotShine {
    0%, 100% {
        border-color: #ffd700;
    }
    50% {
        border-color: #ffed4e;
    }
}

/* Wild Symbol Special Effects */
.paytable-wild .paytable-item {
    border: 2px solid #90caf9;
    position: relative;
}

.paytable-wild .paytable-item::before {
    content: '✨';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.paytable-wild .paytable-item.paytable-hover::before {
    opacity: 1;
    animation: sparkle 1s ease-in-out infinite;
}

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

/* Symbol Text Glow Effect */
.symbol-text {
    transition: all 0.3s ease;
}

.paytable-hover .symbol-text {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
                 0 0 20px rgba(255, 215, 0, 0.4);
}