/* Baize celebrate: the shared win card, loss note, particle layer, window ring and balance glow (games/baize-celebrate.mjs).
   Colours come from baize-ui.css tokens; a game may override --bz-cel-card / --bz-cel-ink / --bz-cel-win, and the ring's
   --bz-ring-win / --bz-ring-big / --bz-ring-big-glow / --bz-ring-loss on the ring element or any ancestor. */
.bz-cel-layer{position:absolute;inset:0;z-index:7;pointer-events:none;container-type:size}
.bz-cel-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* [hidden] must win over the display these set below (an empty loss note showed as a small red ring) */
.bz-cel[hidden],.bz-cel-toast[hidden]{display:none}
.bz-cel{--bz-cel-card:var(--bz-cream,#f2ead9);--bz-cel-ink:var(--bz-ink,#1b1a17);--bz-cel-win:#2f7a57;--w:300px;--fig:52px;
  position:absolute;left:0;top:0;transform:translate(var(--cel-x,calc((100cqw - var(--w))/2)),var(--cel-y,calc(50cqh - 90px)));
  width:min(var(--w),calc(100cqw - 16px));padding:16px 20px 18px;border-radius:18px;text-align:center;background:var(--bz-cel-card);color:var(--bz-cel-ink);
  box-shadow:0 18px 44px #0008;pointer-events:auto;cursor:pointer;animation:bz-cel-in .26s var(--bz-pop,cubic-bezier(.3,1.5,.5,1))}
.bz-cel p{margin:0}
.bz-cel-tier{font:600 calc(var(--fig)*.5)/1.05 var(--bz-serif);color:var(--bz-gold-ink,#6e4708);letter-spacing:.01em}
.bz-cel-tier:empty,.bz-cel-kicker:empty,.bz-cel-line:empty,.bz-cel-skip:empty{display:none}
.bz-cel-kicker{font:600 18px/1.2 var(--bz-serif);margin-top:2px}
.bz-cel-mult{display:block;margin:4px 0 2px;font:500 min(var(--fig),calc((min(var(--w),100cqw - 16px) - 44px)/(var(--chars,6)*.6)))/1.08 var(--bz-mono);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;color:var(--bz-cel-win)}
.bz-cel-net{font:500 20px/1.2 var(--bz-mono);font-variant-numeric:tabular-nums;color:var(--bz-cel-win)}
.bz-cel-line{margin-top:4px;font:500 14px/1.3 var(--bz-sans);color:#1b1a17a8}
.bz-cel-skip{margin-top:8px;font:500 12px/1 var(--bz-sans);color:#1b1a1780}
.bz-cel[data-tier=none]{--bz-cel-card:#cfc6b0;--bz-cel-win:var(--bz-ink,#1b1a17);--w:260px;--fig:40px}
.bz-cel[data-tier=small]{--w:270px;--fig:44px}
.bz-cel[data-tier=good]{--w:300px;--fig:54px}
.bz-cel[data-tier=big]{--w:340px;--fig:62px;box-shadow:0 0 0 3px var(--bz-gold,#e3b04b),0 0 44px #e3b04b55,0 20px 50px #0009}
.bz-cel[data-tier=huge]{--w:380px;--fig:70px;box-shadow:0 0 0 4px var(--bz-gold,#e3b04b),0 0 60px #e3b04b77,0 22px 56px #000a}
.bz-cel[data-tier=mega]{--w:420px;--fig:78px;--bz-cel-card:#fbf3df;box-shadow:0 0 0 5px var(--bz-gold,#e3b04b),0 0 80px #e3b04b99,0 24px 60px #000b}
.bz-cel:is([data-tier=big],[data-tier=huge],[data-tier=mega])[data-phase=counting] .bz-cel-mult{animation:bz-cel-throb .5s ease-in-out infinite alternate}
.bz-cel:is([data-tier=huge],[data-tier=mega]) .bz-cel-tier{animation:bz-cel-tier .5s var(--bz-pop,ease) both}
@keyframes bz-cel-in{from{opacity:0;scale:.82}}
@keyframes bz-cel-throb{to{scale:1.05}}
@keyframes bz-cel-tier{from{opacity:0;transform:translateY(8px) scale(.8)}}
/* Narrow boards (phones): the same card, a size down */
@container (max-width:520px){
  .bz-cel{--w:300px;padding:14px 16px 16px}
  .bz-cel[data-tier=big]{--w:320px;--fig:54px}.bz-cel[data-tier=huge]{--w:340px;--fig:60px}.bz-cel[data-tier=mega]{--w:360px;--fig:66px}
  .bz-cel-kicker{font-size:17px}
}
@container (max-height:340px){.bz-cel{padding:10px 14px 12px}.bz-cel-kicker{font-size:16px}.bz-cel-net{font-size:17px}.bz-cel-skip{display:none}}

/* Loss: a slim note, never a blocking card */
.bz-cel-toast{position:absolute;left:0;top:0;transform:translate(var(--cel-x,calc(50cqw - 50%)),var(--cel-y,calc(100cqh - 60px)));display:flex;align-items:baseline;gap:10px;
  max-width:calc(100cqw - 16px);padding:9px 16px;border-radius:999px;background:#1b1a17f2;color:var(--bz-cream,#f2ead9);box-shadow:0 0 0 1.5px #f08a7f,0 10px 26px #0008;
  font:600 15px/1.2 var(--bz-sans);white-space:nowrap;pointer-events:none;animation:bz-toast-in .18s var(--bz-ease,ease)}
.bz-cel-toast-kicker{overflow:hidden;text-overflow:ellipsis}
.bz-cel-toast-net{font:500 15px/1.2 var(--bz-mono);font-variant-numeric:tabular-nums;color:#f08a7f}
@keyframes bz-toast-in{from{opacity:0;translate:0 6px}}

/* The window ring: cream for a win, gold for big wins, a faint red for a loss. Drawn by an overlay the presenter puts
   in the ring element (the game window, or the page as a fixed layer), above the game's own layers. */
.bz-cel-ring{position:absolute;inset:0;z-index:var(--bz-ring-z,8);pointer-events:none;border-radius:inherit}
.bz-cel-ring[data-fixed]{position:fixed;z-index:var(--bz-ring-z,40);border-radius:0}
.bz-flash-win>.bz-cel-ring{animation:bz-flash-win .9s var(--bz-ease,ease)}
.bz-flash-win.bz-flash-big>.bz-cel-ring{animation:bz-flash-big 1.6s var(--bz-ease,ease)}
.bz-flash-loss>.bz-cel-ring{animation:bz-flash-loss .6s var(--bz-ease,ease)}
@keyframes bz-flash-win{0%,40%{box-shadow:inset 0 0 0 4px var(--bz-ring-win,var(--bz-cream,#f2ead9))}100%{box-shadow:inset 0 0 0 0 transparent}}
@keyframes bz-flash-big{0%,50%{box-shadow:inset 0 0 0 5px var(--bz-ring-big,var(--bz-gold,#e3b04b)),inset 0 0 90px var(--bz-ring-big-glow,#e3b04b55)}100%{box-shadow:inset 0 0 0 0 transparent,inset 0 0 0 transparent}}
@keyframes bz-flash-loss{0%,30%{box-shadow:inset 0 0 0 3px var(--bz-ring-loss,#b3352bcc)}100%{box-shadow:inset 0 0 0 0 transparent}}

/* The HUD balance: a gold glow while it rolls and after it rises; the digits never change colour against their ground */
.bz-bal-rolling{color:var(--bz-gold-soft,#f6d98a);text-shadow:0 0 14px #e3b04b80}
.bz-bal-up{animation:bz-bal-up .7s var(--bz-ease,ease)}
.bz-bal-down{animation:bz-bal-down .45s var(--bz-ease,ease)}
@keyframes bz-bal-up{0%{color:var(--bz-gold-soft,#f6d98a);text-shadow:0 0 14px #e3b04b99}}
@keyframes bz-bal-down{0%{color:#f6b3ab}}

@media (prefers-reduced-motion:reduce){
  .bz-cel,.bz-cel-toast,.bz-cel-mult,.bz-cel-tier{animation:none!important}
  .bz-flash-win>.bz-cel-ring,.bz-flash-loss>.bz-cel-ring,.bz-bal-up,.bz-bal-down{animation:none}
}