:root{
  --paper:#FBFAF7; --card:#FFFFFF; --ink:#1B2A4A; --ink-soft:#5C677D;
  --line:#E4E2DA; --grass:#2F7D4F; --grass-soft:#E7F2EB; --grass-deep:#225C3A;
  --cell:#16213A; --cell-digit:#F4F7E8; --flash:#FFF3C4;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
     display:flex;min-height:100vh;flex-direction:column}
.display{font-family:"Saira Condensed",sans-serif;letter-spacing:.02em}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px;width:100%}

header{border-bottom:2px solid var(--ink);background:var(--card)}
.head-row{display:flex;align-items:center;justify-content:space-between;
          gap:16px;padding:14px 0;flex-wrap:wrap}
.brand{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:26px;
       text-transform:uppercase;letter-spacing:.04em;color:var(--ink);
       text-decoration:none}
.brand span{color:var(--grass)}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{font-family:"Saira Condensed",sans-serif;font-size:16px;text-transform:uppercase;
      letter-spacing:.06em;color:var(--ink-soft);text-decoration:none;
      padding:7px 12px;border-radius:8px}
nav a:hover{background:var(--grass-soft);color:var(--grass-deep)}
nav a[aria-current=page]{background:var(--ink);color:#fff}

main{flex:1}
footer{border-top:1px solid var(--line);margin-top:50px;background:var(--card)}
footer .wrap{display:flex;justify-content:space-between;padding:14px 16px;
             font-size:12.5px;color:var(--ink-soft)}
footer code{font-family:"IBM Plex Mono",monospace}

h1.page{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:32px;
        text-transform:uppercase;letter-spacing:.04em;margin:28px 0 6px}
h1.page span{color:var(--grass)}
p.lede{color:var(--ink-soft);max-width:640px;margin:0 0 24px}
h2.sec{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:20px;
       text-transform:uppercase;letter-spacing:.06em;margin:34px 0 12px;
       display:flex;align-items:center;gap:10px}
h2.sec::after{content:"";flex:1;border-top:1px solid var(--line)}

.controls{display:flex;gap:10px;padding:14px 0;flex-wrap:wrap}
select,input[type=search],input[type=text]{font:inherit;padding:8px 12px;
     border:1px solid var(--line);border-radius:8px;background:var(--card);
     color:var(--ink)}
select{min-width:170px}
input[type=search]{flex:1}
select:focus,input:focus,button:focus{outline:2px solid var(--grass);outline-offset:1px}
button{font:inherit;font-family:"Saira Condensed",sans-serif;font-size:17px;
       text-transform:uppercase;letter-spacing:.05em;padding:9px 22px;
       background:var(--ink);color:#fff;border:none;border-radius:8px;cursor:pointer}
button:hover{background:var(--grass-deep)}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.ghost[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

.grid2{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
@media (max-width:840px){.grid2{grid-template-columns:1fr}}

.datehead{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:17px;
          text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);
          margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.datehead::after{content:"";flex:1;border-top:1px solid var(--line)}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
       background:var(--card);border:1px solid var(--line);border-radius:10px;
       padding:14px 18px;margin-bottom:10px}
.match.played{border-left:4px solid var(--grass);padding-left:15px}
.team{font-family:"Saira Condensed",sans-serif;font-weight:500;font-size:19px;min-width:0}
.team.home{text-align:right}
.meta{grid-column:1/-1;font-size:12.5px;color:var(--ink-soft);display:flex;
      justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap}
.scorebox{display:flex;align-items:center;gap:6px}
.cell{width:52px;height:46px;background:var(--cell);border:none;border-radius:6px;
      color:var(--cell-digit);font-family:"IBM Plex Mono",monospace;font-size:22px;
      text-align:center;transition:background .4s}
.cell:focus{outline:3px solid var(--grass);outline-offset:1px}
.cell.flash{background:var(--grass)}
.cell::-webkit-outer-spin-button,.cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cell{-moz-appearance:textfield;appearance:textfield}
.dash{color:var(--ink-soft);font-family:"IBM Plex Mono",monospace}
.save-state{min-width:64px;text-align:right}
.save-state.err{color:#B23A3A}
.save-state.ok{color:var(--grass)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;
       padding:16px 18px}
.panel.sticky{position:sticky;top:16px}
.panel h2{margin:0 0 10px;font-family:"Saira Condensed",sans-serif;font-weight:600;
          font-size:18px;text-transform:uppercase;letter-spacing:.06em}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-weight:500;color:var(--ink-soft);text-align:center;padding:5px 4px;
   border-bottom:1px solid var(--line)}
th:first-child{text-align:left}
td{padding:6px 4px;text-align:center;border-bottom:1px solid var(--line)}
td.t{text-align:left;font-family:"Saira Condensed",sans-serif;font-size:15px;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.q td{background:var(--grass-soft)}
td.pts,td.num{font-family:"IBM Plex Mono",monospace}
.hint{font-size:12.5px;color:var(--ink-soft);margin-top:10px}
.empty{color:var(--ink-soft);padding:30px 0;text-align:center}

.pred{display:flex;align-items:center;gap:8px;margin:7px 0}
.pred .pt{flex:0 0 108px;font-family:"Saira Condensed",sans-serif;font-size:15px;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar{flex:1;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--grass)}
.pv{font-family:"IBM Plex Mono",monospace;font-size:12.5px;flex:0 0 48px;text-align:right}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
       background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;
       font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:9}
.toast.show{opacity:1}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
          gap:12px;margin:20px 0 6px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;
      padding:14px 16px}
.stat .n{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:30px}
.stat .l{font-size:12.5px;color:var(--ink-soft)}

.champ-row{display:flex;align-items:baseline;gap:10px;padding:7px 0;
           border-bottom:1px solid var(--line)}
.champ-row .y{font-family:"IBM Plex Mono",monospace;font-size:13px;
              color:var(--ink-soft);flex:0 0 44px}
.champ-row .w{font-family:"Saira Condensed",sans-serif;font-size:17px;flex:1}
.champ-row .h{font-size:12.5px;color:var(--ink-soft)}

.bracket{display:flex;gap:18px;overflow-x:auto;padding:10px 2px 18px;
         align-items:flex-start}
.bstage{flex:0 0 215px}
.bstage h3{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:15px;
           text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);
           margin:0 0 10px;text-align:center}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:8px;
       padding:8px 10px;margin-bottom:10px}
