/* ════════════════════════════════════════════════════════════════════
   TYPE + TOKENS

   Self-hosted on purpose. Pulling these from Google's CDN would send every
   visitor's IP to Google before the consent banner has been answered, which
   is the exact arrangement EU courts have ruled against. These ship from our
   own origin instead.

   Three roles, one superfamily so they stay related:
     Condensed — headings and column labels. Reads like a roster sheet.
     Sans      — running text and team names.
     Mono      — every price and stat. Fixed advance width is not decoration
                 here: this whole product is scanning columns of decimals for
                 the one that differs, and proportional digits make 1.85 and
                 2.10 different lengths.
   ════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Plex Sans';
  src: url("../fonts/ibm-plex-sans-latin-400-normal.0ceb759015a6.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url("../fonts/ibm-plex-sans-latin-600-normal.e78568807d10.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Condensed';
  src: url("../fonts/ibm-plex-sans-condensed-latin-600-normal.9a955d233e3f.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Condensed';
  src: url("../fonts/ibm-plex-sans-condensed-latin-700-normal.bc65f4c9d8ef.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url("../fonts/ibm-plex-mono-latin-400-normal.4cc7b4398540.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url("../fonts/ibm-plex-mono-latin-600-normal.ed616eb04c5f.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Rink ice, not paper. Real ice photographs cold and faintly cyan — the
     warm cream this could have been would read as an essay, and this is an
     instrument. */
  --ice:       #EFF3F5;
  --sheet:     #FFFFFF;
  --frost:     #DCE4E9;
  --board:     #101820;
  --twill:     #6B7885;

  /* The two rink colours do the work of meaning, not decoration:
       blue line — a settled fact. Standings, leaders, finished games.
       goal red  — live money. Anything whose number can still move.
     Learn it once and you can tell at a glance whether a number is in play. */
  --blue-line: #1B4F8C;
  --goal-red:  #C8102E;

  /* Reserved for a positive delta. Deliberately not red-vs-green: red already
     means "live" here, and a negative goal difference is a fact, not an alarm. */
  --gain:      #0F7A4D;

  --font-display: 'Plex Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-data:    'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Names for the grey ramp the older stylesheets already use ad hoc. */
  --ink-strong: #2a2a2a;
  --ink:        #4a4a4a;
  --hairline:   #e3e3e3;

  /* The one interactive accent. Everything that used to be the loose
     #007BFF / #0ea5a4 / #FF5733 trio routes through here, so a rebrand
     is one line. */
  --accent: var(--blue-line);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-s: 4px;
  --radius-m: 8px;

  --fs-xs: 11px;
  --fs-s:  12.5px;
  --fs-m:  14px;
  --fs-l:  16px;
  --fs-xl: 20px;

  --page-max:      1180px;
  --page-max-wide: 1400px;
}

/* ---------------------------------- */
/* Global Body & Basic Styling        */
/* ---------------------------------- */
body {
  font-family: var(--font-body);
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  /* Sticky footer: body fills at least the viewport, the main content
     grows to absorb leftover height, and the footer rides the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------- */
/* Player Banner & Info               */
/* ---------------------------------- */
/* --- Player & Team Banner Container --- */






.player-banner {
  display: flex;
  align-items: center;            /* Vertical alignment: center */
  justify-content: space-around; 
  background-color: #fff;
  color: #000;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  max-width: 700px;             /* Adjust as needed */
  margin: 20px auto;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* --- LEFT SECTION: Image + Player Details --- */
.left-section {
  display: flex;
  align-items: center;
  gap: 16px; /* Space between image & details */
}

/* Player image */
.player-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #ddd;
}

/* Player details container */
.player-details {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  min-width: 220px;
}

/* Player name */
.player-name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* Meta line (e.g., #29 • Center • Colorado Avalanche) */
.meta {
  font-size: 16px;
  color: #555;
  margin: 4px 0 8px 0;
}

.player-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 8px 14px;
  margin: 8px 0 0;
}

.player-info-grid div {
  min-width: 0;
}

.player-info-grid dt {
  color: #666;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.player-info-grid dd {
  color: #222;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* --- RIGHT SECTION: Stats Box --- */
.right-section {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ccc;
  min-width: 300px; /* Ensures some consistent width */
  max-width: 400px; /* Adjust as desired */
}

/* Stats header — slim strip, condensed caps */
.stats-header {
  background-color: #555;
  color: #fff;
  padding: 4px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* Stats row container */
.stats-row {
  display: flex;
  justify-content: space-around;
  padding: 12px;
}

/* Each column (G, A, PTS, +/-) */
.stats-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stat value (e.g. 29) */
.stats-value {
  font-size: 20px;
  font-weight: 700;
}

/* Stat label (e.g. G, A, PTS, +/-) */
.stats-label {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

/* --- Banner row: the player banner and the radar card side by side,
   top-aligned, centred as one unit. --- */
/* Mirrors the 70/30 split of .player-stats below, so the radar card sits
   exactly above the season-history column. */
.player-banner-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 20px 0;
}
/* Auto margins centre the banner in the space left of the radar card —
   i.e. over the splits column below it — and align-self centres it on the
   row's height (the radar card is the taller sibling). */
.player-banner-row .player-banner {
  margin: 0 auto;
  align-self: center;
  flex: 0 1 auto;
  max-width: 700px;
  min-width: 0;
  padding: 12px 20px;
}
.player-banner-row .player-image {
  width: 96px;
  height: 96px;
}

/* --- Percentile radar card (sibling of the banner, same frame) --- */
.radar-card {
  flex: 0 1 30%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background-color: var(--sheet);
  color: #000;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}
.radar-card .radar-canvas-wrap { flex: 1; }

.radar-span-pill {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 8px 0;
}

.radar-span-pill__btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border: 1px solid var(--frost);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--twill);
  cursor: pointer;
  text-decoration: none;
}

.radar-span-pill__btn.is-active {
  background: var(--board);
  border-color: var(--board);
  color: #fff;
}

.radar-span-pill__btn.is-locked {
  color: var(--twill);
  background: var(--ice);
  border-style: dashed;
}

.radar-span-pill__btn.is-locked:hover {
  color: var(--blue-line);
  border-color: var(--blue-line);
}

.radar-canvas-wrap {
  position: relative;
  height: 260px;
  padding: 4px 8px;
}

.radar-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--twill);
}

/* display:flex would otherwise defeat the hidden attribute. */
.radar-empty[hidden] {
  display: none;
}

/* Only visible while two spans are plotted. The baseline swatch is a filled
   block and this season's is a rule, because that is exactly how the two read
   on the chart. */
.radar-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 4px 8px 0;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--twill);
}
/* display:flex would otherwise defeat the hidden attribute. */
.radar-legend[hidden] { display: none; }

.radar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.radar-legend__item--base i {
  width: 13px;
  height: 8px;
  border: 1px dashed #AFBECB;
  background-color: rgba(107, 120, 133, 0.16);
}
.radar-legend__item--now i {
  width: 13px;
  height: 0;
  border-top: 2px solid var(--blue-line);
}

/* Names the ranking pool. Always on: a percentile with no stated comparison
   group is the kind of number that gets quoted back wrong. */
.radar-pool {
  margin: 0;
  padding: 4px 12px 0;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--twill);
}

.radar-note {
  margin: 0;
  padding: 0 12px 8px;
  font-size: 11px;
  color: var(--twill);
  text-align: center;
}



/* ---------------------------------- */
/* team banner                         */
/* ---------------------------------- */
.team-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f3f5f8 100%);
  color: #111;
  padding: 20px 28px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  max-width: 700px;
  margin: 24px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.team-banner .left-section {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.team-image {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}

.team-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.team-info .team-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111;
}

.team-info .meta {
  margin: 4px 0 0;
  font-size: 14px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.team-banner-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  min-width: 140px;
  flex-shrink: 0;
}

.team-banner-right .season-label {
  font-size: 11px;
  font-weight: 700;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.team-banner-right .record-value {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
}

.team-banner-right .record-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .team-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
    margin: 18px 0;
    max-width: none;
  }

  .team-banner .left-section {
    justify-content: center;
    gap: 14px;
  }

  .team-image {
    width: 72px;
    height: 72px;
  }

  .team-info .team-name {
    font-size: 21px;
  }

  .team-banner-right {
    width: 100%;
    min-width: 0;
  }
}



