/* ── Global Reset ── */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-void);
    font-family: 'Noto Sans KR', 'Outfit', sans-serif;
    color: #ffffff;
    user-select: none;
    -webkit-user-select: none;
}

canvas {
    display: block;
}

/* ── Animation Keyframes ── */

/* 화면 흔들림 */
@keyframes screenShake {
    10%, 90% { transform: translate3d(-5px, 5px, 0); }
    20%, 80% { transform: translate3d(10px, -10px, 0); }
    30%, 50%, 70% { transform: translate3d(-15px, 15px, 0); }
    40%, 60% { transform: translate3d(15px, -15px, 0); }
}

@keyframes shakeLight {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-2px, 0, 0); }
    40%, 60% { transform: translate3d(2px, 0, 0); }
}

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

/* 보스 연출 */
@keyframes bossGlowAnim {
    0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 8px var(--boss-glow-color)); }
    50% { opacity: 1; filter: drop-shadow(0 0 15px var(--boss-glow-color)) drop-shadow(0 0 30px var(--boss-glow-color)); }
}

@keyframes bossGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px var(--boss-glow-color))
                drop-shadow(0 0 14px var(--boss-glow-color));
    }
    50% {
        filter: drop-shadow(0 0 14px var(--boss-glow-color))
                drop-shadow(0 0 28px var(--boss-glow-color))
                drop-shadow(0 0 42px var(--boss-glow-color));
    }
}

@keyframes bossLunge {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.3) translateY(40px); }
    100% { transform: scale(1) translateY(0); }
}

/* UI 피드백 */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.3); opacity: 1; }
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-40px) scale(1.3); opacity: 1; }
    100% { transform: translateY(-80px) scale(1); opacity: 0; }
}

@keyframes floatUpPlayer {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-50px) scale(1); }
}

@keyframes flash {
    0% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes cardEntrance {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}