:root{
  --bg:#EDEFEB; --surface:#FFFFFF; --surface-2:#F5F7F3; --surface-3:#E7EBE5;
  --line:#D6DBD3; --line-2:#BAC2B7;
  --ink:#141A16; --ink-2:#4B554D; --ink-3:#7B857C;
  --accent:#0F6B4F; --accent-ink:#FFFFFF; --accent-soft:#E1EFE7; --accent-ring:#0F6B4F;
  --flag:#D9A400; --flag-soft:#FBF0CE; --flag-ink:#4A3600;
  --good:#15703F; --good-soft:#DFF0E5; --bad:#A8261D; --bad-soft:#F7E2E0;
  --helm-edge:rgba(20,26,22,.32);
  --turf-1:rgba(8,22,10,.52); --turf-2:rgba(8,22,10,.07);
  --ball:#E2542C; --ball-2:#9C2E1A; --ball-3:#C4381C; --ball-lace:#FFFFFF;
  --shadow-1:0 1px 2px rgba(18,28,20,.07);
  --shadow-2:0 1px 2px rgba(18,28,20,.06),0 10px 26px -8px rgba(18,28,20,.16);
  --r:12px;
  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --body:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1311; --surface:#151D1A; --surface-2:#1B2521; --surface-3:#24302B;
    --line:#2A3631; --line-2:#3C4A44;
    --ink:#E9EFEA; --ink-2:#A2AFA5; --ink-3:#78847B;
    --accent:#43C48F; --accent-ink:#052018; --accent-soft:#13312A; --accent-ring:#43C48F;
    --flag:#EFC340; --flag-soft:#3A2E09; --flag-ink:#F6DE9A;
    --good:#48C489; --good-soft:#123024; --bad:#E4776C; --bad-soft:#3A1D1A;
    --helm-edge:rgba(233,239,234,.34);
    --turf-1:rgba(3,10,5,.74); --turf-2:rgba(3,10,5,.56);
    --ball:#E2542C; --ball-2:#9C2E1A; --ball-3:#C4381C; --ball-lace:#FFFFFF;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 1px 2px rgba(0,0,0,.4),0 10px 26px -8px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0D1311; --surface:#151D1A; --surface-2:#1B2521; --surface-3:#24302B;
  --line:#2A3631; --line-2:#3C4A44;
  --ink:#E9EFEA; --ink-2:#A2AFA5; --ink-3:#78847B;
  --accent:#43C48F; --accent-ink:#052018; --accent-soft:#13312A; --accent-ring:#43C48F;
  --flag:#EFC340; --flag-soft:#3A2E09; --flag-ink:#F6DE9A;
  --good:#48C489; --good-soft:#123024; --bad:#E4776C; --bad-soft:#3A1D1A;
  --helm-edge:rgba(233,239,234,.34);
  --turf-1:rgba(3,10,5,.74); --turf-2:rgba(3,10,5,.56);
  --ball:#E2542C; --ball-2:#9C2E1A; --ball-3:#C4381C; --ball-lace:#FFFFFF;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 2px rgba(0,0,0,.4),0 10px 26px -8px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
h1,h2,h3{margin:0;text-wrap:balance}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent-ring);outline-offset:2px;border-radius:4px}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hide{display:none!important}

.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:26px;padding:22px 16px;position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:9px;width:100%}
.brand:hover{background:var(--surface-2)}
.brand:hover b,.brand[aria-current="page"] b{color:var(--accent)}
.brand b{font-family:var(--display);font-weight:800;font-size:29px;line-height:.92;text-transform:uppercase}
.brand span{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.15;color:var(--accent);letter-spacing:.03em}
.navgroup{display:flex;flex-direction:column;gap:3px}
.navgroup>.eyebrow{padding:0 8px 6px}
.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;background:none;border-radius:9px;cursor:pointer;text-align:left;font-size:14.5px;font-weight:500;color:var(--ink-2);width:100%}
.nav:hover{background:var(--surface-2);color:var(--ink)}
.nav[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.whoami{display:flex;align-items:center;gap:10px;padding:0 4px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:17px;flex:none}
.whoami div{min-width:0}
.whoami b{display:block;font-size:14px;font-weight:600}
.whoami small{display:block;font-size:11.5px;color:var(--ink-3)}
.linkbtn{background:none;border:0;padding:4px;color:var(--ink-3);font-size:12.5px;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--ink)}
main{padding:30px 34px 90px;max-width:1120px;width:100%;min-width:0}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-head h1{font-family:var(--display);font-weight:800;font-size:40px;line-height:.98;text-transform:uppercase}
.page-head p{margin:5px 0 0;color:var(--ink-2);font-size:14px;max-width:62ch}

