/* 完整角色构图 */
.hero-stage {
  height: 330px;
  background: radial-gradient(circle at 50% 52%, #3158ae 0, #0b173e 68%);
}

.hero-stage .hero-art {
  inset: 0 auto 0 8%;
  width: 84%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  animation: homeHeroAlive 3.2s ease-in-out infinite;
}

.hero-card img,
.unlock-dialog img {
  object-fit: contain;
  object-position: center;
  background: radial-gradient(circle, #284d9d, #07102c 72%);
}

/* 动态战斗场景 */
#game .battle {
  height: 230px;
  flex: 0 0 230px;
  overflow: hidden;
  border-radius: 24px 24px 8px 8px;
  background:
    radial-gradient(circle at 22% 45%, #2e8bcc33, transparent 28%),
    radial-gradient(circle at 78% 42%, #943acf30, transparent 30%),
    linear-gradient(180deg, #152e72 0, #0a1747 72%, #060d2c 100%);
  box-shadow: inset 0 -24px 35px #02071888, inset 0 0 28px #55cfff18;
  isolation: isolate;
}

#game .battle::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -12%;
  right: -12%;
  bottom: -24px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #4266aa88 0, #111e53 48%, transparent 70%);
  transform: perspective(160px) rotateX(58deg);
  animation: battlefieldPulse 2.4s ease-in-out infinite;
}

#game .battle-hero {
  z-index: 2;
  left: 3%;
  bottom: 4px;
  width: 205px;
  height: 212px;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 100%;
  animation: heroCombatIdle 1.7s ease-in-out infinite;
}

#game .enemy-wrap {
  z-index: 2;
  right: 3%;
  bottom: 5px;
  width: 190px;
  animation: monsterCombatIdle 2.05s ease-in-out infinite;
}

#game .enemy-wrap::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4px;
  height: 18px;
  border-radius: 50%;
  background: #0009;
  filter: blur(5px);
}

#game .enemy {
  position: relative;
  width: 185px;
  height: 190px;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 100%;
}

#game .hero-hp {
  top: 9px;
  left: 14px;
  z-index: 10;
}

#game .hp {
  position: relative;
  z-index: 5;
  width: 120px;
  margin: -15px auto 0;
}

.battle.hero-damage .enemy-wrap {
  animation: monsterCounter 0.68s ease-out;
}

.battle.voice-casting .enemy-wrap {
  animation: monsterGuard .55s ease-in-out infinite alternate;
}

#game .battle.voice-casting::before {
  left: 2%;
  right: auto;
  bottom: 5%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #adfbff88 0 12%, #4aeaff33 28%, transparent 68%);
  transform: none;
  animation: chargeAura .45s infinite alternate;
}

.mission-card {
  position: relative;
  z-index: 6;
  margin-top: -3px;
  max-height: calc(100vh - 365px);
}

@keyframes homeHeroAlive {
  0%, 100% { transform: translateY(2px) scale(.98); filter: drop-shadow(0 0 12px #53dfff); }
  50% { transform: translateY(-7px) scale(1); filter: drop-shadow(0 0 22px #53dfff) brightness(1.08); }
}

@keyframes heroCombatIdle {
  0%, 100% { transform: translateX(0) translateY(0) rotate(-.7deg); }
  45% { transform: translateX(5px) translateY(-4px) rotate(.7deg); }
  55% { transform: translateX(6px) translateY(-5px) rotate(.4deg); }
}

@keyframes monsterCombatIdle {
  0%, 100% { transform: translateX(0) translateY(0) rotate(.5deg); }
  50% { transform: translateX(-7px) translateY(-5px) rotate(-1.4deg); }
}

@keyframes battlefieldPulse {
  50% { opacity: .68; transform: perspective(160px) rotateX(58deg) scaleX(1.08); }
}

@keyframes monsterCounter {
  0% { transform: translateX(0) scale(1); }
  38% { transform: translateX(-48px) scale(1.06) rotate(-4deg); }
  62% { transform: translateX(-36px) scale(1.04) rotate(3deg); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes monsterGuard {
  to { transform: translateX(6px) scale(.97); filter: brightness(.78); }
}

/* 攻击状态必须覆盖待机动作 */
#game .battle-hero.voice-windup { animation: heroCharge .55s infinite alternate !important; }
#game .battle-hero.voice-strike { animation: heroStrike .72s ease-out !important; }
#game .battle-hero.hero-hurt { animation: heroHurt .65s ease-out !important; }
#game .enemy.voice-hit { animation: monsterImpact .8s ease-out !important; }

@media (max-width: 520px) {
  .hero-stage { height: 290px; }
  #game .battle { height: 205px; flex-basis: 205px; }
  #game .battle-hero { left: -1%; width: 170px; height: 190px; }
  #game .enemy-wrap { right: 0; width: 155px; }
  #game .enemy { width: 150px; height: 170px; }
  #game .hp { width: 96px; }
  .mission-card { max-height: calc(100vh - 330px); }
}

@media (max-height: 760px) {
  #game .battle { height: 180px; flex-basis: 180px; }
  #game .battle-hero { height: 174px; }
  #game .enemy { height: 158px; }
  .mission-card { max-height: calc(100vh - 285px); }
}

.lite-mode #game .battle-hero,
.lite-mode #game .enemy-wrap,
.lite-mode .hero-stage .hero-art {
  animation-duration: 3s;
}