.bcard .bm{font-size:11px;color:var(--ink-soft);font-family:"IBM Plex Mono",monospace;
           display:flex;justify-content:space-between;margin-bottom:4px}
.brow{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;padding:2px 0}
.brow .bn{font-family:"Saira Condensed",sans-serif;font-size:14.5px;min-width:0;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .bs{font-family:"IBM Plex Mono",monospace;color:var(--ink-soft)}
.brow.bw .bn{color:var(--grass-deep);font-weight:600}

.pitch{position:relative;background:var(--grass);border-radius:12px;
       aspect-ratio:3/4;max-width:520px;border:3px solid var(--grass-deep);
       margin:14px 0}
.pitch::before,.pitch::after{content:"";position:absolute;left:50%;
       border:2px solid rgba(255,255,255,.55)}
.pitch::before{top:-2px;transform:translateX(-50%);width:44%;height:16%;
       border-top:none;border-radius:0 0 8px 8px}
.pitch::after{top:50%;transform:translate(-50%,-50%);width:24%;aspect-ratio:1;
       border-radius:50%}
.chip{position:absolute;transform:translate(-50%,-50%);width:96px;text-align:center}
.chip input{width:100%;font-size:12px;padding:5px 6px;text-align:center;
       border-radius:7px;border:1px solid var(--grass-deep);background:#fff}
.chip .pos{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
       letter-spacing:.08em;color:#EAF6EE;margin-bottom:3px;text-shadow:0 1px 2px rgba(0,0,0,.35)}

.fan-card{background:var(--card);border:1px solid var(--line);border-radius:10px;
          padding:12px 16px;margin-bottom:10px}
.fan-card .fc-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fan-card .nick{font-family:"Saira Condensed",sans-serif;font-weight:600;font-size:17px}
.fan-card .when{font-size:12px;color:var(--ink-soft)}
.fan-card .picks{font-size:13px;color:var(--ink-soft);margin-top:4px}
.fan-card .xi{font-size:12.5px;margin-top:6px;color:var(--ink)}
.formrow{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.formrow label{display:flex;flex-direction:column;gap:4px;font-size:13px;
               color:var(--ink-soft)}
.formrow input[type=text]{width:180px}
.flagimg{height:15px;border-radius:2px;vertical-align:-2px;
         border:1px solid var(--line)}
img#flag.flagimg{height:22px}
.squad{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow-y:auto;
       padding:8px;border:1px solid var(--line);border-radius:8px;
       background:var(--paper)}
.squad-pos{flex-basis:100%;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
       letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
       margin:4px 0 0}
.squad-p{font-family:inherit;font-size:12.5px;text-transform:none;letter-spacing:0;
       padding:5px 10px;border:1px solid var(--line);border-radius:14px;
       background:var(--card);color:var(--ink);cursor:pointer}
.squad-p b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:11px;
       color:var(--grass-deep)}
.squad-p:hover{background:var(--grass-soft);border-color:var(--grass)}
.squad-p.used{opacity:.35;pointer-events:none}

.wcb{background:#101727;border-radius:14px;padding:18px 14px;overflow-x:auto}
.wcb-grid{display:flex;gap:12px;min-width:1150px;align-items:stretch}
.wcb-col{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:8px}
.wcb-rl{font-family:"Saira Condensed",sans-serif;font-size:12px;letter-spacing:.1em;
        text-transform:uppercase;color:#7E8DB0;text-align:center;margin:0 0 2px}
.wcb-match{background:#1B2740;border:1px solid #2A3A5E;border-radius:10px;
           padding:7px 9px;display:flex;flex-direction:column;gap:5px}
.wcb-mid{font-family:"IBM Plex Mono",monospace;font-size:10px;color:#5E6F94}
.wcb-team{display:flex;align-items:center;gap:7px;border-radius:8px;padding:2px 4px}
.wcb.interactive .wcb-team.pickable{cursor:pointer}
.wcb.interactive .wcb-team.pickable:hover{background:#26365B}
.wcb-flag{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;
          border:2px solid #E8EDF7;background:#E8EDF7}
.wcb-q{width:28px;height:28px;border-radius:50%;border:2px dashed #4A5878;
       color:#7888A8;display:flex;align-items:center;justify-content:center;
       font-size:13px;flex:none}
.wcb-code{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#E8EDF7;flex:1}
.wcb-sc{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#9FB0D0}
.wcb-team.won .wcb-flag{border-color:#7BE3A0;box-shadow:0 0 0 2px rgba(123,227,160,.3)}
.wcb-team.won .wcb-code{color:#9FF0BD}
.wcb-team.out{opacity:.4}
.wcb-final-card{border-color:#C9A23F;box-shadow:0 0 0 1px rgba(201,162,63,.35)}
.wcb-center{justify-content:center}
.wcb-champ{display:flex;align-items:center;gap:10px;justify-content:center;
           color:#E8EDF7;font-family:"Saira Condensed",sans-serif;font-size:18px;
           margin:0 0 14px}
.wcb-champ .wcb-flag{width:34px;height:34px}
.wcb-champ b{color:#9FF0BD}
.wcb-team.seedable{cursor:pointer;border:1px dashed #3D4F7A;border-radius:8px}
.wcb-team.seedable:hover{background:#26365B;border-color:#5C72A8}
.wcb-hint-pick{font-size:10.5px;color:#8FA3CC;letter-spacing:.03em}
.status-ctl{display:inline-flex;gap:5px;margin-right:6px}
.stbtn{background:none;border:1px solid var(--line);color:var(--ink-soft);
  font-family:inherit;font-size:11px;text-transform:none;letter-spacing:0;
  padding:2px 9px;border-radius:11px;cursor:pointer}
.stbtn:hover{border-color:var(--ink-soft)}
.stbtn.on-live{background:#C62828;border-color:#C62828;color:#fff}
.stbtn.on-final{background:var(--ink);border-color:var(--ink);color:#fff}
.match.islive{border-left:4px solid #C62828;padding-left:15px}
.live-badge{display:inline-flex;align-items:center;gap:5px;color:#C62828;
  font-size:12px;font-weight:600}
.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#C62828;animation:livepulse 1.4s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}
.goalbtn{background:none;border:1px solid var(--line);color:var(--ink-soft);
  font-family:inherit;font-size:12px;text-transform:none;letter-spacing:0;
  padding:3px 10px;border-radius:12px}
.goalbtn:hover{background:var(--grass-soft);color:var(--grass-deep);border-color:var(--grass)}
.goals{grid-column:1/-1;border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}
.goalrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.goalrow .num{flex:0 0 32px;text-align:right}
.g-name{font-family:"Saira Condensed",sans-serif;font-size:14.5px}
.g-team{color:var(--ink-soft);font-size:12px;flex:1}
.g-del{background:none;border:none;color:#B23A3A;font-size:15px;cursor:pointer;
  padding:0 6px;line-height:1}
.goalform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.goalform select,.goalform input[type=text]{font-size:13px;padding:6px 8px;min-width:0}
.goalform .g-fplayer{flex:1;min-width:130px}
.goalform input[type=number]{font-size:13px;padding:6px 6px}
.g-chk{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:3px}
.g-add{font-size:13px;padding:6px 14px}
.g-oghint{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--line);
  color:var(--ink-soft);font-size:11px;cursor:help}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
  gap:8px;margin:0 0 26px}
.team-chip{display:flex;align-items:center;gap:9px;padding:9px 11px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  cursor:pointer;font-family:"Saira Condensed",sans-serif;font-size:15.5px;
  text-transform:none;letter-spacing:0;color:var(--ink);text-align:left}
.team-chip:hover{border-color:var(--grass);background:var(--grass-soft)}
.team-chip img{width:24px;height:18px;object-fit:cover;border-radius:3px;
  border:1px solid var(--line);flex:none}
.team-chip span:first-of-type{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-chip .tg{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft)}
.team-head{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.d-flag{width:56px;height:42px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line)}
.d-name{margin:0;font-family:"Saira Condensed",sans-serif;font-weight:600;
  font-size:28px;text-transform:uppercase;letter-spacing:.03em}
.d-sub{font-size:13px;color:var(--ink-soft)}
th.sortable{cursor:pointer;text-decoration:underline dotted}
.fx{display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.fx-d8{font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--ink-soft);flex:0 0 52px}
.fx-opp{flex:1;font-family:"Saira Condensed",sans-serif;font-size:15px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-w .num{color:var(--grass-deep);font-weight:600}
.fx-l .num{color:#B23A3A}
@media (max-width:600px){
  .status-ctl{display:inline-flex;gap:5px;margin-right:6px}
.stbtn{background:none;border:1px solid var(--line);color:var(--ink-soft);
  font-family:inherit;font-size:11px;text-transform:none;letter-spacing:0;
  padding:2px 9px;border-radius:11px;cursor:pointer}
.stbtn:hover{border-color:var(--ink-soft)}
.stbtn.on-live{background:#C62828;border-color:#C62828;color:#fff}
.stbtn.on-final{background:var(--ink);border-color:var(--ink);color:#fff}
.match.islive{border-left:4px solid #C62828;padding-left:15px}
.live-badge{display:inline-flex;align-items:center;gap:5px;color:#C62828;
  font-size:12px;font-weight:600}
.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#C62828;animation:livepulse 1.4s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}
.goalbtn{background:none;border:1px solid var(--line);color:var(--ink-soft);
  font-family:inherit;font-size:12px;text-transform:none;letter-spacing:0;
  padding:3px 10px;border-radius:12px}
.goalbtn:hover{background:var(--grass-soft);color:var(--grass-deep);border-color:var(--grass)}
.goals{grid-column:1/-1;border-top:1px dashed var(--line);margin-top:8px;padding-top:8px}
.goalrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.goalrow .num{flex:0 0 32px;text-align:right}
.g-name{font-family:"Saira Condensed",sans-serif;font-size:14.5px}
.g-team{color:var(--ink-soft);font-size:12px;flex:1}
.g-del{background:none;border:none;color:#B23A3A;font-size:15px;cursor:pointer;
  padding:0 6px;line-height:1}
.goalform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.goalform select,.goalform input[type=text]{font-size:13px;padding:6px 8px;min-width:0}
.goalform .g-fplayer{flex:1;min-width:130px}
.goalform input[type=number]{font-size:13px;padding:6px 6px}
.g-chk{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:3px}
.g-add{font-size:13px;padding:6px 14px}
.g-oghint{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--line);
  color:var(--ink-soft);font-size:11px;cursor:help}
.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-name{font-size:22px}
}
.wcb-seed-select{font-size:12px;max-width:140px;background:#0E1524;color:#E8EDF7;
  border:1px solid #3D4F7A;border-radius:6px;padding:3px 4px;margin-left:4px}
@media (max-width:600px){
  .wcb{padding:12px 8px}
  .wcb-grid{min-width:1080px}
}

@media (max-width:600px){
  .head-row{padding:10px 0;gap:8px}
  .brand{font-size:21px}
  nav{width:100%;overflow-x:auto;flex-wrap:nowrap;gap:2px;
      -webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{font-size:14px;padding:6px 10px;white-space:nowrap}
  h1.page{font-size:25px;margin:20px 0 6px}
  p.lede{font-size:14px}
  h2.sec{font-size:17px;margin:26px 0 10px}

  select,input[type=search],input[type=text]{font-size:16px;padding:9px 12px}
  .controls{gap:8px}
  .controls select{min-width:0;flex:1 1 44%}
  .controls input[type=search]{flex:1 1 100%}
  .controls button{flex:1 1 44%;font-size:15px;padding:9px 10px}

  .match{padding:10px 12px;gap:8px;margin-bottom:8px}
  .team{font-size:15.5px}
  .cell{width:42px;height:42px;font-size:18px}
  .meta{font-size:11.5px;margin-top:5px}
  .save-state{min-width:0}
  .datehead{font-size:15px;margin:20px 0 8px}

  .statgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:11px 12px}
  .stat .n{font-size:24px}

  .panel{padding:13px 14px}
  .panel.sticky{position:static}
  table{font-size:12.5px}
  td.t{max-width:110px}
  .pred .pt{flex:0 0 92px;font-size:14px}
  .pv{flex:0 0 44px;font-size:12px}

  .bstage{flex:0 0 178px}
  .brow .bn{font-size:13.5px}

  .pitch{max-width:none;aspect-ratio:4/5}
  .chip{width:86px}
  .chip input{font-size:16px;padding:6px 4px}
  .chip .pos{font-size:9px}
  .formrow label{flex:1 1 45%}
  .formrow input,.formrow select{width:100%;min-width:0}

  .champ-row .h{display:none}
  footer .wrap{font-size:11.5px;flex-wrap:wrap;gap:6px}
  .toast{width:calc(100% - 32px);text-align:center}
}