/* Existing animations */
@keyframes buttonBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.play-button.bounce {
    animation: buttonBounce 0.5s ease-in-out;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-20px);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-15px);
    }
    40% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-5px);
    }
    80% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes tumble {
    0% {
        transform: rotate(0deg);
    }
    12.5% {
        transform: rotate(45deg);
    }
    25% {
        transform: rotate(90deg);
    }
    37.5% {
        transform: rotate(135deg);
    }
    50% {
        transform: rotate(180deg);
    }
    62.5% {
        transform: rotate(225deg);
    }
    75% {
        transform: rotate(270deg);
    }
    87.5% {
        transform: rotate(315deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.difficulty-icon.animate-bounce {
    animation: bounce 2s ease-in-out;
}

.difficulty-icon.animate-tumble {
    animation: tumble 2s ease-in-out; /* Increased duration for smoother animation */
}

/* Explosion animation */
@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.explode {
    animation: explode 0.5s forwards;
}