/* ==========================================================================
   1. 상단 자동 전투 영역 (전투 스테이지)
   ========================================================================== */
.battle-arena-stage {
  padding: 8px 10px 4px 10px;
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #090e17 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* 전투 스테이지 헤더 */
.battle-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  gap: 6px;
}

.stage-info-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.stage-badge {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.stage-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #f1f5f9;
}

.wave-track-pill {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
}

.wave-dots-track {
  display: flex;
  align-items: center;
  gap: 3px;
}

.wave-dot {
  font-size: 0.8rem;
  line-height: 1;
  color: #475569;
  transition: all 0.2s ease;
  cursor: default;
}

.wave-dot.cleared {
  color: #10b981;
}

.wave-dot.active {
  color: #38bdf8;
  text-shadow: 0 0 8px #38bdf8;
  transform: scale(1.2);
}

.wave-dot.boss-wave-dot.active {
  color: #ef4444;
  text-shadow: 0 0 10px #ef4444;
  animation: bossDotPulse 0.8s infinite alternate;
}

@keyframes bossDotPulse {   /* 성능: transform 만 움직임 (필터 애니메이션은 매 프레임 다시 그림) */
  0% { transform: scale(1.1); }
  100% { transform: scale(1.35); }
}

.wave-track-line {
  width: 7px;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 1px;
}

.wave-track-line.cleared {
  background: #10b981;
}

.power-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 3px 8px;
  border-radius: 12px;
}

.power-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 700;
}

.power-val {
  font-size: 0.8rem;
  font-weight: 900;
  color: #fbbf24;
}

/* 보스 경고 배너 */
.boss-alert-banner {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.88), transparent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 2px 24px;
  letter-spacing: 1px;
  z-index: 15;
  animation: bossAlertPulse 0.8s infinite alternate;
}

@keyframes bossAlertPulse {
  0% { opacity: 0.7; transform: translateX(-50%) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* 전투 뷰포트 (영웅 vs 몬스터 부대) */
.battle-scene-viewport {
  height: clamp(124px, calc(min(880px, 96vh) - 634px), 210px);
  min-height: clamp(124px, calc(min(880px, 96vh) - 634px), 210px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 16px 12px 16px;
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin-top: 4px;
}

.battle-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* ==========================================================================
   3단계 멀티레이어 패럴랙스 배경 시스템 (원경, 오브젝트/중경, 땅/근경)
   ========================================================================== */
.battle-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  will-change: background-position;
}

/* 층층이 쌓는 3단 구성: 세 이미지 모두 같은 크기(1376x768)의 전체 프레임이라 같은 방식(cover, 하단 기준)으로 겹쳐 맞춘다.
   아래에서 위로: 1) 원경(하늘/배경 전체) -> 2) 중경(기둥/나무/유적, 투명 배경) -> 3) 땅/근경(바닥, 투명 배경) */
.parallax-layer.layer-far,
.parallax-layer.layer-mid,
.parallax-layer.layer-ground {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  transition: background-image 0.5s ease-in-out;
}

/* 1. 원경 (Far) */
.parallax-layer.layer-far {
  z-index: 1;
  background-image: url('assets/backgrounds/parallax_far_1.png');
  filter: brightness(0.96) contrast(1.04);
}

/* 2. 중경 (Mid) */
.parallax-layer.layer-mid {
  z-index: 2;
  background-image: url('assets/backgrounds/parallax_mid_1.png');
}

/* 3. 땅 / 근경 (Ground) */
.parallax-layer.layer-ground {
  z-index: 3;
  background-image: url('assets/backgrounds/parallax_ground_1.png');
}

/* 구형 레이아웃: 월드 1 / 일일던전 배경 (짧은 땅 띠 + 반복형 중경). 월드 2~10 은 위의 전체 프레임 방식 */
#battle-bg-layer[data-layout="legacy"] .parallax-layer.layer-far {
  background-size: auto 100%;
  background-position: left bottom;
  background-repeat: repeat-x;
}
#battle-bg-layer[data-layout="legacy"] .parallax-layer.layer-mid {
  background-size: auto 100%;
  background-position: left bottom 22px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
}
#battle-bg-layer[data-layout="legacy"] .parallax-layer.layer-ground {
  top: auto;
  bottom: 0;
  height: 52px;
  background-size: auto 52px;
  background-position: left bottom;
  background-repeat: repeat-x;
  filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.6));
}

