.shot-beams {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
}

.shot-beam {
  --shot-color: #ff8d84;
  --shot-core: #fff1d8;
  --shot-glow: rgba(255, 75, 67, 0.92);
}

.shot-beam.from-human {
  --shot-color: #73dcff;
  --shot-core: #f3fcff;
  --shot-glow: rgba(80, 200, 255, 0.95);
}

.shot-beam.beam-laser-fx {
  --shot-color: #8befff;
  --shot-core: #ffffff;
  --shot-glow: rgba(80, 220, 255, 0.96);
}

.shot-beam.beam-phase-fx {
  --shot-color: #a9ff9a;
  --shot-glow: rgba(92, 255, 126, 0.88);
}

.shot-beam.beam-resonance-fx {
  --shot-color: #8cffd4;
  --shot-glow: rgba(101, 255, 198, 0.92);
}

.shot-beam.beam-quantum-fx {
  --shot-color: #fff099;
  --shot-glow: rgba(255, 214, 92, 0.9);
}

.shot-beam.beam-piercing-fx,
.shot-beam.beam-piercing-shot-fx {
  --shot-color: #f1d2ff;
  --shot-glow: rgba(213, 121, 255, 0.95);
}

.shot-beam.beam-explosive-fx {
  --shot-color: #ffd37a;
  --shot-glow: rgba(255, 186, 75, 0.92);
}

.shot-beam.beam-mortar-fx {
  --shot-color: #ffc45c;
  --shot-core: #fff6d7;
  --shot-glow: rgba(255, 155, 48, 0.98);
}

.shot-beam.beam-hull-fx {
  --shot-color: #ffe28a;
  --shot-core: #fffaf0;
  --shot-glow: rgba(255, 186, 75, 0.96);
}

.shot-beam.from-human.beam-hull-fx {
  --shot-color: #9decff;
  --shot-core: #f4fdff;
  --shot-glow: rgba(80, 220, 255, 0.98);
}

.shot-beam.beam-missile-fx {
  --shot-color: #ff4a3d;
  --shot-core: #fff4e8;
  --shot-glow: rgba(255, 42, 35, 0.98);
}

.shot-beam.beam-cutter-fx {
  --shot-color: #6ff2ff;
  --shot-core: #ecfdff;
  --shot-glow: rgba(66, 220, 255, 0.98);
}

.shot-beam.beam-doomsday-fx {
  --shot-color: #fff7b0;
  --shot-core: #ffffff;
  --shot-glow: rgba(255, 235, 122, 0.98);
}

.shot-beam-glow,
.shot-beam-core {
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: shotBeamTrace 0.86s ease-out both;
  animation-delay: var(--beam-delay, 0ms);
}

.shot-beam-glow {
  stroke: var(--shot-glow);
  stroke-width: 9;
  opacity: 0.45;
  filter: drop-shadow(0 0 12px var(--shot-glow)) drop-shadow(0 0 24px var(--shot-glow));
}

.shot-beam-core {
  stroke: var(--shot-core);
  stroke-width: 2.4;
  opacity: 0.95;
  filter: drop-shadow(0 0 5px var(--shot-color));
}

.shot-impact-ring {
  fill: none;
  stroke: var(--shot-color);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  filter: drop-shadow(0 0 10px var(--shot-glow));
  transform-box: fill-box;
  transform-origin: center;
  animation: shotImpact 0.72s ease-out both;
  animation-delay: calc(var(--beam-delay, 0ms) + 260ms);
}

.shot-beam.beam-missile-fx .shot-beam-glow {
  stroke-width: 12;
  filter: drop-shadow(0 0 14px var(--shot-glow)) drop-shadow(0 0 34px var(--shot-glow));
}

.shot-beam.beam-missile-fx .shot-impact-ring {
  stroke-width: 2.4;
}

.shot-beam.beam-mortar-fx .shot-beam-glow {
  stroke-width: 14;
  filter: drop-shadow(0 0 13px var(--shot-glow)) drop-shadow(0 0 30px var(--shot-glow));
}

