@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}

:root{
--bg:#fafaf9;--bg2:#f5f5f3;--cd:#fff;--cd2:#f8f8f7;--cd3:#f2f2f0;
--sf:rgba(0,0,0,0.02);--sf2:rgba(0,0,0,0.04);
--gl2:rgba(250,250,249,0.94);
--tx:#1a1a1a;--tx2:rgba(26,26,26,0.48);--tx3:rgba(26,26,26,0.26);
--bd:rgba(0,0,0,0.055);--bd2:rgba(0,0,0,0.09);
--a1:#6d5cff;--a2:#34c693;
--a1s:rgba(109,92,255,0.055);--a2s:rgba(52,198,147,0.045);
--ok:#34c693;--wn:#d4882e;--dg:#d9523e;
--r:14px;--r2:20px;
--font:'Sora',sans-serif;--mono:'JetBrains Mono',monospace;
--s1:0 1px 2px rgba(0,0,0,0.025),0 1px 3px rgba(0,0,0,0.015);
--s2:0 2px 6px rgba(0,0,0,0.03),0 1px 2px rgba(0,0,0,0.02);
--s3:0 6px 20px rgba(0,0,0,0.04),0 2px 6px rgba(0,0,0,0.025);
--s4:0 12px 36px rgba(0,0,0,0.06);
}

.dk{
--bg:#292a31;--bg2:#30313a;--cd:#363842;--cd2:#3d3f4a;--cd3:#454752;
--sf:rgba(255,255,255,0.035);--sf2:rgba(255,255,255,0.06);
--gl2:rgba(41,42,49,0.92);
--tx:#f2f2f1;--tx2:rgba(242,242,241,0.55);--tx3:rgba(242,242,241,0.35);
--bd:rgba(255,255,255,0.1);--bd2:rgba(255,255,255,0.16);
--a1:#a898ff;--a2:#5aebc0;
--a1s:rgba(168,152,255,0.12);--a2s:rgba(90,235,192,0.08);
--ok:#5aebc0;--wn:#f0b868;--dg:#f28072;
--s1:0 1px 2px rgba(0,0,0,0.2),0 0 0 1px rgba(255,255,255,0.04);
--s2:0 3px 10px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.05);
--s3:0 8px 24px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.06);
--s4:0 16px 40px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.06);
}

