/* V1.40 · Combat feedback director. Target-local hierarchy only; never moves the viewport. */
.vfx-feedback-anchor {
  --vfx-feedback-primary: #fff0c8;
  --vfx-feedback-secondary: #ff8068;
  --vfx-feedback-soft: rgba(255, 112, 86, .36);
  position: fixed;
  left: 0;
  top: 0;
  width: var(--vfx-feedback-width);
  height: var(--vfx-feedback-height);
  z-index: 169;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  contain: layout style;
  transform: translate3d(
    calc(var(--vfx-feedback-x) - var(--vfx-feedback-width) / 2),
    calc(var(--vfx-feedback-y) - var(--vfx-feedback-height) / 2),
    0
  );
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.72)) drop-shadow(0 0 7px var(--vfx-feedback-soft));
  animation: vfx-feedback-anchor-root var(--vfx-feedback-life) cubic-bezier(.16,.78,.18,1) both;
}

.vfx-feedback-anchor > i {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.vfx-feedback-spine {
  left: 12%;
  right: 12%;
  bottom: 24%;
  height: 2px;
  opacity: 0;
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, var(--vfx-feedback-secondary) 16%, #fff8df 50%, var(--vfx-feedback-primary) 84%, transparent);
  box-shadow: 0 0 7px var(--vfx-feedback-soft);
  animation: vfx-feedback-spine var(--vfx-feedback-life) cubic-bezier(.12,.8,.18,1) both;
}

.vfx-feedback-cap {
  bottom: 18%;
  width: 2px;
  height: 34%;
  opacity: 0;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, #fff9e8 36%, var(--vfx-feedback-primary) 72%, transparent);
  box-shadow: 0 0 6px var(--vfx-feedback-soft);
  animation: vfx-feedback-cap calc(var(--vfx-feedback-life) * .72) ease-out both;
}

.vfx-feedback-cap-a { left: 17%; }
.vfx-feedback-cap-b { right: 17%; animation-delay: 24ms; }

.vfx-feedback-anchor.is-priority .vfx-feedback-spine {
  left: 6%;
  right: 6%;
  height: 3px;
  background:
    linear-gradient(90deg, transparent, var(--vfx-feedback-secondary) 11%, #fff 47% 53%, var(--vfx-feedback-primary) 89%, transparent);
  box-shadow: 0 0 5px #fff4cd, 0 0 13px var(--vfx-feedback-soft);
}

.vfx-feedback-anchor.is-priority .vfx-feedback-cap {
  width: 3px;
  height: 46%;
}

.vfx-feedback-critical {
  --vfx-feedback-primary: #ffe18b;
  --vfx-feedback-secondary: #ff4e43;
  --vfx-feedback-soft: rgba(255, 61, 47, .52);
}

.vfx-feedback-block {
  --vfx-feedback-primary: #ddfbff;
  --vfx-feedback-secondary: #69dfff;
  --vfx-feedback-soft: rgba(73, 204, 255, .46);
}

.vfx-feedback-heal {
  --vfx-feedback-primary: #d8ffde;
  --vfx-feedback-secondary: #66ff92;
  --vfx-feedback-soft: rgba(74, 255, 132, .34);
}

.vfx-feedback-energy {
  --vfx-feedback-primary: #fff2ad;
  --vfx-feedback-secondary: #ffc84d;
  --vfx-feedback-soft: rgba(255, 190, 53, .38);
}

.vfx-outcome-stamp[data-stack]:not([data-stack="1"])::after {
  content: "×" attr(data-stack);
  position: absolute;
  right: 16%;
  bottom: 15%;
  min-width: 2.1em;
  padding: .2em .4em .24em;
  border: 1px solid color-mix(in srgb, var(--vfx-outcome-primary) 70%, transparent);
  border-radius: 4px;
  color: #fff9e8;
  background: linear-gradient(180deg, rgba(12,18,27,.94), rgba(4,8,14,.9));
  box-shadow: 0 4px 13px rgba(0,0,0,.52), 0 0 10px var(--vfx-outcome-soft);
  font: 900 clamp(11px, calc(var(--vfx-outcome-size) * .066), 16px)/1 system-ui, "Microsoft YaHei", sans-serif;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 1px 3px #000, 0 0 7px var(--vfx-outcome-secondary);
  animation: vfx-outcome-stack-count 360ms cubic-bezier(.14,.82,.18,1) both;
}

.vfx-outcome-stamp.is-repeated .vfx-outcome-frame,
.vfx-outcome-stamp.is-repeated .vfx-outcome-axis,
.vfx-outcome-stamp.is-repeated::after {
  animation-name: vfx-outcome-repeat-punctuation;
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.12,.82,.18,1);
  animation-fill-mode: both;
}

@keyframes vfx-feedback-anchor-root {
  0% { opacity: 0; }
  10% { opacity: 1; }
  68% { opacity: .88; }
  100% { opacity: 0; }
}

@keyframes vfx-feedback-spine {
  0% { opacity: 0; transform: scaleX(.08); filter: brightness(1.6); }
  16% { opacity: 1; transform: scaleX(1.08); filter: brightness(1.14); }
  30% { opacity: .96; transform: scaleX(.94); filter: brightness(1); }
  72% { opacity: .74; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.72); }
}

@keyframes vfx-feedback-cap {
  0% { opacity: 0; transform: scaleY(.18); }
  20% { opacity: .94; transform: scaleY(1.1); }
  48% { opacity: .78; transform: scaleY(.92); }
  100% { opacity: 0; transform: scaleY(.58); }
}

@keyframes vfx-outcome-stack-count {
  0% { opacity: 0; transform: translate3d(6px,5px,0) scale(.72); }
  30% { opacity: 1; transform: translate3d(0,0,0) scale(1.08); }
  100% { opacity: .94; transform: translate3d(0,0,0) scale(1); }
}

@keyframes vfx-outcome-repeat-punctuation {
  0% { opacity: .28; filter: brightness(1.8); }
  22% { opacity: 1; filter: brightness(1.28); transform: scale(1.08); }
  52% { opacity: .92; filter: brightness(1); transform: scale(.96); }
  100% { opacity: .78; transform: scale(1); }
}

@media (max-width: 720px) {
  .vfx-feedback-anchor { z-index: 167; }
  .vfx-outcome-stamp[data-stack]:not([data-stack="1"])::after {
    right: 12%;
    bottom: 12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vfx-feedback-anchor,
  .vfx-feedback-anchor > *,
  .vfx-outcome-stamp.is-repeated > *,
  .vfx-outcome-stamp.is-repeated::after {
    animation-duration: 180ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}