/* =============================================================================
   No Way Bets — "Vintage Gridiron" visual redesign
   -----------------------------------------------------------------------------
   PURELY PRESENTATIONAL. This stylesheet is loaded LAST so it overrides the
   generated Nicepage styling (nicepage.css / index.css / responsive.css).
   No markup, IDs, classes, scripts, forms, or images are changed by this file.

   Palette is drawn from the NWB leather-football logo:
     warm leather browns + cream/parchment + forest & sage green + aged brass.
   Headings use a classic slab serif (Bitter); body stays clean sans-serif.
   ============================================================================= */

:root {
  /* Leather / ink */
  --vg-ink:        #2b2017;   /* primary text on cream */
  --vg-ink-soft:   #5d4c39;   /* muted body text */
  --vg-leather-900:#241810;   /* darkest leather (header/footer base) */
  --vg-leather-800:#33241a;
  --vg-leather-700:#4a3422;   /* mid leather */
  --vg-leather-600:#6b4a2c;   /* lighter leather / borders */

  /* Cream / parchment */
  --vg-cream:      #f1e7d0;   /* page / parchment base */
  --vg-card:       #fbf5e6;   /* card surface */
  --vg-card-2:     #f5ecd6;   /* secondary surface / alt rows */
  --vg-lace:       #fefaf0;   /* lightest highlight */

  /* Greens (from the sage NWB lettering) */
  --vg-green-900:  #1f3a27;
  --vg-green-700:  #2f5d3a;   /* primary accent */
  --vg-green-600:  #3c7a4a;
  --vg-green-500:  #4f9a60;
  --vg-sage:       #93a06a;

  /* Accents */
  --vg-brass:      #c39a3f;   /* aged gold / brass */
  --vg-brass-soft: #d9b96a;
  --vg-rust:       #9d3b26;   /* negatives / underdog */

  --vg-serif: "Bitter", Georgia, "Times New Roman", serif;

  --vg-shadow-sm: 0 2px 6px rgba(36, 24, 16, 0.18);
  --vg-shadow-md: 0 10px 24px rgba(36, 24, 16, 0.22);
  --vg-shadow-lg: 0 18px 44px rgba(36, 24, 16, 0.30);

  --vg-radius:   14px;
  --vg-radius-lg:20px;
}

/* -----------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
.u-body {
  background: var(--vg-cream) !important;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Serif headings everywhere they appear on the landing page */
.header-site-title,
.u-section-1 .u-text-1,
#weekHeading,
.score-chart-title,
.hero-pool-title,
.headline-title,
.bet-group-title,
.u-section-3 .u-table-header-1 .u-table-cell {
  font-family: var(--vg-serif) !important;
  letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------------------
   2. Header + navigation
   -------------------------------------------------------------------------- */
#header.u-header {
  background: linear-gradient(180deg, var(--vg-leather-800) 0%, var(--vg-leather-900) 100%) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(195, 154, 63, 0.35);
  border-bottom: 3px solid var(--vg-brass);
}

#header.u-header .header-site-title {
  font-family: var(--vg-serif) !important;
  color: var(--vg-lace) !important;
  -webkit-text-fill-color: var(--vg-lace) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  font-weight: 800 !important;
}

/* Logo: seat the football in a clean cream "coin" emblem with a brass rim.
   This makes it read as an intentional badge and hides the soft photo halo. */
.header-branding .u-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fbf5e6 0%, #efe2c6 70%, #e2d1ad 100%);
  border: 3px solid var(--vg-brass);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -4px 7px rgba(107, 74, 44, 0.22);
  overflow: hidden;
  flex: 0 0 auto;
}

/* Nav links — cream on leather, brass underline on hover/active */
#header .u-nav-1 .u-nav-link,
#header .u-nav-2 .u-nav-link {
  color: var(--vg-lace) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  font-weight: 700;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
  position: relative;
}

#header .u-nav-1 .u-nav-link:hover,
#header .u-nav-2 .u-nav-link:hover,
#header .u-nav-1 .u-nav-link.u-active-link,
#header .u-nav-1 .nav-pools__toggle[aria-expanded="true"] {
  color: var(--vg-brass-soft) !important;
  background: rgba(195, 154, 63, 0.12);
}

