/* 战场位图统一采用“图片优先、CSS 机体降级”，弱网或解码失败时仍可继续战斗。 */
.actor-art-motion {
  position: absolute;
  z-index: 2;
  width: 132%;
  height: 132%;
  top: 48%;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 72%;
  transition: opacity 0.14s ease;
}

.actor-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.has-unit-art .machine {
  opacity: 1;
  transition: opacity 0.14s ease;
}

.has-unit-art.is-art-ready .actor-art-motion {
  opacity: 1;
}

.has-unit-art.is-art-ready .machine {
  opacity: 0;
}

.has-unit-art.is-art-fallback .actor-art-motion {
  display: none;
}

.has-unit-art.is-art-fallback .machine {
  opacity: 1;
}

.allied-formation .has-unit-art {
  width: 94px;
  height: 74px;
}

.allied-formation .has-unit-art:nth-child(1) {
  right: -6%;
  bottom: 0;
}

.allied-formation .has-unit-art:nth-child(2) {
  right: 43%;
  bottom: 22%;
}

.allied-formation .has-unit-art:nth-child(3) {
  right: -4%;
  bottom: 51%;
}

.allied-formation .has-unit-art:nth-child(4) {
  right: 46%;
  bottom: 70%;
}

.ally-art-motion {
  width: 142%;
  height: 142%;
  top: 44%;
}

.ally-art {
  filter: drop-shadow(0 8px 5px rgba(0, 10, 28, 0.68)) drop-shadow(0 0 6px color-mix(in srgb, var(--unit-accent) 48%, transparent));
}

.is-ally.is-mariner .ally-art-motion,
.is-ally.is-skylink .ally-art-motion {
  width: 152%;
  height: 152%;
}

.allied-formation .has-unit-art .actor-shadow {
  width: 94%;
  height: 15px;
  left: 3%;
  bottom: 0;
  background: radial-gradient(ellipse, rgba(0, 7, 24, 0.74), rgba(0, 21, 39, 0.2) 62%, transparent 72%);
  filter: blur(3px);
}

.allied-formation .has-unit-art .unit-status {
  width: 76%;
  height: 66%;
  top: 13%;
  left: 12%;
}

.allied-formation .has-unit-art .unit-level {
  right: 1px;
  bottom: -2px;
}

.allied-formation .has-unit-art:not(.is-acting):not(.is-hit) .ally-art-motion {
  animation: ally-unit-idle 1.8s ease-in-out infinite;
  animation-delay: var(--slot-delay);
}

.allied-formation .has-unit-art.is-skylink:not(.is-acting):not(.is-hit) .ally-art-motion {
  animation-name: ally-air-idle;
  animation-duration: 1.45s;
}

.allied-formation .has-unit-art.is-acting .ally-art-motion {
  animation: ally-art-fire 0.47s cubic-bezier(0.18, 0.78, 0.24, 1);
}

.allied-formation .has-unit-art.is-hit .ally-art-motion {
  animation: ally-art-hit 0.17s steps(2, end) !important;
}

.battle-event {
  position: absolute;
  z-index: 24;
  width: min(88%, 390px);
  top: 88px;
  left: 50%;
  padding: 7px 13px;
  border: 1px solid rgba(255, 232, 153, 0.92);
  border-radius: 4px 13px;
  color: white;
  background: linear-gradient(90deg, rgba(74, 7, 29, 0.94), rgba(148, 24, 55, 0.94), rgba(74, 7, 29, 0.94));
  box-shadow: 0 0 0 2px rgba(255, 47, 84, 0.18), 0 8px 22px rgba(0, 5, 18, 0.52);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-align: center;
  transform: translateX(-50%);
  animation: battle-event-in 0.36s cubic-bezier(0.16, 0.82, 0.22, 1) both;
}

.battle-event.is-battle-intro {
  width: min(74%, 330px);
  top: 44%;
  padding: 12px 18px;
  border: 2px solid rgba(255, 235, 144, 0.98);
  border-radius: 5px 18px;
  color: #fff5bf;
  background: linear-gradient(100deg, rgba(5, 39, 68, 0.96), rgba(13, 101, 124, 0.97), rgba(5, 39, 68, 0.96));
  box-shadow: 0 0 0 4px rgba(84, 229, 225, 0.18), 0 10px 32px rgba(0, 18, 38, 0.62), 0 0 24px rgba(255, 215, 104, 0.28);
  font-size: 22px;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 8px rgba(0, 15, 31, 0.72);
  animation: battle-intro-banner 1.25s ease both;
}

.battle-view.is-phase-shift .battlefield {
  animation: phase-camera 0.58s steps(3, end);
}

.battle-view.is-phase-shift::after {
  position: absolute;
  z-index: 13;
  inset: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle at 74% 40%, rgba(255, 44, 82, 0.45), transparent 34%);
  animation: phase-flash 0.62s ease-out forwards;
}

