/* =========================================================================
   DICE area — win celebrations (js/views/dice-fx.js). Classes .dfx-*.
   Tiers 1–2 live in the view's fixed .dc-fx layer (or .dfx-layer on <body>);
   the tier-3 moment (.dfx-big) sits on <body> above the tab bar and sheets,
   below toasts. Everything animates transform / opacity only; gradients and
   the one drop-shadow are static.
   ========================================================================= */
.dfx-layer { position: fixed; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }

/* ---------- coins (outer node moves, inner node flips) */
.dfx-coin { position: absolute; left: 0; top: 0; display: block; pointer-events: none; will-change: transform, opacity; }
.dfx-coin > i {
  display: block; width: 100%; height: 100%;
  background: url('../../img/gram.svg') center / contain no-repeat;
  will-change: transform;
}

/* ---------- light: bloom where the pointer stopped, glints, rings */
.dfx-bloom {
  position: absolute; display: block; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(218, 255, 236, 0.62) 22%, rgba(79, 227, 154, 0.22) 52%, rgba(79, 227, 154, 0) 100%);
}
.dfx-bloom--gold {
  background: radial-gradient(closest-side, rgba(255, 255, 250, 0.95), rgba(255, 236, 170, 0.62) 22%, rgba(255, 190, 60, 0.22) 52%, rgba(255, 190, 60, 0) 100%);
}
.dfx-glint {
  position: absolute; display: block; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(225, 255, 240, 0.6), rgba(225, 255, 240, 0) 70%);
}
.dfx-glint--gold { background: radial-gradient(closest-side, rgba(255, 230, 160, 0.65), rgba(255, 230, 160, 0) 70%); }
.dfx-glint svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dfx-ring {
  position: absolute; display: block; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  /* one thin band at the very edge: it never washes over the track */
  background: radial-gradient(closest-side, rgba(226, 255, 240, 0) 91%, rgba(160, 255, 205, 0.22) 95%, rgba(236, 255, 245, 0.95) 98%, rgba(226, 255, 240, 0) 100%);
}
.dfx-ring--gold {
  background: radial-gradient(closest-side, rgba(255, 236, 180, 0) 92%, rgba(255, 200, 90, 0.2) 95.5%, rgba(255, 236, 170, 0.9) 98%, rgba(255, 228, 150, 0) 100%);
}

/* streaks out of the landing point; a light running along the arc (inside it) */
.dfx-spark {
  position: absolute; display: block; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  transform-origin: 0 50%; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(220, 255, 236, 0), rgba(240, 255, 247, 0.95));
}
.dfx-spark--gold { background: linear-gradient(90deg, rgba(255, 228, 150, 0), rgba(255, 246, 214, 0.95)); }
.dfx-comet {
  position: absolute; display: block; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background:
    radial-gradient(closest-side at 62% 50%, rgba(255, 255, 255, 0.95), rgba(236, 255, 246, 0.5) 38%, rgba(236, 255, 246, 0) 100%),
    linear-gradient(90deg, rgba(200, 255, 225, 0), rgba(200, 255, 225, 0.35) 70%, rgba(200, 255, 225, 0));
}

/* ---------- arrival at the balance pill */
.dfx-pillglow {
  position: absolute; display: block; border-radius: 13px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 214, 110, 0.85), 0 0 18px 2px rgba(255, 190, 60, 0.45), inset 0 0 12px rgba(255, 214, 110, 0.25);
}
.dfx-delta {
  position: absolute; display: block; pointer-events: none; opacity: 0; white-space: nowrap;
  font: 800 var(--fs-sm) / 1 var(--font-text); letter-spacing: -0.01em; color: var(--green-400);
  padding: 4px 8px; border-radius: var(--r-pill);
  background: rgba(14, 26, 20, 0.86); border: 1px solid rgba(79, 227, 154, 0.25);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7);
}
.dfx-delta.is-gold { color: #ffd668; background: rgba(30, 22, 8, 0.88); border-color: rgba(255, 214, 110, 0.32); }

/* ---------- tier 3: the big moment */
.dfx-big {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  color: var(--text); font-family: var(--font-text);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; cursor: pointer;
}
.dfx-big > * { position: absolute; }
.dfx-big__scrim {
  inset: 0;
  background:
    radial-gradient(90% 60% at 50% 40%, rgba(17, 40, 30, 0.72), rgba(17, 40, 30, 0) 70%),
    radial-gradient(140% 100% at 50% 40%, rgba(7, 7, 10, 0.93) 36%, rgba(4, 4, 6, 0.985) 100%);
}
.dfx-big.is-golden .dfx-big__scrim {
  background:
    radial-gradient(90% 60% at 50% 40%, rgba(58, 38, 8, 0.72), rgba(58, 38, 8, 0) 70%),
    radial-gradient(140% 100% at 50% 40%, rgba(9, 8, 6, 0.93) 36%, rgba(5, 4, 3, 0.985) 100%);
}
.dfx-big__glow {
  left: 50%; top: 40%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 224, 154, 0.3), rgba(46, 224, 154, 0.09) 46%, rgba(46, 224, 154, 0) 100%);
  pointer-events: none;
}
.dfx-big.is-golden .dfx-big__glow {
  background: radial-gradient(closest-side, rgba(255, 196, 70, 0.34), rgba(255, 170, 40, 0.1) 46%, rgba(255, 170, 40, 0) 100%);
}
.dfx-big__fx { inset: 0; width: 100%; height: 100%; pointer-events: none; }

