/*
 * 战场基础样式。
 *
 * 美术交付包把战斗样式分在两个文件里：
 *   · battle-depth.css   —— 景深、待机循环、每种招式的起手动作。**原样搬过来，一个字没改**
 *   · preview.css        —— 工作台自己的界面（侧栏、图库、检视面板）**外加**战场的基础几何
 *
 * preview.css 整份拿过来会把星阙的页面样式全盖掉，所以这里只抽出「战场需要的那几条」，
 * 逐条对应交付包原文（.battle-stage / .actor / .damage / .health-track / 受击与浮字动画）。
 * 抽出来的部分保持原值，只补了两处星阙自己的东西：血条配色跟随暗金主题、名条位置。
 *
 * 加在这里的规则不要改 battle-depth.css 里已有的同名选择器 —— 那份是交付物，
 * 下次美术更新时会整份替换，改了就会被冲掉。
 */

/* ── 舞台与场景（交付包 preview.css 原值）── */
.battle-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1672/941;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  background: #121b16;
}
.battle-stage .scene-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* 交付包用 contain（工作台要看全图）；游戏里铺满不露黑边 */
}
.battle-stage .scene-vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 -12px 40px #0003;
  pointer-events: none;
}

/* ── 角色（交付包 preview.css 原值）── */
.battle-stage .actor { position: absolute; will-change: transform; }
.battle-stage .actor img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 3px #0007);
  user-select: none;
}
.battle-stage .actor.take-hit img { animation: take-hit .65s ease-out; }
@keyframes take-hit {
  0%, 100% { filter: drop-shadow(0 7px 3px #0007); }
  35% { filter: brightness(1.65) drop-shadow(0 0 8px #e8c46a); }
}

/* ── 伤害浮字（交付包 preview.css 原值）── */
.battle-stage .fx-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.battle-stage .damage {
  position: absolute;
  font-size: clamp(14px, 3cqw, 34px);
  font-weight: 600;
  color: #fae7b0;
  text-shadow: 0 2px 4px #000;
  animation: damage-pop 1000ms both;
}
.battle-stage .damage.hurt { color: #edb8aa; }
/* 六维规范第六节：闪避事件浮字「闪避」，伤害 0 */
.battle-stage .damage.dodge { color: #bfe3dc; letter-spacing: .12em; }
@keyframes damage-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.85); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-35px); }
}

/* ── 头顶血条（交付包 preview.css 的 .health-block/.health-track，配色换成星阙暗金）── */
.battle-stage .health-block { width: 34%; min-width: 0; }
.battle-stage .health-block > div:first-child {
  display: flex; justify-content: space-between; gap: 6px; margin-bottom: 5px; align-items: baseline;
}
.battle-stage .health-block b {
  font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e2dfd2;
}
.battle-stage .health-block span {
  font: 9px Consolas, monospace; white-space: nowrap; color: #acb7a8;
}
.battle-stage .health-track { height: 4px; background: #263027; border-radius: 3px; overflow: hidden; }
.battle-stage .health-track i {
  display: block; width: 100%; height: 100%; background: #85ab92; transition: width .6s ease;
}
.battle-stage .enemy-health .health-track i { background: #bca16e; }

/* 画布特效层：盖在场景之上、浮字之下 */
.battle-stage .battle-vfx {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .battle-stage .actor.take-hit img,
  .battle-stage .damage { animation-duration: 1ms !important; }
  .battle-stage .health-track i { transition: none; }
}

/*
 * 交付包在舞台里占了三个位置：奖池牌 top 2%、招式名条 top 6%、战报 bottom 7%。
 * 星阙自己还有「副本名」「击杀进度」和底部操作条，所以这里做两件事：
 *   · 有奖池牌时把名条往下挪，两者不再叠在一起
 *   · 战报往上抬，别被底部操作条盖住
 * 这些是位置微调，不动交付包的观感。
 */
.battle-stage[data-has-pool="1"] .skill-banner { top: 13%; }
.battle-stage .battle-moment { bottom: 21%; }