/* ---------------------------------- */
/* Page wrap — keeps content aligned  */
/* with the navbar at wide viewports. */
/* ---------------------------------- */
.page-wrap {
  max-width: var(--page-max-wide);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  /* Grow to push the footer down when content is short; full max-width
     still applies because the body centres this via margin auto. */
  flex: 1 0 auto;
  width: 100%;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 10px;
  z-index: 2000;
  transform: translateY(-140%);
  background: #111827;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------- */
/* Main Navbar  (datagolf-inspired)   */
/* ---------------------------------- */
.navbar {
  background-color: #f8f8f8;
  border-bottom: 1px solid var(--hairline);
}

.nav-container {
  max-width: var(--page-max-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 10px 20px;
  gap: 24px;
  min-width: 0;
}
.nav-left { min-width: 0; flex-shrink: 1; }

.nav-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ── Burger button (mobile only) ───────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  padding: 0 8px;
  margin-left: auto;
  background: transparent;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.nav-burger:hover { border-color: #888; background-color: #f5f5f5; }
.nav-burger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--ink-strong);
  border-radius: 1px;
  transition: transform 0.18s ease, opacity 0.18s ease;
  transform-origin: center;
}
.nav-burger.is-open .nav-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open .nav-burger__bar:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.logo a {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-strong);
  text-decoration: none;
}
.logo a:hover { color: #000; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links a {
  margin: 0;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s, background-color 0.15s;
}
.nav-links a:hover {
  color: var(--ink-strong);
  background-color: #ececec;
}

/* ---------------------------------- */
/* Secondary Navbar (NHL subnav)      */
/* ---------------------------------- */
.secondary-navbar {
  background-color: #333;
  border-bottom: 1px solid var(--ink-strong);
}

.secondary-navbar .secondary-nav-links,
.secondary-navbar .secondary-nav-container {
  max-width: var(--page-max-wide);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px;
}

.secondary-navbar .nav-links {
  gap: 0;
}
.secondary-navbar .nav-links a {
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1;
  color: #ccc;
  text-decoration: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.secondary-navbar .nav-links a:hover {
  color: #fff;
  background-color: transparent;
  border-bottom-color: var(--goal-red);
}

/* ---------------------------------- */
/* Search & Login                     */
/* ---------------------------------- */
.search-login {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
}

.search-login input[type="search"] {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  min-width: 0;
  width: 140px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, width 0.18s;
}
.search-login input[type="search"]:focus {
  width: 180px;
  border-color: #b8b8b8;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

.search-login a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background-color: transparent;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #d6d6d6;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.search-login a:hover {
  background-color: #ececec;
  border-color: #c8c8c8;
  color: var(--ink-strong);
}

/* ---------------------------------- */
/* Main Content Area                  */
/* ---------------------------------- */
main {
  max-width: var(--page-max-wide); /* Maximum width of the content area */
  margin: 0 auto;    /* Centers the content area */
  padding: 20px;     /* Adds spacing around the content */
  background-color: #fff; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  min-height: 500px;
}

main section {
  margin-bottom: 40px; /* Space between sections */
}

/* Headings styling within the main tag for clear hierarchy */
main h1,
main h2,
main h3,
main h4 {
  color: #333; 
  margin-top: 25; /* Remove top margin for headings */
}

/* Paragraphs within the main tag for better readability */
main p {
  line-height: 1.6;
  color: #666;
  margin-bottom: 1em; 
}
/* NHL overview page wrapper (uses shared .match-grid / .match-card) */
.nhl-overview {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px 20px 60px;
  font-family: var(--font-body);
  color: #333;
}
.nhl-overview__head {
  margin-bottom: 20px;
}
.nhl-overview__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 6px;
}
.nhl-overview__lede {
  color: #555;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  max-width: 720px;
}
.nhl-overview__empty {
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 22px;
  color: #777;
  font-size: 14px;
  text-align: center;
}

/* Day-grouped sections on the overview */
.nhl-overview__day { margin-top: 28px; }
.nhl-overview__day:first-of-type { margin-top: 12px; }
.nhl-overview__dayhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.nhl-overview__daylabel {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nhl-overview__daycount {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Overview page: full-width "board" cards stacked one per row, with a bit
   more breathing room than the compact 2-up grid on the home page. */
.nhl-overview .match-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.nhl-overview .match-card {
  padding: 18px 22px 16px;
}
.nhl-overview .match-card__body {
  grid-template-columns: 1fr 60px 1fr;
  gap: 16px;
}
.nhl-overview .match-card__logo {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}
.nhl-overview .match-card__acro {
  font-size: 17px;
}
.nhl-overview .match-card__odds {
  font-size: 20px;
  min-width: 72px;
  padding: 8px 12px;
}
.nhl-overview .match-card__vs {
  font-size: 14px;
}
@media (max-width: 480px) {
  .nhl-overview .match-card__name { display: block; }
  .nhl-overview .match-card__logo { width: 36px; height: 36px; flex-basis: 36px; }
  .nhl-overview .match-card__odds { font-size: 17px; min-width: 56px; padding: 6px 10px; }
}

/* Kept: .team-logo is still used by the player-stats sidebar. */
.team-logo {
  width: 50px;
  height: auto;
}


/* Styling lists within the main content */
main ul,
main ol {
  padding-left: 20px;
}

/* Link styling within the main content */
main a {
  color: var(--ink);  
  text-decoration: none;
}
.offer {
  display: flex; 
  align-items: center; 
  justify-content: flex-start;
  border: 1px solid #ccc;
  margin: 15px;
  padding: 10px;  
  background: #f9f9f9;
}
#offers {
  width: 80%;          /* Restrict width to 60% */
  margin: 0 auto;      /* Centers the #offers container on the page */
  padding: 1rem 0;
  background: var(--hairline);
  min-height: 300px;   /* Set a minimum height */
  border-radius: 8px;  /* Add rounded corners */
}
#offers h2 {
  text-align: center;  /* Center the headline */
  margin-bottom: 1rem; /* Add some space below the headline */
}



.offer img {
  width: 50px;  
  height: 50px;
  margin-right: 15px;
}

/* The container that holds the headline (h3) and description (p) */
.offer-info {
  display: flex;
  flex-direction: column; /* stack them vertically */
}

.offer-info h3 {
  margin: 0 0 8px 0; /* bottom spacing for the headline */
  font-size: 1.1rem;
}

.offer-info p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}


/* Link styling for both headline and logo */
.offer a {
  text-decoration: none;
  color: #333;
}

.offer a:hover {
  text-decoration: underline;
}

main a:hover,
main a:focus {
  text-decoration: underline;
}

/* ---------------------------------- */
/* Sections                           */
/* ---------------------------------- */
#matchups {
  padding: 2rem 5%;
  background: var(--hairline);
  text-align: center;
}

#about {
  padding: 2rem 5%;
  background: #f7f7f7;
  text-align: center;
}

/* ---------------------------------- */
/* Footer                             */
/* ---------------------------------- */
.site-footer {
  background-color: #333;
  color: #ddd;
  padding: 36px 0 18px;
  margin-top: 60px;
  /* Never compress; sits flush at the bottom of the flex column. */
  flex-shrink: 0;
}

.footer-container {
  max-width: var(--page-max-wide);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #444;
}

.footer-column {
  padding: 0;
}

.footer-column h2 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-links li a {
  color: #bbb;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links li a:hover {
  color: #fff;
}

.footer-bottom-row {
  text-align: center;
  margin-top: 18px;
}

.footer-bottom-row p {
  margin: 0;
  font-size: 12px;
  color: #bbb;
  letter-spacing: 0.04em;
}

.footer-note {
  max-width: 720px;
  margin: 0 auto 8px !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
}

@media (max-width: 768px) {
  /* .footer-row is display:grid — switch the columns rather than flex-direction. */
  .footer-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 24px;
    padding: 0 4px 22px;
  }
  .footer-column { padding: 0; }
}

@media (max-width: 480px) {
  .footer-row { grid-template-columns: 1fr; gap: 18px; }
}

/* Auth pages (login / signup / password reset) */
.auth-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-family: var(--font-body);
}

.form-container {
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
  max-width: 420px;
  width: 100%;
  margin: 0;
  padding: 36px 32px 30px;
}

.form-container__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 700;
  text-align: center;
}

.form-container h1,
.form-container h2 {
  text-align: center;
  margin: 0 0 8px;
  color: var(--ink-strong);
  font-size: 22px;
  font-weight: 700;
}

.form-container__lede {
  text-align: center;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.form-container__microcopy {
  text-align: center;
  color: #596674;
  font-size: 13px;
}
.form-container__field { margin-bottom: 15px; }
.form-container__hint {
  display: block;
  margin-top: 3px;
  color: #66717d;
  font-size: 11.5px;
  line-height: 1.4;
}
.form-container__field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0 8px;
}
.form-container__field--check input { margin-top: 3px; }
.form-container__field--check label { margin: 0; line-height: 1.45; }
.form-container__field--check .form-field__error { grid-column: 2; }

.form-container label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
  color: #444;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"],
.form-container textarea {
  width: 100%;
  padding: 10px 12px;
  margin: 0 0 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-container textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}
.form-container textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(74, 74, 74, 0.08);
  outline: none;
}

