/* battle-fx.css — v1.6 炫酷战斗：场景氛围 / 立绘动画 / 斩杀 / 倒计时 / 粒子
 * 仅战斗屏生效，靠 .battle-fx 作用域类名隔离，不污染其它屏。
 */

/* ===== 战斗场景氛围 ===== */
#battle-arena.battle-fx {
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(20,30,60,.18);
}
#battle-arena.battle-fx::before {
  /* 漂浮粒子层 */
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(2px 2px at 85% 65%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,.4), transparent 60%);
  animation: fxFloat 9s ease-in-out infinite alternate;
}
@keyframes fxFloat { from { transform: translateY(0) } to { transform: translateY(-14px) } }
#battle-arena.battle-fx .arena-horizon {
  border-left: 2px dashed rgba(90,110,140,.3);
  box-shadow: 6px 0 14px -10px rgba(0,0,0,.25);
}

/* ===== 立绘容器（取代 emoji 文本） ===== */
.mon-svg, .hero-svg { display: block; width: 100%; height: 100%; overflow: visible; }
#monster-emoji.mon-wrap, #player-emoji.hero-wrap {
  font-size: 0; line-height: 0; width: 82px; height: 82px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
#monster-emoji.mon-wrap.boss { width: 102px; height: 102px; }
#player-emoji.hero-wrap { width: 76px; height: 76px; }

/* 怪物待机漂浮 + 呼吸 */
#monster-emoji.mon-wrap { animation: monIdle 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes monIdle {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-5px) rotate(1deg); }
}
/* 英雄待机 */
#player-emoji.hero-wrap { animation: heroIdle 3s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes heroIdle {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

/* ===== 受击颤抖 ===== */
.anim-monster-hit { animation: monHit .32s ease; }
@keyframes monHit {
  0% { transform: translateX(0); filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)) brightness(1); }
  20% { transform: translateX(5px) rotate(3deg); filter: brightness(2.2) sepia(1) hue-rotate(-30deg) saturate(4); }
  40% { transform: translateX(-6px) rotate(-3deg); }
  60% { transform: translateX(4px); }
  100% { transform: translateX(0); filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)) brightness(1); }
}
/* 英雄受击 */
.anim-player-hit { animation: heroHit .4s ease; }
@keyframes heroHit {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(-8px) rotate(-4deg); filter: brightness(1.8) sepia(1) hue-rotate(-25deg) saturate(5); }
  60% { transform: translateX(5px); }
}

/* ===== 英雄突进攻击（每输入一个字母触发） ===== */
.anim-hero-lunge { animation: heroLunge .26s ease; }
@keyframes heroLunge {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(20px) scale(1.08); }
  100% { transform: translateX(0) scale(1); }
}

/* ===== 怪物死亡 / 斩杀碎裂 ===== */
.anim-monster-die { animation: monDie .6s ease forwards; }
@keyframes monDie {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  35% { transform: scale(1.15) rotate(-6deg); filter: brightness(2.4); }
  100% { transform: scale(.1) rotate(40deg); opacity: 0; }
}

/* ===== 斩杀斩击特效 ===== */
.fx-slash {
  position: absolute; left: 26%; top: 38%; z-index: 8; pointer-events: none;
  width: 110px; height: 7px; transform: translate(-50%,-50%) rotate(-32deg);
  background: linear-gradient(90deg, transparent, #fff 40%, #ffe14a 55%, #fff 70%, transparent);
  border-radius: 6px; filter: drop-shadow(0 0 10px #fff);
  animation: fxSlash .42s ease-out forwards;
}
@keyframes fxSlash {
  0% { width: 0; opacity: 0; }
  40% { width: 130px; opacity: 1; }
  100% { width: 130px; opacity: 0; transform: translate(-50%,-50%) rotate(-32deg) scaleX(1.1); }
}
.fx-execute {
  position: absolute; left: 26%; top: 38%; transform: translate(-50%,-50%); z-index: 9;
  font-size: 26px; font-weight: 900; color: #fff;
  text-shadow: 0 0 10px #ff3b30, 0 0 20px #ff3b30; pointer-events: none;
  animation: fxExecute .7s ease-out forwards;
}
@keyframes fxExecute {
  0% { opacity: 0; transform: translate(-50%,-30%) scale(.4); }
  30% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%,-70%) scale(1); }
}

/* ===== 碎片粒子（击杀时喷射） ===== */
.fx-shard {
  position: absolute; left: 26%; top: 44%; z-index: 7; width: 7px; height: 7px;
  border-radius: 2px; pointer-events: none;
  animation: fxShard .6s ease-out forwards;
}
@keyframes fxShard {
  0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2) rotate(220deg); }
}

/* ===== 倒计时（v1.11.9 #12：血条 → 纯时间徽标，顶部居中不重叠） ===== */
#battle-timer {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  height: 24px; padding: 3px 14px; border-radius: 999px; z-index: 6; pointer-events: none;
  display: none; line-height: 18px;
  background: rgba(20,28,50,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.25);
  color: #43c97d; font-size: 14px; font-weight: 900; letter-spacing: .5px;
}
#battle-timer-text { font-size: 14px; color: inherit; text-shadow: none; }
#battle-timer .timer-unit { font-size: 10px; font-weight: 700; opacity: .8; margin-left: 1px; }
#battle-timer.low { color: #ff3b30; animation: timerPulse .5s ease-in-out infinite; }
#battle-timer.warn { color: #ffd23f; }
@keyframes timerPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* ===== 连击迸发（每字母） ===== */
.fx-letter-hit {
  position: absolute; left: 50%; top: 44%; z-index: 8; pointer-events: none;
  width: 26px; height: 26px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, #fff 0%, #ffe14a 40%, transparent 70%);
  border-radius: 50%; animation: fxLetterHit .3s ease-out forwards;
}
@keyframes fxLetterHit { 0% { opacity: .9; transform: translate(-50%,-50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } }

/* ===== 屏幕震动（已有，增强） ===== */
.screen-shake { animation: screenShake .4s ease; }
@keyframes screenShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(6px, -3px); }
  60% { transform: translate(-4px, 2px); }
  80% { transform: translate(4px, -2px); }
}

/* 暗色主题（final）下立绘描边更亮 */
.theme-final #monster-emoji.mon-wrap, .theme-final #player-emoji.hero-wrap { filter: drop-shadow(0 0 10px rgba(255,220,120,.5)); }