/* Hamburger icon */
.u-hamburger-link .u-svg-content rect,
.u-menu-1 .u-icon rect {
  fill: var(--vg-lace) !important;
}

/* My Pools dropdown panel */
.nav-pools__menu,
.nav-pools__menu--mobile {
  background: var(--vg-card) !important;
  border: 1px solid var(--vg-leather-600) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-md) !important;
  color: var(--vg-ink) !important;
}
.nav-pools__empty { color: var(--vg-ink-soft) !important; }
.nav-pools__chevron { border-color: var(--vg-lace) !important; }
.nav-pools__link {
  color: var(--vg-ink) !important;
  background: var(--vg-card-2) !important;
  border: 1px solid rgba(107, 74, 44, 0.18) !important;
}
.nav-pools__link:hover { background: rgba(47, 93, 58, 0.14) !important; }
.nav-pools__item-name { color: var(--vg-ink) !important; }
.nav-pools__item-meta { color: var(--vg-ink-soft) !important; }

/* Mobile slide-out menu */
.u-sidenav,
.u-sidenav .u-black {
  background: var(--vg-leather-900) !important;
}

/* -----------------------------------------------------------------------------
   3. Sponsor banner strip
   -------------------------------------------------------------------------- */
.site-banner {
  background: var(--vg-leather-900) !important;
  border-bottom: 1px solid rgba(195, 154, 63, 0.30);
}
.site-banner__placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(195,154,63,0.10) 0 14px, rgba(195,154,63,0.03) 14px 28px),
    var(--vg-leather-800) !important;
  color: var(--vg-brass-soft) !important;
  border: 1px dashed rgba(195, 154, 63, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(195, 154, 63, 0.08) !important;
}
.site-banner__img {
  border: 1px solid rgba(195, 154, 63, 0.30) !important;
  background: var(--vg-leather-800) !important;
}

/* -----------------------------------------------------------------------------
   4. Hero (section 1) — NFL wallpaper warmed to vintage sepia
   -------------------------------------------------------------------------- */
.u-section-1 {
  background-image:
    linear-gradient(180deg, rgba(36, 24, 16, 0.72), rgba(36, 24, 16, 0.82)),
    url("images/NflTeamLogosBackgroundHDWallpaper.jpg") !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  background-blend-mode: multiply, normal;
}

/* The welcome panel becomes a clean parchment card */
.u-section-1 .u-group-1 {
  background: var(--vg-card) !important;
  border: 1px solid rgba(107, 74, 44, 0.30) !important;
  border-radius: var(--vg-radius-lg) !important;
  box-shadow: var(--vg-shadow-lg) !important;
}
.u-section-1 .u-group-1.u-white { background: var(--vg-card) !important; }

/* Hero headlines */
.u-section-1 .header-site-title,
.u-section-1 .u-text-1 {
  color: var(--vg-green-700) !important;
  -webkit-text-fill-color: var(--vg-green-700) !important;
  text-shadow: none !important;
}

/* "Welcome to NO WAY BETS!" intro line (inline color:green) */
#guestHeroMessage {
  color: var(--vg-ink) !important;
}
h2#guestHeroMessage {
  color: var(--vg-green-700) !important;
  font-family: var(--vg-serif) !important;
}
.hero-guest-message {
  color: var(--vg-ink) !important;
}

/* Welcome divider drawn by inline <style> */
.welcome-divider {
  border-top-color: var(--vg-brass) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Pool roster / leaderboard column titles */
.hero-pool-title,
.score-chart-title {
  color: var(--vg-ink) !important;
}

/* Score chart container — parchment card instead of black glass */
.score-chart-container {
  background: var(--vg-card) !important;
  border: 1px solid var(--vg-leather-600) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-md) !important;
}
.score-chart-title { color: var(--vg-green-700) !important; }

/* -----------------------------------------------------------------------------
   5. Game / picks section (section 2)
   -------------------------------------------------------------------------- */
