/* The Gilded Chamber pop-outs and Liquid Glass (loaded after styles.css and transit.css; behaviour in js/fx.js).
   Only transform and opacity are ever animated: no layout, no blur, no box-shadow changes (shadows are static and layered).
   Every overlay is one-shot, <= 400 ms in total (the motion budget, 2026-10-29), and eases with var(--ease-out). will-change is set by the script only while
   something animates. Reduced motion (html[data-fxlite]) and the Animations switch show no motion at all. No backdrop-filter anywhere. */

/* ================================================================ glass panels */
/* Solid, tinted panels for pop-outs and overlays (.glass, .gl-card): never page cards or the bottom pill. */
:is(.glass,.gl-card){
  position:relative;color:var(--on-glass);
  background:linear-gradient(140deg,color-mix(in srgb,var(--btn) 14%,transparent),transparent 62%),var(--glass);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.4),0 14px 28px -14px rgba(0,0,0,.7)}
/* the chat feed and the log are long lists: solid, never glass */
.chat .msgs,.msgs.log{background:var(--panel);border-radius:var(--f-r-card);padding:var(--s2)}
.chat-form{background:transparent}
@media (min-width:1100px){
  .col-side{background:transparent;border:0;padding:0;overflow:visible;max-height:none}
  .col-side .pane-sec{max-height:calc(100dvh - var(--appbar-h) - var(--s5) - 60px);overflow:auto}
}
.fx-card{--candle:var(--on-glass);--smoke:var(--on-glass)}

/* ================================================================ overlay layer */
#fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.fx-ov{position:absolute;inset:0;display:grid;place-items:center}
.fx-3d{position:relative;display:grid;place-items:center}
.fx-ov{animation:fx-ov-out 80ms var(--ease-out) 320ms both}
.is-reform{--fill:var(--reform-fill)} .is-decree{--fill:var(--cabal-fill)}

/* art-deco gold lines that sweep out behind a card */
.fx-line{position:absolute;left:50%;width:100vw;margin-left:-50vw;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);
  transform:scaleX(0);opacity:0;animation:fx-line 320ms var(--ease-out) both}
.fx-line-t{top:-18px} .fx-line-b{bottom:-18px;animation-delay:40ms}
.fx-diamond{position:absolute;top:-26px;left:50%;width:16px;height:16px;margin-left:-8px;background:var(--gold);transform:rotate(45deg) scale(0);animation:fx-diamond 240ms var(--ease-out) 40ms both}

/* an enactment slams onto the board */
.fx-slam{position:relative;display:grid;place-items:center;width:min(44vw,190px);aspect-ratio:3/4;animation:fx-slam 187ms var(--ease-out) both}
.fx-slam-face{display:grid;place-items:center;align-content:center;gap:6px;width:100%;height:100%;border-radius:var(--f-r-card);background:var(--fill);color:var(--on-fill);
  font:900 1.5rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.06em;
  box-shadow:inset 0 0 0 4px var(--fill),inset 0 0 0 6px var(--on-fill),inset 0 0 0 8px var(--fill),inset 0 0 0 9px var(--gold),0 2px 0 rgba(26,20,16,.4),0 9px 0 -1px rgba(26,20,16,.3),0 26px 36px -18px rgba(26,20,16,.7)}
.fx-slam-face .ico{width:52%;height:auto;aspect-ratio:1}
.fx-stamp{position:absolute;left:50%;bottom:12%;padding:2px 12px;border:3px solid var(--on-fill);border-radius:var(--f-r-field);background:var(--fill);color:var(--on-fill);
  font:900 1rem/1.3 var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-style:normal;transform:translateX(-50%) rotate(-9deg) scale(0);animation:fx-stamp 187ms var(--ease-out) 107ms both}

