/* fx-juice.css — styles for fx.js game-feel effects. 2026-09-23 · Stardate 2026.266.
   Every surface here is aria-hidden, pointer-events:none, and sits BELOW the dialogs
   (overlays start at z-index 50). Colors, type and easing come from hw-tokens.css.
   Reduced motion: fx.js starts no motion at all; the layers below are also switched off. */

/* ---- layers ---- */
#fxFloat{position:fixed;inset:0;z-index:44;pointer-events:none;overflow:hidden}
#fxToasts{position:fixed;top:calc(var(--fx-strip-h,64px) + 18px);right:14px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  width:min(340px,calc(100vw - 28px));pointer-events:none}
#fxLayer,#fxLayer *{pointer-events:none}

/* ---- count-up twins (the real value stays in the DOM for screen readers) ---- */
.fx-twin{display:none;font-variant-numeric:tabular-nums;pointer-events:none}
.fx-twin.on{display:inline-block;text-align:left}
.fx-counting{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ---- light sweeps: command strip, a vault hitting cap, the build line ---- */
.fx-sweep{position:absolute;overflow:hidden;pointer-events:none}
.fx-sweep i{position:absolute;top:0;bottom:0;left:0;width:40%;opacity:.34;
  background:linear-gradient(90deg,transparent,var(--hw-cyan-soft,#7ddfff),transparent)}
.fx-sweep.fx-full i{opacity:.3;background:linear-gradient(90deg,transparent,var(--hw-gold-soft,#f2c96d),transparent)}
.fx-sweep.fx-soft i{opacity:.22}

/* ---- floating resource chips ---- */
.fx-chip{position:absolute;padding:2px 7px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font:600 var(--hw-fs-sm,.78rem)/1.2 var(--hw-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;
  background:rgba(4,5,11,.78);border:1px solid currentColor;text-shadow:0 0 8px currentColor}
.fx-chip.fx-gain{color:var(--hw-green,#4ade80)}
.fx-chip.fx-spend{color:var(--hw-gold,#fbbf24)}

/* ---- scene layer (inside #planetScene) ---- */
#fxDayGrad stop{stop-color:var(--hw-cyan-soft,#7ddfff)}
#fxBloomGrad stop{stop-color:var(--hw-gold-soft,#f2c96d)}
#fxLayer .fx-day{mix-blend-mode:screen}
#fxLayer .fx-ring{fill:none;stroke:var(--hw-gold,#fbbf24);stroke-width:2}
#fxLayer .fx-ray{stroke:var(--hw-cyan-soft,#7ddfff);stroke-width:1.6;stroke-linecap:round}
#fxLayer .fx-big .fx-ring{stroke:var(--hw-gold-soft,#f2c96d);stroke-width:3}
#fxLayer .fx-big .fx-ray{stroke:var(--hw-gold,#fbbf24);stroke-width:2.2}

/* ---- toasts ---- */
.fx-toast{max-width:100%;padding:8px 12px;border-radius:var(--hw-radius-sm,8px);pointer-events:none;
  background:var(--hw-panel-raised,rgba(24,27,52,.94));border:1px solid var(--hw-line-strong,rgba(120,170,255,.36));
  border-left:3px solid var(--hw-cyan,#22d3ee);box-shadow:var(--hw-shadow,0 18px 50px rgba(0,0,0,.45));
  color:var(--hw-ink,#eaf0ff);font:500 var(--hw-fs-sm,.78rem)/1.35 var(--hw-body,system-ui,sans-serif)}
.fx-toast b{display:block;margin-bottom:2px;color:var(--hw-cyan-soft,#7ddfff);
  font:600 var(--hw-fs-micro,.68rem)/1.2 var(--hw-mono,ui-monospace,monospace);letter-spacing:var(--hw-track-label,.14em)}
.fx-toast-big{padding:12px 16px;border-left-color:var(--hw-gold,#fbbf24);font-size:var(--hw-fs-body,.95rem);
  box-shadow:var(--hw-shadow,0 18px 50px rgba(0,0,0,.45)),0 0 28px rgba(251,191,36,.22)}
.fx-toast-big b{color:var(--hw-gold,#fbbf24)}
@media (max-width:640px){
  #fxToasts{top:auto;bottom:12px;left:12px;right:12px;width:auto;align-items:stretch}
}

/* ---- affordability hint on structure cards ---- */
.scard .fxHint{display:none;color:var(--hw-ink-2,#c3cbe6);letter-spacing:.02em;
  font:500 var(--hw-fs-micro,.68rem)/1.4 var(--hw-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.scard .fxHint.on{display:block}
.scard .fxHint.fx-dry{color:var(--hw-orange,#ffae6f)}
.scard.maxed .fxHint{display:none}

@media (prefers-reduced-motion:reduce){
  #fxFloat,#fxLayer{display:none}
  .fx-toast{animation:none!important;transition:none!important}
}