/* ARC — "baseplate" theme: Roblox-style blocks with hard brick-edge shadows, one trophy-yellow accent. */
@font-face{font-family:Lilita;src:url(/fonts/lilita-one.woff2) format('woff2');font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/rubik.woff2) format('woff2');font-weight:300 900;font-display:swap}
:root{--bg:#121a33;--s1:#1b2547;--s2:#24305a;--edge:#090e20;--line:#33406e;--tx:#f2f4ff;--mut:#a3acd6;
--ac:#ffc93c;--ac-tx:#2a1d00;--ac-edge:#b88700;--blu:#5cb0ff;--ok:#3ddc84;--bad:#ff6363;--tie:#c9a7ff;
--dot:rgba(255,255,255,.045);--hdr:rgba(18,26,51,.92);--sb:rgba(255,255,255,.16);--sbh:rgba(255,255,255,.4);--r:14px;--rs:10px;--disp:Lilita,"Arial Rounded MT Bold",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}::-webkit-scrollbar-button,::-webkit-scrollbar-corner{display:none;background:transparent}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb);border:2px solid transparent;border-radius:99px;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background-color:var(--sbh)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
/* the dot grid is the baseplate's studs */
body{margin:0;min-height:100vh;overflow-x:clip;-webkit-tap-highlight-color:transparent;color:var(--tx);font:16px/1.55 Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
 background:radial-gradient(circle,var(--dot) 0 2.5px,transparent 3px) 0 0/26px 26px,var(--bg)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;letter-spacing:.01em;line-height:1.15}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.mut,small{color:var(--mut)}
button,a,.row,.pc,.wc{touch-action:manipulation}
:focus-visible{outline:3px solid var(--blu);outline-offset:2px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;background:var(--hdr);backdrop-filter:blur(12px);border-bottom:2px solid var(--line);padding-top:env(safe-area-inset-top)}
.hd{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:10px}
.logo,a.logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;border-radius:12px}
.lg{font-family:var(--disp);font-size:20px;letter-spacing:.06em;color:var(--ac-tx);background:var(--ac);padding:4px 12px 3px;border-radius:9px;box-shadow:0 4px 0 var(--ac-edge);transform:rotate(-3deg);display:inline-block}
.ttl{font-weight:700;font-size:15px}
nav{display:flex;align-items:center;gap:4px}
.nb{background:none;border:0;color:var(--mut);padding:8px 14px;border-radius:var(--rs);font:inherit;font-weight:600;cursor:pointer;min-height:40px}
.nb:hover{color:var(--tx)}
.nb{position:relative;z-index:1;transition:color .2s}.nb.on{color:var(--tx)}
.hr2{display:flex;align-items:center;gap:8px;flex:none}
.live{color:var(--ok);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:ping 1.8s ease-out infinite}
.ub{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin-left:4px}
.bg{display:none;width:46px;height:46px;border-radius:var(--rs);background:var(--s1);border:2px solid var(--line);cursor:pointer;position:relative;padding:0;flex:none}
.bg span{position:absolute;left:11px;right:11px;height:2.5px;background:var(--tx);border-radius:2px;transition:top .2s,transform .2s,opacity .2s}
.bg span:nth-child(1){top:13px}.bg span:nth-child(2){top:20px}.bg span:nth-child(3){top:27px}
.bg.on{border-color:var(--ac)}.bg.on span:nth-child(1){top:20px;transform:rotate(45deg)}.bg.on span:nth-child(2){opacity:0}.bg.on span:nth-child(3){top:20px;transform:rotate(-45deg)}
.mm{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:2px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.55);padding:12px 0 18px;animation:drop .18s ease-out}
.mm .wrap{display:grid;gap:8px}
.mi{background:var(--s1);border:2px solid var(--line);color:var(--tx);font:inherit;font-weight:600;text-align:left;padding:13px 16px;border-radius:var(--rs);cursor:pointer;min-height:52px}
.mi.on{border-color:var(--ac);box-shadow:inset 5px 0 0 var(--ac)}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}