.u-section-2 {
  background-image: none !important;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--vg-leather-700) 0%, var(--vg-leather-900) 70%) !important;
}

/* Week heading + cycle buttons */
.u-section-2 #weekHeading,
.week-header .u-text-1 {
  color: var(--vg-lace) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
.week-cycle-btn {
  background: rgba(251, 245, 230, 0.10) !important;
  border: 2px solid var(--vg-brass) !important;
  color: var(--vg-brass-soft) !important;
  box-shadow: var(--vg-shadow-sm) !important;
  backdrop-filter: none !important;
}
.week-cycle-btn:hover {
  background: var(--vg-brass) !important;
  border-color: var(--vg-brass) !important;
  color: var(--vg-leather-900) !important;
  box-shadow: 0 0 18px rgba(195, 154, 63, 0.55) !important;
}

/* Game cell wrappers / panels */
.game-selection-grid > div {
  background: transparent !important;
}

/* Team cards — cream surface, leather frame, forest-green selected ring */
.u-section-2 .u-group-1,
.u-section-2 .u-group-2 {
  background: var(--vg-card) !important;
  border: 2px solid rgba(107, 74, 44, 0.45) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-md) !important;
  backdrop-filter: none !important;
}
.u-section-2 .u-group-1::before {
  background: linear-gradient(90deg, transparent, var(--vg-brass) 30%, var(--vg-brass-soft) 50%, var(--vg-brass) 70%, transparent) !important;
}
.u-section-2 .u-group-1:hover,
.u-section-2 .u-group-2:hover {
  border-color: var(--vg-green-600) !important;
  box-shadow: var(--vg-shadow-lg) !important;
}
.u-section-2 .u-group-1.selected,
.u-section-2 .u-group-2.selected {
  border: 2px solid var(--vg-green-700) !important;
  box-shadow: 0 0 0 3px rgba(47, 93, 58, 0.35), var(--vg-shadow-md) !important;
}

/* Team record / label text inside cards */
.u-section-2 .u-text-2,
.u-section-2 .u-text-3,
.u-section-2 .u-group-1 h3,
.u-section-2 .u-group-2 h3 {
  color: var(--vg-ink) !important;
}
.u-section-2 .u-image-1,
.team-logo {
  border: 2px solid rgba(107, 74, 44, 0.25) !important;
}
.u-section-2 .u-icon-1 {
  background-image: linear-gradient(var(--vg-green-700), var(--vg-sage)) !important;
}

/* Injury report link */
.injury-btn {
  color: var(--vg-green-700) !important;
}
.injury-btn .u-icon svg path { fill: var(--vg-green-700) !important; }

/* Prev / next game arrows */
.prev-game-btn,
.next-game-btn {
  background: var(--vg-brass) !important;
  color: var(--vg-leather-900) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: var(--vg-shadow-sm) !important;
}
.prev-game-btn:hover,
.next-game-btn:hover {
  background: var(--vg-brass-soft) !important;
  box-shadow: 0 0 16px rgba(195, 154, 63, 0.5) !important;
}

/* Kickoff / bet options card (right cell) */
.u-section-2 .u-group-3 {
  background: var(--vg-card) !important;
  border: 1px solid var(--vg-leather-600) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-md) !important;
}
#kickoffTime {
  color: var(--vg-green-700) !important;
  font-family: var(--vg-serif) !important;
}
.upset-label-text { color: var(--vg-ink) !important; font-weight: 700; }

