.battle-view {
  --scene-overlay: linear-gradient(180deg, rgba(7, 34, 56, 0.12) 0 43%, rgba(2, 18, 32, 0.68) 100%);
  --scene-position: 50% 52%;
  overflow: hidden;
  isolation: isolate;
  background: #093b55;
}

.battle-view[data-theme="sky"] {
  --scene-overlay: linear-gradient(180deg, rgba(27, 72, 125, 0.04) 0 48%, rgba(6, 29, 60, 0.62) 100%);
  --scene-position: 54% 51%;
}

.battle-view[data-theme="abyss"] {
  --scene-overlay: linear-gradient(180deg, rgba(2, 14, 30, 0.18) 0 38%, rgba(1, 12, 27, 0.74) 100%);
  --scene-position: 55% 50%;
}

.battle-view[data-theme="tempest"] {
  --scene-overlay: linear-gradient(180deg, rgba(20, 8, 48, 0.1) 0 42%, rgba(8, 3, 25, 0.72) 100%);
  --scene-position: 54% 50%;
}

.battle-view[data-theme="omega"] {
  --scene-overlay: linear-gradient(180deg, rgba(17, 3, 19, 0.08) 0 40%, rgba(10, 2, 14, 0.7) 100%);
  --scene-position: 58% 50%;
}

.battle-view::before,
.battle-view::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  content: "";
  pointer-events: none;
}

.battle-view::before {
  background: radial-gradient(circle at 50% 46%, transparent 35%, rgba(2, 18, 30, 0.32) 100%);
}

.battle-view::after {
  background: rgba(1, 10, 22, 0.54);
  opacity: 0;
  transition: opacity 0.14s ease;
}

.battle-view.is-skill-focus::after {
  opacity: 1;
}

.battle-sky {
  inset: -3%;
  background:
    var(--scene-overlay),
    var(--battle-scene, url("./assets/scene-coral.webp")) var(--scene-position) / cover no-repeat;
  transform: none;
  filter: saturate(1.04) contrast(1.03);
}

.battle-scenery {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.battle-scenery::before,
.battle-scenery::after {
  position: absolute;
  content: "";
}

.battle-scenery::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 47%, transparent 26%, rgba(1, 10, 24, 0.24) 100%),
    linear-gradient(90deg, rgba(5, 17, 35, 0.2), transparent 27% 73%, rgba(5, 17, 35, 0.18));
}

.battle-scenery::after {
  width: 150%;
  height: 1px;
  right: -25%;
  bottom: 18%;
  background: rgba(184, 242, 255, 0.22);
  box-shadow: 0 36px 0 rgba(184, 242, 255, 0.08), 0 -44px 0 rgba(184, 242, 255, 0.06);
  transform: rotate(-8deg);
}

.battle-hud {
  z-index: 14;
  top: 8px;
}

.combatant-card {
  border-color: rgba(195, 239, 255, 0.4);
  background: linear-gradient(150deg, rgba(5, 31, 52, 0.92), rgba(11, 64, 82, 0.78));
  box-shadow: 0 8px 22px rgba(0, 12, 30, 0.28);
}

.enemy-card {
  border-color: rgba(255, 158, 143, 0.48);
  background: linear-gradient(210deg, rgba(63, 21, 45, 0.94), rgba(82, 36, 50, 0.78));
}

.health-track {
  height: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.health-track i {
  transition: width 0.12s linear;
}

.matchup-pill {
  z-index: 13;
  top: 72px;
  border: 1px solid rgba(196, 244, 255, 0.38);
  border-radius: 3px 10px;
  box-shadow: 0 5px 16px rgba(0, 15, 28, 0.28);
}

.battlefield {
  z-index: 4;
  top: 91px;
  right: 0;
  bottom: 69px;
  left: 0;
  display: block;
  overflow: hidden;
  perspective: 700px;
}

.battle-line {
  position: absolute;
  z-index: 1;
  width: 72%;
  height: 42%;
  right: 4%;
  bottom: 15%;
  border: 1px solid rgba(177, 236, 245, 0.2);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(169, 236, 246, 0.22) 50%, transparent 50.4%),
    linear-gradient(0deg, transparent 49.6%, rgba(169, 236, 246, 0.15) 50%, transparent 50.4%);
  transform: rotateX(62deg) rotateZ(-11deg);
}

