/* Small gameplay-state indicators shared by the main app. */

/* Full-width deployment warning. It starts hidden in markup so the tutorial
   iframe can never flash it before its query-scoped suppression runs. */
.testnet-beta-banner {
  position: relative;
  z-index: 1100;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 1.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid rgba(255, 213, 111, 0.58);
  background:
    linear-gradient(90deg, rgba(78, 9, 25, 0.98), rgba(129, 19, 39, 0.98) 50%, rgba(78, 9, 25, 0.98));
  box-shadow: 0 4px 18px rgba(41, 4, 13, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  color: #ffe29a;
  font: 950 0.62rem/1.1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-align: center;
}

.testnet-beta-banner[hidden] { display: none !important; }

.testnet-beta-banner__dot {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 0.42rem;
  border-radius: 50%;
  background: #ffd56f;
  box-shadow: 0 0 8px rgba(255, 213, 111, 0.82);
}

.testnet-beta-banner__faucet {
  display: inline-flex;
  min-height: 1.15rem;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.42rem;
  border: 1px solid rgba(134, 239, 172, 0.65);
  border-radius: 999px;
  background: rgba(20, 83, 45, 0.48);
  color: #a7f3d0;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.testnet-beta-banner__faucet:hover,
.testnet-beta-banner__faucet:focus-visible {
  border-color: #86efac;
  background: rgba(22, 101, 52, 0.74);
  color: #dcfce7;
  transform: translateY(-1px);
}

.testnet-beta-banner__faucet:focus-visible {
  outline: 2px solid rgba(134, 239, 172, 0.72);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .testnet-beta-banner {
    flex-wrap: wrap;
    row-gap: 0.22rem;
  }
}

html[data-degenerus-tutorial] .testnet-beta-banner { display: none !important; }

/* Mobile WalletConnect recovery. The automatic app link remains the primary
   path; this compact fixed notice is the fresh-tap fallback when Android or
   iOS leaves the browser foregrounded with an approval already in the wallet. */
.wallet-approval-handoff {
  position: fixed;
  z-index: 3200;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: grid;
  box-sizing: border-box;
  width: min(calc(100vw - 1.5rem), 27rem);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.62rem;
  padding: 0.62rem;
  border: 1px solid rgba(167, 139, 250, 0.72);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 50%, rgba(124, 58, 237, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(22, 18, 45, 0.98), rgba(8, 10, 20, 0.99));
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.58), inset 0 0 18px rgba(139, 92, 246, 0.1);
  color: #f5f3ff;
  font-family: "Inter", system-ui, sans-serif;
}

.wallet-approval-handoff[hidden] { display: none !important; }

.wallet-approval-handoff__mark {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(196, 181, 253, 0.55);
  border-radius: 50%;
  background: rgba(91, 33, 182, 0.42);
  color: #ddd6fe;
  font-size: 1rem;
  font-weight: 950;
}

.wallet-approval-handoff__copy {
  display: grid;
  min-width: 0;
  gap: 0.16rem;
}

.wallet-approval-handoff__copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-approval-handoff__copy small {
  color: #c4b5fd;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
}

.wallet-approval-handoff__open,
.wallet-approval-handoff__dismiss {
  min-height: 2.5rem;
  border-radius: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 950;
  cursor: pointer;
}

.wallet-approval-handoff__open {
  padding: 0.45rem 0.7rem;
  border: 1px solid #c4b5fd;
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 0.64rem;
  letter-spacing: 0.055em;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.28);
}

.wallet-approval-handoff__dismiss {
  width: 2.5rem;
  padding: 0;
  border: 1px solid rgba(196, 181, 253, 0.25);
  background: rgba(15, 12, 31, 0.72);
  color: #c4b5fd;
  font-size: 1.05rem;
}

.wallet-approval-handoff :is(button:hover, button:focus-visible) {
  border-color: #ede9fe;
  filter: brightness(1.12);
}

.wallet-approval-handoff button:focus-visible {
  outline: 2px solid #f5f3ff;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .wallet-approval-handoff {
    right: max(0.5rem, env(safe-area-inset-right));
    left: max(0.5rem, env(safe-area-inset-left));
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    width: auto;
    gap: 0.48rem;
  }

  .wallet-approval-handoff__copy small { display: none; }
}

/* The quest action sheet is also a real purchase surface. Keep the boon's
   exact incremental value visible when that shortcut submits the buy. */
body.layout-basic .qst-action-boon {
  position: relative;
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  gap: 0.62rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid rgba(var(--boon-rgb, 245, 166, 35), 0.52);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 50%, rgba(var(--boon-rgb, 245, 166, 35), 0.18), transparent 34%),
    rgba(5, 7, 16, 0.68);
  box-shadow: inset 0 0 16px rgba(var(--boon-rgb, 245, 166, 35), 0.08);
}
body.layout-basic .qst-action-boon[hidden] { display: none !important; }
body.layout-basic .qst-action-boon[data-boon-product="purchase"] {
  --boon-rgb: 245, 166, 35;
  --boon-ink: #ffd98a;
}
body.layout-basic .qst-action-boon[data-boon-product="lootbox"] {
  --boon-rgb: 167, 139, 250;
  --boon-ink: #ddd6fe;
}
body.layout-basic .qst-action-boon > boon-product-indicator {
  position: relative;
  inset: auto;
  flex: 0 0 1.72rem;
}
body.layout-basic .qst-action-boon > span { display: grid; gap: 0.08rem; min-width: 0; }
body.layout-basic .qst-action-boon small {
  color: var(--boon-ink, #ffd98a);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}
body.layout-basic .qst-action-boon strong {
  color: #f8fafc;
  font: 900 0.82rem/1.1 var(--font-mono, "Roboto Mono", monospace);
  letter-spacing: 0.025em;
}

/* Active boons sit beside the exact control they modify. */
boon-product-indicator {
  --boon-logo: none;
  position: relative;
  display: inline-grid;
  box-sizing: border-box;
  width: 1.58rem;
  height: 1.58rem;
  flex: 0 0 1.58rem;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: help;
}

boon-product-indicator[hidden] { display: none !important; }

/* The emblem is data-driven: no live boon means no data-boon-product, and the
   art must not paint even if a host component un-hides the element. Guards the
   whole class of "bare arrow beside a control" bugs, not one caller. */
boon-product-indicator:not([data-boon-product])::before,
boon-product-indicator:not([data-boon-product])::after { display: none !important; }

boon-product-indicator::before {
  position: absolute;
  inset: 0.03rem 0.14rem 0.04rem;
  display: block;
  background: linear-gradient(145deg, #f8fff9 0 8%, var(--boon-amount, #93c5fd) 34% 100%);
  clip-path: polygon(50% 0, 94% 39%, 69% 39%, 69% 100%, 31% 100%, 31% 39%, 6% 39%);
  content: "";
  filter:
    drop-shadow(0 0 3px rgba(var(--boon-amount-rgb, 147, 197, 253), 0.82))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
  transform-origin: 50% 50%;
}

boon-product-indicator::after {
  position: absolute;
  z-index: 1;
  bottom: 0.08rem;
  left: 50%;
  width: 52%;
  height: 52%;
  background: var(--boon-logo, none) center / contain no-repeat;
  content: "";
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.92));
  translate: -50% 0;
}

boon-product-indicator[data-boon-direction="down"]::before { transform: rotate(180deg); }
boon-product-indicator[data-boon-direction="down"]::after { top: 0.08rem; bottom: auto; }

/* Pass-price reductions point down. Their arrow steps from red through silver
   to gold as the discount tier increases. */
body.layout-basic boon-product-indicator[data-boon-direction="down"] {
  --boon-amount: #ef4444;
  --boon-amount-rgb: 239, 68, 68;
  --boon-logo: url('/badges-circular/crypto_06_ethereum_green.svg');
}
body.layout-basic boon-product-indicator[data-boon-direction="down"][data-boon-strength="mid"] {
  --boon-amount: #cbd5e1;
  --boon-amount-rgb: 203, 213, 225;
}
body.layout-basic boon-product-indicator[data-boon-direction="down"][data-boon-strength="high"] {
  --boon-amount: #facc15;
  --boon-amount-rgb: 250, 204, 21;
}

/* A boon has no purchased amount, so its emblem deliberately uses MEDIUM. */
boon-product-indicator[data-boon-product="lootbox"] { --boon-logo: url('/app/assets/lootbox/degenerus-lootbox-case-medium-v14-locked-front.webp'); }
boon-product-indicator[data-boon-product="coinflip"] { --boon-logo: url('/whitepaper/flame-logo-split.svg'); }
boon-product-indicator[data-boon-product="quests"] { --boon-logo: url('/app/assets/boons/boon-quest-micro.svg'); }
boon-product-indicator[data-boon-product="decimator"] { --boon-logo: url('/app/assets/decimator-draw-mark.svg'); }
boon-product-indicator[data-boon-product="degenerette-eth"] { --boon-logo: url('/badges-circular/crypto_06_ethereum_green.svg'); }
boon-product-indicator[data-boon-product="degenerette-flip"] { --boon-logo: url('/whitepaper/flame-logo-split.svg'); }
boon-product-indicator[data-boon-product="degenerette-wwxrp"] { --boon-logo: url('/shared/coinflip-face-red.svg'); }

/* A quest shield is the product itself, not an amount increase. Use the shield
   silhouette at full size and remove the generic boon arrow behind it. */
boon-product-indicator[data-boon-product="quests"]::before { display: none; }
boon-product-indicator[data-boon-product="quests"]::after {
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.62));
  translate: none;
}