.bet-group {
  background: var(--vg-card-2) !important;
  border: 1px solid rgba(107, 74, 44, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.bet-group-title { color: var(--vg-green-700) !important; }
.bet-option { color: var(--vg-ink) !important; }
.bet-option input[type="radio"] { accent-color: var(--vg-green-700); }
.upset-toggle-row input[type="checkbox"] { accent-color: var(--vg-brass); }

/* -----------------------------------------------------------------------------
   6. Sportsbook / headlines tabs
   -------------------------------------------------------------------------- */
.u-section-2 .u-tabs-1 {
  background: var(--vg-leather-800) !important;
  border: 1px solid var(--vg-leather-600) !important;
  box-shadow: var(--vg-shadow-lg) !important;
}
.u-section-2 .u-tab-list-1 {
  background: linear-gradient(180deg, var(--vg-leather-700), var(--vg-leather-900)) !important;
  border-style: solid !important;
  border-bottom: 2px solid var(--vg-brass) !important;
}
.u-section-2 [class*="u-tab-link-"] {
  background: rgba(251, 245, 230, 0.06) !important;
  color: var(--vg-lace) !important;
  border: 1px solid rgba(195, 154, 63, 0.18) !important;
  border-bottom: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.u-section-2 [class*="u-tab-link-"]:hover {
  background: rgba(195, 154, 63, 0.18) !important;
  color: var(--vg-brass-soft) !important;
  box-shadow: none !important;
}
.u-section-2 [class*="u-tab-link-"].active {
  background: var(--vg-card) !important;
  color: var(--vg-green-700) !important;
  border-color: var(--vg-brass) !important;
  box-shadow: 0 -4px 14px rgba(195, 154, 63, 0.25) !important;
}
.u-section-2 [class*="u-tab-pane"] {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Headline cards */
.headline-item {
  background: var(--vg-card) !important;
  border: 1px solid rgba(107, 74, 44, 0.20) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-sm) !important;
}
.headline-item.placeholder {
  background: transparent !important;
  color: rgba(254, 250, 240, 0.85) !important;
  border: none !important;
}
.headline-title { color: var(--vg-ink) !important; }
.headline-title:hover { color: var(--vg-green-700) !important; }
.headline-meta { color: var(--vg-ink-soft) !important; }

/* Ask AI output */
.ask-ai-output {
  background: var(--vg-card) !important;
  color: var(--vg-ink) !important;
  border: 1px solid rgba(107, 74, 44, 0.20) !important;
}
#link-tab-askai { color: var(--vg-rust) !important; }

/* -----------------------------------------------------------------------------
   7. Games table (section 3)
   -------------------------------------------------------------------------- */
.u-section-3 {
  background: var(--vg-leather-900) !important;
}
.u-section-3 .u-table-1 {
  background: var(--vg-card) !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: var(--vg-shadow-lg), 0 0 0 1px rgba(195, 154, 63, 0.30) !important;
  backdrop-filter: none !important;
}
.u-table-1 td {
  color: var(--vg-ink) !important;
}
.u-table-1 th,
.u-table-1 td {
  border-bottom: 1px solid rgba(107, 74, 44, 0.18) !important;
}
.u-section-3 .u-table-header-1 {
  background: linear-gradient(180deg, var(--vg-green-600), var(--vg-green-900)) !important;
  color: var(--vg-lace) !important;
  border-bottom: 2px solid var(--vg-brass) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
.u-section-3 .u-table-header-1::after {
  background: linear-gradient(90deg, transparent, var(--vg-brass) 20%, var(--vg-brass-soft) 50%, var(--vg-brass) 80%, transparent) !important;
}
/* "Game/Home/Visiting/Your Pick" emphasised cells */
.u-section-3 .u-table-cell-1,
.u-section-3 .u-table-cell-2,
.u-section-3 .u-table-cell-3,
.u-section-3 .u-table-cell-4 {
  background: rgba(47, 93, 58, 0.10) !important;
  color: var(--vg-green-700) !important;
  text-shadow: none !important;
}
.u-table-1 tbody tr { background: var(--vg-card) !important; }
.u-table-1 tbody tr:nth-child(even) { background: var(--vg-card-2) !important; }
.u-table-1 tbody tr:hover {
  background: rgba(195, 154, 63, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(195, 154, 63, 0.40) !important;
}

/* Semantic result colors — kept meaningful, toned to the vintage palette */
.favored-team,
.pick-correct, .spread-correct, .ou-correct {
  color: var(--vg-green-700) !important;
  text-shadow: none !important;
}
.underdog-team,
.pick-incorrect, .spread-incorrect, .ou-incorrect,
.score-status--final {
  color: var(--vg-rust) !important;
  text-shadow: none !important;
}
.is-upset-cell { background: rgba(195, 154, 63, 0.20) !important; }

/* -----------------------------------------------------------------------------
   8. Footer + back-to-top
   -------------------------------------------------------------------------- */
.u-footer.u-grey-80 {
  background: linear-gradient(180deg, var(--vg-leather-800), var(--vg-leather-900)) !important;
  border-top: 3px solid var(--vg-brass);
}
.u-social-icons .u-icon { color: var(--vg-brass) !important; transition: color 0.2s ease; }
.u-social-icons .u-social-url:hover .u-icon { color: var(--vg-brass-soft) !important; }

.u-back-to-top.u-palette-1-base {
  background-color: var(--vg-brass) !important;
  color: var(--vg-leather-900) !important;
  box-shadow: var(--vg-shadow-md) !important;
}
.u-back-to-top.u-palette-1-base:hover {
  background-color: var(--vg-brass-soft) !important;
}
.u-back-to-top svg { fill: var(--vg-leather-900) !important; }

/* =============================================================================
   9. LAYOUT — structural restyle (sleek / modern composition)
   ============================================================================= */

/* ---- Sticky, compact, frosted header ------------------------------------- */
#header.u-header {
  min-height: 110px !important;
  padding: 0 clamp(16px, 4vw, 44px) !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  background: linear-gradient(180deg, rgba(36, 24, 16, 0.92), rgba(36, 24, 16, 0.97)) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header-branding {
  gap: 14px !important;
  padding: 8px 0 !important;
}
.header-branding .u-logo-image,
.u-logo-image-1 {
  height: 64px !important;
  width: 74px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  filter: none !important;
}
#header.u-header .header-site-title {
  font-size: clamp(1.35rem, 2.4vw, 2.05rem) !important;
  letter-spacing: 0.015em !important;
}
/* push the menu to the right edge -> proper modern nav bar */
#header.u-header .u-menu {
  margin-left: auto !important;
}
#header.u-header .u-nav-1 {
  gap: 4px !important;
  width: auto !important;
  justify-content: flex-end !important;
}
/* tighten the oversized inline nav padding into clean pill links */
#header .u-nav-1 .u-nav-link {
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em;
}

/* ---- Section rhythm + centered containers -------------------------------- */
.u-section-1,
.u-section-2,
.u-section-3 {
  padding-top: clamp(44px, 6vw, 84px) !important;
  padding-bottom: clamp(44px, 6vw, 84px) !important;
}
.u-section-2 .u-sheet-1,
.u-section-3 .u-sheet-1 {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 28px) !important;
  padding-right: clamp(16px, 3vw, 28px) !important;
}
/* hide the dated decorative hairline in the hero */
.u-section-1 .u-line-1 { display: none !important; }