.battle-line i {
  display: none;
}

.battle-hero {
  z-index: 6;
  width: 42%;
  height: 62%;
  bottom: -2%;
  left: -3%;
  filter: drop-shadow(8px 13px 16px rgba(0, 11, 25, 0.56));
  transform-origin: 46% 78%;
}

.battle-hero::before {
  width: 92%;
  top: 25%;
  left: -8%;
  border: 2px solid color-mix(in srgb, var(--hero-accent) 72%, white);
  background:
    conic-gradient(from 30deg, transparent 0 10%, color-mix(in srgb, var(--hero-accent) 54%, transparent) 11% 13%, transparent 14% 25%),
    radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 26%, transparent), transparent 67%);
  animation: hero-command-ring 7s linear infinite;
}

.battle-hero::after {
  position: absolute;
  z-index: 3;
  width: 79%;
  height: 14px;
  right: 1%;
  bottom: 4%;
  border-radius: 50%;
  content: "";
  background: radial-gradient(ellipse, rgba(2, 12, 27, 0.72), transparent 72%);
}

.battle-hero > img {
  width: 118%;
  height: 118%;
  object-fit: contain;
  object-position: 50% 38%;
  transform-origin: 45% 72%;
}

.battle-hero-tag {
  top: auto;
  bottom: 8%;
  left: 5%;
  max-width: 118px;
  border-left-width: 4px;
  background: rgba(2, 20, 37, 0.88);
}

.battle-hero-tag small {
  font-size: 7px;
}

.battle-hero-tag b {
  font-size: 10px;
}