boon-product-indicator:focus-visible {
  outline: 2px solid rgba(134, 239, 172, 0.9);
  outline-offset: 2px;
}

/* In the live UI the emblem is always a badge on a control, never another
   flex/grid child. Keeping it out of flow means activating a boon cannot grow
   a row, widen a title, create a grid track, or move an input. */
body.layout-basic boon-product-indicator {
  position: absolute;
  z-index: 5;
  display: grid;
  flex: none;
  margin: 0;
}

/* Game-style objective waypoint. Default to the full left-pointing quote
   bubble so the tail remains unmistakable at control-badge size; placements
   on an action's left edge explicitly select the mirrored right-facing art. */
quest-objective-indicator {
  --quest-objective-art: url('/app/assets/quest-objective-tail-left.svg');
  position: relative;
  display: inline-grid;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  place-items: center;
  cursor: help;
  animation: quest-objective-pulse 1.8s ease-in-out infinite alternate;
}

quest-objective-indicator[hidden] { display: none !important; }

quest-objective-indicator::before {
  position: absolute;
  inset: 0;
  background: var(--quest-objective-art) center / contain no-repeat;
  content: "";
}

quest-objective-indicator[data-quest-pointer="left"] {
  --quest-objective-art: url('/app/assets/quest-objective-tail-left.svg');
}

/* Point the callout back toward controls that sit below and to its left. */
quest-objective-indicator[data-quest-pointer="bottom-left"] {
  --quest-objective-art: url('/app/assets/quest-objective-tail-bottom-left.svg');
}

quest-objective-indicator[data-quest-pointer="right"] {
  --quest-objective-art: url('/app/assets/quest-objective-tail-right.svg');
}

quest-objective-indicator[data-quest-count]:not([data-quest-count="1"])::after {
  position: absolute;
  right: -0.25rem;
  bottom: -0.22rem;
  display: grid;
  min-width: 0.72rem;
  height: 0.72rem;
  place-items: center;
  padding: 0 0.08rem;
  border: 1px solid #090b11;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff7d6;
  content: attr(data-quest-count);
  font: 950 0.47rem/1 "Roboto Mono", monospace;
}

quest-objective-indicator:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.9);
  outline-offset: 2px;
}

/* Objective marks use the same zero-footprint rule as boons. Their hosts own
   a small corner/lane; the custom element never becomes another flex item,
   grid item, line box, or source of wrapping. */
body.layout-basic quest-objective-indicator {
  position: absolute;
  z-index: 4;
  display: grid;
  flex: none;
  margin: 0;
  cursor: pointer;
  /* Enlarge the marker visually without changing any host's measured box. */
  scale: 1.1;
}

/* Only ambient-motion.js's explicit decorative targets receive this marker.
   Pause the referral coin's faces together, and include button sheen pseudos. */
[data-ambient-paused],
[data-ambient-paused]::before,
[data-ambient-paused]::after,
[data-ambient-paused] * {
  animation-play-state: paused !important;
}