.shot-beam.beam-mortar-fx .shot-beam-core {
  stroke-width: 3.2;
  stroke-dasharray: 12 8;
}

.shot-beam.beam-mortar-fx .shot-impact-ring {
  stroke-width: 2.8;
}

.shot-beam.beam-cutter-fx .shot-beam-glow {
  stroke-width: 7;
  filter: drop-shadow(0 0 16px var(--shot-glow)) drop-shadow(0 0 30px var(--shot-glow));
}

.shot-beam.beam-cutter-fx .shot-beam-core {
  stroke-width: 3.4;
}

.shot-beam.beam-doomsday-fx .shot-beam-glow {
  stroke-width: 13;
  filter: drop-shadow(0 0 18px var(--shot-glow)) drop-shadow(0 0 42px var(--shot-glow));
}

.shot-beam.beam-doomsday-fx .shot-beam-core {
  stroke-width: 4.2;
}

.ship-zone.has-ship-destruction .ship-art {
  animation: shipDestroyedShake 2.6s ease-out both;
}

.ship-destruction-fx {
  --ship-boom-main: #ff5c41;
  --ship-boom-core: #fff8df;
  --ship-boom-glow: rgba(255, 92, 65, 0.78);
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: min(430px, 78%);
  aspect-ratio: 2.5;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.ship-destruction-fx.from-human {
  --ship-boom-main: #62d8ff;
  --ship-boom-core: #f4fdff;
  --ship-boom-glow: rgba(80, 220, 255, 0.76);
}

.ship-zone.enemy-zone .ship-destruction-fx {
  top: 45%;
}

.ship-zone.player-zone .ship-destruction-fx {
  top: 55%;
}

.ship-destruction-fx::before,
.ship-destruction-fx::after,
.ship-destruction-core,
.ship-destruction-ring,
.ship-destruction-shard {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ship-destruction-fx::before {
  inset: 10% 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.96) 0 6%, var(--ship-boom-core) 7% 14%, var(--ship-boom-main) 15% 34%, transparent 58%),
    conic-gradient(from 10deg, transparent 0 8%, var(--ship-boom-main) 12% 20%, transparent 26% 35%, var(--ship-boom-core) 39% 45%, transparent 50% 62%, var(--ship-boom-main) 66% 76%, transparent 82% 100%);
  filter: drop-shadow(0 0 18px var(--ship-boom-glow)) drop-shadow(0 0 46px var(--ship-boom-glow));
  animation: shipDestroyedCloud 2.25s ease-out both;
}

.ship-destruction-fx::after {
  inset: -10% 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 22%, rgba(255, 255, 255, 0.8) 23% 25%, transparent 30%),
    radial-gradient(circle, var(--ship-boom-glow) 0 6%, transparent 64%);
  opacity: 0;
  animation: shipDestroyedFlash 2.2s ease-out both;
}

.ship-destruction-core {
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 13%, var(--ship-boom-core) 14% 30%, var(--ship-boom-main) 31% 56%, transparent 72%);
  transform: translate(-50%, -50%) scale(0.2);
  box-shadow: 0 0 24px var(--ship-boom-core), 0 0 70px var(--ship-boom-glow);
  animation: shipDestroyedCore 2.45s ease-out both;
}

.ship-destruction-ring {
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  border: 3px solid var(--ship-boom-core);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
  filter: drop-shadow(0 0 18px var(--ship-boom-glow));
  animation: shipDestroyedRing 2.15s ease-out both;
}

.ship-destruction-shard {
  left: 50%;
  top: 50%;
  width: 32%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ship-boom-core), var(--ship-boom-main), transparent);
  opacity: 0;
  transform-origin: 0 50%;
  filter: drop-shadow(0 0 12px var(--ship-boom-glow));
  animation: shipShard 1.7s ease-out both;
}

.ship-destruction-shard.shard-a {
  --ship-shard-rotation: -16deg;
}

.ship-destruction-shard.shard-b {
  --ship-shard-rotation: 28deg;
  animation-delay: 80ms;
}

.ship-destruction-shard.shard-c {
  --ship-shard-rotation: 166deg;
  animation-delay: 120ms;
}