/* ===== v4.5: 몹 실루엣·애니메이션·이펙트 ===== */
.mob { position: relative; width: calc(min(34vw, 120px) * var(--mob-s, 1)); height: calc(min(34vw, 120px) * var(--mob-s, 1)); display: grid; place-items: center; --mob-c: #9a7cff; }
.mob-body { position: relative; width: 100%; height: 100%; transform-origin: 50% 90%; display: grid; place-items: center; will-change: transform; }
.mob-svg, .mob-art { width: 100%; height: 100%; object-fit: contain; overflow: visible; filter: drop-shadow(0 0 7px var(--mob-c)); }
.mob-art.shadow { filter: grayscale(0.85) brightness(0.55) contrast(1.15) drop-shadow(0 0 7px var(--mob-c)); }
.mob-eye { animation: mob-blink 4.2s infinite; transform-origin: center; transform-box: fill-box; }
.mob-aura { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mob-c) 38%, transparent), transparent 68%); opacity: 0.55; animation: mob-aura 3s ease-in-out infinite; pointer-events: none; }
.mob-floor { position: absolute; left: 14%; right: 14%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%); }
.tier-e .mob-aura { opacity: 0.8; } .tier-b .mob-aura { opacity: 1; animation-duration: 1.8s; }
.tier-b .mob-svg { stroke-width: 3; }

/* 등장 */
.mob[data-state="enter"] .mob-body { animation: mob-enter 0.7s cubic-bezier(.2,1.3,.4,1) both, mob-idle-base 3s 0.7s ease-in-out infinite; }
/* 대기(숨쉬기): 몸 종류별 */
.mob[data-state="idle"] .mob-body { animation: mob-breathe 2.8s ease-in-out infinite; }
.mob[data-state="idle"].mob-hop .mob-body { animation: mob-hop 1.6s ease-in-out infinite; }
.mob[data-state="idle"].mob-crawl .mob-body { animation: mob-crawl 1.2s ease-in-out infinite; }
.mob[data-state="idle"].mob-sway .mob-body { animation: mob-sway 3.4s ease-in-out infinite; }
.mob[data-state="idle"].mob-flutter .mob-body { animation: mob-flutter 1.1s ease-in-out infinite; }
.mob[data-state="idle"].mob-stomp .mob-body { animation: mob-stomp 2.4s ease-in-out infinite; }
.mob[data-state="idle"].mob-slither .mob-body { animation: mob-slither 2.2s ease-in-out infinite; }
.mob[data-state="idle"].mob-float .mob-body { animation: mob-float 2.6s ease-in-out infinite; }
.mob[data-state="idle"].mob-spin .mob-body { animation: mob-spinp 3s ease-in-out infinite; }
/* 공격(쫄이 이겼을 때: 아래의 용사 쪽으로 돌진) / 피격 / 사망 */
.mob[data-state="attack"] .mob-body { animation: mob-attack 0.6s ease-in-out both; }
.mob[data-state="hit"] .mob-body { animation: mob-hit 0.45s ease both; }
.mob[data-state="die"] .mob-body { animation: mob-die 0.9s ease-in forwards; }
.mob[data-state="die"] .mob-aura, .mob[data-state="die"] .mob-floor { opacity: 0; transition: opacity 0.6s; }
.mob[data-state="still"] .mob-body, .mob[data-state="still"] .mob-eye, .mob[data-state="still"] .mob-aura { animation: none; }