@keyframes quest-objective-pulse {
  from { filter: brightness(0.96); transform: translateY(0); }
  to { filter: brightness(1.13); transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  quest-objective-indicator { animation: none; }
}

/* Context placements keep the gold objective marker separate from the larger
   tier arrow when a control has both an active boon and an unfinished quest. */
/* Purchase rows own a fixed accessory lane between their label and stepper.
   Boon and quest states therefore remain two readable badges instead of
   colliding into a single diagonal glyph cluster. */
body.layout-basic .app-decimator-panel .dec-input-accessories {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 7rem;
  display: block;
  width: 3.05rem;
  height: 1.45rem;
  pointer-events: none;
  translate: 0 -50%;
}

body.layout-basic .app-decimator-panel .dec-input-accessories > boon-product-indicator {
  top: 0;
  left: 0;
  width: 1.42rem;
  height: 1.42rem;
  animation: none;
  pointer-events: auto;
}

body.layout-basic .app-decimator-panel .dec-input-accessories > quest-objective-indicator {
  top: 0.14rem;
  right: 0;
  width: 1.08rem;
  height: 1.08rem;
  pointer-events: auto;
}

body.layout-basic .app-decimator-panel .dec-foil-label {
  position: relative;
  width: fit-content;
  padding-left: 1.32rem;
  justify-self: start;
}

body.layout-basic .app-decimator-panel .dec-foil-label > quest-objective-indicator {
  --quest-objective-art: url('/app/assets/quest-objective-tail-left.svg');
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.02rem;
  height: 1.02rem;
  translate: 0 -50%;
}

body.layout-basic .app-decimator-panel .dec-flip-balance__action > .dec-redeem-quest {
  position: absolute;
  z-index: 3;
  top: -0.32rem;
  left: calc(100% + 0.43rem);
  width: 1.18rem;
  height: 1.18rem;
  flex-basis: 1.18rem;
  border-color: rgba(76, 29, 149, 0.62);
}

body.layout-basic .dbb__burn > quest-objective-indicator {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0.42rem;
  width: 1.2rem;
  height: 1.2rem;
  translate: 0 -50%;
}

body.layout-basic .dbb__burn:has(> quest-objective-indicator:not([hidden])) {
  padding-right: 2rem;
}

body.layout-basic .deg-currency-option > quest-objective-indicator {
  --quest-objective-art: url('/app/assets/quest-objective-tail-right.svg');
  z-index: 2;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.18rem;
  height: 1.18rem;
}

body.layout-basic .deg-referral-card__forever {
  position: relative;
  width: fit-content;
  justify-self: start;
}

body.layout-basic .deg-referral-card__forever > quest-objective-indicator {
  position: absolute;
  z-index: 3;
  top: -0.5rem;
  right: auto;
  left: calc(100% + 0.35rem);
  width: 1.18rem;
  height: 1.18rem;
}

@media (max-width: 520px) {
  body.layout-basic .deg-referral-card__forever { position: static; }
  body.layout-basic .deg-referral-card__forever > quest-objective-indicator {
    top: -0.18rem;
    right: -0.12rem;
    left: auto;
  }
}

body.layout-basic .app-decimator-panel .dec-input-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.16rem 0.28rem;
}

body.layout-basic .app-decimator-panel .dec-input-accessories > boon-product-indicator[variant="purchase-control"]::before { display: block; }

/* Coinflip badges sit inside their positioned cards so they remain fully
   visible without reserving a line of dialog or Tomorrow-row layout. */
body.layout-basic .df-add-bet-dialog .df-boon-indicator {
  top: 0.52rem;
  right: 2.9rem;
  width: 1.42rem;
  height: 1.42rem;
  margin: 0;
}

body.layout-basic .app-pass-section .pass-section-title {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-self: start;
  flex-wrap: wrap;
  gap: 0.22rem;
}

body.layout-basic .app-pass-section .pass-section-title boon-product-indicator {
  top: 50%;
  left: calc(100% + 0.22rem);
  width: 1.36rem;
  height: 1.36rem;
  translate: 0 -50%;
}

body.layout-basic .pari-book__title,
body.layout-basic .qst-header h2 {
  position: relative;
}

body.layout-basic .pari-book__title boon-product-indicator,
body.layout-basic .qst-header h2 boon-product-indicator {
  top: 50%;
  left: calc(100% + 0.24rem);
  width: 1.34rem;
  height: 1.34rem;
  translate: 0 -50%;
}

body.layout-basic .pass-deity-title-lockup {
  position: relative;
}

body.layout-basic .pass-deity-title-lockup boon-product-indicator {
  top: -0.28rem;
  right: -0.18rem;
  width: 1.42rem;
  height: 1.42rem;
}

body.layout-basic .app-pass-section :is(.pass-product-checkout, .pass-cost-action) {
  position: relative;
  overflow: visible;
}

body.layout-basic .app-pass-section :is(.pass-product-checkout, .pass-cost-action)
  > boon-product-indicator.pass-cost-boon {
  z-index: 8;
  top: 50%;
  right: 0.44rem;
  width: 0.82rem;
  height: 1.02rem;
  translate: 0 -50%;
}

body.layout-basic .app-pass-section :is(.pass-product-checkout, .pass-cost-action)
  > boon-product-indicator.pass-cost-boon::before {
  inset: 0.02rem 0.06rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.88));
}

/* The price already names ETH and the applied BOON, so another currency badge
   inside this tiny marker only reads as a detached square. */
body.layout-basic .app-pass-section :is(.pass-product-checkout, .pass-cost-action)
  > boon-product-indicator.pass-cost-boon::after {
  display: none;
}

body.layout-basic .app-pass-section :is(.pass-product-row, .pass-deity-section).has-active-boon
  :is(.pass-lazy-buy, .pass-whale-buy, .pass-deity-open, .pass-deity-buy) {
  padding-right: 1.55rem;
}

/* Purchase labels become full grid tracks on phones. Keep the anchored badges
   next to the visible label text rather than at (and partly beyond) the card's
   far edge. This changes no row height or input width. */
@media (max-width: 520px) {
  body.layout-basic .app-decimator-panel .dec-input-label {
    width: fit-content;
    justify-self: start;
  }
  body.layout-basic .app-decimator-panel .dec-input-accessories {
    top: 0.36rem;
    right: 0.52rem;
    translate: none;
  }
}

/* Fakeout ending cue: after the coin visibly settles on the wrong face, the
   same Reverse card used by the real control flies in from above-right and
   taps its edge. Each card waits for a brief beat after its mimicked normal
   result completes; the shorter flight preserves the original impact beat. */
body.layout-basic .df-fakeout-reverse-card {
  --df-fakeout-delay: 3300ms;
  --df-fakeout-duration: 600ms;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: block;
  width: clamp(34px, 4vw, 42px);
  aspect-ratio: 0.66;
  opacity: 0;
  pointer-events: none;
  transform-origin: 15% 55%;
  animation: df-fakeout-reverse-tap var(--df-fakeout-duration) linear
    var(--df-fakeout-delay) 1 both;
  will-change: transform, opacity;
}

body.layout-basic .df-fakeout-reverse-card__art {
  display: block;
  width: 100%;
  height: 100%;
}

body.layout-basic .df-fakeout-reverse-card--to-eth .df-fakeout-reverse-card__art {
  filter: hue-rotate(258deg) saturate(0.92) brightness(0.9)
    drop-shadow(0 7px 9px rgba(22, 163, 74, 0.42));
}

body.layout-basic .df-fakeout-reverse-card--to-wwxrp .df-fakeout-reverse-card__art {
  filter: hue-rotate(139deg) saturate(1.2) brightness(0.96)
    drop-shadow(0 7px 9px rgba(220, 38, 38, 0.44));
}

body.layout-basic .df-fakeout-reverse-card::after {
  position: absolute;
  left: -0.28rem;
  top: 47%;
  width: 0.68rem;
  aspect-ratio: 1;
  border: 2px solid #fff1a8;
  border-radius: 50%;
  box-shadow: 0 0 9px #ffd54a;
  content: "";
  opacity: 0;
  animation: df-fakeout-card-impact var(--df-fakeout-duration) linear
    var(--df-fakeout-delay) 1 both;
}