/* ---- Hero: the welcome panel becomes a contained, elevated card ---------- */
.u-section-1 { min-height: auto !important; }
.u-section-1 .u-group-1 {
  max-width: 1160px !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(26px, 4vw, 56px) !important;
  border-radius: 22px !important;
}
.u-section-1 .u-container-layout-1 { padding: 0 !important; }

/* Two-column hero grid */
.nwb-hero {
  width: auto !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  background: transparent;
}
@media (max-width: 900px) {
  .nwb-hero { grid-template-columns: 1fr; gap: 28px; }
}

.nwb-hero__main { min-width: 0; }
.nwb-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--vg-brass);
  margin: 0 0 12px;
}
.u-section-1 .nwb-hero__headline {
  font-family: var(--vg-serif) !important;
  font-size: clamp(2.5rem, 5.2vw, 4.1rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  text-align: left !important;
  margin: 0 0 18px !important;
  color: var(--vg-green-700) !important;
  -webkit-text-fill-color: var(--vg-green-700) !important;
  text-shadow: none !important;
}
.nwb-hero__welcome {
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 0 0 14px !important;
  max-width: none !important;
  color: var(--vg-green-700) !important;
}
.nwb-hero__lede {
  font-size: 1.04rem !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
  text-align: left !important;
  max-width: 60ch;
  margin: 0 0 16px !important;
  color: var(--vg-ink) !important;
}
.nwb-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.nwb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--vg-serif);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.nwb-btn--primary {
  background: linear-gradient(180deg, var(--vg-green-600), var(--vg-green-900));
  color: var(--vg-lace) !important;
  box-shadow: var(--vg-shadow-md);
}
.nwb-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--vg-shadow-lg); }
.nwb-btn--ghost {
  background: transparent;
  color: var(--vg-green-700) !important;
  border: 2px solid var(--vg-green-700);
}
.nwb-btn--ghost:hover { background: var(--vg-green-700); color: var(--vg-lace) !important; }