.battle-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 23, 0.25) 0%, rgba(10, 14, 23, 0.0) 50%, rgba(10, 14, 23, 0.4) 100%);
  pointer-events: none;
  z-index: 4;
}

/* 🛡️ 1. 유저 영웅 유닛 (우측으로 100px 이동 배치 left: 118px)
   ⚠️ transform에 CSS transition을 걸어두면 JS의 rAF 기반 추격 트윈(매 프레임 --hero-x 갱신)과
   서로 경합하면서 실제 렌더링 위치가 목표 지점과 어긋나 버림(다른 값에 멈춘 것처럼 보임).
   위치 이동은 전부 JS 트윈이 담당하므로 transform 트랜지션은 제거. */
.hero-combat-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 118px;
  bottom: 20px;
  z-index: 6;
  width: 72px;
  transform: translateX(var(--hero-x, 0px));
  will-change: transform;
}

.hero-sprite-box.walking-bob {
  animation: heroStepBob 0.38s infinite alternate ease-in-out;
}

@keyframes heroStepBob {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-4px) rotate(2deg); }
}

.unit-shadow {
  position: absolute;
  bottom: 14px;
  width: 44px;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
}

/* 👾 2. 몬스터 부대 군단 컨테이너 (우측으로 100px 이동한 접촉 지점 left: 178px)
   ⚠️ 자식 .monster-combat-unit은 flex가 아닌 절대좌표로 배치됨 (아래 참고) -
   모든 몬스터가 동일한 기준선(0px = 영웅 근접 사거리)에서 --mob-unit-x만큼 떨어진
   "진짜 공통 좌표"를 갖도록 하기 위함. (flex 배치 시 유닛마다 자기 앞의 형제 크기만큼
   기준선 자체가 달라져서, 근접/원거리 정지거리를 아무리 다르게 줘도 화면상 위치가
   꼬이는 문제가 있었음 - 예: 원거리 몬스터 자리에 근접 몬스터가 겹쳐 보이는 현상) */
.monsters-squad {
  position: absolute;
  left: 178px;
  bottom: 20px;
  z-index: 5;
  transform: translateX(var(--squad-x, 0px));
  will-change: transform;
}

.monster-sprite-box.walking-bob {
  animation: mobStepBob 0.44s infinite alternate ease-in-out;
}

@keyframes mobStepBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2.5px); }
}

/* 👾 몬스터 편대 시각적 단차(깊이감) - 개수와 무관하게 모두 동일한 절대좌표 기준선을 공유하며
   z-index/밝기/약간의 Y오프셋으로만 "편대감"을 표현 (X 위치는 오직 --mob-unit-x가 결정) */
.monsters-squad.count-4 .monster-combat-unit:nth-child(1) { z-index: 4; }
.monsters-squad.count-4 .monster-combat-unit:nth-child(2) {
  z-index: 2;
  --mob-unit-y: -8px;
  --mob-unit-scale: 0.92;
  filter: brightness(0.92);
}
.monsters-squad.count-4 .monster-combat-unit:nth-child(3) {
  z-index: 3;
  --mob-unit-y: 2px;
}
.monsters-squad.count-4 .monster-combat-unit:nth-child(4) {
  z-index: 1;
  --mob-unit-y: -10px;
  --mob-unit-scale: 0.88;
  filter: brightness(0.85);
}

.monsters-squad.count-3 .monster-combat-unit:nth-child(1) { z-index: 3; }
.monsters-squad.count-3 .monster-combat-unit:nth-child(2) {
  z-index: 1;
  --mob-unit-y: -6px;
  --mob-unit-scale: 0.94;
}
.monsters-squad.count-3 .monster-combat-unit:nth-child(3) { z-index: 2; }