@keyframes df-fakeout-reverse-tap {
  0% { opacity: 0; transform: translate3d(150px, -92px, 0) rotate(28deg) scale(0.55); }
  10% { opacity: 1; transform: translate3d(112px, -66px, 0) rotate(20deg) scale(0.72); }
  38% { opacity: 1; transform: translate3d(51px, -13px, 0) rotate(-9deg) scale(1.05); }
  50% { opacity: 1; transform: translate3d(39px, -2px, 0) rotate(-16deg) scale(0.98); }
  60% { opacity: 1; transform: translate3d(57px, -13px, 0) rotate(-4deg) scale(1.08); }
  100% { opacity: 0; transform: translate3d(145px, -82px, 0) rotate(25deg) scale(0.68); }
}

@keyframes df-fakeout-card-impact {
  0%, 47% { opacity: 0; transform: scale(0.25); }
  50% { opacity: 1; transform: scale(0.45); }
  65%, 100% { opacity: 0; transform: scale(2); }
}

/* The profile's more likely normal result crosses the exact stopping frame of
   the opposite normal ending, then keeps its velocity through a longer turn.
   Only the genuine result stops on that shared frame. */
body.layout-basic .df-reveal-bias--win-heavy.df-reveal-ending--win {
  --df-ending-animation: df-reveal-end-long-win;
  --df-ending-duration: 1350ms;
}
body.layout-basic .df-reveal-bias--win-heavy.df-reveal-ending--win-to-loss {
  --df-ending-animation: df-reveal-end-long-win-to-loss;
  --df-ending-duration: 2250ms;
}
body.layout-basic .df-reveal-bias--loss-heavy.df-reveal-ending--loss {
  --df-ending-animation: df-reveal-end-long-loss;
  --df-ending-duration: 1350ms;
}
body.layout-basic .df-reveal-bias--loss-heavy.df-reveal-ending--loss-to-win {
  --df-ending-animation: df-reveal-end-long-loss-to-win;
  --df-ending-duration: 2250ms;
}

@keyframes df-reveal-end-long-win {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  10.37037% { transform: translate3d(0, -3px, 0) rotateZ(0.4deg) rotateX(2077.23deg) scale(1.01); }
  20.740741% { transform: translate3d(0, -8px, 0) rotateZ(1deg) rotateX(2095.29deg) scale(1.03); }
  31.111111% { transform: translate3d(0, -10px, 0) rotateZ(0.6deg) rotateX(2118.73deg) scale(1.04); }
  40% { transform: translate3d(0, -7px, 0) rotateZ(-0.3deg) rotateX(2138.98deg) scale(1.03); }
  45.925926% { transform: translate3d(0, -3px, 0) rotateZ(-0.25deg) rotateX(2150.77deg) scale(1.012); }
  50.37037% { transform: translate3d(0, -0.6px, 0) rotateZ(-0.05deg) rotateX(2157.99deg) scale(1.003); }
  51.851852% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  56.296296% { transform: translate3d(0, -1px, 0) rotateZ(-0.3deg) rotateX(2168.97deg) scale(1.005); }
  62.222222% { transform: translate3d(0, -3px, 0) rotateZ(-0.8deg) rotateX(2189.57deg) scale(1.015); }
  68.888889% { transform: translate3d(0, -6px, 0) rotateZ(-1.1deg) rotateX(2220.7deg) scale(1.03); }
  76.296296% { transform: translate3d(0, -8px, 0) rotateZ(-0.6deg) rotateX(2259.61deg) scale(1.04); }
  83.703704% { transform: translate3d(0, -7px, 0) rotateZ(0.2deg) rotateX(2296.74deg) scale(1.035); }
  90.37037% { transform: translate3d(0, -4px, 0) rotateZ(0.4deg) rotateX(2323.24deg) scale(1.02); }
  95.555556% { transform: translate3d(0, -2px, 0) rotateZ(0.2deg) rotateX(2336.16deg) scale(1.01); }
  98.518519% { transform: translate3d(0, -0.5px, 0) rotateZ(0.05deg) rotateX(2339.56deg) scale(1.002); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
}
@keyframes df-reveal-end-long-loss {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  10.37037% { transform: translate3d(0, -3px, 0) rotateZ(-0.4deg) rotateX(2094.71deg) scale(1.01); }
  20.740741% { transform: translate3d(0, -8px, 0) rotateZ(-1deg) rotateX(2154.93deg) scale(1.03); }
  31.111111% { transform: translate3d(0, -10px, 0) rotateZ(-0.6deg) rotateX(2229.8deg) scale(1.04); }
  40% { transform: translate3d(0, -7px, 0) rotateZ(0.3deg) rotateX(2289.81deg) scale(1.03); }
  45.925926% { transform: translate3d(0, -3px, 0) rotateZ(0.25deg) rotateX(2320.79deg) scale(1.012); }
  50.37037% { transform: translate3d(0, -0.6px, 0) rotateZ(0.05deg) rotateX(2336.51deg) scale(1.003); }
  51.851852% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  56.296296% { transform: translate3d(0, -1px, 0) rotateZ(0.3deg) rotateX(2351.44deg) scale(1.005); }
  62.222222% { transform: translate3d(0, -3px, 0) rotateZ(0.8deg) rotateX(2373.86deg) scale(1.015); }
  68.888889% { transform: translate3d(0, -6px, 0) rotateZ(1.1deg) rotateX(2405.49deg) scale(1.03); }
  76.296296% { transform: translate3d(0, -8px, 0) rotateZ(0.6deg) rotateX(2443.59deg) scale(1.04); }
  83.703704% { transform: translate3d(0, -7px, 0) rotateZ(-0.2deg) rotateX(2479.19deg) scale(1.035); }
  90.37037% { transform: translate3d(0, -4px, 0) rotateZ(-0.4deg) rotateX(2504.28deg) scale(1.02); }
  95.555556% { transform: translate3d(0, -2px, 0) rotateZ(-0.2deg) rotateX(2516.41deg) scale(1.01); }
  98.518519% { transform: translate3d(0, -0.5px, 0) rotateZ(-0.05deg) rotateX(2519.59deg) scale(1.002); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
}
@keyframes df-reveal-end-long-win-to-loss {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  6.222222% { transform: translate3d(0, -3px, 0) rotateZ(0.4deg) rotateX(2077.23deg) scale(1.01); }
  12.444444% { transform: translate3d(0, -8px, 0) rotateZ(1deg) rotateX(2095.29deg) scale(1.03); }
  18.666667% { transform: translate3d(0, -10px, 0) rotateZ(0.6deg) rotateX(2118.73deg) scale(1.04); }
  24% { transform: translate3d(0, -7px, 0) rotateZ(-0.3deg) rotateX(2138.98deg) scale(1.03); }
  27.555556% { transform: translate3d(0, -3px, 0) rotateZ(-0.25deg) rotateX(2150.77deg) scale(1.012); }
  30.222222% { transform: translate3d(0, -0.6px, 0) rotateZ(-0.05deg) rotateX(2157.99deg) scale(1.003); }
  31.111111% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  33.777778% { transform: translate3d(0, -1px, 0) rotateZ(-0.3deg) rotateX(2168.97deg) scale(1.005); }
  37.333333% { transform: translate3d(0, -3px, 0) rotateZ(-0.8deg) rotateX(2189.57deg) scale(1.015); }
  41.333333% { transform: translate3d(0, -6px, 0) rotateZ(-1.1deg) rotateX(2220.7deg) scale(1.03); }
  45.777778% { transform: translate3d(0, -8px, 0) rotateZ(-0.6deg) rotateX(2259.61deg) scale(1.04); }
  50.222222% { transform: translate3d(0, -7px, 0) rotateZ(0.2deg) rotateX(2296.74deg) scale(1.035); }
  54.222222% { transform: translate3d(0, -4px, 0) rotateZ(0.4deg) rotateX(2323.24deg) scale(1.02); }
  57.333333% { transform: translate3d(0, -2px, 0) rotateZ(0.2deg) rotateX(2336.16deg) scale(1.01); }
  59.111111% { transform: translate3d(0, -0.5px, 0) rotateZ(0.05deg) rotateX(2339.56deg) scale(1.002); }
  60%, 75.555556% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  77.333333% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2340deg) scale(0.98); }
  95.555556% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2504deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
}
@keyframes df-reveal-end-long-loss-to-win {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  6.222222% { transform: translate3d(0, -3px, 0) rotateZ(-0.4deg) rotateX(2094.71deg) scale(1.01); }
  12.444444% { transform: translate3d(0, -8px, 0) rotateZ(-1deg) rotateX(2154.93deg) scale(1.03); }
  18.666667% { transform: translate3d(0, -10px, 0) rotateZ(-0.6deg) rotateX(2229.8deg) scale(1.04); }
  24% { transform: translate3d(0, -7px, 0) rotateZ(0.3deg) rotateX(2289.81deg) scale(1.03); }
  27.555556% { transform: translate3d(0, -3px, 0) rotateZ(0.25deg) rotateX(2320.79deg) scale(1.012); }
  30.222222% { transform: translate3d(0, -0.6px, 0) rotateZ(0.05deg) rotateX(2336.51deg) scale(1.003); }
  31.111111% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  33.777778% { transform: translate3d(0, -1px, 0) rotateZ(0.3deg) rotateX(2351.44deg) scale(1.005); }
  37.333333% { transform: translate3d(0, -3px, 0) rotateZ(0.8deg) rotateX(2373.86deg) scale(1.015); }
  41.333333% { transform: translate3d(0, -6px, 0) rotateZ(1.1deg) rotateX(2405.49deg) scale(1.03); }
  45.777778% { transform: translate3d(0, -8px, 0) rotateZ(0.6deg) rotateX(2443.59deg) scale(1.04); }
  50.222222% { transform: translate3d(0, -7px, 0) rotateZ(-0.2deg) rotateX(2479.19deg) scale(1.035); }
  54.222222% { transform: translate3d(0, -4px, 0) rotateZ(-0.4deg) rotateX(2504.28deg) scale(1.02); }
  57.333333% { transform: translate3d(0, -2px, 0) rotateZ(-0.2deg) rotateX(2516.41deg) scale(1.01); }
  59.111111% { transform: translate3d(0, -0.5px, 0) rotateZ(-0.05deg) rotateX(2519.59deg) scale(1.002); }
  60%, 75.555556% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  77.333333% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  95.555556% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
}

