/* 14.0 · FX: the reward overlay, the chip that counts a reward in, words that pop, and the sparkly
   card for big moments (fx.js). Link it just before glow.css (which has to stay last): the chip and
   the card borrow glow.css's frosted glass and panel colours through its variables, with fallbacks
   so they still look right without it, and the selectors here are specific enough to hold either way. */

/* ---- the overlay: a popover in the top layer, over every open dialog, never taking a touch ------- */
.wfx{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:inherit;font:inherit;overflow:visible;pointer-events:none!important;z-index:2147483000;contain:strict}
.wfx:popover-open{display:block}
.wfx::backdrop{background:transparent;pointer-events:none}
.wfx *{pointer-events:none!important}
.wfx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Without popovers the overlay rides inside the open dialog, where the game's own rules for a
   dialog's canvases would otherwise size and move these; nothing outside reaches in. */
.wfx canvas{margin:0!important;padding:0!important;border:0!important;max-width:none!important;max-height:none!important;transform:none!important;filter:none!important;opacity:1!important;image-rendering:pixelated}
.wfx>.wfx-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;image-rendering:auto}
.wfx .wfx-chip-icon canvas{display:block!important;width:var(--w)!important;height:var(--h)!important}
.wfx-chips,.wfx-pops{position:absolute;inset:0}

