/* The 55-Point Card — shared styling. Light only, mirroring the sportsbook board. */
:root{
  --page:#E9E9E9; --sheet:#FFFFFF; --band:#EFEFEF; --rule:#E4E4E4;
  --bar:#3D3D3D; --bar-2:#4A4A4A; --bar-tx:#FFFFFF;
  --gold:#F8A81C; --gold-hi:#FFBB3D; --gold-dk:#B87D0A;
  --ink:#333333; --ink-2:#6E6E6E; --ink-3:#949494;
  --dead:#B9B9B9; --dead-tx:#F0F0F0;
  --win:#2E7D32; --lose:#C0392B;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.4}
img{max-width:100%}
[hidden]{display:none!important}

/* ---- top bar ---- */
.topbar{background:var(--bar); color:var(--bar-tx); padding:0}
.topbar .in{max-width:1140px; margin:0 auto; padding:11px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{font-size:16px; font-weight:700; letter-spacing:-.02em; text-decoration:none; color:#fff}
.brand .dot{color:var(--gold)}
.topbar nav{display:flex; gap:2px; margin-left:auto; align-items:center; flex-wrap:wrap}
.topbar nav a, .topbar nav button{
  color:#D2D2D2; font-size:12.5px; font-weight:600; text-decoration:none; background:none;
  border:0; padding:6px 10px; cursor:pointer; font-family:var(--sans); letter-spacing:.01em;
}
.topbar nav a:hover, .topbar nav button:hover{color:var(--gold)}
.topbar nav a.here{color:var(--gold)}
.who{font-size:12.5px; color:#9A9A9A; padding:6px 4px 6px 10px; border-left:1px solid #565656}
.who b{color:#fff; font-weight:600}

.wrap{max-width:1140px; margin:0 auto; padding:20px 16px 60px}
h1{font-size:26px; font-weight:700; margin:0; letter-spacing:-.02em}
h1 .dot{color:var(--gold)}
.masthead{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 22px; margin-bottom:14px}
.blurb{color:var(--ink-2); font-size:13px; margin:5px 0 0; max-width:60ch}
.stamp{margin-left:auto; text-align:right; font-size:12px; color:var(--ink-2)}
.stamp b{display:block; font-size:16px; color:var(--ink); font-weight:700}

/* ---- notices ---- */
.flagbox{background:#FFF8E8; border:1px solid #F0DCAE; border-left:4px solid var(--gold);
  padding:10px 13px; font-size:12.5px; color:#6B4E11; line-height:1.5; margin-bottom:18px}
.flagbox b{font-weight:700}
.errbox{background:#FDECEA; border:1px solid #F5C6C2; border-left:4px solid var(--lose);
  padding:10px 13px; font-size:13px; color:#8B241C; margin-bottom:14px; font-weight:500}
.okbox{background:#EAF5EC; border:1px solid #BFDFC6; border-left:4px solid var(--win);
  padding:10px 13px; font-size:13px; color:#1F5B27; margin-bottom:14px; font-weight:500}

/* ---- tiles ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; margin-bottom:18px}
.tile{background:var(--sheet); border:1px solid var(--rule); padding:9px 12px}
.tile dt{font-size:11px; color:var(--ink-2); margin:0 0 3px; text-transform:uppercase; letter-spacing:.04em}
.tile dd{margin:0; font-size:22px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.tile dd small{font-size:13px; color:var(--ink-3); font-weight:600}
.tile.lit dd{color:var(--gold-dk)}

.cols{display:grid; grid-template-columns:1fr 322px; gap:18px; align-items:start}
@media (max-width:920px){ .cols{grid-template-columns:1fr} }

/* ---- the book ---- */
.book{background:var(--sheet); border:1px solid #D8D8D8}
.bookbar{background:var(--bar); color:var(--bar-tx); padding:9px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px}
.bookbar h2{margin:0; font-size:14px; font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.bookbar .right{font-size:11px; color:#C9C9C9; letter-spacing:.05em; text-transform:uppercase}
.colhead{display:grid; grid-template-columns:1fr 88px 88px; gap:6px; padding:6px 12px;
  border-bottom:1px solid var(--rule)}
.colhead span{font-size:11px; color:var(--ink-2); text-align:center; text-transform:uppercase; letter-spacing:.05em}
.colhead span:first-child{text-align:left}
.dateband{background:var(--band); padding:6px 12px; font-size:12.5px; font-weight:700;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.timerow{padding:7px 12px 3px; font-size:11.5px; color:var(--ink-2);
  display:flex; align-items:center; justify-content:space-between; gap:8px}
.offpill{background:var(--dead); color:#fff; font-size:10px; font-weight:700; padding:1px 7px;
  letter-spacing:.05em; text-transform:uppercase}
.side{display:grid; grid-template-columns:1fr 88px 88px; gap:6px; align-items:center; padding:3px 12px}
.side.last{padding-bottom:9px; border-bottom:1px solid var(--rule)}
.team{font-size:14px; font-weight:700; letter-spacing:-.01em; min-width:0}
.side.off .team{color:var(--ink-3); font-weight:600}
.hookmark{color:var(--gold-dk); font-size:10px; font-weight:700; margin-left:5px}
.side.off .hookmark{color:var(--ink-3)}
.score{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:6px; font-weight:600}

.cell{position:relative; display:block; width:100%; border:0; cursor:pointer;
  background:var(--gold); color:#2C2C2C; font-family:var(--mono); font-size:12.5px; font-weight:700;
  padding:9px 4px; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  transition:background .12s ease, color .12s ease}
.cell:hover:not(:disabled){background:var(--gold-hi)}
.cell[aria-pressed="true"]{background:var(--bar); color:var(--gold)}
.cell[aria-pressed="true"]:hover{background:#4E4E4E}
.cell:disabled{background:var(--dead); color:var(--dead-tx); cursor:not-allowed}
.cell[aria-pressed="true"]:disabled{background:#B08A3E; color:#FFF6E2}
.cell:focus-visible{outline:2px solid var(--bar); outline-offset:2px}
.cell .badge{position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; border-radius:50%;
  background:var(--bar); color:var(--gold); font-size:10.5px; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--sheet); padding:0 3px}
.cell[aria-pressed="true"] .badge{background:var(--gold); color:#2C2C2C}
.cell.hit{box-shadow:inset 0 0 0 2px var(--win)}
.cell.miss{box-shadow:inset 0 0 0 2px var(--lose)}

/* ---- card panel ---- */
.panel{background:var(--sheet); border:1px solid #D8D8D8; position:sticky; top:16px}
.plist{list-style:none; margin:0; padding:0}
.prow{display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:center;
  padding:7px 11px; border-bottom:1px solid var(--rule); min-height:46px}
.prow.gone{background:#FBF3E2}
.prow.hole{background:repeating-linear-gradient(45deg,#FAFAFA,#FAFAFA 7px,#F2F2F2 7px,#F2F2F2 8px)}
.rk{height:27px; display:grid; place-items:center; background:var(--gold); color:#2C2C2C;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums}
.rk.dim{background:var(--dead); color:#fff}
.rk.void{background:#E8E8E8; color:var(--ink-3); font-weight:600}
.rk.hit{background:var(--win); color:#fff}
.rk.miss{background:var(--lose); color:#fff}
.pbet{font-size:13px; font-weight:700; line-height:1.25; min-width:0}
.pbet .mono{font-family:var(--mono); letter-spacing:-.02em}
.pvs{display:block; font-size:11px; color:var(--ink-3); font-weight:400; margin-top:2px}
.prow.gone .pvs{color:var(--gold-dk); font-weight:600}
.ptools{display:flex; align-items:center; gap:3px}
select.pick{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink);
  background:#F2F2F2; border:1px solid var(--rule); padding:4px 3px; cursor:pointer}
select.pick:focus-visible{outline:2px solid var(--gold-dk); outline-offset:1px}
.kill{background:none; border:0; color:var(--ink-3); font-size:15px; cursor:pointer; padding:3px 5px; line-height:1}
.kill:hover{color:var(--lose); background:#F2F2F2}
.sealed{font-size:10.5px; font-weight:700; color:var(--gold-dk); text-transform:uppercase; letter-spacing:.04em; padding-right:3px}
.pfoot{padding:11px 13px; background:#FAFAFA; border-top:1px solid var(--rule)}
.note{font-size:12px; color:var(--ink-2); line-height:1.45; margin:0}
.note b{font-family:var(--mono); color:var(--gold-dk); font-weight:700}
.go{width:100%; margin-top:10px; padding:10px; border:0; background:var(--gold); color:#2C2C2C;
  font-family:var(--sans); font-size:14px; font-weight:700; cursor:pointer;
  text-transform:uppercase; letter-spacing:.05em}
.go:hover:not(:disabled){background:var(--gold-hi)}
.go:disabled{background:#DEDEDE; color:var(--ink-3); cursor:not-allowed}
.go:focus-visible{outline:2px solid var(--bar); outline-offset:2px}
.buzz{margin-top:8px; font-size:12px; min-height:16px; line-height:1.35; font-weight:500}
.buzz.err{color:var(--lose)}
.buzz.good{color:var(--win)}

/* ---- forms ---- */
.card-form{max-width:400px; margin:44px auto; background:var(--sheet); border:1px solid #D8D8D8}
.card-form .bookbar{margin:0}
.tabrow{display:flex; background:var(--bar-2)}
.tabrow button{flex:1; background:none; border:0; color:#D2D2D2; font-family:var(--sans);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:9px 6px; cursor:pointer; border-bottom:3px solid transparent}
.tabrow button.on{color:var(--gold); border-bottom-color:var(--gold)}
.formbody{padding:20px}
.formbody p.hint{font-size:12.5px; color:var(--ink-2); margin:0 0 16px; line-height:1.5}
label{display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-2); margin:0 0 4px}
input[type=text],input[type=password]{
  width:100%; padding:9px 10px; border:1px solid #C8C8C8; background:#fff; color:var(--ink);
  font-family:var(--sans); font-size:14.5px; margin-bottom:14px}
input:focus{outline:2px solid var(--gold-dk); outline-offset:-1px; border-color:var(--gold-dk)}
.mono-in{font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase}
.tiny{font-size:11.5px; color:var(--ink-3); margin:-9px 0 14px; line-height:1.4}

/* ---- poolwide matrix ---- */
.scroller{overflow-x:auto; background:var(--sheet); border:1px solid #D8D8D8;
  width:fit-content; max-width:100%}
table.matrix{border-collapse:separate; border-spacing:0; font-size:12px; white-space:nowrap}
table.matrix th, table.matrix td{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:4px 6px}
table.matrix thead th{background:var(--bar); color:#fff; font-weight:700; text-align:center; vertical-align:bottom}
table.matrix thead th.gm{border-right:2px solid #202020; min-width:104px}
table.matrix thead tr.nums th{background:var(--bar-2); font-family:var(--mono); font-size:11px; font-weight:700; color:var(--gold); padding:3px 6px}
.gmteam{display:flex; justify-content:space-between; gap:8px; font-size:11.5px}
.gmteam .s{font-family:var(--mono); color:var(--gold)}
.gmstat{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:#A8A8A8; margin-top:2px}
table.matrix tbody td{background:var(--sheet); text-align:center; font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums}
table.matrix tbody tr:nth-child(even) td{background:#FAFAFA}
table.matrix tbody tr:hover td{background:#FFF8E8}
table.matrix td.mine, table.matrix th.mine{background:#FFF3D6 !important; font-weight:700}
table.matrix tbody tr.consensus td{background:var(--band); color:var(--ink-2); font-size:11px}
table.matrix tbody tr.consensus td b{color:var(--ink); font-weight:700}
.stick{position:sticky; background:var(--sheet); z-index:2}
thead .stick{background:var(--bar); z-index:3}
thead tr.nums .stick{background:var(--bar-2)}
.c-no{left:0; width:34px; min-width:34px; text-align:center !important}
.c-nm{left:34px; min-width:150px; text-align:left !important; font-family:var(--sans) !important; font-weight:600 !important; border-right:2px solid var(--rule-2,#CBCAC6) !important}
.c-pt{left:184px; width:44px; min-width:44px; font-weight:700 !important}
.c-wl{left:228px; width:56px; min-width:56px; border-right:2px solid #C4C4C4 !important}
tbody tr:nth-child(even) .stick{background:#FAFAFA}
tbody tr:hover .stick{background:#FFF8E8}
tbody tr.consensus .stick{background:var(--band)}
.p-hit{color:var(--win); font-weight:700}
.p-miss{color:var(--lose); text-decoration:line-through; opacity:.75}
.p-open{color:var(--ink)}
.p-none{color:#D8D8D8}
.pk{display:inline-block}
.pk .v{font-weight:700; margin-left:3px}

/* ---- standings ---- */
table.board{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--sheet)}
table.board th{background:var(--bar); color:#fff; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; text-align:left; padding:8px 10px; font-weight:700}
table.board th.num, table.board td.num{text-align:right; font-variant-numeric:tabular-nums}
table.board td{padding:8px 10px; border-bottom:1px solid var(--rule)}
table.board tbody tr:nth-child(even) td{background:#FAFAFA}
table.board tbody tr.mine td{background:#FFF3D6; font-weight:700}
table.board td.pl{width:44px; text-align:center; font-weight:700; color:var(--ink-2)}
table.board td.nm{font-weight:600}
table.board td.pts{font-family:var(--mono); font-weight:700; font-size:15px}
.medal{color:var(--gold-dk)}
.subtabs{display:flex; gap:0; background:var(--bar-2); margin:0}
.subtabs button{background:none; border:0; color:#D2D2D2; font-family:var(--sans); font-size:12px;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:9px 16px;
  cursor:pointer; border-bottom:3px solid transparent}
.subtabs button.on{color:var(--gold); border-bottom-color:var(--gold)}
select.weekpick{font-family:var(--sans); font-size:12.5px; padding:5px 8px; border:1px solid #C8C8C8; background:#fff}
.legend{font-size:12px; color:var(--ink-2); margin:12px 0 0; line-height:1.6}
.legend b{color:var(--ink)}
.swatch{display:inline-block; width:9px; height:9px; margin-right:4px; vertical-align:baseline}

/* ---- pool switcher ---- */
.poolbar{background:var(--bar-2); border-bottom:1px solid #2A2A2A}
.poolbar .in{max-width:1140px; margin:0 auto; padding:0 16px; display:flex; gap:0; flex-wrap:wrap}
.poolbar a{color:#C2C2C2; text-decoration:none; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:9px 14px;
  border-bottom:3px solid transparent}
.poolbar a:hover{color:#fff}
.poolbar a.on{color:var(--gold); border-bottom-color:var(--gold)}
.poolbar .kindtag{font-size:9.5px; opacity:.6; margin-left:5px; letter-spacing:.02em}

/* straight-up board: one pick cell per team instead of spread + total */
.side.su{grid-template-columns:1fr 96px}
.colhead.su{grid-template-columns:1fr 96px}
.cell.take{background:var(--fill,#F0F0F2); color:var(--ink-2); font-weight:600}
.cell.take:hover:not(:disabled){background:var(--gold-hi); color:#2C2C2C}
.cell.take[aria-pressed="true"]{background:var(--bar); color:var(--gold); font-weight:700}
.cell.take:disabled{background:var(--dead); color:var(--dead-tx)}

/* ---- admin game chooser ---- */
.picker{border:1px solid var(--rule); max-height:340px; overflow-y:auto; margin-bottom:12px; background:#fff}
.picker label{display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center;
  padding:7px 11px; border-bottom:1px solid var(--rule); margin:0; cursor:pointer;
  font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink)}
.picker label:hover{background:#FFF8E8}
.picker label.on{background:#FFF3D6}
.picker input[type=checkbox]{width:16px; height:16px; margin:0; accent-color:var(--gold-dk)}
.picker .when{font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap}
.picker .ln{font-family:var(--mono); font-size:11px; color:var(--gold-dk); margin-left:7px}
.pickbar{display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; font-size:12.5px}
.pickbar button{background:#F2F2F2; border:1px solid #C8C8C8; padding:5px 11px; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:600}
.pickbar button:hover{background:var(--gold-hi); border-color:var(--gold-dk)}
.pickbar .tot{margin-left:auto; font-weight:700; font-family:var(--mono)}
.kindpick{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.kindpick label{flex:1; min-width:220px; border:1px solid var(--rule); border-left:4px solid var(--rule);
  padding:11px 13px; cursor:pointer; margin:0; text-transform:none; letter-spacing:0;
  font-weight:400; color:var(--ink); font-size:13px; display:block}
.kindpick label.on{border-color:var(--gold-dk); border-left-color:var(--gold); background:#FFF8E8}
.kindpick input{margin-right:7px; accent-color:var(--gold-dk)}
.kindpick b{display:block; font-size:14.5px; margin-bottom:3px}
.kindpick span{color:var(--ink-2); font-size:12.5px; line-height:1.45}