.card[data-pay-kind] > :is(.pay-pill, .pay-dies) {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-1) var(--ease-inout);
}
.card[data-pay-preview] > :is(.pay-pill, .pay-dies) { opacity: 1; transition-duration: var(--motion-2); }


.card[data-pay-preview],
.stage .battlefield-half > .row-of-cards > .card[data-pay-preview] { z-index: 6; }

.card[data-pay-kind="exhaust"],
.card[data-pay-kind="return"],
.card[data-pay-kind="recycle"] {
  transition:
    transform var(--motion-2) var(--ease-standard),
    opacity var(--motion-2) var(--ease-standard),
    rotate var(--motion-3) var(--ease-spring),
    translate var(--motion-2) var(--ease-emphasis);
}

.card[data-pay-preview="exhaust"]:not(.exhausted):not(.at-loose) { rotate: var(--exhaust-pay-turn); }

.card[data-pay-preview="exhaust"]:not(.exhausted):not(.at-loose) :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks, .pay-pill) { rotate: calc(-1 * var(--exhaust-pay-turn)); }
.card[data-pay-kind="exhaust"] .pay-pill { transition: opacity var(--motion-1) var(--ease-inout), rotate var(--motion-3) var(--ease-spring); }

.card[data-pay-preview="return"] {
  translate: 0 8px;
  outline: 2px dashed var(--ink-2);
  outline-offset: 1px;
}

.card[data-pay-preview="recycle"] {
  translate: 0 -6px;
  box-shadow: 0 0 0 2px var(--power-ink), 0 0 14px rgba(195, 156, 232, 0.7);
}


.card > .pay-pill {
  top: 4px;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink-1);
  color: var(--surface-ground);
  font: 700 calc(12px / var(--fit)) / 1.35 var(--font-ui);
  white-space: nowrap;
}
.card > .pay-pill .pay-pill-icon { width: 1.1em; height: 1.1em; flex: none; }

.card[data-pay-kind="exhaust"] > .pay-pill { background: var(--decide); }
.card[data-pay-kind="recycle"] > .pay-pill { background: var(--power-ink); }


.card[data-pay-preview="kill"] > .cf::before { opacity: var(--pay-wash); transition-duration: var(--motion-2); }
.card[data-pay-kind] { --pay-wash: 0.3; --pay-seal: 22px; }
.card > .pay-dies {
  inset: 0;
  container-type: size;
  overflow: hidden;
  border-radius: inherit;
}

.pay-tear {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 141%;
  height: 9px;
  translate: -50% -50%;
  rotate: 54deg;
  scale: 0 1;
  background:
    linear-gradient(90deg, transparent, var(--ink-1) 22%, var(--ink-1) 78%, transparent) center / 100% 3px no-repeat,
    linear-gradient(90deg, transparent, var(--bad) 16%, var(--bad) 84%, transparent);
  transition: scale var(--motion-1) var(--ease-exit);
}
.pay-tear-2 { rotate: -54deg; }
@supports (width: hypot(1px, 1px)) {
  .pay-tear {
    width: hypot(100cqw, 100cqh);
    rotate: atan2(100cqh, 100cqw);
  }
  .pay-tear-2 { rotate: calc(-1 * atan2(100cqh, 100cqw)); }
}

.card[data-pay-preview="kill"] .pay-tear { scale: 1 1; transition: scale var(--motion-2) var(--ease-emphasis); }
.card[data-pay-preview="kill"] .pay-tear-2 { transition-delay: var(--stagger); }
.pay-dies .mark-seal {
  --seal: var(--pay-seal);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -62%;
}
.pay-dies .mark-seal .seal-hex { stroke: var(--bad); stroke-width: 1.6; }
.pay-chip {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--pay-seal) * 0.38 + 2px);
  translate: -50% 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bad);
  color: var(--ink-1);
  font: 800 calc(12px / var(--fit)) / 1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}


:root[data-motion="reduce"] .card[data-pay-kind],
:root[data-motion="reduce"] .card[data-pay-kind] :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks),
:root[data-motion="reduce"] .card[data-pay-kind] > .cf::before,
:root[data-motion="reduce"] .card[data-pay-kind] > :is(.pay-pill, .pay-dies),
:root[data-motion="reduce"] .pay-tear,
:root[data-motion="reduce"] .card[data-pay-preview="kill"] .pay-tear { transition: none; }
:root[data-motion="reduce"] .pay-tear,
:root[data-motion="reduce"] .card[data-pay-preview="kill"] .pay-tear { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .card[data-pay-kind],
  :root:not([data-motion="full"]) .card[data-pay-kind] :is(.mark-slot, .cf-might, .cf-cost, .ab-badges, .card-line.marks),
  :root:not([data-motion="full"]) .card[data-pay-kind] > .cf::before,
  :root:not([data-motion="full"]) .card[data-pay-kind] > :is(.pay-pill, .pay-dies),
  :root:not([data-motion="full"]) .pay-tear,
  :root:not([data-motion="full"]) .card[data-pay-preview="kill"] .pay-tear { transition: none; }
  :root:not([data-motion="full"]) .pay-tear,
  :root:not([data-motion="full"]) .card[data-pay-preview="kill"] .pay-tear { scale: 1 1; }
}