/* cards drawn from the pile slide out, face down */
.fx-hand{position:relative;width:260px;height:150px}
.fx-back{position:absolute;left:50%;top:0;display:grid;place-items:center;width:88px;margin-left:-44px;aspect-ratio:3/4;border-radius:var(--f-r-field);color:var(--gold);
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(226,176,74,.2) 0 7.5deg,transparent 7.5deg 15deg),radial-gradient(circle,#3A2410,#140A03);
  box-shadow:inset 0 0 0 3px #140A03,inset 0 0 0 4.5px var(--gold),0 2px 0 rgba(26,20,16,.4),0 14px 22px -12px rgba(26,20,16,.7);
  animation:fx-draw 213ms var(--ease-out) calc(var(--i) * 22ms) both}
.fx-back .ico{width:55%;height:auto;aspect-ratio:1}

/* the third failed government: the tracker clicks forward */
.fx-pill{display:flex;align-items:center;gap:14px;padding:14px 26px;border-radius:var(--f-r-pill);animation:fx-pop 187ms var(--ease-out) both}
.fx-pill b{font:900 1.3rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.08em}
.fx-pill .fx-3of3{font-size:2.4rem}
.fx-pips{display:flex;gap:8px}
.fx-pips i{position:relative;width:26px;height:26px;border-radius:var(--f-r-round);border:3px solid var(--candle)}
.fx-pips i.on{background:var(--cabal-fill)}
.fx-pips i.last::after{content:"";position:absolute;inset:-3px;border-radius:var(--f-r-round);background:var(--cabal-fill);transform:scale(0);animation:fx-click 187ms var(--ease-out) 160ms both}

/* an execution: the table dims, the player's card fades out */
.fx-scrim{position:absolute;inset:0;background:rgba(12,5,0,.6);animation:fx-scrim-in 147ms var(--ease-out) both}
.fx-victim{position:relative;display:grid;justify-items:center;gap:4px;padding:22px 34px;border-radius:var(--f-r-card);overflow:hidden;animation:fx-victim 200ms var(--ease-out) both}
.fx-victim b{font:900 1.6rem/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.05em}
.fx-victim small{font-weight:700;font-size:1rem}
.fx-disc{display:grid;place-items:center;width:68px;aspect-ratio:1;border-radius:var(--f-r-round);background:var(--cabal-fill);color:var(--on-fill);border:3px solid var(--candle);font:900 2rem/1 var(--font-display)}
.fx-gone{position:absolute;inset:0;background:rgba(26,20,16,.6);opacity:0;animation:fx-gone 187ms var(--ease-out) 187ms both}

/* ================================================================ effects on the page */
[data-roll]{display:inline-block}
.fx-roll{animation:fx-roll 200ms var(--ease-out) both}
.fx-click{animation:fx-click 200ms var(--ease-out) both}
.fx-slot-slam{animation:fx-slot-slam 240ms var(--ease-out) both}
.tiles{position:relative}

/* ================================================================ particles */
.fx-p{position:absolute;width:var(--w);height:var(--w);background:var(--c);border-radius:2px;opacity:0;pointer-events:none}
.fx-spark{border-radius:50% 0 50% 0;animation:fx-fly var(--t) var(--ease-out) var(--d) both,fx-fade var(--t) linear var(--d) both}
.fx-conf{height:calc(var(--w) * 1.6);animation:fx-fall var(--t) var(--ease-out) var(--d) both,fx-fade var(--t) linear var(--d) both}

