/*
 * game-reward-live.css — realtime commission toast (feature C), shared by every theme.
 * Replaces the inline <style> of partials/game-reward-live-toast.ejs. Load it BEFORE
 * /css/commission-bonus-burst.css, which depends on the scope and defaults declared here.
 * Token law: the only external colours are the six --seed-* tokens; the --gr-* runtime
 * properties are set inline by GameRewardLiveEffects.apply() only when DATA supplied a valid
 * colour, otherwise the defaults below apply. No colour literals in this file.
 */

/* Token scope: local roles derived from the six seeds (THEME_COLOR_SYSTEM.md §4-5).
   The container is the scope; .grl-scope lets a preview host opt in. */
#gr-live-commission-toasts,.grl-scope{
  --grl-card:    color-mix(in srgb, var(--seed-canvas) 94%, var(--seed-fg));    /* = --elev-2 (card) */
  --grl-card-hi: color-mix(in srgb, var(--seed-canvas) 97%, var(--seed-fg));    /* = --elev-1 */
  --grl-ink:     var(--seed-fg);                                                /* = --ink-hi */
  --grl-ink-mid: color-mix(in srgb, var(--seed-fg) 72%, var(--seed-canvas));    /* = --ink-mid */
  --grl-ink-dim: color-mix(in srgb, var(--seed-fg) 66%, var(--seed-canvas));    /* = --ink-dim */
  --grl-warm:    color-mix(in hsl, var(--seed-danger) 74%, var(--seed-success));/* = themes' --state-warning formula: amber/gold */
  --grl-pink:    color-mix(in srgb, var(--seed-accent) 50%, var(--seed-danger));
  --grl-teal:    color-mix(in srgb, var(--seed-success) 70%, var(--seed-accent));
  --grl-glow:    color-mix(in srgb, var(--seed-accent) 45%, var(--seed-fg)); /* highlight: polarity-safe (F2) — leans to --seed-fg, so it always contrasts with the canvas-derived card; --seed-canvas converged with the card on dark canvases (≈1.05:1) */
  --grl-shade:   var(--seed-ink);      /* fixed dark pole, for shadows */
}

/* Runtime-property defaults: used whenever apply() left the property unset (no valid DATA colour).
   Order matters: .is-negative must follow .is-boost so a negative special bonus still reads as danger. */
.gr-live-commission-toast{--gr-boost-accent:var(--seed-success)}
.gr-live-commission-toast.is-boost{--gr-boost-accent:var(--seed-accent)}
.gr-live-commission-toast.is-negative{--gr-boost-accent:var(--seed-danger);--gr-popup-border:color-mix(in srgb, var(--seed-danger) 30%, var(--grl-card))}

