.vfx-turn-cadence {
  position: fixed;
  inset: 0;
  z-index: 97;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  color: var(--vfx-turn-primary, #78e8ff);
  animation: vfx-turn-root var(--vfx-turn-life, 720ms) linear both;
}

.vfx-turn-cadence > i,
.vfx-turn-cadence > span,
.vfx-turn-focus > i,
.vfx-turn-rail > i {
  position: absolute;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
}

.vfx-turn-field {
  left: var(--vfx-turn-x);
  top: var(--vfx-turn-y);
  width: var(--vfx-turn-size);
  height: var(--vfx-turn-size);
  transform: translate(-50%, -50%) scale(.68);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, transparent 0 22%, var(--vfx-turn-primary-soft) 23%, transparent 26% 43%, var(--vfx-turn-secondary-soft) 44%, transparent 48%),
    conic-gradient(from 32deg, transparent 0 10%, var(--vfx-turn-primary-soft) 12%, transparent 15% 31%, var(--vfx-turn-secondary-soft) 34%, transparent 37% 61%, var(--vfx-turn-primary-soft) 64%, transparent 67% 100%);
  filter: blur(.2px) drop-shadow(0 0 14px var(--vfx-turn-primary-soft));
  animation: vfx-turn-field var(--vfx-turn-life) cubic-bezier(.16,.82,.22,1) both;
}

.vfx-turn-focus {
  left: var(--vfx-turn-x);
  top: var(--vfx-turn-y);
  width: var(--vfx-turn-size);
  height: var(--vfx-turn-size);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 10px var(--vfx-turn-primary-soft));
}

.vfx-turn-ring {
  inset: 14%;
  border: 1px solid var(--vfx-turn-primary);
  border-radius: 50%;
  opacity: 0;
}

.vfx-turn-ring::before,
.vfx-turn-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 20%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--vfx-turn-secondary), transparent);
  box-shadow: 0 calc(var(--vfx-turn-size) * .72 - 2px) 0 var(--vfx-turn-secondary);
}

.vfx-turn-ring-a {
  animation: vfx-turn-ring-a var(--vfx-turn-life) cubic-bezier(.18,.78,.2,1) both;
}

.vfx-turn-ring-b {
  inset: 25%;
  border-style: dashed;
  border-color: var(--vfx-turn-secondary);
  animation: vfx-turn-ring-b var(--vfx-turn-life) cubic-bezier(.18,.78,.2,1) both;
}

.vfx-turn-brackets {
  inset: 7%;
  opacity: 0;
  background:
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) left top / 24% 2px no-repeat,
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) left top / 2px 24% no-repeat,
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) right top / 24% 2px no-repeat,
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) right top / 2px 24% no-repeat,
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) left bottom / 24% 2px no-repeat,
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) left bottom / 2px 24% no-repeat,
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) right bottom / 24% 2px no-repeat,
    linear-gradient(var(--vfx-turn-primary), var(--vfx-turn-primary)) right bottom / 2px 24% no-repeat;
  filter: drop-shadow(0 0 7px var(--vfx-turn-primary));
  animation: vfx-turn-brackets var(--vfx-turn-life) cubic-bezier(.12,.86,.2,1) both;
}

.vfx-turn-core {
  left: 50%;
  top: 50%;
  width: 14%;
  height: 14%;
  transform: translate(-50%, -50%) rotate(45deg) scale(.2);
  border: 1px solid var(--vfx-turn-secondary);
  background: linear-gradient(135deg, var(--vfx-turn-primary-soft), transparent 62%);
  opacity: 0;
  box-shadow: 0 0 12px var(--vfx-turn-primary-soft), inset 0 0 8px var(--vfx-turn-secondary-soft);
  animation: vfx-turn-core var(--vfx-turn-life) cubic-bezier(.14,.92,.26,1) both;
}

.vfx-turn-link {
  left: var(--vfx-turn-source-x);
  top: var(--vfx-turn-source-y);
  width: var(--vfx-turn-link-distance);
  height: 2px;
  transform-origin: 0 50%;
  transform: rotate(var(--vfx-turn-link-angle)) scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, transparent 0 4%, var(--vfx-turn-secondary) 16%, var(--vfx-turn-primary) 72%, transparent 100%);
  box-shadow: 0 0 7px var(--vfx-turn-primary-soft);
}

