/* fillspace.css (2026-10-24): "use the space". Layout/size only, nothing added.
   Loaded LAST (index.html). Boxes grow with the window instead of stopping at fixed widths, text/logos/chips scale with their own box
   (container queries), and the top bar is ~30% thicker. Tab bar height lives in --gc-tb-h so the sticky rail, mock banner and
   spotlight panel offsets stay in step with it. */
:root{--gc-tb-h:76px;--gc-tk-h:40px;--gc-tk-top:0px;--gc-tk-bot:0px;--gc-pad:clamp(16px,1.6vw,34px)}

/* ---------- top bar (58px -> 76px) ---------- */
body header.tbar{box-sizing:border-box;min-height:var(--gc-tb-h);align-items:center;gap:clamp(8px,.9vw,22px);padding:8px var(--gc-pad)!important}
header.tbar .logo{font-size:clamp(24px,1.6vw,30px);line-height:1}
body.paper header.tbar .logo{font-size:clamp(25px,1.7vw,32px)}
body.paper header.tbar .logo::before{width:9px;height:22px;margin-right:clamp(8px,.6vw,11px);vertical-align:-3px}
.tb-lg{padding:4px;border-radius:12px}
.tb-lg button{font-size:clamp(14px,1.05vw,16px);padding:clamp(9px,.8vw,11px) clamp(9px,.95vw,16px);border-radius:8px}
.tb-dates{gap:4px}
.tb-dates a,.tb-dates button{font-size:clamp(14px,1.05vw,15px);padding:clamp(9px,.8vw,11px) clamp(7px,.85vw,13px)}
.tb-dates a.arw,.tb-dates button.arw{font-size:21px;padding:7px clamp(6px,.6vw,11px);min-width:30px}
.tb-cal{padding:clamp(9px,.75vw,10px) clamp(9px,.9vw,14px);border-radius:var(--gc-r-sm,6px)}.tb-dl{font-size:clamp(14px,1.05vw,16px)}.tb-dd{font-size:12px}
.tb-search{border-radius:12px;padding:0 clamp(9px,.9vw,13px)}.tb-search input{width:clamp(104px,9vw,250px);padding:12px 0;font-size:clamp(14px,1vw,15px)}
.tb-res{top:calc(100% + 8px)}
header.tbar .tb-live{padding:8px clamp(10px,1vw,15px);font-size:13px}header.tbar .tb-live .pulse{width:8px;height:8px}
header.tbar .tb-live-n{font-size:12px;padding:2px 8px}
header.tbar .sub{font-size:12px}
.tbar .rzctl button,.tbar .gcctl button{font-size:clamp(12px,.9vw,13px);padding:9px clamp(8px,.8vw,12px);border-radius:8px}
header.tbar .tktog{font:700 clamp(12px,.9vw,13px) Inter,system-ui,sans-serif;padding:8px clamp(10px,.9vw,14px);border-radius:999px}
header.tbar .ichip{font-size:12px;padding:5px 11px}
@media (max-width:1180px){body header.tbar{gap:6px;padding:8px 12px!important}.tb-search input{width:78px}body header.tbar .logo{font-size:22px}body.paper header.tbar .logo{font-size:23px}}
/* sticky/fixed things that sit under the bar */
/* tickers: --gc-tk-top / --gc-tk-bot (set on <body> by ticker.js) = height the scores / headlines bars reserve at each edge (0 when none there).
   Their sum shifts the page, sticky bar, rail and floating panels so nothing sits under a bar, wherever either ticker is placed. */
