.combat-effects {
  z-index: 11;
  overflow: visible;
}

.battle-projectile,
.impact-burst,
.damage-number,
.hero-field-skill {
  position: absolute;
  display: block;
  pointer-events: none;
}

.battle-projectile {
  z-index: 12;
  width: 14px;
  height: 8px;
  left: 49%;
  bottom: calc(26% + var(--source-offset));
  border-radius: 50%;
  background: #fff6ba;
  box-shadow: -15px 4px 0 -2px rgba(255, 171, 63, 0.6), 0 0 11px #ffbd4a;
  animation: projectile-ally 0.28s cubic-bezier(0.23, 0.72, 0.32, 1) forwards;
}

.battle-projectile.is-enemy {
  right: 20%;
  bottom: auto;
  left: auto;
  top: calc(28% + var(--source-offset));
  background: #ff9a9c;
  box-shadow: 15px -3px 0 -2px rgba(255, 56, 87, 0.52), 0 0 11px #ff536a;
  animation-name: projectile-enemy;
}

.battle-projectile.is-mariner {
  width: 30px;
  height: 5px;
  background: #aaf4ff;
  box-shadow: -18px 2px 0 -1px rgba(80, 221, 255, 0.4), 0 0 10px #4cdbff;
}

.battle-projectile.is-skylink {
  width: 48px;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, white 65%, #d6a5ff);
  box-shadow: 0 0 9px #bb76ff;
  transform: rotate(-22deg);
}