/* Rare multi-reversals are nested mimics, grouped by their apparent opening
   face rather than their final result. Normal ETH, 1×→WWXRP, 2×→ETH, and
   3×→WWXRP share the exact first 700ms; the opposite parity group does the
   same with Normal WWXRP. Every later card extends the previous branch's full
   prefix before toggling again. */
body.layout-basic .df-reveal-ending--double-to-win {
  --df-ending-animation: df-reveal-end-double-to-win;
  --df-ending-duration: 2500ms;
}
body.layout-basic .df-reveal-ending--double-to-loss {
  --df-ending-animation: df-reveal-end-double-to-loss;
  --df-ending-duration: 2500ms;
}
body.layout-basic .df-reveal-ending--triple-to-win {
  --df-ending-animation: df-reveal-end-triple-to-win;
  --df-ending-duration: 3400ms;
}
body.layout-basic .df-reveal-ending--triple-to-loss {
  --df-ending-animation: df-reveal-end-triple-to-loss;
  --df-ending-duration: 3400ms;
}

body.layout-basic .df-reveal-bias--win-heavy.df-reveal-ending--double-to-win {
  --df-ending-animation: df-reveal-end-long-double-to-win;
  --df-ending-duration: 3150ms;
}
body.layout-basic .df-reveal-bias--win-heavy.df-reveal-ending--triple-to-loss {
  --df-ending-animation: df-reveal-end-long-triple-to-loss;
  --df-ending-duration: 4050ms;
}
body.layout-basic .df-reveal-bias--loss-heavy.df-reveal-ending--double-to-loss {
  --df-ending-animation: df-reveal-end-long-double-to-loss;
  --df-ending-duration: 3150ms;
}
body.layout-basic .df-reveal-bias--loss-heavy.df-reveal-ending--triple-to-win {
  --df-ending-animation: df-reveal-end-long-triple-to-win;
  --df-ending-duration: 4050ms;
}

@keyframes df-reveal-end-double-to-win {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  5.6% { transform: translate3d(0, -3px, 0) rotateZ(-0.4deg) rotateX(2094.71deg) scale(1.01); }
  11.2% { transform: translate3d(0, -8px, 0) rotateZ(-1deg) rotateX(2154.93deg) scale(1.03); }
  16.8% { transform: translate3d(0, -10px, 0) rotateZ(-0.6deg) rotateX(2229.8deg) scale(1.04); }
  21.6% { transform: translate3d(0, -7px, 0) rotateZ(0.3deg) rotateX(2289.81deg) scale(1.03); }
  24.8% { transform: translate3d(0, -3px, 0) rotateZ(0.25deg) rotateX(2320.79deg) scale(1.012); }
  27.2% { transform: translate3d(0, -0.6px, 0) rotateZ(0.05deg) rotateX(2336.51deg) scale(1.003); }
  28% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  42% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  43.6% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2340deg) scale(0.98); }
  60% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2504deg) scale(1.03); }
  64%, 78% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  79.6% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  96% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
}

@keyframes df-reveal-end-double-to-loss {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  5.6% { transform: translate3d(0, -3px, 0) rotateZ(0.4deg) rotateX(2077.23deg) scale(1.01); }
  11.2% { transform: translate3d(0, -8px, 0) rotateZ(1deg) rotateX(2095.29deg) scale(1.03); }
  16.8% { transform: translate3d(0, -10px, 0) rotateZ(0.6deg) rotateX(2118.73deg) scale(1.04); }
  21.6% { transform: translate3d(0, -7px, 0) rotateZ(-0.3deg) rotateX(2138.98deg) scale(1.03); }
  24.8% { transform: translate3d(0, -3px, 0) rotateZ(-0.25deg) rotateX(2150.77deg) scale(1.012); }
  27.2% { transform: translate3d(0, -0.6px, 0) rotateZ(-0.05deg) rotateX(2157.99deg) scale(1.003); }
  28% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  42% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  43.6% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2160deg) scale(0.98); }
  60% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2324deg) scale(1.03); }
  64%, 78% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  79.6% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2340deg) scale(0.98); }
  96% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2504deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
}

