:root{--bg:#0a0c14;--bg2:#10131f;--card:#151927;--line:rgba(255,255,255,.08);--text:#eceef6;--mute:#9aa0b6;--gold:#ffc65c;--ember:#ff8a3d;--ok:#4ade80;--bad:#f87171;--r:16px;
--grad:linear-gradient(95deg,#ffd76a,#ff8a3d);--disp:'Bricolage Grotesque',system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px clamp(16px,4vw,40px);background:rgba(10,12,20,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font:800 22px var(--disp);letter-spacing:.3px;display:flex;align-items:center;gap:8px}.logo{background:var(--grad);-webkit-background-clip:text;color:transparent;font-size:20px}
.top nav{display:flex;gap:20px;color:var(--mute);font-weight:500}.top nav a:hover{color:var(--text)}.acct{margin-left:auto;display:flex;gap:10px;align-items:center}
.pill{padding:6px 12px;border-radius:99px;background:rgba(255,198,92,.12);color:var(--gold);font-weight:600;font-size:13px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;border:0;cursor:pointer;font-weight:700;background:var(--grad);color:#1b1206;transition:transform .12s,opacity .12s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn.ghost{background:rgba(255,255,255,.07);color:var(--text)}.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px}
main{min-height:calc(100vh - 64px)}.wrap{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--disp);margin:0;line-height:1.08}h1{font-size:clamp(38px,6.5vw,76px);font-weight:800;letter-spacing:-1.5px}h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.6px}h3{font-size:19px;font-weight:700}
.mute{color:var(--mute)}.gold{background:var(--grad);-webkit-background-clip:text;color:transparent}
.hero{position:relative;overflow:hidden;padding:clamp(48px,9vw,110px) 0 60px}.hero:before{content:"";position:absolute;inset:-30% -10% auto;height:120%;background:radial-gradient(ellipse at 70% 20%,rgba(255,138,61,.20),transparent 55%),radial-gradient(ellipse at 15% 60%,rgba(120,110,255,.14),transparent 50%);pointer-events:none}
.hero p.lead{font-size:clamp(17px,2vw,21px);color:var(--mute);max-width:640px;margin:22px 0 30px}
.compose{position:relative;max-width:820px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.compose textarea{width:100%;min-height:110px;resize:vertical;background:transparent;border:0;outline:0;font-size:17px;padding:8px 10px}
.compose .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:4px 6px 2px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--mute);cursor:pointer;font-size:13px}.chip:hover{color:var(--text);border-color:rgba(255,198,92,.4)}
.toggle{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px;cursor:pointer;user-select:none}.toggle input{accent-color:var(--ember)}
.grid{display:grid;gap:18px}.g3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.g4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}.card.hov{transition:transform .15s,border-color .15s;cursor:pointer}.card.hov:hover{transform:translateY(-3px);border-color:rgba(255,198,92,.35)}
.steps4 .card .n{font:800 13px var(--disp);color:var(--gold);letter-spacing:1px}.steps4 .card h3{margin:8px 0 6px}
.gcard{overflow:hidden;padding:0}.gcard .cov{aspect-ratio:16/9;background:#1b2033 center/cover;position:relative}.gcard .cov .price{position:absolute;right:10px;top:10px}
.gcard .body{padding:14px 16px 16px}.gcard .body p{margin:4px 0 0;color:var(--mute);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:12px;color:var(--mute);font-size:12px;margin-top:10px}
.sec{margin-top:70px}.sec>h2{margin-bottom:22px}
.split{display:grid;grid-template-columns:240px 1fr;gap:28px}@media(max-width:860px){.split{grid-template-columns:1fr}}
.rail{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:6px}@media(max-width:860px){.rail{position:static;flex-direction:row;overflow-x:auto}}
.rail a{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;color:var(--mute);font-weight:600;white-space:nowrap}.rail a.on{background:var(--card);color:var(--text);border:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:50%;background:#394057;flex:none}.dot.done{background:var(--ok)}.dot.run{background:var(--gold);box-shadow:0 0 0 4px rgba(255,198,92,.2);animation:pulse 1.2s infinite}.dot.fail{background:var(--bad)}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,198,92,0)}}
.panel{display:flex;flex-direction:column;gap:20px;min-width:0}
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;font-size:14px}.kv b{color:var(--mute);font-weight:500}
ul.clean{margin:6px 0 0;padding-left:18px}ul.clean li{margin:3px 0}
.slots{display:grid;gap:14px}.slot{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.slot .th{width:96px;height:96px;border-radius:12px;background:#1d2236 center/cover;border:1px solid var(--line)}
.cands{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:10px}.cand{flex:none;width:86px;cursor:pointer;font-size:11px;color:var(--mute)}
.cand .th{width:86px;height:64px;border-radius:9px;background:#1d2236 center/cover;border:2px solid transparent}.cand.on .th{border-color:var(--gold)}.cand span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.06);font-size:11px;color:var(--mute);margin-right:4px}
.player{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--r);overflow:hidden;background:#05060a;border:1px solid var(--line)}.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .cover{position:absolute;inset:0;display:grid;place-items:center;background:#0b0e18 center/cover}.player .cover .btn{font-size:18px;padding:16px 30px}
.shots{display:flex;gap:10px;overflow-x:auto}.shots img{height:110px;border-radius:10px;border:1px solid var(--line)}
textarea.in,input.in,select.in{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:0}textarea.in{min-height:100px;resize:vertical}
input.in:focus,textarea.in:focus{border-color:rgba(255,198,92,.5)}label.f{display:block;font-size:13px;color:var(--mute);margin:12px 0 6px}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:16px}
.modal .card{width:min(440px,100%);padding:28px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:#20263a;border:1px solid var(--line);padding:12px 18px;border-radius:12px;font-weight:600;max-width:90vw}
.status{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:12px;background:rgba(255,198,92,.08);border:1px solid rgba(255,198,92,.2)}
.status.bad{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25)}.status.ok{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.2)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,198,92,.3);border-top-color:var(--gold);animation:sp 1s linear infinite;flex:none}@keyframes sp{to{transform:rotate(360deg)}}
.table{width:100%;border-collapse:collapse;font-size:14px}.table td,.table th{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}.table th{color:var(--mute);font-weight:500}
.stars{color:var(--gold);letter-spacing:2px}.foot{border-top:1px solid var(--line);color:var(--mute);font-size:13px;padding:30px clamp(16px,4vw,40px);display:flex;gap:20px;flex-wrap:wrap}
.earn{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.earn .card b{font:800 34px var(--disp)}
pre.copy{white-space:pre-wrap;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;font:13px/1.5 Inter,system-ui;margin:6px 0 0}
[hidden]{display:none!important}

.hero3d{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity 2.5s ease;z-index:0}.hero3d.on{opacity:.9}
.heroshade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,12,20,.94) 0%,rgba(10,12,20,.78) 38%,rgba(10,12,20,.15) 75%,rgba(10,12,20,.35) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(10,12,20,0) 30%)}
.hero{min-height:min(860px,92vh)}