body{padding-top:var(--gc-tk-top,0px)}
/* (header is position:relative via home.css, so it simply follows the body padding-top; no top offset needed) */
.rail{top:calc(var(--gc-tb-h) + var(--gc-tk-top,0px) + 6px);max-height:calc(100vh - var(--gc-tb-h) - var(--gc-tk-top,0px) - var(--gc-tk-bot,0px) - 20px)}
.mockban{top:calc(var(--gc-tb-h) + var(--gc-tk-top,0px))}
#gcspot{top:calc(var(--gc-tb-h) + var(--gc-tk-top,0px) + 6px)}
body.has-ticker-bottom main#app,body.paper.has-ticker-bottom main#app{padding-bottom:calc(var(--gc-tk-bot,0px) + 22px)} /* (the shorthand padding rules below would otherwise reset it) */
body.has-ticker-bottom #gcspot{bottom:calc(var(--gc-tk-bot,0px) + 12px)}

/* ---------- page frame ---------- */
body.paper main#app{max-width:none;padding:22px var(--gc-pad)}
main#app{padding:20px var(--gc-pad)}
@media (min-width:901px){.fshell{grid-template-columns:clamp(286px,17.5vw,350px) minmax(0,1fr);gap:clamp(18px,1.5vw,30px)}}
.stage{gap:clamp(14px,1.1vw,22px)}
.stage.home{gap:clamp(18px,1.4vw,28px)}

/* ---------- rail (left game cards) ---------- */
.rail{container-type:inline-size}
.rail .gc{padding:clamp(10px,3.4cqi,15px) clamp(12px,4cqi,16px) clamp(10px,3.4cqi,15px) clamp(16px,5cqi,22px)}
.rail .gc-row img{width:clamp(20px,7.4cqi,26px);height:clamp(20px,7.4cqi,26px)}
.rail .gc-row .ab{font-size:clamp(17px,6.3cqi,22px)}.rail .gc-row .sc{font-size:clamp(20px,7.6cqi,27px)}
.rail .gc-top{font-size:clamp(11.5px,3.6cqi,13px)}.rail .gc-sit{font-size:clamp(11px,3.6cqi,13px)}.rail .gc-k{font-size:clamp(11px,3.5cqi,12.5px)}
.rail .chip{padding:8px 13px}

