/* 맞춤법 퀴즈 선택 피드백과 콤보 효과 */
.spelling-choice-btn.correct-answer {
    background: var(--correct) !important;
    border-color: var(--correct) !important;
    color: var(--bg-dark) !important;
    font-weight: 700 !important;
    animation: correctPulse 0.52s cubic-bezier(0.18, 0.9, 0.2, 1.35);
    box-shadow:
        0.28rem 0.28rem 0 var(--border-strong),
        0 0 18px rgba(0, 200, 83, 0.44) !important;
}

.spelling-choice-btn.wrong-answer {
    background: var(--incorrect) !important;
    border-color: var(--incorrect) !important;
    color: var(--text-light) !important;
    animation: wrongShake 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    box-shadow:
        0.28rem 0.28rem 0 var(--border-strong),
        0 0 18px rgba(239, 68, 68, 0.36) !important;
}

.spelling-question-item.answer-correct {
    animation: itemCorrect 0.72s ease-out;
}

.spelling-question-item.answer-wrong {
    animation: itemWrong 0.58s ease-out;
}

.spelling-combo-effect {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent);
    text-shadow:
        0.22rem 0.22rem 0 var(--border-strong),
        0 0 22px rgba(255, 230, 0, 0.86);
    z-index: 9999;
    pointer-events: none;
    animation: comboFade 1.05s cubic-bezier(0.18, 0.9, 0.2, 1.18) forwards;
}

@keyframes correctPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: translateY(-0.15rem) scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

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

@keyframes itemCorrect {
    0% {
        border-color: var(--secondary);
    }

    50% {
        border-color: var(--correct);
        box-shadow:
            0.3rem 0.3rem 0 var(--border-strong),
            0 0 20px rgba(0, 200, 83, 0.35);
    }

    100% {
        border-color: var(--secondary);
    }
}

@keyframes itemWrong {
    0% {
        border-color: var(--secondary);
    }

    50% {
        border-color: var(--incorrect);
        box-shadow:
            0.3rem 0.3rem 0 var(--border-strong),
            0 0 18px rgba(239, 68, 68, 0.32);
    }

    100% {
        border-color: var(--secondary);
    }
}

@keyframes comboFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.28) rotate(-2deg);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -58%) scale(1) rotate(2deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}