/* build theatre */
.theatre{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 20px;margin-bottom:18px}
.theatre .stages{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.theatre .stage{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);font-size:13px;color:#9a9484}
.theatre .stage.now{background:rgba(242,201,76,.14);color:#f2c94c}.theatre .stage.done{color:#8fd19a}
.theatre .now{display:flex;gap:14px;align-items:flex-start}.theatre .msg{font-size:14px;margin-top:3px;color:#d8d2c0}
.theatre .pbar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}.theatre .pbar i{display:block;height:100%;background:linear-gradient(90deg,#f2c94c,#ffe08a);transition:width .8s ease}
.theatre .found{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px}.theatre .found .th{width:46px;height:46px;border-radius:8px;background:#2a2823 center/cover;border:1px solid rgba(255,255,255,.1)}
.theatre .log{margin-top:12px;font-size:12px;line-height:1.7;max-height:120px;overflow:auto;color:#b8b2a2}
.theatre .tip{font-size:12px;margin-top:12px;font-style:italic}
/* arcade (v10) */
.chip.on{color:var(--text);border-color:var(--gold);background:rgba(255,198,92,.1)}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}.actions .btn.on{border-color:#ff5f8a;color:#ff5f8a;background:rgba(255,95,138,.12)}
.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font:800 30px 'Bricolage Grotesque',system-ui;color:#1a1206;background:linear-gradient(135deg,#ffd76a,#ff9d4a)}
.lb{list-style:none;margin:10px 0 0;padding:0;font-size:14px;counter-reset:lb}.lb li{display:flex;gap:10px;padding:6px 8px;border-radius:8px;counter-increment:lb}.lb li:nth-child(odd){background:rgba(255,255,255,.04)}.lb li::before{content:counter(lb) '.';opacity:.5;width:22px}.lb li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb li b{color:var(--gold)}
.hero-game{display:block;position:relative;margin-top:22px;min-height:340px;border-radius:22px;background:#1d2236 center/cover;overflow:hidden;border:1px solid var(--line)}.hero-game .hg{position:absolute;inset:0;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(8,10,20,.92))}.hero-game h2{margin:0;font-size:clamp(28px,4vw,46px)}.hero-game p{margin:0;max-width:640px;color:var(--mute)}.hero-game .btn{align-self:flex-start;margin-top:6px}
@media (max-width:720px){.hero-game{min-height:260px}.hero-game .hg{padding:20px}.split{grid-template-columns:1fr!important}}
.coach{border-color:rgba(255,198,92,.35);background:linear-gradient(160deg,rgba(255,198,92,.07),var(--card))}
.gcard .cov{position:relative}.remixbtn{position:absolute;left:10px;bottom:10px;z-index:2}
/* ===== theme v2: Twitch-dark, electric purple, neon pink for what's hot ===== */
:root{--bg:#0e0e10;--bg2:#121214;--card:#18181b;--line:rgba(255,255,255,.09);--text:#efeff1;--mute:#adadb8;--gold:#bf94ff;--ember:#9147ff;--pink:#ff3e8e;--cyan:#1fd1f9;
--grad:linear-gradient(95deg,#9147ff,#bf94ff);--grad2:linear-gradient(95deg,#ff3e8e,#ff7a59)}
.btn{color:#fff;box-shadow:0 6px 22px rgba(145,71,255,.28)}.btn.ghost{box-shadow:none}.btn.hot{background:var(--grad2);box-shadow:0 6px 22px rgba(255,62,142,.3)}
.pill{background:rgba(145,71,255,.16);color:#d4bbff}.pill.price{background:rgba(0,0,0,.55);color:#fff}
.top{background:rgba(14,14,16,.86)}.brand .logo{color:#9147ff;-webkit-text-fill-color:#9147ff}
.hero:before{background:radial-gradient(ellipse at 70% 20%,rgba(145,71,255,.28),transparent 55%),radial-gradient(ellipse at 15% 60%,rgba(255,62,142,.14),transparent 50%)}
.chip.on{color:#fff;border-color:#9147ff;background:rgba(145,71,255,.22)}.chip:hover{border-color:rgba(191,148,255,.5)}
.card{background:var(--card)}.gcard:hover{outline:1px solid rgba(145,71,255,.6)}
.stars{color:#ffd76a}.hero-game .pill{background:var(--grad2);color:#fff}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(255,62,142,.25);margin-right:6px;animation:pulse 1.6s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,62,142,0)}}
/* ===== Play feed (Shorts-style, swipe through games) ===== */
.feed{position:fixed;inset:64px 0 0 0;background:#000;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;z-index:5}.feed::-webkit-scrollbar{display:none}
.feed .cat{position:fixed;top:64px;left:0;right:0;z-index:7;display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0))}.feed .cat::-webkit-scrollbar{display:none}
.feed .cat .chip{flex:0 0 auto;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff}.feed .cat .chip.on{background:var(--grad);border-color:transparent}
.slide{position:relative;height:calc(100vh - 64px);scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slide .bgc{position:absolute;inset:0;background:#111 center/cover;filter:blur(28px) brightness(.45);transform:scale(1.15)}
.slide .frame{position:relative;width:min(100%,calc((100vh - 64px) * 16 / 9));height:100%;background:#000 center/cover;display:flex;align-items:center;justify-content:center}
.slide .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.slide .bigplay{position:relative;z-index:2;width:92px;height:92px;border-radius:50%;border:0;background:var(--grad);color:#fff;font-size:34px;cursor:pointer;box-shadow:0 14px 50px rgba(145,71,255,.5);display:grid;place-items:center;transition:transform .12s}.slide .bigplay:hover{transform:scale(1.06)}
.slide .info{position:absolute;left:18px;bottom:22px;z-index:3;max-width:min(70%,520px);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}.slide .info h2{font-size:clamp(26px,4vw,42px);margin:0 0 6px}.slide .info p{margin:0 0 10px;color:#ddd}.slide .info .by{font-size:13px;color:#ccc}
.slide .rail{position:absolute;right:16px;bottom:30px;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center}
.slide .rail button{width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center}.slide .rail button.on{background:var(--pink)}.slide .rail small{display:block;font-size:11px;color:#fff;text-align:center;margin-top:3px}
.slide.playing .bigplay,.slide.playing .info,.slide.playing .bgc{display:none}.slide.playing .rail{bottom:auto;top:14px;right:14px;flex-direction:row}
.feed .hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:7;color:#aaa;font-size:12px;background:rgba(0,0,0,.5);padding:6px 12px;border-radius:99px;pointer-events:none}
@media (max-width:720px){.slide .frame{width:100%}.slide .info{max-width:72%;left:12px;bottom:18px}}
.hero-game .hg .pill{align-self:flex-start}
.launch.ready{border-color:rgba(74,222,128,.45)}.launch h4,.card h4{font:700 13px var(--disp);letter-spacing:.5px;text-transform:uppercase;color:var(--mute);margin:14px 0 6px}