.lv > .combat-hit-marker-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.combat-hit-marker {
  --combat-marker-enter-x: 10px;
  --combat-marker-exit-x: -12px;
  position: absolute;
  display: block;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9));
  transform-origin: center;
  user-select: none;
  will-change: transform, opacity;
  animation: combat-hit-marker-flight 1.5s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.combat-hit-marker[data-side='right'] {
  --combat-marker-enter-x: -10px;
  --combat-marker-exit-x: 12px;
}

.combat-hit-marker--critical {
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 5px rgba(213, 38, 30, 0.42));
}

@keyframes combat-hit-marker-flight {
  0% {
    opacity: 0;
    transform: translate3d(var(--combat-marker-enter-x), 7px, 0) scale(0.82);
  }
  12% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--combat-marker-exit-x), -18px, 0) scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .combat-hit-marker {
    animation-name: combat-hit-marker-fade;
    animation-timing-function: ease-out;
  }
}

@keyframes combat-hit-marker-fade {
  0%,
  100% {
    opacity: 0;
  }
  12%,
  70% {
    opacity: 1;
  }
}