/* ==========================================================================
   Prize celebrations — the layer components/celebrate.js draws in: the small
   "+N" pill and its transient wallet, the big card with its stamp, the coin
   and confetti canvas, and the ghost-final counting numbers (.cu-*).

   No keyframes here on purpose: every moving style (transform, opacity, the
   pulse's --prize-s / --prize-g) is written each frame from the job's elapsed
   time, so the numbers stay prize_timing.js's and reduced motion is decided in
   JS (the tokens.css clamp does not reach rAF). Text sizes scale with
   --prize-scale, 1.25 under Large text. Mirror: mobile components/celebrate.dart.
   ========================================================================== */

/* Above the stage (10), the flight layer (150) and the toasts (200); below the
   rotate / cover gate (500), the boot splash (900), the sign-in gate and the ad
   overlays (1000) and modal() (9000). Taps pass through unless a card is up. */
.prize-layer { position: fixed; inset: 0; z-index: 480; pointer-events: none; --prize-scale: 1;
  font-family: var(--font-ui); color: var(--bone); }

/* The permanent screen-reader line, outside #app[aria-live], and the card's hint. */
.prize-sr, .prize-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.prize-coin { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--font-ui); font-size: 9px; font-weight: 800; letter-spacing: -0.5px; color: #3a2a06;
  background: radial-gradient(circle at 38% 30%, #F7CF69, #E0A42C 70%); box-shadow: inset 0 0 0 1.5px rgba(120,80,10,.35); }
.prize-gem { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23FBD97A'/><stop offset='1' stop-color='%23D89B22'/></linearGradient></defs><g stroke='%237E5A12' stroke-width='0.9' stroke-linejoin='round'><path d='M2.2 13.3 L10.8 13.3 L11.9 18.9 L1.1 18.9 Z' fill='url(%23g)'/><path d='M13.2 13.3 L21.8 13.3 L22.9 18.9 L12.1 18.9 Z' fill='url(%23g)'/><path d='M7.7 6.5 L16.3 6.5 L17.4 12.1 L6.6 12.1 Z' fill='url(%23g)'/></g><g stroke='%23FCE7A8' stroke-width='0.9' stroke-linecap='round' opacity='0.8' fill='none'><path d='M3.1 14.4 L10 14.4'/><path d='M14.1 14.4 L21 14.4'/><path d='M8.6 7.6 L15.4 7.6'/></g></svg>") center/contain no-repeat; }
.prize-emoji { font-size: 34px; line-height: 1; }

/* ---- small: the pill ---- */
.prize-pill { position: fixed; left: 0; top: 0; z-index: 3; box-sizing: border-box; max-width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 14px; border-radius: 999px;
  background: rgba(6,35,26,.94); border: 2px solid #E0A42C;
  box-shadow: 0 0 18px rgba(224,164,44,.55), 0 8px 22px rgba(0,0,0,.45); will-change: transform, opacity; }
.prize-pill__l1 { max-width: 100%; text-align: center; overflow-wrap: anywhere; color: #F2E7CE;
  font: 700 calc(11.5px * var(--prize-scale))/1.25 var(--font-ui); }
.prize-pill__l2 { display: flex; align-items: center; white-space: nowrap; }
.prize-pill__l2 .prize-coin { margin-right: 6px; }
.prize-pill__l2 .prize-gem { margin: 0 5px 0 10px; }
.prize-pill__n { color: #F7CF69; font: 800 calc(22px * var(--prize-scale))/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.prize-pill__g { color: #F7CF69; font: 800 calc(18px * var(--prize-scale))/1.05 var(--font-display); font-variant-numeric: tabular-nums; }

/* ---- small: the transient wallet, today's .counter at the safe top-right ---- */
.prize-tw { position: fixed; z-index: 3; display: flex; gap: 10px; align-items: center; transform-origin: top right; }
.prize-tw .counter { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px rgba(224,164,44,.45); }

/* ---- big: the scrim and the card ---- */
.prize-scrim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: auto; }
.prize-card { position: fixed; z-index: 2; box-sizing: border-box; padding: 18px 18px 16px; border-radius: 22px;
  background: linear-gradient(155deg, #26221C, #0C0B09); border: 1.5px solid rgba(224,164,44,.52);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(224,164,44,.18);
  overflow: visible; text-align: center; pointer-events: auto; cursor: pointer; will-change: transform, opacity; }
.prize-card__inner { display: flex; flex-direction: column; align-items: center; }
.prize-card__emblem { height: 40px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
.prize-card__head { display: flex; align-items: baseline; justify-content: center; white-space: nowrap; }
.prize-coin.prize-coin--lg { width: 30px; height: 30px; font-size: 13px; margin-right: 8px; align-self: center; }
.prize-card__num { color: #F7CF69; font: 800 calc(40px * var(--prize-scale))/1 var(--font-display);
  font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.prize-card__unit { margin-left: 6px; color: #EDE3CE; font: 700 calc(17px * var(--prize-scale))/1 var(--font-ui); }
.prize-card__ginto { margin-top: 4px; display: flex; align-items: baseline; justify-content: center; white-space: nowrap; }
.prize-gem.prize-gem--lg { width: 22px; height: 22px; margin-right: 6px; align-self: center; }
.prize-card__gnum { color: #F7CF69; font: 800 calc(24px * var(--prize-scale))/1 var(--font-display); font-variant-numeric: tabular-nums; }
.prize-card__gunit { margin-left: 5px; color: var(--bone); font: 700 calc(14px * var(--prize-scale))/1 var(--font-ui); }
.prize-card__title { color: #F7CF69; font: 800 calc(30px * var(--prize-scale))/1.05 var(--font-display); }
.prize-card__sub { margin-top: 4px; color: var(--bone-bright); font: 800 calc(22px * var(--prize-scale))/1.1 var(--font-display); }
.prize-card__caption { margin-top: 10px; max-width: 100%; color: var(--bone); font: 600 calc(14px * var(--prize-scale))/1.35 var(--font-ui);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.prize-card__rank { align-self: stretch; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(224,164,44,.10);
  display: flex; align-items: center; gap: 8px; text-align: left; }
.prize-card__rankTxt { min-width: 0; }
.prize-card__rankTitle { color: #F7CF69; font: 800 calc(16px * var(--prize-scale))/1.15 var(--font-display); }
.prize-card__rankNote { margin-top: 2px; color: var(--bone); font: 400 calc(12px * var(--prize-scale))/1.3 var(--font-ui); }
.prize-card__ok { margin-top: 14px; width: 100%; padding: 12px 18px; font-size: calc(15px * var(--prize-scale)); }

/* The stamp hangs off the card's top-right corner (the card never clips it):
   outlined lacquer red on the dark card, rotated −8°. */
.prize-stamp { position: absolute; top: -6px; right: -10px; padding: 4px 12px; border: 3px solid #D2503E; border-radius: 8px;
  color: #D2503E; font: 800 calc(22px * var(--prize-scale))/1.1 var(--font-display); letter-spacing: 1.2px; white-space: nowrap;
  transform: rotate(-8deg); opacity: 0; pointer-events: none; }
.prize-card--narrow .prize-stamp { font-size: calc(18px * var(--prize-scale)); }
.prize-stamp__ring { position: absolute; inset: -3px; border: 3px solid #D2503E; border-radius: 8px; opacity: 0; }

/* ---- the canvas: coins and confetti, over the card ---- */
.prize-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

/* ---- ghost-final: the final number stays in the tree (hidden by colour only,
   never visibility, so screen readers still read it); the counting one is
   drawn over it, right-aligned, and hidden from them ---- */
.cu-host { position: relative; }
.cu-host.is-counting > .cu-final { color: transparent; }
.cu-live { position: absolute; top: 0; right: 0; white-space: nowrap; }

/* ---- what a burst lands on: a coin's bump and the land pulse (scale + glow),
   and the reduced-motion ring. Transforms only — no layout moves. ---- */
.counter.prize-hit { transform: scale(var(--prize-s, 1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 18px rgba(247,207,105,var(--prize-g, 0)); }
.prize-tw .counter.prize-hit { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px rgba(224,164,44,.45),
  0 0 18px rgba(247,207,105,var(--prize-g, 0)); }
.results__earnVal.prize-hit { transform: scale(var(--prize-s, 1)); }
.results__earn.prize-hit { box-shadow: inset 0 0 0 1.5px rgba(247,207,105,var(--prize-g, 0)); }
.counter.prize-ring { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 2px #F7CF69; }
.results__earn.prize-ring { box-shadow: 0 0 0 2px #F7CF69; }