/* ---------- HOME ---------- */
.hhero{padding:clamp(26px,2vw,40px) clamp(28px,2.3vw,48px)}
.hhero h1{font-size:clamp(44px,3.3vw,68px)}
.hhero .hcounts{gap:clamp(8px,.7vw,14px)}
.hcount{min-width:clamp(92px,7.2vw,150px);padding:clamp(10px,.9vw,18px) clamp(12px,1.1vw,22px);gap:clamp(4px,.4vw,8px)}
.hcount b{font-size:clamp(17px,1.35vw,26px)}.hcount .c{font-size:clamp(11px,.85vw,15px)}
.hsec-t{font-size:clamp(16px,1.2vw,22px)}
.feat{grid-template-columns:repeat(auto-fill,minmax(max(340px,21vw),1fr));gap:clamp(14px,1.1vw,22px)}
.fcard{container-type:inline-size;padding:clamp(16px,3.6cqi,26px) clamp(18px,4.2cqi,30px);gap:clamp(12px,2.8cqi,20px)}
.fc-top{font-size:clamp(11px,2.7cqi,14px)}.fc-note{font-size:clamp(11px,2.7cqi,14px)}
.fcard .livepill{font-size:clamp(13px,3.1cqi,17px);padding:clamp(3px,.8cqi,5px) clamp(7px,1.8cqi,11px)}
.fcard .cdown{font-size:clamp(15px,3.6cqi,21px)}
.fc-mid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(6px,1.6cqi,14px)}.fc-at{font-size:clamp(16px,4cqi,26px)}
.ft-team{gap:clamp(6px,2cqi,14px);min-width:0}.ft-team>div:not(.ft-sc){min-width:0}
.ft-team img{width:clamp(38px,11.6cqi,96px);height:clamp(38px,11.6cqi,96px);flex:none}
.ft-ab{font-size:clamp(24px,6.2cqi,46px)}.ft-ab sup{font-size:clamp(11px,2.6cqi,17px)}
.ft-nm{font-size:clamp(11px,3.2cqi,17px)}.ft-rec{font-size:clamp(11px,2.9cqi,15px)}
.ft-sc{font-size:clamp(28px,8cqi,62px);margin:0 clamp(0px,.6cqi,6px)}
.fc-meta{font-size:clamp(11.5px,2.8cqi,14.5px);gap:clamp(12px,2.8cqi,20px)}
.fcard .kbar{font-size:clamp(13px,3.1cqi,17px)}.fcard .kb{height:clamp(8px,1.9cqi,12px)}
.fcard .gco{font-size:clamp(12px,2.8cqi,15px)}.fcard .gco-meta{font-size:clamp(11px,2.7cqi,14px)}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(max(190px,13.5vw),1fr));gap:clamp(8px,.7vw,14px)}
.mcard{container-type:inline-size;padding:clamp(9px,4.6cqi,16px) clamp(11px,5cqi,18px) clamp(9px,4.6cqi,16px) clamp(14px,6.4cqi,22px);gap:clamp(3px,1.6cqi,7px)}
.mc-r{gap:clamp(7px,3.2cqi,12px)}.mc-r img{width:clamp(20px,9.5cqi,32px);height:clamp(20px,9.5cqi,32px)}
.mc-r b{font-size:clamp(16px,7.4cqi,24px)}.mc-r .sc{font-size:clamp(12px,5.6cqi,17px)}.mcard.post .mc-r .sc{font-size:clamp(17px,8cqi,26px)}
.mc-f{font-size:clamp(11px,5.2cqi,14px)}
.fins{grid-template-columns:repeat(auto-fill,minmax(max(250px,17vw),1fr));gap:clamp(10px,.9vw,18px)}
.fin-w,.fin-card{container-type:inline-size}
.fin-card{padding:clamp(12px,5cqi,20px) clamp(14px,5.6cqi,22px);gap:clamp(5px,2cqi,9px)}
.fin-top{font-size:clamp(11px,4.2cqi,14px)}
.fin-r{gap:clamp(8px,3.2cqi,13px)}.fin-r img{width:clamp(24px,10cqi,38px);height:clamp(24px,10cqi,38px)}
.fin-r b{font-size:clamp(17px,7cqi,26px)}.fin-r>span:not(.gco){font-size:clamp(22px,9cqi,34px)}
.fin-r .gco{font-size:clamp(12px,4.4cqi,15px)}.fin-card .gco-meta{font-size:clamp(11px,3.8cqi,14px)}
.perf{font-size:clamp(12px,4.8cqi,15px);gap:clamp(8px,3cqi,12px)}.perf img{width:clamp(30px,12cqi,44px);height:clamp(30px,12cqi,44px)}
.fin-recap{font-size:clamp(12px,4.8cqi,15px)}.fin-clip{font-size:clamp(12px,4.6cqi,14.5px)}
.fin-x{padding-left:clamp(14px,5.6cqi,22px);padding-right:clamp(14px,5.6cqi,22px)}