.battle-projectile.is-boss-salvo {
  width: 39px;
  height: 8px;
  background: linear-gradient(90deg, #ff3154, white);
  box-shadow: 12px -3px 0 -2px rgba(255, 48, 78, 0.64), 0 0 16px #ff3659;
}

.battle-projectile.is-wing-shot {
  animation-delay: 0.06s;
  opacity: 0.74;
}

.impact-burst {
  z-index: 13;
  width: 82px;
  height: 82px;
  top: calc(25% + var(--target-offset));
  right: calc(2% + var(--target-shift));
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 8%, #fff 9% 11%, transparent 12% 24%, #ffb833 25% 28%, transparent 29% 46%, #fff 47% 49%, transparent 50%),
    radial-gradient(circle, #fff 0 7%, #ffce46 9% 19%, #ff5e35 22% 35%, transparent 64%);
  filter: drop-shadow(0 0 10px #ff8b33);
  animation: impact-pop 0.43s ease-out forwards;
}

.impact-burst.is-player {
  top: auto;
  right: auto;
  bottom: calc(19% + var(--target-offset));
  left: calc(33% + var(--target-shift));
  filter: hue-rotate(135deg) drop-shadow(0 0 10px #56cfff);
}

.impact-burst.is-skill {
  width: 122px;
  height: 122px;
  top: calc(19% + var(--target-offset));
  right: calc(-2% + var(--target-shift));
  animation-duration: 0.65s;
}

.impact-burst.is-sora {
  filter: hue-rotate(135deg) drop-shadow(0 0 14px #70e6ff);
}

.impact-burst.is-akari {
  filter: hue-rotate(250deg) drop-shadow(0 0 14px #c47cff);
}

.damage-number {
  z-index: 15;
  top: calc(28% + var(--target-offset));
  right: calc(8% + var(--target-shift));
  color: #fff7a7;
  font-size: 18px;
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 0 #8d3422, 0 0 9px rgba(255, 200, 67, 0.9);
  animation: damage-rise 0.68s cubic-bezier(0.15, 0.7, 0.26, 1) forwards;
}

.damage-number.is-player {
  top: auto;
  right: auto;
  bottom: calc(28% + var(--target-offset));
  left: calc(37% + var(--target-shift));
  color: #ffaaa8;
}

.damage-number.is-skill {
  color: white;
  font-size: 24px;
  text-shadow: 0 3px 0 #c44039, 0 0 13px #ffd452;
}

.hero-field-skill {
  z-index: 12;
  inset: 0;
}

.hero-skill-charge,
.hero-skill-release,
.hero-skill-finisher {
  --skill-core: #72f3e6;
  --skill-edge: #ffe58a;
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.hero-skill-charge.is-rin,
.hero-skill-release.is-rin,
.hero-skill-finisher.is-rin { --skill-core: #ffb84e; --skill-edge: #ff6658; }
.hero-skill-charge.is-sora,
.hero-skill-release.is-sora,
.hero-skill-finisher.is-sora { --skill-core: #62e7ff; --skill-edge: #c8fff5; }
.hero-skill-charge.is-akari,
.hero-skill-release.is-akari,
.hero-skill-finisher.is-akari { --skill-core: #be76ff; --skill-edge: #ff8edf; }
.hero-skill-charge.is-ayame,
.hero-skill-release.is-ayame,
.hero-skill-finisher.is-ayame { --skill-core: #8d5bbb; --skill-edge: #ffe2ad; }
.hero-skill-charge.is-kuya,
.hero-skill-release.is-kuya,
.hero-skill-finisher.is-kuya { --skill-core: #ff4f9b; --skill-edge: #ffc568; }
.hero-skill-charge.is-noa,
.hero-skill-release.is-noa,
.hero-skill-finisher.is-noa { --skill-core: #58efe1; --skill-edge: #fff083; }

.hero-skill-charge {
  z-index: 11;
  background: radial-gradient(circle at 18% 76%, color-mix(in srgb, var(--skill-core) 25%, transparent), transparent 34%);
  animation: skill-charge-haze 1.28s ease-in-out both;
}

.hero-skill-charge::before {
  position: absolute;
  width: 158px;
  aspect-ratio: 1;
  bottom: 1%;
  left: -6%;
  border: 3px solid color-mix(in srgb, var(--skill-edge) 88%, white);
  border-radius: 50%;
  content: "";
  background:
    conic-gradient(from 0deg, transparent 0 9%, var(--skill-core) 10% 13%, transparent 14% 28%, var(--skill-edge) 29% 32%, transparent 33% 48%, var(--skill-core) 49% 52%, transparent 53%),
    radial-gradient(circle, transparent 35%, color-mix(in srgb, var(--skill-core) 28%, transparent) 36% 43%, transparent 44%);
  box-shadow: 0 0 30px color-mix(in srgb, var(--skill-core) 66%, transparent), inset 0 0 24px color-mix(in srgb, var(--skill-edge) 42%, transparent);
  animation: skill-charge-ring 1.18s cubic-bezier(0.18, 0.76, 0.24, 1) both;
}

.hero-skill-charge::after {
  position: absolute;
  inset: -30%;
  content: "";
  background: repeating-conic-gradient(from 230deg at 18% 76%, transparent 0 7deg, color-mix(in srgb, var(--skill-core) 26%, transparent) 8deg 9deg, transparent 10deg 18deg);
  mask-image: radial-gradient(circle at 18% 76%, black, transparent 61%);
  animation: skill-charge-rays 1.05s ease-out both;
}

.hero-skill-release {
  z-index: 13;
  background:
    radial-gradient(circle at 72% 40%, color-mix(in srgb, var(--skill-core) 34%, transparent), transparent 26%),
    linear-gradient(116deg, transparent 0 43%, color-mix(in srgb, var(--skill-edge) 26%, transparent) 48%, transparent 54%);
  animation: skill-release-haze 1.72s ease-out both;
}

.hero-skill-release::before,
.hero-skill-release::after {
  position: absolute;
  width: 150%;
  height: 8px;
  top: 39%;
  left: -28%;
  border-radius: 50%;
  content: "";
  background: linear-gradient(90deg, transparent, white 32%, var(--skill-core) 50%, var(--skill-edge) 70%, transparent);
  box-shadow: 0 0 18px var(--skill-core), 0 0 36px color-mix(in srgb, var(--skill-edge) 70%, transparent);
  transform: rotate(-28deg) scaleX(0);
  transform-origin: left;
  animation: skill-release-streak 1.28s cubic-bezier(0.12, 0.78, 0.2, 1) both;
}

.hero-skill-release::after {
  top: 58%;
  height: 4px;
  opacity: 0.72;
  transform: rotate(-15deg) scaleX(0);
  animation-delay: 0.24s;
}

.hero-skill-finisher {
  z-index: 16;
  background: radial-gradient(circle at 76% 38%, white 0 2%, var(--skill-edge) 3% 7%, color-mix(in srgb, var(--skill-core) 58%, transparent) 8% 18%, transparent 42%);
  mix-blend-mode: screen;
  animation: skill-finisher-flash 0.72s ease-out both;
}

.hero-skill-finisher::before,
.hero-skill-finisher::after {
  position: absolute;
  width: 184px;
  aspect-ratio: 1;
  top: 17%;
  right: -5%;
  border: 3px solid white;
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 22px var(--skill-core), inset 0 0 28px var(--skill-edge);
  animation: skill-finisher-ring 0.68s cubic-bezier(0.12, 0.8, 0.2, 1) both;
}

.hero-skill-finisher::after {
  width: 126px;
  top: 23%;
  right: 2%;
  border-style: dashed;
  animation-direction: reverse;
}

.battle-view.is-skill-cutin .battlefield {
  animation: skill-camera-pull 1.08s ease-in-out both;
}

.battle-view.is-skill-release .battle-sky {
  animation: skill-scene-surge 1.7s ease-out both;
}

.battle-view.is-skill-finisher .battlefield {
  animation: skill-camera-finisher 0.52s steps(4, end);
}

.hero-field-skill::before,
.hero-field-skill::after {
  animation-duration: 1.36s !important;
}

.hero-field-skill.is-noa::before,
.hero-field-skill.is-noa::after {
  animation-duration: 1.58s !important;
}

.hero-field-skill.is-rin::before,
.hero-field-skill.is-rin::after {
  position: absolute;
  width: 18px;
  height: 68%;
  top: -15%;
  right: 16%;
  border-radius: 50%;
  content: "";
  background: linear-gradient(transparent, #fff8bd 40%, #ff9e38 67%, transparent 72%);
  box-shadow: -54px 30px 0 -3px rgba(255, 174, 56, 0.8), 39px 56px 0 2px rgba(255, 220, 104, 0.74);
  filter: drop-shadow(0 0 13px #ff8d39);
  transform: rotate(7deg) scaleY(0);
  transform-origin: top;
  animation: orbital-strike 0.74s ease-out forwards;
}

.hero-field-skill.is-rin::after {
  height: 90px;
  top: 28%;
  right: 2%;
  border: 2px solid #ffc04e;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 91, 42, 0.62), transparent 65%);
  box-shadow: none;
  transform: rotateX(67deg) scale(0.3);
  animation: target-spread 0.8s ease-out forwards;
}

.hero-field-skill.is-sora::before {
  position: absolute;
  width: 120%;
  height: 18px;
  top: 45%;
  left: -35%;
  border-top: 3px solid white;
  border-bottom: 2px solid #60dffc;
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 15px #64dcff, 0 25px 0 -6px rgba(95, 213, 255, 0.65);
  transform: rotate(-18deg) scaleX(0);
  transform-origin: left;
  animation: water-slash 0.7s ease-out forwards;
}

.hero-field-skill.is-akari::before,
.hero-field-skill.is-akari::after {
  position: absolute;
  width: 145%;
  height: 10px;
  top: 48%;
  left: -24%;
  content: "";
  background: linear-gradient(90deg, transparent, #fff, #b968ff 74%, transparent);
  box-shadow: 0 0 19px #b861ff;
  transform: rotate(-31deg) translateX(-80%);
  animation: air-raid 0.62s ease-out forwards;
}

.hero-field-skill.is-akari::after {
  top: 59%;
  opacity: 0.52;
  animation-delay: 0.12s;
}

.hero-field-skill.is-ayame::before,
.hero-field-skill.is-ayame::after {
  position: absolute;
  width: 132%;
  height: 4px;
  top: 45%;
  left: -18%;
  content: "";
  background: linear-gradient(90deg, transparent, #fff9de 28%, #c27bc1 52%, #754c9c 72%, transparent);
  box-shadow: 0 0 16px #a76bb2, 0 13px 0 -1px rgba(255, 232, 181, 0.62);
  transform: rotate(-33deg) scaleX(0);
  transform-origin: left;
  animation: water-slash 0.7s ease-out forwards;
}

.hero-field-skill.is-ayame::after {
  top: 57%;
  transform: rotate(-18deg) scaleX(0);
  animation-delay: 0.14s;
}

.hero-field-skill.is-kuya::before,
.hero-field-skill.is-kuya::after {
  position: absolute;
  width: 165%;
  height: 74%;
  top: 6%;
  left: -38%;
  border: 2px solid rgba(255, 236, 194, 0.9);
  border-radius: 50%;
  content: "";
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(229, 68, 130, 0.25) 19px 20px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255, 219, 139, 0.18) 19px 20px),
    radial-gradient(ellipse, rgba(213, 55, 116, 0.25), transparent 62%);
  box-shadow: 0 0 24px #d63b78, inset 0 0 28px rgba(255, 91, 154, 0.55);
  transform: rotate(-22deg) scale(0.15);
  animation: target-spread 0.74s ease-out forwards;
}

.hero-field-skill.is-kuya::after {
  width: 88%;
  height: 8px;
  top: 48%;
  left: 14%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, #fff 36%, #ff4b99 58%, transparent);
  box-shadow: 0 0 20px #ff438f, 0 38px 0 -2px rgba(255, 198, 107, 0.65);
  transform: rotate(-31deg) scaleX(0);
  transform-origin: left;
  animation: water-slash 0.66s ease-out 0.12s forwards;
}

.impact-burst.is-kuya {
  filter: hue-rotate(285deg) saturate(1.2) drop-shadow(0 0 16px #ef4b94);
}

.battle-view.is-impact .battlefield {
  animation: camera-hit 0.1s steps(2, end);
}

.battle-view.is-skill-impact .battlefield {
  animation: camera-skill-hit 0.16s steps(3, end);
}

@keyframes skill-charge-haze {
  0% { opacity: 0; }
  24%, 78% { opacity: 1; }
  100% { opacity: 0.15; }
}

@keyframes skill-charge-ring {
  0% { opacity: 0; transform: scale(1.8) rotate(-42deg); }
  34% { opacity: 1; }
  82% { transform: scale(0.92) rotate(185deg); }
  100% { opacity: 0; transform: scale(0.42) rotate(230deg); }
}

@keyframes skill-charge-rays {
  from { opacity: 0; transform: rotate(-10deg) scale(1.2); }
  45% { opacity: 0.9; }
  to { opacity: 0; transform: rotate(12deg) scale(0.72); }
}

@keyframes skill-release-haze {
  0% { opacity: 0; }
  14%, 68% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes skill-release-streak {
  0% { opacity: 0; transform: rotate(-28deg) translateX(-18%) scaleX(0); }
  24% { opacity: 1; transform: rotate(-28deg) translateX(0) scaleX(1); }
  76% { opacity: 0.85; transform: rotate(-28deg) translateX(8%) scaleX(1); }
  100% { opacity: 0; transform: rotate(-28deg) translateX(28%) scaleX(0.76); }
}

@keyframes skill-finisher-flash {
  0% { opacity: 0; filter: brightness(1); }
  18% { opacity: 1; filter: brightness(2); }
  46% { opacity: 0.86; }
  100% { opacity: 0; filter: brightness(1); }
}

@keyframes skill-finisher-ring {
  from { opacity: 0; transform: scale(0.18) rotate(-35deg); }
  32% { opacity: 1; }
  to { opacity: 0; transform: scale(1.46) rotate(105deg); }
}

@keyframes skill-camera-pull {
  0% { transform: scale(1); filter: brightness(1); }
  42%, 82% { transform: scale(0.96); filter: brightness(0.7) saturate(0.82); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes skill-scene-surge {
  0%, 100% { filter: saturate(1.04) contrast(1.03) brightness(1); }
  28% { filter: saturate(0.72) contrast(1.08) brightness(0.62); }
  52% { filter: saturate(1.38) contrast(1.08) brightness(1.2); }
}

@keyframes skill-camera-finisher {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-6px, 3px) scale(1.025); }
  50% { transform: translate(5px, -4px) scale(1.035); }
  75% { transform: translate(-3px, -2px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-skill-charge,
  .hero-skill-release,
  .hero-skill-finisher,
  .hero-skill-charge::before,
  .hero-skill-charge::after,
  .hero-skill-release::before,
  .hero-skill-release::after,
  .hero-skill-finisher::before,
  .hero-skill-finisher::after,
  .battle-view.is-skill-cutin .battlefield,
  .battle-view.is-skill-release .battle-sky,
  .battle-view.is-skill-finisher .battlefield {
    animation: none !important;
  }
}