.monsters-squad.count-2 .monster-combat-unit:nth-child(1) { z-index: 2; }
.monsters-squad.count-2 .monster-combat-unit:nth-child(2) {
  z-index: 1;
  --mob-unit-y: -6px;
  --mob-unit-scale: 0.94;
}

.monsters-squad.count-1 .monster-combat-unit {
  width: 78px;
  z-index: 3;
}

/* 개별 몬스터 유닛 기본 - 모두 부대 컨테이너의 동일한 기준선(0,0)에서 시작하는 절대좌표.
   --mob-unit-x(수평 거리)만으로 서로 간 실제 화면상 간격이 결정되므로,
   근접/원거리 정지거리를 다르게 줘도 항상 정확한 상대 위치가 보장됨 */
.monster-combat-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  transform: translateX(var(--mob-unit-x, 0px)) translateY(var(--mob-unit-y, 0px)) scale(var(--mob-unit-scale, 1));
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* 개별 유닛별 자연스러운 비동기 발걸음 (서로 다른 보폭과 속도감) */
.monsters-squad .monster-combat-unit:nth-child(1) .monster-sprite-box.walking-bob {
  animation: mobStepBob 0.38s infinite alternate ease-in-out;
}
.monsters-squad .monster-combat-unit:nth-child(2) .monster-sprite-box.walking-bob {
  animation: mobStepBob 0.44s infinite alternate ease-in-out 0.12s;
}
.monsters-squad .monster-combat-unit:nth-child(3) .monster-sprite-box.walking-bob {
  animation: mobStepBob 0.34s infinite alternate ease-in-out 0.2s;
}
.monsters-squad .monster-combat-unit:nth-child(4) .monster-sprite-box.walking-bob {
  animation: mobStepBob 0.50s infinite alternate ease-in-out 0.08s;
}

.monster-combat-unit.boss {
  width: 96px;
  z-index: 5 !important;
}

.monster-combat-unit.dead {
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--mob-unit-x, 0px)) translateY(calc(var(--mob-unit-y, 0px) + 12px)) scale(0.3) !important;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out !important;
  overflow: hidden;
}

/* 영웅 & 몬스터 픽셀 아트 이미지 시스템 */
.hero-sprite-box, .monster-sprite-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 64px;
  width: 100%;
  position: relative;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
}

