:root{--bg:#0d0e12;--bg2:#13151b;--panel:#171a21;--panel2:#1e222b;--line:#2a2f3b;--text:#eceef3;--muted:#949aab;--accent:#8b5cf6;--accent2:#22d3ee;--ok:#3dd68c;--warn:#f5a524;--err:#f87171;--r:14px}
*{box-sizing:border-box}
html,body{margin:0;color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{min-height:100vh;background:radial-gradient(1200px 600px at 10% -10%,#8b5cf622,transparent 60%),radial-gradient(900px 500px at 110% 0%,#22d3ee18,transparent 60%),var(--bg)}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0d0e12d9;backdrop-filter:blur(10px);z-index:10}
.brand{display:flex;gap:10px;align-items:center;color:var(--text);font-weight:800;letter-spacing:.2px}
.brand:hover{text-decoration:none}
.mode{font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);white-space:nowrap}
.mode.on{color:var(--ok);border-color:#3dd68c55}.mode.off{color:var(--warn);border-color:#f5a52455}
.wrap{max-width:1180px;margin:0 auto;padding:24px 16px 80px}
h1{font-size:28px;margin:0 0 4px;line-height:1.2}
h1.big{font-size:clamp(30px,5vw,46px);letter-spacing:-.5px}
h2{font-size:17px;margin:0 0 12px}
h3{margin:0}
.muted{color:var(--muted)}.small{font-size:13px}.lead{font-size:17px;max-width:680px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent2);font-weight:700}
.hero{padding:20px 0 26px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px}
.panel h2 small{font-weight:500;color:var(--muted);font-size:13px;margin-left:6px}
.btn{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:9px 14px;border-radius:10px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s;white-space:nowrap}
.btn:hover{border-color:#3a4050;background:#252a35;text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),#6d28d9);border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--err);border-color:#f8717155;background:transparent}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.big{padding:13px 22px;font-size:16px}
.btn.on{border-color:var(--accent);color:#fff;background:#8b5cf622}
input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;font:inherit;outline:none}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input[type=color]{padding:2px;height:36px;width:48px;cursor:pointer;flex:none}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;color:var(--muted);font-weight:600}
.field em{font-style:normal;opacity:.7;font-weight:400}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{appearance:none;padding:8px 12px;border-radius:10px;border:2px solid var(--line);background:var(--bg2);color:var(--text);cursor:pointer;font:inherit;font-weight:600;font-size:14px;text-align:left}
.opt small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.opt.on{border-color:var(--accent);background:#8b5cf618}
.pal{appearance:none;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;border:2px solid var(--line);background:var(--bg2);cursor:pointer;min-width:118px;color:var(--text);font:inherit;font-size:13px;font-weight:600;text-align:left}
.pal.on{border-color:var(--accent)}
.pal .sw{height:16px;border-radius:6px}
.sub{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.hint{font-size:12px;color:var(--muted);margin-top:8px}
/* scale buttons */
.scale{display:flex;flex-wrap:wrap;gap:6px}
.sc{min-width:40px;padding:8px 10px;border-radius:10px;border:2px solid transparent;background:var(--c);color:var(--t);font:inherit;font-weight:800;cursor:pointer;transition:transform .12s,opacity .12s,box-shadow .12s;flex:1 0 auto}
.sc:hover{transform:translateY(-2px)}
.scale.has .sc:not(.on){opacity:.32}
.scale.has .sc:not(.on):hover{opacity:.85}
.sc.on{border-color:#fff;box-shadow:0 0 0 3px #ffffff22,0 8px 22px -6px var(--c);transform:scale(1.07)}
.preview .sc{cursor:default}.preview .sc:hover{transform:none}
.ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
/* game cards */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.game{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.game.later{border-color:#f5a52466}
.game .cv{width:100%;aspect-ratio:460/215;object-fit:cover;display:block;background:var(--panel2)}
.ph{display:grid;place-items:center;background:linear-gradient(135deg,hsl(var(--h) 55% 32%),hsl(calc(var(--h) + 50) 60% 16%))}
.ph span{font-size:34px;font-weight:900;opacity:.85;letter-spacing:2px;color:#fff}
.game .body{padding:14px;display:flex;flex-direction:column;gap:12px;flex:1}
.gt{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.gt h3{font-size:17px;line-height:1.3}
.tag{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.warn{color:var(--warn);border-color:#f5a52455}
.tag.ok{color:var(--ok);border-color:#3dd68c55}
.reveal{border-top:1px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px;margin-top:auto}
.avg{display:inline-flex;align-items:baseline;gap:8px;padding:4px 12px;border-radius:99px;background:var(--c);color:var(--t);font-weight:800;white-space:nowrap}
.avg small{font-weight:600;opacity:.8;font-size:11px}
.vchips{display:flex;flex-wrap:wrap;gap:5px}
.vchip{font-size:12px;padding:2px 3px 2px 9px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);display:inline-flex;gap:6px;align-items:center}
.vchip b{background:var(--c);color:var(--t);padding:0 7px;border-radius:99px}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty b{color:var(--text);display:block;font-size:18px;margin-bottom:4px}
/* room head + tabs */
.roomhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap}
.meta{color:var(--muted);font-size:14px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 20px;overflow-x:auto}
.tabs a{padding:10px 14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.on{color:var(--text);border-color:var(--accent)}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:var(--accent);color:#fff;font-size:11px;text-align:center;margin-left:4px}
.progress{height:6px;background:var(--panel2);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
/* results */
.winner{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#8b5cf622,#22d3ee11);border:1px solid #8b5cf655;border-radius:var(--r);padding:14px;margin-bottom:16px}
.winner .cv{width:180px;aspect-ratio:460/215;border-radius:10px;object-fit:cover;flex:none}
.winner .ph span{font-size:22px}
.rank{display:grid;grid-template-columns:30px 92px 1fr auto;gap:14px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:0}
.rank .n{font-weight:900;color:var(--muted);text-align:center;font-size:18px}
.rank .cv{width:92px;aspect-ratio:460/215;border-radius:8px;object-fit:cover;display:block}
.rank .ph span{font-size:15px}
.bar{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--c);border-radius:99px}
details summary{cursor:pointer;color:var(--muted);font-size:12px;margin-top:4px}
.tablewrap{overflow-x:auto}
table.mx{border-collapse:separate;border-spacing:4px;min-width:100%}
.mx th{font-size:12px;color:var(--muted);font-weight:600;text-align:center;padding:4px 6px;white-space:nowrap}
.mx th.gn{text-align:left;color:var(--text);font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.mx td{text-align:center;padding:6px 8px;border-radius:8px;font-weight:700;font-size:13px;min-width:44px;background:var(--panel2);color:var(--muted);white-space:nowrap}
/* players */
.plist{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:1fr 180px auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.av{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:hsl(var(--h) 55% 40%);flex:none}
/* editor game list */
.glist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.grow{display:flex;gap:10px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:6px}
.grow .cv{width:86px;aspect-ratio:460/215;border-radius:6px;object-fit:cover;flex:none;display:block}
.grow .ph span{font-size:14px}
.grow input{background:transparent;border-color:transparent}
.grow input:focus{border-color:var(--accent)}
.savebar{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:10px;padding:10px;background:#171a21ee;border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(8px)}
.pscore{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.pscore label{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:4px 10px 4px 4px;font-weight:700;font-size:13px;overflow:hidden}
.note{border-left:3px solid var(--warn);background:#f5a52411;padding:10px 14px;border-radius:0 10px 10px 0;font-size:13px;color:#e8d3a8}
.note code,.panel code{background:var(--bg2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;font-size:12px;color:var(--text)}
pre{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;font-size:12px}
.joinbox{max-width:520px;margin:40px auto;display:flex;flex-direction:column;gap:14px}
.list a.item{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;color:var(--text);border:1px solid var(--line);margin-bottom:6px;background:var(--bg2)}
.list a.item:hover{border-color:var(--accent);text-decoration:none}
.danger-zone{border-color:#f8717144}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#232733;border:1px solid var(--line);padding:10px 16px;border-radius:12px;transition:.2s;z-index:99;max-width:90vw;font-weight:600;box-shadow:0 10px 30px #0008}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.err{border-color:var(--err);color:#fecaca}
footer{text-align:center;color:var(--muted);font-size:12px;padding:20px}
@media (max-width:640px){
  .rank{grid-template-columns:24px 64px 1fr;}
  .rank .cv{width:64px}
  .rank>.right{grid-column:2/-1}
  .prow{grid-template-columns:1fr auto}
  .prow .progress-cell{grid-column:1/-1;order:3}
  .winner{flex-direction:column;align-items:flex-start}
  .winner .cv{width:100%}
}

/* ---------- v2 additions ---------- */
.acct{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:600;padding:4px 10px 4px 4px;border-radius:99px;border:1px solid var(--line);background:var(--panel)}
.acct:hover{border-color:var(--accent);text-decoration:none}
.av.sm{width:26px;height:26px;font-size:11px}
.joinhead{text-align:center;max-width:640px;margin:20px auto 22px}
.joinhead .scale{max-width:520px;margin:14px auto 0}
.joingrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:820px;margin:0 auto}
.joincol{display:flex;flex-direction:column;gap:12px;margin:0}
.authform{display:flex;flex-direction:column;gap:12px}
.authtoggle{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:3px}
.authtoggle button{flex:1;appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;padding:7px;border-radius:8px;cursor:pointer}
.authtoggle button.on{background:var(--panel2);color:var(--text)}
.authbox{max-width:420px;margin:40px auto}
.gtools{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.gtools .lbl{font-size:11px;color:var(--muted);align-self:center;margin-right:2px;text-transform:uppercase;letter-spacing:1px}
.note.sm{padding:6px 10px;font-size:12px}
.note.info{border-color:var(--accent2);background:#22d3ee11;color:#bdeff7}
.quickadd{padding:12px 14px}
.item-row{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.item-row:last-child{border-bottom:0}
.item-row .cv{width:92px;aspect-ratio:460/215;border-radius:8px;object-fit:cover;display:block}
.item-row .ph span{font-size:15px}
.item-row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tag.acc{color:var(--accent2);border-color:#22d3ee55}
.tag.own{color:#ffd54a;border-color:#ffd54a55}
.tag.co{color:#c4b5fd;border-color:#8b5cf677}
.mx td.stale{opacity:.45;text-decoration:line-through}
.stat-row{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:110px}
.stat b{display:block;font-size:22px}
.stat span{font-size:12px;color:var(--muted)}
@media (max-width:640px){
  .item-row{grid-template-columns:64px 1fr}
  .item-row .cv{width:64px}
  .item-row .acts{grid-column:1/-1;justify-content:flex-start}
}