/* ---------- GAME PAGE ---------- */
@media (min-width:1181px){
  .main2{grid-template-columns:minmax(0,1fr) clamp(340px,22vw,450px);gap:clamp(14px,1.1vw,22px);align-items:start}
}
.grid3{gap:clamp(14px,1.1vw,22px)}
.side{gap:clamp(14px,1.1vw,22px)}
@media (min-width:901px) and (max-width:1279px){
  .scorebug{gap:8px}
  body.paper .scorebug .big{font-size:46px}
  .scorebug .mid{min-width:0;max-width:200px}
  .scorebug .team img{width:44px;height:44px}
}
@media (min-width:1280px){
  .scorebug{padding:clamp(10px,.9vw,16px) 0;gap:clamp(14px,1.2vw,24px)}
  .scorebug .bar{margin:clamp(-16px,-.9vw,-10px) 0}
  .scorebug .team img{width:clamp(46px,3.4vw,68px);height:clamp(46px,3.4vw,68px)}
  .scorebug .tn{font-size:clamp(26px,1.95vw,40px)}.scorebug .rec{font-size:clamp(11px,.75vw,14px)}
  body.paper .scorebug .big{font-size:clamp(54px,3.9vw,80px);min-width:clamp(64px,4.6vw,96px)}
  .scorebug .mid{min-width:clamp(190px,14vw,300px)}
  .scorebug .status{font-size:clamp(22px,1.6vw,32px)}.scorebug .lgtag{font-size:clamp(11px,.8vw,14px)}.scorebug .mid .sit{font-size:clamp(12px,.9vw,15px)}
  .btabs button{font-size:clamp(15px,1.1vw,19px);padding:clamp(11px,.85vw,15px) clamp(16px,1.2vw,24px) clamp(10px,.8vw,14px)}
  .btabs .lab{font-size:clamp(11px,.8vw,13px)}
}
/* pregame preview */
.pv,.pv-grid{gap:clamp(14px,1.1vw,22px)}
.pv-grid{grid-template-columns:repeat(auto-fit,minmax(max(330px,21vw),1fr))}
.stage.pregame .main2 .side{grid-template-columns:repeat(auto-fit,minmax(max(280px,19vw),1fr));gap:clamp(14px,1.1vw,22px)}
.pv-band{padding:clamp(22px,1.9vw,38px) clamp(24px,2.2vw,44px) clamp(16px,1.4vw,26px)}
.pv-team{gap:clamp(16px,1.5vw,28px)}
.pv-team img{width:clamp(96px,7.2vw,150px);height:clamp(96px,7.2vw,150px)}
.pv-ab{font-size:clamp(30px,2.3vw,50px)}.pv-rec{font-size:clamp(12px,.9vw,16px)}
.pv-cd{font-size:clamp(40px,3.1vw,64px)}
.pv-meta{font-size:clamp(12px,.9vw,15px);gap:clamp(18px,1.6vw,30px)}
.inj{font-size:clamp(12px,.85vw,14px)}
.kline,.oline,.ksub{font-size:clamp(11.5px,.82vw,13.5px)}
.card{padding:clamp(14px,1.05vw,22px) clamp(16px,1.2vw,24px)}
body.paper .eyebrow{font-size:clamp(12.5px,.9vw,15px)}

