:root{
  --bg:#0d1117; --bg2:#151b24; --card:#171e28; --card2:#1e2734;
  --line:#2a3442; --line2:#3a4757;
  --tx:#e8edf4; --tx2:#9aa8ba; --tx3:#697787;
  --accent:#f0a828; --accent2:#ffc24d; --accentdim:#4a3714;
  --good:#4bbf8a; --bad:#e2685f; --info:#5aa9e6; --hot:#ff7a45;
  --g1:#f0a828; --g2:#c0c7d1; --g3:#c88b52;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:84px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}

header.top{position:sticky;top:0;z-index:40;background:rgba(13,17,23,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{max-width:720px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.brand{flex:1;min-width:0}
.brand h1{font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .sub{font-size:11.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.09em;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;
  background:var(--card2);border:1px solid var(--line2);color:var(--tx2);white-space:nowrap;cursor:pointer;
  display:flex;align-items:center;gap:6px}
.who.admin{color:var(--accent);border-color:var(--accentdim);background:#241b09}
.dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none;transition:opacity .3s}
.dot.stale{background:var(--tx3)} .dot.off{background:var(--bad)}
.dot.beat{opacity:.25}

nav.bot{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(21,27,36,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bot-in{max-width:720px;margin:0 auto;display:flex}
.bot-in button{flex:1;background:none;border:0;color:var(--tx3);padding:10px 2px 12px;
  font:600 10px/1.3 inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.bot-in button .ic{font-size:19px;line-height:1}
.bot-in button.on{color:var(--accent)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0}
.card.flat{background:transparent;border-style:dashed}
.card h3{font-size:15px;margin-bottom:2px}
.sec-title{font:700 11px/1 inherit;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3);
  margin:22px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.muted{color:var(--tx2)} .tiny{font-size:12.5px} .dim{color:var(--tx3);font-size:12.5px}

.btn{background:var(--card2);color:var(--tx);border:1px solid var(--line2);border-radius:10px;
  padding:10px 14px;font:600 14px inherit;cursor:pointer}
.btn:hover{border-color:#4b5a6d}
.btn.pri{background:var(--accent);color:#231a05;border-color:var(--accent)}
.btn.pri:hover{background:var(--accent2)}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.wide{width:100%} .btn.danger{color:var(--bad);border-color:#4a2a28}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

label.f{display:block;margin:12px 0 0}
label.f > span{display:block;font:600 11px/1 inherit;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
input,textarea,select{width:100%;background:var(--bg2);color:var(--tx);border:1px solid var(--line2);
  border-radius:10px;padding:10px 12px;font:15px inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
textarea{min-height:76px;resize:vertical;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.grid2{grid-template-columns:1fr}}

.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 2px;margin:6px 0 2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:var(--card);border:1px solid var(--line);color:var(--tx2);padding:8px 14px;
  border-radius:999px;font:600 13px inherit;cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--accent);color:#231a05;border-color:var(--accent)}

.stand{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line)}
.stand:last-child{border-bottom:0}
.rank{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  font:800 14px inherit;background:var(--card2);color:var(--tx2)}
.rank.p1{background:var(--g1);color:#231a05}
.rank.p2{background:var(--g2);color:#1b2027}
.rank.p3{background:var(--g3);color:#231a05}
.stand .nm{flex:1;min-width:0}
.stand .nm b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stand .pts{font:800 20px inherit;letter-spacing:-.03em}
.stand .pts small{font:600 10px inherit;color:var(--tx3);display:block;text-align:right;letter-spacing:.09em}
.swatch{width:8px;height:26px;border-radius:4px;flex:none}

.ev{display:flex;gap:12px;padding:14px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.ev:last-child{border-bottom:0} .ev:hover{background:var(--card2)}
.when{width:58px;flex:none;text-align:center}
.when .d{font:800 11px inherit;letter-spacing:.06em;color:var(--tx3);text-transform:uppercase}
.when .t{font:800 15px inherit;letter-spacing:-.02em;margin-top:1px}
.ev .body{flex:1;min-width:0} .ev .body b{display:block;font-size:15px}
.pill{display:inline-block;font:700 10px inherit;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--card2);color:var(--tx3);border:1px solid var(--line2)}
.pill.final{color:var(--good);border-color:#1e4536;background:#12251d}
.pill.live{color:var(--bad);border-color:#4a2a28;background:#2a1614}
.pill.next{color:var(--accent);border-color:var(--accentdim);background:#241b09}
.pill.hot{color:var(--hot);border-color:#4a2a1a;background:#2a1a12}

.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0} .kv span:first-child{color:var(--tx3)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{background:var(--card2);border:1px solid var(--line2);border-radius:999px;padding:5px 11px;font-size:13px;display:flex;align-items:center;gap:6px}
.chip button{background:none;border:0;color:var(--tx3);cursor:pointer;font-size:15px;line-height:1;padding:0}
.rules{white-space:pre-wrap;color:var(--tx2);font-size:14px;line-height:1.6}
.big-count{font:800 30px inherit;letter-spacing:-.03em;color:var(--accent)}
.empty{text-align:center;padding:34px 16px;color:var(--tx3)}
.empty .ic{font-size:34px;display:block;margin-bottom:8px;opacity:.5}
.split{display:flex;justify-content:space-between;align-items:center;gap:12px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;font-weight:700}
.banner{background:#241b09;border:1px solid var(--accentdim);color:var(--accent2);border-radius:10px;padding:11px 13px;font-size:13px;margin:12px 0}
.banner.bad{background:#2a1614;border-color:#4a2a28;color:#ffb3ad}
.pv{display:flex;align-items:center;gap:8px;margin-top:8px}
.pv .lab{width:72px;flex:none;font:700 12px inherit;color:var(--tx3);letter-spacing:.05em}
.pv input{width:auto;flex:1}
hr.sep{border:0;border-top:1px solid var(--line);margin:16px 0}

.av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font:800 12px inherit;color:#12161c;letter-spacing:-.02em}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:10px 0}
.post .hd{display:flex;gap:10px;align-items:center}
.post .hd .nm{flex:1;min-width:0}
.post .hd .nm b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post .hd .nm span{font-size:11.5px;color:var(--tx3)}
.post .tx{margin-top:10px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.media{margin-top:10px;border-radius:11px;overflow:hidden;background:#000;position:relative}
.media img,.media video{display:block;width:100%;max-height:440px;object-fit:contain;background:#000}
.rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.rx button{background:var(--card2);border:1px solid var(--line2);color:var(--tx2);border-radius:999px;
  padding:4px 10px;font:600 13px inherit;cursor:pointer;display:flex;gap:5px;align-items:center}
.rx button.on{border-color:var(--accent);background:#241b09;color:var(--accent2)}
.rx .addr{color:var(--tx3);font-size:15px;padding:4px 9px}
.callout{background:linear-gradient(180deg,#2a1a12,#1d1410);border:1px solid #4a2a1a;border-radius:var(--r);padding:13px;margin:10px 0}
.callout .vs{font:800 13px inherit}
.callout .txt{font-size:14.5px;margin-top:6px;font-style:italic;color:#ffd0b8}
.callout .res{margin-top:9px;font:700 12px inherit;letter-spacing:.04em}
.vote{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line2);
  border-radius:10px;margin-top:7px;cursor:pointer;background:var(--bg2);position:relative;overflow:hidden}
.vote:hover{background:var(--card2)}
.vote.on{border-color:var(--accent);background:#241b09}
.vote .bar{position:absolute;left:0;top:0;bottom:0;background:#2a2109}
.attachbar{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.thumb{position:relative;margin-top:10px;border-radius:11px;overflow:hidden}
.thumb img,.thumb video{width:100%;max-height:220px;object-fit:cover;display:block}
.thumb .x{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);border:0;color:#fff;
  width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:15px}
.playbadge{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;
  border-radius:999px;padding:3px 9px;font:700 11px inherit;letter-spacing:.05em}
.uprog{height:5px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:10px}
.uprog i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

#reel{position:fixed;inset:0;z-index:200;background:#05070a;display:none;flex-direction:column}
#reel.on{display:flex}
#reel .stage{flex:1;display:grid;place-items:center;padding:10px;min-height:0}
#reel canvas{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#reel .ctl{display:flex;gap:8px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:#0d1117;flex-wrap:wrap}
#reel .prog{flex:1;min-width:120px;height:5px;background:var(--line);border-radius:99px;overflow:hidden}
#reel .prog i{display:block;height:100%;background:var(--accent);width:0}

.gate{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:32px 16px 60px}
.gate .logo{text-align:center;margin-bottom:26px}
.gate .logo .mark{font-size:44px}
.gate .logo h1{font-size:31px;margin-top:6px;letter-spacing:-.035em}
.gate .logo p{color:var(--tx3);font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;margin:8px 0 0}
.opt{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;margin-bottom:10px;cursor:pointer;width:100%;text-align:left;color:inherit;font:inherit}
.opt:hover{border-color:var(--line2);background:var(--card2)}
.opt .ic{font-size:24px;width:30px;text-align:center;flex:none}
.opt b{display:block;font-size:15px}
.err{color:var(--bad);font-size:13px;margin-top:8px}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:300;
  background:#1e2734;border:1px solid var(--line2);color:var(--tx);border-radius:10px;
  padding:10px 16px;font:600 14px inherit;box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}
#toast.bad{border-color:#4a2a28;color:#ffb3ad}
#boot{display:grid;place-items:center;min-height:100vh;color:var(--tx3);font-size:14px}

/* ---- formats: bracket, rounds grid, round-robin table ---- */
.fmt{font:700 10px inherit;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;
  border-radius:999px;background:#122231;color:var(--info);border:1px solid #1d3548}
.fmt.rounds{background:#1a2517;color:#8fd06a;border-color:#2c4222}
.fmt.roundrobin{background:#231a2e;color:#b088e0;border-color:#3a2a4a}
.fmt.placement{background:var(--card2);color:var(--tx3);border-color:var(--line2)}

.bkt{overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.bkt::-webkit-scrollbar{height:6px}
.bkt::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.bkt-row{display:flex;gap:14px;align-items:flex-start;min-width:min-content}
.bkt-col{min-width:186px;flex:none}
.bkt-round{font:700 10px inherit;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);
  margin-bottom:8px;white-space:nowrap}
.bkt-m{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;overflow:hidden;margin-bottom:10px}
.bkt-m.live{border-color:var(--accent)}
.bkt-m.done{opacity:.92}
.bkt-m.void{opacity:.4}
.side{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13.5px;
  border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;
  width:100%;color:var(--tx);text-align:left;font-family:inherit}
.side:last-child{border-bottom:0}
.side .sd{font:700 10px inherit;color:var(--tx3);width:14px;flex:none}
.side b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side i{font:800 13px inherit;font-style:normal;color:var(--tx3)}
.side.won{background:#1a2a20}
.side.won b{color:var(--good)}
.side.won i{color:var(--good)}
.side.lost b{color:var(--tx3);text-decoration:line-through;text-decoration-thickness:1px}
.side.tbd b{color:var(--tx3);font-style:italic;font-weight:500}
.side.pick{cursor:pointer}
.side.pick:hover{background:var(--card2)}
.side .sc{width:46px;flex:none;padding:3px 6px;font-size:12px;border-radius:6px}
.bkt-note{font-size:11.5px;color:var(--tx3);padding:5px 10px;border-top:1px solid var(--line)}

.grid-wrap{overflow-x:auto}
table.gr{width:100%;border-collapse:collapse;font-size:13.5px;min-width:min-content}
table.gr th{font:700 10px inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);
  padding:8px 6px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
table.gr th:first-child,table.gr td:first-child{text-align:left;padding-left:0}
table.gr td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
table.gr tr:last-child td{border-bottom:0}
table.gr td.nm{font-weight:600}
table.gr td.agg{font-weight:800;color:var(--accent)}
table.gr input{width:62px;padding:6px 6px;font-size:13.5px;text-align:center;border-radius:7px}
table.gr .pos{width:26px;height:26px;border-radius:7px;display:inline-grid;place-items:center;
  font:800 12px inherit;background:var(--card2);color:var(--tx2)}
table.gr .pos.p1{background:var(--g1);color:#231a05}
table.gr .pos.p2{background:var(--g2);color:#1b2027}
table.gr .pos.p3{background:var(--g3);color:#231a05}
.stage-title{font:800 12px inherit;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);margin:16px 0 8px}

/* ===================================================== settle it (disputes) */
.settler{cursor:pointer}
.settler:hover{border-color:var(--line2)}
.settler-row{display:flex;align-items:center;gap:12px}
.settler-ic{font-size:24px;line-height:1;flex:none}
.settler-ic.big{font-size:30px}
.pill.done{color:var(--tx2);border-color:var(--line2);background:var(--card2)}

.kindgrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.kindbtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;
  color:var(--tx);font:inherit;cursor:pointer}
.kindbtn:hover{border-color:var(--accent)}
.kindbtn .ic{font-size:22px;line-height:1.1}
.kindbtn b{font-size:14px}

.tworow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ticklist{display:flex;flex-wrap:wrap;gap:6px}
.tick{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer}
.tick input{width:auto;margin:0}
.dotc{width:9px;height:9px;border-radius:50%;flex:none}

.proof{margin-top:10px}
.sec-lbl{font:700 10px/1 inherit;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx3);word-break:break-all}
.okmark{color:var(--good);margin-top:5px}
.badmark{color:var(--bad);margin-top:5px;font-weight:700}

.bigresult{font:800 26px/1.15 inherit;text-align:center;margin:14px 0 8px;color:var(--accent)}
.bigresult.hot{color:var(--hot)}

.coinsides{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.coinsides .side{flex:1;text-align:center;background:var(--card2);border:1px solid var(--line2);
  border-radius:10px;padding:14px 8px;font-weight:700}
.coinsides .side.win{border-color:var(--accent);background:#241b09;color:var(--accent)}
.coinsides .side.lost{opacity:.45}
.coinsides .vs{color:var(--tx3);font:700 11px inherit;text-transform:uppercase}
.pip{display:inline-block;background:var(--card2);border:1px solid var(--line2);border-radius:6px;
  padding:3px 8px;margin:0 3px}

.wheelwrap{position:relative;width:min(280px,78vw);margin:16px auto 4px}
.wheelptr{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--accent);font-size:20px;line-height:1;text-shadow:0 1px 3px #000}
.wheel{width:100%;height:auto;display:block}
.wheel .wlbl{font:700 9px sans-serif;fill:#12181f}

.duelpad{margin-top:12px;border-radius:14px;padding:34px 16px;text-align:center;
  font:800 20px/1.2 inherit;display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1px solid var(--line2);background:var(--card2);user-select:none}
.duelpad .tiny{font-weight:500;color:var(--tx3)}
.duelpad.wait{background:#3a2410;border-color:#5d3a17;color:var(--accent);cursor:pointer}
.duelpad.go{background:var(--good);border-color:var(--good);color:#0b1f16;cursor:pointer;font-size:34px}
.duelpad.go .tiny{color:#0b1f16}
.duelpad.done{opacity:.75}
.drow{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-top:8px;
  background:var(--card2);border:1px solid var(--line2);border-radius:10px}
.drow.win{border-color:var(--accent);background:#241b09}
.drow span{color:var(--tx2);font-variant-numeric:tabular-nums}

.darebox{margin-top:12px;background:var(--card2);border:1px solid var(--line2);border-radius:10px;
  padding:14px;font:600 16px/1.35 inherit;display:flex;flex-direction:column;gap:6px}
.darebox .tiny{font-weight:500;color:var(--tx3);text-transform:none;letter-spacing:0}
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin-top:12px}
.numbtn{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:14px 0;
  color:var(--tx);font:800 17px inherit;cursor:pointer}
.numbtn:hover{border-color:var(--accent);color:var(--accent)}
.oddsrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;text-align:center}
.oddsrow > div{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:12px 8px}
.oddsrow .num{display:block;font:800 30px/1.1 inherit;color:var(--accent);margin-top:4px}

.rmatch{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:6px;
  background:var(--card2);border:1px solid var(--line2);border-radius:10px;font-size:13.5px}
.rmatch.live{border-color:var(--accentdim)}
.rmatch.done{opacity:.7}
.rmatch .vs{color:var(--tx3);font-size:11px}
.rmatch .w{font-weight:800;color:var(--accent)}
.rmatch .thr{margin-left:auto}
.throwrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.throwbtn{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:12px 0;
  color:var(--tx);font-size:24px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.throwbtn .tiny{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em}
.throwbtn:hover{border-color:var(--accent)}
.orderlist{margin-top:12px}
.orow{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:5px;
  background:var(--card2);border:1px solid var(--line2);border-radius:9px}
.orow .pl{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  font:800 11px inherit;background:var(--line2);color:var(--tx2)}
.orow:first-child .pl{background:var(--accent);color:#231a05}
/* the shortcut out of an argument and into settling it */
.btn.settle-sc{border-color:var(--accentdim);color:var(--accent)}
.btn.settle-sc:hover{border-color:var(--accent)}