@keyframes df-reveal-end-triple-to-win {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  4.117647% { transform: translate3d(0, -3px, 0) rotateZ(0.4deg) rotateX(2077.23deg) scale(1.01); }
  8.235294% { transform: translate3d(0, -8px, 0) rotateZ(1deg) rotateX(2095.29deg) scale(1.03); }
  12.352941% { transform: translate3d(0, -10px, 0) rotateZ(0.6deg) rotateX(2118.73deg) scale(1.04); }
  15.882353% { transform: translate3d(0, -7px, 0) rotateZ(-0.3deg) rotateX(2138.98deg) scale(1.03); }
  18.235294% { transform: translate3d(0, -3px, 0) rotateZ(-0.25deg) rotateX(2150.77deg) scale(1.012); }
  20% { transform: translate3d(0, -0.6px, 0) rotateZ(-0.05deg) rotateX(2157.99deg) scale(1.003); }
  20.588235% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  30.882353% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  32.058824% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2160deg) scale(0.98); }
  44.117647% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2324deg) scale(1.03); }
  47.058824%, 57.352941% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  58.529412% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2340deg) scale(0.98); }
  70.588235% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2504deg) scale(1.03); }
  73.529412%, 83.823529% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  85% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  97.058824% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
}

@keyframes df-reveal-end-triple-to-loss {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  4.117647% { transform: translate3d(0, -3px, 0) rotateZ(-0.4deg) rotateX(2094.71deg) scale(1.01); }
  8.235294% { transform: translate3d(0, -8px, 0) rotateZ(-1deg) rotateX(2154.93deg) scale(1.03); }
  12.352941% { transform: translate3d(0, -10px, 0) rotateZ(-0.6deg) rotateX(2229.8deg) scale(1.04); }
  15.882353% { transform: translate3d(0, -7px, 0) rotateZ(0.3deg) rotateX(2289.81deg) scale(1.03); }
  18.235294% { transform: translate3d(0, -3px, 0) rotateZ(0.25deg) rotateX(2320.79deg) scale(1.012); }
  20% { transform: translate3d(0, -0.6px, 0) rotateZ(0.05deg) rotateX(2336.51deg) scale(1.003); }
  20.588235% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  30.882353% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  32.058824% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2340deg) scale(0.98); }
  44.117647% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2504deg) scale(1.03); }
  47.058824%, 57.352941% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  58.529412% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  70.588235% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  73.529412%, 83.823529% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
  85% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2700deg) scale(0.98); }
  97.058824% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2864deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2880deg) scale(1); }
}

/* Long, profile-biased chains. Each one contains the complete extended normal
   and every shorter reversal before appending the next 900ms card segment. */
@keyframes df-reveal-end-long-double-to-win {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  4.444444% { transform: translate3d(0, -3px, 0) rotateZ(0.4deg) rotateX(2077.23deg) scale(1.01); }
  8.888889% { transform: translate3d(0, -8px, 0) rotateZ(1deg) rotateX(2095.29deg) scale(1.03); }
  13.333333% { transform: translate3d(0, -10px, 0) rotateZ(0.6deg) rotateX(2118.73deg) scale(1.04); }
  17.142857% { transform: translate3d(0, -7px, 0) rotateZ(-0.3deg) rotateX(2138.98deg) scale(1.03); }
  19.68254% { transform: translate3d(0, -3px, 0) rotateZ(-0.25deg) rotateX(2150.77deg) scale(1.012); }
  21.587302% { transform: translate3d(0, -0.6px, 0) rotateZ(-0.05deg) rotateX(2157.99deg) scale(1.003); }
  22.222222% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  24.126984% { transform: translate3d(0, -1px, 0) rotateZ(-0.3deg) rotateX(2168.97deg) scale(1.005); }
  26.666667% { transform: translate3d(0, -3px, 0) rotateZ(-0.8deg) rotateX(2189.57deg) scale(1.015); }
  29.52381% { transform: translate3d(0, -6px, 0) rotateZ(-1.1deg) rotateX(2220.7deg) scale(1.03); }
  32.698413% { transform: translate3d(0, -8px, 0) rotateZ(-0.6deg) rotateX(2259.61deg) scale(1.04); }
  35.873016% { transform: translate3d(0, -7px, 0) rotateZ(0.2deg) rotateX(2296.74deg) scale(1.035); }
  38.730159% { transform: translate3d(0, -4px, 0) rotateZ(0.4deg) rotateX(2323.24deg) scale(1.02); }
  40.952381% { transform: translate3d(0, -2px, 0) rotateZ(0.2deg) rotateX(2336.16deg) scale(1.01); }
  42.222222% { transform: translate3d(0, -0.5px, 0) rotateZ(0.05deg) rotateX(2339.56deg) scale(1.002); }
  42.857143%, 53.968254% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  55.238095% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2340deg) scale(0.98); }
  68.253968% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2504deg) scale(1.03); }
  71.428571%, 82.539683% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  83.809524% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  96.825397% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
}

@keyframes df-reveal-end-long-double-to-loss {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  4.444444% { transform: translate3d(0, -3px, 0) rotateZ(-0.4deg) rotateX(2094.71deg) scale(1.01); }
  8.888889% { transform: translate3d(0, -8px, 0) rotateZ(-1deg) rotateX(2154.93deg) scale(1.03); }
  13.333333% { transform: translate3d(0, -10px, 0) rotateZ(-0.6deg) rotateX(2229.8deg) scale(1.04); }
  17.142857% { transform: translate3d(0, -7px, 0) rotateZ(0.3deg) rotateX(2289.81deg) scale(1.03); }
  19.68254% { transform: translate3d(0, -3px, 0) rotateZ(0.25deg) rotateX(2320.79deg) scale(1.012); }
  21.587302% { transform: translate3d(0, -0.6px, 0) rotateZ(0.05deg) rotateX(2336.51deg) scale(1.003); }
  22.222222% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  24.126984% { transform: translate3d(0, -1px, 0) rotateZ(0.3deg) rotateX(2351.44deg) scale(1.005); }
  26.666667% { transform: translate3d(0, -3px, 0) rotateZ(0.8deg) rotateX(2373.86deg) scale(1.015); }
  29.52381% { transform: translate3d(0, -6px, 0) rotateZ(1.1deg) rotateX(2405.49deg) scale(1.03); }
  32.698413% { transform: translate3d(0, -8px, 0) rotateZ(0.6deg) rotateX(2443.59deg) scale(1.04); }
  35.873016% { transform: translate3d(0, -7px, 0) rotateZ(-0.2deg) rotateX(2479.19deg) scale(1.035); }
  38.730159% { transform: translate3d(0, -4px, 0) rotateZ(-0.4deg) rotateX(2504.28deg) scale(1.02); }
  40.952381% { transform: translate3d(0, -2px, 0) rotateZ(-0.2deg) rotateX(2516.41deg) scale(1.01); }
  42.222222% { transform: translate3d(0, -0.5px, 0) rotateZ(-0.05deg) rotateX(2519.59deg) scale(1.002); }
  42.857143%, 53.968254% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  55.238095% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  68.253968% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  71.428571%, 82.539683% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
  83.809524% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2700deg) scale(0.98); }
  96.825397% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2864deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2880deg) scale(1); }
}