/* ---- page building blocks ---- */
main.wrap{padding-top:30px;padding-bottom:80px}
.hero{padding:18px 0 10px}
.hero h1{margin:0;font-size:clamp(34px,7vw,56px)}
.hero p{margin:10px 0 0;font-size:17px;color:var(--mut);max-width:60ch}
.card{background:var(--s1);border:2px solid var(--line);border-radius:var(--r);padding:22px;margin:20px 0;box-shadow:0 5px 0 var(--edge)}
.card h2,.card h3{margin:0 0 14px}.card h2{font-size:24px}.card h3{font-size:21px}
.card p{max-width:72ch}
.ann{margin:22px 0;padding:14px 18px;border-radius:var(--r);background:var(--s2);border-left:6px solid var(--ac)}
.ann.lock{border-left-color:var(--blu);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ann a,.sn a,.card p a{color:var(--blu);text-decoration:underline;text-underline-offset:2px}
.ann,.sn,.mh h2,.mh small,.hr span,.card p{overflow-wrap:anywhere}
.empty{text-align:center;padding:40px 20px;color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0}
.st{background:var(--s1);border:2px solid var(--line);border-radius:var(--r);padding:14px 18px;box-shadow:0 4px 0 var(--edge)}
.st b{display:block;font-family:var(--disp);font-weight:400;font-size:32px;line-height:1.15}.st span{color:var(--mut);font-size:14px}
.gl{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.gl li{background:var(--bg);border:2px solid var(--line);border-radius:var(--rs);padding:5px 12px;font-size:14px}
.sec{margin:36px 0 0;font-size:26px}
.day{margin:28px 0 16px;font-size:21px}

/* ---- avatars: rounded squares, like a Roblox head ---- */
.av{border-radius:28%;display:inline-grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:400;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);text-shadow:0 1px 0 rgba(0,0,0,.25)}

img.av{object-fit:cover;background:var(--s2)}

/* ---- leaderboard ---- */
.nm b.nmb{display:flex;align-items:center;gap:6px}.nmb>span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nreg{flex:0 999 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;line-height:1;padding:4px 8px;border-radius:99px;background:var(--s2);border:1px solid var(--line);color:var(--mut)}
.mdl.ask{max-width:440px;text-align:center}.ask h2{margin:6px 0 10px;font-size:26px}.ask p{margin:0 auto 20px;max-width:36ch}
.ask-ic{font-size:44px;line-height:1;animation:slap .5s cubic-bezier(.3,1.6,.5,1) .15s backwards}
.ask-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.ask-b .btn{flex:1 1 150px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 14px;border:2px solid var(--line);border-radius:var(--r);background:var(--bg);margin:0 0 10px;cursor:pointer;transition:border-color .2s}
.opt:has(input:checked){border-color:var(--ac)}.opt input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--ac)}.opt b{display:block}.opt small{display:block;font-size:13.5px;margin-top:2px}
.ask .ask-b{margin-top:16px}
.ask-l{display:inline-block;margin-top:16px;font-size:14px;color:var(--mut)}
.pod{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:end;margin:14px 0 28px}
.pc{background:var(--s1);border:2px solid var(--line);border-radius:var(--r);padding:20px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:0;box-shadow:0 5px 0 var(--edge)}
.pc>b,.pc>small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc.p1{padding:32px 10px 26px;border-color:var(--ac);box-shadow:0 6px 0 var(--ac-edge)}
.pc>b.pjn{white-space:normal;overflow-wrap:anywhere}
.pj{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}.pj button{background:none;border:0;padding:0;cursor:pointer;border-radius:28%}
.pp{font-family:var(--disp);font-size:26px}.pp small{font-family:Rubik,sans-serif;font-size:13px}.crown{font-size:28px}
.board{position:relative}
.row{position:absolute;left:0;right:0;height:62px;display:grid;grid-template-columns:40px 44px 1fr auto auto;gap:16px;align-items:center;padding:0 18px;background:var(--s1);border:2px solid var(--line);border-radius:12px;cursor:pointer;box-shadow:0 3px 0 var(--edge);transition:top .8s cubic-bezier(.2,.8,.2,1),border-color .3s}
.row:hover{border-color:var(--blu)}
.row.flash{border-color:var(--ok);z-index:2}.row.flash.neg{border-color:var(--bad)}
.row.nc,.pc.nc{cursor:default}.row.nc{grid-template-columns:40px 44px 1fr auto}
.board .row.nr,.board .row.nc.nr{grid-template-columns:1fr}
.rk{font-family:var(--disp);text-align:center;font-size:22px;color:var(--mut)}.r1{color:var(--ac)}.r2{color:#c9d3e6}.r3{color:#e09a5a}
.nm{min-width:0}.nm b,.nm small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec{font-size:14px;white-space:nowrap}.rec i{font-style:normal;font-weight:700}
.w{color:var(--ok)}.l{color:var(--bad)}.t{color:var(--tie)}
.pt{font-family:var(--disp);font-size:24px;text-align:right;min-width:78px}.pt small{font-family:Rubik,sans-serif;font-size:12px;margin-left:3px}
em{display:inline-block;font-style:normal;font-weight:800;font-size:14px;margin-right:10px;animation:dpop .55s cubic-bezier(.3,1.6,.5,1)}.up{color:var(--ok)}.dn{color:var(--bad)}

/* ---- tabs (Schedule, My schedule) ---- */
.tabs{position:relative;display:flex;gap:6px;padding:5px;background:var(--s1);border:2px solid var(--line);border-radius:var(--r);margin:6px 0 8px;max-width:480px}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:0;color:var(--mut);font:inherit;font-weight:700;padding:9px 10px;border-radius:var(--rs);cursor:pointer;min-height:46px;white-space:nowrap;position:relative;z-index:1;transition:color .25s}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--ac-tx)}
.tn{font-size:12px;line-height:1;min-width:22px;padding:4px 7px;border-radius:99px;background:var(--s2);color:var(--tx)}
.tab.on .tn{background:rgba(0,0,0,.16);color:var(--ac-tx)}

