@font-face{font-family:Unbounded;src:url(fonts/unbounded-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Unbounded;src:url(fonts/unbounded-latin-800-normal.woff2) format('woff2');font-weight:800 900;font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/outfit-latin-400-normal.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/outfit-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/outfit-latin-700-normal.woff2) format('woff2');font-weight:700 900;font-display:swap}
:root{--bg:#0c0e14;--bg2:#141722;--card:rgba(20,23,33,.9);--line:rgba(255,255,255,.1);--tx:#f4f2ee;--mu:#aeb2bf;--neo:#ff6a3d;--pink:#8b6cff;--lime:#3ccf86;--glow:0 10px 30px rgba(0,0,0,.35);--veil:linear-gradient(180deg,rgba(12,14,20,.62) 0,rgba(12,14,20,.86) 520px,rgba(12,14,20,.92));--btx:#fff}
[data-theme=light]{--bg:#f6f3ee;--bg2:#ffffff;--card:rgba(255,255,255,.93);--line:rgba(20,22,30,.1);--tx:#15171e;--mu:#555b6b;--neo:#e2481f;--pink:#5d3fe0;--lime:#13804b;--glow:0 10px 30px rgba(30,25,15,.12);--veil:linear-gradient(180deg,rgba(246,243,238,.5) 0,rgba(246,243,238,.88) 520px,rgba(246,243,238,.93));--btx:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.6 Outfit,system-ui,sans-serif;overflow-x:hidden;padding-bottom:70px}
@media(min-width:900px){body{padding-bottom:0}}
h1,h2,.logo,.kicker{font-family:Unbounded,Outfit,sans-serif;letter-spacing:-.01em}h3,.btn,.tag{font-family:Outfit,sans-serif;font-weight:700}
h1{font-size:clamp(30px,5.6vw,58px);line-height:1.08;font-weight:800;margin:.2em 0}h2{font-size:clamp(22px,4vw,34px);margin:.2em 0 .5em}h3{font-size:19px;margin:.2em 0}
a{color:var(--neo)}img,svg{max-width:100%}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 18px}
header.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:62px}
.logo{font-weight:900;font-size:21px;color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:8px}.logo b{color:var(--neo)}
nav.main{display:none;gap:4px;margin-left:auto}nav.main a{color:var(--mu);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:700}
nav.main a:hover,nav.main a.on{color:var(--tx);background:var(--card)}
@media(min-width:900px){nav.main{display:flex}}
.tools{display:flex;gap:8px;margin-left:auto}@media(min-width:900px){.tools{margin-left:8px}}
select,.icon-btn{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font:700 15px Outfit,sans-serif;cursor:pointer}
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;justify-content:space-around;background:var(--bg2);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.bnav a{flex:1;text-align:center;color:var(--mu);text-decoration:none;font:700 12px Outfit,sans-serif}.bnav a span{display:block;font-size:20px;line-height:1.2}.bnav a.on{color:var(--neo)}
@media(min-width:900px){.bnav{display:none}}
section{padding:42px 0}.hero{padding:34px 0 20px;position:relative;overflow:hidden}
.hero .grid{display:grid;gap:24px;align-items:center}@media(min-width:900px){.hero .grid{grid-template-columns:1.1fr .9fr}}
.sub{color:var(--mu);font-size:19px;max-width:640px}.kicker{color:var(--pink);font:700 13px Unbounded,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.btn{display:inline-block;background:var(--neo);color:var(--btx);font-weight:700;font-size:16px;box-shadow:0 6px 18px color-mix(in srgb,var(--neo) 35%,transparent);padding:12px 18px;border-radius:12px;text-decoration:none;border:0;cursor:pointer}
.btn.ghost{background:var(--card);box-shadow:none;color:var(--tx);border:1px solid var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;max-width:520px}.stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}.stats b{display:block;font:800 22px Unbounded,sans-serif;color:var(--neo)}.stats span{color:var(--mu);font-size:14px}
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;contain:layout paint}
.card:hover{transform:translateY(-2px);border-color:var(--neo)}
.card .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.tag{display:inline-block;font-size:12px;padding:3px 7px;border-radius:6px;border:1px solid var(--line);color:var(--mu);margin:2px 3px 2px 0}
.tag.ps{color:#4f8cff;border-color:#4f8cff55}.tag.xb{color:#3ddc84;border-color:#3ddc8455}.tag.pc{color:#ffb000;border-color:#ffb00055}
.date{font:700 13px Unbounded,sans-serif;color:var(--neo)}.out{color:var(--lime)}.muted{color:var(--mu);font-size:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.filters button{background:var(--card);color:var(--mu);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:700 15px Outfit,sans-serif;cursor:pointer}.filters button.on{color:#fff;background:var(--neo);border-color:var(--neo)}
.ptable{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.offer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-top:1px dashed var(--line)}
.offer a{font-weight:700;text-decoration:none;white-space:nowrap}.offer .pr{font:700 14px Unbounded,sans-serif;color:var(--lime)}
.note{background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:12px;padding:12px 14px;color:var(--mu);margin:14px 0}
.ctl{display:grid;gap:18px}@media(min-width:900px){.ctl{grid-template-columns:1.3fr 1fr}}
.pad{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px}
.pad svg{width:100%;height:auto;display:block}
.pad .b{cursor:pointer}.pad .b>*{transition:fill .15s,stroke .15s}.pad .b:hover>:first-child,.pad .b.on>:first-child{fill:var(--neo);stroke:var(--neo)}
.pad .b text{font:700 11px Outfit,sans-serif;fill:var(--tx);pointer-events:none}
.explain{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:10px}.faq summary{cursor:pointer;font-weight:700;font-size:18px}
.faq p{color:var(--mu);margin:.5em 0 0}
footer{border-top:1px solid var(--line);padding:26px 0 18px;color:var(--mu);font-size:15px}.tiny{font-size:11px;opacity:.6;text-align:center;margin-top:18px}.tiny a{color:inherit}
/* chat */
.mascot-btn{position:fixed;right:14px;bottom:84px;z-index:70;width:62px;height:62px;border-radius:50%;border:2px solid var(--neo);background:var(--bg2);box-shadow:var(--glow);cursor:pointer;padding:4px}
@media(min-width:900px){.mascot-btn{bottom:20px}}
.chat{position:fixed;right:12px;bottom:154px;z-index:80;width:min(360px,calc(100vw - 24px));max-height:min(520px,70vh);display:none;flex-direction:column;background:var(--bg2);border:1px solid var(--neo);border-radius:18px;box-shadow:var(--glow);overflow:hidden}
@media(min-width:900px){.chat{bottom:92px}}
.chat.open{display:flex}.chat .hd{padding:10px 14px;font:700 14px Unbounded,sans-serif;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.chat .log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.msg{padding:8px 11px;border-radius:12px;max-width:88%;font-size:15px}.msg.bot{background:var(--card);border:1px solid var(--line)}.msg.me{align-self:flex-end;background:var(--neo);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid var(--line)}.chips button{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font:700 13px Outfit,sans-serif;cursor:pointer}
.chat form{display:flex;border-top:1px solid var(--line)}.chat input{flex:1;min-width:0;background:transparent;border:0;color:var(--tx);padding:10px 12px;font:500 16px Outfit,sans-serif}.chat form button{border:0;background:var(--neo);color:#fff;font-weight:700;padding:0 14px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:floaty 4s ease-in-out infinite;will-change:transform}.pulse{animation:pulse 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* game wall background */
body{background:var(--bg)}
.wall{position:fixed;inset:-40px;z-index:-2;background:url(wall.svg) 0 0/1300px auto repeat;opacity:.95;animation:pan 90s linear infinite;will-change:transform;pointer-events:none}
[data-theme=light] .wall{opacity:.9;filter:saturate(1.1)}
.veil{position:fixed;inset:0;z-index:-1;background:var(--veil);pointer-events:none}
@keyframes pan{to{transform:translate3d(-650px,0,0)}}
@media(max-width:899px){.wall{background-size:900px auto;animation-duration:120s}@keyframes pan{to{transform:translate3d(-450px,0,0)}}}
.card,.stats div,.pad,.explain,.faq details,.note,.filters button,select,.icon-btn{backdrop-filter:none;box-shadow:var(--glow)}
.card{border-radius:18px}
.hero .glass{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:24px;padding:22px 22px 24px;box-shadow:var(--glow)}
@media(min-width:900px){.hero .glass{padding:34px}}
.stack{width:100%;max-width:540px;margin:auto;display:block;overflow:visible}
.stack>g{transition:transform .3s}
section>.wrap>h2,section .kicker+h1{text-shadow:0 1px 0 color-mix(in srgb,var(--bg) 60%,transparent)}
.kicker{color:var(--neo);font-size:12px;letter-spacing:.18em}
header.top{background:color-mix(in srgb,var(--bg) 80%,transparent)}
.bnav{background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(10px)}
.trend{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}
.trend span{scroll-snap-align:start;white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;font-size:15px}
.trend span b{color:var(--neo);margin-right:6px;font-family:Unbounded,sans-serif;font-size:12px}
.stats span{display:block;line-height:1.25;font-size:13px}
@media(max-width:899px){.hero .glass{padding:18px}.hero h1{font-size:clamp(28px,8.4vw,40px)}}