/* ================================================================ the victory pop-up */
.fx-over{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;overflow-x:clip;overflow-y:auto;overscroll-behavior:none;touch-action:pan-y}
.fx-over .fx-scrim{position:fixed;background:rgba(12,5,0,.6);animation:fx-scrim-in 240ms var(--ease-out) both;pointer-events:auto}
.fx-pop{position:relative;width:min(100%,420px);margin:auto;animation:fx-spring 240ms var(--ease-out) both}
.fx-card{overflow:hidden;border-radius:var(--f-r-sheet);padding:0 0 18px}
.fx-fan{position:absolute;left:50%;bottom:calc(100% - 46px);width:min(135%,560px);transform:translateX(-50%);transform-origin:50% 100%;pointer-events:none;animation:fx-fan 240ms var(--ease-out) 53ms both}
.fx-band{display:grid;justify-items:center;gap:4px;padding:18px 16px 14px;background:var(--fill);color:var(--on-fill);text-align:center}
.fx-band h2{font:900 clamp(2rem,8vw,2.8rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em}
.fx-mascot{width:84px;height:84px;animation:fx-hop 200ms var(--ease-out) 80ms both}
.fx-reason{padding:14px 18px 0;text-align:center;font:800 1.15rem/1.3 var(--font-ui)}
.fx-you{padding:6px 18px 0;text-align:center;font:900 2.4rem/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.04em;animation:fx-stamp-in 200ms var(--ease-out) 107ms both}
.fx-you.is-won{color:var(--gold-ink)}
.fx-you.is-lost{color:var(--on-glass)}
.fx-roles-wrap{max-height:30vh;overflow:auto;padding:10px 16px 0}
.fx-turn{text-align:center;font-weight:700}
.fx-roles{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:0;padding:0;list-style:none}
.fx-roles li{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 10px;border-radius:var(--f-r-field);background:var(--fill);color:var(--on-fill);animation:fx-fade 160ms var(--ease-out) calc((80ms + var(--i) * 16ms)) both}
.fx-roles .ico{width:26px;height:26px;flex:none}
.fx-roles span{display:grid;min-width:0;line-height:1.15}
.fx-roles b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-roles small{font-size:.8rem;font-weight:600}
.fx-btns{display:grid;gap:8px;padding:14px 16px 0}
.fx-wait{margin:0;padding:12px 0;text-align:center;opacity:.8}
.fx-parts{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.fx-over.is-out{animation:fx-fade-out 120ms var(--ease-out) both}
.fx-over.is-static *,.fx-over.is-static{animation:none!important}

/* ================================================================ keyframes (transform and opacity only) */
@keyframes fx-ov-out{to{opacity:0}}
@keyframes fx-line{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes fx-diamond{from{transform:rotate(45deg) scale(0);opacity:0}to{transform:rotate(45deg) scale(1);opacity:1}}
@keyframes fx-slam{from{transform:scale(1.3);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-stamp{from{transform:translateX(-50%) rotate(-9deg) scale(1.4);opacity:0}to{transform:translateX(-50%) rotate(-9deg);opacity:1}}
@keyframes fx-draw{from{transform:translate(0,-60px) scale(.7);opacity:0}to{transform:translate(calc(var(--o) * 72px),0) rotate(calc(var(--o) * 8deg));opacity:1}}
@keyframes fx-pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-click{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-victim{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-gone{from{opacity:0}to{opacity:1}}
@keyframes fx-roll{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-slot-slam{from{transform:scale(1.5);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-fly{from{transform:translate(-50%,-50%) scale(.3) rotate(0)}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--r))}}
@keyframes fx-fall{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@keyframes fx-fade{0%{opacity:0}10%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes fx-scrim-in{from{opacity:0}to{opacity:1}}
@keyframes fx-fade-out{from{opacity:1}to{opacity:0}}
@keyframes fx-spring{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-fan{from{transform:translateX(-50%) scale(.8);opacity:0}to{transform:translateX(-50%);opacity:1}}
@keyframes fx-hop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-stamp-in{from{transform:scale(1.25) rotate(-2deg);opacity:0}to{transform:rotate(-2deg);opacity:1}}

/* Reduced motion and the Animations switch: nothing moves (the script also skips the overlays). */
@media (prefers-reduced-motion:reduce){#fx *,#fx,.fx-over *,.fx-over,.fx-roll,.fx-click,.fx-slot-slam{animation:none!important}}
html[data-fxlite] :is(#fx,#fx *,.fx-over,.fx-over *,.fx-roll,.fx-click,.fx-slot-slam){animation:none!important}