@keyframes df-reveal-end-long-triple-to-win {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  3.45679% { transform: translate3d(0, -3px, 0) rotateZ(-0.4deg) rotateX(2094.71deg) scale(1.01); }
  6.91358% { transform: translate3d(0, -8px, 0) rotateZ(-1deg) rotateX(2154.93deg) scale(1.03); }
  10.37037% { transform: translate3d(0, -10px, 0) rotateZ(-0.6deg) rotateX(2229.8deg) scale(1.04); }
  13.333333% { transform: translate3d(0, -7px, 0) rotateZ(0.3deg) rotateX(2289.81deg) scale(1.03); }
  15.308642% { transform: translate3d(0, -3px, 0) rotateZ(0.25deg) rotateX(2320.79deg) scale(1.012); }
  16.790123% { transform: translate3d(0, -0.6px, 0) rotateZ(0.05deg) rotateX(2336.51deg) scale(1.003); }
  17.283951% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  18.765432% { transform: translate3d(0, -1px, 0) rotateZ(0.3deg) rotateX(2351.44deg) scale(1.005); }
  20.740741% { transform: translate3d(0, -3px, 0) rotateZ(0.8deg) rotateX(2373.86deg) scale(1.015); }
  22.962963% { transform: translate3d(0, -6px, 0) rotateZ(1.1deg) rotateX(2405.49deg) scale(1.03); }
  25.432099% { transform: translate3d(0, -8px, 0) rotateZ(0.6deg) rotateX(2443.59deg) scale(1.04); }
  27.901235% { transform: translate3d(0, -7px, 0) rotateZ(-0.2deg) rotateX(2479.19deg) scale(1.035); }
  30.123457% { transform: translate3d(0, -4px, 0) rotateZ(-0.4deg) rotateX(2504.28deg) scale(1.02); }
  31.851852% { transform: translate3d(0, -2px, 0) rotateZ(-0.2deg) rotateX(2516.41deg) scale(1.01); }
  32.839506% { transform: translate3d(0, -0.5px, 0) rotateZ(-0.05deg) rotateX(2519.59deg) scale(1.002); }
  33.333333%, 41.975309% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  42.962963% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  53.08642% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  55.555556%, 64.197531% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
  65.185185% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2700deg) scale(0.98); }
  75.308642% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2864deg) scale(1.03); }
  77.777778%, 86.419753% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2880deg) scale(1); }
  87.407407% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2880deg) scale(0.98); }
  97.530864% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(3044deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(3060deg) scale(1); }
}

@keyframes df-reveal-end-long-triple-to-loss {
  0% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2070deg) scale(1); }
  3.45679% { transform: translate3d(0, -3px, 0) rotateZ(0.4deg) rotateX(2077.23deg) scale(1.01); }
  6.91358% { transform: translate3d(0, -8px, 0) rotateZ(1deg) rotateX(2095.29deg) scale(1.03); }
  10.37037% { transform: translate3d(0, -10px, 0) rotateZ(0.6deg) rotateX(2118.73deg) scale(1.04); }
  13.333333% { transform: translate3d(0, -7px, 0) rotateZ(-0.3deg) rotateX(2138.98deg) scale(1.03); }
  15.308642% { transform: translate3d(0, -3px, 0) rotateZ(-0.25deg) rotateX(2150.77deg) scale(1.012); }
  16.790123% { transform: translate3d(0, -0.6px, 0) rotateZ(-0.05deg) rotateX(2157.99deg) scale(1.003); }
  17.283951% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2160deg) scale(1); }
  18.765432% { transform: translate3d(0, -1px, 0) rotateZ(-0.3deg) rotateX(2168.97deg) scale(1.005); }
  20.740741% { transform: translate3d(0, -3px, 0) rotateZ(-0.8deg) rotateX(2189.57deg) scale(1.015); }
  22.962963% { transform: translate3d(0, -6px, 0) rotateZ(-1.1deg) rotateX(2220.7deg) scale(1.03); }
  25.432099% { transform: translate3d(0, -8px, 0) rotateZ(-0.6deg) rotateX(2259.61deg) scale(1.04); }
  27.901235% { transform: translate3d(0, -7px, 0) rotateZ(0.2deg) rotateX(2296.74deg) scale(1.035); }
  30.123457% { transform: translate3d(0, -4px, 0) rotateZ(0.4deg) rotateX(2323.24deg) scale(1.02); }
  31.851852% { transform: translate3d(0, -2px, 0) rotateZ(0.2deg) rotateX(2336.16deg) scale(1.01); }
  32.839506% { transform: translate3d(0, -0.5px, 0) rotateZ(0.05deg) rotateX(2339.56deg) scale(1.002); }
  33.333333%, 41.975309% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2340deg) scale(1); }
  42.962963% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2340deg) scale(0.98); }
  53.08642% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2504deg) scale(1.03); }
  55.555556%, 64.197531% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2520deg) scale(1); }
  65.185185% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2520deg) scale(0.98); }
  75.308642% { transform: translate3d(-1px, -3px, 0) rotateZ(-2deg) rotateX(2684deg) scale(1.03); }
  77.777778%, 86.419753% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2700deg) scale(1); }
  87.407407% { transform: translate3d(-4px, 0, 0) rotateZ(-4deg) rotateX(2700deg) scale(0.98); }
  97.530864% { transform: translate3d(-1px, -3px, 0) rotateZ(2deg) rotateX(2864deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(2880deg) scale(1); }
}

/* A final loss drains to the 150% floor and JS removes the rail on the exact
   red landing frame. If another reversal will restore the authoritative win,
   the rail remains mounted: it reaches the floor on red, visibly rebounds as
   the next card enters, and returns to its winning stop on green. */
body.layout-basic .df-modifier-meter--draining .df-modifier-meter__marker {
  animation: df-meter-drain-to-min 350ms cubic-bezier(0.4, 0, 0.7, 1) forwards;
}
@keyframes df-meter-drain-to-min {
  from { height: var(--df-meter-stop, 50%); }
  to { height: 0%; }
}

body.layout-basic .df-modifier-meter--rebounding .df-modifier-meter__marker {
  animation: df-meter-rebound-from-min var(--df-meter-rebound-duration, 1150ms)
    linear forwards;
}
@keyframes df-meter-rebound-from-min {
  0%, 6.086957% { height: 0%; }
  39.130435%, 43% { height: 100%; }
  65.217391% { height: 8%; }
  78.26087% { height: var(--df-meter-handoff, 64%); }
  87.826087% { height: var(--df-meter-low, 44%); }
  94.782609% { height: var(--df-meter-bounce, 53%); }
  100% { height: var(--df-meter-stop, 50%); }
}

/* Winning branches finish while the longer branch is still using the same
   recovery. Continue from the exact 900ms handoff frame instead of snapping
   the marker into a static position or restarting the full thermometer. */
