/* fx.css — premium visual layer (2026-10-25). Pure CSS 3D / animations; all motion off under prefers-reduced-motion. */
:root{--fx-glow:#7dd3fc}
body{background-image:radial-gradient(1200px 600px at 10% -10%,#38bdf81f,transparent 60%),radial-gradient(900px 500px at 110% 10%,#f59e0b17,transparent 60%),radial-gradient(800px 600px at 50% 120%,#6366f11a,transparent 60%);background-attachment:fixed;background-size:140% 140%;animation:fxBg 40s ease-in-out infinite alternate}
@keyframes fxBg{0%{background-position:0% 0%}100%{background-position:100% 60%}}
.stick,.tabbar{-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);background:color-mix(in srgb,var(--bg,#0b1020) 68%,transparent)!important;border-bottom:1px solid #ffffff14}
.tabbar{border-top:1px solid #ffffff14}
nav#tabs{position:relative}
.fx-ind{position:absolute;bottom:2px;height:3px;border-radius:3px;background:linear-gradient(90deg,#38bdf8,#818cf8,#f59e0b);box-shadow:0 0 10px #818cf8aa;transition:left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.card,.lv-it.sb,.mc{position:relative;transform-style:preserve-3d;box-shadow:0 1px 1px #0003,0 4px 10px #0003,0 14px 28px -10px #0006,inset 0 1px 0 #ffffff14;transition:transform .25s ease}
.card::after,.lv-it.sb::after,.mc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(135deg,#ffffff30,#ffffff05 40%,#ffffff00 60%,#ffffff18);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx-press{transform:perspective(700px) scale(.975)!important}
.fx-in{animation:fxUp .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sb-n.bump,.fx-flip{display:inline-block;animation:fxFlip .6s cubic-bezier(.2,.8,.2,1) both,fxGlow 1.4s ease-out both!important}
@keyframes fxFlip{0%{transform:perspective(300px) rotateX(-90deg);opacity:.2}60%{transform:perspective(300px) rotateX(15deg);opacity:1}100%{transform:none}}
@keyframes fxGlow{0%,30%{text-shadow:0 0 14px var(--fx-glow),0 0 28px var(--fx-glow)}100%{text-shadow:none}}
.sb-pill.in,.live.in{animation:fxPulse 1.8s ease-in-out infinite}
@keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 #f8717166}50%{box-shadow:0 0 0 6px #f8717100}}
.fx-hit{position:relative;animation:fxShine 1s ease-out}
@keyframes fxShine{0%{filter:brightness(1)}30%{filter:brightness(1.8) drop-shadow(0 0 6px #4ade80)}100%{filter:none}}
.fx-miss{display:inline-block;animation:fxShake .45s ease-in-out;opacity:.85}
@keyframes fxShake{0%,100%{transform:none}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}}
.fx-conf{position:fixed;width:6px;height:6px;border-radius:1px;pointer-events:none;z-index:9999}
.fx-skel{display:grid;gap:10px;padding:12px}
.fx-skel i{display:block;height:74px;border-radius:14px;background:linear-gradient(100deg,#ffffff0a 30%,#ffffff1f 50%,#ffffff0a 70%);background-size:300% 100%;animation:fxShim 1.3s linear infinite}
@keyframes fxShim{from{background-position:100% 0}to{background-position:-100% 0}}
#fxSnd{background:none;border:0;font-size:18px;cursor:pointer;padding:4px 6px;opacity:.9}
@media (prefers-reduced-motion:reduce){body,.sb-pill.in,.live.in,.fx-skel i{animation:none!important}.fx-in,.fx-hit,.fx-miss,.sb-n.bump,.fx-flip{animation:none!important}.card,.lv-it.sb,.mc{transition:none}.fx-ind{transition:none}}
/* fx2 (2026-10-25): score = digits-only swap; premium proto/record */
.sb-n.bump,.fx-flip,.bump,.ou-t.bump{animation:fxNum .45s ease-out both!important;text-shadow:none!important;transform:none!important;box-shadow:none!important;background:none!important}
@keyframes fxNum{from{opacity:0}to{opacity:1}}
.pmeta,.rc-rd,.psec,.tp-row,.rc-it,.prow{border:1px solid #fbbf2433!important}
.pmeta,.rc-rd{background:linear-gradient(160deg,#ffffff0d,#ffffff03 45%,#00000014)!important}
.rc-kpi>div{border-radius:14px;border:1px solid #fbbf2440;background:linear-gradient(160deg,#ffffff12,#ffffff03);box-shadow:inset 0 1px 0 #ffffff1f,0 6px 14px -6px #0008}
.rc-kpi>div b{background:linear-gradient(180deg,#fff,#fde68a);-webkit-background-clip:text;background-clip:text;color:transparent}
.rc-it,.tp-row,.prow{border-radius:12px;background:linear-gradient(160deg,#ffffff0b,#ffffff02);box-shadow:inset 0 1px 0 #ffffff12,0 3px 8px -4px #0007;margin-bottom:6px}
.rc-tabs button,.rc-chips button,.chip{box-shadow:inset 0 1px 0 #ffffff1a,0 2px 6px -2px #0006}
details.grp>summary,.rc-pre>summary{border-bottom:1px solid #fbbf2426}
@media (prefers-reduced-motion:reduce){.bump{animation:none!important}}
/* scroll perf (2026-10-25) */
.rc-it,.tp-row,.prow,.rc-list>li{content-visibility:auto;contain-intrinsic-size:auto 150px;contain:layout paint style;box-shadow:inset 0 1px 0 #ffffff12!important}
@media (hover:none),(max-width:820px){body{animation:none;background-attachment:scroll;background-size:auto}
.stick,.tabbar,.slot{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:color-mix(in srgb,var(--bg,#0b1020) 96%,transparent)!important}
.card,.lv-it.sb,.mc{box-shadow:0 4px 12px -4px #0008,inset 0 1px 0 #ffffff14}}

/* stab (2026-10-25): static premium only — nothing moves on its own */
*,*::before,*::after{animation:none!important;transition:none!important}
.card,.lv-it.sb,.mc{transform:none!important;will-change:auto!important}
body{animation:none!important;background-attachment:scroll!important;background-size:auto!important}
.sb-n.bump,.bump,.ou-t.bump{animation:fxNum .45s ease-out 1 both!important}
.fx-skel i{background:#ffffff0d!important}
.sb-n{font-variant-numeric:tabular-nums;display:inline-block;min-width:1ch}
/* compact cards (ui 2026-10-25) */
.mc-sum{font-size:13px;margin:4px 0;line-height:1.4}
details.mc-more{margin:4px 0;border:1px solid rgba(201,162,74,.35);border-radius:8px;padding:2px 8px}
details.mc-more>summary{cursor:pointer;font-size:12px;color:#e6c46a;padding:4px 0;list-style:none}
details.mc-more[open]>summary{color:#93a0b8}