.pixel-unit-img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.hero-img {
  height: 56px;
  width: auto;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.monster-img {
  height: 54px;
  width: auto;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.monsters-squad.count-4 .monster-img {
  height: 46px;
}

.monster-combat-unit.boss .monster-img {
  height: 88px;
}

/* 영웅 근접 공격 돌진 (우측 적의 코앞으로 깊숙이 파고드는 베기 돌진) */
.hero-sprite-box.melee-strike .hero-img {
  animation: heroStrikeLunge 0.26s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes heroStrikeLunge {
  0% { transform: scale(1) translateX(0); }
  40% { transform: scale(1.24) translateX(28px); filter: drop-shadow(0 0 16px #fbbf24) brightness(1.2); }
  100% { transform: scale(1) translateX(0); }
}

/* 영웅 원거리 캐스팅 모션 */
.hero-sprite-box.casting .hero-img {
  animation: heroCastLunge 0.28s ease-out;
}

@keyframes heroCastLunge {
  0% { transform: scale(1) translateX(0); }
  40% { transform: scale(1.15) translateX(12px) translateY(-3px); filter: drop-shadow(0 0 14px #38bdf8); }
  100% { transform: scale(1) translateX(0); }
}

/* 몬스터 근접 공격 돌진 (좌측 영웅을 향해 덮치는 돌진 공격) */
.monster-sprite-box.melee-strike .monster-img {
  animation: mobStrikeLunge 0.26s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes mobStrikeLunge {
  0% { transform: scale(1) translateX(0); }
  40% { transform: scale(1.25) translateX(-28px); filter: drop-shadow(0 0 16px #ef4444) brightness(1.2); }
  100% { transform: scale(1) translateX(0); }
}

/* 몬스터 원거리 캐스팅 모션 (좌측 영웅을 향해 발사) */
.monster-sprite-box.casting .monster-img {
  animation: mobCastLunge 0.3s ease-out;
}

@keyframes mobCastLunge {
  0% { transform: scale(1) translateX(0); }
  40% { transform: scale(1.15) translateX(-12px) translateY(-3px); filter: drop-shadow(0 0 14px #a855f7); }
  100% { transform: scale(1) translateX(0); }
}

.hero-img.dead {
  filter: grayscale(0.9) brightness(0.5);
  transform: rotate(15deg);
}

/* 영웅 피격 반동 */
.hero-sprite-box.hit .hero-img {
  animation: heroHitFlash 0.22s ease;
}

@keyframes heroHitFlash {
  0% { transform: translateX(0); filter: brightness(2.2) drop-shadow(0 0 12px #ef4444); }
  35% { transform: translateX(-8px) rotate(-5deg); filter: brightness(1.8) drop-shadow(0 0 8px #ef4444); }
  70% { transform: translateX(3px); }
  100% { transform: translateX(0); filter: none; }
}

/* 몬스터 발톱/이빨 할퀴기 이펙트 */
.mob-claw-fx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  animation: mobClawArc 0.24s ease-out forwards;
}

@keyframes mobClawArc {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(30deg); opacity: 1; filter: drop-shadow(0 0 12px #ef4444); }
  50% { transform: translate(-50%, -50%) scale(1.3) rotate(-15deg); opacity: 1; filter: drop-shadow(0 0 18px #dc2626); }
  100% { transform: translate(-50%, -50%) scale(1.5) rotate(-45deg); opacity: 0; filter: none; }
}

/* 몬스터 피격 반동 */
.monster-sprite-box.hit .monster-img {
  animation: monsterHitFlash 0.22s ease;
}

@keyframes monsterHitFlash {
  0% { transform: translateX(0); filter: brightness(2.5) drop-shadow(0 0 12px #ef4444); }
  35% { transform: translateX(8px) rotate(5deg); filter: brightness(2) drop-shadow(0 0 8px #ef4444); }
  70% { transform: translateX(-3px); }
  100% { transform: translateX(0); filter: none; }
}

/* 유닛 HP 바 */
.unit-hp-bar {
  width: 100%;
  max-width: 58px;
  height: 9px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  margin-top: 2px;
}

.monsters-squad.count-4 .unit-hp-bar {
  max-width: 44px;
  height: 7px;
}

.monster-combat-unit.boss .unit-hp-bar {
  max-width: 80px;
  height: 11px;
}

.unit-hp-fill {
  height: 100%;
  transition: width 0.12s ease-out;
}

.hero-hp-bar .unit-hp-fill {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.monster-hp-bar .unit-hp-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.unit-hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* 투사체 및 근접 참격 이펙트 레이어 */
.combat-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

/* 근접 참격 검기 이펙트 */
.melee-slash-fx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 12;
  animation: slashArc 0.22s ease-out forwards;
}

@keyframes slashArc {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(-30deg); opacity: 1; filter: drop-shadow(0 0 14px #fbbf24); }
  50% { transform: translate(-50%, -50%) scale(1.35) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 20px #f59e0b); }
  100% { transform: translate(-50%, -50%) scale(1.6) rotate(45deg); opacity: 0; filter: none; }
}

/* 영웅 원거리 투사체 (마법/화살) */
.hero-spell-orb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #67e8f9 0%, #0284c7 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 12px #38bdf8, 0 0 20px #0284c7;
  transition: left 0.22s linear, top 0.22s linear;
}

/* 몬스터 원거리 투사체 (화염구/독침) */
.mob-spell-orb {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #f87171 0%, #dc2626 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 12px #ef4444, 0 0 18px #b91c1c;
  transition: left 0.22s linear, top 0.22s linear;
}

.hit-burst-fx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  animation: burstFade 0.25s ease-out forwards;
  pointer-events: none;
  z-index: 11;
}

@keyframes burstFade {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* 데미지 및 보상 텍스트 레이어 */
.damage-text-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}

.float-dmg {
  position: absolute;
  font-weight: 900;
  font-size: 0.95rem;
  color: #f87171;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(239, 68, 68, 0.6);
  animation: floatUpDamage 0.75s ease-out forwards;
}

.float-dmg.crit {
  font-size: 1.2rem;
  color: #fbbf24;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.9);
}

.float-loot {
  position: absolute;
  font-weight: 900;
  font-size: 0.85rem;
  color: #fde047;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  animation: floatUpLoot 0.9s ease-out forwards;
}

@keyframes floatUpDamage {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 1; }
  30% { transform: translate(-50%, -18px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -40px) scale(0.9); opacity: 0; }
}

@keyframes floatUpLoot {
  0% { transform: translate(-50%, 0) scale(0.8); opacity: 1; }
  50% { transform: translate(-50%, -22px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -48px) scale(0.9); opacity: 0; }
}

/* 몬스터가 여럿이 겹쳐 서 있어도 체력바가 서로 가리지 않도록, 짝수 번째 몬스터의 체력바를 한 단 아래로 내림 */
.monsters-squad:not(.count-1) .monster-combat-unit:nth-child(even) .monster-hp-bar {
  transform: translateY(9px);
}


/* 👾 몬스터 계열 배지 (스프라이트 위에 작게 표시) */
.mob-family-badge {
  font-size: 9px;
  line-height: 1;
  padding: 1px 3px;
  margin-bottom: 1px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 3;
}
.monster-combat-unit.boss .mob-family-badge { font-size: 11px; padding: 2px 4px; }


/* ===== 무기 연구 상태 표시 (js/weapon-fx.js) ===== */
.monster-combat-unit.wr-bleed .monster-img { filter: drop-shadow(0 0 6px #ef4444) saturate(1.4) hue-rotate(-12deg); }
.monster-combat-unit.wr-vuln .monster-img { filter: drop-shadow(0 0 8px #a855f7) brightness(1.15); }
.monster-combat-unit.wr-stun .monster-img { filter: grayscale(0.5) brightness(0.9); animation: wrStunShake 0.25s infinite alternate; }
@keyframes wrStunShake { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
.hero-sprite-box.wr-dash { filter: drop-shadow(-14px 0 6px rgba(125, 211, 252, 0.7)) drop-shadow(-26px 0 8px rgba(125, 211, 252, 0.35)); }


/* ===== 펫 스킬 부가 효과 상태 표시 (js/pet-skill-fx.js · weapon-fx.js) — 정적 필터만 사용 ===== */
.monster-combat-unit.wr-slow .monster-img { filter: drop-shadow(0 0 6px #60a5fa) saturate(0.7); }
.monster-combat-unit.wr-root .monster-img { filter: drop-shadow(0 0 6px #e5e7eb) grayscale(0.35); }
.monster-combat-unit.wr-burn .monster-img { filter: drop-shadow(0 0 6px #f97316) saturate(1.3); }
.monster-combat-unit.wr-poison .monster-img { filter: drop-shadow(0 0 6px #22c55e) hue-rotate(40deg); }
.monster-combat-unit.wr-weaken .monster-img { filter: grayscale(0.4) brightness(0.85); }
.monster-combat-unit.wr-blind .monster-img { filter: brightness(0.6) drop-shadow(0 0 5px #0f172a); }

/* 몬스터 머리 위 디버프 아이콘 줄 (js/weapon-fx.js wrRenderDebuffs) */
.mob-debuffs {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1px; padding: 1px 3px;
  background: rgba(15, 23, 42, 0.78); border: 1px solid rgba(248, 113, 113, 0.55); border-radius: 8px;
  pointer-events: none; z-index: 12; white-space: nowrap;
}
.mob-debuff { font-size: 11px; line-height: 1; display: inline-flex; }
.mob-debuff img.emo { width: 12px; height: 12px; }
.monster-combat-unit.boss .mob-debuff { font-size: 13px; }
.monster-combat-unit.dead .mob-debuffs { display: none; }