body.layout-basic .df-modifier-meter--recovery-tail .df-modifier-meter__marker {
  animation: df-meter-recovery-tail var(--df-meter-recovery-tail-duration, 250ms)
    linear forwards;
}
@keyframes df-meter-recovery-tail {
  0% { height: var(--df-meter-handoff, 64%); }
  44% { height: var(--df-meter-low, 44%); }
  76% { height: var(--df-meter-bounce, 53%); }
  100% { height: var(--df-meter-stop, 50%); }
}

/* A third reversal to a real loss begins descending the instant the shared
   2x recovery completes. The 650ms sweep fills the remaining reveal segment,
   so there is no stationary beat before the final floor contact. */
body.layout-basic .df-modifier-meter--terminal-draining .df-modifier-meter__marker {
  animation: df-meter-terminal-drain var(--df-meter-terminal-drain-duration, 650ms)
    linear forwards;
}
@keyframes df-meter-terminal-drain {
  from { height: var(--df-meter-stop, 50%); }
  to { height: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  body.layout-basic .df-fakeout-reverse-card { display: none !important; }
}

/* Closed AFKING PASSES strip: subscription coverage and three purchase
   shortcuts. Owned-pass identity belongs to its dedicated surface (the Deity
   desk, ticket inventory, and so on), never this shop summary. */
body.layout-basic .more-ways__summary.section-disclosure__bar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

body.layout-basic .more-ways__summary-closed {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
}

body.layout-basic :is(
  .more-ways__summary-closed,
  .more-ways__sub-state,
  .more-ways__sub-state > b
)[hidden],
body.layout-basic .more-ways[open] > .more-ways__summary .more-ways__summary-closed {
  display: none !important;
}

body.layout-basic .more-ways__sub-state {
  box-sizing: border-box;
  display: inline-flex;
  min-width: 0;
  min-height: 2.15rem;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(21, 91, 58, 0.24), rgba(9, 35, 48, 0.42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.layout-basic .more-ways__sub-state[data-active="false"] {
  border-color: rgba(125, 196, 255, 0.26);
  background: rgba(46, 94, 135, 0.12);
}

body.layout-basic .more-ways__sub-state > b {
  box-sizing: border-box;
  display: grid;
  min-height: 2.15rem;
  align-items: center;
  padding: 0.36rem 0.52rem;
  color: #a7f3d0;
  font: 900 0.58rem/1.08 var(--font-mono, "Roboto Mono", monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

body.layout-basic .more-ways__sub-state[data-active="false"] > b { color: #b9dcfa; }

body.layout-basic .more-ways__sub-state > b + b {
  border-left: 1px solid rgba(148, 216, 255, 0.16);
  color: #d8ecff;
}

body.layout-basic .more-ways__quickbuys {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(6.35rem, 1fr));
  gap: 0.36rem;
}

body.layout-basic .more-ways__quickbuy {
  --pass-quick-color: #dbeafe;
  --pass-quick-border: rgba(147, 197, 253, 0.4);
  --pass-quick-bg-a: rgba(30, 64, 175, 0.24);
  --pass-quick-bg-b: rgba(11, 24, 46, 0.72);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.48rem minmax(0, 1fr);
  min-width: 0;
  min-height: 2.4rem;
  align-items: center;
  gap: 0.36rem;
  padding: 0.24rem 0.42rem 0.24rem 0.28rem;
  appearance: none;
  border: 1px solid var(--pass-quick-border);
  border-radius: 8px;
  background: linear-gradient(145deg, var(--pass-quick-bg-a), var(--pass-quick-bg-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--pass-quick-color);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body.layout-basic .more-ways__quickbuy--lazy {
  --pass-quick-color: #e9ddff;
  --pass-quick-border: rgba(196, 181, 253, 0.42);
  --pass-quick-bg-a: rgba(91, 67, 142, 0.32);
  --pass-quick-bg-b: rgba(31, 24, 57, 0.72);
}

body.layout-basic .more-ways__quickbuy--whale {
  --pass-quick-color: #ccecff;
  --pass-quick-border: rgba(111, 201, 255, 0.42);
  --pass-quick-bg-a: rgba(21, 91, 154, 0.34);
  --pass-quick-bg-b: rgba(10, 28, 51, 0.74);
}

body.layout-basic .more-ways__quickbuy--deity {
  --pass-quick-color: #ffe6a0;
  --pass-quick-border: rgba(255, 218, 106, 0.48);
  --pass-quick-bg-a: rgba(126, 84, 18, 0.3);
  --pass-quick-bg-b: rgba(43, 31, 13, 0.76);
}

body.layout-basic .more-ways__quickbuy[data-state="ready"]:hover {
  border-color: var(--pass-quick-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 12px color-mix(in srgb, var(--pass-quick-color) 18%, transparent);
  transform: translateY(-1px);
}

body.layout-basic .more-ways__quickbuy:focus-visible {
  outline: 2px solid var(--pass-quick-color);
  outline-offset: 2px;
}

body.layout-basic .more-ways__quickbuy:disabled {
  cursor: not-allowed;
  filter: saturate(0.7);
  opacity: 0.58;
  transform: none;
}

body.layout-basic .more-ways__quickbuy > i {
  display: grid;
  width: 1.42rem;
  height: 1.42rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(4, 10, 20, 0.48);
  font: 950 0.47rem/1 var(--font-mono, "Roboto Mono", monospace);
  font-style: normal;
}

body.layout-basic .more-ways__quickbuy > span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

body.layout-basic .more-ways__quickbuy b,
body.layout-basic .more-ways__quickbuy small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.layout-basic .more-ways__quickbuy b {
  font: 950 0.56rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.06em;
}

body.layout-basic .more-ways__quickbuy small {
  color: color-mix(in srgb, var(--pass-quick-color) 78%, #fff);
  font: 850 0.5rem/1 var(--font-mono, "Roboto Mono", monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  body.layout-basic .more-ways__summary.section-disclosure__bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body.layout-basic .more-ways__summary-closed {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
  }
}

@media (max-width: 620px) {
  body.layout-basic .more-ways__summary-closed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  body.layout-basic .more-ways__sub-state { width: 100%; }
  body.layout-basic .more-ways__sub-state > b { min-width: 0; flex: 1 1 50%; }
  body.layout-basic .more-ways__quickbuys {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.layout-basic .more-ways__quickbuy {
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0.28rem;
    padding-inline: 0.24rem;
  }
}

@media (max-width: 390px) {
  body.layout-basic .more-ways__quickbuy {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  body.layout-basic .more-ways__quickbuy > i { display: none; }
}

/* Reserve a compact boon slot beside BUY IN without shifting the column. */
body.layout-basic .craps-entry__buy-in-heading {
  position: relative;
  display: inline-block;
  padding-inline: 1rem;
  line-height: 1.1rem;
}

body.layout-basic .craps-entry__buy-in-heading boon-product-indicator {
  top: 50%;
  right: 0;
  width: .9rem;
  height: .9rem;
  translate: 0 -50%;
}