/* Анимации */
@keyframes correctAnswer {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

@keyframes incorrectAnswer {
    0% {
        transform: translateX(0);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
    }
    20% {
        transform: translateX(-10px);
    }
    40% {
        transform: translateX(10px);
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }
    60% {
        transform: translateX(-10px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

@keyframes pulseCorrect {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pulseIncorrect {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

.correct {
    background-color: #4CAF50 !important;
    color: white !important;
    animation: correctAnswer 0.8s ease, happyJump 1s ease 0.8s;
    position: relative;
    z-index: 1;
}

.incorrect {
    background-color: #F44336 !important;
    color: white !important;
    animation: incorrectAnswer 0.8s ease;
    position: relative;
    z-index: 1;
}