.app{font-family:var(--font);background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden;transition:background .4s,color .4s}
.dk .app,.dk.app{background:linear-gradient(180deg,#2d2e36 0%,#292a31 40%,#252630 100%)}
.bgw{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 12% -8%,var(--a1s),transparent),radial-gradient(ellipse 50% 30% at 88% -2%,var(--a2s),transparent);transition:background .5s}
.dk .bgw{background:radial-gradient(ellipse 60% 45% at 10% -5%,rgba(168,152,255,0.08),transparent),radial-gradient(ellipse 50% 35% at 90% 0%,rgba(90,235,192,0.05),transparent),radial-gradient(ellipse 40% 30% at 50% 100%,rgba(168,152,255,0.03),transparent)}
.app>*:not(.bgw){position:relative;z-index:1}

@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.15)}}
@keyframes chestShake{0%,100%{transform:rotate(0)}10%{transform:rotate(-8deg) scale(1.05)}20%{transform:rotate(8deg) scale(1.1)}30%{transform:rotate(-10deg) scale(1.15)}40%{transform:rotate(10deg) scale(1.2)}50%{transform:rotate(-12deg) scale(1.25)}60%{transform:rotate(12deg) scale(1.3)}70%{transform:rotate(-8deg) scale(1.2)}80%{transform:rotate(0) scale(1.4)}90%{transform:scale(1.6)}100%{transform:scale(0);opacity:0}}
@keyframes revealGlow{0%{opacity:0;transform:scale(0) rotate(-180deg)}50%{opacity:1;transform:scale(1.3) rotate(0)}100%{transform:scale(1) rotate(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes floatUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes slideR{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.au{animation:up .4s cubic-bezier(.25,1,.5,1) both}
.ap{animation:pop .32s cubic-bezier(.25,1,.5,1) both}
.d0{animation-delay:0s}.d1{animation-delay:.02s}.d2{animation-delay:.04s}.d3{animation-delay:.06s}.d4{animation-delay:.08s}.d5{animation-delay:.1s}.d6{animation-delay:.12s}.d7{animation-delay:.14s}.d8{animation-delay:.16s}.d9{animation-delay:.18s}

/* Topbar */
.top{position:sticky;top:0;z-index:500;display:flex;align-items:center;gap:10px;padding:0 20px;height:52px;background:var(--gl2);backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid var(--bd);transition:height .25s,background .4s;overflow:visible}
.top.mn{height:44px}
.br{display:flex;align-items:center;gap:8px;cursor:pointer}
.br-i{width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,var(--a1),var(--a2));display:grid;place-items:center;font-size:14px;transition:transform .15s;box-shadow:0 2px 8px rgba(109,92,255,.12)}
.br:hover .br-i{transform:scale(1.06) rotate(-4deg)}
.br-n{font-weight:800;font-size:14.5px;letter-spacing:-.3px}
.br-t{font-size:8.5px;color:var(--tx3);font-weight:600;border:1px solid var(--bd);padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;transition:opacity .2s}
.top.mn .br-t{opacity:0;width:0;padding:0;border:0;overflow:hidden}
.nl{display:flex;gap:2px;margin-left:auto}
.nb{background:none;border:1px solid transparent;color:var(--tx3);font-family:var(--font);font-size:12px;font-weight:600;padding:5px 11px;border-radius:7px;cursor:pointer;transition:all .15s}
.nb:hover{color:var(--tx);background:var(--sf2)}
.nb.on{color:var(--tx);background:var(--a1s);font-weight:700;border-color:rgba(109,92,255,.12)}
.dk .nb.on{border-color:rgba(160,144,255,.2);background:rgba(160,144,255,.12)}
.ta{display:flex;gap:4px;align-items:center;position:relative}

/* Buttons */
.b{font-family:var(--font);font-weight:700;font-size:12px;border:1px solid var(--bd);background:var(--cd);color:var(--tx);padding:7px 15px;border-radius:9px;cursor:pointer;transition:all .15s;white-space:nowrap;box-shadow:var(--s1)}
.b:hover{transform:translateY(-1px);box-shadow:var(--s2)}.b:active{transform:none}
.bp{background:var(--a1);border:none;color:#fff;box-shadow:0 2px 8px rgba(109,92,255,.12)}
.bp:hover{box-shadow:0 4px 14px rgba(109,92,255,.18);filter:brightness(1.05)}
.dk .bp{box-shadow:0 2px 12px rgba(168,152,255,0.22),0 0 20px rgba(168,152,255,0.08)}
.bg_{background:var(--cd);border:1px solid var(--bd)}
.dk .bg_{background:var(--cd2)}
.bs{padding:5px 10px;font-size:11px;border-radius:7px}
.bi{width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:14px;border-radius:8px}
.b-arr{display:inline-flex;align-items:center;gap:4px}.b-arr svg{transition:transform .15s}.b:hover .b-arr svg{transform:translateX(2px)}
.b[disabled]{opacity:.4;pointer-events:none}

/* Layout */
.ct{max-width:1060px;margin:0 auto;padding:0 16px}
.pw{animation:up .2s ease}
.dv{height:1px;background:linear-gradient(90deg,transparent 5%,var(--bd2) 50%,transparent 95%);margin:28px 0 0}

/* Hero */
@keyframes bl{0%,100%{opacity:1}50%{opacity:.12}}
.ht{font-size:clamp(24px,3.4vw,40px);font-weight:800;line-height:1.08;letter-spacing:-1px;margin-bottom:8px}
.st{padding:10px;border-radius:8px;background:var(--bg2);border:1px solid var(--bd);transition:all .12s}
.dk .st{background:var(--cd2);border-color:var(--bd2)}
.st:hover{border-color:var(--bd2)}

/* Pills */
.p{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:5px;border:1px solid var(--bd);background:var(--bg2);font-size:10px;font-weight:600;color:var(--tx2);white-space:nowrap}
.dk .p{background:var(--cd3);border-color:var(--bd2)}
.p-ok{color:var(--ok);border-color:rgba(52,198,147,.14);background:rgba(52,198,147,.06)}
.dk .p-ok{border-color:rgba(80,232,184,.18);background:rgba(80,232,184,.08)}
.p-w{color:var(--wn);border-color:rgba(212,136,46,.14);background:rgba(212,136,46,.06)}
.dk .p-w{border-color:rgba(240,184,104,.18);background:rgba(240,184,104,.08)}
.p-a{color:var(--a1);border-color:rgba(109,92,255,.1);background:rgba(109,92,255,.06)}
.dk .p-a{border-color:rgba(160,144,255,.18);background:rgba(160,144,255,.08)}
.p-pin{color:#a3680d;border-color:rgba(163,104,13,.14);background:rgba(163,104,13,.06)}
.dk .p-pin{color:var(--wn);border-color:rgba(240,184,104,.18);background:rgba(240,184,104,.08)}
.p-hot{color:var(--dg);border-color:rgba(217,82,62,.12);background:rgba(217,82,62,.05)}
.dk .p-hot{border-color:rgba(242,128,114,.18);background:rgba(242,128,114,.08)}
.p-best{color:var(--ok);border-color:rgba(52,198,147,.2);background:rgba(52,198,147,.06)}
.dk .p-best{border-color:rgba(80,232,184,.22);background:rgba(80,232,184,.08)}

.diff{display:flex;gap:2px;align-items:center}
.diff-dot{width:5px;height:5px;border-radius:50%;background:var(--bd2)}.diff-dot.on{background:var(--ok)}.diff-dot.on.med{background:var(--wn)}.diff-dot.on.hard{background:var(--dg)}

/* Section */
.sec{padding:24px 0 0}
.sh{margin-bottom:12px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:6px}
.sh-t{font-size:17px;font-weight:800;letter-spacing:-.3px}
.sh-s{color:var(--tx2);font-size:12px}
.tabs{display:flex;gap:2px;margin-bottom:12px}
.tb{font-family:var(--font);font-size:11px;font-weight:700;padding:5px 13px;border-radius:7px;border:1px solid var(--bd);background:var(--cd);color:var(--tx2);cursor:pointer;transition:all .12s;box-shadow:var(--s1)}
.dk .tb{background:var(--cd2);border-color:var(--bd2)}
.tb:hover{color:var(--tx);border-color:var(--bd2)}
.tb.on{color:#fff;background:var(--a1);border-color:transparent;box-shadow:0 2px 6px rgba(109,92,255,.1)}
.dk .tb.on{box-shadow:0 2px 10px rgba(160,144,255,.2)}
.si{flex:1;min-width:200px;font-family:var(--font);font-size:12px;padding:8px 12px;border-radius:8px;border:1px solid var(--bd);background:var(--cd);color:var(--tx);outline:none;transition:all .12s;box-shadow:var(--s1)}
.dk .si{background:var(--cd2);border-color:var(--bd2)}
.si::placeholder{color:var(--tx3)}
.si:focus{border-color:rgba(109,92,255,.2);box-shadow:0 0 0 2px rgba(109,92,255,.04)}
.dk .si:focus{border-color:rgba(160,144,255,.3);box-shadow:0 0 0 2px rgba(160,144,255,.06)}
.sel{font-family:var(--font);font-size:12px;padding:8px 10px;border-radius:8px;border:1px solid var(--bd);background:var(--cd);color:var(--tx);outline:none;cursor:pointer;min-width:130px;transition:all .12s;box-shadow:var(--s1)}
.dk .sel{background:var(--cd2);border-color:var(--bd2)}

/* Game Grid */
.gg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gc{border:1px solid var(--bd);border-radius:var(--r);display:flex;flex-direction:column;background:var(--cd);transition:all .2s cubic-bezier(.25,1,.5,1);cursor:pointer;overflow:hidden;box-shadow:var(--s1);position:relative}
.dk .gc{border-color:var(--bd2);background:linear-gradient(180deg,rgba(255,255,255,0.035) 0%,var(--cd) 4%)}
.gc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gc-c,var(--a1));opacity:0;transition:opacity .2s}
.gc:hover{transform:translateY(-2px);border-color:var(--bd2);box-shadow:var(--s3)}
.dk .gc:hover{box-shadow:var(--s3),0 0 24px rgba(168,152,255,0.06)}
.gc:hover::before{opacity:1}
.gc-in{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.gc-row1{display:flex;gap:10px;align-items:flex-start}
.gc-em{font-size:20px;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:var(--bg2);border:1px solid var(--bd);flex-shrink:0;transition:transform .2s}
.dk .gc-em{background:var(--cd3);border-color:var(--bd2)}
.gc:hover .gc-em{transform:scale(1.08) rotate(-3deg)}
.gc-info{flex:1;min-width:0}
.gc-nm{font-size:13.5px;font-weight:800;letter-spacing:-.15px;margin-bottom:1px}
.gc-ds{color:var(--tx2);font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.gc-plays{display:flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9px;color:var(--tx3)}
.gc-pbar{width:28px;height:3px;border-radius:2px;background:var(--sf2);overflow:hidden}
.dk .gc-pbar{background:var(--cd3)}
.gc-pfill{height:100%;border-radius:2px;background:var(--ok);transition:width .4s ease}
.gc-row2{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.gc-ft{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--bd)}
.gc-id{font-family:var(--mono);font-size:9px;color:var(--tx3)}

/* Leaderboard */
.cw{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--cd);box-shadow:var(--s1)}
.dk .cw{border-color:var(--bd2);background:linear-gradient(180deg,rgba(255,255,255,0.035) 0%,var(--cd) 3%)}
.chd{padding:11px 14px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.chd-t{font-size:13px;font-weight:800}
@keyframes crownBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.lt{width:100%;border-collapse:collapse}

/* Forum */
.stat-ban{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-ban>div{padding:14px 16px;text-align:center;border-right:1px solid var(--bd)}
.stat-ban>div:last-child{border-right:none}
.stat-ico{font-size:12px;margin-bottom:4px;display:block}
.stat-val{font-weight:800;font-size:16px;font-family:var(--mono);letter-spacing:-.5px}
.stat-lab{font-size:8.5px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.sb{border:1px solid var(--bd);border-radius:var(--r);padding:14px;background:var(--cd);box-shadow:var(--s1)}
.dk .sb{border-color:var(--bd2);background:linear-gradient(180deg,rgba(255,255,255,0.035) 0%,var(--cd) 3%)}
.sb-t{font-size:9.5px;font-weight:800;margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3)}
.cl{display:flex;flex-direction:column;gap:3px}
.ci{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:7px;border:1px solid var(--bd);background:var(--bg2);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
.dk .ci{background:var(--cd2);border-color:var(--bd2)}
.ci:hover{border-color:var(--bd2);transform:translateX(2px)}
.ci.on{border-color:rgba(109,92,255,.16);background:var(--a1s)}
.dk .ci.on{border-color:rgba(160,144,255,.22);background:rgba(160,144,255,.1)}
.cc{font-size:9.5px;color:var(--tx3);font-family:var(--mono)}
.fss{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:9px}
.fst{text-align:center;padding:8px 3px;border:1px solid var(--bd);border-radius:8px;background:var(--bg2)}
.dk .fst{background:var(--cd2);border-color:var(--bd2)}
.fst-v{font-weight:800;font-size:14px;display:block;font-family:var(--mono)}
.fst-l{font-size:8.5px;color:var(--tx3)}

/* Topic items */
.tl{display:flex;flex-direction:column;gap:6px}
.ti{border:1px solid var(--bd);border-radius:var(--r);padding:12px 14px;background:var(--cd);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;cursor:pointer;transition:all .15s;box-shadow:var(--s1)}
.dk .ti{border-color:var(--bd2);background:linear-gradient(180deg,rgba(255,255,255,0.03) 0%,var(--cd) 4%)}
.ti:hover{border-color:var(--bd2);transform:translateX(2px);box-shadow:var(--s2)}
.ti-l{display:flex;gap:9px;align-items:flex-start;flex:1;min-width:0}
.ava{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff;flex-shrink:0;transition:transform .15s}
.dk .ava{box-shadow:0 0 0 2px var(--cd),0 0 0 3px var(--bd2)}
.ti-c{min-width:0;flex:1}
.ti-tr{display:flex;align-items:center;gap:5px;margin-bottom:3px;flex-wrap:wrap}
.ti-t{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.ti-preview{font-size:10.5px;color:var(--tx3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-m{display:flex;gap:6px;align-items:center}
.ti-mi{font-size:10px;color:var(--tx3);display:flex;align-items:center;gap:2px}
.ti-k{display:flex;gap:4px;flex-shrink:0}
.kp{text-align:center;padding:5px 8px;border:1px solid var(--bd);border-radius:7px;background:var(--bg2);min-width:44px;transition:all .1s}
.dk .kp{background:var(--cd2);border-color:var(--bd2)}
.ti:hover .kp{border-color:var(--bd2)}
.kp-v{font-weight:800;font-size:11.5px;display:block;font-family:var(--mono)}
.kp-l{font-size:7.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.2px}

/* Best answer accent */
.ti-best{border-left:3px solid var(--ok)}
.dk .ti-best{border-left-color:var(--ok)}

/* Role badge */

/* Reply number */
.reply-num{font-size:8px;color:var(--tx3);font-family:var(--mono);font-weight:700;background:var(--sf2);border-radius:4px;padding:1px 4px}
.dk .reply-num{background:var(--cd3)}

/* Composer */
.composer{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--cd);box-shadow:var(--s1)}
.dk .composer{border-color:var(--bd2);background:linear-gradient(180deg,rgba(255,255,255,0.035) 0%,var(--cd) 3%)}
.composer-head{padding:10px 14px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.composer textarea{width:100%;min-height:80px;resize:vertical;font-family:var(--font);line-height:1.55;font-size:12.5px;border:none;background:transparent;color:var(--tx);outline:none;padding:12px 14px}
.composer textarea::placeholder{color:var(--tx3)}

/* Breadcrumb */
.bcrumb{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx3);margin-bottom:14px;flex-wrap:wrap}
.bcrumb span{flex-shrink:0}

/* Topbar profile dropdown */
.tp-ava{position:relative;cursor:pointer;z-index:501}
.tp-ava-btn{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;border-radius:9px;border:1px solid var(--bd);background:var(--cd);cursor:pointer;transition:all .15s;font-family:var(--font)}
.tp-ava-btn:hover{border-color:var(--bd2);box-shadow:var(--s1)}
.dk .tp-ava-btn{background:var(--cd2);border-color:var(--bd2)}
.tp-dd{position:absolute;top:calc(100% + 8px);right:0;width:220px;background:var(--cd);border:1px solid var(--bd2);border-radius:12px;box-shadow:var(--s4);z-index:502;overflow:hidden;animation:pop .18s cubic-bezier(.25,1,.5,1)}
.dk .tp-dd{background:var(--cd2);border-color:var(--bd2)}
.tp-dd-head{padding:12px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.tp-dd-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11.5px;font-weight:600;color:var(--tx);cursor:pointer;transition:all .1s;border:none;background:none;width:100%;text-align:left;font-family:var(--font)}
.tp-dd-item:hover{background:var(--sf2)}
.tp-dd-item.danger{color:var(--dg)}
.tp-dd-item.danger:hover{background:rgba(217,82,62,.06)}
.tp-dd-sep{height:1px;background:var(--bd);margin:0}

/* Login & Profile */
.fg{display:flex;flex-direction:column;gap:4;margin-bottom:12}
.fg-l{font-size:11px;font-weight:700;color:var(--tx2)}
.fg-i{font-family:var(--font);font-size:12.5px;padding:9px 12px;border-radius:9px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);outline:none;transition:all .15s;width:100%}
.dk .fg-i{background:var(--cd2);border-color:var(--bd2)}
.fg-i:focus{border-color:rgba(109,92,255,.25);box-shadow:0 0 0 3px rgba(109,92,255,.06)}
.dk .fg-i:focus{border-color:rgba(160,144,255,.3);box-shadow:0 0 0 3px rgba(160,144,255,.08)}
.fg-i::placeholder{color:var(--tx3)}

/* Misc */
.stt{position:fixed;bottom:16px;right:16px;z-index:90;width:34px;height:34px;border-radius:9px;background:var(--cd);border:1px solid var(--bd2);box-shadow:var(--s3);display:grid;place-items:center;cursor:pointer;font-size:12px;font-weight:800;transition:all .2s;opacity:0;transform:translateY(6px);pointer-events:none;color:var(--tx2)}
.stt.show{opacity:1;transform:translateY(0);pointer-events:auto}
.stt:hover{transform:translateY(-2px);box-shadow:var(--s4);color:var(--tx)}
.tw{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:200}
.to{background:var(--cd);border:1px solid var(--bd2);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;box-shadow:var(--s4);animation:toIn .22s cubic-bezier(.25,1,.5,1)}
@keyframes toIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.ft{margin-top:36px;padding:18px 0;border-top:1px solid var(--bd);text-align:center;color:var(--tx3);font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:2px}
.ft-b{font-weight:800;font-size:12px;background:linear-gradient(140deg,var(--a1),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Game Player — shared */
.gp-back{display:inline-flex;align-items:center;gap:4}
.gp-head{display:flex;align-items:center;gap:12;margin-bottom:12}
.gp-emo{font-size:28px;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--bg2);border:1px solid var(--bd);flex-shrink:0}
.dk .gp-emo{background:var(--cd3);border-color:var(--bd2)}
.gp-info{flex:1;min-width:0}
.gp-name{font-size:17px;font-weight:800;letter-spacing:-.3px}
.gp-desc{font-size:11px;color:var(--tx2);margin-top:1px}
.gp-stats{display:flex;gap:4;margin-top:4;flex-wrap:wrap}
.gp-zone{border:1px solid var(--bd);border-radius:var(--r2);background:var(--cd);box-shadow:var(--s2);overflow:hidden;position:relative}
.dk .gp-zone{border-color:var(--bd2);background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,var(--cd) 3%)}
.gp-canvas{width:100%;aspect-ratio:3/4;background:var(--bg2);display:grid;place-items:center;position:relative;overflow:hidden}
.dk .gp-canvas{background:var(--cd2)}
.gp-canvas-h{aspect-ratio:16/9}
.gp-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:10;backdrop-filter:blur(6px)}
.gp-overlay-box{text-align:center;padding:24px;border-radius:16px;background:var(--cd);border:1px solid var(--bd2);box-shadow:var(--s4)}
.dk .gp-overlay-box{background:var(--cd2)}
.gp-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--bd);background:var(--sf)}
.dk .gp-bar{background:var(--cd2)}
.gp-bar-v{display:flex;flex-direction:column;align-items:center;gap:1}
.gp-bar-num{font-weight:800;font-size:16px;font-family:var(--mono);letter-spacing:-.5px}
.gp-bar-lbl{font-size:8px;color:var(--tx3);text-transform:uppercase;font-weight:700;letter-spacing:.4px}
.gp-ctrl{display:flex;gap:6;justify-content:center;padding:14px;flex-wrap:wrap}
.gp-ctrl-btn{width:52px;height:52px;border-radius:12px;border:1px solid var(--bd2);background:var(--cd);display:grid;place-items:center;font-size:18px;cursor:pointer;transition:all .12s;box-shadow:var(--s1);user-select:none}
.dk .gp-ctrl-btn{background:var(--cd2);border-color:var(--bd2)}
.gp-ctrl-btn:hover{transform:scale(1.05);box-shadow:var(--s2)}
.gp-ctrl-btn:active{transform:scale(.96);box-shadow:none}
.gp-ctrl-btn.act{background:var(--a1);border-color:var(--a1);color:#fff;box-shadow:0 2px 10px rgba(109,92,255,.2)}
.dk .gp-ctrl-btn.act{box-shadow:0 2px 14px rgba(168,152,255,.25)}
.gp-side{display:flex;flex-direction:column;gap:8}
.gp-side-card{border:1px solid var(--bd);border-radius:var(--r);padding:12px;background:var(--cd);box-shadow:var(--s1)}
.dk .gp-side-card{border-color:var(--bd2);background:linear-gradient(180deg,rgba(255,255,255,0.035) 0%,var(--cd) 3%)}
.gp-progress{height:4px;border-radius:2px;background:var(--sf2);overflow:hidden;margin-top:6px}
.dk .gp-progress{background:var(--cd3)}
.gp-progress-fill{height:100%;border-radius:2px;transition:width .3s ease}

/* Horizontal layout */
.gp-h-wrap{display:grid;grid-template-columns:1fr 260px;gap:10px}
.gp-h-full{position:relative}