:root {
  --bg:#f3f4f6; --panel:#fff; --text:#111827; --muted:#6b7280; --line:#d1d5db;
  --gold:#a16207; --goldbg:#fef3c7; --red:#b91c1c; --redbg:#fee2e2;
  --blue:#1d4ed8; --bluebg:#dbeafe; --green:#047857; --orange:#b45309;
}
@media(prefers-color-scheme:dark){
  :root{--bg:#07101f;--panel:#111827;--text:#f9fafb;--muted:#9ca3af;--line:#374151;
  --gold:#fde68a;--goldbg:#422006;--red:#fca5a5;--redbg:#3f1518;
  --blue:#93c5fd;--bluebg:#172554;--green:#6ee7b7;--orange:#fcd34d;}
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
button,input{font:inherit} button{color:inherit}
.app{width:min(100%,720px);margin:auto;padding:env(safe-area-inset-top) 12px calc(82px + env(safe-area-inset-bottom))}
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);padding:12px 0 10px}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px}
h1{font-size:20px;margin:0} .sub,.muted{color:var(--muted)} .sub{font-size:13px;margin-top:2px}
.iconbtn{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 11px}
.status{font-size:12px;padding:7px 9px;border:1px solid var(--line);
  background:var(--panel);border-radius:9px;margin-bottom:10px} .ok{color:var(--green)} .warn{color:var(--orange)}
.topright{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.updated{font-size:11px;color:var(--muted);text-align:right;line-height:1.2}
.hero{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px;margin-bottom:12px}
.eyebrow{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hero-title{font-size:28px;font-weight:800;margin:3px 0} .countdown{font-size:14px;color:var(--gold);font-weight:700}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.metrics.m2{grid-template-columns:repeat(2,1fr)} .metrics.m4{grid-template-columns:repeat(4,1fr)}
.mystatus{padding:10px} .mystatus .metrics{margin:0}
.mystatus .metric b{font-size:17px;white-space:nowrap} .mystatus .metric span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.metric.good b{color:var(--green)} .metric.bad b{color:var(--muted)}
.metric{border:1px solid var(--line);border-radius:12px;padding:9px;text-align:center}
.metric b{display:block;font-size:20px} .metric span{font-size:11px;color:var(--muted)}
.alliance{border-radius:12px;overflow:hidden;margin-top:6px} .alliance.red{background:var(--redbg)} .alliance.blue{background:var(--bluebg)}
.ahead{font-size:12px;font-weight:800;padding:6px 8px 3px} .red .ahead{color:var(--red)} .blue .ahead{color:var(--blue)}
.teamrow{display:grid;grid-template-columns:minmax(0,1fr) 46px 46px;gap:4px;padding:5px 8px;
  border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);align-items:center}
.alliance .ahead+.teamrow{border-top:none}
.teamrow.mine{background:var(--goldbg);font-weight:600}
.alliance .teamrow.mine{background:color-mix(in srgb,var(--goldbg) 80%,transparent);font-weight:700} .identity{min-width:0;display:flex;gap:7px;align-items:baseline}
.tnum{font-weight:800;min-width:48px} .tname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.rank{text-align:right;font-variant-numeric:tabular-nums;font-size:13px} .rankhead{color:var(--muted);font-size:10px}
.section-title{font-size:17px;margin:16px 2px 8px} .titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 2px 8px}
.titlebar h2{font-size:17px;margin:0}
.helpbtn{width:28px;height:28px;padding:0;border:1px solid var(--line);background:var(--panel);border-radius:999px;font-size:14px;font-weight:800;color:var(--muted);flex:0 0 auto}
.power-help-inline{display:block;margin:4px auto 0} .search{display:grid;gap:4px;margin:0 2px 10px;font-size:12px;color:var(--muted)}  .score{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);margin:4px 0 8px} .winner{color:var(--green)} .pending{color:var(--muted)}
.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 11px 8px}
.scorebox{border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-align:center}
.scorebox b{display:block;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.scorelabel{display:block;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.scorebox.red{background:color-mix(in srgb,var(--redbg) 65%,var(--panel))}
.scorebox.blue{background:color-mix(in srgb,var(--bluebg) 65%,var(--panel))}
.scorebox.won{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--panel))}
.scorebox.won b{color:var(--green)}
.alliance.won{box-shadow:inset 0 0 0 2px var(--green)}
.teamcard{padding:11px} .teamcard h3{margin:0 0 8px;font-size:17px} .teamstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tiny{border:1px solid var(--line);border-radius:9px;padding:7px;text-align:center} .tiny b{display:block} .tiny span{font-size:10px;color:var(--muted)}
#page-teams{padding-bottom:0} .teams-sticky{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 8px 0} .teams-controls{display:grid;grid-template-columns:1fr;gap:6px;padding:0 0 8px;font-size:13px} .teams-controls input{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--bg);color:var(--text)}
.teams-grid{padding:0;display:grid;grid-template-columns:1fr;row-gap:0} .teams-header{display:grid;grid-template-columns:46px minmax(0,1fr) 40px 40px 44px 52px 74px;gap:6px;padding:8px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:104px;z-index:9}
.header-btn{border:0;background:none;color:var(--muted);font-size:11px;font-weight:700;padding:0;cursor:pointer;text-align:left;text-transform:uppercase;letter-spacing:0.5px} .header-btn.active{color:var(--gold)} .header-btn:hover{color:var(--text)}
.header-btn.stat-btn{text-align:center} .stat-label{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;text-align:center;align-self:center}
.team-item{display:grid;grid-template-columns:46px minmax(0,1fr) 40px 40px 44px 52px 74px;gap:6px;padding:8px;align-items:center;border-bottom:1px solid var(--line);font-size:13px;background:var(--bg)}
.team-item{cursor:pointer} .team-item.my-team{background:var(--goldbg)} .team-num{font-weight:700;font-size:15px} .team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stat{text-align:center;font-size:12px;color:var(--muted)} .stat.next{font-size:11px;line-height:1.2}
.tabs{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,720px);
  display:grid;grid-template-columns:repeat(6,1fr);background:color-mix(in srgb,var(--panel) 96%,transparent);
  border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));backdrop-filter:blur(14px);z-index:20}