/* Contact-page identity card (shown to logged-in users) */
.contact-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 18px;
  background-color: #f5f7fa;
  border: 1px solid #e2e7ee;
  border-radius: 6px;
}
.contact-identity__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f3a5f 0%, #2a5a8a 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-identity__meta { min-width: 0; flex: 1; }
.contact-identity__name {
  font-size: 13px;
  color: #4a5560;
  line-height: 1.3;
}
.contact-identity__name strong { color: #1f2733; }
.contact-identity__email {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-identity__email--missing { color: #b3261e; white-space: normal; }
.contact-identity__email--missing a { color: #b3261e; text-decoration: underline; }

.form-field__error {
  display: block;
  margin-top: 4px;
  color: #b3261e;
  font-size: 12px;
}
.form-errors {
  background-color: #fdecea;
  border: 1px solid #f5c5c0;
  color: #8c1a14;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 13px;
}

.form-container p {
  margin: 0 0 16px;
}

.form-container .helptext {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  line-height: 1.45;
}
.form-container .helptext ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.form-container input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(74, 74, 74, 0.08);
  outline: none;
}

.form-container__submit,
.form-container button {
  width: 100%;
  padding: 11px 16px;
  background-color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  margin-top: 4px;
}
.form-container__submit:hover,
.form-container button:hover {
  background-color: var(--ink-strong);
  border-color: var(--ink-strong);
}

.form-container__links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  font-size: 13px;
}
.form-container__links a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}
.form-container__links a:hover {
  color: var(--goal-red);
  text-decoration: underline;
}

.form-container__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.form-container .errorlist {
  color: #c0392b;
  margin: 0 0 12px;
  list-style: none;
  padding: 8px 12px;
  background-color: #fde9e7;
  border: 1px solid #f5cdc8;
  border-radius: 4px;
  font-size: 13px;
}

.user-dropdown {
  position: relative;
  display: inline-block;
}

#user-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px 5px 5px;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background-color: #fff;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  max-width: 220px;
}
#user-icon:hover {
  background-color: #f5f7fa;
  border-color: #b9c2cf;
  color: #1f3a5f;
}
#user-icon.is-open {
  background-color: #f5f7fa;
  border-color: #1f3a5f;
  color: #1f3a5f;
  box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.10);
}
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f3a5f 0%, #2a5a8a 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.user-icon-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.user-caret {
  flex-shrink: 0;
  transition: transform 0.15s;
  color: #8a93a3;
}
#user-icon.is-open .user-caret { transform: rotate(180deg); color: #1f3a5f; }

#user-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  z-index: 1000;
  overflow: hidden;
  padding: 6px 0;
}

.dropdown-header {
  display: flex;
  gap: 12px;
  padding: 14px 16px 12px;
  align-items: flex-start;
}
.dropdown-header__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f3a5f 0%, #2a5a8a 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dropdown-header__meta {
  min-width: 0;
  flex: 1;
}
.dropdown-header__name {
  font-size: 14px;
  font-weight: 700;
  color: #1f2733;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-header__email {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-header__plan { margin-top: 8px; }

.plan-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.plan-badge--premium {
  background-color: #e9f0fb;
  color: #1f3a5f;
  border-color: #bcd0ec;
}
.plan-badge--free {
  background-color: #f1f3f5;
  color: #5b6573;
  border-color: #dde1e6;
}
/* Launch-promo grant: full access, but on loan and with a date on it — so
   it reads as its own state rather than as a paid plan. */
.plan-badge--promo {
  background-color: #e7f4ee;
  color: #0F7A4D;
  border-color: #bfe3d1;
  letter-spacing: 0.05em;
}

.search-login #user-dropdown-menu .dropdown-item,
.search-login #user-dropdown-menu .dropdown-item:link,
.search-login #user-dropdown-menu .dropdown-item:visited,
#user-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  text-decoration: none;
  color: #333;
  font-size: 13px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.12s, color 0.12s;
  min-width: 0;
}
.search-login #user-dropdown-menu .dropdown-item:hover,
#user-dropdown-menu .dropdown-item:hover {
  background-color: #f5f7fa;
  color: #1f3a5f;
  border-color: transparent;
}
#user-dropdown-menu .dropdown-item__icon {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  color: #8a93a3;
}
#user-dropdown-menu .dropdown-item:hover .dropdown-item__icon { color: #1f3a5f; }

#user-dropdown-menu .dropdown-item--danger,
.search-login #user-dropdown-menu .dropdown-item--danger { color: #b3261e; }
#user-dropdown-menu .dropdown-item--danger:hover,
.search-login #user-dropdown-menu .dropdown-item--danger:hover {
  background-color: #fdecea;
  color: #8c1a14;
}
#user-dropdown-menu .dropdown-item--danger .dropdown-item__icon { color: #b3261e; }
#user-dropdown-menu .dropdown-item--danger:hover .dropdown-item__icon { color: #8c1a14; }

.dropdown-logout-form { margin: 0; }

.dropdown-divider {
  border-top: 1px solid #ececec;
  margin: 6px 0;
}

/* 6. Style for "Manage Subscription" link */
.manage-sub-link {
  font-weight: 600;
}


@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  margin: 100px auto;
  width: 45px;
  height: 45px;
  border: 5px solid #ccc;
  border-top-color: #111;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Player-stats main content wrapper (no slide-out anymore) */
.main-content { position: relative; }

.team-logo {
  max-width: 80%;
  height: auto;
  display: inline-block;
}

/* ──────────────────────────────────────────────────────────────
   Roster sidebar (player-stats page)
   ────────────────────────────────────────────────────────────── */

/* Clearly-labeled trigger button (replaces the bare ☰) */
.roster-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 320px;
  margin: 16px 0 12px 20px;
  padding: 10px 14px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.roster-toggle:hover {
  background-color: #fafafa;
  border-color: var(--ink);
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
.roster-toggle__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 32px;
}
.roster-toggle__label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
}
.roster-toggle__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.roster-toggle__sub {
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}
.roster-toggle__chev {
  color: #888;
  font-size: 14px;
  transition: transform 0.15s, color 0.15s;
}
.roster-toggle:hover .roster-toggle__chev {
  color: var(--ink-strong);
  transform: translateX(2px);
}

/* The slide-in panel itself */
.roster-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 90vw;
  height: 100vh;
  background-color: #fff;
  border-right: 1px solid var(--hairline);
  box-shadow: 4px 0 16px rgba(0,0,0,0.08);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
}
.roster-sidebar--open { transform: translateX(0); }

.roster-sidebar__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1050;
}
.roster-sidebar__backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

.roster-sidebar__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #eee;
  background-color: #fafafa;
  flex-shrink: 0;
}
.roster-sidebar__logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.roster-sidebar__heading { flex: 1; }
.roster-sidebar__team {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.roster-sidebar__sub {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}
.roster-sidebar__close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.roster-sidebar__close:hover { color: var(--ink-strong); }

.roster-sidebar__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  min-height: 0;
}
.roster-sidebar__placeholder {
  padding: 18px 22px;
  color: #888;
  font-size: 13px;
}
.roster-sidebar__group { padding: 6px 0; }
.roster-sidebar__grouptitle {
  margin: 8px 18px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #999;
  font-weight: 700;
}
.roster-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.roster-sidebar__row {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  text-decoration: none;
  color: #333;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: background-color 0.12s, border-left-color 0.12s, color 0.12s;
}
.roster-sidebar__row:hover {
  background-color: #f5f5f5;
  color: var(--ink-strong);
}
.roster-sidebar__row--active {
  background-color: var(--ink-strong);
  color: #fff;
  border-left-color: var(--goal-red);
}
.roster-sidebar__row--active:hover {
  background-color: var(--ink-strong);
  color: #fff;
}
.roster-sidebar__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: inherit;
  opacity: 0.55;
  text-align: right;
}
.roster-sidebar__row--active .roster-sidebar__num { opacity: 1; }
.roster-sidebar__name { font-weight: 600; }
.roster-sidebar__pos {
  font-size: 11px;
  color: inherit;
  opacity: 0.55;
  text-align: right;
  letter-spacing: 0.04em;
}

.roster-sidebar__foot {
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  background-color: #fafafa;
  flex-shrink: 0;
}
.roster-sidebar__foot .home-cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

@media (max-width: 480px) {
  .roster-toggle { width: calc(100% - 32px); max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════
   HOME PAGE + SHARED BOARD CARDS
   A board, not a landing page: the front door is the live data, so this
   is a dense table system rather than a hero + feature cards. Light
   cards on #f9f9f9 to match navbar / player-banner / tables.

   .home-* is scoped to the front page. .board-card / .board-table are
   deliberately unscoped — the standings on the teams page reuse them, so
   changing them changes both.
   ════════════════════════════════════════════════════════════════════ */
.home-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px 20px 60px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--board);
}

