#fx-root { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; contain: strict; }
#fx-root > * { position: absolute; pointer-events: none; }
.fx-l { display: none; }
#fx-root canvas.fx-cv { inset: 0; width: 100%; height: 100%; }
#fx-back { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }
html.fxon-stars #fx-back { display: block; }
html.fxon-stars #desktop { background-color: transparent; }

html.fxon-scan .fx-l-scan { display: block; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, calc(.5 * var(--fx-scan, .5))) 0 1px, transparent 1px 3px); }
html.fxon-scan .fx-l-roll { display: block; left: 0; right: 0; top: 0; height: 22vh; opacity: calc(.07 * var(--fx-scan, .5) / .5);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .9) 55%, transparent); animation: fx-roll 7s linear infinite; }
@keyframes fx-roll { from { transform: translateY(-30vh); } to { transform: translateY(105vh); } }

html.fxon-grain .fx-l-grain { display: block; inset: 0; background-size: 128px 128px; image-rendering: pixelated; opacity: calc(.26 * var(--fx-grain, .5)); }

html.fxon-flicker .fx-l-flick { display: block; inset: 0; opacity: calc(.2 * var(--fx-flick, .5)); }
.fx-l-flick i { position: absolute; inset: 0; background: #000; animation: fx-flick .31s steps(1) infinite; }
@keyframes fx-flick { 0% { opacity: .1; } 14% { opacity: .75; } 22% { opacity: .2; } 41% { opacity: 1; } 55% { opacity: .15; } 73% { opacity: .6; } 88% { opacity: .05; } }

html.fxon-refl .fx-l-refl { display: block; inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, calc(.12 * var(--fx-refl, .5))) 0, rgba(255, 255, 255, calc(.03 * var(--fx-refl, .5))) 26%, transparent 42%),
              radial-gradient(55% 38% at 16% 8%, rgba(255, 255, 255, calc(.10 * var(--fx-refl, .5))), transparent 72%); }

/* barrel curvature: displacement filter on the desktop layer, plus glass edge shading everywhere */
html.fxon-curve .fx-l-curv { display: block; inset: 0; border-radius: calc(10px + 38px * var(--fx-curve, .5));
  box-shadow: inset 0 0 calc(30px + 120px * var(--fx-curve, .5)) calc(4px + 22px * var(--fx-curve, .5)) rgba(0, 0, 0, calc(.35 + .4 * var(--fx-curve, .5))); }

html.fxon-crt .fx-l-crt { display: block; inset: calc(2px + 16px * var(--fx-crt, .5)); border-radius: calc(8px + 22px * var(--fx-crt, .5));
  box-shadow: 0 0 0 100vmax #000, inset 0 0 calc(40px + 160px * var(--fx-crt, .5)) rgba(0, 0, 0, calc(.35 + .5 * var(--fx-crt, .5))), inset 0 0 0 1px rgba(255, 255, 255, .08); }

html.fxon-light .fx-l-light { display: block; inset: 0;
  background: radial-gradient(circle calc(180px + 220px * var(--fx-light, .5)) at var(--fx-mx, 50%) var(--fx-my, 50%), transparent 0, rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, calc(.55 + .35 * var(--fx-light, .5))) 100%); }

html.fxon-clight .card, html.fxon-clight .page .win {
  background-image: radial-gradient(240px circle at var(--lx, -999px) var(--ly, -999px), rgba(255, 255, 255, calc(.09 * var(--fx-clight, .5) / .5)), transparent 70%); }

.fx-panel { position: fixed; z-index: 200; width: 330px; max-width: calc(100vw - 16px); max-height: min(78vh, 640px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: inset 0 1px 0 var(--glow), 0 18px 48px rgba(0, 0, 0, .55); font: 12px/17px var(--sans); color: var(--ink); }
.fx-ph { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--line); }
.fx-ph b { font: 500 12px/1 var(--sans); flex: 1; }
.fx-ph .dd-wrap { width: 118px; }
.fx-ph .btn { padding: 6px 9px; font-size: 11px; }
.fx-pb { overflow: auto; padding: 4px 12px 10px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.fx-g { margin: 12px 0 2px; font: 11px/1 var(--mono); letter-spacing: .05em; color: var(--dim); }
.fx-row { display: grid; grid-template-columns: 1fr 96px; gap: 12px; align-items: center; min-height: 30px; }
.fx-row .chk { display: flex; align-items: center; gap: 10px; min-height: 28px; color: var(--ink-2); }
.fx-row .chk input:checked ~ span { color: var(--ink); }
.fx-row input[type=range] { opacity: .45; transition: opacity .2s; }
.fx-row.on input[type=range] { opacity: 1; }
.fx-note { padding: 10px 12px; font: 11px/17px var(--mono); color: var(--dim); border-bottom: 1px solid var(--line); }
.fx-pf { padding: 8px 12px; border-top: 1px solid var(--line); font: 11px/15px var(--mono); color: var(--dim); }
[data-fx-open][aria-expanded="true"] { color: var(--ink); border-color: var(--line-2); }

@media (prefers-reduced-motion: reduce) {
  #fx-root, #fx-back { display: none !important; }
}