.tab{border:0;background:transparent;padding:8px 2px;border-radius:9px;font-size:11px;margin:4px 1px} .tab.active{background:var(--goldbg);color:var(--gold);font-weight:800;border-radius:10px;padding:8px 4px;margin:2px 1px}
.page{display:none} .page.active{display:block} details{border:1px solid var(--line);background:var(--panel);border-radius:12px;margin-bottom:10px}
summary{padding:11px;font-weight:700} .settings{padding:0 11px 11px;display:grid;gap:9px}
label{font-size:12px;color:var(--muted);display:grid;gap:4px} input,select{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--bg);color:var(--text)}
label.check{display:flex;align-items:center;gap:8px} label.check input{width:auto;flex:0 0 auto}
label.combo{position:relative}
.combolist{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:4px;background:var(--bg);border:1px solid var(--line);border-radius:9px;max-height:230px;overflow:auto;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.combolist button{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;padding:9px 11px;border:0;background:none;color:var(--text);font-size:13px;cursor:pointer}
.combolist button b{min-width:44px}
.combolist button span{color:var(--muted)}
.combolist button:hover,.combolist button:focus{background:var(--line)}
.primary{border:0;border-radius:10px;padding:10px;background:var(--gold);color:#111827;font-weight:800}
.primary:disabled{opacity:.75;cursor:wait}
.primary.busy{animation:pulse 1s ease-in-out infinite}
.primary.saved{background:var(--green);color:#fff}
@keyframes pulse{50%{opacity:.55}}
.helpcopy p{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--text)}
.helpcopy code{font-size:12px;color:var(--muted)} .empty{padding:30px 12px;text-align:center;color:var(--muted)}
.alert{border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:var(--goldbg);color:var(--text);border-radius:12px;padding:11px 12px;margin-bottom:12px;font-size:13px;line-height:1.45}
.alert-link{border:0;background:transparent;padding:0;color:var(--gold);font-weight:800;text-decoration:underline;cursor:pointer}
.update-banner{position:fixed;top:0;left:0;right:0;z-index:100;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:var(--gold);color:#111827;font-weight:700;font-size:14px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.3);animation:banner-in .25s ease-out}
@keyframes banner-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.champ{border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:var(--goldbg);color:var(--gold);border-radius:12px;padding:12px;margin:12px 0;font-weight:800;text-align:center;font-size:16px}
.champ .champteams{display:block;font-size:13px;font-weight:700;margin-top:3px}
.agrid,.pgrid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.agrid,.pgrid{grid-template-columns:1fr 1fr}}
.acard{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 11px}
.acard.out{opacity:.6} .acard.minecard{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.ahdr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.aseed{font-weight:800;font-size:14px}
.abadge{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
.abadge.won{background:var(--goldbg);color:var(--gold)}
.abadge.out{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.abadge.live{background:color-mix(in srgb,var(--green) 14%,var(--panel));color:var(--green)}
.ateam{display:flex;gap:8px;align-items:baseline;padding:3px 2px;font-size:13px;min-width:0}
.ateam.mine{background:var(--goldbg);border-radius:6px;padding:3px 6px;font-weight:600}
.arole{flex:0 0 54px;font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.03em}
.arec{margin-top:6px;font-size:12px;color:var(--muted)}
.round-title{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:14px 2px 6px}
.pmatch{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 10px}
.pmeta{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:2px}
.mnum{font-weight:800}
.btag{font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:1px 7px;font-size:10px}
.btag.upper{background:var(--goldbg);color:var(--gold)}
.btag.lower{border:1px solid var(--line);color:var(--muted)}
.ptime{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums} .ptime.winner{color:var(--green)}
.prow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent);font-size:13px}
.apill{font-weight:800;font-size:12px;border-radius:7px;text-align:center;padding:2px 0}
.prow.red .apill{background:var(--redbg);color:var(--red)}
.prow.blue .apill{background:var(--bluebg);color:var(--blue)}
.prow.tbd .apill{background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.prow.tbd .pteams{color:var(--muted)}
.pteams{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.pteams b{color:var(--gold)}
.feedhint{font-size:11px;color:var(--muted)}
.pscore{font-weight:800;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.prow.won{font-weight:700} .prow.won .pscore{color:var(--green)}
.tnum-tap{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.tnum-tap.mine{color:var(--gold);font-weight:800}
dialog#teamDetail{border:0;border-radius:16px;padding:14px;background:var(--panel);color:var(--text);width:min(92vw,380px)}
dialog#teamDetail::backdrop{background:rgba(0,0,0,.5)}
dialog#teamDetail h3{margin:0 0 10px;font-size:17px}
.tdloc{margin-top:10px;font-size:13px;color:var(--muted)}
#teamDetailClose{margin-top:12px;width:100%}