/* 战斗终态：指挥官与 Q 版战士同处阵列，覆盖旧头像卡规则。 */
.battle-view .allied-formation .battle-unit:nth-child(1) { left: 29%; }
.battle-view .allied-formation .battle-unit:nth-child(2) { left: 52%; }
.battle-view .allied-formation .battle-unit:nth-child(3) { left: 25%; }
.battle-view .allied-formation .battle-unit:nth-child(4) { left: 48%; }

/* 结算卡出现后给友军留出完整展示区，不让角色和单位埋在弹窗后面。 */
.battle-view.is-result-visible .allied-formation {
  transform: translateY(-96px);
}

.battle-view.is-result-visible .battlefield .battle-hero {
  bottom: calc(7% + 92px);
}

/* 旧敌军镜像规则不应继续翻转头顶等级文字。 */
.battle-view .enemy-formation .battle-unit .unit-level {
  transform: none;
}

/* 敌军角色与兵种单位分层：右上只保留本关唯一敌将，编队显示其麾下载具。 */
.battle-view .enemy-formation .battle-unit:nth-child(1) { right: 29% !important; }
.battle-view .enemy-formation .battle-unit:nth-child(2) { right: 52% !important; }
.battle-view .enemy-formation .battle-unit:nth-child(3) { right: 31% !important; }
.battle-view .enemy-formation .battle-unit:nth-child(4) { right: 54% !important; }

.battle-enemy-commander {
  --enemy-accent: #e96e82;
  position: absolute;
  z-index: 10;
  width: 104px;
  height: 146px;
  top: 8%;
  right: 0;
  pointer-events: none;
  filter: drop-shadow(0 7px 5px rgba(45, 30, 54, 0.36));
  transform-origin: 52% 86%;
}

.battle-enemy-commander:is(.is-boss, .has-commander-art) {
  width: 124px;
  height: 174px;
  top: 3%;
}

