/* V1.36 · Combat outcome language and combo cadence. Local-only feedback: no viewport motion. */
.vfx-outcome-stamp,
.vfx-combo-cadence {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  contain: layout style;
  z-index: 168;
}

.vfx-outcome-stamp {
  --vfx-outcome-primary: #fff0c7;
  --vfx-outcome-secondary: #ff8068;
  --vfx-outcome-soft: rgba(255, 128, 104, .3);
  width: var(--vfx-outcome-size);
  height: var(--vfx-outcome-size);
  transform: translate3d(
    calc(var(--vfx-outcome-x) - var(--vfx-outcome-size) / 2),
    calc(var(--vfx-outcome-y) - var(--vfx-outcome-size) / 2),
    0
  );
  color: var(--vfx-outcome-primary);
  filter: saturate(1.12) contrast(1.04);
  animation: vfx-outcome-root var(--vfx-outcome-life) cubic-bezier(.14,.76,.2,1) both;
}

.vfx-outcome-stamp > i,
.vfx-outcome-stamp > b {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.vfx-outcome-flash {
  inset: 15%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0 3%, var(--vfx-outcome-soft) 12%, transparent 62%);
  animation: vfx-outcome-flash calc(var(--vfx-outcome-life) * .54) ease-out both;
}

.vfx-outcome-frame {
  inset: 17%;
  opacity: 0;
  border: 2px solid var(--vfx-outcome-primary);
  box-shadow:
    0 0 5px rgba(255,255,255,.84),
    0 0 18px var(--vfx-outcome-soft),
    inset 0 0 16px var(--vfx-outcome-soft);
  animation: vfx-outcome-frame var(--vfx-outcome-life) cubic-bezier(.12,.74,.18,1) both;
}

.vfx-outcome-axis {
  left: 50%;
  top: 50%;
  width: 54%;
  height: 2px;
  opacity: 0;
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, var(--vfx-outcome-secondary) 22% 78%, transparent);
  box-shadow: 0 0 10px var(--vfx-outcome-soft);
  animation: vfx-outcome-axis calc(var(--vfx-outcome-life) * .7) cubic-bezier(.1,.8,.16,1) both;
}

.vfx-outcome-axis-a { transform: translate(-50%,-50%) rotate(42deg) scaleX(.1); }
.vfx-outcome-axis-b { transform: translate(-50%,-50%) rotate(-42deg) scaleX(.1); animation-delay: 28ms; }

.vfx-outcome-word {
  left: 50%;
  top: 5%;
  min-width: 3.4em;
  padding: .22em .62em .26em;
  border: 1px solid color-mix(in srgb, var(--vfx-outcome-primary) 72%, transparent);
  border-radius: 999px;
  transform: translate3d(-50%, 8px, 0) scale(.82);
  opacity: 0;
  color: #fff9e9;
  background: linear-gradient(180deg, rgba(16,22,31,.94), rgba(5,9,15,.86));
  box-shadow: 0 5px 18px rgba(0,0,0,.46), 0 0 16px var(--vfx-outcome-soft);
  font: 900 clamp(12px, calc(var(--vfx-outcome-size) * .075), 18px)/1 system-ui, "Microsoft YaHei", sans-serif;
  letter-spacing: .15em;
  text-align: center;
  text-indent: .15em;
  text-shadow: 0 1px 3px #000, 0 0 8px var(--vfx-outcome-secondary);
  white-space: nowrap;
  animation: vfx-outcome-word var(--vfx-outcome-life) cubic-bezier(.14,.78,.2,1) both;
}

.vfx-outcome-damage .vfx-outcome-frame {
  inset: 29% 22%;
  border-width: 0 3px;
  border-radius: 3px;
  transform: rotate(42deg) scale(.66);
}

.vfx-outcome-damage .vfx-outcome-word { display: none; }
.vfx-outcome-damage .vfx-outcome-axis-b { opacity: 0 !important; }

.vfx-outcome-critical {
  --vfx-outcome-primary: #ffe49a;
  --vfx-outcome-secondary: #ff4f47;
  --vfx-outcome-soft: rgba(255, 67, 53, .42);
}