/* ---------- WALL (#/wall) ---------- */
/* .wgrid.big used to lose display:grid to the score-number rule .big (inline-block, 48-54px) so live tiles floated at odd widths */
.wgrid.big{display:grid;font:inherit;min-width:0;text-align:left;grid-template-columns:repeat(auto-fill,minmax(max(300px,21vw),1fr));gap:clamp(8px,.8vw,16px)}
.wgrid.compactrow{grid-template-columns:repeat(auto-fill,minmax(max(170px,13vw),1fr));gap:clamp(8px,.7vw,14px)}
.wgrid>.tile{container-type:inline-size;min-width:0}
.tile{padding:clamp(8px,3cqi,16px)}
.tile .lg{font-size:clamp(11px,3.4cqi,14px)}
.tile .tr{gap:clamp(6px,2.4cqi,12px);margin:clamp(2px,.8cqi,5px) 0}
.tile .tr img{width:clamp(20px,7.4cqi,34px);height:clamp(20px,7.4cqi,34px)}
.tile .ab{font-size:clamp(14px,5cqi,22px)}.tile .ts{font-size:clamp(18px,6.6cqi,32px)}
.tile .gco{font-size:clamp(12px,3.6cqi,15px)}.tile .gco-meta{font-size:clamp(11px,3.3cqi,14px)}
.tile .sit{font-size:clamp(12px,3.6cqi,15px)}.tile .lp{font-size:clamp(11px,3.4cqi,14px);max-height:none}
.tile .kp,.tile .prio{font-size:clamp(11px,3.2cqi,13.5px)}
.tile.compact{padding:clamp(6px,4cqi,12px);font-size:clamp(12px,6cqi,15px)}
.tile.compact .tr img{width:clamp(16px,9cqi,26px);height:clamp(16px,9cqi,26px)}.tile.compact .ts{font-size:clamp(14px,8.4cqi,22px)}.tile.compact .ab{font-size:clamp(13px,7cqi,19px)}
.tile.compact .gco{font-size:clamp(11px,5.6cqi,14px)}.tile.compact .gco-meta{font-size:clamp(10.5px,5.2cqi,13px)}
.tile.compact .lg{font-size:clamp(10.5px,5.2cqi,13px)}
.wallbar{flex-wrap:wrap;gap:8px;margin-bottom:clamp(12px,1vw,20px)}.wallbar .lf{font-size:13px;padding:6px 15px}.wallbar .muted{font-size:13px}
.spot .tile{max-width:none}
.spot .tile.feature .ts{font-size:clamp(30px,4cqi,48px)}.spot .tile.feature .tr img{width:clamp(34px,5cqi,56px);height:clamp(34px,5cqi,56px)}
.spot .tile.feature .ab{font-size:clamp(20px,3.2cqi,34px)}
.spot .tile.feature .lp{font-size:clamp(13px,1.5cqi,17px)}
@media (min-width:1280px){
  /* spotlight = full-width banner: field on the left, teams/score/last play on the right */
  .spot .tile.feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(18px,2vw,40px);align-content:start;padding:clamp(12px,1.1vw,22px)}
  .spot .tile.feature>.lg{grid-column:1/-1;grid-row:1}
  .spot .tile.feature>.mini{grid-column:1;grid-row:2/span 9;align-self:center}
  .spot .tile.feature>:not(.lg):not(.mini):not(.wstar):not(.badge){grid-column:2}
  .spot .tile.feature>.sit{min-height:0}
}
.spot{margin-bottom:clamp(14px,1.2vw,24px)}
.spot .tile{container-type:inline-size}
.wall-h2,main>h2{font-size:clamp(15px,1.05vw,19px)}

/* ---------- LIST (#/grid) ---------- */
.grid{grid-template-columns:repeat(auto-fill,minmax(max(230px,15.5vw),1fr));gap:clamp(10px,.9vw,18px)}
.grid>.card{container-type:inline-size;padding:clamp(10px,4cqi,18px)}
.grid>.card .row{margin:clamp(3px,1.4cqi,7px) 0}
.grid>.card .row img{width:clamp(22px,8.6cqi,34px);height:clamp(22px,8.6cqi,34px);margin-right:clamp(6px,2.4cqi,10px)}
.grid>.card .row{font-size:clamp(14px,5.2cqi,19px)}.grid>.card .sc{font-size:clamp(16px,6.4cqi,24px)}
.grid>.card .row .muted{font-size:clamp(11px,4cqi,14px)}
.grid>.card .st{font-size:clamp(11px,4cqi,14px);margin-top:clamp(6px,2cqi,10px)}
.grid>.card .gco{font-size:clamp(12px,4.4cqi,15px)}.grid>.card .gco-meta{font-size:clamp(11px,4cqi,14px)}

/* ---------- STACK (#/stack) ---------- */
.gpanel{grid-template-columns:minmax(0,1fr) clamp(340px,22vw,480px);gap:clamp(14px,1.2vw,24px);padding:clamp(12px,1vw,20px)}
.gpanel.pre{grid-template-columns:1fr}
.gcard .tr img{width:clamp(30px,2.2vw,44px);height:clamp(30px,2.2vw,44px)}.gcard .ts{font-size:clamp(26px,1.9vw,38px)}.gcard .ab{font-size:clamp(15px,1.15vw,21px)}

/* ---------- floating bits that hang off the bar / ticker ---------- */
#gcisland{top:calc(var(--gc-tb-h) + var(--gc-tk-top,0px) - 14px)}
body.has-ticker-bottom #gctoasts{bottom:calc(var(--gc-tk-bot,0px) + 14px)}
body.has-ticker-bottom #rzbanner{bottom:calc(var(--gc-tk-bot,0px) + 12px)}
/* text-clip: clip headlines wrap instead of ellipsizing; full text always visible */
.fin-clip{align-items:flex-start}.fin-clip .ht{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25;text-align:left}.fin-clip{line-height:1.25;border-radius:16px}.fin-clip .pl{margin-top:0;flex:none}