.home-page a { color: inherit; text-decoration: none; }

/* ── Buttons (also used by the account page) ───────────────────── */
.home-cta {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
  cursor: pointer;
}
.home-cta--primary {
  background-color: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.home-page a.home-cta--primary { color: #fff; }
.home-cta--primary:hover {
  background-color: var(--ink-strong);
  border-color: var(--ink-strong);
  color: #fff;
}
.home-cta--ghost {
  background-color: #fff;
  color: var(--ink);
  border-color: #ccc;
}
.home-cta--ghost:hover {
  border-color: var(--ink);
  color: var(--ink-strong);
}

/* ── Value strip ───────────────────────────────────────────────────
   The one concession to marketing, and only for users who are not
   paying yet. One line tall so it never pushes the data below the fold. */
.home-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--board);
  padding: 2px 4px;
  margin-bottom: 14px;
}
.home-strip__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--twill);
}
.home-strip__text strong { color: var(--board); font-weight: 600; }
/* Not red, and not a filled button. Red is reserved for live money on this
   site, and spending it on a signup link would make the one colour that means
   "this price is moving" mean nothing. The upsell gets the same quiet
   underlined treatment as the one on the locked price rows, so both read as
   the same offer. */
.home-page a.home-strip__cta {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue-line);
  border-bottom: 1px solid var(--blue-line);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s;
}
.home-page a.home-strip__cta:hover { color: var(--board); border-bottom-color: var(--board); }

/* ── Board grid ────────────────────────────────────────────────── */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.board-card--wide { grid-column: 1 / -1; }
/* Sinks a card below every sibling without moving it in the markup, so the
   document order still leads with the headline board for screen readers and
   crawlers when it has content. */
.board-card--demoted { order: 1; }

/* ── Card frame ──────────────────────────────────────────────────
   A sheet on the ice. No shadow and no fill in the header: the only
   colour a card carries is the rule across its top, and that rule says
   whether the numbers below it are still moving. */
.board-card {
  background-color: var(--sheet);
  border: 1px solid var(--frost);
  border-radius: 2px;
  border-top: 2px solid var(--blue-line);   /* settled by default */
  overflow: hidden;
}
/* Live money: the slate and the price board, whose numbers change under you. */
.board-card--live { border-top-color: var(--goal-red); }

.board-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 7px;
  border-bottom: 1px solid var(--frost);
}
.board-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--board);
}
.board-card__note {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--twill);
  white-space: nowrap;
}
/* The wrapper is what scrolls on narrow screens so the page body never
   picks up a horizontal scrollbar. Tables fill their card — a board that
   stops short of its own frame reads as unfinished. */
.board-card__body { overflow-x: auto; }
.board-card .board-table { width: 100%; }

/* A game no book has posted yet: one quiet cell, not a row of dashes. */
.board-table__pending {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #596674;
  text-align: right;
  padding-right: 14px;
}
.board-card__foot {
  padding: 7px 12px;
  border-top: 1px solid var(--frost);
  text-align: right;
}
.board-card__more {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-line);
}
.board-card__more:hover { color: var(--goal-red); }

/* ── Dense table ───────────────────────────────────────────────── */
.board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--board);
}
.board-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--twill);
  padding: 5px 10px;
  border-bottom: 1px solid var(--frost);
  white-space: nowrap;
}
.board-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #F0F4F6;
  white-space: nowrap;
}
.board-table tbody tr:last-child td { border-bottom: 0; }
.board-table tbody tr:hover { background-color: var(--ice); }

/* Scoped so they outrank `.board-table th`, which sets text-align:left and is
   more specific than a bare modifier class. Without this every numeric header
   sits left above a right-aligned column of numbers. */
.board-table .board-table__num,
.board-table .board-table__rank { text-align: right; }

/* Every figure is mono: the job is spotting the one price in a column that
   differs, and proportional digits make equal-length numbers look unequal. */
.board-table__num {
  text-align: right;
  font-family: var(--font-data);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.board-table__num--strong { font-weight: 600; color: var(--board); }
.board-table__muted { color: var(--twill); }
.board-table__rank {
  width: 1%;
  font-family: var(--font-data);
  font-size: 11px;
  color: #596674;
  text-align: right;
}
.board-table__name { font-weight: 600; color: var(--board); }
.board-table__name a { display: inline-block; }
.board-table__name a:hover { color: var(--goal-red); }
/* The row-wide click is a convenience layered over these anchors; the anchor
   is what keyboard and crawler traffic actually uses, so it needs to show
   focus. */
.board-table__name a:focus-visible {
  outline: 2px solid var(--blue-line);
  outline-offset: 2px;
}
.board-table__book {
  font-family: var(--font-data);
  font-size: 11px;
  text-transform: lowercase;
  color: var(--twill);
}
.board-table__at { color: #B6C2CC; margin: 0 5px; }
.board-table__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--frost);
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--twill);
  vertical-align: 1px;
}
.board-table__tag--preseason { color: #8a5a00; border-color: #e8c46a; background: #fff8df; }
.board-table__tag--regular { color: #174574; border-color: #9fc5e8; background: #eef7ff; }
.board-table__tag--playoff { color: #a51d2d; border-color: #efb0b8; background: #fff1f3; }
.board-table__winner { font-weight: 600; color: var(--board); }
.board-table__logo {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 4px;
}
.board-table__edge {
  font-family: var(--font-data);
  font-weight: 600;
  color: var(--goal-red);
}
.board-table__row--link { cursor: pointer; }

.board-empty {
  margin: 0;
  padding: 20px 12px;
  font-size: 12.5px;
  color: var(--twill);
}

/* ── Locked rows ───────────────────────────────────────────────────
   The upsell sits where the withheld rows would have been, in the same
   type as the table, rather than as a banner bolted onto the card. */
.board-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px dashed var(--frost);
  background-color: var(--ice);
  font-size: 12.5px;
}
.board-lock__count {
  font-family: var(--font-data);
  font-weight: 600;
  color: var(--goal-red);
}
.board-lock__text { color: var(--twill); }
.home-page a.board-lock__cta {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-line);
  border-bottom: 1px solid var(--blue-line);
}
.home-page a.board-lock__cta:hover {
  color: var(--goal-red);
  border-bottom-color: var(--goal-red);
}

/* ── Even-money axis ───────────────────────────────────────────────
   The signature device, and the one place this design spends any ink on
   something other than a number.

   Decimal odds pivot at 2.00: above it the market thinks the bet loses more
   often than not, below it the opposite. So the axis is drawn from that pivot
   rather than from zero. The tick is where the rest of the market sits, the
   dot is the best price on offer, and the bar between them is the gap you are
   being paid for. Reading price and edge as one shape is the entire product
   in one glance.

   It is purely additive: the numeric columns beside it already say the same
   thing, so a screen reader or a failed render loses nothing. */
.edge-axis {
  position: relative;
  display: block;
  width: 84px;
  height: 16px;
  margin-left: auto;
}
.edge-axis__rule {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--frost);
}
/* Even money, 2.00 — the axis this whole market is read against. */
.edge-axis__pivot {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background-color: #B6C2CC;
}
.edge-axis__span {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background-color: var(--goal-red);
  opacity: 0.35;
}
.edge-axis__market {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background-color: var(--twill);
}
.edge-axis__best {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--goal-red);
}

/* ── Slate + form rail ───────────────────────────────────────────
   One row, two jobs: the slate is what is coming, the rail beside it is who
   is hot going into it. Unpaired it collapses to a single column, so a page
   with no spotlight renders the slate exactly as wide as it always was. */
.home-split {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  align-items: start;
}
.home-split.is-paired {
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
  /* Both cards take the height of the taller one, so the row reads as a row.
     Which of the two is taller changes with the night — a four-game slate is
     shorter than the rail, a fourteen-game one is longer — so neither can be
     the one that sets it. */
  align-items: stretch;
}
/* With the frames matched, the slack has to land somewhere deliberate: the
   footer goes to the bottom of the card rather than floating under the last
   row with a gap beneath it. */
.home-split.is-paired > .board-card {
  display: flex;
  flex-direction: column;
}
.home-split.is-paired > .board-card > .board-card__body {
  flex: 1 1 auto;
}

/* ── Form spotlight ──────────────────────────────────────────────
   A rail, not a banner. Everything here is sized to sit *beside* the headline
   board without competing with it: the name is body-scale rather than
   display-scale, the eyebrow is quiet, and the radar is held at the bottom so
   it rewards a look instead of demanding one.

   The eyebrow is deliberately NOT goal-red. Red on this site means live money
   — a number that can still move. A five-game points total is settled, which
   is what the card's blue top rule already says. */