.enemy-tempest {
  width: 126px !important;
  height: 102px !important;
}

.enemy-tempest .enemy-art-motion {
  width: 142%;
  height: 142%;
  top: 46%;
}

.enemy-tempest .enemy-art {
  filter: drop-shadow(0 10px 7px rgba(4, 0, 22, 0.8)) drop-shadow(0 0 9px rgba(175, 69, 255, 0.64));
}

.enemy-formation:not(.is-entering):not(.is-defeated) .enemy-tempest:not(.is-acting):not(.is-hit) .enemy-art-motion {
  animation: tempest-stalk 1.45s ease-in-out infinite alternate;
  animation-delay: var(--slot-delay);
}

.enemy-tempest.is-acting .enemy-art-motion {
  animation: tempest-fire 0.47s cubic-bezier(0.16, 0.78, 0.22, 1);
}

.enemy-formation.is-phase-two .enemy-tempest .enemy-art {
  filter: brightness(1.2) saturate(1.42) drop-shadow(0 0 14px #9c54ff) drop-shadow(0 10px 7px rgba(4, 0, 22, 0.8));
}

.enemy-formation.is-phase-two .enemy-tempest .enemy-art-motion {
  animation-duration: 0.78s !important;
}

.enemy-omega.has-enemy-art.is-boss {
  width: 226px;
  height: 166px;
  right: -4% !important;
  bottom: 4% !important;
}

.enemy-omega .enemy-art-motion {
  width: 142%;
  height: 142%;
  top: 47%;
}

.enemy-omega .enemy-art {
  filter: drop-shadow(0 15px 10px rgba(0, 2, 17, 0.86)) drop-shadow(0 0 12px rgba(255, 38, 76, 0.58));
}

.enemy-formation:not(.is-entering):not(.is-defeated) .enemy-omega:not(.is-acting):not(.is-hit) .enemy-art-motion {
  animation: omega-hover 1.9s ease-in-out infinite;
}

.enemy-omega.is-acting .enemy-art-motion {
  animation: omega-salvo 0.47s cubic-bezier(0.18, 0.72, 0.24, 1);
}

.enemy-omega.is-charging .enemy-art {
  filter: brightness(1.42) saturate(1.5) drop-shadow(0 0 18px #ff3157) drop-shadow(0 15px 10px rgba(0, 2, 17, 0.86));
}

.enemy-formation.is-phase-two .enemy-omega .enemy-art {
  filter: brightness(1.25) saturate(1.58) drop-shadow(0 0 17px white) drop-shadow(0 0 32px #ff214f);
}

.enemy-formation.is-phase-two .enemy-omega .actor-art-motion::after {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  border: 2px solid rgba(255, 235, 241, 0.92);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 14px #ff3157, inset 0 0 18px rgba(255, 49, 87, 0.52);
  transform: translate(-50%, -50%);
  animation: omega-core-ring 0.72s ease-in-out infinite alternate;
}

.enemy-lunar,
.enemy-dune {
  width: 118px !important;
  height: 128px !important;
}

.enemy-lunar .enemy-art-motion,
.enemy-dune .enemy-art-motion {
  width: 132%;
  height: 132%;
  top: 48%;
}

.enemy-lunar .enemy-art {
  filter: drop-shadow(0 9px 7px rgba(26, 30, 73, 0.58)) drop-shadow(0 0 9px rgba(151, 163, 255, 0.7));
}

.enemy-dune .enemy-art {
  filter: drop-shadow(0 9px 7px rgba(92, 57, 26, 0.48)) drop-shadow(0 0 8px rgba(255, 184, 87, 0.66));
}

.enemy-formation:not(.is-entering):not(.is-defeated) .enemy-lunar:not(.is-acting):not(.is-hit) .enemy-art-motion {
  animation: omega-hover 1.75s ease-in-out infinite;
  animation-delay: var(--slot-delay);
}

.enemy-formation:not(.is-entering):not(.is-defeated) .enemy-dune:not(.is-acting):not(.is-hit) .enemy-art-motion {
  animation: tempest-stalk 1.25s ease-in-out infinite alternate;
  animation-delay: var(--slot-delay);
}

.enemy-lunar.is-acting .enemy-art-motion,
.enemy-dune.is-acting .enemy-art-motion {
  animation: tempest-fire 0.47s cubic-bezier(0.16, 0.78, 0.22, 1);
}

.enemy-formation.is-phase-two .enemy-lunar .enemy-art {
  filter: brightness(1.25) saturate(1.35) drop-shadow(0 0 16px #91a8ff);
}

.enemy-formation.is-phase-two .enemy-dune .enemy-art {
  filter: brightness(1.2) saturate(1.42) drop-shadow(0 0 15px #ffc45c);
}

.enemy-citadel.has-enemy-art.is-boss {
  width: 192px;
  height: 176px;
  right: 0 !important;
  bottom: 6% !important;
}

.enemy-citadel .enemy-art-motion {
  width: 142%;
  height: 142%;
  top: 47%;
}

.enemy-citadel .enemy-art {
  filter: drop-shadow(0 14px 9px rgba(34, 54, 74, 0.58)) drop-shadow(0 0 12px rgba(91, 225, 236, 0.72));
}

.enemy-formation:not(.is-entering):not(.is-defeated) .enemy-citadel:not(.is-acting):not(.is-hit) .enemy-art-motion {
  animation: omega-hover 1.6s ease-in-out infinite;
}

.enemy-citadel.is-acting .enemy-art-motion {
  animation: omega-salvo 0.47s cubic-bezier(0.18, 0.72, 0.24, 1);
}

.enemy-formation.is-phase-two .enemy-citadel .enemy-art {
  filter: brightness(1.28) saturate(1.45) drop-shadow(0 0 18px white) drop-shadow(0 0 32px #61dbe5);
}

.enemy-muzzle.is-tempest {
  width: 72px;
  height: 38px;
  top: calc(27% + var(--source-offset));
  right: 18%;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, #a855f7 22%, white 58%, #41dfff 74%, transparent);
  filter: drop-shadow(0 0 11px #a855f7);
}

.enemy-muzzle.is-omega {
  width: 76px;
  height: 76px;
  top: calc(22% + var(--source-offset));
  right: 27%;
  background: conic-gradient(from 0deg, transparent 0 8%, #ff3157 9% 13%, transparent 14% 24%, white 25% 29%, transparent 30% 44%, #ff3157 45% 50%, transparent 51%);
  filter: drop-shadow(0 0 14px #ff234f);
}

.enemy-muzzle.is-lunar {
  width: 74px;
  height: 74px;
  top: calc(24% + var(--source-offset));
  right: 18%;
  border: 3px dotted #f6f0bf;
  background: radial-gradient(circle, white 0 6%, #879cff 8% 16%, transparent 44%);
  filter: drop-shadow(0 0 13px #889dff);
}

.enemy-muzzle.is-dune {
  width: 86px;
  height: 18px;
  top: calc(28% + var(--source-offset));
  right: 15%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #ffc15c 36%, white 62%, transparent);
  filter: drop-shadow(0 0 10px #ffae4a);
}

.enemy-muzzle.is-citadel {
  width: 82px;
  height: 82px;
  top: calc(21% + var(--source-offset));
  right: 25%;
  background: conic-gradient(from 15deg, transparent 0 10%, #74e8e2 11% 16%, transparent 17% 31%, white 32% 38%, transparent 39% 58%, #e8c862 59% 65%, transparent 66%);
  filter: drop-shadow(0 0 15px #69dfe2);
}

.battle-projectile.is-enemy.is-volley-3 {
  top: 42%;
  right: 28%;
  animation-delay: 0.035s;
}

.battle-view[data-theme="tempest"] .battlefield::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  background: repeating-linear-gradient(116deg, transparent 0 28px, rgba(202, 226, 255, 0.11) 30px 31px, transparent 33px 56px);
  animation: tempest-rain 1.1s linear infinite;
}

.battle-view[data-theme="omega"] .battle-line {
  border-color: rgba(255, 75, 115, 0.38);
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(255, 74, 115, 0.34) 50%, transparent 50.4%),
    linear-gradient(0deg, transparent 49.6%, rgba(103, 220, 255, 0.22) 50%, transparent 50.4%);
  box-shadow: inset 0 0 24px rgba(255, 39, 79, 0.12);
}

.battle-view[data-theme="lunar"] .battlefield::after,
.battle-view[data-theme="citadel"] .battlefield::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle at 72% 32%, rgba(164, 222, 255, 0.18), transparent 28%);
}

.battle-view[data-theme="dune"] .battle-line {
  border-color: rgba(222, 164, 75, 0.44);
  box-shadow: inset 0 0 28px rgba(255, 215, 119, 0.12);
}

@keyframes ally-unit-idle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1deg); }
  50% { transform: translate(-50%, -54%) rotate(1deg); filter: brightness(1.08); }
}

@keyframes ally-air-idle {
  0% { transform: translate(-54%, -46%) rotate(-2deg); }
  100% { transform: translate(-46%, -56%) rotate(2deg); filter: brightness(1.1); }
}

@keyframes ally-art-fire {
  0%, 100% { transform: translate(-50%, -50%); }
  24% { transform: translate(-58%, -47%) scale(0.96); }
  42% { transform: translate(-35%, -57%) scale(1.07); filter: brightness(1.5) drop-shadow(0 0 12px var(--unit-accent)); }
}

@keyframes ally-art-hit {
  0%, 100% { transform: translate(-50%, -50%); }
  35% { transform: translate(-57%, -48%) rotate(-3deg); filter: brightness(3) saturate(0.22); }
  70% { transform: translate(-43%, -52%) rotate(2deg); filter: brightness(0.7) saturate(1.7); }
}

@keyframes tempest-stalk {
  from { transform: translate(-51%, -48%) rotate(-1deg); }
  to { transform: translate(-47%, -54%) rotate(1deg); filter: brightness(1.08) drop-shadow(0 0 10px #9b5cff); }
}

@keyframes tempest-fire {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(-39%, -52%) scaleX(0.94); }
  38% { transform: translate(-62%, -48%) scale(1.07); filter: brightness(1.55) drop-shadow(0 0 16px #b65cff); }
}

@keyframes omega-hover {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -54%) scale(1.025); filter: brightness(1.08) drop-shadow(0 0 13px #ff3157); }
}

@keyframes omega-salvo {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  22% { transform: translate(-40%, -51%) scaleX(0.94); }
  38% { transform: translate(-58%, -49%) scale(1.06); filter: brightness(1.62) drop-shadow(0 0 22px #ff214f); }
}

@keyframes omega-core-ring {
  from { opacity: 0.48; transform: translate(-50%, -50%) scale(0.78) rotate(0); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(42deg); }
}

@keyframes battle-event-in {
  0% { opacity: 0; transform: translate(-50%, -12px) scaleX(0.68); }
  55% { opacity: 1; transform: translate(-50%, 2px) scaleX(1.04); }
  100% { transform: translate(-50%, 0) scaleX(1); }
}

@keyframes battle-intro-banner {
  0% { opacity: 0; transform: translate(-50%, 8px) scaleX(0.55); }
  18%, 70% { opacity: 1; transform: translate(-50%, 0) scaleX(1); }
  82% { filter: brightness(1.25); }
  100% { opacity: 0; transform: translate(-50%, -5px) scaleX(1.06); }
}

@keyframes phase-camera {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-6px, 3px) scale(1.025); }
  66% { transform: translate(5px, -3px) scale(1.018); }
}

@keyframes phase-flash {
  0% { opacity: 0; }
  24% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes tempest-rain {
  from { transform: translate(-12%, -10%); }
  to { transform: translate(12%, 10%); }
}

.battle-unit.is-defeated {
  pointer-events: none;
  animation: battle-unit-casualty 0.88s cubic-bezier(0.32, 0, 0.7, 0.22) forwards !important;
}

.battle-unit.is-defeated .actor-art-motion {
  animation: battle-actor-casualty 0.88s cubic-bezier(0.32, 0, 0.7, 0.22) forwards !important;
}

.battle-unit.is-defeated .unit-hp,
.battle-unit.is-defeated .unit-level,
.battle-unit.is-defeated .unit-status {
  opacity: 0;
  transition: opacity 0.16s ease;
}

@keyframes battle-unit-casualty {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
  22% { opacity: 1; transform: translateY(-7px) scale(1.08); filter: brightness(2.8) saturate(0.25); }
  58% { opacity: 0.82; transform: translate(7px, 8px) rotate(7deg) scale(0.82); filter: brightness(0.78) saturate(1.4); }
  100% { opacity: 0; visibility: hidden; transform: translate(18px, 34px) rotate(18deg) scale(0.24); filter: brightness(0.2) blur(3px); }
}

@keyframes battle-actor-casualty {
  0% { opacity: 1; filter: brightness(1); }
  28% { opacity: 1; filter: brightness(3) saturate(0); }
  100% { opacity: 0; filter: brightness(0.18) blur(4px); }
}

@media (max-width: 370px) {
  .allied-formation .has-unit-art {
    width: 86px;
    height: 68px;
  }

  .enemy-tempest {
    width: 112px !important;
    height: 92px !important;
  }

  .enemy-lunar,
  .enemy-dune {
    width: 104px !important;
    height: 112px !important;
  }

  .enemy-omega.has-enemy-art.is-boss {
    width: 196px;
    height: 148px;
    right: 0 !important;
  }

  .enemy-citadel.has-enemy-art.is-boss {
    width: 168px;
    height: 156px;
    right: 1% !important;
  }

  .battle-event {
    top: 84px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .actor-art-motion,
  .battle-unit.is-defeated,
  .battle-event,
  .battle-view[data-theme="tempest"] .battlefield::after,
  .enemy-formation.is-phase-two .enemy-omega .actor-art-motion::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .battle-view.is-phase-shift .battlefield {
    animation: none !important;
  }

  .battle-event.is-battle-intro {
    opacity: 1;
    animation: none !important;
  }
}