/* ════════════════════════════════════════════════════════════════════
   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;
}

.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 h4 {
  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: #888;
  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 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;
}

.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-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: var(--twill);
  opacity: 0.75;
  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: #9AA6B2;
  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__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);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .home-grid { 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);
}

/* ════════════════════════════════════════════════════════════════════
   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;
}

.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__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);
  }
}