.spotlight {
  /* Sized against the card, not the viewport, so the layout switch follows
     the rail's real width wherever it is placed. Browsers without container
     query support get the stacked rail at every width, which reads fine. */
  container-type: inline-size;
}
.spotlight__stage {
  /* The stage is as tall as its tallest slide, so swapping slides doesn't
     make the page below jump. Grid-stacking every slide in one cell is what
     buys that; only the active one is painted. */
  display: grid;
  overflow-x: hidden;
  /* When the slate is the taller card, the rail's slack is split above and
     below the slide instead of all landing under it. */
  align-content: center;
}
.spotlight__slide {
  grid-area: 1 / 1;
  display: grid;
  gap: 10px;
  padding: 13px 16px 4px;
  /* Kept in flow so the stage keeps its height, but inert to the reader and
     to assistive tech until it is the active slide. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.spotlight__slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* The rotation starts on a random slide, so the first show() moves off the
   server-rendered slide 1. Transitions are switched on only after that has
   happened, otherwise every page load opens with a visible cross-fade
   between two players. */
.spotlight.is-ready .spotlight__slide { transition: opacity 0.35s ease; }

/* The (i) sits with the title, so it pushes the card note to the right edge
   rather than landing between the two. */
.spotlight__info {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--frost);
  border-radius: 50%;
  background: none;
  font-family: var(--font-data);
  font-size: 9.5px;
  font-style: italic;
  line-height: 1;
  color: var(--twill);
  cursor: pointer;
}
.spotlight__info:hover,
.spotlight__info[aria-expanded="true"] {
  border-color: var(--blue-line);
  color: var(--blue-line);
}

/* Anchor for the floating explainer. */
.spotlight .board-card__head { position: relative; }

/* A tooltip, not a panel: it sits over the card so opening it never pushes the
   card's contents down. Pinned to the card's own padding rather than to the
   button, so it cannot run past the edge on a narrow rail — and .board-card
   clips overflow, which would silently cut it off. */
.spotlight__about {
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  right: 12px;
  z-index: 5;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--frost);
  border-radius: var(--radius-s);
  background-color: var(--sheet);
  box-shadow: 0 4px 12px rgba(16, 24, 32, 0.12);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease;
}
/* Three ways in, because one is never enough: pointer, keyboard, and tap
   (which pins it via aria-expanded so it survives the finger lifting). */
.spotlight__info:hover ~ .spotlight__about,
.spotlight__info:focus-visible ~ .spotlight__about,
.spotlight__info[aria-expanded="true"] ~ .spotlight__about {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .spotlight__about { transition: none; }
}

.spotlight__lead { min-width: 0; }

/* ── Points by game ──────────────────────────────────────────────
   Five bars where the totals only say a sum. Five ones and a single seven
   are the same five-game line and not the same player, and this is the only
   thing on the card that tells them apart. */
.spotlight__spark { margin-top: 10px; }

.spotlight__spark-title {
  margin: 0 0 5px;
  font-family: var(--font-data);
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--twill);
}
.spotlight__spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
/* The bars share the column's full width rather than sitting at a fixed size
   in the corner of it. */
.spotlight__spark-bar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
/* Fixed height and nothing but the bar inside it, so an inline "height: 71%"
   means 71% of the chart and not 71% of the chart plus its number. */
.spotlight__spark-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 46px;
}
/* The bar proper. Its height is an inline percentage from the view — always
   an int, because sv-se would localise a float to "60,0" and void the rule. */
.spotlight__spark-bar i {
  display: block;
  width: 100%;
  border-radius: 1px;
  background-color: var(--frost);
}
.spotlight__spark-bar.is-scoring i { background-color: var(--blue-line); }
.spotlight__spark-bar b {
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--twill);
}
.spotlight__spark-bar.is-scoring b { color: var(--board); }

/* The time axis. Dates at both ends, ascending left to right, so which end is
   the most recent game is stated rather than inferred from an arrow. */
.spotlight__spark-axis {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  font-family: var(--font-data);
  font-size: 8.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--twill);
  white-space: nowrap;
}
.spotlight__spark-axis-line {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  background-color: var(--frost);
}
.spotlight__spark-axis-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  border-left: 4px solid var(--frost);
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
}
.spotlight__spark-axis-end { color: var(--ink); }

/* Headshot and name as one unit. 56px is the height of rank + name + meta
   stacked, so the mug reads as set against them rather than floating. */
/* ── Prototype: name and totals on top, portrait paired with the chart ──
   The name block owns the full width (no wrapping for a long one), the totals
   sit straight under it, and the headshot anchors the chart rather than
   labelling the name. */
.spotlight__topline {
  display: flex;
  align-items: center;
  /* Wider than the gaps inside the totals, so the name reads as its own thing
     and the hero figure does not look like the last word of it. */
  gap: 24px;
}
/* flex-basis 0, deliberately. A wrapping flex container decides its lines from
   each item's basis *before* any shrinking, so an `auto` basis here meant a
   long name ("Shayne Gostisbehere") pushed the totals onto a second line while
   a short one ("Mitch Marner") did not — the row jumping between slides of a
   card that rotates. At basis 0 the name never forces the break; it takes the
   space left over and wraps inside itself if it must. */
/* The name takes the width its letters need and no more. Giving it the grow
   factor instead parked the slack between the name and the figures, which read
   as a hole in the middle of the line.

   min-width stays `auto` (= min-content) on purpose. Forcing it to 0 lets the
   box shrink narrower than the longest word, and the name then spills across
   the totals instead of wrapping. */
.spotlight__head {
  flex: 0 1 auto;
}
/* The totals take everything left over and spread across it, so the row runs
   from the name to the card's right edge with no gap parked in between. */
.spotlight__topline .spotlight__line {
  flex: 1 1 auto;
}
.spotlight__form {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 13px;
}
.spotlight__form .spotlight__mug { margin: 0; }
.spotlight__form .spotlight__spark {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}

.spotlight__mug {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-s);
  object-fit: cover;
  object-position: center top;   /* keep the face if the mug is ever not square */
  /* The CDN's mugs are cut out over a team-coloured gradient; the ice fill is
     what a transparent one or a still-loading one sits on. */
  background-color: var(--ice);
  border: 1px solid var(--frost);
}
.spotlight__rank {
  margin: 0 0 3px;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--twill);
}
.spotlight__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--board);
}
.spotlight__name a { color: inherit; text-decoration: none; }
.spotlight__name a:hover { color: var(--blue-line); }

.spotlight__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 3px 0 0;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--twill);
}
.spotlight__meta a { color: inherit; text-decoration: none; }
.spotlight__meta a:hover { color: var(--blue-line); }
.spotlight__logo { vertical-align: middle; }
.spotlight__pos::before { content: "·"; margin-right: 5px; }

.spotlight__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* Spread edge to edge rather than bunched at the left: PTS sits on the
     card's left margin and TOI/GP on its right, so the row reads as a line of
     figures across the card instead of a clump with dead space after it. */
  justify-content: space-between;
  gap: 4px 10px;
}
.spotlight__stat { display: flex; flex-direction: column; gap: 1px; }
.spotlight__stat-value {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--board);
  font-variant-numeric: tabular-nums;
}
/* PTS is what the board is ranked on, so it is the one number set larger —
   and blue, because on this site blue is a settled fact. */
.spotlight__stat--hero .spotlight__stat-value {
  font-size: 23px;
  color: var(--blue-line);
}
.spotlight__stat-label {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--twill);
}

.spotlight__span {
  margin: 9px 0 0;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--twill);
}

/* A quiet line under a hairline, not a filled chip. The last game is already
   the rightmost spark bar above; this adds the opponent and the link to the
   box score, and should not weigh more than the radar it sits over. */