.dfx-big__body {
  left: 0; right: 0; top: 40%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 var(--gutter); text-align: center; pointer-events: none;
}
.dfx-big__eyebrow {
  margin-bottom: 4px;
  font-size: var(--fs-sm); font-weight: 800; line-height: 1;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: rgba(214, 255, 234, 0.74);
}
.dfx-big__gold {
  margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 800; line-height: 1; color: #ffe08a;
  background: linear-gradient(180deg, rgba(255, 214, 110, 0.2), rgba(245, 166, 35, 0.08));
  border: 1px solid rgba(255, 214, 110, 0.45);
  box-shadow: 0 0 22px -6px rgba(255, 190, 60, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dfx-gem { display: block; width: 14px; height: 14px; flex: none; }

.dfx-big__multwrap { position: relative; display: grid; place-items: center; }
.dfx-big__flash {
  position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(220, 255, 236, 0.2) 40%, rgba(220, 255, 236, 0) 100%);
}
.is-golden .dfx-big__flash { background: radial-gradient(closest-side, rgba(255, 252, 235, 0.6), rgba(255, 220, 140, 0.22) 40%, rgba(255, 220, 140, 0) 100%); }
.dfx-big__mult {
  position: relative; display: block; white-space: nowrap; padding: 0.04em 0.06em;
  font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.045em;
  font-size: 92px; font-size: min(25vw, 116px);
  background: linear-gradient(180deg, #ffffff 0%, #e9fff4 40%, #63eaa9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
  will-change: transform, opacity;
}
.dfx-big__mult[data-len='7'] { font-size: min(21vw, 100px); }
.dfx-big__mult[data-len='8'], .dfx-big__mult[data-len='9'] { font-size: min(18vw, 86px); }
.is-golden .dfx-big__mult { background-image: linear-gradient(180deg, #fffdf2 0%, #ffe8a3 36%, #ffc847 72%, #f09a1a 100%); }

.dfx-big__pay {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 2px;
  font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: -0.035em;
  font-size: 34px; font-size: min(9.4vw, 44px); color: var(--green-400);
}
.dfx-big__pay .coin { --coin: 0.92em; filter: drop-shadow(0 2px 6px rgba(120, 60, 0, 0.5)); }
.dfx-big__pay .num { display: inline-block; }
.dfx-big__cur {
  align-self: flex-end; margin: 0 0 0.16em -2px;
  font-family: var(--font-text); font-size: 0.4em; font-weight: 800; letter-spacing: 0.04em;
  color: rgba(160, 240, 200, 0.72);
}
.is-golden .dfx-big__pay { color: #ffd668; }
.is-golden .dfx-big__cur { color: rgba(255, 224, 138, 0.75); }

.dfx-big__actions {
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; justify-content: center;
  padding: 40px var(--gutter) calc(var(--safe-bottom) + 22px);
  background: linear-gradient(180deg, rgba(5, 5, 7, 0), rgba(5, 5, 7, 0.55) 60%);
}
.dfx-big__actions .btn { flex: 1 1 0; max-width: 240px; cursor: pointer; }
.dfx-big__close {
  overflow: hidden; isolation: isolate; color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.16);
}
.dfx-big__timer {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, 0.09);
  transform-origin: 0 50%; transform: scaleX(0);
}
.dfx-big__share { isolation: isolate; }
.dfx-big__share.is-done { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .dfx-big__timer { display: none; }
}