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

.shake {
    animation: shake 0.8s ease;
}

@keyframes sparkle {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    25% { transform: scale(1.1); opacity: 0.9; box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.8); }
    50% { transform: scale(1.2); opacity: 0.8; box-shadow: 0 0 25px 10px rgba(255, 215, 0, 0.9); }
    75% { transform: scale(1.1); opacity: 0.9; box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.8); }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
}

.sparkle {
    animation: sparkle 1.2s ease;
    position: relative;
}

/* Star particles animation for correct answer */
@keyframes stars {
    0% { transform: translateY(0px); opacity: 0; }
    50% { transform: translateY(-20px); opacity: 1; }
    100% { transform: translateY(-40px); opacity: 0; }
}

.star {
    position: absolute;
    width: 15px;
    height: 15px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
    animation: stars 1.5s ease-out forwards;
    pointer-events: none;
}

/* Pulsing glow effect */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.pulse {
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 0 rgba(255, 215, 0, 0.7);
}