.spotlight__last {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--frost);
  font-size: 11px;
  color: var(--ink);
  text-decoration: none;
}
.spotlight__last:hover { color: var(--blue-line); }
.spotlight__last:hover .spotlight__last-game { color: var(--blue-line); }
.spotlight__last-label {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--twill);
}
.spotlight__last-game {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-data);
  font-weight: 600;
  color: var(--board);
}
.spotlight__last-line {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* ── The radar ───────────────────────────────────────────────────
   The one curved shape on a page of rules and tables, which is exactly why it
   sits last in the rail rather than first: it is the reward for reading the
   card, not the thing that pulls the eye to it. Inline SVG rather than
   Chart.js — see the partial's comment. */
.spotlight__radar {
  margin: 0;
  text-align: center;
}
.spotlight-radar {
  display: block;
  width: min(184px, 100%);
  height: auto;
  margin: 0 auto;
  overflow: visible;   /* the axis labels sit outside the viewBox */
}
.spotlight-radar__ring {
  fill: none;
  stroke: var(--frost);
  stroke-width: 1;
}
/* The median ring is the only one that means anything on its own. */
.spotlight-radar__ring--median { stroke: #c3cfd8; stroke-dasharray: 2 3; }
.spotlight-radar__spoke { stroke: var(--frost); stroke-width: 1; }
.spotlight-radar__shape {
  fill: rgba(27, 79, 140, 0.16);
  stroke: var(--blue-line);
  stroke-width: 1.75;
  stroke-linejoin: round;
}
.spotlight-radar__dot { fill: var(--blue-line); }
.spotlight-radar__label {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.04em;
  fill: var(--twill);
}
.spotlight__radar-caption {
  margin-top: 5px;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--twill);
}
.spotlight__radar-flag { display: block; font-style: italic; }

/* ── Rotation controls ───────────────────────────────────────────── */
.spotlight__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.spotlight__dots { display: flex; gap: 4px; }
.spotlight__dot {
  /* The hit area is the button; the visible dot is the span inside it, so a
     5px target doesn't become the thing a thumb has to find. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.spotlight__dot span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--frost);
  transition: background-color 0.2s, transform 0.2s;
}
.spotlight__dot:hover span { background-color: var(--twill); }
.spotlight__dot.is-active span {
  background-color: var(--blue-line);
  transform: scale(1.4);
}

/* Given room — the card stacked full width on a tablet, or dropped into a
   wide slot — the lead and the radar sit side by side instead. */
@container (min-width: 520px) {
  .spotlight__slide {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.5fr);
    gap: 16px;
    align-items: center;
    padding: 16px 18px 6px;
  }
  .spotlight__radar { grid-column: 2; }
  .spotlight-radar { width: min(200px, 100%); }
}

/* The card note carries a date range, which will not share a line with the
   title at rail width. Exact complement of the layout query above, so the head
   stacks in precisely the widths where the slide is stacked too. */
@container (max-width: 519px) {
  .spotlight .board-card__head { flex-wrap: wrap; gap: 2px; }
  .spotlight .board-card__title { white-space: nowrap; }
  .spotlight .board-card__note { flex-basis: 100%; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight.is-ready .spotlight__slide { transition: none; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-split.is-paired { grid-template-columns: minmax(0, 1fr); }
  .home-page { padding: 14px 12px 40px; }
}
@media (max-width: 480px) {
  .home-strip { flex-direction: column; align-items: flex-start; }
  .home-page a.home-strip__cta { width: 100%; text-align: center; }
}

/* ── Upcoming match cards ──────────────────────────────────────── */
.match-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.match-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.04);
  padding: 14px 16px 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
  color: inherit;
}
.match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.07);
  border-color: #cfd6df;
}

.match-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}
.match-card__league {
  background-color: var(--ink);
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 10px;
}
.match-card__when { color: #666; }

/* Game-type badge. One colour per type so preseason, regular season and
   playoff are told apart at a glance. Regular season — much the commonest —
   is the quietest of the three so a full board does not read as a warning. */
.match-card__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.match-card__gametype {
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 10px;
  white-space: nowrap;
}
.match-card__gametype--preseason {
  background-color: #f4efdd;
  color: #6f5c1c;
  border: 1px solid #e0d5ab;
}
.match-card__gametype--regular {
  background-color: #eef1f5;
  color: #55606e;
  border: 1px solid #dde3ea;
}
.match-card__gametype--playoff {
  background-color: var(--board);
  color: #fff;
  border: 1px solid var(--board);
}

.match-card__body {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  align-items: center;
  gap: 8px;
}

.match-card__team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.match-card__team--home {
  flex-direction: row;
  justify-content: flex-end;
}

.match-card__logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 38px;
}

.match-card__teamtext {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.match-card__teamtext--right { text-align: right; }

.match-card__acro {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.match-card__name {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-card__odds {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  background-color: #f5f5f5;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 6px 10px;
  min-width: 60px;
  text-align: center;
  flex: 0 0 auto;
}

.match-card__vs {
  text-align: center;
  font-size: 12px;
  color: #aaa;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.match-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #888;
}
.match-card__foot .match-card__cta {
  color: var(--ink);
  font-weight: 600;
}
.match-card:hover .match-card__cta { color: var(--goal-red); }

/* Results page: scores in the odds slot, dim the losing side, bold the winner. */
.match-card__score { background-color: #eef1f4; border-color: #dde2e8; }
.match-card__team--won .match-card__score {
  background-color: var(--board);
  border-color: var(--board);
  color: #fff;
}
.match-card__team--won .match-card__acro { color: var(--board); }
.match-card--result .match-card__team:not(.match-card__team--won) .match-card__name,
.match-card--result .match-card__team:not(.match-card__team--won) .match-card__acro { color: #8a8a8a; }

@media (max-width: 820px) {
  .match-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .match-card__logo { width: 32px; height: 32px; flex-basis: 32px; }
  .match-card__odds { font-size: 16px; min-width: 52px; padding: 5px 8px; }
  .match-card__name { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   Same visual language as home/overview — white cards, var(--ink) accents.
   ════════════════════════════════════════════════════════════════════ */
.about-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px 20px 60px;
  font-family: var(--font-body);
  color: #333;
}

/* Hero card */
.about-hero {
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.04);
  padding: 40px 32px;
  margin-bottom: 28px;
}
.about-hero__eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 700;
}
.about-hero__title {
  font-size: 32px;
  line-height: 1.2;
  color: var(--ink-strong);
  margin: 0 0 14px;
  font-weight: 700;
  max-width: 760px;
}
.about-hero__lede {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 22px;
  max-width: 720px;
}
.about-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Section heads */
.about-section { margin-top: 36px; }
.about-section__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 16px;
}
.about-section__eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 700;
}

/* What-we-do grid */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.about-card {
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.04);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.about-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.about-card__num {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.12em;
}
.about-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-strong);
}
.about-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

/* Telegram section: two-column card */
.about-telegram {
  margin-top: 36px;
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.04);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 32px;
  align-items: center;
}
.about-telegram__copy h2 {
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--ink-strong);
  font-weight: 700;
  line-height: 1.3;
  max-width: 540px;
}
.about-telegram__lede {
  margin: 0 0 16px;
  color: #555;
  font-size: 15px;
  line-height: 1.6;
  max-width: 540px;
}
.about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-list li {
  position: relative;
  padding: 8px 12px 8px 32px;
  background-color: #f9f9f9;
  border-left: 3px solid var(--ink);
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  color: #444;
  line-height: 1.5;
}
.about-list li::before {
  content: "✓";
  position: absolute;
  left: 11px;
  top: 8px;
  color: var(--ink);
  font-weight: 700;
}
.about-telegram__close {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  max-width: 540px;
}
.about-telegram__art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-telegram__art img {
  width: 100%;
  max-width: 180px;
  height: auto;
}

/* Roadmap */
.about-roadmap {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-roadmap__item {
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.04);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 18px;
  align-items: center;
}
.about-roadmap__step {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.about-roadmap__item h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--ink-strong);
  font-weight: 700;
}
.about-roadmap__item p {
  margin: 0;
  font-size: 13.5px;
  color: #666;
  line-height: 1.5;
}
.about-roadmap__status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.about-roadmap__status--soon {
  background-color: #ffead4;
  color: #b06800;
}
.about-roadmap__status--planned {
  background-color: #ececec;
  color: #555;
}

/* Responsive */
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-telegram {
    grid-template-columns: 1fr;
    padding: 26px 22px;
    gap: 22px;
  }
  .about-telegram__art img { max-width: 140px; }
  .about-hero { padding: 28px 22px; }
  .about-hero__title { font-size: 26px; }
}
@media (max-width: 480px) {
  .about-roadmap__item {
    grid-template-columns: 36px 1fr;
  }
  .about-roadmap__status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Inline code on info/about pages */
.about-page code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 0.86em;
  background-color: #f0f0f0;
  border: 1px solid var(--hairline);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink-strong);
}

/* Search-focused market guides reuse the editorial card system but keep the
   reading measure comfortable on the methodology and FAQ sections. */
.market-guide__method { max-width: 820px; }
.market-guide__method p {
  max-width: 72ch;
  color: var(--twill);
  line-height: 1.7;
}
.market-guide__faq {
  display: grid;
  gap: 10px;
  max-width: 900px;
}
.market-guide__faq details {
  border: 1px solid var(--frost);
  border-radius: 8px;
  background: #fff;
  padding: 13px 16px;
}
.market-guide__faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--board);
}
.market-guide__faq p { margin: 10px 0 0; color: var(--twill); }
.market-guide__related { padding-bottom: 24px; }

/* ════════════════════════════════════════════════════════════════════
   ACCOUNT PAGE
   ════════════════════════════════════════════════════════════════════ */
.account-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px 20px 60px;
  font-family: var(--font-body);
  color: #333;
}
.account-page a { color: inherit; text-decoration: none; }