.vfx-turn-target .vfx-turn-link {
  animation: vfx-turn-link var(--vfx-turn-life) cubic-bezier(.16,.8,.2,1) both;
}

.vfx-turn-link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(20%, -50%) rotate(45deg);
  border-top: 2px solid var(--vfx-turn-primary);
  border-right: 2px solid var(--vfx-turn-primary);
}

.vfx-turn-rail {
  left: var(--vfx-turn-x);
  top: var(--vfx-turn-y);
  width: var(--vfx-turn-span);
  height: 5px;
  transform: translate(-50%, -50%) scaleX(.22);
  transform-origin: 50% 50%;
  opacity: 0;
  border-top: 1px solid var(--vfx-turn-primary-soft);
  border-bottom: 1px solid var(--vfx-turn-secondary-soft);
  background: repeating-linear-gradient(90deg, transparent 0 7%, var(--vfx-turn-primary-soft) 7.4% 7.8%, transparent 8.2% 14%);
}

.vfx-turn-settlement .vfx-turn-rail,
.vfx-turn-handoff .vfx-turn-rail,
.vfx-turn-chain .vfx-turn-rail {
  animation: vfx-turn-rail var(--vfx-turn-life) cubic-bezier(.14,.86,.2,1) both;
}

.vfx-turn-chain .vfx-turn-rail {
  top: calc(var(--vfx-turn-y) + var(--vfx-turn-size) * .37);
  width: min(var(--vfx-turn-span), 260px);
}

.vfx-turn-rail-progress {
  inset: -1px auto -1px 0;
  width: 100%;
  transform: scaleX(var(--vfx-turn-progress));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--vfx-turn-secondary), var(--vfx-turn-primary));
  box-shadow: 0 0 9px var(--vfx-turn-primary-soft);
}

.vfx-turn-banner {
  left: var(--vfx-turn-x);
  top: calc(var(--vfx-turn-y) + var(--vfx-turn-size) * .38);
  min-width: 118px;
  max-width: min(72vw, 520px);
  padding: 7px 16px 6px;
  transform: translate(-50%, -50%) scale(.88);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  border-left: 1px solid var(--vfx-turn-primary);
  border-right: 1px solid var(--vfx-turn-primary);
  background: linear-gradient(90deg, transparent, rgba(2, 11, 20, .82) 18% 82%, transparent);
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.7));
  animation: vfx-turn-banner var(--vfx-turn-life) cubic-bezier(.14,.86,.2,1) both;
}

.vfx-turn-settlement .vfx-turn-banner,
.vfx-turn-handoff .vfx-turn-banner {
  top: calc(var(--vfx-turn-y) + 34px);
  min-width: min(var(--vfx-turn-span), 360px);
  padding-block: 9px 8px;
}

.vfx-turn-chain .vfx-turn-banner {
  top: calc(var(--vfx-turn-y) + var(--vfx-turn-size) * .48);
  padding-block: 5px 4px;
}

.vfx-turn-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f5fcff;
  font: 800 clamp(11px, 1.05vw, 15px)/1.1 system-ui, "Microsoft YaHei", sans-serif;
  letter-spacing: .16em;
  text-shadow: 0 0 8px var(--vfx-turn-primary), 0 2px 4px #000;
}

.vfx-turn-settlement .vfx-turn-label,
.vfx-turn-handoff .vfx-turn-label {
  font-size: clamp(14px, 1.35vw, 19px);
  letter-spacing: .22em;
}

.vfx-turn-counter {
  display: block;
  min-height: 8px;
  margin-top: 3px;
  color: var(--vfx-turn-secondary);
  font: 700 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .18em;
  opacity: .88;
}

.vfx-turn-confirm .vfx-turn-focus {
  animation: vfx-turn-confirm-punch var(--vfx-turn-life) cubic-bezier(.14,.86,.2,1) both;
}

.vfx-turn-target .vfx-turn-brackets {
  inset: 2%;
}

