@keyframes slotHit {
  0% {
    transform: translateY(0) scale(1);
  }
  22% {
    transform: translateY(-4px) scale(1.04);
    border-color: #ffffff;
  }
  48% {
    transform: translateY(2px) scale(0.99);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes slotPlace {
  0% {
    box-shadow: inset 0 0 0 rgba(239, 184, 77, 0);
  }
  35% {
    border-color: #ffe2a0;
    box-shadow: 0 0 28px rgba(239, 184, 77, 0.78), inset 0 0 24px rgba(239, 184, 77, 0.24);
  }
  100% {
    box-shadow: inherit;
  }
}

@keyframes slotControl {
  0%,
  100% {
    filter: none;
  }
  45% {
    filter: saturate(1.55) brightness(1.35);
    box-shadow: 0 0 28px rgba(196, 92, 255, 0.72), inset 0 0 24px rgba(196, 92, 255, 0.18);
  }
}

@keyframes slotPrep {
  0% {
    outline: 0 solid rgba(239, 184, 77, 0);
  }
  45% {
    outline: 3px solid rgba(239, 184, 77, 0.75);
    outline-offset: 4px;
  }
  100% {
    outline: 0 solid rgba(239, 184, 77, 0);
  }
}

@keyframes slotRepair {
  0%,
  100% {
    box-shadow: inherit;
  }
  45% {
    border-color: #caffc5;
    box-shadow: 0 0 30px rgba(104, 221, 100, 0.8), inset 0 0 24px rgba(104, 221, 100, 0.24);
  }
}

@keyframes lockPulse {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes targetPulse {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  18%,
  62% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes laserBeam {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.08) rotate(var(--laser-rotation));
  }
  18%,
  68% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1) rotate(var(--laser-rotation));
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(1.08) rotate(var(--laser-rotation));
  }
}

@keyframes fxFloat {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  20%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
}

@keyframes globalFx {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  24%,
  75% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}

@keyframes shotBeamTrace {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  48% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}

@keyframes shotImpact {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  28% {
    opacity: 1;
  }

  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}

@keyframes hullImpact {
  0% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }

  14% {
    transform: translateX(-4px) scale(1.025);
    filter: brightness(1.45);
  }

  28% {
    transform: translateX(4px) scale(1.02);
  }

  44% {
    transform: translateX(-2px) scale(1.01);
  }

  100% {
    transform: translateX(0) scale(1);
    filter: brightness(1);
  }
}

@keyframes hullBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18) rotate(0deg);
  }

  18% {
    opacity: 1;
  }

  58% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.08) rotate(18deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.48) rotate(32deg);
  }
}

@keyframes shipDestroyedShake {
  0%,
  100% {
    opacity: 0.92;
    transform: translateX(0) translateY(0) scale(1);
    filter: brightness(1);
  }

  12% {
    opacity: 1;
    transform: translateX(-7px) translateY(-2px) scale(1.02);
    filter: brightness(1.65);
  }

  24% {
    transform: translateX(8px) translateY(3px) scale(1.01);
  }

  42% {
    transform: translateX(-4px) translateY(0) scale(1.015);
    filter: brightness(1.2);
  }

  82% {
    opacity: 0.58;
  }
}

@keyframes shipDestroyedCore {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.16) rotate(0deg);
  }

  14% {
    opacity: 1;
  }

  44% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scale(1.05) rotate(14deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.82) rotate(34deg);
  }
}

@keyframes shipDestroyedCloud {
  0% {
    opacity: 0;
    transform: scale(0.16) rotate(0deg);
  }

  14% {
    opacity: 1;
  }

  44% {
    opacity: 0.96;
    transform: scale(1.05) rotate(14deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.82) rotate(34deg);
  }
}

@keyframes shipDestroyedFlash {
  0% {
    opacity: 0;
    transform: scale(0.26);
  }

  16% {
    opacity: 1;
  }

  48% {
    opacity: 0.44;
    transform: scale(1.12);
  }

  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes shipDestroyedRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.2);
  }
}

@keyframes shipShard {
  0% {
    opacity: 0;
    transform: rotate(var(--ship-shard-rotation)) scaleX(0.08) translateX(0);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--ship-shard-rotation)) scaleX(1) translateX(120%);
  }
}

@keyframes actionCallout {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.96);
  }
  12%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 10px)) scale(0.98);
  }
}

@keyframes tooltipIn {
  0% {
    opacity: 0;
    transform: translate(14px, calc(-100% - 4px));
  }
  100% {
    opacity: 1;
    transform: translate(14px, calc(-100% - 12px));
  }
}

@keyframes hintBreathe {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-4px);
    filter: brightness(1.12);
  }
}