/* ==========================================================================
   GoodluckSports — score ticker
   --------------------------------------------------------------------------
   The horizontal strip of scores that sits directly under the header nav.
   Kept in its own file (rather than merged into style.css) so the whole
   feature can be added or removed by touching one <link> in index.html.
   Uses the same custom properties as the rest of the site, so it inherits
   the theme automatically.
   ========================================================================== */

.score-ticker-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

/* The scrolling rail. Scrollbar hidden — the arrow buttons drive it. */
.score-ticker {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.score-ticker::-webkit-scrollbar { display: none; }

/* One game. Fixed min-width so cards line up like ESPN's, regardless of
   how long the team codes are. */
.tk-game {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 7px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-game:hover { background: rgba(127, 127, 127, 0.08); }

/* "Final" / "Q3 4:22" / "7:05 PM" — small, muted, uppercase. */
.tk-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
  white-space: nowrap;
}
.tk-game.is-live .tk-status { color: var(--brand); }

.tk-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}

.tk-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 14px;
}

/* Team code — bold and uppercase, the way the ESPN strip reads. */
.tk-abbr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  flex: 1;
  white-space: nowrap;
}

.tk-score {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding-left: 8px;
}

/* Losing side of a finished game is dimmed, so the winner reads first. */
.tk-row.tk-lose .tk-abbr,
.tk-row.tk-lose .tk-score { opacity: .5; font-weight: 600; }

/* Scroll arrows */
.tk-arrow {
  flex: 0 0 26px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
}
.tk-arrow:hover { color: var(--brand); }
.tk-prev { border-left: 0; }
.tk-next { border-right: 0; }

/* Empty-state line shown in place of the rail when nothing is on today. */
.tk-empty {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-family: 'Inter', system-ui, sans-serif;
}

@media (max-width: 720px) {
  .tk-arrow { display: none; }
  .tk-game { min-width: 116px; padding: 7px 11px; }
}

/* ==========================================================================
   League label cells inside the ticker
   ========================================================================== */
.tk-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  background: rgba(127, 127, 127, .07);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Win-loss record shown where the score would be, before a game starts. */
.tk-score.tk-rec {
  font-size: 11px;
  font-weight: 600;
  opacity: .65;
}

/* ==========================================================================
   Date strip — scroll arrows to match the ticker's
   ========================================================================== */
