/* ACCS PICS — shared look of the finder and the cabinet (12.11, v2 «больше жизни»): fonts, colour, the living background,
   glowing cards, shining buttons. Pages opt in with <html data-aps-fx>. */
:root{--ink:#090b12;--ink2:#0d1019;--deck:rgba(20,24,36,.72);--deck-s:#141826;--deck2:#1c2132;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
 --tx:#eef1f8;--mut:#9099b0;--dim:#5d6580;--gold:#ffc34d;--amber:#ff8a3d;--rose:#ff4f8b;--rare:#5ea8ff;--epic:#b07bff;--ok:#3ee0a0;--bad:#ff6577;
 --pl:#3d8bff;--grad:linear-gradient(120deg,#ffd166 0%,#ff9f43 45%,#ff5e7e 100%);
 --disp:'Science Gothic','Unbounded',system-ui,sans-serif;--text:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color-scheme:dark}
html[data-aps-fx]{background:var(--ink)}
html[data-aps-fx] body{background:transparent!important;font-family:var(--text)}
/* the living background: three slow lights in the platform's colour + gold + violet, a fading grid and film grain */
#aps-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(1200px 700px at 50% -10%,#121830 0%,var(--ink) 60%)}
#aps-fx i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
#aps-fx .b1{width:720px;height:720px;left:-180px;top:-260px;background:var(--pl);opacity:.32;animation:aps-d1 38s ease-in-out infinite alternate}
#aps-fx .b2{width:620px;height:620px;right:-160px;top:12vh;background:#ff9f43;opacity:.18;animation:aps-d2 46s ease-in-out infinite alternate}
#aps-fx .b3{width:760px;height:760px;left:30vw;bottom:-420px;background:#8b5cff;opacity:.22;animation:aps-d3 52s ease-in-out infinite alternate}
#aps-fx .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
 background-size:56px 56px;-webkit-mask:radial-gradient(900px 520px at 50% 0%,#000 0%,transparent 75%);mask:radial-gradient(900px 520px at 50% 0%,#000 0%,transparent 75%);opacity:.55}
#aps-fx .grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes aps-d1{to{transform:translate(28vw,18vh) scale(1.15)}}
@keyframes aps-d2{to{transform:translate(-30vw,30vh) scale(.9)}}
@keyframes aps-d3{to{transform:translate(-18vw,-36vh) scale(1.1)}}
/* glass surfaces with a light edge */
.glass{background:var(--deck);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--line);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 50px -24px rgba(0,0,0,.7)}
/* glow that follows the pointer (shell.js sets --mx / --my on [data-glow]) */
[data-glow]{position:relative;isolation:isolate}
[data-glow]:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s;
 background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,195,77,.10),transparent 45%)}
[data-glow]:after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s;
 background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(255,195,77,.65),rgba(176,123,255,.35) 40%,transparent 70%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-glow]:hover:before,[data-glow]:hover:after{opacity:1}
[data-glow]>*{position:relative;z-index:1}
/* the primary button: warm gradient + a shine that crosses it */
.shine{position:relative;overflow:hidden;background:var(--grad)!important;color:#1b0d00!important;box-shadow:0 10px 30px -10px rgba(255,140,60,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.shine:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .6s ease}
.shine:hover:after{left:130%}
.gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
/* game tiles marquee (finder hero) */
.marq{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq .row{display:flex;gap:12px;width:max-content;animation:aps-mq 60s linear infinite}
.marq .row.rev{animation-direction:reverse;animation-duration:75s;margin-top:12px}
.marq .tile{flex:none;width:76px;height:76px;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:var(--deck2);box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
.marq .tile img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes aps-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){#aps-fx i,.marq .row{animation:none}.reveal{opacity:1;transform:none}.shine:after{display:none}}
/* 12.11 owner: modern scrollbars in the site's look — thin, transparent track, a soft thumb that brightens on hover */
html[data-aps-fx],html[data-aps-fx] *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
html[data-aps-fx] ::-webkit-scrollbar{width:10px;height:10px}
html[data-aps-fx] ::-webkit-scrollbar-track{background:transparent}
html[data-aps-fx] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
html[data-aps-fx] ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffd166,#ff9f43,#ff5e7e);background-clip:padding-box;border:3px solid transparent}
html[data-aps-fx] ::-webkit-scrollbar-button{display:none;width:0;height:0}
html[data-aps-fx] ::-webkit-scrollbar-corner{background:transparent}