/* ---- "How it works" card + scoring chips --------------------------------- */
.nwb-howto {
  background: linear-gradient(180deg, var(--vg-card-2), var(--vg-card));
  border: 1px solid rgba(107, 74, 44, 0.22);
  border-radius: var(--vg-radius-lg);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--vg-shadow-md);
  position: sticky;
  top: 94px;
}
@media (max-width: 900px) { .nwb-howto { position: static; } }
.nwb-howto__title {
  font-family: var(--vg-serif) !important;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--vg-green-700);
  margin: 0 0 12px;
}
.nwb-howto__text {
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  text-align: left !important;
  font-weight: 500 !important;
  color: var(--vg-ink-soft) !important;
  margin: 0 0 20px !important;
  max-width: none !important;
}
.nwb-scoring__label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--vg-brass);
  margin: 0 0 10px;
}
.nwb-scoring__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.nwb-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--vg-lace);
  border: 1px solid rgba(107, 74, 44, 0.2);
  border-radius: 13px;
  padding: 11px 13px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.nwb-chip:hover { transform: translateY(-2px); box-shadow: var(--vg-shadow-sm); }
.nwb-chip__pts {
  font-family: var(--vg-serif);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--vg-green-700);
}
.nwb-chip__lbl { font-size: 0.82rem; font-weight: 600; color: var(--vg-ink-soft); }
.nwb-chip--gold {
  background: linear-gradient(180deg, rgba(195, 154, 63, 0.20), rgba(195, 154, 63, 0.07));
  border-color: rgba(195, 154, 63, 0.5);
}
.nwb-chip--gold .nwb-chip__pts { color: var(--vg-brass); }
@media (max-width: 480px) { .nwb-scoring__grid { grid-template-columns: 1fr; } }

/* ---- Logged-in sections: layout polish ----------------------------------- */
/* Week selector heading scaled up + breathing room */
.u-section-2 #weekHeading,
.week-header .u-text-1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}
.week-header { margin-top: 0 !important; margin-bottom: 22px !important; }

/* Picks grid: consistent gap, never cramped */
.game-selection-grid {
  gap: clamp(16px, 2vw, 24px) !important;
  align-items: stretch !important;
}
.u-section-2 .u-group-3 { height: 100%; }

/* Sportsbook tab block + table get matching rounded, contained framing */
.u-section-2 .u-tabs-1 { border-radius: 16px !important; }
.u-section-3 .u-table-1 { border-radius: 16px !important; }

/* Roster / leaderboard split spacing */
.hero-split { gap: clamp(20px, 3vw, 40px) !important; }

/* ---- Footer: roomier, centered modern strip ------------------------------ */
.u-footer.u-grey-80 {
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}
.u-social-icons-1 {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  align-items: center !important;
}
.u-social-icons-1 .u-social-url { transition: transform 0.15s ease; }
.u-social-icons-1 .u-social-url:hover { transform: translateY(-2px); }

/* =============================================================================
   10. Dashboard — Pool Leaderboard chart + Winner box + Prize cards
   Recolors the logged-in dashboard (dashboard-base.html) from the old
   cyan/orange/navy/neon palette into the vintage leather + green + brass scheme.
   ============================================================================= */