.battle-hero.is-commanding > img {
  animation: commander-order 0.55s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.battle-hero.is-skill-arming > img {
  animation: hero-skill-arm 1.05s ease-out both;
}

.battle-hero.is-skill-striking > img {
  animation: hero-skill-strike 1.36s cubic-bezier(0.18, 0.8, 0.25, 1) both;
  filter: brightness(1.28) saturate(1.24) drop-shadow(0 0 15px var(--hero-accent));
}

.battle-hero.is-akari-skill {
  z-index: 12;
  animation: akari-flyby 1.18s ease-in-out;
}

.formation {
  position: absolute;
  z-index: 7;
  display: block;
  width: 42%;
  height: 48%;
  margin: 0;
}

.allied-formation {
  bottom: 10%;
  left: 30%;
}

.enemy-formation {
  top: 8%;
  right: 3%;
}

.battle-unit {
  position: absolute;
  display: block;
  width: 66px;
  height: 62px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: filter 0.12s ease;
  transform-origin: 50% 80%;
}

.formation .battle-unit:nth-child(1) { right: 1%; bottom: 2%; z-index: 6; }
.formation .battle-unit:nth-child(2) { right: 42%; bottom: 20%; z-index: 5; transform: scale(0.91); }
.formation .battle-unit:nth-child(3) { right: 2%; bottom: 49%; z-index: 4; transform: scale(0.82); }
.formation .battle-unit:nth-child(4) { right: 48%; bottom: 66%; z-index: 3; transform: scale(0.74); }

.enemy-formation .battle-unit:nth-child(1) { right: 42%; bottom: 2%; }
.enemy-formation .battle-unit:nth-child(2) { right: 1%; bottom: 24%; }
.enemy-formation .battle-unit:nth-child(3) { right: 48%; bottom: 53%; }
.enemy-formation .battle-unit:nth-child(4) { right: 2%; bottom: 70%; }

.battle-unit.is-boss {
  width: 112px;
  height: 96px;
  right: 3% !important;
  bottom: 18% !important;
  transform: scale(1) !important;
}

.actor-shadow {
  position: absolute;
  width: 76%;
  height: 13px;
  left: 12%;
  bottom: 2px;
  border-radius: 50%;
  background: rgba(1, 9, 20, 0.54);
  filter: blur(2px);
}

.machine {
  position: absolute;
  inset: 3px 5px 10px;
  display: block;
  filter: drop-shadow(0 5px 4px rgba(1, 12, 24, 0.48));
}

.machine i {
  position: absolute;
  display: block;
}

.machine-ranger {
  transform: rotate(-9deg);
}

.tank-track {
  width: 15px;
  height: 39px;
  bottom: 0;
  border: 2px solid #10283a;
  border-radius: 9px;
  background: repeating-linear-gradient(0deg, #172f40 0 5px, #577080 6px 8px);
}

.tank-track-left { left: 8px; }
.tank-track-right { right: 8px; }

.tank-body {
  width: 40px;
  height: 32px;
  bottom: 4px;
  left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px 13px 7px 9px;
  background: linear-gradient(145deg, var(--unit-accent), #0b4c68);
}

.tank-turret {
  width: 24px;
  height: 18px;
  top: 9px;
  left: 17px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50% 50% 35% 35%;
  background: var(--unit-accent);
}

.tank-barrel {
  width: 31px;
  height: 5px;
  top: 15px;
  left: 35px;
  border-radius: 5px;
  background: linear-gradient(90deg, #e4f7f6, var(--unit-accent));
  transform-origin: left;
  transform: rotate(-9deg);
}

.machine-mariner {
  transform: rotate(-7deg);
}

.ship-hull {
  width: 54px;
  height: 24px;
  left: 1px;
  bottom: 5px;
  clip-path: polygon(0 6%, 100% 34%, 78% 100%, 13% 85%);
  background: linear-gradient(160deg, #e9fbff, var(--unit-accent) 55%, #07516d);
}

.ship-bridge {
  width: 24px;
  height: 16px;
  left: 17px;
  bottom: 23px;
  border: 2px solid #d9f9ff;
  border-radius: 4px 7px 1px 1px;
  background: #146e8a;
}

.ship-gun {
  width: 28px;
  height: 4px;
  top: 21px;
  left: 34px;
  border-radius: 5px;
  background: #c7f7ff;
  transform: rotate(-7deg);
}

.ship-wake {
  width: 62px;
  height: 12px;
  left: -4px;
  bottom: -2px;
  border-bottom: 3px solid rgba(125, 238, 255, 0.78);
  border-radius: 50%;
}

.machine-skylink {
  transform: rotate(-15deg);
}

.jet-body {
  width: 16px;
  height: 54px;
  top: 0;
  left: 22px;
  border-radius: 80% 80% 35% 35%;
  background: linear-gradient(90deg, #e8f8ff, var(--unit-accent) 48%, #25508a);
}

.jet-wing {
  width: 31px;
  height: 24px;
  top: 22px;
  background: linear-gradient(135deg, var(--unit-accent), #23548c);
}

.jet-wing-left {
  left: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 82%);
}

.jet-wing-right {
  right: 0;
  clip-path: polygon(0 0, 100% 82%, 0 100%);
}

.jet-engine {
  width: 10px;
  height: 22px;
  left: 25px;
  bottom: -11px;
  border-radius: 50%;
  background: linear-gradient(#fff, #66eaff 32%, transparent);
  filter: drop-shadow(0 0 7px #67e7ff);
}

.enemy-formation .machine {
  filter: hue-rotate(138deg) saturate(1.7) drop-shadow(0 5px 4px rgba(1, 12, 24, 0.58));
  transform: scaleX(-1) rotate(-8deg);
}

.enemy-formation .machine-skylink {
  transform: scaleX(-1) rotate(-15deg);
}

.enemy-formation .unit-level {
  transform: none;
}

.is-boss .machine-mariner {
  transform: scale(1.6) rotate(-6deg);
}

.is-boss .ship-hull {
  box-shadow: inset 0 5px 0 #ff4d61;
}

.is-boss .ship-bridge::after {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 2px;
  left: 6px;
  border: 2px solid white;
  border-radius: 50%;
  content: "";
  background: #ff314f;
  box-shadow: 0 0 12px #ff4b66;
  animation: boss-core 0.7s ease-in-out infinite;
}

.battle-view[data-theme="sky"] .enemy-formation .battle-unit:not(.is-acting) {
  animation: sky-raider-drift 1.6s ease-in-out infinite alternate;
  animation-delay: var(--slot-delay);
}

.is-boss.is-charging .machine {
  filter: hue-rotate(138deg) saturate(2.1) brightness(1.5) drop-shadow(0 0 12px #ff4f6b);
}

.is-boss.is-charging .unit-status {
  border-color: #ff3857;
  box-shadow: 0 0 0 7px rgba(255, 55, 85, 0.13), inset 0 0 22px rgba(255, 58, 85, 0.42);
  animation: boss-warning 0.2s steps(2, end) infinite;
}

.enemy-formation.is-phase-two .is-boss {
  filter: brightness(1.15) saturate(1.35) drop-shadow(0 0 10px rgba(255, 49, 79, 0.82));
}

.unit-level {
  position: absolute;
  z-index: 4;
  right: -2px;
  bottom: 0;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 7px 2px;
  color: #06253c;
  background: #ffe274;
  font-size: 7px;
  font-style: normal;
  font-weight: 1000;
}

.unit-status {
  position: absolute;
  width: 60px;
  height: 60px;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  pointer-events: none;
}

.battle-unit.is-targeted .unit-status {
  border-color: #ffdc6b;
  box-shadow: 0 0 0 3px rgba(255, 200, 66, 0.15), inset 0 0 16px rgba(255, 196, 50, 0.28);
  animation: target-lock 0.36s ease-out;
}

.battle-unit.is-acting {
  animation: actor-fire 0.56s cubic-bezier(0.2, 0.8, 0.24, 1);
  filter: brightness(1.25);
}

.enemy-formation .battle-unit.is-acting {
  animation-name: enemy-fire;
}

.battle-unit.is-hit {
  animation: actor-hit 0.16s steps(2, end);
  filter: brightness(2.2) saturate(0.3);
}

.allied-formation.is-shielded::before {
  position: absolute;
  z-index: 10;
  width: 165%;
  height: 118%;
  right: -16%;
  bottom: -8%;
  border: 3px solid rgba(134, 238, 255, 0.92);
  border-radius: 50% 50% 12% 12%;
  content: "";
  background: radial-gradient(ellipse at 50% 100%, rgba(51, 195, 255, 0.2), transparent 68%);
  box-shadow: inset 0 0 28px rgba(94, 213, 255, 0.32), 0 0 18px rgba(113, 229, 255, 0.5);
  animation: shield-deploy 0.42s ease-out both;
  pointer-events: none;
}

.hero-cutin {
  z-index: 25;
  top: 17%;
  bottom: 37%;
  left: -7%;
  right: -7%;
  clip-path: polygon(0 19%, 100% 0, 96% 82%, 3% 100%);
  background: linear-gradient(112deg, rgba(2, 14, 29, 0.98) 0 18%, color-mix(in srgb, var(--hero-accent) 78%, #143b64) 19% 72%, rgba(2, 14, 29, 0.98) 73%);
  animation: battle-cutin 0.43s cubic-bezier(0.12, 0.78, 0.2, 1) both;
}

.hero-cutin > img {
  width: 62%;
  height: 151%;
  bottom: -39%;
  left: -3%;
  object-position: 50% 12%;
  mix-blend-mode: screen;
  animation: cutin-hero-snap 0.38s ease-out both;
}

.cutin-copy {
  top: 31%;
  right: 8%;
  width: 52%;
  animation: cutin-title-snap 0.32s 0.06s ease-out both;
}

.cutin-copy b {
  font-size: clamp(20px, 7vw, 31px);
}

.cutin-copy strong {
  margin-top: 5px;
  font-size: clamp(11px, 3.7vw, 17px);
}

.cutin-slash {
  top: 64%;
  animation: quick-slash 0.28s 0.13s ease-out forwards;
}

.overdrive-button {
  z-index: 18;
  right: 13px;
  bottom: 10px;
  width: 132px;
  height: 62px;
  align-items: flex-end;
  padding: 7px 12px 7px 49px;
  border-radius: 18px 5px 18px 5px;
  text-align: right;
}

.overdrive-button b,
.overdrive-button small {
  position: relative;
  z-index: 2;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-portrait {
  position: absolute;
  width: 54px;
  height: 66px;
  bottom: -3px;
  left: -4px;
  overflow: hidden;
  border-right: 2px solid rgba(255, 255, 255, 0.72);
  clip-path: polygon(0 0, 100% 7%, 87% 100%, 0 100%);
  background: #102d43;
}

.skill-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: screen;
}

.overdrive-ring {
  width: 96px;
  height: 96px;
  left: -28px;
}

.battle-result {
  z-index: 28;
}

@keyframes stage-wind {
  from { transform: translateX(-16%) rotate(-10deg); }
  to { transform: translateX(16%) rotate(-10deg); }
}

@keyframes hero-command-ring {
  to { transform: rotate(360deg); }
}

@keyframes commander-order {
  0% { transform: translateX(0) rotate(0); }
  28% { transform: translateX(-5px) rotate(-2deg); }
  46% { transform: translateX(10px) rotate(1deg) scale(1.025); filter: brightness(1.35); }
  100% { transform: translateX(0) rotate(0); }
}

@keyframes hero-skill-arm {
  from { filter: brightness(1); transform: translateX(0) scale(1); }
  to { filter: brightness(1.55) saturate(1.25); transform: translateX(9px) scale(1.04); }
}

@keyframes hero-skill-strike {
  0% { transform: translateX(-8px) scale(1.04); }
  35% { transform: translateX(19px) scale(1.08); }
  48% { transform: translateX(16px) scale(1.08); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes akari-flyby {
  0% { transform: translate(0, 0); }
  42% { transform: translate(68%, -48%) rotate(-7deg) scale(0.82); }
  100% { transform: translate(0, 0); }
}

@keyframes target-lock {
  from { opacity: 0; transform: rotate(-35deg) scale(1.5); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes actor-fire {
  0% { transform: translate(0, 0) scale(1); }
  22% { transform: translate(-5px, 4px) scale(0.95); }
  38% { transform: translate(13px, -8px) scale(1.04); }
  48% { transform: translate(11px, -7px) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes enemy-fire {
  0% { transform: translate(0, 0) scale(1); }
  22% { transform: translate(5px, -3px) scale(0.95); }
  38% { transform: translate(-13px, 8px) scale(1.04); }
  48% { transform: translate(-11px, 7px) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes actor-hit {
  0% { transform: translate(0, 0); }
  50% { transform: translate(7px, -3px); }
  100% { transform: translate(-3px, 2px); }
}

@keyframes projectile-ally {
  0% { opacity: 0; transform: translate(0, 0) scale(0.65); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: translate(154px, -116px) scale(1.25); }
}

@keyframes projectile-enemy {
  0% { opacity: 0; transform: translate(0, 0) scale(0.65); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: translate(-154px, 116px) scale(1.25); }
}

@keyframes impact-pop {
  0% { opacity: 0; transform: scale(0.15) rotate(-18deg); }
  13% { opacity: 1; transform: scale(0.72) rotate(0); }
  38% { opacity: 1; transform: scale(1.08) rotate(12deg); }
  100% { opacity: 0; transform: scale(1.55) rotate(32deg); }
}

@keyframes damage-rise {
  0% { opacity: 0; transform: translateY(9px) scale(0.55); }
  18% { opacity: 1; transform: translateY(0) scale(1.18); }
  42% { transform: translateY(-11px) scale(1); }
  100% { opacity: 0; transform: translateY(-39px) scale(0.92); }
}

@keyframes shield-deploy {
  from { opacity: 0; transform: scale(0.65); }
  70% { opacity: 1; transform: scale(1.05); }
  to { opacity: 0.84; transform: scale(1); }
}

@keyframes orbital-strike {
  0% { opacity: 0; transform: rotate(7deg) scaleY(0); }
  28% { opacity: 1; transform: rotate(7deg) scaleY(1); }
  64% { opacity: 1; }
  100% { opacity: 0; transform: rotate(7deg) scaleY(1.1); }
}

@keyframes target-spread {
  0% { opacity: 0; transform: rotateX(67deg) scale(0.2); }
  42% { opacity: 1; transform: rotateX(67deg) scale(1); }
  100% { opacity: 0; transform: rotateX(67deg) scale(1.45); }
}

@keyframes water-slash {
  0% { opacity: 0; transform: rotate(-18deg) scaleX(0); }
  22% { opacity: 1; }
  70% { opacity: 1; transform: rotate(-18deg) scaleX(1); }
  100% { opacity: 0; transform: rotate(-18deg) scaleX(1.1); }
}

@keyframes air-raid {
  0% { opacity: 0; transform: rotate(-31deg) translateX(-80%); }
  18% { opacity: 1; }
  78% { opacity: 1; transform: rotate(-31deg) translateX(20%); }
  100% { opacity: 0; transform: rotate(-31deg) translateX(34%); }
}

@keyframes camera-hit {
  0% { transform: translate(0, 0); }
  35% { transform: translate(-3px, 2px); }
  70% { transform: translate(2px, -2px); }
}

@keyframes camera-skill-hit {
  0% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(-7px, 4px) scale(1.018); }
  62% { transform: translate(5px, -3px) scale(1.012); }
}

@keyframes battle-cutin {
  0% { opacity: 0; transform: translateX(-92%); }
  42%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes cutin-hero-snap {
  from { opacity: 0; transform: translateX(-25%) scale(1.08); }
}

@keyframes cutin-title-snap {
  from { opacity: 0; transform: translateX(35px); }
}

@keyframes quick-slash {
  0% { opacity: 0; transform: rotate(-8deg) scaleX(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-8deg) scaleX(1); }
}

@keyframes boss-core {
  50% { filter: brightness(1.8); transform: scale(1.25); }
}

@keyframes sky-raider-drift {
  from { margin: -3px 0 0 -5px; }
  to { margin: 5px 0 0 7px; }
}

@keyframes boss-warning {
  50% { opacity: 0.38; transform: scale(1.18); }
}

@media (max-width: 430px) {
  .battlefield {
    right: 0;
    left: 0;
  }

  .battle-hero {
    width: 44%;
    left: -5%;
  }

  .formation {
    width: 44%;
  }

  .allied-formation {
    left: 28%;
  }

  .battle-unit {
    width: 62px;
    height: 59px;
  }
}

@media (max-height: 710px) {
  .battlefield {
    top: 83px;
    bottom: 62px;
  }

  .battle-hero {
    height: 65%;
  }

  .overdrive-button {
    bottom: 6px;
    height: 57px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .battle-projectile,
  .impact-burst,
  .damage-number,
  .hero-field-skill,
  .battle-unit,
  .battle-hero,
  .battlefield {
    animation-duration: 0.001ms !important;
  }

  .battle-view.is-impact .battlefield,
  .battle-view.is-skill-impact .battlefield {
    animation: none !important;
  }
}