:root{--bg:#05030c;--panel:#0a0a0d;--line:#1d1d24;--fg:#f4f4f7;--mut:#8b8b98;--acc:#c9b8ff;--acc2:#8a6bff}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:Inter,sans-serif;overflow-x:hidden}
h1,h2,h3,.brand span{font-family:Syne,sans-serif}
a{color:inherit;text-decoration:none}
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px max(24px,calc((100% - 1240px)/2));background:rgba(5,3,12,.6);backdrop-filter:blur(14px);border-bottom:1px solid #111}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px}.brand img{height:34px}
.pill{display:flex;gap:6px;border:1px solid var(--line);border-radius:99px;padding:6px 10px}
.pill a{padding:6px 14px;color:var(--mut);font-size:14px;border-radius:99px;transition:.2s}.pill a:hover{color:#fff;background:#15151b}
.btn-outline{border:1px solid var(--acc2);padding:8px 18px;border-radius:99px;font-size:13px;font-weight:600}
.hero{position:relative;text-align:center;padding:150px 24px 90px;display:flex;flex-direction:column;align-items:center}
.glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 25%,rgba(120,80,255,.18),transparent 70%);pointer-events:none}
.hero-logo{height:130px;position:relative;filter:drop-shadow(0 0 30px rgba(180,150,255,.35))}
.eyebrow{font:400 11px 'Space Mono',monospace;letter-spacing:.4em;color:var(--acc2);margin:34px 0 18px}
h1{font-size:clamp(40px,7.5vw,92px);line-height:1;font-weight:800;max-width:1000px;position:relative}
h1 em{font-style:normal;background:linear-gradient(90deg,#e7dcff,#a98bff);-webkit-background-clip:text;color:transparent}
.sub{color:var(--mut);max-width:460px;margin:26px 0;line-height:1.6;font-size:17px}
.cta{display:flex;flex-direction:column;gap:14px;align-items:center;position:relative}.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;gap:10px;align-items:center;padding:13px 26px;border-radius:99px;font-weight:600;font-size:14px;border:1px solid var(--line);cursor:pointer;transition:.2s;font-family:inherit}
.btn:hover{transform:translateY(-2px)}.ghost{background:#0a0a0d}.ghost:hover{border-color:#444}
.patreon{background:linear-gradient(#f0454f,#c62a35);border:0;padding:15px 30px;box-shadow:0 0 30px rgba(240,69,79,.3)}.q{border-left:1px solid #fff5;padding-left:12px}
.discord{background:#4c5cf0;border:0;box-shadow:0 0 25px rgba(76,92,240,.4)}.light{background:#f4f4f7;color:#000;border:0}
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:linear-gradient(90deg,rgba(5,3,12,.6),rgba(30,12,60,.5),rgba(5,3,12,.6))}
.track{display:flex;gap:44px;width:max-content;animation:m 28s linear infinite;align-items:center}
.track span{font:800 clamp(36px,5vw,64px) Syne;font-style:italic;background:linear-gradient(90deg,#a35bff,#e7dcff);-webkit-background-clip:text;color:transparent}
.track i{width:12px;height:12px;border-radius:50%;background:#e7dcff;flex:none}
@keyframes m{to{transform:translateX(-50%)}}
section{max-width:1240px;margin:0 auto;padding:110px 24px 30px}
.tag{font:400 11px 'Space Mono';letter-spacing:.35em;color:var(--acc2);margin-bottom:18px}
h2{font-size:clamp(34px,5vw,58px);font-weight:700;max-width:800px;line-height:1.05}.lead{color:var(--mut);margin:20px 0 40px;max-width:520px;line-height:1.6}
.feature{display:grid;grid-template-columns:1fr 1fr;border:1px solid #2a1f45;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#0c0714,#050507);box-shadow:0 0 70px rgba(120,80,255,.1)}
.cover{min-height:380px;position:relative}.c1{background:radial-gradient(circle at 30% 30%,#2a1a55,transparent 60%),radial-gradient(circle at 75% 70%,#5a1a4a,transparent 55%),#0a0a10}
.badge{position:absolute;top:18px;left:18px;background:#7a3fd8;padding:7px 14px;border-radius:99px;font:700 10px 'Space Mono';letter-spacing:.2em}
.live{position:absolute;top:60px;left:18px;background:#000a;padding:6px 12px;border-radius:99px;font:10px 'Space Mono';letter-spacing:.2em;color:#4ade80}
.fbody{padding:44px;display:flex;flex-direction:column;gap:16px;justify-content:center}.fbody .eyebrow{margin:0}.fbody h3{font-size:clamp(26px,3.4vw,44px);line-height:1.05;text-transform:uppercase}.fbody p{color:var(--mut);line-height:1.6}
.stats{display:flex;gap:36px}.stats small,.card small{display:block;font:10px 'Space Mono';letter-spacing:.25em;color:#6b6b7a}.stats b{font:700 28px 'Space Mono'}
.fbody .btn{align-self:flex-start}
.carousel{--vis:4;position:relative;margin-top:36px;padding:0 6px}.carousel[hidden],.nav-btn[hidden]{display:none}.viewport{overflow:hidden;padding:10px 0;margin:-10px 0}.cards{display:flex;gap:22px;transition:transform .45s cubic-bezier(.22,.8,.3,1)}.cards .card{flex:0 0 calc((100% - (var(--vis) - 1)*22px)/var(--vis));min-width:0}
.card{background:var(--panel);border:1px solid #2a1f45;border-radius:22px;overflow:hidden}.card.blur{filter:blur(6px);opacity:.6}
.card .img{height:200px;background:linear-gradient(135deg,#1a1030,#2b1650,#0d0a18);position:relative}
.card .img .n{position:absolute;bottom:10px;left:14px;font:10px 'Space Mono';color:#fff8}.card .img .l{position:absolute;top:12px;left:12px;font:10px 'Space Mono';color:#4ade80;background:#000a;padding:5px 10px;border-radius:99px}
.card .cb{padding:22px}.card h4{font:700 22px Syne;margin-bottom:18px}.cs{display:flex;gap:40px;padding-bottom:16px;border-bottom:1px solid var(--line)}.cs b{font:700 24px 'Space Mono'}.cs div+div b{color:var(--acc)}
.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font:10px 'Space Mono';color:#6b6b7a}.chip{border:1px solid #3b4290;color:#8f9bff;padding:7px 14px;border-radius:99px}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#0a0a0d;border:1px solid var(--line);color:#fff;font-size:22px;cursor:pointer;z-index:2}#prev{left:-16px}#next{right:-16px}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.soc{display:flex;align-items:center;gap:20px;padding:26px;border:1px solid #241a3d;border-radius:24px;background:var(--panel);transition:.25s}
.soc:hover{border-color:var(--acc2);transform:translateY(-4px);box-shadow:0 10px 40px rgba(120,80,255,.15)}
.soc .ic{width:64px;height:64px;border-radius:16px;background:#14101f;display:grid;place-items:center;flex:none}.soc svg{width:28px;height:28px;fill:#fff}
.soc small{font:10px 'Space Mono';letter-spacing:.3em;color:var(--acc2)}.soc b{display:block;font:700 26px Syne;margin:4px 0}.soc span{color:var(--mut);font-size:13px}.soc .go{margin-left:auto;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.grp{margin:40px 0}.grp>.pill2{display:table;margin:0 auto 26px;border:1px solid #2a1f45;border-radius:99px;padding:7px 18px;font:10px 'Space Mono';letter-spacing:.3em;color:#d9ccff}
.mem{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}.m{text-align:center;width:130px}
.av{width:118px;height:118px;border-radius:22px;margin:0 auto 14px;display:grid;place-items:center;font:800 40px Syne;border:1px solid #2f2350;background:linear-gradient(135deg,#1b1233,#08060f);box-shadow:0 0 30px rgba(120,80,255,.15)}
.m b{font:700 18px Syne;display:block}.m small{display:block;color:#55556a;font:11px 'Space Mono';margin:4px 0}.m em{font:normal 10px 'Space Mono';letter-spacing:.2em;color:var(--acc2)}
.contact{display:grid;grid-template-columns:1fr 1.5fr;gap:26px}.cinfo{display:flex;flex-direction:column;gap:16px}
.ci{border:1px solid #241a3d;background:var(--panel);border-radius:20px;padding:22px;transition:.2s}.ci:hover{border-color:var(--acc2)}.ci small{font:10px 'Space Mono';letter-spacing:.3em;color:var(--acc2)}.ci b{display:block;margin-top:8px;font:600 18px Syne}
.cform{border:1px solid #241a3d;background:var(--panel);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:18px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:flex;flex-direction:column;gap:8px;font:11px 'Space Mono';letter-spacing:.15em;color:var(--mut);text-transform:uppercase}
input,select,textarea{background:#000;border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:#fff;font:15px Inter;outline:0}input:focus,select:focus,textarea:focus{border-color:var(--acc2)}
.cform .btn{align-self:flex-start}.status{font-size:13px;color:#4ade80}
footer{display:flex;gap:14px;align-items:center;justify-content:center;padding:70px 24px 40px;color:var(--mut);font-size:13px}footer img{height:26px;opacity:.8}
@media(max-width:820px){.pill{display:none}.feature,.contact{grid-template-columns:1fr}.two{grid-template-columns:1fr}.carousel{--vis:2}}
@media(max-width:1100px) and (min-width:821px){.carousel{--vis:3}}
@media(max-width:560px){.carousel{--vis:1}#prev{left:-6px}#next{right:-6px}}

body{background:radial-gradient(ellipse at 50% -10%,#1b0e3d 0%,#0a0618 45%,#05030c 100%) fixed}
section,.hero,.marquee,footer{position:relative;z-index:1}
.void{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.void i{position:absolute;inset:-20%}
.neb{background:radial-gradient(40% 35% at 20% 25%,rgba(110,60,255,.22),transparent 70%),radial-gradient(35% 40% at 80% 60%,rgba(170,40,200,.16),transparent 70%),radial-gradient(45% 30% at 45% 95%,rgba(40,70,255,.14),transparent 70%);animation:drift 40s ease-in-out infinite alternate}
.stars{background-repeat:repeat}
.s1{background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff9,transparent),radial-gradient(1px 1px at 68% 42%,#fff8,transparent),radial-gradient(1.5px 1.5px at 85% 12%,#d8c8ffcc,transparent),radial-gradient(1px 1px at 33% 76%,#fff7,transparent),radial-gradient(1.2px 1.2px at 55% 88%,#fffa,transparent),radial-gradient(1px 1px at 92% 70%,#c8b8ff99,transparent);background-size:520px 520px;animation:tw 6s ease-in-out infinite alternate}
.s2{background-image:radial-gradient(1px 1px at 22% 60%,#fff6,transparent),radial-gradient(1px 1px at 75% 25%,#fff6,transparent),radial-gradient(1.4px 1.4px at 45% 35%,#e4d8ffaa,transparent),radial-gradient(1px 1px at 8% 90%,#fff5,transparent);background-size:340px 340px;animation:tw 9s ease-in-out infinite alternate-reverse}
.void::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65) 100%)}
@keyframes drift{to{transform:translate(4%,-3%) scale(1.08)}}@keyframes tw{from{opacity:.35}to{opacity:1}}
.glow{display:none}
.card,.soc,.ci,.cform,.feature{background-color:rgba(10,7,22,.72);backdrop-filter:blur(6px)}

.tags{display:flex;gap:8px;flex-wrap:wrap}.tg{border:1px solid #2f2350;color:#cbbcff;border-radius:99px;padding:5px 12px;font:10px 'Space Mono';letter-spacing:.15em;text-transform:uppercase}
.card .cd{color:var(--mut);font-size:14px;line-height:1.5;margin-bottom:16px}.card .cb{display:flex;flex-direction:column;gap:0}.card .tags{margin-bottom:20px}.card .chip{align-self:flex-start;font:700 11px 'Space Mono';letter-spacing:.15em}
.card{transition:.25s}.card:hover{border-color:var(--acc2);transform:translateY(-4px)}

#featuredWrap:empty{display:none}#featuredWrap{margin-bottom:0}.card .cd{margin-bottom:20px}

.hero{padding-bottom:0}.cta{margin-top:56px}#games{padding-top:56px}
.play{align-self:flex-start;display:inline-flex;align-items:center;gap:18px;margin-top:10px;padding:8px 8px 8px 30px;border-radius:99px;background:linear-gradient(135deg,#8a6bff,#6a35d0);box-shadow:0 0 34px rgba(138,107,255,.4),inset 0 1px 0 rgba(255,255,255,.25);font:700 15px 'Space Mono';letter-spacing:.3em;color:#fff;transition:.25s}
.play i{width:42px;height:42px;border-radius:50%;background:rgba(5,3,12,.35);display:grid;place-items:center;font:normal 18px Inter;letter-spacing:0;transition:.25s}
.play:hover{transform:translateY(-3px);box-shadow:0 0 50px rgba(138,107,255,.65),inset 0 1px 0 rgba(255,255,255,.25)}
@media(max-width:820px){.play{align-self:stretch;justify-content:space-between}}
.soc>div:nth-child(2){flex:1;min-width:0}.soc b{font-size:clamp(20px,2vw,26px);overflow-wrap:anywhere}.soc span{overflow-wrap:anywhere}.soc .go{flex:none}
@media(max-width:1000px){.social-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.social-grid{grid-template-columns:1fr}}
.card .chip{transition:transform .2s,background .2s,border-color .2s}.card .chip:hover{transform:scale(1.14);background:rgba(143,155,255,.12);border-color:#8f9bff}
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
.cform button:disabled{opacity:.6;cursor:wait}

/* toast notifications */
#toast-container .toast {
 display:flex;
 align-items:center;
 gap:12px;
 padding:16px 20px;
 min-width:280px;
 max-width:400px;
 border-radius:9px;
 color:#fff;
 font-family:Inter,sans-serif;
 font-size:14px;
 font-weight:600;
 line-height:1.4;
 box-shadow:0 8px 30px rgba(0,0,0,.3);
 pointer-events:auto;
 animation:toastIn .3s ease forwards;
}

#toast-container .toast.loading {background:#333333}
#toast-container .toast.success {background:#34d399}
#toast-container .toast.error {background:#f87171}

#toast-container .toast-icon {
 font-size:22px;
 font-weight:700;
 flex-shrink:0;
 line-height:1;
}

#toast-container .toast.loading .toast-icon {
 width:19px;
 height:19px;
 border:2px solid rgba(255,255,255,.35);
 border-top-color:#fff;
 border-radius:50%;
 animation:toastSpin .7s linear infinite;
}

#toast-container .toast.hide {
 animation:toastOut .25s ease forwards;
}

@keyframes toastIn {
 from {opacity:0;transform:translateX(40px)}
 to {opacity:1;transform:translateX(0)}
}

@keyframes toastOut {
 from {opacity:1;transform:translateX(0)}
 to {opacity:0;transform:translateX(40px)}
}

@keyframes toastSpin {
 to {transform:rotate(360deg)}
}

@media(max-width:480px) {
 #toast-container .toast {
  min-width:0;
  max-width:calc(100vw - 32px);
 }
}