/* ---- the chip: frosted glass, the kind's own glow, the number counting up --------------------------- */
.wfx{
  --wfx-chip-bg:var(--fr-bg,linear-gradient(180deg,rgba(34,58,116,.9) 0%,rgba(16,32,72,.88) 100%));
  --wfx-chip-edge:var(--fr-edge,rgba(170,205,255,.3));
  --wfx-chip-ink:var(--fr-ink,#ffffff);--wfx-chip-label:var(--fr-label,#a9dcff)}
/* by night the bar's glass is thin enough to see the landscape through; over a busy panel it needs more body */
html[data-lux="dusk"] .wfx,html:not([data-lux]) .wfx{--wfx-chip-bg:linear-gradient(180deg,rgba(40,68,132,.94) 0%,rgba(18,36,82,.94) 100%)}
.wfx-chip{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:calc(env(safe-area-inset-top,0px) + 10px);will-change:transform,opacity}
.wfx-chip-in{display:flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 13px;border-radius:999px;
  background:var(--wfx-chip-bg);border:1px solid var(--wfx-chip-edge);color:var(--wfx-chip-ink);
  box-shadow:0 10px 26px rgba(0,8,30,.32),inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px color-mix(in srgb,var(--wfx-c) 30%,transparent),0 0 24px color-mix(in srgb,var(--wfx-c) 38%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  font:inherit;font-size:18px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,8,30,.45);transition:box-shadow .25s}
.wfx-chip-icon{display:grid;place-items:center;width:22px;height:22px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--wfx-c) 70%,transparent))}
.wfx-chip-num{display:inline-block;font-variant-numeric:tabular-nums;color:var(--wfx-c);
  text-shadow:0 1px 0 color-mix(in srgb,var(--wfx-rim,#000) 75%,transparent),0 0 10px color-mix(in srgb,var(--wfx-c) 45%,transparent)}
.wfx-chip-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--wfx-chip-label);opacity:.95}
.wfx-chip.is-done .wfx-chip-in{box-shadow:0 10px 26px rgba(0,8,30,.32),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1.5px color-mix(in srgb,var(--wfx-c) 70%,transparent),0 0 34px color-mix(in srgb,var(--wfx-c) 60%,transparent)}
/* inside a dialog (the fallback for browsers without popovers) the chip still reads */
.wfx.is-inside{z-index:50}

/* ---- pop: words that spring up and fade ----------------------------------------------------------- */
.wfx-pop{position:absolute;left:0;top:0;white-space:nowrap;font:inherit;font-weight:700;line-height:1;color:var(--wfx-c,#ffe08a);will-change:transform,opacity;
  text-shadow:0 1px 0 rgba(10,14,40,.55),0 2px 6px rgba(10,20,50,.4),0 0 14px color-mix(in srgb,var(--wfx-c,#ffe08a) 55%,transparent)}

/* ---- celebrate: the sparkly card for big moments --------------------------------------------------
   A full-screen dialog of its own that is a stage, not a panel: the card floats in the middle over
   slowly turning light. The !importants are there because the game styles every dialog as a panel. */
html dialog.wfx-cel{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:16px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:hidden!important;animation:none!important;
  color:var(--c-text,#f4f7ff);outline:none;display:none}
html dialog.wfx-cel[open]{display:grid!important;place-items:center}
html dialog.wfx-cel::backdrop,html.glow dialog.wfx-cel::backdrop{animation:none!important;
  background:radial-gradient(70% 55% at 50% 45%,color-mix(in srgb,var(--wfx-c,#ffe08a) 16%,rgba(6,12,36,.6)) 0%,rgba(4,10,30,.82) 100%)!important;
  -webkit-backdrop-filter:blur(6px) saturate(1.2)!important;backdrop-filter:blur(6px) saturate(1.2)!important}
.wfx-cel-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wfx-cel-fx .glow-motes{position:absolute;inset:0;width:100%;height:100%}
/* rays: soft wedges of the moment's colour, fading out from the middle, turning slowly */
.wfx-cel-rays{position:absolute;left:50%;top:46%;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--wfx-c,#ffe08a) 30%,transparent) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 40%,transparent 100%);mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 40%,transparent 100%);
  animation:wfx-turn 26s linear infinite;will-change:transform}
.wfx-cel-bloom{position:absolute;left:50%;top:46%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--wfx-c,#ffe08a) 40%,transparent) 0%,color-mix(in srgb,var(--wfx-c,#ffe08a) 12%,transparent) 55%,transparent 100%)}
@keyframes wfx-turn{to{transform:rotate(360deg)}}
.wfx-cel-card{position:relative;width:min(330px,100%);padding:30px 22px 20px;text-align:center;border-radius:28px;
  background:var(--c-panel,linear-gradient(180deg,#24407e 0%,#142856 46%,#0c1a3c 100%));color:var(--c-text,#f4f7ff);
  border:1px solid color-mix(in srgb,var(--wfx-c,#ffe08a) 45%,var(--c-panel-edge,rgba(170,205,255,.2)));
  box-shadow:var(--c-panel-shadow,0 32px 80px rgba(0,6,24,.6)),0 0 0 4px color-mix(in srgb,var(--wfx-c,#ffe08a) 14%,transparent),0 0 70px color-mix(in srgb,var(--wfx-c,#ffe08a) 38%,transparent);
  will-change:transform,opacity}
.wfx-cel-icon{width:104px;height:104px;margin:-82px auto 6px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--wfx-c,#ffe08a) 55%,transparent) 0%,color-mix(in srgb,var(--wfx-c,#ffe08a) 18%,transparent) 60%,transparent 100%)}
.wfx-cel-icon[hidden]{display:none}
.wfx-cel-icon canvas{display:block;max-width:84px;max-height:84px;image-rendering:pixelated;filter:drop-shadow(0 4px 10px rgba(0,8,30,.35))}
.wfx-cel-glyph{font-size:48px;line-height:1;color:var(--wfx-c,#ffe08a);text-shadow:0 2px 0 rgba(10,14,40,.4),0 0 18px color-mix(in srgb,var(--wfx-c,#ffe08a) 70%,transparent)}
html .wfx-cel-title{font:inherit;font-size:22px;font-weight:700;letter-spacing:.08em;line-height:1.3;margin:4px 0 8px;color:var(--c-text,#f4f7ff)!important;text-transform:uppercase}
html .wfx-cel-line{font:inherit;font-size:14px;line-height:1.65;margin:0 auto 18px;max-width:270px;color:var(--c-text2,#c6d2ec)!important}
.wfx-cel-line[hidden]{display:none}
html dialog.wfx-cel .wfx-cel-btn{width:100%;margin:0}
html dialog.wfx-cel .wfx-cel-btn:focus-visible{outline:2px solid var(--c-accent-text,#8fd2ff);outline-offset:3px}

/* Reduce Motion: no turning light (fx.js already skips the particles and the springs) */
@media (prefers-reduced-motion:reduce){.wfx-cel-rays{animation:none}}
html.reduced-motion .wfx-cel-rays{animation:none}