.vfx-outcome-critical .vfx-outcome-frame {
  inset: 11%;
  border-width: 3px;
  clip-path: polygon(50% 0,62% 17%,88% 12%,83% 38%,100% 50%,83% 62%,88% 88%,62% 83%,50% 100%,38% 83%,12% 88%,17% 62%,0 50%,17% 38%,12% 12%,38% 17%);
  background: radial-gradient(circle, transparent 48%, rgba(255,65,50,.2) 69%, transparent 72%);
  animation-name: vfx-outcome-critical-frame;
}

.vfx-outcome-critical .vfx-outcome-axis {
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff4a43 18%, #fff7c8 48% 52%, #ff4a43 82%, transparent);
}

.vfx-outcome-block {
  --vfx-outcome-primary: #d9fbff;
  --vfx-outcome-secondary: #79ddff;
  --vfx-outcome-soft: rgba(70, 203, 255, .4);
}

.vfx-outcome-block .vfx-outcome-frame {
  inset: 12% 20% 16%;
  border: 3px solid var(--vfx-outcome-primary);
  border-bottom-width: 5px;
  clip-path: polygon(50% 0,93% 18%,86% 72%,50% 100%,14% 72%,7% 18%);
  background:
    linear-gradient(90deg, transparent 48.5%, rgba(255,255,255,.8) 49% 51%, transparent 51.5%),
    linear-gradient(160deg, rgba(101,221,255,.18), transparent 62%);
  animation-name: vfx-outcome-block-frame;
}