.battle-enemy-commander[data-variant="talon"],
.battle-enemy-commander[data-variant="citadel"] { --enemy-accent: #8f81df; }
.battle-enemy-commander[data-variant="neris"],
.battle-enemy-commander[data-variant="lunar"] { --enemy-accent: #5ebed3; }
.battle-enemy-commander[data-variant="tempest"],
.battle-enemy-commander[data-variant="oracle"] { --enemy-accent: #b76bb9; }
.battle-enemy-commander[data-variant="omega"],
.battle-enemy-commander[data-variant="dune"] { --enemy-accent: #d99155; }
.battle-enemy-commander[data-variant="nox"] { --enemy-accent: #d14d73; }

.battle-enemy-commander > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 52% 84%;
  animation: enemy-commander-breathe 2.25s ease-in-out infinite;
}

.battle-enemy-commander-tag {
  position: absolute;
  width: 112px;
  right: -2px;
  bottom: -15px;
  display: grid;
  justify-items: center;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-bottom: 3px solid var(--enemy-accent);
  border-radius: 3px 8px 3px 8px;
  background: rgba(255, 248, 241, 0.94);
  box-shadow: 0 3px 8px rgba(55, 35, 48, 0.22);
  text-align: center;
}

.battle-enemy-commander-tag small { color: #96606d; font-size: 6px; font-weight: 900; }
.battle-enemy-commander-tag b { max-width: 100%; overflow: hidden; color: #503545; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.battle-enemy-commander.is-entering { animation: enemy-commander-enter 0.72s cubic-bezier(0.18, 0.82, 0.24, 1) both; }
.battle-enemy-commander.is-phase-two:not(.is-defeated) > img {
  filter: brightness(1.12) saturate(1.3) drop-shadow(0 0 10px var(--enemy-accent));
  animation-duration: 1.2s;
}
.battle-enemy-commander.is-defeated {
  animation: enemy-commander-defeat 1.12s cubic-bezier(0.3, 0, 0.76, 0.24) forwards !important;
}
.battle-enemy-commander.is-defeated > img { animation: enemy-commander-shatter 1.12s ease-in forwards !important; }

@keyframes enemy-commander-breathe { 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes enemy-commander-enter {
  from { opacity: 0; transform: translate3d(48px, -20px, 0) scale(0.72); filter: brightness(2.5) blur(3px); }
  70% { opacity: 1; transform: translate3d(-4px, 2px, 0) scale(1.04); filter: brightness(1.25) blur(0); }
}
@keyframes enemy-commander-shatter {
  0% { opacity: 1; transform: translateY(0) rotate(0) scale(1); filter: brightness(1); }
  18% { opacity: 1; transform: translateY(-8px) rotate(-3deg) scale(1.08); filter: brightness(3.5) saturate(0); }
  44% { opacity: 1; transform: translate(10px, -4px) rotate(6deg) scale(0.98); filter: brightness(1.4) saturate(1.6); }
  76% { opacity: 0.72; transform: translate(18px, 14px) rotate(10deg) scale(0.8); filter: brightness(0.65) saturate(1.8) blur(1px); }
  100% { opacity: 0; transform: translate(34px, 44px) rotate(17deg) scale(0.42); filter: brightness(0.2) saturate(2) blur(4px); }
}
@keyframes enemy-commander-defeat {
  0%, 86% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.battle-view .battlefield .battle-hero {
  z-index: 10;
  width: 106px;
  height: 176px;
  top: auto;
  right: auto;
  bottom: 7%;
  left: 1%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 7px 5px rgba(31, 48, 55, 0.38));
  transform-origin: 50% 88%;
}

.battle-view .battlefield .battle-hero:not(.is-commanding):not(.is-skill-arming):not(.is-skill-striking) {
  animation: command-card-breathe 2.6s ease-in-out infinite;
}

.battle-enemy-commander::before,
.battle-view .battlefield .battle-hero::before {
  content: none;
  display: none;
}

.battle-view .battlefield .battle-hero::after {
  display: block;
  z-index: -2;
  width: 78px;
  height: 13px;
  right: auto;
  bottom: 7px;
  left: 14px;
  background: radial-gradient(ellipse, rgba(42, 51, 48, 0.46), transparent 72%);
  filter: blur(2px);
}

.battle-view .battlefield .battle-hero > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  transform-origin: 50% 82%;
}

.battle-view .battlefield .battle-hero-tag {
  width: 96px;
  max-width: none;
  top: auto;
  bottom: -14px;
  left: 5px;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 3px solid var(--hero-accent);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px 3px 8px 3px;
  text-align: center;
  background: rgba(255, 252, 239, 0.92);
  box-shadow: 0 3px 8px rgba(33, 50, 60, 0.2);
}

.battle-view .battlefield .battle-hero-tag small {
  color: #657b84;
  font-size: 5px;
}

.battle-view .battlefield .battle-hero-tag b {
  color: #263f57;
  font-size: 8px;
}

/* 头部安全区从容器顶部开始，脚部可越出但脸部永不参与裁切。 */
.hero-cutin {
  --cutin-art-left: -4%;
  --cutin-art-width: 68%;
  --cutin-art-height: 176%;
  top: 14%;
  right: -5%;
  bottom: 31%;
  left: -5%;
  overflow: hidden;
  clip-path: polygon(0 2%, 100% 0, 98% 93%, 2% 100%);
}

.hero-cutin[data-hero="rin"] { --cutin-art-left: -5%; --cutin-art-width: 70%; }
.hero-cutin[data-hero="sora"] { --cutin-art-left: -5%; --cutin-art-width: 70%; }
.hero-cutin[data-hero="akari"] { --cutin-art-left: -1%; --cutin-art-width: 66%; }
.hero-cutin[data-hero="ayame"] { --cutin-art-left: -3%; --cutin-art-width: 66%; }
.hero-cutin[data-hero="kuya"] { --cutin-art-left: -3%; --cutin-art-width: 66%; }
.hero-cutin[data-hero="noa"] { --cutin-art-left: -7%; --cutin-art-width: 68%; }

.hero-cutin > img {
  width: var(--cutin-art-width);
  height: var(--cutin-art-height);
  top: 4%;
  bottom: auto;
  left: var(--cutin-art-left);
  object-fit: contain;
  object-position: 50% 0;
  mix-blend-mode: normal;
  filter: brightness(1.08) contrast(1.03) drop-shadow(13px 8px 0 rgba(3, 24, 43, 0.36));
  transform-origin: 50% 8%;
}

.hero-cutin .cutin-copy {
  z-index: 4;
  top: 29%;
  right: 6%;
  width: 49%;
}

@media (max-width: 360px) {
  .battle-view .battlefield .battle-hero {
    width: 94px;
    height: 158px;
  }

  .battle-view .allied-formation .battle-unit:nth-child(1) { left: 30%; }
  .battle-view .allied-formation .battle-unit:nth-child(3) { left: 27%; }
  .battle-enemy-commander { width: 90px; height: 128px; right: -2px; }
  .battle-enemy-commander:is(.is-boss, .has-commander-art) { width: 108px; height: 152px; top: 4%; }
  .battle-enemy-commander-tag { width: 98px; }
}

@media (max-height: 690px) {
  .battle-view .battlefield .battle-hero {
    width: 92px;
    height: 154px;
    bottom: 5%;
  }

  .battle-view.is-result-visible .allied-formation {
    transform: translateY(-78px);
  }

  .battle-view.is-result-visible .battlefield .battle-hero {
    bottom: calc(5% + 74px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-view .battlefield .battle-hero {
    animation: none !important;
  }

  .battle-enemy-commander,
  .battle-enemy-commander > img { animation: none !important; }
  .battle-enemy-commander.is-defeated { opacity: 0; visibility: hidden; }
}