/* ---- Leaderboard chart (inside .hero-grid-cell--chart) -------------------- */
.hero-grid-cell--chart .score-chart-title {
  font-family: var(--vg-serif) !important;
  color: var(--vg-green-700) !important;
  text-shadow: none !important;
}
.hero-grid-cell--chart .score-chart-container::before {
  background: linear-gradient(90deg, transparent, var(--vg-brass) 20%, var(--vg-brass-soft) 50%, var(--vg-brass) 80%, transparent) !important;
  animation: none !important;
}
.hero-grid-cell--chart .score-chart-legend {
  background: var(--vg-card-2) !important;
  border: 1px solid rgba(107, 74, 44, 0.22) !important;
}
.hero-grid-cell--chart .legend-item { color: var(--vg-ink) !important; }
.hero-grid-cell--chart .legend-week::before {
  background: linear-gradient(to right, var(--vg-green-700), var(--vg-green-500)) !important;
  box-shadow: none !important;
}
.hero-grid-cell--chart .legend-season::before {
  background: linear-gradient(to right, #a9762f, var(--vg-brass-soft)) !important;
  box-shadow: none !important;
}
.hero-grid-cell--chart .score-bar-name {
  color: var(--vg-ink) !important;
  text-shadow: none !important;
}
.hero-grid-cell--chart .score-bar-name::after {
  background: linear-gradient(to bottom, transparent, rgba(107, 74, 44, 0.45), transparent) !important;
}
.hero-grid-cell--chart .score-bar--week {
  background: linear-gradient(to right, var(--vg-green-700), var(--vg-green-500)) !important;
  border: 1px solid rgba(47, 93, 58, 0.5) !important;
  box-shadow: 0 2px 6px rgba(47, 93, 58, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.hero-grid-cell--chart .score-bar--season {
  background: linear-gradient(to right, #a9762f, var(--vg-brass)) !important;
  border: 1px solid rgba(195, 154, 63, 0.5) !important;
  box-shadow: 0 2px 6px rgba(195, 154, 63, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.hero-grid-cell--chart .score-bar-value {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}
.hero-grid-cell--chart .score-bar::before { animation: none !important; }

/* ---- Winner / roster cell (the "winner box") ----------------------------- */
.dashboard-roster-cell {
  background: linear-gradient(135deg, var(--vg-leather-700), var(--vg-leather-900)) !important;
  border: 2px solid var(--vg-leather-600) !important;
}
.dashboard-roster-cell::before {
  background: linear-gradient(90deg, transparent, var(--vg-brass) 20%, var(--vg-brass-soft) 50%, var(--vg-brass) 80%, transparent) !important;
}
.dashboard-roster-cell.weekly-winner {
  border: 3px solid var(--vg-brass) !important;
  border-bottom: 8px solid var(--vg-brass) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 20px rgba(195, 154, 63, 0.40) !important;
}
.dashboard-roster-cell.weekly-winner::after { color: var(--vg-brass-soft) !important; }
.dashboard-roster-cell.weekly-tie {
  border: 3px solid #b5743a !important;
  border-bottom: 8px solid #b5743a !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 20px rgba(181, 116, 58, 0.40) !important;
}
.dashboard-roster-cell.weekly-tie::after { color: #d9a45e !important; }
.dashboard-roster-name { color: var(--vg-lace) !important; }
.dashboard-roster-scores {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.24)) !important;
  border: 1px solid rgba(195, 154, 63, 0.30) !important;
}
.dashboard-roster-score-label { color: var(--vg-sage) !important; text-shadow: none !important; }
.dashboard-roster-score-value { color: #ecdcb8 !important; text-shadow: none !important; }
.dashboard-roster-score-value--season { color: var(--vg-brass-soft) !important; text-shadow: none !important; }
.dashboard-roster-avatar { border-color: rgba(147, 160, 106, 0.55) !important; }
/* NOTE: the avatar status halos (is-complete green / is-partial amber /
   is-none red) are functional indicators and are intentionally left as-is. */

/* ---- Prize cards (Weekly / Season) --------------------------------------- */
.hero-prize-card {
  background: linear-gradient(135deg, var(--vg-leather-700), var(--vg-leather-900)) !important;
  border: 1px solid var(--vg-leather-600) !important;
  box-shadow: var(--vg-shadow-md) !important;
}
.hero-prize-header h3 {
  font-family: var(--vg-serif) !important;
  color: var(--vg-brass-soft) !important;
}