/* Typing particles (정답/오답 무음 파티클) */
.typing-particle {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px currentColor;
    animation: typing-pop 620ms cubic-bezier(0.2, 0.75, 0.3, 1) forwards;
    z-index: 9999;
}

@keyframes typing-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9) translate(0, 0);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.35) translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2)
            translate(var(--tx), var(--ty));
    }
}

.answer-impact-ring {
    position: fixed;
    border: 3px solid var(--correct);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.64);
    opacity: 0;
    z-index: 9998;
    animation: answer-impact-ring 520ms cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}

.answer-impact-ring.is-wrong {
    border-color: var(--incorrect);
    animation-name: answer-impact-ring-wrong;
}

@keyframes answer-impact-ring {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.64);
        box-shadow: 0 0 0 rgba(0, 200, 83, 0);
    }
    30% {
        opacity: 0.9;
        box-shadow: 0 0 22px rgba(0, 200, 83, 0.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.24);
        box-shadow: 0 0 0 rgba(0, 200, 83, 0);
    }
}

@keyframes answer-impact-ring-wrong {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72) rotate(0deg);
    }
    25% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.16) rotate(-4deg);
    }
}

/* Mini confetti (콤보 보상) */
.confetti-piece {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: confetti-pop 980ms cubic-bezier(0.12, 0.86, 0.28, 1) forwards;
    animation-delay: var(--delay, 0ms);
    z-index: 9999;
}

.confetti-piece.is-wide {
    width: 11px;
    height: 4px;
}

@keyframes confetti-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0, 0) rotate(0) scale(0.5);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, -12px) rotate(30deg)
            scale(1);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--dx), var(--dy))
            rotate(var(--dr)) scale(0.7);
    }
}

.combo-shockwave {
    position: fixed;
    width: 22px;
    height: 22px;
    border: 4px solid var(--accent);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 0;
    z-index: 9997;
    animation: combo-shockwave 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes combo-shockwave {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.25);
        box-shadow: 0 0 0 rgba(255, 230, 0, 0);
    }
    35% {
        opacity: 0.9;
        box-shadow: 0 0 24px rgba(255, 230, 0, 0.62);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8);
        box-shadow: 0 0 0 rgba(255, 230, 0, 0);
    }
}

body.screen-correct-flash::after,
body.screen-wrong-flash::after,
body.screen-combo-flash::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
}

body.screen-correct-flash::after {
    animation: screen-correct-flash 360ms ease-out;
}

body.screen-wrong-flash::after {
    animation: screen-wrong-flash 320ms ease-out;
}

body.screen-combo-flash::after {
    animation: screen-combo-flash 520ms ease-out;
}

@keyframes screen-correct-flash {
    0% {
        box-shadow: inset 0 0 0 rgba(0, 200, 83, 0);
    }
    38% {
        box-shadow: inset 0 0 52px rgba(0, 200, 83, 0.2);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(0, 200, 83, 0);
    }
}

@keyframes screen-wrong-flash {
    0% {
        box-shadow: inset 0 0 0 rgba(239, 68, 68, 0);
    }
    42% {
        box-shadow: inset 0 0 46px rgba(239, 68, 68, 0.24);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes screen-combo-flash {
    0% {
        box-shadow: inset 0 0 0 rgba(255, 230, 0, 0);
    }
    34% {
        box-shadow: inset 0 0 74px rgba(255, 230, 0, 0.25);
    }
    100% {
        box-shadow: inset 0 0 0 rgba(255, 230, 0, 0);
    }
}

/* 모바일에서 파티클 효과 비활성화 */
@media (max-width: 768px) {
    .typing-particle,
    .confetti-piece,
    .answer-impact-ring,
    .combo-shockwave {
        display: none !important;
    }
}

/* 배터리 절약 모드나 저성능 기기에서 파티클 비활성화 */
@media (prefers-reduced-motion: reduce) {
    .typing-particle,
    .confetti-piece,
    .answer-impact-ring,
    .combo-shockwave {
        display: none !important;
    }

    body.screen-correct-flash::after,
    body.screen-wrong-flash::after,
    body.screen-combo-flash::after {
        animation: none !important;
    }

}

/* ------------------------------------------------------------
   Mobile responsive baseline enhancements
   - Fluid media elements
   - Prevent iOS Safari input zoom (font-size >= 16px)
   - Ensure comfortable touch targets for buttons/tabs
------------------------------------------------------------ */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}
iframe {
    max-width: 100%;
}

/* iOS Safari: prevent auto-zoom on focus when font-size < 16px */
@supports (-webkit-touch-callout: none) {
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }
}