.account-header {
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.account-header__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f3a5f 0%, #2a5a8a 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(31, 58, 95, 0.18);
}
.account-header__meta { min-width: 0; }
.account-header__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #1f2733;
  line-height: 1.2;
}
.account-header__email {
  margin-top: 4px;
  font-size: 14px;
  color: #6b7280;
}
.account-header__plan { margin-top: 10px; }

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 760px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-header { flex-direction: column; align-items: flex-start; }
}

.account-card {
  background-color: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
}
.account-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef0f2;
}
.account-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1f2733;
}
.account-card__body {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.account-card__foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-kv {
  margin: 0;
  padding: 0;
}
.account-kv__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed #eef0f2;
  font-size: 14px;
}
.account-kv__row:last-child { border-bottom: 0; }
.account-kv dt {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}
.account-kv dd {
  margin: 0;
  color: #1f2733;
  text-align: right;
  word-break: break-word;
}
.kv-muted {
  color: #8a93a3;
  font-size: 13px;
  font-weight: 400;
}

.account-empty {
  padding: 8px 0 4px;
}
.account-empty__lead {
  margin: 0 0 6px;
  font-size: 15px;
  color: #1f2733;
}
.account-empty__body {
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.55;
}

.account-actions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.account-actions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed #eef0f2;
}
.account-actions li:last-child { border-bottom: 0; }
.account-actions__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: #1f2733;
}

.status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: #f1f3f5;
  color: #5b6573;
  border: 1px solid #dde1e6;
}
.status-pill--active,
.status-pill--trialing {
  background-color: #e8f5ec;
  color: #1f6f3a;
  border-color: #bfe2c8;
}
.status-pill--past_due,
.status-pill--unpaid {
  background-color: #fff4e0;
  color: #8a5a00;
  border-color: #f5d59b;
}
.status-pill--canceled,
.status-pill--incomplete_expired {
  background-color: #fdecea;
  color: #8c1a14;
  border-color: #f5c5c0;
}

.account-signout {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}
.account-signout form { margin: 0; }
.account-signout__btn {
  border: 1px solid #ddd !important;
  background: #fff;
  cursor: pointer;
}

.odds-page-head,
.team-directory__head,
.empty-state {
  max-width: 900px;
  margin: 28px auto 24px;
  text-align: center;
}

.odds-page-head__eyebrow,
.team-directory__eyebrow {
  margin: 0 0 8px;
  color: #637083;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.odds-page-head h1,
.team-directory__head h1,
.empty-state h1 {
  margin: 0 0 10px;
  color: #1f2733;
  font-size: 32px;
  line-height: 1.15;
}

.odds-page-head p,
.team-directory__head p,
.empty-state p {
  margin: 0 auto;
  max-width: 720px;
  color: #5f6b7a;
  font-size: 15px;
  line-height: 1.65;
}
.odds-page-head .odds-page-head__guides { font-size: 13px; }
.odds-page-head__guides a { color: var(--blue-line); font-weight: 600; }
.odds-page-head__guides a:hover { color: var(--goal-red); }

.empty-state {
  padding: 56px 20px;
}

.empty-state .home-cta {
  margin-top: 18px;
}

/* ── Players A-Z index ───────────────────────────────────────────── */
.players-index {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.players-index__head { margin-bottom: 32px; }
.players-index__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}
.players-index__title {
  margin: 0 0 12px;
  font-size: 36px;
  line-height: 1.15;
  color: #0f172a;
}
.players-index__lede {
  margin: 0 0 22px;
  color: #475569;
  max-width: 70ch;
  line-height: 1.55;
}
.players-index__search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 18px;
}
.players-index__search input {
  flex: 1 1 240px;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font: inherit;
}
.players-index__search button {
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--board);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.players-index__clear {
  color: #64748b;
  text-decoration: none;
  font-size: 14px;
}
.players-index__alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}
.players-index__alpha a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f172a;
  text-decoration: none;
  font-size: 13px;
}
.players-index__alpha a:hover { background: #f1f5f9; }
.players-index__letter { margin-top: 28px; }
.players-index__letter-title {
  margin: 0 0 12px;
  font-size: 22px;
  color: #0f172a;
}
.players-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 16px;
}
.players-index__item a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #0f172a;
}
.players-index__item a:hover { background: #f1f5f9; }
.players-index__name { font-weight: 600; }
.players-index__team {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.players-index__pos {
  font-size: 11px;
  color: #94a3b8;
}
.players-index__empty { color: #475569; }

/* ════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE TWEAKS
   Single source of truth for sub-860px chrome — collapse nav into a
   burger drawer, stack the player banner, let the NHL subnav scroll,
   and trim the global page wrap so content gets every available pixel.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .nav-container {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 14px;
    align-items: center;
  }
  .nav-left {
    gap: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
  }
  .nav-burger { display: inline-flex !important; }

  /* The "About / Data information / NHL" inline links hide behind the
     burger on the closed nav row. When the drawer opens they re-appear as a
     stacked full-width block (see .nav-container.is-open rule below) so they
     stay reachable on mobile alongside the search / login controls. */
  .nav-left .nav-links { display: none; }

  /* Open drawer: break the primary links onto their own full-width row,
     stacked, so NHL / About / Data information are tappable on mobile. */
  .nav-container.is-open .nav-left { flex-wrap: wrap; }
  .nav-container.is-open .nav-left .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    gap: 4px;
    margin-top: 10px;
  }
  .nav-container.is-open .nav-left .nav-links a {
    padding: 10px 12px;
    font-size: 15px;
    border-radius: 6px;
  }

  /* Drawer: full-width panel that slides under the nav row.
     padding collapses to 0 when closed so no sliver of the search
     input pokes through below the burger row. */
  .search-login {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.22s ease, padding 0.22s ease, visibility 0s linear 0.22s;
  }
  .nav-container.is-open .search-login {
    max-height: 560px;
    padding: 10px 0 14px;
    visibility: visible;
    transition: max-height 0.22s ease, padding 0.22s ease, visibility 0s linear 0s;
  }

  .search-login input[type="search"] {
    flex: 1 1 100%;
    width: 100%;
    font-size: 15px;
    padding: 10px 12px;
  }
  .search-login input[type="search"]:focus { width: 100%; }
  .search-login > a {
    flex: 1 1 calc(50% - 4px);
    text-align: center;
    padding: 10px 14px;
    font-size: 14px;
  }
  .user-dropdown { flex: 1 1 100%; }
  #user-icon { width: 100%; max-width: none; justify-content: flex-start; padding: 8px 12px; }
  #user-dropdown-menu {
    position: static;
    box-shadow: none;
    border: 1px solid #ececec;
    margin-top: 6px;
    width: 100%;
  }

  /* Player-stats banner: stack image + meta + stats vertically. */
  .player-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
    margin: 16px 0;
    max-width: none;
  }
  .player-banner .left-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .player-banner .player-image { width: 96px; height: 96px; }
  .player-banner .player-details { min-width: 0; align-items: center; }
  .player-banner .right-section { min-width: 0; max-width: none; width: 100%; }
  .player-banner-row {
    flex-direction: column;
    align-items: stretch;
    margin: 16px 0;
    padding: 0;
  }
  .player-banner-row .radar-card { flex-basis: auto; min-width: 0; }
  .radar-canvas-wrap { height: 230px; }
  .player-info-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    text-align: center;
  }

  /* Secondary (NHL) subnav: scroll horizontally instead of overflowing. */
  .secondary-navbar .secondary-nav-links,
  .secondary-navbar .secondary-nav-container {
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .secondary-navbar .secondary-nav-links::-webkit-scrollbar,
  .secondary-navbar .secondary-nav-container::-webkit-scrollbar { display: none; }
  .secondary-navbar .nav-links {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .secondary-navbar .nav-links a { padding: 12px 14px; font-size: 13px; }

  /* main element padding doubled up with .page-wrap; shrink on phones. */
  main { padding: 12px; border-radius: 0; box-shadow: none; }
  .page-wrap { padding: 0 10px; }
}

@media (max-width: 480px) {
  .nhl-overview { padding: 18px 14px 40px; }
  .nhl-overview__title { font-size: 20px; }
  .odds-page-head h1,
  .team-directory__head h1,
  .empty-state h1 { font-size: 24px; }
  .players-index { padding: 24px 14px 60px; }
  .players-index__title { font-size: 26px; }
}

/* Matchup card + its secondary actions. The card itself is one big anchor, so
   the lineup link lives beside it in a wrapper rather than inside it. */
.match-card-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.match-card-wrap .match-card {
  flex: 1 1 auto;
}

.match-card__actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 4px 0;
}