.vfx-turn-target .vfx-turn-ring-b {
  border-style: solid;
  border-color: var(--vfx-turn-secondary);
}

.vfx-turn-settlement .vfx-turn-field,
.vfx-turn-handoff .vfx-turn-field {
  width: var(--vfx-turn-span);
  height: min(32vh, 240px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, var(--vfx-turn-primary-soft), transparent 66%),
    linear-gradient(90deg, transparent, var(--vfx-turn-secondary-soft), transparent);
}

.vfx-turn-settlement .vfx-turn-focus,
.vfx-turn-handoff .vfx-turn-focus {
  width: 104px;
  height: 104px;
}

.vfx-turn-settlement .vfx-turn-brackets,
.vfx-turn-handoff .vfx-turn-brackets {
  inset: 18%;
}

.vfx-turn-chain.is-final {
  --vfx-turn-primary: #ffbc69;
  --vfx-turn-secondary: #fff0ad;
}

.vfx-turn-chain.is-final .vfx-turn-brackets {
  filter: drop-shadow(0 0 10px var(--vfx-turn-primary));
}

@keyframes vfx-turn-root {
  0% { opacity: 0; }
  7%, 76% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes vfx-turn-field {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.58) rotate(-8deg); }
  16% { opacity: .72; }
  50% { opacity: .3; transform: translate(-50%, -50%) scale(1.04) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(5deg); }
}

@keyframes vfx-turn-ring-a {
  0% { opacity: 0; transform: scale(.42) rotate(-34deg); }
  18% { opacity: .94; }
  64% { opacity: .46; transform: scale(1) rotate(7deg); }
  100% { opacity: 0; transform: scale(1.08) rotate(16deg); }
}

@keyframes vfx-turn-ring-b {
  0% { opacity: 0; transform: scale(1.28) rotate(38deg); }
  22% { opacity: .78; }
  66% { opacity: .34; transform: scale(.96) rotate(-10deg); }
  100% { opacity: 0; transform: scale(.9) rotate(-18deg); }
}

@keyframes vfx-turn-brackets {
  0% { opacity: 0; transform: scale(1.34); }
  17% { opacity: 1; transform: scale(.94); }
  36%, 72% { opacity: .84; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes vfx-turn-core {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.2); }
  16% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.1); }
  54% { opacity: .62; transform: translate(-50%, -50%) rotate(135deg) scale(.86); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(225deg) scale(.56); }
}

@keyframes vfx-turn-link {
  0% { opacity: 0; transform: rotate(var(--vfx-turn-link-angle)) scaleX(0); }
  18% { opacity: .95; transform: rotate(var(--vfx-turn-link-angle)) scaleX(1); }
  56% { opacity: .58; transform: rotate(var(--vfx-turn-link-angle)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--vfx-turn-link-angle)) scaleX(.92); }
}

@keyframes vfx-turn-rail {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.18); }
  18% { opacity: .9; transform: translate(-50%, -50%) scaleX(1); }
  70% { opacity: .56; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.94); }
}

@keyframes vfx-turn-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.78); letter-spacing: .24em; }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  28%, 74% { opacity: .96; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.98); }
}

@keyframes vfx-turn-confirm-punch {
  0% { transform: translate(-50%, -50%) scale(.76); }
  18% { transform: translate(-50%, -50%) scale(1.06); }
  35%, 100% { transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 720px) {
  .vfx-turn-banner {
    max-width: min(78vw, 290px);
    padding-inline: 12px;
  }

  .vfx-turn-settlement .vfx-turn-banner,
  .vfx-turn-handoff .vfx-turn-banner {
    top: calc(var(--vfx-turn-y) + 28px);
  }

  .vfx-turn-label {
    font-size: 11px;
    letter-spacing: .12em;
  }

  .vfx-turn-settlement .vfx-turn-label,
  .vfx-turn-handoff .vfx-turn-label {
    font-size: 14px;
    letter-spacing: .15em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vfx-turn-cadence,
  .vfx-turn-cadence * {
    animation-duration: 420ms !important;
  }

  .vfx-turn-field,
  .vfx-turn-link {
    display: none !important;
  }
}