/* WebGPU shader effects (static/js/shader-fx.js). The canvases only appear once a shader has rendered
   (.sfx-on / .is-ready); until then, and on browsers without WebGPU, the existing CSS look stays. */
.sfx-host{position:relative;isolation:isolate}
.sfx-canvas{display:block;pointer-events:none;opacity:0;transition:opacity .6s ease}
.sfx-canvas.is-ready{opacity:1}
.sfx-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;border-radius:inherit}
.sfx-host-bg>:not(.sfx-canvas){position:relative;z-index:1}
.sfx-cover{position:absolute;inset:0;width:100%;height:100%;z-index:1;border-radius:inherit}
.sfx-overlay{position:fixed;inset:0;width:100vw;height:100vh;z-index:9998}
.sfx-screen{mix-blend-mode:screen}.sfx-multiply{mix-blend-mode:multiply}
.sfx-overlay.is-leaving{opacity:0;transition:opacity .8s ease}

/* hero / heading backgrounds replace the CSS gradient once the shader draws */
.fam-hero.sfx-on{background:none}
.fam-hero.sfx-on .mini-cal{background:color-mix(in srgb,var(--surface,#fff) 78%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fam-list-head.sfx-host{padding:1.4rem 1.6rem;border-radius:1.4rem;overflow:hidden}
.pl-hero.sfx-host{border-radius:2rem;overflow:hidden;padding-inline:clamp(1rem,3vw,2.5rem)}
.sfx-aurora{opacity:0}.sfx-aurora.is-ready{opacity:.55}
:root[data-theme=dark] .sfx-aurora.is-ready{opacity:.8}

/* decorative bands inserted by the script */
.sfx-band{position:relative;height:clamp(5rem,12vw,8rem);border-radius:1.2rem;overflow:hidden;margin:0 0 1.2rem}
.sfx-chalk{background:#1f3a2e;height:clamp(4.5rem,10vw,6.5rem)}


/* empty-state frost block */
.sfx-frost{position:relative;display:grid;place-items:center;width:5.5rem;height:5.5rem}
.sfx-frost .sfx-canvas{position:absolute;inset:-.6rem;width:calc(100% + 1.2rem);height:calc(100% + 1.2rem)}
.sfx-frost>.icon,.sfx-frost>svg{position:relative;z-index:1}
.sfx-frost.sfx-on>.icon,.sfx-frost.sfx-on>svg{color:#fff;filter:drop-shadow(0 1px 2px #0005)}

/* noise meter waveform along the bottom of the scene */
.sfx-wave{position:absolute;left:0;right:0;bottom:0;height:38%;z-index:0;pointer-events:none}
.sfx-wave .sfx-canvas{opacity:0}.sfx-wave .sfx-canvas.is-ready{opacity:.55}


/* quiz roulette peel sits over the freshly dealt cards */
.sfx-peel{z-index:5;border-radius:1rem}

/* local preview switch (DEBUG only) */
.sfx-toggle{position:fixed;left:1rem;bottom:1rem;z-index:9999;padding:.45rem .8rem;border-radius:999px;background:#1d1d1f;color:#fff!important;font-size:.78rem;text-decoration:none;box-shadow:0 6px 20px #0003}
@media (prefers-reduced-motion:reduce){.sfx-canvas{display:none}}

/* Glass buttons (CSS only, so they work on every browser). Off with ?fx=off (.sfx-off) or SHADER_FX=0.
   A frosted body, a bright top edge, a soft inner shadow and a light band that sweeps across on hover.
   Buttons that sit on their own dark or coloured surfaces keep their original look. */
:root:not(.sfx-off) .button:not(:is(.hero-search *, .calendar-heading>*, .calendar-toolbar .actions>*, .ct-after *)){
  --g-top:rgba(255,255,255,.92);--g-bottom:rgba(255,255,255,.55);--g-edge:rgba(255,255,255,.95);--g-rim:rgba(24,26,32,.12);--g-drop:rgba(24,26,32,.10);--g-sheen:rgba(255,255,255,.75);
  position:relative;isolation:isolate;
  background:linear-gradient(115deg,transparent 35%,var(--g-sheen) 50%,transparent 65%) -150% 0/250% 100% no-repeat,
             linear-gradient(180deg,var(--g-top),var(--g-bottom));
  -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--g-edge),inset 0 -1px 0 rgba(0,0,0,.05),0 0 0 1px var(--g-rim),0 6px 18px -6px var(--g-drop);
  transition:background-position .7s cubic-bezier(.2,.8,.2,1),box-shadow .2s,transform .15s,color .15s}
:root:not(.sfx-off) .button:not(:is(.hero-search *, .calendar-heading>*, .calendar-toolbar .actions>*, .ct-after *)):hover{background-position:150% 0,0 0;box-shadow:inset 0 1px 0 var(--g-edge),inset 0 -1px 0 rgba(0,0,0,.05),0 0 0 1px var(--g-rim),0 10px 24px -8px var(--g-drop)}
:root:not(.sfx-off) .button:not(:is(.hero-search *, .calendar-heading>*, .calendar-toolbar .actions>*, .ct-after *)):active{transform:scale(.97)}
/* primary: tinted glass in the accent colour */
:root:not(.sfx-off) .button.primary:not(:is(.hero-search *, .ct-after *)){
  --g-top:color-mix(in srgb,var(--accent) 72%,#fff);--g-bottom:var(--accent);--g-edge:rgba(255,255,255,.55);--g-rim:color-mix(in srgb,var(--accent) 60%,#000 10%);--g-drop:color-mix(in srgb,var(--accent) 55%,transparent);--g-sheen:rgba(255,255,255,.45);color:#fff}
/* dark theme */
:root[data-theme=dark]:not(.sfx-off) .button:not(:is(.hero-search *, .calendar-heading>*, .calendar-toolbar .actions>*, .ct-after *)){
  --g-top:rgba(255,255,255,.14);--g-bottom:rgba(255,255,255,.05);--g-edge:rgba(255,255,255,.22);--g-rim:rgba(255,255,255,.10);--g-drop:rgba(0,0,0,.55);--g-sheen:rgba(255,255,255,.18)}
:root[data-theme=dark]:not(.sfx-off) .button.primary:not(:is(.hero-search *, .ct-after *)){
  --g-top:rgba(255,255,255,.95);--g-bottom:rgba(225,226,230,.85);--g-edge:#fff;--g-rim:rgba(255,255,255,.2);--g-drop:rgba(0,0,0,.6);--g-sheen:rgba(255,255,255,.9);color:#1e1e1e}
@media (prefers-reduced-motion:reduce){:root:not(.sfx-off) .button{transition:none}}