.vfx-outcome-block .vfx-outcome-axis {
  width: 46%;
  background: linear-gradient(90deg, transparent, #fff0a8 16% 84%, transparent);
}

.vfx-outcome-heal {
  --vfx-outcome-primary: #d7ffd6;
  --vfx-outcome-secondary: #65ff93;
  --vfx-outcome-soft: rgba(66, 255, 134, .3);
}

.vfx-outcome-heal .vfx-outcome-frame {
  inset: 20%;
  border-color: rgba(163,255,183,.9);
  border-radius: 50%;
  border-width: 2px;
  background:
    linear-gradient(90deg, transparent 43%, rgba(221,255,226,.88) 43% 57%, transparent 57%),
    linear-gradient(0deg, transparent 43%, rgba(221,255,226,.88) 43% 57%, transparent 57%);
  animation-name: vfx-outcome-heal-frame;
}

.vfx-outcome-heal .vfx-outcome-axis {
  width: 34%;
  transform: translate(-50%,-50%) rotate(90deg) scaleX(.1);
  background: linear-gradient(90deg, transparent, #baffc5 22% 78%, transparent);
}

.vfx-outcome-heal .vfx-outcome-axis-b { display: none; }

.vfx-outcome-energy {
  --vfx-outcome-primary: #fff2b0;
  --vfx-outcome-secondary: #ffc94e;
  --vfx-outcome-soft: rgba(255, 191, 50, .34);
}

.vfx-outcome-energy .vfx-outcome-frame {
  inset: 16%;
  border: 2px solid var(--vfx-outcome-primary);
  border-radius: 50%;
  clip-path: polygon(50% 0,61% 13%,78% 6%,83% 23%,100% 28%,92% 45%,100% 61%,83% 67%,78% 86%,61% 79%,50% 100%,39% 79%,22% 86%,17% 67%,0 61%,8% 45%,0 28%,17% 23%,22% 6%,39% 13%);
  background: conic-gradient(from 20deg, transparent, rgba(255,209,88,.26), transparent 22%, rgba(255,241,178,.24), transparent 47%, rgba(255,209,88,.28), transparent 72%);
  animation-name: vfx-outcome-energy-frame;
}

.vfx-outcome-energy .vfx-outcome-axis {
  width: 40%;
  background: linear-gradient(90deg, transparent, #fff4b2 18% 82%, transparent);
}

.vfx-combo-cadence {
  --vfx-combo-primary: #fff0c8;
  --vfx-combo-secondary: #ff8a70;
  --vfx-combo-soft: rgba(255, 117, 88, .34);
  width: var(--vfx-combo-size);
  height: var(--vfx-combo-size);
  transform: translate3d(
    calc(var(--vfx-combo-x) - var(--vfx-combo-size) / 2),
    calc(var(--vfx-combo-y) - var(--vfx-combo-size) / 2),
    0
  );
  animation: vfx-combo-root var(--vfx-combo-life) cubic-bezier(.12,.78,.18,1) both;
}

.vfx-combo-cadence > * {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.vfx-combo-ring {
  inset: 20%;
  border: 2px solid var(--vfx-combo-primary);
  border-right-color: var(--vfx-combo-secondary);
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 8px var(--vfx-combo-soft));
  animation: vfx-combo-ring var(--vfx-combo-life) cubic-bezier(.1,.8,.16,1) both;
}

.vfx-combo-cut {
  left: 50%;
  top: 50%;
  width: calc(var(--vfx-combo-size) * .62);
  height: 3px;
  opacity: 0;
  transform: translate(-50%,-50%) rotate(-32deg) scaleX(.12);
  background: linear-gradient(90deg, transparent, var(--vfx-combo-secondary) 20%, #fff 50%, var(--vfx-combo-primary) 80%, transparent);
  box-shadow: 0 0 10px var(--vfx-combo-soft);
  animation: vfx-combo-cut calc(var(--vfx-combo-life) * .66) ease-out both;
}

.vfx-combo-count {
  right: 14%;
  bottom: 16%;
  min-width: 1.75em;
  padding: .18em .42em .22em;
  border: 1px solid color-mix(in srgb, var(--vfx-combo-primary) 70%, transparent);
  border-radius: 999px;
  opacity: 0;
  color: #fffbe8;
  background: rgba(5,9,15,.88);
  box-shadow: 0 4px 14px rgba(0,0,0,.44), 0 0 12px var(--vfx-combo-soft);
  font: 900 clamp(11px, calc(var(--vfx-combo-size) * .078), 17px)/1 system-ui, "Microsoft YaHei", sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 0 7px var(--vfx-combo-secondary);
  animation: vfx-combo-count var(--vfx-combo-life) cubic-bezier(.14,.8,.2,1) both;
}

.vfx-combo-cadence.is-opening {
  --vfx-combo-primary: #fff0c8;
  --vfx-combo-secondary: #ff8a70;
  --vfx-combo-soft: rgba(255, 117, 88, .34);
}

.vfx-combo-cadence.is-rising {
  --vfx-combo-secondary: #ffbd66;
  --vfx-combo-soft: rgba(255, 180, 75, .38);
}

.vfx-combo-cadence.is-final {
  --vfx-combo-primary: #fff0a2;
  --vfx-combo-secondary: #ff5147;
  --vfx-combo-soft: rgba(255, 62, 50, .48);
}

.vfx-combo-cadence.is-final .vfx-combo-ring {
  inset: 10%;
  border-width: 3px;
  box-shadow: 0 0 6px #fff8cf, 0 0 24px var(--vfx-combo-soft), inset 0 0 22px rgba(255,58,47,.15);
}

.vfx-combo-cadence.is-final .vfx-combo-cut { height: 4px; width: 78%; }
.vfx-combo-cadence.is-final .vfx-combo-count { right: 8%; bottom: 9%; }

.vfx-combo-frost {
  --vfx-combo-primary: #e4fbff;
  --vfx-combo-secondary: #72dfff;
  --vfx-combo-soft: rgba(79, 207, 255, .42);
}

.vfx-combo-stellar {
  --vfx-combo-primary: #ffe1f5;
  --vfx-combo-secondary: #ff78d6;
  --vfx-combo-soft: rgba(255, 87, 202, .42);
}

.vfx-combo-frost.is-final,
.vfx-combo-stellar.is-final {
  --vfx-combo-primary: #fff1ad;
  --vfx-combo-secondary: #ff5a54;
  --vfx-combo-soft: rgba(255, 68, 61, .46);
}

@keyframes vfx-outcome-root {
  0% { opacity: 0; filter: saturate(.8) brightness(1.4); }
  8% { opacity: 1; filter: saturate(1.18) brightness(1.08); }
  70% { opacity: .92; }
  100% { opacity: 0; filter: saturate(.92) brightness(.88); }
}

@keyframes vfx-outcome-flash {
  0% { opacity: 0; transform: scale(.28); }
  12% { opacity: .94; transform: scale(.72); }
  38% { opacity: .34; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes vfx-outcome-frame {
  0% { opacity: 0; transform: scale(.48) rotate(-8deg); }
  15% { opacity: 1; transform: scale(1.05) rotate(0); }
  58% { opacity: .76; transform: scale(.94) rotate(0); }
  100% { opacity: 0; transform: scale(1.18) rotate(4deg); }
}

@keyframes vfx-outcome-critical-frame {
  0% { opacity: 0; transform: scale(.3) rotate(-18deg); }
  13% { opacity: 1; transform: scale(1.12) rotate(2deg); }
  24% { opacity: .92; transform: scale(.92) rotate(0); }
  68% { opacity: .72; transform: scale(1.02) rotate(0); }
  100% { opacity: 0; transform: scale(1.26) rotate(8deg); }
}

@keyframes vfx-outcome-block-frame {
  0% { opacity: 0; transform: scaleX(1.34) scaleY(.72); }
  12% { opacity: 1; transform: scaleX(.86) scaleY(1.08); }
  24% { opacity: .96; transform: scaleX(1.02) scaleY(.98); }
  70% { opacity: .76; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9); }
}

@keyframes vfx-outcome-heal-frame {
  0% { opacity: 0; transform: translateY(12%) scale(.56); }
  18% { opacity: .96; transform: translateY(0) scale(1.02); }
  62% { opacity: .72; transform: translateY(-8%) scale(.96); }
  100% { opacity: 0; transform: translateY(-24%) scale(1.1); }
}

@keyframes vfx-outcome-energy-frame {
  0% { opacity: 0; transform: rotate(-30deg) scale(1.32); }
  18% { opacity: 1; transform: rotate(4deg) scale(.94); }
  48% { opacity: .88; transform: rotate(12deg) scale(1.02); }
  100% { opacity: 0; transform: rotate(32deg) scale(.78); }
}

@keyframes vfx-outcome-axis {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(42deg) scaleX(.08); }
  18% { opacity: 1; transform: translate(-50%,-50%) rotate(42deg) scaleX(1.08); }
  55% { opacity: .66; transform: translate(-50%,-50%) rotate(42deg) scaleX(.88); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(42deg) scaleX(1.26); }
}

.vfx-outcome-axis-b { animation-name: vfx-outcome-axis-b; }

@keyframes vfx-outcome-axis-b {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-42deg) scaleX(.08); }
  18% { opacity: .88; transform: translate(-50%,-50%) rotate(-42deg) scaleX(1); }
  55% { opacity: .54; transform: translate(-50%,-50%) rotate(-42deg) scaleX(.82); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-42deg) scaleX(1.18); }
}

@keyframes vfx-outcome-word {
  0% { opacity: 0; transform: translate3d(-50%,10px,0) scale(.76); }
  16% { opacity: 1; transform: translate3d(-50%,0,0) scale(1.06); }
  30% { opacity: 1; transform: translate3d(-50%,0,0) scale(1); }
  72% { opacity: .94; transform: translate3d(-50%,-2px,0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%,-12px,0) scale(.94); }
}

@keyframes vfx-combo-root {
  0% { opacity: 0; }
  10% { opacity: 1; }
  68% { opacity: .9; }
  100% { opacity: 0; }
}

@keyframes vfx-combo-ring {
  0% { opacity: 0; transform: scale(.44) rotate(-34deg); }
  18% { opacity: 1; transform: scale(1.06) rotate(4deg); }
  58% { opacity: .72; transform: scale(.94) rotate(12deg); }
  100% { opacity: 0; transform: scale(1.22) rotate(34deg); }
}

@keyframes vfx-combo-cut {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-32deg) scaleX(.08); }
  18% { opacity: 1; transform: translate(-50%,-50%) rotate(-32deg) scaleX(1.08); }
  52% { opacity: .68; transform: translate(-50%,-50%) rotate(-32deg) scaleX(.9); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-32deg) scaleX(1.28); }
}

@keyframes vfx-combo-count {
  0% { opacity: 0; transform: translate3d(8px,7px,0) scale(.7); }
  20% { opacity: 1; transform: translate3d(0,0,0) scale(1.08); }
  58% { opacity: .96; transform: translate3d(0,0,0) scale(1); }
  100% { opacity: 0; transform: translate3d(4px,-8px,0) scale(.92); }
}

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