.match-card__action {
  color: #2f6fbf;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.match-card__action:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════
   STANDINGS (teams page)
   Four division cards in a grid, reusing the shared .board-card /
   .board-table system from the home page.
   ════════════════════════════════════════════════════════════════════ */
.standings {
  margin: 0 0 28px;
  font-size: 13px;
}
.standings__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.standings__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--board);
}
.standings__season {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--twill);
}
.standings__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.standings__note {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--twill);
}
/* A negative differential is a fact, not an alarm — only the positive
   side gets colour, and red is reserved for live money. */
.standings__diff--pos { color: var(--gain); }
.standings__diff--neg { color: var(--twill); }

@media (max-width: 900px) {
  .standings__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── League leader cards (teams page) ──────────────────────────── */
.leaderboards { margin: 0 0 28px; font-size: 13px; font-family: var(--font-body); }
.leaderboards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
  align-items: start;
}
.leaderboards__team { width: 1%; white-space: nowrap; }
.leaderboards__team a:hover { color: var(--goal-red); }
/* Marks a total summed across a mid-season trade. */
.leaderboards__traded { color: var(--goal-red); font-weight: 600; cursor: help; }

/* ── Front-page masthead ───────────────────────────────────────────
   Center ice. An ice-tinted band with a faceoff circle bleeding off the
   right edge, the page's h1 at true display size, and the site's one
   colour rule spelled out — blue means settled, red means live — so the
   boards below need no explaining. */
.home-mast {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(180deg, #F7FAFB 0%, var(--ice) 100%);
  border: 1px solid var(--frost);
  border-radius: 2px;
  padding: 26px 28px 22px;
  margin-bottom: 10px;
}
/* The faceoff circle — frost blue, mostly out of frame, red dot at centre.
   Decoration with a alibi: it is the one place the page is allowed a flourish. */
.home-mast::before {
  content: "";
  position: absolute;
  top: -190px;
  right: -110px;
  width: 440px;
  height: 440px;
  border: 2px solid rgba(27, 79, 140, 0.14);
  border-radius: 50%;
  pointer-events: none;
}
.home-mast::after {
  content: "";
  position: absolute;
  top: 27px;
  right: 107px;
  width: 9px;
  height: 9px;
  background: rgba(200, 16, 46, 0.32);
  border-radius: 50%;
  pointer-events: none;
}
.home-mast__text { position: relative; min-width: 0; }
.home-mast__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 42px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--board);
}
.home-mast__sub {
  margin: 0 0 12px;
  max-width: 54ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--twill);
}
.home-mast__legend {
  margin: 0;
  display: flex;
  gap: 18px;
}
.home-mast__key {
  font-family: var(--font-data);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--twill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-mast__key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.home-mast__key--blue::before { background: var(--blue-line); }
.home-mast__key--red::before { background: var(--goal-red); }
/* The one conversion moment on the page: a real button, brand blue, with
   the login escape hatch and the "free" reassurance beside it. */
.home-mast__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
}
.home-mast .home-cta--primary {
  background-color: var(--blue-line);
  border-color: var(--blue-line);
}
.home-mast .home-cta--primary:hover {
  background-color: #163e6e;
  border-color: #163e6e;
}
.home-mast__note {
  font-size: 11.5px;
  color: var(--twill);
}
.home-mast__note a {
  color: var(--blue-line);
  font-weight: 600;
}
.home-mast__note a:hover { color: var(--goal-red); }


.home-mast__meta {
  position: relative;
  text-align: right;
  flex-shrink: 0;
}
.home-mast__season {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--blue-line);
}
.home-mast__season-label {
  display: block;
  margin-top: 2px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--twill);
}
@media (max-width: 700px) {
  .home-mast { flex-direction: column; align-items: flex-start; padding: 20px 18px 16px; }
  .home-mast::before { top: -230px; right: -160px; }
  .home-mast::after { display: none; }
  .home-mast__meta { text-align: left; }
}

/* Axis column header — a label, not a figure, so it opts out of the mono
   numeric treatment while staying right-aligned over the plot. */
.board-table th.edge-axis__head {
  text-align: right;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Division points ───────────────────────────────────────────────
   Four divisions abreast so the whole league reads at a glance. Collapses
   to two columns, then one, rather than scrolling sideways — this is the
   one board where comparing across columns is the point. */
.division-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.division-points__col + .division-points__col {
  border-left: 1px solid var(--frost);
}
.division-points__name {
  margin: 0;
  padding: 7px 10px 5px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--twill);
  border-bottom: 1px solid var(--frost);
}
.division-points .board-table td { padding: 5px 10px; }

@media (max-width: 900px) {
  .division-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .division-points__col:nth-child(3) { border-left: 0; }
  .division-points__col:nth-child(n+3) { border-top: 1px solid var(--frost); }
}
@media (max-width: 520px) {
  .division-points { grid-template-columns: minmax(0, 1fr); }
  .division-points__col + .division-points__col {
    border-left: 0;
    border-top: 1px solid var(--frost);
  }
}

/* ── Front-page signup panel ──────────────────────────────────────
   The one full-width card that sells instead of reporting. It keeps the
   board-card frame so it sits inside the grid as a peer, but takes the
   goal-red top rule: in this palette red means "still moving", and a
   dated offer is exactly that. */
.signup-panel {
  border-top-color: var(--goal-red);
  background:
    linear-gradient(120deg, rgba(200, 16, 46, 0.045), rgba(27, 79, 140, 0.03) 55%, transparent 80%),
    var(--sheet);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 18px 20px;
}
.signup-panel__copy { flex: 1 1 320px; min-width: 0; }
.signup-panel__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--goal-red);
}
.signup-panel__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--board);
}
.signup-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-size: 13px;
  color: var(--ink);
}
.signup-panel__list li { position: relative; padding-left: 15px; }
/* Blue tick: these are facts about the plan, not live numbers. */
.signup-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-line);
}
/* Brand blue, matching the masthead CTA — the default .home-cta--primary is
   ink-dark, which reads as a secondary control next to the blue promo band. */
.signup-panel .home-cta--primary {
  background-color: var(--blue-line);
  border-color: var(--blue-line);
}
.signup-panel .home-cta--primary:hover {
  background-color: #163e6e;
  border-color: #163e6e;
}
.signup-panel__action {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  max-width: 340px;
}
.signup-panel__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--twill);
}

@media (max-width: 720px) {
  .signup-panel { padding: 16px 14px; gap: 14px; }
  .signup-panel__title { font-size: 19px; }
  .signup-panel__list { gap: 4px 16px; }
  .signup-panel__action { max-width: none; flex: 1 1 100%; }
  .home-page a.home-cta { flex: 1 1 auto; text-align: center; }
}

/* ── Premium / signup gate ────────────────────────────────────────
   partials/premium_banner.html, in both its shapes. Replaces the old
   inline-styled grey box with the red ▲: it now reads as part of the
   site (rink tokens, same CTA vocabulary as the account gate) instead
   of as a browser alert.

   The inline shape is a row — what is held back on the left, the way
   out on the right — because it spans the full board width, and a
   centred paragraph in a 1200px strip reads as a stray sentence. The
   overlay shape keeps display:none inline; nhl_player_stats.html
   toggles it in JS. */
.premium-gate {
  border: 1px solid var(--frost);
  border-left: 3px solid var(--goal-red);
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(200, 16, 46, 0.06), rgba(255, 255, 255, 0) 45%), var(--sheet);
  padding: 14px 18px;
  margin: 18px 0 6px;
  font-family: var(--font-body);
}
.premium-gate__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}
.premium-gate__copy { flex: 1 1 380px; min-width: 0; }
.premium-gate__lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.premium-gate__flag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--board);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}
.premium-gate__flag--promo { background: var(--goal-red); }
.premium-gate__actions {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.premium-gate__cta {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 4px;
  background: var(--blue-line);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s;
}
.premium-gate__cta:hover { background: #163e6e; color: #fff; }
.premium-gate__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
}
.premium-gate__note {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--twill);
}

/* Overlay shape: covers the chart/table area it is dropped into, and
   stacks centred — there is no board beside it to align against. */
.premium-gate--overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  padding: 28px 20px;
  box-sizing: border-box;
}
.premium-gate--overlay .premium-gate__inner {
  flex-direction: column;
  justify-content: flex-start;
  max-width: 560px;
  margin: 6vh auto 0;
  text-align: center;
}
.premium-gate--overlay .premium-gate__copy { flex: 0 1 auto; }
.premium-gate--overlay .premium-gate__actions { justify-content: center; }

@media (max-width: 640px) {
  .premium-gate { padding: 14px; }
  .premium-gate__lead { font-size: 12.5px; }
  .premium-gate__actions { flex: 1 1 100%; }
  .premium-gate__cta { flex: 1 1 auto; text-align: center; }
}

/* Launch-promo context line above the Stripe pricing table. */
.pricing-promo-note {
  max-width: 640px;
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--blue-line);
  background: rgba(27, 79, 140, 0.05);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.pricing-promo-note a { color: var(--blue-line); font-weight: 600; }