/* ============================================
   단어 히어로 - 애니메이션
   ============================================ */

/* 바운스 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
.bounce { animation: bounce 2s ease infinite; }

/* 펄스 */
@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
    50% { transform: scale(1.04); box-shadow: 0 10px 35px rgba(99,102,241,0.5); }
}
.pulse { animation: pulse 2s ease infinite; }

/* 화면 흔들림 */
@keyframes screenShake {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-5px, 3px); }
    40% { transform: translate(5px, -3px); }
    60% { transform: translate(-3px, 5px); }
    80% { transform: translate(3px, -5px); }
    100% { transform: translate(0, 0); }
}

/* 빨간 플래시 */
@keyframes flashRed {
    0% { box-shadow: inset 0 0 0 0 rgba(255, 82, 82, 0); }
    50% { box-shadow: inset 0 0 100px 20px rgba(255, 82, 82, 0.3); }
    100% { box-shadow: inset 0 0 0 0 rgba(255, 82, 82, 0); }
}

/* 보스 경고 펄스 */
@keyframes warningPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

/* 몬스터 등장 */
@keyframes monsterEnter {
    0% { transform: translateX(100px) scale(0); opacity: 0; }
    60% { transform: translateX(-10px) scale(1.1); opacity: 1; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* 몬스터 처치 폭발 */
@keyframes monsterDefeat {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* 점수 팝업 */
@keyframes scorePopup {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-60px) scale(1.5); opacity: 0; }
}

/* 콤보 펀치 */
@keyframes comboPunch {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* 파티클 폭발 */
@keyframes particleExplode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { opacity: 0; }
}

/* 슬라이드 인 */
@keyframes slideInUp {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 글로우 펄스 */
@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 10px currentColor; }
    50% { text-shadow: 0 0 30px currentColor, 0 0 60px currentColor; }
}

/* 하트 잃음 */
@keyframes heartLost {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); }
    60% { transform: scale(0.5); }
    100% { transform: scale(0.8); filter: grayscale(1); opacity: 0.3; }
}

/* 히어로 공격 */
@keyframes heroAttack {
    0% { transform: translateY(-50%) translateX(0); }
    30% { transform: translateY(-50%) translateX(30px); }
    100% { transform: translateY(-50%) translateX(0); }
}

/* 얼리기 효과 */
@keyframes freezeEffect {
    0% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(180deg) brightness(1.3); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}

.freeze-active .monster {
    animation: freezeEffect 1s ease infinite;
}

/* 폭탄 화면 플래시 */
@keyframes bombFlash {
    0% { background: transparent; }
    30% { background: rgba(255, 234, 0, 0.3); }
    100% { background: transparent; }
}