/* ---------- game page: no blank block under the gamecast (2026-10-26) ----------
   The right-hand column (last play, weather, win probability, game info) is taller than the field/court, which used to leave an empty
   block under the gamecast until the leaders / stats / highlights started full width below it. On the Gamecast tab the column now floats
   to the right and everything after the field (leaders, drive timeline, highlights, team stats, scoring, play-by-play) flows up beside it,
   then goes full width once the column ends. Layout only; no data touched. Pregame, other tabs and <=1180px keep the old stacked grid. */
@media (min-width:1181px){
  .stage[data-tab="gamecast"]:not(.pregame){display:flow-root}
  .stage[data-tab="gamecast"]:not(.pregame)>.main2{display:contents}
  .stage[data-tab="gamecast"]:not(.pregame) .main2>.side{float:right;width:clamp(340px,22vw,450px);margin:var(--gc-gap-g,14px) 0 var(--gc-gap-g,14px) var(--gc-gap-g,14px)}
  .stage[data-tab="gamecast"]:not(.pregame) .main2>.fieldwrap{margin-top:var(--gc-gap-g,14px)}
  .stage[data-tab="gamecast"]:not(.pregame)>:not(.main2):not(.scorebug):not(.btabs):not(.replaybar){margin-top:var(--gc-gap-g,14px);contain:layout}
  /* leaders + team stats side by side, scoring full width under them (a third-width scoring list wrapped into a very tall strip) */
  .stage[data-tab="gamecast"]:not(.pregame)>.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage[data-tab="gamecast"]:not(.pregame)>.grid3>:nth-child(3){grid-column:1/-1}
}
:root{--gc-gap-g:clamp(14px,1.1vw,22px)}

/* ---------- Slate brand (2026-10-26): the top-bar wordmark is Jason's dot-matrix SLATE logo (an <img>), not text ---------- */
header .logo{display:inline-flex;align-items:center;flex:none;line-height:0;text-decoration:none}
header .logo img{display:block;height:30px;width:auto;max-width:none;user-select:none;-webkit-user-drag:none}
header.tbar .logo img{height:clamp(28px,1.7vw,34px)}
body.paper header .logo::before{content:none!important;display:none!important} /* the old red/accent bar belonged to the text wordmark */
@media (max-width:1180px){header.tbar .logo img{height:27px}}

/* ---------- awkward blank space, round 2 (2026-10-29) ---------- */
/* Home / league Full slate: each league (or day) group used to take a whole row, so a 1-3 game group left most of the row empty.
   Groups now share rows: each group's width is proportional to its game count, and its cards stretch to fill it. */
.lgrps{display:flex;flex-wrap:wrap;gap:clamp(14px,1.1vw,22px) clamp(18px,1.4vw,28px);align-items:flex-start}
.lgrps>.lgrp{flex:var(--n,1) 0 calc(var(--n,1) * max(190px,13.5vw) + (var(--n,1) - 1) * clamp(8px,.7vw,14px));min-width:0;max-width:100%}
#stage.home .lgrps>.lgrp{content-visibility:visible;contain-intrinsic-size:none}
.lgrps>.lgrp>.mgrid{grid-template-columns:repeat(auto-fit,minmax(max(190px,13.5vw),1fr))}
/* game page: a section that started just above the floating right column's bottom is cleared below it (fillgap.js) so it runs full width */
@media (min-width:1181px){.stage[data-tab="gamecast"]:not(.pregame)>.gfclr{clear:right}}
.pv-grid>.gflone{grid-column:1/-1}
/* Lines / Lineups / Depth Charts screens: use the page width instead of stopping at 1280px */
.nl{max-width:none}