.world-map .world-combat-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
}

.world-battle-effect {
  position: absolute;
  z-index: 14;
  display: block;
  width: var(--effect-size);
  height: var(--effect-size);
  margin-left: calc(var(--effect-size) / -2);
  margin-top: calc(var(--effect-size) / -2);
  overflow: hidden;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .58));
  transform: translateZ(0);
}

.world-battle-effect img {
  display: block;
  width: calc(var(--effect-size) * 6);
  height: var(--effect-size);
  max-width: none;
  user-select: none;
  pointer-events: none;
  animation: worldCombatSprite var(--effect-duration) steps(5, end) infinite;
  animation-delay: var(--effect-delay);
}

.world-battle-effect.route {
  z-index: 11;
  opacity: .88;
}

.world-battle-effect.route.faint {
  opacity: .58;
}

.world-battle-effect.projectile {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)) drop-shadow(0 0 9px rgba(255, 197, 52, .56));
}

.world-battle-effect.impact {
  z-index: 15;
  mix-blend-mode: screen;
}

.world-battle-effect.premium {
  z-index: 16;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .62)) drop-shadow(0 0 14px rgba(255, 210, 64, .48));
}

.world-battle-effect.danger {
  z-index: 17;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .62)) drop-shadow(0 0 16px rgba(255, 55, 45, .65));
}

.world-damage-number {
  position: absolute;
  z-index: 18;
  min-width: 44px;
  margin-left: -22px;
  pointer-events: none;
  color: #fff1a6;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  -webkit-text-stroke: 2px #6e1f17;
  text-shadow: 0 2px 0 #33140f, 0 0 10px rgba(255, 221, 68, .92), 0 0 18px rgba(255, 76, 42, .72);
  animation: worldDamagePop .98s ease-out infinite;
  animation-delay: var(--damage-delay);
}

.world-damage-number.incoming {
  color: #d9fbff;
  -webkit-text-stroke-color: #093f7a;
  text-shadow: 0 2px 0 #06233d, 0 0 10px rgba(71, 223, 255, .92), 0 0 18px rgba(255, 76, 42, .72);
}

.world-combat-health {
  position: absolute;
  z-index: 18;
  display: block;
  width: 62px;
  height: 8px;
  margin-left: -31px;
  border: 1px solid rgba(255, 238, 188, .88);
  border-radius: 999px;
  background: rgba(38, 15, 14, .78);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55), 0 0 10px rgba(255, 61, 42, .28);
  overflow: hidden;
  pointer-events: none;
}

.world-combat-health::before {
  content: "";
  display: block;
  width: var(--hp);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff3d36, #ffb82c, #ffe777);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.world-combat-health::after {
  content: attr(data-hp);
  position: absolute;
  inset: -13px 0 auto;
  color: #fff4ce;
  font-size: 8px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}

@keyframes worldCombatSprite {
  to {
    transform: translateX(calc(var(--effect-size) * -5));
  }
}

@keyframes worldDamagePop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.72);
  }
  18% {
    opacity: 1;
    transform: translateY(-2px) scale(1.22);
  }
  58% {
    opacity: 1;
    transform: translateY(-18px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-36px) scale(.84);
  }
}