:root {
    --bg: #0B1014;
    --surface: #141D22;
    --surface-2: #1C272D;
    --ink: #E9EFEA;
    --dim: #8D9CA5;
    --rule: #26333A;
    --faint: #5D6D77;
    --turf: #58AE76;
    --turf-fill: #2C6844;
    --slate: #3A4A55;
    --pylon: #FF7C3F;
    --recall: #FFD166;                /* showing a number from before kickoff */
    --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Barlow", system-ui, -apple-system, sans-serif;
  }
  * { box-sizing: border-box; }
  /* Everything below is sized in rem, so this one line scales the whole page:
     ~15px on a phone, ~17px on a laptop, up to 26px on a TV. */
  html { background: var(--bg); font-size: clamp(15px, 0.4vw + 11.5px, 23px); }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.45 var(--body);
         -webkit-font-smoothing: antialiased; }
  main { max-width: min(1500px, 96vw); margin: 0 auto; padding: 1.1rem 1rem 5.5rem; }

  header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px;
           padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
  h1 { font: 700 2.2rem/1 var(--cond); margin: 0; letter-spacing: -0.01em; }
  h1 span { color: var(--turf); }
  .sub { color: var(--dim); font-size: .9rem; margin-top: 4px; }
  .head-right { display: flex; align-items: center; gap: .8rem; }
  .clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
  .clock-label { font: 600 .72rem var(--cond); letter-spacing: .14em; text-transform: uppercase;
                 color: var(--dim); }
  .clock-time { font: 700 1.75rem/1 var(--cond); color: var(--turf); font-variant-numeric: tabular-nums;
                letter-spacing: .02em; margin-top: 2px; }
  .clock-time.soon { color: var(--pylon); }
  a:focus-visible, summary:focus-visible, .tab:focus-visible, .wk:focus-visible {
    outline: 2px solid var(--pylon); outline-offset: 2px; }

  h2 { font: 600 1.3rem/1 var(--cond); letter-spacing: .04em; text-transform: uppercase;
       margin: 32px 0 10px; display: flex; align-items: center; gap: 8px; color: var(--dim); }
  h2 .count { color: var(--faint); font-weight: 600; }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pylon);
              box-shadow: 0 0 8px var(--pylon); }
  @media (prefers-reduced-motion: no-preference) { .live-dot { animation: pulse 1.7s ease-in-out infinite; } }
  @keyframes pulse { 50% { opacity: .3; } }

  /* ---------- tabs ---------- */
  .tabs { display: flex; gap: 6px; margin: 16px 0 4px; border-bottom: 1px solid var(--rule); }
  .tab { font: 600 1.05rem var(--cond); letter-spacing: .06em; text-transform: uppercase;
         background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim);
         padding: 8px 14px; cursor: pointer; }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"] { color: var(--turf); border-bottom-color: var(--turf); }
  .tab .badge { color: var(--faint); font-weight: 600; margin-left: 5px; }

  /* ---------- week switcher ---------- */
  .weeknav { display: flex; justify-content: flex-end; gap: 0; margin: .7rem 0 0; }
  .weeknav .wk { font: 600 .95rem var(--cond); letter-spacing: .06em; text-transform: uppercase;
                 background: var(--surface); color: var(--dim); border: 1px solid var(--rule);
                 padding: .42rem .85rem; cursor: pointer; }
  .weeknav .wk:first-child { border-radius: 4px 0 0 4px; }
  .weeknav .wk:last-child { border-radius: 0 4px 4px 0; }
  .weeknav .wk + .wk { border-left: 0; }
  .weeknav .wk:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
  .weeknav .wk:disabled { opacity: .38; cursor: default; }
  .weeknav .wk.mid { color: var(--ink); min-width: 7.5rem; text-align: center; }
  .weeknav .wk.mid.off { color: var(--turf); border-color: #2f5b43; }

  /* ---------- scoreboard strip ---------- */
  .board { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem 2.4rem;
           margin-top: .9rem; position: relative; }
  /* 50-yard line: a dashed seam down the middle with a soft glow, like field hashes */
  .board::before { content: ""; position: absolute; top: .2rem; bottom: .2rem; left: 50%;
    width: 4px; margin-left: -2px; pointer-events: none; border-radius: 2px;
    background: repeating-linear-gradient(180deg, #33444E 0 14px, transparent 14px 24px);
    mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }
  .board::after { content: ""; position: absolute; top: .2rem; bottom: .2rem; left: 50%;
    width: 26px; margin-left: -13px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(88,174,118,.10), transparent 72%); }
  .board .group { grid-column: 1 / -1; }
  .sb { display: grid; grid-template-columns: 4.4rem 1fr auto 1fr 4.4rem; align-items: center; gap: .5rem;
        background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
        padding: .75rem .8rem; position: relative; overflow: hidden; }
  /* Live rows carry no orange of their own: they are already under the "Live"
     heading, and the tint fought both the red-zone border and the score flash.
     The left edge now means red zone and nothing else. */
  .sb .wp { font: 700 1.5rem/1 var(--cond); font-variant-numeric: tabular-nums; color: var(--dim); }
  .sb .wp.a { text-align: left; } .sb .wp.h { text-align: right; }
  .sb .wp.lead { color: var(--turf); }
  .sb .wp { display: flex; align-items: center; gap: .3rem; }
  .sb .wp.a { flex-direction: row-reverse; }   /* arrow on the outside edge */
  .arrow { flex: none; width: 0; height: 0; }
  .arrow.up { border-left: .3rem solid transparent; border-right: .3rem solid transparent;
              border-bottom: .42rem solid var(--turf); }
  .arrow.down { border-left: .3rem solid transparent; border-right: .3rem solid transparent;
                border-top: .42rem solid #D9534F; }
  /* flat = no change: point outward, away from the middle of the row */
  .arrow.flat { border-top: .3rem solid transparent; border-bottom: .3rem solid transparent;
                border-left: .42rem solid var(--faint); }
  .sb .wp.a .arrow.flat { border-left: 0; border-right: .42rem solid var(--faint); }
  .sb .team { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .sb .team .code { white-space: nowrap; }
  .sb .slot { display: inline-flex; align-items: center; }
  /* gap rather than a margin on the text: the marker sits before the down for
     the away side and after it for the home side, and a gap spaces them either
     way round without caring which. */
  .sb .team .bl:not(:empty) { padding: 0 .15rem; gap: .34rem; }
  .sb .team { overflow: hidden; }
  .sb .team.h { justify-content: flex-end; }
  .sb img.logo { width: 1.85rem; height: 1.85rem; object-fit: contain; flex: none; }
  .sb .code { font: 600 1.3rem/1 var(--cond); letter-spacing: .03em; color: var(--dim); }
  .sb .code.lead { color: var(--ink); }
  .sb .mid { text-align: center; width: 5.6rem; }
  .sb .score { font: 700 1.65rem/1 var(--cond); font-variant-numeric: tabular-nums;
               letter-spacing: .02em; white-space: nowrap; }
  .sb .score .sep { color: var(--faint); margin: 0 4px; }
  .sb .score .losing { color: var(--dim); }
  .sb .when { display: block; font-size: .76rem; color: var(--dim); margin-top: 3px; letter-spacing: .02em; }
  .sb .when.now { color: var(--dim); font-weight: 600; }

  /* ---------- hover: what the model said before kickoff ----------
     Only rows that have actually moved on since kickoff can recall anything,
     so .sb.can-recall is what makes a row interactive. */
  .sb.can-recall { cursor: help; }
  .sb { transition: background .16s ease, border-color .16s ease; }
  .sb.recall { background: rgba(255, 209, 102, .09); border-color: rgba(255, 209, 102, .42); }
  .sb.recall .wp, .sb.recall .wp.lead { color: var(--recall); }
  .sb.recall .when { color: var(--recall); font-weight: 600; letter-spacing: .04em; }
  .sb .badge { position: absolute; top: 0; right: 0; font: 600 .6rem var(--cond);
    letter-spacing: .1em; text-transform: uppercase; color: #0B1014; background: var(--recall);
    padding: 2px 6px; border-radius: 0 5px 0 5px; opacity: 0; transition: opacity .16s ease;
    pointer-events: none; }
  .sb.recall .badge { opacity: 1; }
  .sb.recall .arrow { visibility: hidden; }   /* arrows track recent movement, not this */

  /* ---------- red zone ---------- */
  /* ESPN's own isRedZone flag, so it is right about who has the ball. */
  .sb.redzone { border-color: rgba(217, 83, 79, .55);
                box-shadow: 0 0 0 1px rgba(217, 83, 79, .22), 0 0 14px rgba(217, 83, 79, .20) inset; }
  .sb.redzone::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
                        width: 3px; background: #D9534F; }

  /* ---------- scorecard glow on finished games ----------
     Box-shadow rather than background, so it sits under the hover recall tint
     and the score flash instead of fighting them. */
  .sb.hit  { border-color: rgba(88, 174, 118, .85);
             box-shadow: 0 0 0 1px rgba(88, 174, 118, .7), 0 0 22px rgba(88, 174, 118, .55) inset,
                         0 0 12px rgba(88, 174, 118, .35); }
  .sb.miss { border-color: rgba(217, 83, 79, .75);
             box-shadow: 0 0 0 1px rgba(217, 83, 79, .55), 0 0 16px rgba(217, 83, 79, .32) inset; }
  .sb .verdict { position: absolute; top: 0; left: 0; font: 700 .58rem var(--cond);
                 letter-spacing: .1em; text-transform: uppercase; color: #0B1014;
                 padding: 2px 6px; border-radius: 5px 0 5px 0; pointer-events: none; }
  .sb.hit  .verdict { background: var(--turf); }
  .sb.miss .verdict { background: #D9534F; color: #fff; }

  /* ---------- the model's record for the week on the board ---------- */
  .weekstats { margin: 1rem 0 .2rem; padding: .7rem 1rem; border: 1px solid var(--rule);
               border-radius: 6px; background: var(--surface);
               display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
  /* display:flex would otherwise beat the browser's [hidden] rule, so hiding
     it from script would silently do nothing. Make it explicit. */
  .weekstats[hidden] { display: none; }
  .weekstats .lead { font: 700 1.15rem var(--cond); letter-spacing: .04em; text-transform: uppercase;
                     color: var(--dim); }
  .weekstats .rec { font-variant-numeric: tabular-nums; }
  .weekstats .rec .ok { color: var(--turf); font-weight: 600; }
  .weekstats .rec .no { color: #D9534F; font-weight: 600; }
  .weekstats .acc { margin-left: auto; font: 700 1.6rem var(--cond); font-variant-numeric: tabular-nums;
                    color: var(--turf); }
  .weekstats .acc.poor { color: #D9534F; }

  /* ---------- score change ---------- */
  /* Flash the row when the score moves. The animation is on a separate overlay
     so it cannot fight the red-zone or recall backgrounds underneath it. */
  .sb .flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: 5px;
               background: radial-gradient(120% 100% at 50% 50%, rgba(232,76,61,.42), rgba(232,76,61,.14)); }
  .sb.scored .flash { animation: scoreflash 3s ease-out 1; }
  @keyframes scoreflash {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    35%  { opacity: .5; }
    55%  { opacity: .85; }
    78%  { opacity: .4; }
    100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sb.scored .flash { animation: none; opacity: 0; }
  }
  .sb .tip { font: 500 .85rem/1.2 var(--body); color: var(--dim); white-space: nowrap; }
  .sb .ball { display: inline-block; width: 8px; height: 5px; border-radius: 50%; background: #8A5A33; flex: none; }
  /* Down and distance, with the spot the ball is on stacked underneath. The two
     lines sit inside the row's existing height, so a change of possession does
     not make the board jump. */
  .sb .dd { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
            font: 600 .82rem/1.15 var(--cond); letter-spacing: .03em; color: var(--dim);
            white-space: nowrap; flex: none; }
  .sb .dd .spot { font-size: .72rem; font-weight: 500; color: inherit; opacity: .72; }
  .sb.redzone .dd { color: #D9534F; }   /* 3rd and goal is worth reading twice */
  /* .team clips its overflow, so on a narrow row this block would silently push
     the possession marker out rather than wrap. Rather than hide it early,
     tighten it as the row gets narrower and reclaim the padding around it. */
  @media (max-width: 1340px) {
    .sb .dd { font-size: .74rem; }
    .sb .dd .spot { font-size: .66rem; }
    .sb .team { gap: 6px; }
    .sb .team .bl:not(:empty) { padding: 0 .1rem; gap: .3rem; }
  }
  @media (max-width: 1120px) {
    .sb .dd { font-size: .68rem; }
    .sb .dd .spot { font-size: .6rem; }
    .sb .team { gap: 5px; }
    .sb .team .bl:not(:empty) { padding: 0 .08rem; gap: .28rem; }
  }
  /* Under this the two-column row genuinely has no space for it: the block, and
     then the possession marker behind it, get clipped rather than wrapped.
     Measured on a live board, 950px is where it stops fitting. */
  @media (max-width: 949px) { .sb .dd { display: none; } }
  /* Between the compact layout below 980px and a comfortable desktop row, the
     two-column board is at its tightest. Take the space back from the fixed
     columns either side rather than shrinking the type any further. */
  @media (min-width: 981px) and (max-width: 1199px) {
    .sb { grid-template-columns: 3.7rem 1fr auto 1fr 3.7rem; gap: .35rem; padding: .68rem .55rem; }
    .sb .mid { width: 4.8rem; }
    .sb .wp { font-size: 1.34rem; }
  }
  .board h3 { font: 600 1rem var(--cond); letter-spacing: .08em; text-transform: uppercase;
              color: var(--dim); margin: 10px 0 0; display: flex; align-items: center; gap: 7px; }
  .board h3:first-child { margin-top: 0; }

  /* ---------- detail cards ---------- */
  #detail .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .game { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
          padding: 14px 14px 12px; }
  .combos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
  .team-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .team-row.home { justify-content: flex-end; }
  .team-row img { width: 26px; height: 26px; object-fit: contain; flex: none; }
  .abbr { font: 700 1.55rem/1 var(--cond); }
  .nick { color: var(--dim); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .score-lg { font: 600 1.55rem/1 var(--cond); color: var(--dim); font-variant-numeric: tabular-nums; }
  .mid-status { text-align: center; font-size: .82rem; color: var(--dim); white-space: nowrap; }
  .mid-status .now { color: var(--pylon); font-weight: 600; }

  .field { position: relative; height: 30px; margin: 12px 0 16px; border-radius: 3px;
           background: var(--turf-fill); overflow: visible; }
  .field .away-fill { position: absolute; inset: 0 auto 0 0; background: var(--slate);
                      border-radius: 3px 0 0 3px; transition: width .5s ease; }
  .field .hashes { position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(233,239,234,.14) calc(10% - 1px) 10%); }
  .field .split { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
                  background: var(--ink); transition: left .5s ease; }
  .field .pct { position: absolute; top: 50%; transform: translateY(-50%);
                font: 700 1.1rem/1 var(--cond); color: #fff; font-variant-numeric: tabular-nums; }
  .field .pct.a { left: 9px; } .field .pct.h { right: 9px; }
  .field .market { position: absolute; bottom: -11px; width: 0; height: 0; margin-left: -5px;
                   border: 5px solid transparent; border-bottom: 6px solid var(--dim); border-top: 0; }
  @media (prefers-reduced-motion: reduce) { .field .away-fill, .field .split { transition: none; } }

  table.prices { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
  table.prices th, table.prices td { padding: 4px 0; border-bottom: 1px solid var(--rule); }
  table.prices thead th { font: 600 .9rem var(--cond); letter-spacing: .05em; text-transform: uppercase;
                          color: var(--dim); }
  table.prices th[scope="row"] { text-align: left; font-weight: 400; color: var(--dim); }
  table.prices td, table.prices thead th:not(:first-child) { text-align: right; width: 26%; }
  table.prices tr.model td { font-weight: 600; color: var(--turf); }
  table.prices tr:last-child th, table.prices tr:last-child td { border-bottom: 0; }
  table.prices .spread { color: var(--faint); font-size: .78rem; }

  .why { font-size: .86rem; color: var(--dim); margin: -4px 0 10px; }
  .edge-line { margin-top: 9px; font-size: .88rem; color: var(--dim); }
  .edge-line.pos { color: var(--ink); }
  .edge-line.big { color: var(--pylon); font-weight: 600; }

  details.inj { margin-top: 9px; font-size: .86rem; }
  details.inj summary { cursor: pointer; color: var(--dim); list-style: none; }
  details.inj summary::-webkit-details-marker { display: none; }
  details.inj summary::before { content: "+"; display: inline-block; width: 14px; color: var(--pylon); font-weight: 700; }
  details.inj[open] summary::before { content: "\2212"; }
  .inj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin-top: 8px; }
  .inj-grid h4 { font: 600 1rem var(--cond); margin: 0 0 2px; color: var(--ink); }
  .inj-grid ul { margin: 0; padding: 0; list-style: none; }
  .inj-grid li { padding: 2px 0; color: var(--dim); }
  .inj-grid .pts { color: var(--faint); }

  .news { margin: 0; padding: 0; list-style: none; }
  .news li { padding: 10px 0 10px 12px; border-bottom: 1px solid var(--rule); border-left: 2px solid transparent; }
  .news li.flag { border-left-color: var(--pylon); }
  .news a { color: var(--ink); text-decoration: none; font-weight: 500; }
  .news a:hover { color: var(--turf); }
  .kalshi-link { margin-top: 8px; font-size: .85rem; }
  .kalshi-link a { color: var(--turf); text-decoration: none; font-weight: 600; }
  .kalshi-link a:hover { text-decoration: underline; }
  .combo-legs a { color: var(--turf); text-decoration: none; }
  .combo-legs a:hover { text-decoration: underline; }
  .bblist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .bblist li { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; }
  .bb-head { display: flex; align-items: baseline; gap: 8px; }
  .bb-rank { color: var(--faint); font-weight: 700; min-width: 1.4em; }
  .bb-bet { font-weight: 600; flex: 1; }
  .bb-edge { font-weight: 700; color: var(--dim); }
  .bb-edge.big { color: var(--turf); }
  .bb-sub { color: var(--dim); font-size: .87rem; margin-top: 3px; }
  .news .src { color: var(--faint); font-size: .8rem; margin-top: 2px; }
  .news .counted { font-size: .84rem; color: var(--pylon); font-weight: 600; margin-top: 2px; }

  .section-note { margin: 0 0 10px; font-size: .87rem; color: var(--dim); max-width: 68ch; }
  .combos { margin: 0; padding: 0; list-style: none; }
  .combos li { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
               padding: 12px 14px; }
  .combos li.miss { opacity: .65; }
  .combo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .combo-head .legs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
                      font: 700 1.3rem/1 var(--cond); }
  .combo-head .legs img { width: 22px; height: 22px; object-fit: contain; }
  .combo-head .legs .plus { color: var(--faint); font-weight: 500; }
  .combo-head .cp { font: 700 1.5rem/1 var(--cond); color: var(--turf); font-variant-numeric: tabular-nums; }
  .combo-legs { font-size: .85rem; color: var(--dim); margin-top: 5px; }
  .combo-meta { font-size: .86rem; margin-top: 4px; color: var(--dim); }
  .combo-meta .big { color: var(--pylon); font-weight: 600; }

  /* ---------- ticker ---------- */
  .ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 2.5rem;
            display: flex; align-items: center; gap: .7rem; background: #0F171C;
            border-top: 1px solid var(--rule); overflow: hidden; }
  .ticker .viewport { flex: 1; min-width: 0; overflow: hidden; }
  .ticker .label { flex: none; align-self: stretch; display: flex; align-items: center; gap: .45rem;
                   position: relative; z-index: 2;
                   padding: 0 .8rem; background: var(--surface-2);
                   font: 600 .95rem var(--cond); letter-spacing: .1em; text-transform: uppercase;
                   color: var(--pylon); border-right: 1px solid var(--rule); }
  .ticker .track { display: flex; white-space: nowrap; width: max-content;
                   will-change: transform; animation: slide var(--dur, 60s) linear infinite; }
  .ticker:hover .track { animation-play-state: paused; }
  .ticker:focus-within .track { animation-play-state: paused; }
  .ticker .run { display: inline-flex; align-items: center; padding-right: 2.5rem; }
  .ticker .item { font-size: .92rem; color: var(--ink); padding-right: 2.5rem;
                  text-decoration: none; }
  .ticker a.item:hover { color: var(--turf); text-decoration: underline; text-underline-offset: 3px; }
  .ticker a.item:hover .src { color: var(--turf); }
  .ticker .item .src { color: var(--faint); font-size: .82rem; margin-left: .45rem; }
  .ticker .item.flag::before { content: "\25CF"; color: var(--pylon); margin-right: .45rem; font-size: .7rem; }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .ticker .track { animation: none; }
    .ticker .run:nth-child(2) { display: none; }
    .ticker .track { overflow: hidden; }
  }
  .empty, .error { padding: 14px 0; color: var(--dim); }
  .error { color: var(--pylon); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  footer { margin-top: 2.2rem; padding-top: .9rem; border-top: 1px solid var(--rule);
           font-size: .83rem; color: var(--dim); }
  footer p { margin: 0 0 8px; max-width: 70ch; }
  .legend-caret { display: inline-block; width: 0; height: 0; border: 4px solid transparent;
                  border-bottom: 5px solid var(--dim); border-top: 0; margin: 0 3px; vertical-align: 1px; }

  /* Two columns on a narrower screen (iPad portrait): shrink the fixed columns
     so the team codes never run into the kickoff time. */
  @media (min-width: 561px) and (max-width: 980px) {
    .sb { grid-template-columns: 3.6rem 1fr auto 1fr 3.6rem; gap: .35rem; padding: .6rem .6rem; }
    .sb .wp { font-size: 1.3rem; }
    .sb .code { font-size: 1.1rem; }
    .sb img.logo { width: 1.55rem; height: 1.55rem; }
    .sb .mid { width: 4.9rem; }
    .sb .score { font-size: 1.4rem; }
    .sb .tip { font-size: .78rem; }
  }
  /* Wide but short (a TV at 1080p): tighten rows so a full slate fits without scrolling. */
  @media (min-width: 900px) and (max-height: 1150px) {
    .board { gap: .4rem; margin-top: .6rem; }
    .sb { padding: .5rem .7rem; }
    .board h3 { margin-top: .4rem; }
    main { padding-top: .7rem; }
  }
  @media (max-width: 860px) {
    #detail .cards, .combos { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .board { grid-template-columns: 1fr; }
    .board::before, .board::after { display: none; }
    .weeknav { justify-content: stretch; }
    .weeknav .wk { flex: 1; padding: .42rem .3rem; }
    .weeknav .wk.mid { min-width: 0; }
    .head-right { gap: .6rem; }
    .clock-time { font-size: 1.4rem; }
    .tab { padding: 8px 12px; font-size: 1rem; }
    .tab .badge { display: none; }
    h1 { font-size: 1.95rem; }
    .sb { grid-template-columns: 3.4rem 1fr auto 1fr 3.4rem; gap: .3rem; padding: .55rem .5rem; }
    .sb img.logo { width: 1.5rem; height: 1.5rem; }
    .sb .wp { font-size: 1.2rem; }
    .sb .code { font-size: 1.05rem; }
    .sb .score { font-size: 1.35rem; }
    .sb .mid { width: 4.9rem; }
    .sb .tip { font-size: .75rem; }
    .nick { display: none; }
    .abbr, .score-lg { font-size: 1.4rem; }
    .inj-grid { grid-template-columns: 1fr; }
  }

  /* ---------- conference filter ---------- */
  .confnav { display: flex; flex-wrap: wrap; gap: 5px; margin: .9rem 0 .2rem; }
  .confnav .cf { font: 600 .82rem var(--cond); letter-spacing: .05em; text-transform: uppercase;
                 background: var(--surface); color: var(--dim); border: 1px solid var(--rule);
                 border-radius: 999px; padding: .3rem .7rem; cursor: pointer; white-space: nowrap; }
  .confnav .cf:hover { color: var(--ink); background: var(--surface-2); }
  .confnav .cf[aria-pressed="true"] { color: #0B1014; background: var(--turf); border-color: var(--turf); }
  .confnav .cf .n { color: var(--faint); margin-left: .3rem; }
  .confnav .cf[aria-pressed="true"] .n { color: rgba(11,16,20,.6); }

  /* ---------- rank badge on team codes ---------- */
  .rk { color: var(--recall); font-weight: 700; margin-right: .2rem; }

  /* ---------- power ranking / qb report tables ---------- */
  .rank-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  @media (max-width: 860px) { .rank-wrap { grid-template-columns: 1fr; } }
  table.rank { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  table.rank caption { font: 600 1.15rem var(--cond); letter-spacing: .04em; text-transform: uppercase;
                       color: var(--dim); text-align: left; margin-bottom: 6px; }
  table.rank th, table.rank td { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: right; }
  table.rank th.l, table.rank td.l { text-align: left; }
  table.rank thead th { font: 600 .8rem var(--cond); letter-spacing: .05em; text-transform: uppercase;
                        color: var(--faint); }
  table.rank td.pos { color: var(--faint); width: 2.4rem; }
  table.rank td.tm { display: flex; align-items: center; gap: 8px; }
  table.rank td.tm img { width: 1.4rem; height: 1.4rem; object-fit: contain; flex: none; }
  table.rank td.tm .ap { color: var(--recall); font-weight: 700; font: 700 .8rem var(--cond); }
  table.rank .val { color: var(--turf); font-weight: 600; }
  table.rank .val.neg { color: #D9534F; }
  table.rank .conf { color: var(--faint); font-size: .8rem; }
  table.rank .unk { color: var(--faint); }

/* Shared shell and aliases for the daily-slate dashboards. */
:root { --panel:var(--surface); --panel2:var(--surface-2); --line:var(--rule);
 --dim2:var(--faint); --up:var(--turf); --down:#D9534F; --flat:var(--faint);
 --live:var(--pylon); --good:var(--turf); --bad:#D9534F; --accent:var(--turf); --pre:var(--recall); }
[hidden],.hide { display:none !important; }
button,select { font-family:inherit; }
button:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--pylon);outline-offset:3px; }
.tabs { overflow-x:auto; }
.tab { white-space:nowrap;flex:none; }
.sportnav { display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:0 0 1rem; }
.sportnav a { color:var(--dim);text-decoration:none;font:600 .82rem var(--cond);letter-spacing:.06em;text-transform:uppercase;padding:.35rem .55rem;border:1px solid transparent;border-radius:4px; }
.sportnav a:hover { color:var(--ink);background:var(--surface-2); }
.sportnav a[aria-current=page] { color:var(--turf);border-color:var(--rule);background:var(--surface); }
.sportnav .home-link { margin-right:auto;color:var(--ink); }
.daily header { position:static;background:none;align-items:flex-end;padding:0 0 12px; }
.daily .tabs { padding:0;gap:6px; }
.daily .tab { border-radius:0; }
.daily .tab.active { background:none;color:var(--turf);border-bottom-color:var(--turf); }
.daily .slates { border:0;padding:.7rem 0;margin:0;gap:.35rem; }
.daily .chip { border-radius:4px;background:var(--surface);font:600 .9rem var(--cond);letter-spacing:.04em;color:var(--dim); }
.daily .chip.active { background:var(--surface-2);color:var(--turf);border-color:var(--turf-fill); }
.daily .meta { color:var(--dim);text-align:left;font-size:.9rem; }
.daily .board { gap:.55rem 2.4rem; }
.daily .board h3 { grid-column:1/-1;font:600 1.15rem var(--cond);color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin:.7rem 0 .1rem; }
.daily .board h3 .count { color:var(--faint);margin-left:.5rem; }
.daily .game { border-radius:6px;padding:.75rem .8rem;background:var(--surface);border:1px solid var(--rule); }
.daily .game.live { box-shadow:none; }
.daily .game.win { border-color:rgba(88,174,118,.85);box-shadow:0 0 16px rgba(88,174,118,.3) inset; }
.daily .game.loss { border-color:rgba(217,83,79,.75);box-shadow:0 0 16px rgba(217,83,79,.25) inset; }
.daily .game.showpre { background:rgba(255,209,102,.09);border-color:rgba(255,209,102,.42); }
.daily .row { grid-template-columns:3.5rem minmax(0,1fr) auto minmax(0,1fr) 3.5rem;gap:.35rem; }
.daily .wp { font:700 1.5rem/1 var(--cond);color:var(--dim); }
.daily .wp.lead { color:var(--turf); }
.daily .game.showpre .wp { color:var(--recall); }
.daily .wp .arrow { border:0;width:auto;height:auto; }
.daily .tname { font:600 1.3rem/1 var(--cond);color:var(--ink); }
.daily .score { font:700 1.65rem/1 var(--cond); }
.daily .logo { width:1.85rem;height:1.85rem; }
.daily .scores { gap:.35rem; }
.daily .mid { min-width:5.6rem; }
.daily .game .sub { font-size:.72rem; }
.daily .bar .a { background:var(--slate); }
.daily .bar .h { background:var(--turf-fill); }
.daily .card { border-radius:6px; }
.daily .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.daily .card h3 { font:600 1.3rem var(--cond); }
.daily .combo { border-radius:6px; }
.daily .combo .legs { font:700 1.3rem var(--cond); }
.daily .record { padding:.7rem 1rem;background:var(--surface);border:1px solid var(--rule);border-radius:6px; }
.daily .rank { color:var(--recall); }
.daily .status.live { color:var(--dim); }
.daily .b,.daily .o { background:var(--surface-2);border-color:var(--rule); }
.daily .b.on { background:var(--recall);border-color:var(--recall); }
.daily .o.on { background:var(--pylon);border-color:var(--pylon); }
.daily .pregame-note { margin:.5rem 0;color:var(--faint);font-size:.8rem; }
.daily .section-note { margin:.8rem 0; }
.ui-error { color:var(--pylon);font-size:.85rem;margin:.5rem 0; }
@media(max-width:980px) { .daily .board { grid-template-columns:1fr;gap:.55rem; } .daily .board::before,.daily .board::after { display:none; } }
@media(max-width:680px) {
 .daily .cards { grid-template-columns:1fr; }
 .daily .row { grid-template-columns:2.8rem minmax(0,1fr) auto minmax(0,1fr) 2.8rem;gap:.2rem; }
 .daily .wp { font-size:1.2rem; } .daily .tname { font-size:1.05rem; }
 .daily .score { font-size:1.35rem; } .daily .logo { width:1.4rem;height:1.4rem; }
 .daily .side { gap:.2rem; } .daily .game { padding:.65rem .4rem; }
 .daily .mid { min-width:4.5rem; } .daily .status { white-space:normal;max-width:5rem; }
 .daily .sub { flex-wrap:wrap; } .daily h1 { font-size:1.85rem; }
 .daily header { gap:.7rem; } .daily .clock-time { font-size:1.4rem; }
 main { max-width:100%;padding-right:.7rem;padding-left:.7rem; }
}

/* Shared Follow ☆ button injected by site.js onto any card with data-fid. */
.has-follow { position:relative; }
.followstar {
  position:absolute; top:6px; right:6px; z-index:3;
  width:26px; height:26px; padding:0; line-height:24px; text-align:center;
  border:1px solid var(--rule,#26333A); border-radius:50%;
  background:rgba(11,16,20,.72); color:var(--dim,#8D9CA5);
  font-size:15px; cursor:pointer; transition:color .12s, border-color .12s, transform .12s;
}
.followstar:hover { color:#FFC24B; border-color:#FFC24B; transform:scale(1.08); }
.followstar.on { color:#FFC24B; border-color:#FFC24B; }
.followstar:disabled { opacity:.5; cursor:default; }
/* Compact scoreboard rows (.sb) already carry a status badge in the top-right
   corner, so put the follow star bottom-right there to avoid overlapping it,
   and shrink it to suit the tighter row. Detail cards keep the top-right star. */
.sb .followstar { top:auto; bottom:5px; right:5px; width:22px; height:22px; line-height:20px; font-size:13px; }