/* V1.69 · Local directional hit confirmation without camera or screen shake. */
.directional-impact-arc {
  --impact-angle: -90deg;
  --impact-size: 72px;
  --impact-primary: #ff785e;
  --impact-secondary: #ffd66f;
  --impact-soft: rgba(255, 98, 72, .42);
  position: fixed;
  z-index: 117;
  width: var(--impact-size);
  height: var(--impact-size);
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) rotate(var(--impact-angle));
  transform-origin: 50% 50%;
  contain: layout style paint;
  filter: drop-shadow(0 0 7px var(--impact-soft));
  animation: directional-impact-enter 560ms cubic-bezier(.08,.8,.18,1) both;
}

.directional-impact-arc[data-impact-strength="heavy"] {
  filter: drop-shadow(0 0 10px var(--impact-soft));
  animation-duration: 680ms;
}

.directional-impact-arc[data-impact-strength="guarded"] {
  animation-duration: 480ms;
}

.directional-impact-ring,
.directional-impact-anchor {
  position: absolute;
  display: block;
  pointer-events: none;
}

.directional-impact-ring {
  inset: 3%;
  border: clamp(2px, calc(var(--impact-size) * .038), 4px) solid transparent;
  border-top-color: var(--impact-secondary);
  border-right-color: var(--impact-primary);
  border-radius: 50%;
  box-shadow:
    inset -4px -2px 12px var(--impact-soft),
    4px -2px 12px var(--impact-soft);
  transform: rotate(45deg);
  animation: directional-impact-ring 560ms cubic-bezier(.1,.78,.18,1) both;
}

.directional-impact-anchor {
  right: -2%;
  top: 50%;
  width: 24%;
  height: clamp(2px, calc(var(--impact-size) * .04), 4px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--impact-secondary) 36%, #fff 100%);
  box-shadow: 0 0 8px var(--impact-secondary), 0 0 16px var(--impact-primary);
  transform: translateY(-50%);
  transform-origin: 100% 50%;
  animation: directional-impact-anchor 420ms cubic-bezier(.06,.84,.16,1) both;
}

.directional-impact-anchor::before,
.directional-impact-anchor::after {
  content: "";
  position: absolute;
  right: -1px;
  width: 48%;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 7px var(--impact-secondary);
  transform-origin: 100% 50%;
}

.directional-impact-anchor::before {
  top: -2px;
  transform: rotate(34deg);
}

.directional-impact-anchor::after {
  bottom: -2px;
  transform: rotate(-34deg);
}

.directional-impact-arc[data-impact-tone="guard"] {
  --impact-primary: #75d9ff;
  --impact-secondary: #f1fbff;
  --impact-soft: rgba(71, 187, 255, .42);
}

.directional-impact-arc[data-impact-tone="frost"] {
  --impact-primary: #65ddff;
  --impact-secondary: #e6fbff;
  --impact-soft: rgba(62, 195, 255, .4);
}

.directional-impact-arc[data-impact-tone="fire"] {
  --impact-primary: #ff5a38;
  --impact-secondary: #ffe07b;
  --impact-soft: rgba(255, 75, 38, .46);
}

.directional-impact-arc[data-impact-tone="magic"] {
  --impact-primary: #b886ff;
  --impact-secondary: #f2ddff;
  --impact-soft: rgba(154, 93, 255, .42);
}

.directional-impact-arc[data-impact-tone="chaos"] {
  --impact-primary: #a8ff35;
  --impact-secondary: #d58aff;
  --impact-soft: rgba(116, 255, 48, .4);
}

.directional-impact-target {
  outline: 1px solid rgba(255,255,255,.12);
  outline-offset: 2px;
}

@keyframes directional-impact-enter {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(var(--impact-angle)) scale(.64);
  }
  18% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(var(--impact-angle)) scale(1.06);
  }
  48% {
    opacity: .9;
    transform: translate3d(-50%, -50%, 0) rotate(var(--impact-angle)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(var(--impact-angle)) scale(1.14);
  }
}

@keyframes directional-impact-ring {
  0% { opacity: 0; transform: rotate(18deg) scale(.7); }
  20% { opacity: 1; transform: rotate(45deg) scale(1.02); }
  62% { opacity: .78; transform: rotate(48deg) scale(1); }
  100% { opacity: 0; transform: rotate(58deg) scale(1.1); }
}

@keyframes directional-impact-anchor {
  0% { opacity: 0; transform: translateY(-50%) scaleX(.12); }
  24% { opacity: 1; transform: translateY(-50%) scaleX(1.12); }
  64% { opacity: .86; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(.72); }
}

body[data-vfx-quality="low"] .directional-impact-arc {
  filter: none;
}

body[data-vfx-quality="low"] .directional-impact-ring {
  box-shadow: none;
}

body[data-vfx-quality="low"] .directional-impact-anchor {
  box-shadow: 0 0 5px var(--impact-primary);
}

@media (max-width: 720px) {
  .directional-impact-arc {
    width: min(var(--impact-size), 68px);
    height: min(var(--impact-size), 68px);
  }

  .directional-impact-target {
    outline-offset: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directional-impact-arc,
  .directional-impact-ring,
  .directional-impact-anchor {
    animation-duration: 160ms !important;
    animation-iteration-count: 1 !important;
  }

  .directional-impact-arc {
    filter: none;
  }
}