.rail-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:20px;box-shadow:var(--shadow-1)}
.rail{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.wk{flex:none;min-width:60px;padding:7px 6px 6px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-2)}
.wk:hover{border-color:var(--line-2);color:var(--ink)}
.wk b{font-family:var(--display);font-weight:700;font-size:17px;line-height:1;letter-spacing:.02em}
.wk .dot{width:100%;height:3px;border-radius:2px;background:var(--line-2)}
.wk[data-state="done"] .dot{background:var(--accent)}
.wk[data-state="part"] .dot{background:var(--flag)}
.wk[aria-current="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.wk[aria-current="true"] .dot{background:var(--surface-3)}
.wk[aria-current="true"][data-state="done"] .dot{background:var(--accent)}
.wk[aria-current="true"][data-state="part"] .dot{background:var(--flag)}

.weekbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:0 2px 14px}
.weekbar h2{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}
.weekbar span{font-size:13px;color:var(--ink-2)}
.games{display:flex;flex-direction:column;gap:9px}
.game{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);display:grid;grid-template-columns:1fr 156px 1fr;align-items:stretch;overflow:hidden;position:relative}
.game.locked{background:var(--surface-2)}
.game.graded{border-left:3px solid var(--good)}
.game.graded.miss{border-left-color:var(--bad)}
.game.graded.nopick{border-left-color:var(--line-2)}
.pickwrap{position:relative;display:flex;min-width:0}
.side-pick{display:flex;align-items:center;gap:13px;padding:14px;border:0;background:none;cursor:pointer;text-align:left;min-width:0;width:100%}
.side-pick.away{flex-direction:row-reverse;text-align:right}
.side-pick:disabled{cursor:default}
.logo{width:58px;height:50px;object-fit:contain;flex:none;transition:transform .16s ease}
.logo.dk{display:none}
.side-pick:not(:disabled):hover .logo{transform:scale(1.07)}
.tinfo{min-width:0}
.tinfo b{display:block;font-family:var(--display);font-weight:700;font-size:21px;line-height:1;text-transform:uppercase;letter-spacing:.015em}
.tinfo small{display:block;font-size:10.5px;color:var(--ink-3);margin-top:4px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ring{position:absolute;inset:6px;border-radius:9px;border:2.5px solid transparent;pointer-events:none}
.pickwrap.selected .ring{border-color:var(--accent)}
.pickwrap.selected{background:var(--accent-soft)}
.pickwrap.selected .tinfo b{color:var(--accent)}
.pickwrap:not(.selected) .logo{opacity:.55;filter:saturate(.35)}
.game.locked .pickwrap .logo,.game.graded .pickwrap .logo{opacity:1;filter:none}
.pickwrap.winner .tinfo b::after{content:"\2713";margin-left:7px;color:var(--good);font-family:var(--body);font-size:15px}
.meta{border-inline:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:11px 8px;text-align:center;background:var(--surface-2)}
.meta .kick{font-family:var(--display);font-weight:700;font-size:19px;line-height:1;letter-spacing:.02em}
.meta .day{font-size:11px;color:var(--ink-2);font-weight:600}
.meta .ven{font-size:10.5px;color:var(--ink-3);line-height:1.35}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.chip.lock{background:var(--flag-soft);color:var(--flag-ink)}
.chip.win{background:var(--good-soft);color:var(--good)}
.chip.loss{background:var(--bad-soft);color:var(--bad)}
/* Neutral-site games are the international series -- flagged deliberately loud.
   Fixed colours: the badge paints its own ground, so it reads in either theme.
   #A81208 on #FFD400 measures 5.35:1. */
.neutral{display:inline-block;margin-top:3px;padding:2px 7px;border-radius:4px;background:#FFD400;color:#A81208;font-weight:800;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;line-height:1.35}
.byes{margin-top:16px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r);font-size:12.5px;color:var(--ink-2);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.byes b{font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

.reveal{grid-column:1/-1;display:grid;grid-template-columns:1fr 156px 1fr;border-top:1px solid var(--line);background:var(--surface-2)}
.rev{display:flex;flex-wrap:wrap;gap:4px;padding:8px 14px;align-items:center}
.rev.away{justify-content:flex-end}
.rev.mid{justify-content:center;border-inline:1px solid var(--line)}
.rev::before{content:attr(data-t);font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);display:none;margin-right:2px}
.rev-chip{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:20px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.rev-chip.ok{background:var(--good-soft);color:var(--good)}
.rev-chip.no{background:var(--bad-soft);color:var(--bad)}
.rev-chip.miss{background:none;color:var(--ink-3);border:1px dashed var(--line-2)}
.rev-chip.me{box-shadow:0 0 0 1.5px var(--accent)}
.rev-lab{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.wwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:1px;background:var(--line)}
.ww{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ww b{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.05;text-transform:uppercase}
.ww small{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ww.mine{background:var(--accent-soft)}
.ww.mine b{color:var(--accent)}

/* Home sits on the field. The turf tile is a generated seamless texture; the
   gradient above it is a scrim, heaviest behind the heading so white type
   clears contrast, lighter further down where opaque cards sit anyway. */
.app[data-view="home"]{
  background-color:#4E7534;
  background-image:linear-gradient(180deg,var(--turf-1) 0,var(--turf-1) 230px,var(--turf-2) 420px,var(--turf-2) 100%),url(/turf.png);
  background-size:auto,320px 320px;
  background-repeat:no-repeat,repeat;
}
.app[data-view="home"] .page-head h1{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.app[data-view="home"] .page-head p{color:rgba(255,255,255,.96);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.app[data-view="home"] .hcard,.app[data-view="home"] .hsum{box-shadow:var(--shadow-2)}

.hsum{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;margin-bottom:18px;box-shadow:var(--shadow-1)}
.hsum b{font-family:var(--display);font-weight:800;font-size:27px;line-height:1;text-transform:uppercase}
.hsum .big{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;color:var(--accent)}
.hsum span{font-size:13px;color:var(--ink-2)}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.hcard{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-1);padding:15px;display:flex;flex-direction:column;gap:12px}
.hcard.done{border-left-color:var(--accent)}
.hcard.todo{border-left-color:var(--flag)}
.hcard.missed{border-left-color:var(--bad)}
.hcard.me{background:var(--accent-soft)}
.hhead{display:flex;align-items:center;gap:11px}
.hhead .avatar{width:40px;height:40px;font-size:21px}
.hhead b{display:block;font-family:var(--display);font-weight:700;font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.hhead small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.hstat{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:600;line-height:1.3}
.hstat svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hstat.done{background:var(--good-soft);color:var(--good)}
.hstat.todo{background:var(--flag-soft);color:var(--flag-ink)}
.hstat.missed{background:var(--bad-soft);color:var(--bad)}
button.hstat{border:0;width:100%;text-align:left;cursor:pointer}
button.hstat:hover{box-shadow:inset 0 0 0 1.5px currentColor}
.hfoot{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:auto}
.hsync{font-style:italic}

.subwrap{display:flex;flex-direction:column;align-items:center;gap:11px;padding:34px 0 10px}
.ballbtn{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .16s ease}
.balllabel{font-family:var(--display);font-weight:800;font-size:27px;line-height:1;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.ballbtn:not(:disabled):hover{transform:translateY(-3px) rotate(-1.5deg)}
.ballbtn:not(:disabled):active{transform:translateY(0) scale(.97)}
.ballbtn:disabled{cursor:not-allowed;opacity:.4;filter:grayscale(1)}
.ballbtn svg{width:252px;height:auto;display:block;filter:drop-shadow(0 10px 20px rgba(120,40,10,.3))}
.subnote{font-size:12.5px;color:var(--ink-3);text-align:center;max-width:46ch}
.subnote b{color:var(--ink-2)}

.toast{position:fixed;left:50%;bottom:38px;background:var(--ink);color:var(--bg);padding:13px 24px;border-radius:40px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.05em;text-transform:uppercase;box-shadow:var(--shadow-2);z-index:60;display:flex;align-items:center;gap:10px;opacity:0;translate:-50% 14px;transition:opacity .22s ease,translate .22s ease;pointer-events:none}
.toast.on{opacity:1;translate:-50% 0}
.toast svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.toast .ic-warn{display:none}
.toast.warn .ic-ok{display:none}
.toast.warn .ic-warn{display:block}
.toast.warn svg{stroke:var(--flag)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);overflow:hidden}
.card-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.card-h h3{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em}
.card-h p{margin:3px 0 0;font-size:12.5px;color:var(--ink-3)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:right;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
th:first-child,th.l{text-align:left}
td{padding:12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td:first-child,td.l{text-align:left}
tbody tr:last-child td{border-bottom:0}
tbody tr.me{background:var(--accent-soft)}
.rank{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink-3);width:34px}
tbody tr.me .rank{color:var(--accent)}
.pname{display:flex;align-items:center;gap:10px;font-weight:600}
.pname .avatar{width:27px;height:27px;font-size:14px}
td.big{font-family:var(--display);font-weight:700;font-size:23px;line-height:1}
.gb-lead{color:var(--accent);font-weight:700}
.bars{display:flex;gap:2px;align-items:center;justify-content:flex-end}
.bars i{width:6px;height:16px;border-radius:2px;background:var(--surface-3);display:block}
.bars i.w{background:var(--good)}
.bars i.l{background:var(--bad);opacity:.5}

.gate{min-height:100vh;display:grid;place-items:center;padding:28px}
.gate-in{width:100%;max-width:470px;display:flex;flex-direction:column;gap:20px}
.gate-brand{text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center}
.gate-brand b{font-family:var(--display);font-weight:800;font-size:52px;line-height:.9;text-transform:uppercase}
.gate-brand span{font-family:var(--display);font-weight:500;font-size:26px;color:var(--accent);letter-spacing:.09em;line-height:1}
.gate-brand p{margin:8px 0 0;color:var(--ink-2);font-size:13.5px}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.who button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-weight:600;font-size:14px}
.who button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.who .avatar{width:38px;height:38px;font-size:20px;background:var(--surface-3);color:var(--ink-2)}
.who button:hover .avatar{background:var(--accent);color:var(--accent-ink)}
.who small{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.form{display:flex;flex-direction:column;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-2)}
label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px}
input[type=text],input[type=password],input[type=email],input[type=datetime-local],textarea,select{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);color:var(--ink);font:inherit}
input[readonly]{background:var(--surface-3);color:var(--ink-2);cursor:default}
input[readonly]:focus{outline-color:var(--line-2)}
input:focus,textarea:focus,select:focus{outline:2.5px solid var(--accent-ring);outline-offset:1px;border-color:transparent}
textarea{font-family:ui-monospace,"Cascadia Mono",Menlo,monospace;font-size:11.5px;line-height:1.5;resize:vertical}
.btn{padding:11px 18px;border-radius:9px;border:1px solid transparent;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14.5px;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;border-color:var(--line-2);color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:7px}
.err{font-size:13px;color:var(--bad);font-weight:500}
.hint{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.note{background:var(--flag-soft);color:var(--flag-ink);border:1px solid var(--flag);border-radius:var(--r);padding:12px 15px;font-size:12.5px;line-height:1.55}
.stack{display:flex;flex-direction:column;gap:18px}
.tabs{display:flex;gap:5px;flex-wrap:wrap}
.tab{padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3);font-size:14px}
.rgame{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.rgame:last-child{border-bottom:0}
.rbtn{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface-2);cursor:pointer;font-weight:600;font-size:14px;min-width:0}
.rgame .rbtn.away{flex-direction:row-reverse;justify-content:flex-start}
.rbtn .logo{width:36px;height:32px}
.rbtn[aria-pressed="true"]{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.rbtn:hover{border-color:var(--line-2)}

/* ---- tablet and below: the sidebar becomes a top bar ---- */
@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:9px 12px;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
  .side::after{content:"";flex-basis:100%;height:0;order:3}
  .brand{order:1;flex-direction:row;align-items:baseline;gap:7px;padding:4px 6px;width:auto}
  .brand b{font-size:23px}.brand span{font-size:15px}
  .side-foot{order:2;margin:0 0 0 auto;border-top:0;padding-top:0;flex-direction:row;align-items:center;gap:10px}
  .navgroup{order:4;flex-direction:row;flex-wrap:wrap;gap:5px}
  .navgroup>.eyebrow{display:none}
  .nav{width:auto;padding:10px 12px;min-height:44px}
  .whoami small{display:none}
  main{padding:20px 16px 80px}
  .page-head h1{font-size:31px}
  .who{grid-template-columns:repeat(2,1fr)}
  .gate-brand b{font-size:40px}
  .rgame{grid-template-columns:1fr}
  .rgame .rbtn.away{flex-direction:row}
}
/* ---- phone: matchup keeps both teams side by side, meta moves above them ---- */
@media(max-width:600px){
  main{padding:16px 12px 84px}
  .side{padding:10px 12px}
  .brand b{font-size:20px}.brand span{font-size:13px}
  .nav{font-size:13.5px;padding:9px 11px;min-height:44px;gap:8px}
  .nav svg{width:15px;height:15px}
  .side-foot .avatar{width:28px;height:28px;font-size:15px}
  .page-head h1{font-size:26px}
  .page-head p{font-size:13px}
  .weekbar h2{font-size:22px}
  .weekbar span{font-size:12px}

  .rail-wrap{padding:9px}
  .wk{min-width:52px;min-height:44px;padding:6px 5px 5px}
  .wk b{font-size:15px}

  .game{grid-template-columns:1fr 1fr}
  .meta{grid-column:1/-1;grid-row:1;border-inline:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 11px;justify-content:flex-start;text-align:left}
  .meta .kick{font-size:17px}
  .meta .ven{width:100%}
  .pickwrap.home{grid-column:1;grid-row:2}
  .pickwrap.away{grid-column:2;grid-row:2;border-left:1px solid var(--line)}
  .side-pick,.side-pick.away{flex-direction:column;align-items:center;text-align:center;gap:7px;padding:12px 6px}
  .logo{width:52px;height:44px}
  .tinfo b{font-size:17px}
  .tinfo small{font-size:9.5px}
  .ring{inset:4px}
  .reveal{grid-column:1/-1;grid-row:3;grid-template-columns:1fr}
  .rev{padding:7px 11px}
  .rev.away{justify-content:flex-start}
  .rev.mid{border-inline:0;border-top:1px solid var(--line);justify-content:flex-start}
  .rev::before{display:inline}
  .rev:empty{display:none}

  .ballbtn svg{width:206px}
  .balllabel{font-size:23px}
  .subnote{font-size:12px}

  th,td{padding:9px 8px;font-size:13px}
  td.big{font-size:19px}
  .rank{font-size:17px;width:26px}
  .pname .avatar{width:24px;height:24px;font-size:13px}

  .hgrid{grid-template-columns:1fr}
  .hsum{padding:13px 15px;gap:6px 16px}
  .hsum b{font-size:23px}
  .card-h{padding:13px 15px}
  .tab{padding:10px 14px;min-height:40px}
  .wwgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}

  .who{grid-template-columns:1fr}
  .gate{padding:20px 14px}
  .gate-brand b{font-size:34px}
  .gate-brand span{font-size:19px}
  .form{padding:16px}

  .toast{left:12px;right:12px;bottom:22px;font-size:18px;padding:12px 18px;translate:0 14px;justify-content:center}
  .toast.on{translate:0 0}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo.lt{display:none}
  :root:not([data-theme="light"]) .logo.dk{display:block}
}
:root[data-theme="dark"] .logo.lt{display:none}
:root[data-theme="dark"] .logo.dk{display:block}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Confirmation dialog. Native <dialog> so focus trapping, Esc and the
   backdrop come from the browser rather than being re-implemented badly. */
dialog#confirmDlg{border:0;padding:0;background:transparent;max-width:min(420px,calc(100vw - 32px))}
dialog#confirmDlg::backdrop{background:rgba(8,16,10,.55);backdrop-filter:blur(2px)}
.dlg-in{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);padding:22px;display:flex;flex-direction:column;gap:12px}
.dlg-in h3{font-family:var(--display);font-weight:800;font-size:25px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.dlg-in p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
.dlg-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:4px;flex-wrap:wrap}
.dlg-actions .btn{min-height:44px}
@media(max-width:600px){
  .dlg-actions{flex-direction:column-reverse}
  .dlg-actions .btn{width:100%}
}