/* =============================================================================
   No Way Bets — "Vintage Gridiron" GLOBAL theme
   -----------------------------------------------------------------------------
   Safe, site-wide presentational layer. Loaded LAST on every shared/Nicepage
   page. It themes only the chrome (header / nav / footer), brand accents
   (palette + gradient utility classes), form controls, generic tables and
   typography — it deliberately does NOT touch page-specific section layouts
   (.u-section-1/2/3 etc.), so it cannot hide a page's own content or text.

   Index + dashboard game UI get the heavier `redesign.css` instead.
   ============================================================================= */

:root {
  --vg-ink:        #2b2017;
  --vg-ink-soft:   #5d4c39;
  --vg-leather-900:#241810;
  --vg-leather-800:#33241a;
  --vg-leather-700:#4a3422;
  --vg-leather-600:#6b4a2c;

  --vg-cream:      #f1e7d0;
  --vg-card:       #fbf5e6;
  --vg-card-2:     #f5ecd6;
  --vg-lace:       #fefaf0;

  --vg-green-900:  #1f3a27;
  --vg-green-700:  #2f5d3a;
  --vg-green-600:  #3c7a4a;
  --vg-green-500:  #4f9a60;
  --vg-sage:       #93a06a;

  --vg-brass:      #c39a3f;
  --vg-brass-soft: #d9b96a;
  --vg-rust:       #9d3b26;

  --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 + typography
   -------------------------------------------------------------------------- */
.u-body {
  background: var(--vg-cream) !important;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Brand serif for titles (font only — never force heading color globally) */
.u-body .u-title,
.u-body .header-site-title,
.u-body .u-custom-font.u-title {
  font-family: var(--vg-serif) !important;
}

/* -----------------------------------------------------------------------------
   2. Brand accent remap (Nicepage palette + gradient utilities)
   These recolor buttons / accents / bars across every page in one shot.
   -------------------------------------------------------------------------- */
.u-body .u-gradient {
  background-image: linear-gradient(180deg, var(--vg-green-600), var(--vg-green-900)) !important;
}
.u-body .u-palette-1-base { background-color: var(--vg-green-700) !important; }
.u-body .u-palette-2-base { background-color: var(--vg-brass) !important; }
.u-body .u-text-palette-1-base { color: var(--vg-green-700) !important; }
.u-body .u-text-palette-2-base { color: var(--vg-green-700) !important; }
.u-body .u-border-palette-1-base { border-color: var(--vg-green-700) !important; }
.u-body .u-border-palette-2-base { border-color: var(--vg-brass) !important; }

/* -----------------------------------------------------------------------------
   3. Shared header (chrome on every Nicepage page)
   -------------------------------------------------------------------------- */
#header.u-header {
  min-height: 96px !important;
  padding: 0 clamp(16px, 4vw, 44px) !important;
  display: flex;
  align-items: center;
  gap: 20px !important;
  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);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#header.u-header .header-site-title {
  font-family: var(--vg-serif) !important;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem) !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;
  letter-spacing: 0.015em !important;
}
.header-branding { gap: 14px !important; padding: 8px 0 !important; align-items: center; }

/* Logo coin emblem */
.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;
}
.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;
}

/* Nav: pushed to the right as clean pill links */
#header.u-header .u-menu { margin-left: auto !important; }
#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;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  transition: color 0.2s ease, background 0.2s ease;
}
#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 {
  color: var(--vg-brass-soft) !important;
  background: rgba(195, 154, 63, 0.12);
}
.u-hamburger-link .u-svg-content rect,
.u-menu-1 .u-icon rect { fill: var(--vg-lace) !important; }

/* My Pools dropdown + mobile slide-out */
.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; }
.u-sidenav,
.u-sidenav .u-black { background: var(--vg-leather-900) !important; }

/* Sponsor banner strip (where present) */
.site-banner { background: var(--vg-leather-900) !important; border-bottom: 1px solid rgba(195, 154, 63, 0.3); }
.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;
}

/* -----------------------------------------------------------------------------
   4. Form controls (safe everywhere: light field, dark text, brass focus)
   -------------------------------------------------------------------------- */
.u-body input[type="text"],
.u-body input[type="email"],
.u-body input[type="password"],
.u-body input[type="number"],
.u-body input[type="tel"],
.u-body input[type="search"],
.u-body input[type="url"],
.u-body input[type="date"],
.u-body select,
.u-body textarea,
.u-body .u-input {
  background-color: var(--vg-lace) !important;
  color: var(--vg-ink) !important;
  border: 1px solid rgba(107, 74, 44, 0.35) !important;
  border-radius: 10px !important;
}
.u-body input:focus,
.u-body select:focus,
.u-body textarea:focus,
.u-body .u-input:focus {
  border-color: var(--vg-brass) !important;
  box-shadow: 0 0 0 3px rgba(195, 154, 63, 0.25) !important;
  outline: none !important;
}
.u-body input::placeholder,
.u-body textarea::placeholder { color: rgba(93, 76, 57, 0.6) !important; }
.u-body input[type="checkbox"],
.u-body input[type="radio"] { accent-color: var(--vg-green-700); }

/* -----------------------------------------------------------------------------
   5. Buttons (rounded, serif label; color comes from palette remap above)
   -------------------------------------------------------------------------- */
.u-body .u-btn.u-button-style {
  border-radius: 10px !important;
  font-family: var(--vg-serif) !important;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.u-body .u-btn.u-button-style:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* Common bespoke "signup" green button -> brand green */
.signup-btn,
.auth-modal__submit { background-color: var(--vg-green-700) !important; }
.signup-btn:hover,
.auth-modal__submit:hover { background-color: var(--vg-green-600) !important; }

/* -----------------------------------------------------------------------------
   6. Generic tables (pages other than the index leaderboard)
   -------------------------------------------------------------------------- */
.u-body .u-table-entity thead th,
.u-body .u-table .u-table-header .u-table-cell {
  background-image: linear-gradient(180deg, var(--vg-green-600), var(--vg-green-900)) !important;
  color: var(--vg-lace) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}
.u-body .u-table-entity td { color: var(--vg-ink) !important; }

/* -----------------------------------------------------------------------------
   7. Footer + back-to-top (shared chrome)
   -------------------------------------------------------------------------- */
.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);
  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 .u-icon { color: var(--vg-brass) !important; transition: color 0.2s ease, transform 0.15s ease; }
.u-social-icons .u-social-url:hover .u-icon { color: var(--vg-brass-soft) !important; }
.u-social-icons .u-social-url:hover { transform: translateY(-2px); }

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

/* -----------------------------------------------------------------------------
   8. Generic content cards / panels used across admin & profile pages
   Subtle: only soften surfaces that are already light-ish; never force text color.
   -------------------------------------------------------------------------- */
.u-body .pool-profile-section {
  background: var(--vg-card) !important;
  border: 1px solid rgba(107, 74, 44, 0.18) !important;
  border-radius: var(--vg-radius-lg) !important;
  box-shadow: var(--vg-shadow-sm) !important;
}