@keyframes mob-enter { 0% { transform: translateY(-40px) scale(0.3); opacity: 0; filter: brightness(3); } 60% { transform: translateY(6px) scale(1.12); opacity: 1; } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes mob-idle-base { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03, 0.98); } }
@keyframes mob-breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.04, 0.96); } }
@keyframes mob-hop { 0%,100% { transform: translateY(0) scale(1.04, 0.94); } 40% { transform: translateY(-14%) scale(0.96, 1.06); } 60% { transform: translateY(-14%) scale(0.96, 1.06); } }
@keyframes mob-crawl { 0%,100% { transform: translateX(-4%) rotate(-2deg); } 50% { transform: translateX(4%) rotate(2deg) scale(1.02); } }
@keyframes mob-sway { 0%,100% { transform: rotate(-3deg) scale(1.0); } 50% { transform: rotate(3deg) scale(1.03); } }
@keyframes mob-flutter { 0%,100% { transform: translateY(0) scaleX(1); } 25% { transform: translateY(-6%) scaleX(0.88); } 75% { transform: translateY(-3%) scaleX(1.08); } }
@keyframes mob-stomp { 0%,100% { transform: scale(1, 1); } 45% { transform: scale(1.04, 0.96); } 55% { transform: translateY(-3%) scale(0.98, 1.04); } 62% { transform: translateY(0) scale(1.06, 0.94); } }
@keyframes mob-slither { 0%,100% { transform: skewX(-6deg) scaleY(1); } 50% { transform: skewX(6deg) scaleY(1.04); } }
@keyframes mob-float { 0%,100% { transform: translateY(2%); opacity: 0.92; } 50% { transform: translateY(-9%); opacity: 1; } }
@keyframes mob-spinp { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.07); } }
@keyframes mob-attack { 0% { transform: none; } 35% { transform: translateY(-8%) scale(1.06); } 60% { transform: translateY(32%) scale(1.22); } 100% { transform: none; } }
@keyframes mob-hit { 0% { transform: none; filter: brightness(1); } 20% { transform: translateX(-12%) rotate(-6deg); filter: brightness(4) saturate(0); } 50% { transform: translateX(10%) rotate(5deg); filter: brightness(2); } 100% { transform: none; filter: none; } }
@keyframes mob-die { 0% { transform: none; filter: brightness(4) saturate(0); opacity: 1; } 25% { transform: translateX(-8%) rotate(-8deg); filter: brightness(2); } 100% { transform: translateY(24%) scale(0.2, 0.05); opacity: 0; filter: blur(3px); } }
@keyframes mob-blink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes mob-aura { 0%,100% { transform: scale(0.94); } 50% { transform: scale(1.08); } }
html[data-fx="low"] .mob .mob-body, html[data-fx="low"] .mob .mob-aura, html[data-fx="low"] .mob .mob-eye { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
html[data-fx="low"] .mob[data-state="die"] .mob-body { animation: mob-die-low 0.3s forwards !important; }
@keyframes mob-die-low { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mob .mob-body, .mob .mob-aura, .mob .mob-eye { animation-iteration-count: 1 !important; } }

/* 런 화면 연결: 기존 img 규칙 대신 .mob 크기 사용 */
.run-side .mob { width: min(34vw, 120px); height: min(34vw, 120px); }
.run-side.foe .mob { transform: scale(var(--mob-s, 1)); transform-origin: 50% 90%; }
.run-boss .mob { width: min(50vw, 180px); height: min(50vw, 180px); margin: 0 auto; }
.run-boss .mob-phases-pre { display: flex; justify-content: center; gap: 6px; margin: 6px 0; }
.run-boss .mob-phases-pre span { padding: 3px 8px; border-radius: 99px; border: 1px solid var(--mob-c); font-size: 11px; color: #fff; }

/* 파티클 캔버스 · 팝업 · 번쩍임 */
.mob-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }
.mob-pop { position: fixed; z-index: 81; transform: translate(-50%, 0); pointer-events: none; font-family: "Jua", sans-serif; font-size: 24px; color: #fff; text-shadow: 0 0 10px #ffd35a, 0 2px 0 #7a4a00, 0 0 2px #000; animation: mob-pop 1s ease-out forwards; white-space: nowrap; }
.mob-pop.crit { font-size: 32px; color: #fff3b0; text-shadow: 0 0 14px #ff9a2e, 0 3px 0 #8a2a00; }
.mob-pop.weak { color: #d9f1ff; text-shadow: 0 0 12px #5ab4ff, 0 2px 0 #0a3a66; }
@keyframes mob-pop { 0% { transform: translate(-50%, 10px) scale(0.4); opacity: 0; } 20% { transform: translate(-50%, -4px) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -52px) scale(1); opacity: 0; } }
.mob-flash { position: fixed; inset: 0; z-index: 79; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--fc, #fff) 55%, transparent), transparent 70%); animation: mob-flash 0.5s ease-out forwards; }
@keyframes mob-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* 보스 페이즈 전환 */
.mob-phase { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; align-content: center; gap: 10px; background: rgba(5,6,12,0.82); animation: mp-in 0.25s ease-out both, mp-out 0.3s 1.6s ease-in forwards; text-align: center; }
.mob-phase.fx-high { animation-duration: 0.25s, 0.3s; animation-delay: 0s, 2.3s; }
.mob-phase.fx-low { animation: mp-in 0.1s ease-out both, mp-out 0.2s 0.9s ease-in forwards; }
.mp-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mob-c) 60%, transparent), transparent 62%); animation: mp-glow 0.9s ease-out both; }
.mob-phase.ph-rage .mp-glow { background: radial-gradient(circle at 50% 40%, rgba(255,60,40,0.65), transparent 62%); }
.mob-phase.ph-calm .mp-glow { background: radial-gradient(circle at 50% 40%, rgba(180,220,255,0.5), transparent 62%); }
.mp-mob { position: relative; width: min(52vw, 220px); height: min(52vw, 220px); }
.mob-phase.ph-rage .mp-mob .mob-body { animation: mp-rage 0.16s linear infinite !important; filter: hue-rotate(-20deg) saturate(1.6); }
.mp-banner { position: relative; display: grid; gap: 4px; padding: 0 16px; }
.mp-banner small { color: var(--mob-c); letter-spacing: 0.3em; font-size: 12px; }
.mp-banner b { font-family: "Jua", sans-serif; font-size: 28px; color: #fff; text-shadow: 0 0 16px var(--mob-c); animation: mp-title 0.5s cubic-bezier(.2,1.4,.4,1) both; }
.mp-banner span { color: #dfe4f2; font-size: 13px; max-width: 300px; margin: 0 auto; word-break: keep-all; }
@keyframes mp-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-out { to { opacity: 0; visibility: hidden; } }
@keyframes mp-glow { 0% { transform: scale(0.4); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0.6; } }
@keyframes mp-title { from { transform: scale(2.2); opacity: 0; letter-spacing: 0.4em; } to { transform: none; opacity: 1; } }
@keyframes mp-rage { 0% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 100% { transform: translate(-1px, -2px); } }
.mob-phasebadge { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; z-index: 56; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 99px; background: rgba(8,10,18,0.82); border: 1px solid var(--mob-c); font-size: 12px; color: #fff; pointer-events: none; }
.mob-phasebadge i { display: flex; gap: 3px; } .mob-phasebadge u { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--mob-c); } .mob-phasebadge u.on { background: var(--mob-c); box-shadow: 0 0 6px var(--mob-c); }

/* 몹 도감 */
.mob-detail { display: grid; gap: 8px; padding: 10px; margin: 8px 0; border: 1px solid var(--mob-c); border-radius: 14px; background: var(--glass); }
.mob-stage { display: grid; place-items: center; min-height: 150px; border-radius: 12px; background: radial-gradient(circle at 50% 70%, rgba(255,255,255,0.06), transparent 70%); overflow: hidden; }
.mob-stage .mob { width: 130px; height: 130px; }
.mob-info h3 { margin: 0 0 4px; font-family: "Jua", sans-serif; font-size: 18px; } .mob-info h3 small { color: var(--mob-c); font-size: 12px; }
.mob-info p { margin: 3px 0; font-size: 12px; line-height: 1.45; word-break: keep-all; }
.mob-phases { margin: 6px 0 0; padding-left: 18px; font-size: 12px; } .mob-phases li { margin: 3px 0; } .mob-phases .seed-btn { min-height: 24px; padding: 0 8px; }
.mob-demo { display: flex; flex-wrap: wrap; gap: 6px; } .mob-demo .seed-btn { flex: 1 1 22%; min-height: 36px; font-size: 12px; }
.mob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; margin-top: 8px; }
.mob-cell { display: grid; justify-items: center; gap: 2px; padding: 4px 2px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: inherit; cursor: pointer; }
.mob-cell.is-sel { border-color: var(--mob-c); box-shadow: 0 0 10px color-mix(in srgb, var(--mob-c) 50%, transparent); }
.mob-cell .mob { width: 64px; height: 64px; } .mob-cell small { font-size: 10px; text-align: center; line-height: 1.2; word-break: keep-all; }
.mob-cell .mob-aura, .mob-cell .mob-floor { display: none; }

/* 세계관 탭 */
.lore-h { margin: 12px 0 6px; font-family: "Jua", sans-serif; font-size: 16px; color: var(--gold); }
.lore-origin { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 6px; }
.lore-origin li { font-size: 12px; line-height: 1.5; padding: 8px 10px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); word-break: keep-all; }
.lore-origin b { display: block; color: var(--gold); margin-bottom: 2px; }
.lore-cards { display: grid; gap: 6px; }
.lore-card { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mob-c); background: var(--glass); }
.lore-card b { color: var(--mob-c); font-size: 14px; } .lore-card small { font-size: 12px; line-height: 1.45; word-break: keep-all; } .lore-card span { font-size: 11px; color: var(--muted); }
.lore-term { border-bottom: 1px solid var(--line); padding: 6px 2px; } .lore-term summary { cursor: pointer; font-size: 13px; font-weight: 700; } .lore-term p { margin: 4px 0 2px; font-size: 12px; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.mob-lore { font-style: italic; color: var(--mob-c); }
.bi-lore { display: block; margin: 8px auto 0; max-width: 300px; font-family: inherit; font-size: 12px; line-height: 1.5; color: #dfe4f2; word-break: keep-all; opacity: 0.9; }

.nav-toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; padding: 8px 14px; border-radius: 99px; background: rgba(8,10,18,0.92); border: 1px solid var(--line); color: #fff; font-size: 13px; pointer-events: none; animation: mp-in 0.2s ease-out; }
.run-hearts small.run-streak { display: block; font-size: 10px; letter-spacing: 0; color: #ffd27a; text-align: right; }