:root{--bg:#07070d;--fg:#f4f4fb;--mut:#9a9ab3;--card:#10101c;--line:#23233a;--acc:#7c5cff;--acc2:#00e1ff;--mx:50vw;--my:50vh}
*{box-sizing:border-box;margin:0;padding:0}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:200}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:8px}
img,svg{max-width:100%}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI','Helvetica Neue',Roboto,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#fff}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));z-index:100}
#glow{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(500px circle at var(--mx) var(--my),color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%)}
#bg{position:fixed;inset:0;z-index:0}
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;backdrop-filter:blur(14px);background:linear-gradient(#07070dcc,#07070d00)}
.logo{font-weight:700;font-size:1.25rem;letter-spacing:.02em;display:flex;align-items:center;gap:10px}.logo img{width:32px;height:32px;display:block}.logo b{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent}
nav .links{display:flex;gap:28px;align-items:center;font-size:.95rem;color:var(--mut)}
nav .links a:hover{color:var(--fg)}
.lang{border:1px solid var(--line);background:transparent;color:var(--fg);padding:6px 12px;border-radius:99px;cursor:pointer;font:inherit;font-size:.85rem}
.lang:hover{border-color:var(--acc)}
main,footer{position:relative;z-index:2}
section{padding:14vh 5vw}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:16vh;position:relative}
.kicker{letter-spacing:.35em;text-transform:uppercase;font-size:.8rem;color:var(--acc2);margin-bottom:24px}
.hero h1,.ghero h1{font-size:clamp(3.2rem,14vw,12rem);line-height:.9;font-weight:700;letter-spacing:-.04em}
.hero h1 .ch,.ghero h1 .ch{display:inline-block;transform:translateY(110%) rotate(8deg);opacity:0;animation:rise .9s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes rise{to{transform:none;opacity:1}}
.grad{background:linear-gradient(100deg,var(--acc),var(--acc2),var(--acc));background-size:200% auto;-webkit-background-clip:text;color:transparent;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:200% center}}
.hero p.sub{max-width:640px;color:var(--mut);font-size:clamp(1rem,1.6vw,1.3rem);margin:32px 0;line-height:1.6}
.btn{display:inline-block;padding:16px 34px;border-radius:99px;background:linear-gradient(100deg,var(--acc),var(--acc2));color:#05050a;font-weight:700;transition:.3s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 44px color-mix(in srgb,var(--acc) 55%,transparent)}
.scrollhint{position:absolute;bottom:32px;color:var(--mut);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}
.scrollhint::after{content:'';display:block;width:1px;height:46px;background:linear-gradient(var(--acc2),transparent);margin:10px auto 0;animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;pointer-events:none}
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:26px 0;transform:rotate(-2deg);margin:4vh -5vw;background:#0b0b16}
.marquee div{display:inline-block;font-size:clamp(2rem,6vw,5rem);font-weight:700;letter-spacing:-.02em;animation:mq 28s linear infinite;-webkit-text-stroke:1px #4a4a70;color:transparent}
@keyframes mq{to{transform:translateX(-50%)}}
.sec-head{text-align:center;margin-bottom:8vh}
.sec-head h2{font-size:clamp(2.4rem,7vw,6rem);letter-spacing:-.03em;line-height:1}
.sec-head p{color:var(--mut);margin-top:16px;font-size:1.1rem}
/* sticky stacking game cards */
.stack{display:flex;flex-direction:column;gap:0}
.gcard{position:sticky;top:12vh;height:72vh;margin-bottom:10vh;border-radius:32px;overflow:hidden;border:1px solid color-mix(in srgb,var(--c1) 40%,var(--line));display:grid;grid-template-columns:1.1fr 1fr;background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 22%,#0a0a14),#0a0a14 70%);transform-origin:50% 0;will-change:transform}
.gcard .txt{padding:5vw;display:flex;flex-direction:column;justify-content:center;gap:18px;position:relative;z-index:2}
.gcard .num{font-size:.9rem;letter-spacing:.3em;color:var(--c1)}
.gcard h3{font-size:clamp(2.4rem,6vw,5.5rem);letter-spacing:-.04em;line-height:.95}
.gcard p{color:#c3c3d8;max-width:440px;line-height:1.6}
.gcard .chip{display:inline-block;padding:6px 14px;border:1px solid var(--c1);border-radius:99px;font-size:.8rem;color:var(--c1);width:max-content}
.gcard .go{color:var(--c1);font-weight:700;display:inline-flex;gap:10px;align-items:center;margin-top:8px}
.gcard .go i{transition:.3s;font-style:normal}.gcard:hover .go i{transform:translateX(8px)}
.gcard .art{position:relative;overflow:hidden;perspective:900px}
.art .shape,.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art .shape{background:conic-gradient(from 0deg at 50% 50%,var(--c1),var(--c2),var(--c1));filter:blur(2px) saturate(1.2);opacity:.55;animation:spin 16s linear infinite;transform:scale(1.6)}
@keyframes spin{to{transform:scale(1.6) rotate(360deg)}}
.art .big{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(6rem,16vw,15rem);font-weight:800;color:#fff;mix-blend-mode:overlay;letter-spacing:-.06em;transform:translateZ(0)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat b{display:block;font-size:clamp(3rem,8vw,7rem);letter-spacing:-.05em}
.stat span{color:var(--mut);text-transform:uppercase;letter-spacing:.2em;font-size:.8rem}
.about{max-width:900px;margin:auto;text-align:center}
.about h2{font-size:clamp(2.4rem,7vw,5.5rem);letter-spacing:-.03em;margin-bottom:28px}
.about p{font-size:clamp(1.2rem,2.4vw,1.9rem);line-height:1.5;color:#cfcfe6}
.cta{text-align:center;padding:18vh 5vw;position:relative;overflow:hidden}
.cta h2{font-size:clamp(2.6rem,9vw,8rem);letter-spacing:-.04em;line-height:.95;margin-bottom:20px}
.cta p{color:var(--mut);margin-bottom:34px}
footer{border-top:1px solid var(--line);padding:32px 5vw;display:flex;justify-content:space-between;color:var(--mut);font-size:.9rem;flex-wrap:wrap;gap:12px}
/* reveal */
.rv{opacity:0;transform:translateY(60px) scale(.98);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.l{transform:translateX(-80px)}.rv.r{transform:translateX(80px)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
/* game page */
.ghero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:18vh 5vw 8vh;position:relative;overflow:hidden}
.ghero h1{font-size:clamp(3rem,13vw,11rem)}
.ghero .tag{font-size:clamp(1.2rem,3vw,2.4rem);color:#d6d6ea;margin-top:24px;max-width:800px}
.ghero .back{color:var(--mut);margin-bottom:32px;display:inline-block}
.ghero .back:hover{color:var(--acc)}
.meta{display:flex;gap:40px;flex-wrap:wrap;margin-top:44px}
.meta div span{display:block;font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.split{display:grid;grid-template-columns:1fr 1.4fr;gap:6vw;align-items:start}
.split h2{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.03em;position:sticky;top:20vh}
.split p{font-size:clamp(1.15rem,2vw,1.7rem);line-height:1.6;color:#d0d0e4}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;transition:.35s;transform-style:preserve-3d}
.feat:hover{border-color:var(--acc);box-shadow:0 20px 60px color-mix(in srgb,var(--acc) 25%,transparent)}
.feat i{font-style:normal;color:var(--acc);font-size:.85rem;letter-spacing:.2em}
.feat h3{font-size:1.6rem;margin:14px 0 10px}.feat p{color:var(--mut);line-height:1.55}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.gallery .ph,.gallery img{aspect-ratio:16/10;border-radius:20px;width:100%;object-fit:cover;border:1px solid var(--line)}
.gallery .ph{display:grid;place-items:center;color:var(--mut);background:repeating-linear-gradient(45deg,#0d0d18,#0d0d18 12px,#111120 12px,#111120 24px)}
.nextgame{display:block;text-align:center;padding:18vh 5vw;border-top:1px solid var(--line);position:relative;overflow:hidden}
.nextgame span{color:var(--mut);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem}
.nextgame h2{font-size:clamp(3rem,12vw,10rem);letter-spacing:-.05em;transition:.4s}.nextgame:hover h2{letter-spacing:-.02em;color:var(--acc)}
@media(max-width:820px){nav .links a.hide{display:none}.gcard{grid-template-columns:1fr;height:auto;min-height:74vh;grid-template-rows:auto 220px}.stats{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.split h2{position:static}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.hero h1 .ch,.ghero h1 .ch{opacity:1;transform:none}}
.grad .ch{background:inherit;background-size:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
.poster{display:grid;place-items:center;padding-block:6vh}
.pwrap{position:relative;width:min(440px,86vw)}
.pwrap img{width:100%;display:block;border-radius:28px;border:1px solid var(--line);position:relative;z-index:1;box-shadow:0 40px 120px #0009}
.pglow{position:absolute;inset:-10%;background:conic-gradient(from 0deg,var(--acc),var(--acc2),#ffb020,var(--acc));filter:blur(70px);opacity:.4;border-radius:50%;animation:spin2 14s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}

/* per-game themes (no inline styles: CSP style-src 'self') */
.t-ottomanslap{--c1:#ffb020;--c2:#d6224a;--acc:#ffb020;--acc2:#d6224a}
.t-proteinrush{--c1:#9dff3a;--c2:#ff7a1a;--acc:#9dff3a;--acc2:#ff7a1a}
.t-iffet{--c1:#5ad7ff;--c2:#ff7ad9;--acc:#5ad7ff;--acc2:#ff7ad9}
.t-transforace{--c1:#4d7cff;--c2:#b04dff;--acc:#4d7cff;--acc2:#b04dff}
.gcard img{object-position:center 20%}
.t-iffet.gcard img{object-position:center 30%}.t-proteinrush.gcard img{object-position:center 25%}.t-transforace.gcard img{object-position:center 45%}
.ghero>.herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;z-index:-1}
.orb.o-a{width:46vw;height:46vw;background:#7c5cff;left:-10vw;top:5vh}
.orb.o-b{width:36vw;height:36vw;background:#00e1ff;right:-8vw;bottom:5vh}
.orb.o-c{width:50vw;height:50vw;background:#7c5cff;left:25vw;top:0}
.orb.g-a{width:50vw;height:50vw;background:var(--c1);right:-10vw;top:0}
.orb.g-b{width:35vw;height:35vw;background:var(--c2);left:-8vw;bottom:0}
html,body,main{overflow-x:clip}