.kingdom-strip {
  --raid-target-x: 66%;
  --raid-target-y: 52%;
}

.kingdom-strip .monster {
  right: auto;
  left: var(--raid-target-x);
  top: var(--raid-target-y);
  z-index: 10;
  width: 64px;
  height: 64px;
  --raid-sprite-last-x: -320px;
  background: url("../assets/monsters/void-raider-attack.png?v=20260619c") 0 0 / 384px 64px no-repeat;
  background-size: 384px 64px;
  background-position: 0 0;
  filter: drop-shadow(0 0 13px rgba(220, 56, 255, .72));
  transform-origin: center bottom;
  animation: voidRaiderPath 1.24s cubic-bezier(.18, .78, .22, 1) both,
    voidRaiderFrames .62s steps(5, end) 2 both;
}

.kingdom-strip .raid-slash {
  left: var(--raid-target-x);
  top: var(--raid-target-y);
  z-index: 11;
  width: 70px;
  height: 70px;
  --raid-sprite-last-x: -350px;
  background: url("../assets/world/effects/world-raid_slash.png?v=20260619a") 0 0 / 420px 70px no-repeat;
  background-size: 420px 70px;
  background-position: 0 0;
  filter: drop-shadow(0 0 14px rgba(234, 73, 255, .7));
  transform: translate(-50%, -50%);
}

.kingdom-strip .raid-slash.active {
  animation: buildingHitFrames .72s steps(5, end) both, buildingHitPop .72s ease-out both;
}

.kingdom-strip.raid-battle .monster.active {
  animation: voidRaiderPath 1.24s cubic-bezier(.18, .78, .22, 1) infinite,
    voidRaiderFrames .62s steps(5, end) infinite;
}

.kingdom-strip.raid-battle .raid-slash.active {
  animation: buildingHitFrames .72s steps(5, end) infinite, buildingHitPop .72s ease-out infinite;
}

.kingdom-strip .building-node.under-raid-hit {
  animation: buildingHitShake .42s ease-in-out 2;
}

.kingdom-strip.raid-battle .building-node.under-raid-hit {
  animation: buildingHitShake .42s ease-in-out infinite;
}

.kingdom-strip .building-node.under-raid-hit::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 3;
  width: 62px;
  height: 62px;
  --raid-sprite-last-x: -310px;
  border: 0;
  border-radius: 0;
  background: url("../assets/world/effects/world-raid_slash.png?v=20260619a") 0 0 / 372px 62px no-repeat;
  background-size: 372px 62px;
  pointer-events: none;
  transform: translate(-50%, 8%);
  animation: buildingHitFrames .72s steps(5, end) both, buildingHitNodePop .72s ease-out both;
}

.kingdom-strip.raid-battle .building-node.under-raid-hit::after {
  animation: buildingHitFrames .72s steps(5, end) infinite, buildingHitNodePop .72s ease-out infinite;
}

@keyframes voidRaiderPath {
  0% { opacity: 0; transform: translate(calc(-50% + 112px), calc(-56% - 42px)) scale(.62); }
  18% { opacity: 1; transform: translate(calc(-50% + 76px), calc(-56% - 32px)) scale(.72); }
  58% { opacity: 1; transform: translate(calc(-50% + 18px), calc(-56% - 10px)) scale(.86); }
  82% { opacity: 1; transform: translate(-50%, -56%) scale(.82); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(.76); }
}

@keyframes voidRaiderFrames {
  from { background-position: 0 0; }
  to { background-position: var(--raid-sprite-last-x) 0; }
}

@keyframes buildingHitFrames {
  from { background-position: 0 0; }
  to { background-position: var(--raid-sprite-last-x) 0; }
}

@keyframes buildingHitPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes buildingHitNodePop {
  0% { opacity: 0; transform: translate(-50%, 8%) scale(.44); }
  18% { opacity: 1; transform: translate(-50%, 8%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, 8%) scale(1.12); }
}

@keyframes buildingHitShake {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 1px; }
  50% { translate: 2px -1px; }
  75% { translate: -1px -1px; }
}