/* 보스 등장 */
@keyframes bossEntrance {
    0% { transform: translateX(200px) scale(0.5); opacity: 0; }
    50% { transform: translateX(-20px) scale(1.2); opacity: 1; }
    70% { transform: translateX(10px) scale(0.95); }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* 뉴 레코드 반짝 */
@keyframes recordShine {
    0%, 100% { color: #FFEA00; text-shadow: 0 0 10px rgba(255, 234, 0, 0.5); }
    50% { color: #FF6D00; text-shadow: 0 0 30px rgba(255, 109, 0, 0.8); }
}

.go-newrecord {
    animation: recordShine 1s ease infinite;
}

/* 타이핑 입력 성공 반짝 */
@keyframes inputSuccess {
    0% { border-color: var(--success); box-shadow: 0 0 20px rgba(105, 240, 174, 0.5); }
    100% { border-color: var(--primary); box-shadow: none; }
}

/* 화면 전환 페이드 */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.screen.active {
    animation: fadeIn 0.3s ease;
}

/* ========= 유니콘 애니메이션 ========= */
@keyframes unicornFloat {
    0%, 100% { transform: translateY(0) scale(1.2); }
    50% { transform: translateY(-12px) scale(1.25); }
}

@keyframes unicornGlow {
    0% { filter: drop-shadow(0 0 8px #E040FB) drop-shadow(0 0 15px rgba(255,234,0,0.3)); }
    33% { filter: drop-shadow(0 0 12px #448AFF) drop-shadow(0 0 20px rgba(105,240,174,0.4)); }
    66% { filter: drop-shadow(0 0 10px #FFEA00) drop-shadow(0 0 18px rgba(224,64,251,0.4)); }
    100% { filter: drop-shadow(0 0 8px #E040FB) drop-shadow(0 0 15px rgba(255,234,0,0.3)); }
}

@keyframes unicornLabelPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 유니콘 등장 알림 */
@keyframes unicornAlert {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(5deg); opacity: 1; }
    70% { transform: scale(0.95) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.unicorn-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(224,64,251,0.9), rgba(124,77,255,0.9));
    color: white;
    font-family: 'Jua', sans-serif;
    font-size: 1.8rem;
    padding: 1rem 2.5rem;
    border-radius: 20px;
    z-index: 300;
    pointer-events: none;
    animation: unicornAlert 0.6s ease, fadeOut 0.5s ease 1.5s forwards;
    box-shadow: 0 0 40px rgba(224,64,251,0.6);
    text-align: center;
}

.unicorn-alert img {
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin-right: 10px;
}

/* ========= SH 스페셜 애니메이션 ========= */

@keyframes shFloat {
    0%, 100% { transform: translateY(0) scale(1.25) rotate(-3deg); }
    25% { transform: translateY(-15px) scale(1.3) rotate(3deg); }
    50% { transform: translateY(-5px) scale(1.25) rotate(-2deg); }
    75% { transform: translateY(-18px) scale(1.35) rotate(4deg); }
}

@keyframes shRainbowGlow {
    0% { filter: drop-shadow(0 0 15px #FF5252) drop-shadow(0 0 25px rgba(255,82,82,0.4)); }
    16% { filter: drop-shadow(0 0 15px #FF6D00) drop-shadow(0 0 25px rgba(255,109,0,0.4)); }
    33% { filter: drop-shadow(0 0 15px #FFEA00) drop-shadow(0 0 25px rgba(255,234,0,0.4)); }
    50% { filter: drop-shadow(0 0 15px #69F0AE) drop-shadow(0 0 25px rgba(105,240,174,0.4)); }
    66% { filter: drop-shadow(0 0 15px #448AFF) drop-shadow(0 0 25px rgba(68,138,255,0.4)); }
    83% { filter: drop-shadow(0 0 15px #7C4DFF) drop-shadow(0 0 25px rgba(124,77,255,0.4)); }
    100% { filter: drop-shadow(0 0 15px #E040FB) drop-shadow(0 0 25px rgba(224,64,251,0.4)); }
}

@keyframes shLabelPulse {
    0%, 100% { transform: scale(1); background-position: 0% 50%; }
    50% { transform: scale(1.15); background-position: 100% 50%; }
}

@keyframes shAlertIn {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    40% { transform: scale(1.3) rotate(5deg); opacity: 1; }
    60% { transform: scale(0.9) rotate(-3deg); }
    80% { transform: scale(1.1) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes rainbowFlash {
    0% { opacity: 0; }
    15% { opacity: 0.6; background: linear-gradient(135deg, rgba(255,82,82,0.3), rgba(255,234,0,0.3), rgba(105,240,174,0.3), rgba(68,138,255,0.3), rgba(224,64,251,0.3)); }
    30% { opacity: 0.4; background: linear-gradient(225deg, rgba(224,64,251,0.3), rgba(68,138,255,0.3), rgba(105,240,174,0.3), rgba(255,234,0,0.3), rgba(255,82,82,0.3)); }
    50% { opacity: 0.5; }
    100% { opacity: 0; }
}

/* SH 알림 */
.sh-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #FF6D00, #FFEA00, #69F0AE, #448AFF, #E040FB);
    background-size: 300% 300%;
    color: white;
    font-family: 'Jua', sans-serif;
    font-size: 2.2rem;
    padding: 1.2rem 3rem;
    border-radius: 24px;
    z-index: 300;
    pointer-events: none;
    animation: shAlertIn 0.7s ease, shLabelPulse 1s ease infinite 0.7s, fadeOut 0.5s ease 2s forwards;
    box-shadow: 0 0 60px rgba(255,109,0,0.6), 0 0 120px rgba(224,64,251,0.3);
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.sh-alert span {
    display: block;
    font-size: 1.1rem;
    margin-top: 0.3rem;
    opacity: 0.9;
}

/* 무지개 플래시 (SH 잡았을 때) */
.rainbow-flash {
    position: fixed;
    inset: 0;
    z-index: 250;
    pointer-events: none;
    animation: rainbowFlash 1.5s ease forwards;
}

/* ========= 시크릿 몬스터 애니메이션 ========= */
@keyframes secretMonsterFloat {
    0%, 100% { transform: translateY(0) scale(1.15); }
    50% { transform: translateY(-10px) scale(1.2); }
}
@keyframes secretMonsterGlow {
    0%, 100% { filter: drop-shadow(0 0 10px var(--secret-color, #FF6B9D)) drop-shadow(0 0 18px rgba(252,211,77,0.3)); }
    50% { filter: drop-shadow(0 0 18px var(--secret-color, #FF6B9D)) drop-shadow(0 0 30px rgba(252,211,77,0.5)); }
}
@keyframes secretLabelPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* 시크릿 등장 알림 */
@keyframes secretAlertIn {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
.secret-alert {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--secret-color, #FF6B9D), #F472B6);
    color: white;
    font-family: 'Gaegu', sans-serif;
    font-size: 1.8rem;
    padding: 1rem 2.5rem;
    border-radius: 20px;
    z-index: 300;
    pointer-events: none;
    animation: secretAlertIn 0.6s ease, fadeOut 0.5s ease 1.7s forwards;
    box-shadow: 0 0 50px var(--secret-color, #FF6B9D);
    text-align: center;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.secret-alert span {
    display: block;
    font-size: 1rem;
    margin-top: 0.3rem;
    opacity: 0.95;
}

/* ========= 히든 메세지 팝업 ========= */

@keyframes secretPopupIn {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}

@keyframes secretPopupOut {
    0% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) translateY(-40px); }
}

@keyframes secretSparkleSpin {
    0%, 100% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.3) rotate(90deg); }
    50% { transform: scale(1.1) rotate(180deg); }
    75% { transform: scale(1.3) rotate(270deg); }
}

@keyframes secretBorderGlow {
    0%, 100% { box-shadow: 0 0 40px var(--secret-color, gold), 0 10px 40px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 80px var(--secret-color, gold), 0 0 120px var(--secret-color, gold), 0 10px 40px rgba(0,0,0,0.5); }
}

.secret-popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 12, 50, 0.96);
    border: 3px solid var(--secret-color, gold);
    border-radius: 24px;
    padding: 1.8rem 2.5rem;
    z-index: 400;
    text-align: center;
    color: white;
    animation:
        secretPopupIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        secretBorderGlow 1.5s ease infinite 0.6s,
        secretPopupOut 0.5s ease 3.3s forwards;
    pointer-events: none;
    max-width: 90vw;
    min-width: 320px;
    backdrop-filter: blur(8px);
}

.secret-sparkle {
    font-size: 3.2rem;
    animation: secretSparkleSpin 1.8s ease infinite;
    margin-bottom: 0.3rem;
}

.secret-title {
    font-size: 1.15rem;
    color: var(--secret-color, gold);
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 10px var(--secret-color, gold);
}

.secret-message {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0.3rem 0;
    line-height: 1.3;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.secret-sub {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 0.9rem;
    color: rgba(255,255,255,0.85);
}

.secret-bonus {
    display: inline-block;
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(236,72,153,0.2));
    border: 2px solid rgba(252,211,77,0.7);
    border-radius: 16px;
    padding: 0.5rem 1.2rem;
    color: #FFE082;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 0.2rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.secret-counter {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
    margin-top: 0.8rem;
    letter-spacing: 1.5px;
    font-weight: 600;
}