/* SN88-inspired Theme Overrides (non-destructive) */
:root {
  --bg-0: #0a0c10;
  --bg-1: #0f1218;
  --bg-2: #121622;
  --surface: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text-1: #e9edf1;
  --text-2: #b7c1cc;
  --brand-1: #6c5cff; /* primary neon */
  --brand-2: #22d3ee; /* cyan accent */
  --brand-3: #ff6bcb; /* magenta accent */
  --glow: 0 0 0 1px rgba(108,92,255,0.35), 0 8px 24px rgba(34,211,238,0.15);
}

/* Force header to stay fixed on top, non-scrollable */
:root { --header-fixed-height: 88px; }
.header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100% !important;
  z-index: 3000 !important;
  overflow: hidden !important; /* prevent any internal scroll */
  overscroll-behavior: none !important; /* avoid pull/scroll on header area */
}
/* Reserve space for fixed header so content never hides under it */
body { padding-top: var(--header-fixed-height) !important; }

/* Page base */
html, body { background: radial-gradient(1200px 600px at 15% -10%, rgba(108,92,255,0.12), transparent 50%), radial-gradient(800px 500px at 85% -10%, rgba(34,211,238,0.12), transparent 55%), var(--bg-1) !important; color: var(--text-1); }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Containers wider and centered */
.container { max-width: 1240px !important; padding-left: 20px; padding-right: 20px; }

/* Header Redesign */
.header {
  background: linear-gradient(180deg, rgba(10,12,16,0.85), rgba(10,12,16,0.70)) !important;
  backdrop-filter: saturate(160%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-2), var(--brand-1), transparent);
  opacity: .6;
  pointer-events: none;
}
.header-container { gap: 22px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
.logo { text-decoration: none !important; }
.logo span { font-size: 20px; color: var(--text-1); text-shadow: 0 1px 0 rgba(0,0,0,0.25); }

/* Hamburger refinements */
.hamburger-btn { border-color: rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.06) !important; }
.hamburger-btn:hover { background: rgba(255,255,255,0.10) !important; }
.hamburger-dropdown { margin-top: 6px; border-color: rgba(255,255,255,0.18) !important; }

/* Header actions alignment and sizing */
.header-actions .btn { padding: 8px 14px !important; font-size: 13px !important; }
.header-actions .btn-outline { background: rgba(255,255,255,0.04) !important; }

/* Prevent layout shift */
.header, .header * { box-sizing: border-box; }

/* Buttons: pill neon */
.btn { border-radius: 999px !important; padding: 10px 18px !important; font-weight: 700 !important; letter-spacing: .2px; }
.btn-primary { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important; box-shadow: var(--glow) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.btn-secondary { background: linear-gradient(135deg, var(--brand-3), var(--brand-2)) !important; box-shadow: var(--glow) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.btn-outline { border: 1px solid var(--border) !important; background: rgba(255,255,255,0.02) !important; color: var(--text-1) !important; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Cards with glass and subtle glow */
.card { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important; border: 1px solid var(--border) !important; box-shadow: 0 2px 24px rgba(0,0,0,0.25) !important; }
.card-title { color: var(--text-1) !important; }
.card-subtitle { color: var(--text-2) !important; }
.card-actions { margin-top: 14px !important; gap: 10px !important; }

/* Section headings like hero titles */
.section-title { color: var(--text-1) !important; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important; -webkit-text-fill-color: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; }
.section-subtitle { color: var(--text-2) !important; }
.section { padding-top: 24px !important; padding-bottom: 24px !important; }

/* Hero */
.hero { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) !important; }
.hero-image img { border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 36px rgba(0,0,0,0.35); }

/* Banner / Notice */
.banner { background: linear-gradient(135deg, rgba(108,92,255,0.12), rgba(34,211,238,0.12)) !important; border: 1px solid rgba(255,255,255,0.12) !important; }
.banner-text { color: var(--text-1) !important; }

/* Navigation chip */
.navigation { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--border) !important; }
.nav-chip { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; }

/* Divider in H layout */
.divider-content { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--border) !important; }
.divider-line { background: linear-gradient(180deg, var(--brand-1), var(--brand-2)) !important; }

/* Winner CTA block */
.winner-container { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important; border: 1px solid var(--border) !important; box-shadow: 0 10px 32px rgba(0,0,0,0.3); }
.winner-title { background: linear-gradient(135deg, var(--brand-2), var(--brand-1)) !important; -webkit-text-fill-color: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* Bottom fixed nav */
.bottom-nav { background: rgba(10,12,16,0.86) !important; border-top: 1px solid var(--border) !important; backdrop-filter: saturate(140%) blur(12px) !important; }

/* Footer */
.footer { background: rgba(0,0,0,0.6) !important; border-top: 1px solid var(--border) !important; }
.footer-text { color: var(--text-2) !important; }

/* Typography tweaks */
h1,h2,h3 { letter-spacing: .2px; }

/* Focus states */
:where(a,button,.btn):focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 8px; }

/* Mobile adjustments */
@media (max-width: 768px) {
  .header-container { gap: 12px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  .logo span { font-size: 16px; }
  .header-actions .btn { padding: 8px 12px !important; }
  .btn { padding: 9px 16px !important; font-size: 13px !important; }
  .section { padding-top: 20px !important; padding-bottom: 20px !important; }
  :root { --header-fixed-height: 56px; }
}