/* ---- sessions and duels ---- */
.fx{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px 18px}
.fc{position:relative;background:var(--s1);border:2px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 5px 0 var(--edge)}
.fc.next{border-color:var(--ac);box-shadow:0 5px 0 var(--ac-edge)}
.fc.ses{display:flex;flex-direction:column}.fc.ses .jn{margin-top:auto}
.fh{display:flex;align-items:center;gap:12px}
.fgm{flex:1;min-width:0;display:flex;flex-direction:column}
.fgm b{font-weight:700;font-size:17px;overflow-wrap:anywhere}.fgm small{font-size:14px}
.tm{font-family:var(--disp);font-size:20px;line-height:1;padding:7px 10px 6px;border-radius:8px;background:var(--bg);border:2px solid var(--line);white-space:nowrap}
.nx{position:absolute;top:-13px;left:14px;background:var(--ac);color:var(--ac-tx);font-weight:800;font-size:13px;padding:3px 10px;border-radius:6px;transform:rotate(-3deg);box-shadow:0 2px 0 var(--ac-edge)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin-top:16px}
.vs>button{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:8px 4px;border-radius:12px;background:none;border:0;color:var(--tx);font:inherit;cursor:pointer}
.vs>button:hover{background:var(--s2)}
.vs>button>b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs.pick>button{border:2px solid var(--line);background:var(--bg)}.vs.pick>button.on{border-color:var(--ac);box-shadow:0 4px 0 var(--ac-edge)}.btn.gh.on{box-shadow:0 var(--d) 0 var(--ac-edge),inset 0 0 0 2px var(--ac)}
.vsx{font-family:var(--disp);font-style:normal;font-size:28px;color:var(--ac);transform:rotate(-8deg)}
.sn{margin:10px 0 0;font-size:14px;color:var(--mut);overflow-wrap:anywhere}
.gt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.gn{font-size:20px;margin-right:auto}
.who{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.wc{display:inline-flex;align-items:center;gap:7px;padding:3px 12px 3px 3px;border-radius:10px;background:var(--bg);border:2px solid var(--line);font-size:14px;max-width:100%}
.wc.lk{cursor:pointer}.wc.me{border-color:var(--ac)}
.x2{background:none;border:0;color:var(--mut);cursor:pointer;font-size:13px;padding:0 0 0 2px}.x2:hover{color:var(--bad)}
.jn{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.duel{margin-top:18px;padding-top:16px;border-top:2px dashed var(--line)}.duel h4{margin:0 0 8px;font-size:18px}
.gm{border-left:4px solid var(--line)}.gm.joined{border-left-color:var(--ok)}.gm.soon{border-left-color:var(--tie)}

/* ---- buttons: blocks that press down ---- */
.btn{--e:var(--ac-edge);--d:4px;display:inline-block;background:var(--ac);color:var(--ac-tx);border:0;border-radius:var(--rs);padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;min-height:44px;box-shadow:0 var(--d) 0 var(--e);transition:transform .15s cubic-bezier(.3,1.5,.5,1),box-shadow .15s cubic-bezier(.3,1.5,.5,1),filter .12s}
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(calc(var(--d) - 1px));box-shadow:0 1px 0 var(--e);transition-duration:.06s}
.btn.sm{--d:3px;padding:8px 14px;font-size:14px;min-height:38px}
.btn.gh{--e:var(--edge);background:var(--s2);color:var(--tx)}
.btn.dg{--e:#a33232;background:var(--bad);color:#2b0505}
.btn:disabled{opacity:.45;cursor:not-allowed}
.emc{display:inline-grid;place-items:center;width:22px;height:22px;margin:-2px 6px -2px -4px;border-radius:50%;background:rgba(42,29,0,.85);font-size:12px;vertical-align:middle}
:root[data-theme=light]{--bg:#eef1fb;--s1:#ffffff;--s2:#e6eaf7;--edge:#c6cce2;--line:#d3d9ee;--tx:#151b35;--mut:#58618a;--blu:#1d6fd6;--ok:#0f9a54;--bad:#d93e3e;--tie:#7656d4;--dot:rgba(21,27,53,.07);--hdr:rgba(238,241,251,.9);--sb:rgba(21,27,53,.18);--sbh:rgba(21,27,53,.4);color-scheme:light}
:root[data-theme=light] .r2{color:#8a94ad}
.lkw{position:relative;flex:none}
.lkb{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--rs);background:var(--s1);border:2px solid var(--line);color:var(--tx);font-size:19px;cursor:pointer;padding:0}
.lkb[aria-expanded=true]{border-color:var(--ac)}
.lkm{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:260px;display:grid;gap:4px;padding:12px;background:var(--s1);border:2px solid var(--line);border-radius:var(--r);box-shadow:0 18px 44px rgba(0,0,0,.4);animation:drop .18s ease-out}
.lkm .tabs{max-width:none;margin:0 0 8px}.lkm small{padding-left:4px}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--blu);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.bk{color:var(--blu)}
.pill{font-size:13px;padding:5px 12px;border-radius:99px;background:var(--bg);border:2px solid var(--line);color:var(--mut)}
.pill.ok{border-color:rgba(61,220,132,.5);color:var(--ok)}
.tag{font-size:12.5px;padding:4px 10px;border-radius:8px;background:var(--bg);border:2px solid var(--line);color:var(--mut);white-space:nowrap}
.bd{font-size:12px;padding:4px 9px;border-radius:6px;text-align:center;font-weight:800;color:#06131a}
.bd.w{background:var(--ok)}.bd.l{background:var(--bad)}.bd.t{background:var(--tie)}.bd.a{background:var(--blu)}
.chips{display:flex;gap:10px;overflow-x:auto;padding:6px 0 14px}
.chip{flex:none;background:var(--s1);border:2px solid var(--line);color:var(--tx);padding:9px 16px;border-radius:var(--rs);font:inherit;font-weight:600;cursor:pointer}
.chip.on{background:var(--ac);color:var(--ac-tx);border-color:var(--ac)}

/* ---- forms ---- */
input,select,textarea{font:inherit;color:var(--tx);background:var(--bg);border:2px solid var(--line);border-radius:var(--rs);padding:10px 14px;min-width:0;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blu)}
textarea{min-height:96px;resize:vertical;margin-bottom:14px}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:18px}
.lb{display:grid;gap:6px;font-size:13.5px;color:var(--mut)}
.ck{display:flex;gap:10px;align-items:center;color:var(--mut);margin-bottom:18px}.ck input{width:auto}
.login{max-width:440px;margin:44px auto;display:grid;gap:14px}.login h2,.login p{margin:0}
.adh{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}.adh h2{margin:0;font-size:28px}
.ar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.ar>b,.ar>span,.ar>small{min-width:0;overflow-wrap:anywhere}
.ar input,.ar select{flex:1 1 150px;width:auto}.ar input[type=number]{flex:0 0 90px}.ar input[type=checkbox]{flex:0 0 20px;height:20px}.push{margin-left:auto}

/* ---- pickers ---- */
.pkw{display:flex;gap:10px;align-items:stretch;margin:6px 0 16px}
.pk{position:relative;flex:1;min-width:0;max-width:480px}
.pkb{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--s1);border:2px solid var(--line);color:var(--tx);border-radius:var(--r);padding:7px 16px;font:inherit;cursor:pointer;text-align:left;min-height:54px}
.pkb:hover,.pkb[aria-expanded=true]{border-color:var(--blu)}
.pkb span{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pkb small{font-size:12.5px}
.pkb b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkb i{font-style:normal;color:var(--mut);transition:transform .2s}.pkb[aria-expanded=true] i{transform:rotate(180deg)}
.pkm{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);background:var(--s1);border:2px solid var(--line);border-radius:var(--r);box-shadow:0 18px 44px rgba(0,0,0,.55);padding:8px;animation:drop .15s ease-out}
.pks{margin-bottom:6px}
.pkl{max-height:min(330px,50vh);overflow-y:auto;overflow-x:hidden;display:grid;gap:2px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pko{background:none;border:0;color:var(--tx);font:inherit;text-align:left;padding:11px 12px;border-radius:8px;cursor:pointer;min-height:44px}
.pko:hover{background:var(--s2)}
.pko.on{background:var(--s2);font-weight:700;box-shadow:inset 4px 0 0 var(--ac)}
.so{flex:none}

/* ---- player profile modal ---- */
.ov{position:fixed;inset:0;z-index:50;background:rgba(5,8,20,.72);display:grid;place-items:center;padding:16px;backdrop-filter:blur(4px)}
.mdl{background:var(--s1);border:2px solid var(--line);border-radius:18px;width:100%;max-width:600px;max-height:90vh;overflow:auto;padding:26px;box-shadow:0 6px 0 var(--edge)}
.mdl h3{margin:22px 0 12px;font-size:20px}.mh{display:flex;gap:16px;align-items:center;margin-bottom:18px}.mh h2{margin:0;font-size:28px}
.x{margin-left:auto;background:none;border:0;color:var(--mut);font-size:24px;cursor:pointer;width:44px;height:44px;border-radius:var(--rs)}.x:hover{background:var(--s2);color:var(--tx)}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kp div{background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}.kp b{display:block;font-family:var(--disp);font-weight:400;font-size:28px}
.gcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.gc{background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:14px;font-size:14px}.big{font-family:var(--disp);font-size:30px;color:var(--ac)}
.hr{display:grid;grid-template-columns:58px 1fr auto 44px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.hr b:last-child{text-align:right}

/* ---- toast, footer ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--s2);color:var(--tx);border:2px solid var(--line);border-left:6px solid var(--ac);font-weight:600;padding:12px 18px;border-radius:var(--rs);box-shadow:0 5px 0 var(--edge),0 18px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90%}
.toast.on{opacity:1;transform:translate(-50%,0)}
.ft{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 20px 50px;text-align:center;border-top:2px solid var(--line)}
.ft .fl{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-bottom:8px}
.ft .fl a{color:var(--tx);text-decoration:none;font-weight:600;font-size:15px;padding:8px 0}
.ft .fl a:hover{color:var(--ac)}
.ft small{max-width:560px;font-size:13.5px}.ft small a{color:var(--blu)}

/* ---- loading screen ---- */
#boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center;background:radial-gradient(circle,var(--dot) 0 2.5px,transparent 3px) 0 0/26px 26px,var(--bg);transition:opacity .5s ease,visibility .5s}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
.bt-orb{position:relative;width:184px;height:184px;display:grid;place-items:center;transition:transform .5s ease}
#boot.done .bt-orb{transform:scale(1.25)}
.bt-orb::before{content:'';position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,60,.28),transparent 70%);animation:glow 2.4s ease-in-out infinite}
.bt-ring{position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--ac);animation:bt-spin 1.1s cubic-bezier(.5,.15,.5,.85) infinite}
.bt-ring.r2{inset:20px;border-top-color:transparent;border-left-color:var(--blu);animation-duration:1.7s;animation-direction:reverse}
.bt-lg{position:relative;font-family:var(--disp);font-size:26px;letter-spacing:.06em;color:var(--ac-tx);background:var(--ac);padding:6px 16px 5px;border-radius:12px;box-shadow:0 5px 0 var(--ac-edge);transform:rotate(-3deg);transform-origin:50% 100%;animation:hop 1.3s cubic-bezier(.3,0,.3,1) infinite}
.bt-sh{position:absolute;left:50%;top:50%;width:84px;height:12px;margin:26px 0 0 -42px;border-radius:50%;background:rgba(0,0,0,.45);animation:shadow 1.3s cubic-bezier(.3,0,.3,1) infinite}
.bt-blk{display:flex;gap:7px;height:30px;align-items:flex-end}
.bt-blk i{width:18px;height:18px;border-radius:4px;background:var(--ac);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);animation:brick 1.8s cubic-bezier(.3,1.4,.5,1) infinite backwards}
.bt-blk i:nth-child(2){background:var(--blu);animation-delay:.12s}.bt-blk i:nth-child(3){background:var(--ok);animation-delay:.24s}.bt-blk i:nth-child(4){background:var(--bad);animation-delay:.36s}.bt-blk i:nth-child(5){background:var(--tie);animation-delay:.48s}
.bt-ttl{font-family:var(--disp);font-size:20px}
.bt-bar{position:relative;width:min(240px,70vw);height:10px;border-radius:6px;background:var(--s1);border:2px solid var(--line);overflow:hidden}
.bt-bar i{position:absolute;top:0;bottom:0;left:0;width:var(--p,12%);background:repeating-linear-gradient(-45deg,var(--ac) 0 8px,#ffdb73 8px 16px) 0 0/22.6px 22.6px;transition:width .5s ease;animation:stripes .5s linear infinite}
.bt-msg{color:var(--mut);font-size:14px;min-height:1.4em}
.bt-slow{color:var(--mut);font-size:13px;opacity:0;animation:bt-fin .4s 12s forwards}.bt-slow a{color:var(--blu)}
.bt-slow::before{content:"Taking longer than usual… "}.bt-slow a::after{content:"Reload"}
@keyframes bt-spin{to{transform:rotate(360deg)}}
@keyframes hop{0%,100%{transform:rotate(-3deg) translateY(0) scale(1.07,.9)}12%{transform:rotate(-3deg) translateY(0) scale(1,1)}50%{transform:rotate(3deg) translateY(-16px) scale(.97,1.04)}88%{transform:rotate(-3deg) translateY(0) scale(1,1)}}
@keyframes shadow{0%,12%,88%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.45}}
@keyframes glow{50%{transform:scale(1.15);opacity:.6}}
@keyframes brick{0%{transform:translateY(-34px);opacity:0}18%,70%{transform:none;opacity:1}86%,100%{transform:translateY(4px) scale(.8);opacity:0}}
@keyframes stripes{to{background-position:22.6px 0}}
@keyframes bt-fin{to{opacity:1}}

/* ---- 404 ---- */
.nf{min-height:62vh;display:grid;place-items:center;text-align:center;padding-top:40px}
.nf h1{margin:6px 0 10px;font-size:clamp(26px,6vw,36px)}.nf p{max-width:440px;margin:0 auto 22px}
.nfc{font-family:var(--disp);font-size:clamp(96px,28vw,160px);line-height:1;color:var(--ac);text-shadow:0 8px 0 var(--ac-edge);transform:rotate(-4deg)}

/* ---- motion: answers to what people do, plus live changes. All of it is off under prefers-reduced-motion (rule at the end). ---- */
.ti{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px - (var(--n) - 1) * 6px) / var(--n));transform:translateX(calc(var(--i) * (100% + 6px)));background:var(--ac);border-radius:var(--rs);box-shadow:0 3px 0 var(--ac-edge);transition:transform .35s cubic-bezier(.25,.9,.3,1)}
.nav-d{position:relative}
.nav-i{position:absolute;left:0;top:50%;height:40px;margin-top:-20px;width:var(--w,0);transform:translateX(var(--x,0));background:var(--s2);border-radius:var(--rs);box-shadow:0 3px 0 var(--edge);transition:transform .4s cubic-bezier(.3,1.25,.5,1),width .4s cubic-bezier(.3,1.25,.5,1)}
.pane{animation:panein .32s ease-out}
.board.intro .row{animation:rowin .5s cubic-bezier(.2,.8,.2,1) backwards}
.board .row.flash{animation:rowpop 1.6s ease-out}
body:not(.ready) .pc,body:not(.ready) .board .row,body:not(.ready) .nx,body:not(.ready) .vsx{animation-play-state:paused}/* intros wait for the loading screen */
.pc{animation:rise .6s cubic-bezier(.2,.9,.3,1.25) backwards}.pc.p3{animation-delay:.05s}.pc.p2{animation-delay:.15s}.pc.p1{animation-delay:.3s}
.wc{animation:chipin .3s cubic-bezier(.3,1.5,.5,1) backwards}
.ov{animation:fade .2s ease-out}.mdl{animation:pop .3s cubic-bezier(.3,1.3,.5,1)}
.toast{transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.lg,.av,.nx,.pc{transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.row{transition:top .8s cubic-bezier(.2,.8,.2,1),border-color .3s,transform .2s}
@media(hover:hover) and (pointer:fine){
 .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 calc(var(--d) + 2px) 0 var(--e)}
 .row:not(.nc):hover{transform:translateY(-2px)}
 .pc:not(.nc):hover{transform:translateY(-5px)}
 .vs>button:hover .av,.row:not(.nc):hover .av{transform:scale(1.08) rotate(-4deg)}
 .fc:hover .nx{transform:rotate(-7deg) scale(1.06)}
 a.logo:hover .lg{transform:rotate(3deg) scale(1.06)}
}
.rk{animation:rkpop .5s cubic-bezier(.3,1.6,.5,1)}
.nx{animation:slap .45s cubic-bezier(.3,1.6,.5,1) .15s backwards}
.vsx{animation:slam .5s cubic-bezier(.3,1.6,.5,1) .1s backwards}
.live{animation:beat .6s ease-out}
.mm .mi{animation:panein .28s ease-out backwards;animation-delay:calc(var(--d,0) * 40ms)}
.pko{animation:fade .2s ease-out backwards;animation-delay:calc(min(var(--d,0),12) * 18ms)}
header{transition:box-shadow .25s}header.sc{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cf{position:fixed;z-index:70;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:2px;pointer-events:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);animation:cf .85s cubic-bezier(.2,.7,.4,1) forwards}
@media(hover:hover) and (pointer:fine){.st{transition:transform .2s cubic-bezier(.3,1.5,.5,1)}.st:hover{transform:translateY(-3px)}}
@keyframes rkpop{from{transform:scale(.4);opacity:0}}
@keyframes slap{from{opacity:0;transform:rotate(-16deg) scale(1.9)}}
@keyframes slam{from{opacity:0;transform:rotate(-8deg) scale(2.3)}}
@keyframes beat{30%{transform:scale(1.15);filter:brightness(1.4)}}
@keyframes cf{to{transform:translate(var(--dx),calc(var(--dy) + 70px)) rotate(var(--r));opacity:0}}
@keyframes panein{from{opacity:0;transform:translateY(8px)}}
@keyframes rowin{from{opacity:0;transform:translateY(14px)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes chipin{from{opacity:0;transform:scale(.6)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes sheet{from{transform:translateY(100%)}}
.ov.out{animation:fadeout .23s ease-in forwards;pointer-events:none}.ov.out .mdl{animation:popout .23s ease-in forwards}
@keyframes fadeout{to{opacity:0}}@keyframes popout{to{opacity:0;transform:translateY(12px) scale(.95)}}@keyframes sheetout{to{transform:translateY(100%)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,132,.7)}100%{box-shadow:0 0 0 9px rgba(61,220,132,0)}}
@keyframes dpop{from{opacity:0;transform:translateY(8px) scale(.3)}}
@keyframes rowpop{0%{box-shadow:0 3px 0 var(--edge),0 0 0 0 rgba(61,220,132,.55)}20%{transform:scale(1.035)}45%{box-shadow:0 3px 0 var(--edge),0 0 0 12px rgba(61,220,132,0)}100%{transform:none}}

/* ---- phones ---- */
@media(max-width:760px){.nav-d{display:none}.bg{display:block}.ttl{display:none}.live{display:none}.hd{padding-left:4px;padding-right:4px}}
@media(max-width:700px){
 body{font-size:15.5px}
 .wrap{padding:0 14px}
 .hd{min-height:60px;padding-top:8px;padding-bottom:8px;gap:8px}
 main.wrap{padding-top:16px;padding-bottom:64px}
 .hero{padding:10px 0 4px}.hero p{font-size:15.5px}
 .card{padding:16px;margin:14px 0}
 .stats{grid-template-columns:repeat(2,1fr);gap:10px}.st{padding:12px 14px}.st b{font-size:26px}
 .ann{padding:13px 14px;margin:16px 0}
 .chips{margin:0 -14px;padding:4px 14px 12px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
 .pod{gap:8px}.pc{padding:14px 6px}.pc.p1{padding:22px 6px 18px}.pp{font-size:21px}.crown{font-size:24px}.pc small{font-size:11.5px}
 .rec{display:none}.pt{min-width:0}.nreg{font-size:10.5px;padding:3px 6px}.row{grid-template-columns:30px 44px 1fr auto;gap:10px;padding:0 12px}.row.nc{grid-template-columns:30px 44px 1fr auto}
 input,select,textarea{font-size:16px;padding:11px 14px}
 .ar{gap:10px}.ar input,.ar select{flex:1 1 100%}.ar input[type=number]{flex:1 1 90px}.ar input[type=checkbox]{flex:0 0 22px}
 .ar .btn,.ar .btn.sm{flex:1 1 auto;min-height:42px}
 .fg{grid-template-columns:1fr;gap:12px}
 .fx{grid-template-columns:1fr}
 .tabs{max-width:none}
 .pk{max-width:none}
 .ov{padding:0;place-items:end stretch}
 .ov.out .mdl{animation:sheetout .25s ease-in forwards}
 .mdl{animation:sheet .32s cubic-bezier(.2,.9,.3,1);max-width:none;border-radius:18px 18px 0 0;max-height:92vh;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
 .kp{grid-template-columns:repeat(2,1fr)}
 .hr{grid-template-columns:50px 1fr auto;gap:8px}.hr b:last-child{display:none}
 .gcs{grid-template-columns:1fr 1fr}
 .toast{bottom:calc(16px + env(safe-area-inset-bottom));width:calc(100% - 28px)}
 .ft{padding:24px 14px 40px}
}
@media(max-width:420px){.tab{font-size:14.5px;gap:6px;padding:9px 8px}.tn{min-width:20px;padding:3px 6px;font-size:11.5px}}
@media(max-width:360px){.tab{font-size:13px;padding:9px 5px}.pc b{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:400px){.board .row,.board .row.nc{grid-template-columns:22px 44px 1fr auto;gap:8px;padding:0 10px}}

/* dropdowns inside forms and rows (Sel) */
.pkw.in{margin:0;flex:1 1 150px;min-width:0}.pkw.in .pk{max-width:none}.pkw.in .pkb{min-height:46px;padding:5px 14px}
@media(max-width:700px){.ar .pkw.in{flex:1 1 100%}}

/* LIVE: sessions and duels in progress (LiveBoard) */
.lvw{margin:22px 0}.lvb+.lvb{margin-top:26px}
.lvh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.lvh small{color:var(--mut)}
.lv{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 11px;border-radius:99px;background:rgba(255,99,99,.14);border:2px solid var(--bad);color:var(--bad);font-family:var(--disp);font-size:15px;letter-spacing:.06em;line-height:1.2}
.lv i{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:lvp 1.4s ease-out infinite}
.lv b{color:var(--tx);font-family:inherit;font-weight:400;letter-spacing:0;margin-left:2px}
@keyframes lvp{0%{box-shadow:0 0 0 0 rgba(255,99,99,.75)}100%{box-shadow:0 0 0 9px rgba(255,99,99,0)}}
.fc.lvc{border-color:var(--bad);box-shadow:0 5px 0 #a33232}
.lvs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.lvs>button{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:8px 4px;border-radius:12px;background:none;border:0;color:var(--tx);font:inherit;cursor:pointer}
.lvs>button:hover{background:var(--s2)}.lvs>button>b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.scr span{color:var(--mut);font-size:30px}.scr b{min-width:34px;text-align:center;font-weight:400;color:var(--mut);transition:color .2s}.scr b.lead{color:var(--ac)}
.lva{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:2px dashed var(--line)}
.lva>span{display:flex;gap:6px;justify-content:center}
.lvd{margin-left:8px;padding:2px 7px;border-radius:6px;background:var(--bad);color:#2b0505;font-size:10.5px;font-weight:800;letter-spacing:.06em;vertical-align:middle;animation:lvb 1.4s ease-in-out infinite}
@keyframes lvb{50%{opacity:.55}}
@media(max-width:700px){.scr{font-size:38px}.scr b{min-width:26px}.lva{grid-template-columns:1fr 1fr}.lva>.btn{grid-column:1/-1;order:3}}
/* team duels (2v2, 2v5 ...) */
.sd{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}.sd em{align-self:center;font-style:normal;font-size:13px;color:var(--mut)}
.vs>button>.sd+b,.lvs>button>.sd+b{white-space:normal;overflow:visible;text-align:center}
.tmf{position:absolute;top:-13px;right:14px;background:var(--blu);color:#001a33;font-family:var(--disp);font-size:14px;padding:3px 10px;border-radius:6px;box-shadow:0 2px 0 #2b72b8}
.tbd{flex:1 1 100%}.wc.tp{cursor:pointer;color:var(--tx);font:inherit;font-size:14px}.wc.tp.on{border-color:var(--ac);box-shadow:0 3px 0 var(--ac-edge)}.wc.tp:disabled{opacity:.35;cursor:not-allowed}

/* a card (or row) holding an open dropdown rises above the cards after it; with glass, every card is its own layer and the menu was drawn under the next card */
:is(.card,.fc,.ar,.mdl):has(.pkm){position:relative;z-index:40}

/* position leaderboard (PosCard) and queued duels */
.fc.pos{grid-column:1/-1}.pl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.pr{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:10px;padding:6px 10px;border:2px solid var(--line);border-radius:12px;background:var(--bg)}
.pr.r1{border-color:var(--ac);box-shadow:0 3px 0 var(--ac-edge)}.pr .pn{font-family:var(--disp);font-size:22px;text-align:center;color:var(--mut);font-weight:400}.pr.r1 .pn{color:var(--ac)}
.pr .pw{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;color:var(--tx);font:inherit;font-weight:700;cursor:pointer;text-align:left;padding:0}.pr .pw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr em{font-style:normal;font-family:var(--disp);color:var(--ok)}.pa{display:flex;gap:6px}
.lvq{margin-top:16px}.lvq>small{display:block;margin-bottom:8px}.lva .lvp{grid-column:1/-1}

/* a team side is a button that opens a player menu */
.sdw{position:relative;min-width:0;display:flex}
.vs>.sdw>button,.lvs>.sdw>button{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:8px 4px;border-radius:12px;background:none;border:0;color:var(--tx);font:inherit;cursor:pointer}
.vs>.sdw>button:hover,.lvs>.sdw>button:hover{background:var(--s2)}
.vs>.sdw>button>b,.lvs>.sdw>button>b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs>.sdw>button>.sd+b,.lvs>.sdw>button>.sd+b{white-space:normal;overflow:visible;text-align:center}
.sdm{color:var(--mut);font-size:12px}
.sdp{position:absolute;z-index:35;top:calc(100% - 4px);left:50%;transform:translateX(-50%);min-width:180px;max-width:90vw;background:var(--s1);border:2px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.5);padding:6px;display:grid;gap:2px;animation:drop .15s ease-out}
.sdp button{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:none;border:0;color:var(--tx);font:inherit;font-weight:600;cursor:pointer;text-align:left}.sdp button:hover{background:var(--s2)}
.fc:has(.sdp){position:relative;z-index:40}