/* Container: fixed stack, top-right (also the token scope above) */
#gr-live-commission-toasts{position:fixed;top:62px;right:14px;z-index:30050;width:min(370px,calc(100vw - 28px));max-height:calc(100dvh - 80px);overflow:hidden;display:flex;flex-direction:column;gap:9px;pointer-events:none}
/* Toast card, negative (danger) edge, exit state */
.gr-live-commission-toast{background:color-mix(in srgb, var(--grl-card-hi) 98%, transparent);border:1px solid color-mix(in srgb, var(--gr-boost-accent) 24%, transparent);border-left:5px solid var(--seed-success);border-radius:13px;box-shadow:0 14px 34px color-mix(in srgb, var(--grl-shade) 24%, transparent);padding:11px 13px;color:var(--grl-ink);transform:translateX(0);opacity:1;transition:opacity .25s ease,transform .25s ease;font-family:inherit;flex-shrink:0}
.gr-live-commission-toast.is-negative{border-left-color:var(--seed-danger)}.gr-live-commission-toast.is-out{opacity:0;transform:translateX(26px)}
/* Head row, amount, meta and status lines. Amount ink = semantic-ink formula (hue 70% toward --seed-fg, THEME_COLOR_SYSTEM §5) */
.gr-live-commission-toast__head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:900;line-height:1.25}
.gr-live-commission-toast__amount{color:color-mix(in srgb, var(--seed-success) 70%, var(--seed-fg));font-size:21px;font-weight:950;white-space:nowrap}.gr-live-commission-toast.is-negative .gr-live-commission-toast__amount{color:color-mix(in srgb, var(--seed-danger) 70%, var(--seed-fg))}
.gr-live-commission-toast__meta{margin-top:5px;font-size:12px;color:var(--grl-ink-mid);line-height:1.45}.gr-live-commission-toast__meta b{color:var(--grl-ink)}.gr-live-commission-toast__status{margin-top:3px;font-size:11px;color:var(--grl-ink-dim);line-height:1.35}
/* Special bonus card (.is-boost): pastel gradient, accent border, raised text layer */
.gr-live-commission-toast.is-boost{order:-1;border-color:var(--gr-boost-accent);background:linear-gradient(115deg,color-mix(in srgb, var(--grl-warm) 12%, var(--grl-card-hi)),color-mix(in srgb, var(--grl-pink) 7%, var(--grl-card-hi)) 48%,color-mix(in srgb, var(--gr-boost-accent) 12%, var(--grl-card-hi)));box-shadow:0 0 0 1px color-mix(in srgb, var(--grl-glow) 40%, transparent),0 4px 18px color-mix(in srgb, var(--gr-boost-accent) 20%, transparent);position:relative;overflow:hidden;isolation:isolate}
.is-boost .gr-live-commission-toast__head,.is-boost .gr-live-commission-toast__meta,.is-boost .gr-live-commission-toast__status{position:relative;z-index:1}
/* Bonus title, amount and meta ink on the boost card (the amount colour here loses to the (0,3,0) tier-styled amount rule in commission-bonus-burst.css whenever apply() ran, as in the pack) */
.gr-live-bonus-title{font-size:inherit;line-height:inherit;overflow-wrap:anywhere;color:color-mix(in srgb, var(--gr-boost-accent) 45%, var(--seed-fg));min-width:0}
.is-boost .gr-live-bonus-amount{color:color-mix(in srgb, var(--gr-boost-accent) 50%, var(--seed-fg));white-space:normal;overflow-wrap:anywhere;max-width:48%;text-align:right;flex-shrink:0}
.is-boost .gr-live-commission-toast__meta,.is-boost .gr-live-commission-toast__status{color:color-mix(in srgb, var(--gr-boost-accent) 50%, var(--seed-fg))}.is-boost .gr-live-commission-toast__meta b{color:color-mix(in srgb, var(--gr-boost-accent) 45%, var(--seed-fg))}
/* Celebration layer, bonus game line, shine sweep */
.gr-live-celebration{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.is-boost .gr-live-bonus-game{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-live-celebration::before{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 35%,color-mix(in srgb, color-mix(in srgb, var(--grl-warm) 25%, var(--grl-card-hi)) 40%, transparent) 45%,color-mix(in srgb, var(--grl-glow) 60%, transparent) 50%,color-mix(in srgb, color-mix(in srgb, var(--grl-pink) 35%, var(--grl-card-hi)) 40%, transparent) 55%,transparent 65%);transform:translateX(-70%) rotate(-8deg);animation:grbonusshine 2.3s ease-in-out 3}
@keyframes grbonusshine{0%,15%{transform:translateX(-70%) rotate(-8deg)}75%,100%{transform:translateX(70%) rotate(-8deg)}}
/* Sparkle/pulse particles: fireworks and glitter */
.gr-live-firework{position:absolute;left:calc(12% + var(--burst)*36%);top:calc(20% + var(--burst)*27%);width:1px;height:1px;color:var(--gr-boost-accent)}
.gr-live-firework i{position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:0 0 3px currentColor;opacity:0;animation:grfirework 1.8s ease-out 2;animation-delay:calc(var(--burst)*.32s);--angle:calc(var(--ray)*45deg)}
.gr-live-firework:nth-child(2){color:var(--grl-warm)}.gr-live-firework:nth-child(3){color:var(--grl-pink)}
.gr-live-glitter{position:absolute;left:calc(4% + var(--star)*13%);top:calc(8% + var(--star)*11%);font-size:11px;color:color-mix(in srgb, var(--grl-warm) 85%, var(--grl-shade));opacity:0;animation:grglitter 1.7s ease-in-out 3;animation-delay:calc(var(--star)*.16s)}
.gr-live-glitter:nth-child(even){color:var(--gr-boost-accent)}
/* Pulse glow and the particle keyframes */
.boost-pulse{animation:grboostglow 1.8s ease-in-out 2}
@keyframes grfirework{0%{opacity:0;transform:rotate(var(--angle)) translateX(0) scale(.3)}15%{opacity:.9}85%,100%{opacity:0;transform:rotate(var(--angle)) translateX(31px) scale(.4)}}
@keyframes grglitter{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}45%{opacity:.8;transform:scale(1) rotate(65deg)}}
@keyframes grboostglow{50%{box-shadow:0 0 0 1px color-mix(in srgb, var(--grl-glow) 40%, transparent),0 0 16px color-mix(in srgb, var(--gr-boost-accent) 33%, transparent)}}
/* Phone widths */
@media(max-width:640px){
 #gr-live-commission-toasts{top:58px;right:6px;width:min(220px,calc(100vw - 12px));gap:5px}
 .gr-live-commission-toast{padding:6px 7px;border-left-width:3px;border-radius:8px;box-shadow:0 4px 12px color-mix(in srgb, var(--grl-shade) 20%, transparent)}
 .gr-live-commission-toast__head{font-size:10px;line-height:1.3;gap:5px}
 .gr-live-commission-toast__amount{font-size:14px}
 .gr-live-commission-toast__meta{margin-top:3px;font-size:9px;line-height:1.35}
 .gr-live-commission-toast__status{margin-top:2px;font-size:9px;line-height:1.3}
 .gr-live-glitter{font-size:8px}.gr-live-firework i{width:2px;height:2px}
}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){.gr-live-commission-toast,.boost-pulse,.gr-live-firework i,.gr-live-glitter{animation:none!important;transition:none!important}.gr-live-celebration{display:none}}