.date-strip-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.date-strip-wrap .date-strip {
  flex: 1;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.date-strip-wrap .date-strip::-webkit-scrollbar { display: none; }

.ds-arrow {
  flex: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  align-self: center;
  padding: 6px 0;
}
.ds-arrow:hover { color: var(--brand); border-color: var(--brand); }
.ds-prev { margin-right: 6px; }
.ds-next { margin-left: 6px; }

@media (max-width: 720px) {
  .ds-arrow { display: none; }
}

/* ==========================================================================
   Typography bump — a touch bolder across the board, closer to the
   weight ESPN uses. Loaded after style.css so these win without editing it.
   ========================================================================== */
.m-name { font-weight: 700; }
.m-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.m-record-slot { font-size: 12px; font-weight: 600; opacity: .6; }
.league-header h3 { font-weight: 800; }
.sub-nav-tab { font-weight: 700; }
.status-filter-tab { font-weight: 700; }
.dp-day { font-weight: 800; }
.dp-weekday { font-weight: 700; }
/* Sidebar sport header: uppercase, bolder, and a touch larger so it stands
   clearly apart from the smaller league names beneath it. */
.sidebar-group-title {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
}
/* Space between one sport group and the next, and a little air between the
   league rows so they don't stack tight. */
.sidebar-group { margin-bottom: 20px; }
.sidebar-list { display: flex; flex-direction: column; gap: 3px; }
.sidebar-league-name { font-weight: 500; font-size: 11.5px; }
/* Solo rows (NFL/NBA/Hockey/Baseball) have no separate header, so they ARE
   the sport header — keep them at the header size, not the small league size. */
.sidebar-solo-name { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; }
.sidebar-league-link { color: var(--text); display: flex; align-items: center; gap: 8px; padding: 3px 2px; }
.sidebar-league-link:hover .sidebar-league-name { color: var(--brand); }
.sidebar-league-row { padding: 0 2px; }
.league-icon-prefix { flex: 0 0 auto; display: inline-flex; align-items: center; }
.sidebar-title { font-weight: 800; }
.standings-table th { font-weight: 800; }
.st-team { font-weight: 700; }
.leader-name { font-weight: 700; }
.page-title { font-weight: 800; }

/* ==========================================================================
   Scoreboard heading — league mark + "<League> Scoreboard"
   ========================================================================== */
.sb-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.sb-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.sb-emoji {
  font-size: 22px;
  line-height: 1;
}

/* The spelled-out date under the date strip. */
.date-line {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 12px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
  .sb-logo { width: 24px; height: 24px; }
  .sb-emoji { font-size: 19px; }
  .date-line { font-size: 14px; }
}

/* ==========================================================================
   Card-style ticker (TICKER_STYLE = 'cards' in js/config.js)
   --------------------------------------------------------------------------
   Larger scorecards modelled on the ESPN/DraftKings strip: team-colour bar,
   logos with abbreviations beneath, the relevant number alongside each, and
   the status along the bottom. Sized to match that layout (~200x104) while
   using this site's own palette so it doesn't clash with the light theme.
   Setting TICKER_STYLE back to 'compact' ignores every rule below.
   ========================================================================== */
.score-ticker-wrap.is-cards { background: var(--panel); }

.tkc-game {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  padding: 0 0 8px;
  margin: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkc-game:hover { border-color: var(--brand); }

/* Two-tone team colour bar across the top. */
.tkc-bar { display: flex; height: 4px; }
.tkc-bar-half { flex: 1 1 50%; }

/* Broadcast row — right-aligned, like the network tag in the reference. */
.tkc-top {
  display: flex;
  justify-content: flex-end;
  min-height: 13px;
  padding: 4px 10px 0;
}
.tkc-cast {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Logos + the number beside each. */
.tkc-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 6px;
}
.tkc-team { display: flex; align-items: center; gap: 7px; }
.tkc-team.tkc-right { flex-direction: row-reverse; }

.tkc-logo { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }

.tkc-val {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* Abbreviations sit under the logos, outer-aligned. */
.tkc-abbrs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
/* Each name gets its own half of the card and truncates with an ellipsis
   rather than running into the other one — tennis surnames (BUREL,
   IBRAGIMOV) and long city names are full words, not 3-letter codes. */
.tkc-abbrs > span {
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tkc-abbrs > span:last-child { text-align: right; }
.tkc-abbrs .tkc-lose { opacity: .45; font-weight: 700; }

/* Status line along the bottom, separated like the odds row it replaces. */
.tkc-foot {
  margin-top: 4px;
  padding: 6px 12px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tkc-game.is-live .tkc-foot { color: var(--brand); }

/* League label cell, grown to match the taller cards. */
.tk-label.tk-label-tall { padding: 0 14px; }

@media (max-width: 720px) {
  .tkc-game { width: 172px; margin: 6px 4px; }
  .tkc-logo { width: 22px; height: 22px; flex: 0 0 22px; }
}

/* ==========================================================================
   Live-baseball bases diamond (card ticker)
   ========================================================================== */
.tkc-diamond-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 0 2px;
}
.tkc-diamond { width: 32px; height: 24px; display: block; }
.tkc-count {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Roster tab — team picker + player grid
   ========================================================================== */
.roster-picker-head,
.roster-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  margin: 4px 0 14px;
}
.roster-title { display: flex; align-items: center; gap: 8px; }
.roster-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(127,127,127,.12);
  border-radius: 999px;
  padding: 1px 8px;
}

.roster-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.roster-team-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.roster-team-card:hover { border-color: var(--brand); }
.roster-team-logo { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
.roster-team-info { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.roster-team-name { line-height: 1.2; font-weight: 700; }
.roster-team-sub { font-size: 11px; color: var(--muted); line-height: 1.2; margin-top: 1px; }

.roster-back {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 6px;
}
.roster-back:hover { text-decoration: underline; }

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.roster-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-family: 'Inter', system-ui, sans-serif;
}
/* Unified player avatar — used by Roster, Stats, Injuries, Box score. */
.p-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 44px;
  background: rgba(127,127,127,.14);
  display: inline-block;
  vertical-align: middle;
}
.p-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: var(--muted);
  font-family: 'Inter', system-ui, sans-serif;
}
/* Small variant for table rows / leader lists / injuries. */
.p-avatar.pa-sm { width: 28px; height: 28px; flex: 0 0 28px; }
.p-avatar.pa-sm.p-initials { font-size: 11px; }

/* Player name + avatar together inside a box-score table cell. */
.p-name-with-avatar { display: inline-flex; align-items: center; gap: 8px; }

/* Roster title team logo. */
.roster-title-logo { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 4px; }

/* Leader row avatar column + header spacer. */
.leader-row .p-avatar { margin: 0 2px; }
.leader-avatar-head { width: 28px; flex: 0 0 28px; }

/* Injury row avatar. */
.injury-row .p-avatar { margin-right: 10px; }
.roster-info { display: flex; flex-direction: column; min-width: 0; }
.roster-name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.roster-meta { font-size: 12px; font-weight: 600; color: var(--brand); }
.roster-detail {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure rows that now include an avatar align it centered with the text.
   These are additive; they don't fight style.css's existing layout. */
.injury-row { display: flex; align-items: center; }
.injury-row .injury-main { display: flex; flex-direction: column; }
.leader-row { display: flex; align-items: center; }
.leader-row .leader-name { flex: 1; }

/* Tennis player photo in match rows — round like other avatars. */
.m-player-photo {
  border-radius: 50%;
  object-fit: cover;
  background: rgba(127,127,127,.14);
}

/* Clickable team name in standings (jumps to that team's roster). */
.st-team-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.st-team-link:hover { color: var(--brand); text-decoration: underline; }

/* Category header row inside a grouped team-stats table (MLB Batting/
   Pitching/Fielding). */
.stat-group-row td {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 10px;
  text-align: center;
}

/* ==========================================================================
   Player profile popup + clickable names
   ========================================================================== */
.player-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dotted var(--brand);
}
.player-link:hover { color: var(--brand); }

.pp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Inter', system-ui, sans-serif;
}
.pp-panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.pp-close {
  position: absolute;
  top: 12px; right: 14px;
  border: 0; background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.pp-close:hover { color: var(--text); }
.pp-loading { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; }

.pp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pp-head .p-avatar { width: 60px; height: 60px; flex: 0 0 60px; }
.pp-head .p-initials { font-size: 20px; }
.pp-id { display: flex; flex-direction: column; min-width: 0; }
.pp-name { font-size: 19px; font-weight: 800; line-height: 1.2; }
.pp-sub { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.pp-team-logo { width: 18px; height: 18px; object-fit: contain; }

.pp-avgs-label {
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.pp-avgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pp-stat {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(127,127,127,.08);
  border-radius: 9px; padding: 10px 4px;
}
.pp-stat-val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-stat-label { font-size: 10px; font-weight: 700; color: var(--muted); margin-top: 2px; letter-spacing: .03em; }

/* ==========================================================================
   Collapsible sidebar dropdowns (multi-league sports)
   ========================================================================== */
.sidebar-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 6px 4px;
  text-align: left;
  font-weight: 700;
}
.sidebar-group-head:hover { color: var(--brand); }
.sidebar-group-caret {
  color: var(--muted);
  font-size: 12px;
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.sidebar-group-head.open .sidebar-group-caret { transform: rotate(180deg); color: var(--brand); }
/* Collapsed = hidden; expanding removes this class. */
.sidebar-list-collapsed { display: none; }

/* Back-to-home button on the page title row. */
.page-back {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
  margin-bottom: 4px;
  display: inline-block;
}
.page-back:hover { text-decoration: underline; }

/* ==========================================================================
   Breaking News column (home view) — placeholder
   --------------------------------------------------------------------------
   Sits between the sidebar and the live scores on the home feed. Currently
   a "coming soon" row per league; the feed wiring comes later.
   ========================================================================== */
/* ==========================================================================
   Breaking News RIGHT RAIL (Step 2) — was a left column
   --------------------------------------------------------------------------
   News sits on the RIGHT, pinned near the top (sticky) under the top row,
   like the ad rail in the reference. Scores take the flexible middle.
   To revert to the left column: set order:-1 back on .breaking-news-col and
   remove the sticky/order rules.
   ========================================================================== */
.home-with-news {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.home-with-news .live-feed-wrap { flex: 1 1 auto; min-width: 0; }

.breaking-news-col {
  flex: 0 0 250px;
  order: 2;               /* keep it on the right regardless of DOM order */
  position: sticky;
  top: 8px;
  /* Lift the rail up to sit level with the top of the sidebar. The content
     above it (ticker + topbar + sub-nav) is roughly this tall; adjust this
     ONE number if it sits too high or too low. */
  margin-top: -150px;
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  z-index: 2;             /* sit above any content it now overlaps */
}

/* Home view only: the page-title bar and sub-nav are near-empty on the home
   feed, so collapse the space they reserve — pulls the scores up close to
   the ticker and lets the news rail reach the top. Scoped to when the news
   rail exists (home) via .home-with-news being present in scores-content. */
#scores-content:has(.home-with-news) {
  margin-top: 0;
}
.main-col:has(.home-with-news) .scores-topbar,
.main-col:has(.home-with-news) #sub-nav-slot {
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* Stack the news column BELOW the scores on narrow screens. */
@media (max-width: 860px) {
  .home-with-news { flex-direction: column; }
  .breaking-news-col { order: 2; position: static; flex: 1 1 auto; width: 100%; }
}
/* === end breaking news right rail block === */
.bn-header {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: #1e2329;
  padding: 12px 15px;
}
.bn-list { display: flex; flex-direction: column; }

/* Per-sport section: darker, bolder header on a tinted bar so the sections
   read clearly apart, then its headlines. */
.bn-section { border-top: 1px solid var(--line); }
.bn-section:first-child { border-top: 0; }
.bn-sport-head {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1a1f27;
  background: rgba(30,35,41,.06);
  padding: 8px 15px;
  border-bottom: 1px solid var(--line);
}
.bn-items { display: flex; flex-direction: column; }

/* One headline row — thumbnail (if any) + headline + source·date, links out. */
.bn-item {
  display: flex;
  gap: 10px;
  padding: 9px 15px 10px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  border-bottom: 1px solid rgba(127,127,127,.08);
}
.bn-item:last-child { border-bottom: 0; }
.bn-item:hover { background: rgba(127,127,127,.06); }
.bn-thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: cover;
  border-radius: 7px;
  background: rgba(127,127,127,.12);
}
.bn-item-body { display: flex; flex-direction: column; min-width: 0; }
.bn-headline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1f27;
  /* clamp to 3 lines so long headlines don't blow out the rail */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bn-item:hover .bn-headline { color: var(--brand); }
.bn-meta {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
  font-family: 'Inter', system-ui, sans-serif;
}
.bn-loading, .bn-empty {
  font-size: 11px;
  color: var(--muted);
  padding: 8px 15px 11px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   === TICKER BETWEEN RAILS (Step 3) — delete this block to revert ===
   --------------------------------------------------------------------------
   The ticker slot now lives at the top of .main-col. Reserve space on the
   right equal to the news rail (250px + 16px gap) so the ticker's right edge
   lines up with the middle column and it scrolls between the two rails.
   ========================================================================== */
#ticker-slot {
  margin-right: calc(250px + 16px);
  margin-bottom: 12px;
}
@media (max-width: 860px) {
  /* News rail drops below on narrow screens, so the ticker uses full width. */
  #ticker-slot { margin-right: 0; }
}
/* === end ticker between rails block === */
.page-wrap,
.page-wrap-sidebar {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}

/* Header + ticker align to the same gutters as the body. */
.nav-inner,
.footer-inner {
  max-width: none;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
  box-sizing: border-box;
}
.score-ticker {
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

/* Let the scores area take the freed space next to the sidebar. */
.main-col { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   === STACKED HEADER (Step 1) — delete this block to revert to one row ===
   --------------------------------------------------------------------------
   Logo on its own row at the top; Favorites + league tabs on the row below,
   both left-aligned to the page gutter (LiveSport-style).
   ========================================================================== */
.nav-inner-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding-top: 0;
}
.nav-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  margin-bottom: 2px;
}
.nav-inner-stacked .main-nav {
  margin: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
/* Blank spacer row above the nav — reserved banner-ad area, like the
   reference. The logo sits below this space, not jammed to the top edge. */
#site-header .nav-inner-stacked { padding-top: 22px; }
/* === end stacked header block === */

/* ==========================================================================
   === SMALLER SCORE CARDS — delete this block to revert to the larger size ===
   Narrower cards + tighter spacing so more games fit across the ticker.
   ========================================================================== */
.tkc-game {
  width: 138px;
  margin: 5px 3px;
  gap: 1px;
}
.tkc-logo { width: 19px; height: 19px; flex: 0 0 19px; }
.tkc-abbrs { font-size: 11px; padding: 0 9px; }
.tkc-val { font-size: 10px; }
.tkc-foot { font-size: 8px; padding-top: 4px; }
.tkc-top { min-height: 10px; padding: 3px 9px 0; }
.tkc-cast { font-size: 8px; }
.tkc-body { padding: 0 9px; }
@media (max-width: 720px) {
  .tkc-game { width: 126px; }
}
/* === end smaller score cards block === */

/* ==========================================================================
   === DARK LEAGUE BARS (Step 5) — delete this block to revert ===
   Each league's games in the home feed start with a dark bar carrying the
   league name (like the SOCCER / BASEBALL headers in the reference).
   ========================================================================== */
.league-block .league-header {
  background: #1e2329;
  border-radius: 8px;
  padding: 9px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Space between one league's block and the next so they don't stack tight. */
.league-block { margin-bottom: 22px; }
.league-block .league-header h3 {
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
/* Freshness note sits on the dark bar too. Keep "Live" bright/green so it
   still reads as a live indicator. */
.league-block .league-header .freshness {
  color: var(--brand);
}
/* === end dark league bars block === */

/* ==========================================================================
   === MIDDLE FEED ROWS (reference match) — delete this block to revert ===
   Score sits close to the team name (not pushed to the far edge); smaller
   uniform fonts; baseball bat/ball role icon on the far right.
   ========================================================================== */
.m-side {
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-logo { width: 18px; height: 18px; flex: 0 0 18px; }
.m-name {
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 150px;     /* fixed-width name column so the score sits right
                          after it AND every score lines up vertically */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Bat/ball role icon between name and score, fixed slot so scores align
   whether or not an icon is present. */
.m-role {
  font-size: 13px;
  flex: 0 0 16px;
  text-align: center;
  opacity: .85;
}
.m-score {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;      /* sits right after the name/icon, not far edge */
  text-align: left;
  min-width: 20px;
}
.m-side.win .m-score { color: var(--brand); }
/* Tennis set scores sit right after the (fixed-width) name, like team
   scores — each set number in its own small cell. */
.m-sets { display: flex; gap: 6px; flex: 0 0 auto; }
.m-sets .set {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 12px;
  text-align: center;
}
.m-sets .set-win { color: var(--brand); }
/* Status label (Final / inning) a touch smaller and uniform. */
.m-status { font-size: 12px; }
.m-live, .m-final, .m-time { font-size: 12px; }
/* Records on upcoming games (e.g. "41-64") — keep on one line, not wrapped,
   so they don't overlap. */
.m-record-slot {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 44px;
}
/* Live baseball bases diamond + B/S/O at the right end of the row. Pushed
   to the far right so it sits past the scores, before the chevron. */
.m-diamond {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 12px;
  flex: 0 0 auto;
}
.m-diamond .tkc-diamond-wrap { flex-direction: row; align-items: center; gap: 6px; }
.m-diamond .tkc-count { font-size: 10px; white-space: nowrap; }
/* === end middle feed rows block === */

/* ==========================================================================
   === FOOTER SPORTS GRID + BACK-TO-TOP — delete this block to revert ===
   Footer: a column per sport (bold header + clickable leagues beneath),
   matching the reference's font sizes, tone, and spacing. Plus a charcoal
   back-to-top button, bottom-right.
   ========================================================================== */
#site-footer { margin-top: 40px; border-top: 1px solid var(--line); }
/* Force a full-width block layout — style.css may put .footer-inner in a
   narrow flex row, which squeezes the grid into one vertical column. */
#site-footer .footer-inner {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  padding: 34px clamp(16px, 3vw, 40px) 28px !important;
}
#site-footer .footer-cols {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
  width: 100%;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #1f2733;
  text-decoration: none;
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.footer-col-title:hover { color: var(--brand); }
.footer-league {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: #47536b;
  text-decoration: none;
  padding: 5px 0;
  line-height: 1.3;
}
.footer-league:hover { color: var(--brand); }
.footer-tagline {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  font-family: 'Inter', system-ui, sans-serif;
}

/* Back-to-top button — charcoal, bottom-right, arrow + "Top". */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 46px;
  padding: 7px 0 5px;
  background: #1e2329;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  font-family: 'Inter', system-ui, sans-serif;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: #2b333c; }
.btt-arrow { font-size: 15px; line-height: 1; font-weight: 700; }
.btt-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* === end footer sports grid + back-to-top block === */

/* ==========================================================================
   === LEGAL PAGES (terms.html / privacy.html) ===
   Readable long-form text column for the policy pages.
   ========================================================================== */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px clamp(16px, 3vw, 40px) 60px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2a3140;
  line-height: 1.6;
}
.legal-wrap h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; color: #1f2733; }
.legal-updated { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.legal-wrap h2 {
  font-size: 18px;
  font-weight: 800;
  color: #1f2733;
  margin: 30px 0 10px;
}
.legal-wrap p { margin: 0 0 14px; font-size: 15px; }
.legal-wrap ul { margin: 0 0 14px; padding-left: 22px; }
.legal-wrap li { margin-bottom: 6px; font-size: 15px; }
.legal-wrap a { color: var(--brand); }
.legal-intro { font-size: 15.5px; color: #47536b; margin-bottom: 8px; }
/* Footnote legal links next to the copyright line. */
.footer-legal-links { margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal-links a { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.footer-legal-links a:hover { color: var(--brand); }

/* Contact form. */
.contact-form { max-width: 560px; margin-top: 24px; }
.contact-hidden { display: none; }
.contact-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.contact-field label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #1f2733;
  margin-bottom: 6px;
}
.contact-field input,
.contact-field textarea {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #2a3140;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
}
.contact-field input:focus,
.contact-field textarea:focus { outline: none; border-color: var(--brand); }
.contact-field textarea { resize: vertical; }
.contact-submit-row { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.contact-submit {
  align-self: flex-start;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: 8px;
  padding: 11px 24px;
  cursor: pointer;
}
.contact-submit:hover { filter: brightness(1.05); }
.contact-privacy-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
}
.contact-privacy-note a { color: var(--brand); }
/* Contact thank-you page actions. */
.contact-thanks-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.contact-thanks-actions .contact-submit {
  text-decoration: none;
  display: inline-block;
  color: #fff !important;   /* the <a> would otherwise inherit the link color, hiding the label */
}
.contact-thanks-secondary { font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: var(--muted); }
.contact-thanks-secondary:hover { color: var(--brand); }
/* === end legal pages block === */

/* ==========================================================================
   === TEAM SCHEDULE / FIXTURES — delete this block to revert ===
   Full-season schedule rows: date, opponent matchup, score/time, fav star.
   ========================================================================== */
.sch-section-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #1f2733;
  margin: 22px 0 8px;
}
.sch-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
}
.sch-row:last-child { border-bottom: 0; }
.sch-row:hover { background: rgba(127,127,127,.05); }
.sch-row.is-live { background: rgba(0,180,90,.06); }
.sch-date { flex: 0 0 64px; display: flex; flex-direction: column; line-height: 1.15; }
.sch-date-day { font-size: 12.5px; font-weight: 700; color: #1f2733; }
.sch-date-ft { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.sch-date-live { font-size: 10px; color: var(--brand); font-weight: 700; text-transform: uppercase; }
.sch-match { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sch-vsat { flex: 0 0 auto; font-size: 11px; color: var(--muted); width: 18px; }
.sch-opp-logo { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
.sch-opp-name { font-size: 13.5px; font-weight: 600; color: #1f2733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-result { flex: 0 0 auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #1f2733; min-width: 46px; text-align: right; }
.sch-result.sch-win { color: var(--brand); }
.sch-result.sch-loss { color: var(--muted); }
.sch-fav {
  flex: 0 0 auto;
  border: 0; background: transparent; cursor: pointer;
  font-size: 16px; color: rgba(127,127,127,.4);
  padding: 2px 4px; line-height: 1;
}
.sch-fav:hover { color: var(--brand); }
.sch-fav.active { color: var(--brand); }
/* === end team schedule block === */