/* ═══════════════════════════════════════════════════
   PIGEON RACER — Global Stylesheet
   Dark theme, gold accents, Cinzel + Rajdhani fonts
═══════════════════════════════════════════════════ */

:root {
  /* Item 34 S4.3 — warmer charcoal-blue palette (was near-black).
     Cards lift with --bg2; --panel2 used for hovered/focused panels. */
  --bg:         #1a1d2a;
  --bg2:        #222538;
  --bg3:        #2a2e44;
  --panel:      #1f2233;
  --panel2:     #292d42;
  --border:     #353a5a;
  --border2:    #454a78;
  --gold:       #FFD700;
  --gold2:      #e6b800;
  --gold-dim:   #b08820;
  --gold-glow:  rgba(255,215,0,0.18);
  --accent:     #5a8fff;
  --accent2:    #3a6fff;
  --text:       #e0e6f5;
  --text-dim:   #8090b8;
  --text-muted: #5a6488;
  --white:      #ffffff;
  --red:        #ff4444;
  --green:      #00cc66;
  --font-display: 'Cinzel', serif;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: #fff; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }

/* ═══════════════════════════════
   NAVBAR
═══════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(8,9,15,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav-inner {
  /* max-width: 1300px removed 30/05 — too narrow for the logged-in row
     (8 links + balance/bell/Messages/loft/Log Out). The capped box forced
     the auth group to overflow the right edge, clipping "Log Out". Going
     full-width lets the group pack left beside Contact with slack on the right. */
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
/* Logo icon — shows gold pigeon PNG instead of the emoji.
   The <span class="logo-icon">🕊</span> markup sits untouched across the site;
   we hide the emoji text and render the image via background. */
.logo-icon {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  vertical-align: middle;
  background-image: url("logo_bird.png") !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  font-size: 0 !important;          /* kills the emoji rendering entirely */
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-icon::before, .logo-icon::after { content: none !important; }

/* Larger variant for admin login screen (was font-size 36px) */
.admin-logo .logo-icon { width: 44px !important; height: 44px !important; }

/* Smaller variant for play-nav (was font-size 18px) */
.play-nav .logo-icon { width: 24px !important; height: 24px !important; }
.logo-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 2px;
}
.logo-accent { color: var(--gold); }

.nav-links {
  display: flex;
  gap: 4px;
  /* flex: 1 removed 30/05 — it grew the links to fill the row and pushed
     .nav-auth (flex-shrink:0) hard against the right edge, clipping "Log Out".
     Without it, links take natural width and the logged-in auth group
     (balance / bell / Messages / loft / Log Out) packs left, beside Contact. */
}
.nav-link {
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
  transition: all 0.2s;
  text-decoration: none;
}
.nav-link:hover, .nav-link.active {
  color: var(--gold);
  background: var(--gold-glow);
}

.nav-auth {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--gold);
  font-size: 22px;
  cursor: pointer;
  margin-left: auto;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 16px 24px;
}
.mobile-nav a {
  padding: 10px 0;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.mobile-nav.open { display: flex; }

/* ═══════════════════════════════
   BUTTONS
═══════════════════════════════ */
.btn-gold {
  background: var(--gold);
  color: #000;
  border: none;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-gold:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 20px var(--gold-glow); }

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { color: var(--white); border-color: var(--gold-dim); }

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 12px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}
.btn-outline:hover { background: var(--gold-glow); color: #fff; }

.btn-hero-primary {
  background: var(--gold);
  color: #000;
  padding: 16px 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  border-radius: 4px;
  display: inline-block;
  transition: all 0.25s;
  border: none;
}
.btn-hero-primary:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(255,215,0,0.4);
}

.btn-hero-secondary {
  background: transparent;
  color: var(--text);
  padding: 16px 36px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--border2);
  transition: all 0.25s;
}
.btn-hero-secondary:hover { border-color: var(--gold-dim); color: var(--gold); }

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 64px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,215,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(255,215,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.floating-birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fbird {
  position: absolute;
  font-size: 28px;
  opacity: 0.06;
  animation: floatBird linear infinite;
}
.f1 { left: 10%; top: 20%; animation-duration: 18s; animation-delay: 0s; font-size: 20px; }
.f2 { left: 80%; top: 15%; animation-duration: 24s; animation-delay: -6s; font-size: 36px; }
.f3 { left: 30%; top: 70%; animation-duration: 20s; animation-delay: -10s; font-size: 24px; }
.f4 { left: 65%; top: 60%; animation-duration: 16s; animation-delay: -4s; font-size: 18px; }
.f5 { left: 50%; top: 40%; animation-duration: 28s; animation-delay: -14s; font-size: 32px; }

@keyframes floatBird {
  0%   { transform: translateY(0px) translateX(0px); opacity: 0.06; }
  25%  { transform: translateY(-20px) translateX(15px); }
  50%  { transform: translateY(-5px) translateX(30px); opacity: 0.1; }
  75%  { transform: translateY(-25px) translateX(15px); }
  100% { transform: translateY(0px) translateX(0px); opacity: 0.06; }
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: 40px 24px;
  animation: heroFadeIn 1s ease both;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-block;
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-display);
  line-height: 0.9;
  margin-bottom: 20px;
}
.title-line1 {
  display: block;
  font-size: clamp(60px, 10vw, 110px);
  font-weight: 900;
  color: var(--white);
  letter-spacing: 12px;
  text-shadow: 0 0 60px rgba(255,215,0,0.2);
}
.title-line2 {
  display: block;
  font-size: clamp(60px, 10vw, 110px);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 12px;
  text-shadow: 0 0 80px rgba(255,215,0,0.5);
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-desc {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero-stats {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: center;
  background: rgba(255,215,0,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 40px;
  display: inline-flex;
}
.hstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px;
}
.hstat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--gold);
}
.hstat-label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hstat-div {
  width: 1px;
  height: 40px;
  background: var(--border);
}
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ═══════════════════════════════
   SECTION COMMONS
═══════════════════════════════ */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}
.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-dim);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  color: var(--white);
  margin-bottom: 48px;
  font-weight: 700;
}

/* ═══════════════════════════════
   FEATURES
═══════════════════════════════ */
.features {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.feature-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon { font-size: 36px; margin-bottom: 16px; }
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 10px;
}
.feature-card p { color: var(--text-dim); font-size: 15px; line-height: 1.7; }

/* ═══════════════════════════════
   RACE PROMO
═══════════════════════════════ */
.race-promo {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.rp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.rp-text h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  color: var(--white);
  margin-bottom: 16px;
}
.rp-text p { color: var(--text-dim); font-size: 16px; line-height: 1.7; margin-bottom: 32px; }

.race-countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.rc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 20px;
  min-width: 72px;
}
.rc-num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
  font-weight: 700;
  line-height: 1;
}
.rc-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.rc-sep { font-family: var(--font-display); font-size: 28px; color: var(--gold-dim); margin-bottom: 16px; }

.race-next-info { display: flex; gap: 10px; flex-wrap: wrap; }
.rni-badge {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}

.rp-map-placeholder {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  aspect-ratio: 4/3;
}
.rp-map-inner {
  background: radial-gradient(ellipse at 50% 50%, #0d1525 0%, #080c18 100%);
  border-radius: 6px;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rp-map-europe {
  background:
    linear-gradient(rgba(8,12,24,0.35), rgba(8,12,24,0.55)),
    url('int_europe.PNG') center/cover no-repeat;
}
.rp-map-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(8,12,24,0.75);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--gold-dim);
  z-index: 3;
}
.rp-home, .rp-release {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 24px;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.9));
  z-index: 2;
}
.rp-home {
  animation: pulseHome 2s ease infinite;
}
@keyframes pulseHome {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(0,0,0,0.9)) drop-shadow(0 0 6px #00ff88); }
  50% { filter: drop-shadow(0 0 4px rgba(0,0,0,0.9)) drop-shadow(0 0 14px #00ff88); }
}
.rp-bird {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.6);
  box-shadow: 0 0 6px rgba(0,0,0,0.7);
  z-index: 2;
  left: 79%;
  top: 58%;
  transform: translate(-50%, -50%);
}
.rp-bird-1 { background: #ff3b3b; animation: flyHome 6s ease-in-out infinite; animation-delay: 0s; }
.rp-bird-2 { background: #00b6ff; animation: flyHome 6s ease-in-out infinite; animation-delay: 0.9s; }
.rp-bird-3 { background: #ffd84a; animation: flyHome 6s ease-in-out infinite; animation-delay: 1.8s; }
.rp-bird-4 { background: #35d94a; animation: flyHome 6s ease-in-out infinite; animation-delay: 2.7s; }
.rp-bird-5 { background: #ff52d9; animation: flyHome 6s ease-in-out infinite; animation-delay: 3.6s; }
.rp-bird-6 { background: #b061ff; animation: flyHome 6s ease-in-out infinite; animation-delay: 4.5s; }
@keyframes flyHome {
  0%   { left: 79%; top: 58%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 26%; top: 14%; opacity: 0; }
}
.rp-entries {
  position: absolute;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: rgba(8,12,24,0.75);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  z-index: 3;
}

/* ═══════════════════════════════
   HOW IT WORKS
═══════════════════════════════ */
.how-works {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.steps {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.step {
  flex: 1;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
}
.step-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--border2);
  line-height: 1;
  margin-bottom: 16px;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 10px;
}
.step p { color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.step-arrow {
  font-size: 28px;
  color: var(--border2);
  align-self: center;
  margin-top: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════
   LEADERBOARD PREVIEW
═══════════════════════════════ */
.lb-preview { background: var(--bg); }
.lb-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.lb-table thead tr {
  background: var(--panel2);
  border-bottom: 2px solid var(--border);
}
.lb-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lb-table td {
  padding: 14px 20px;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.lb-table tbody tr { transition: background 0.2s; }
.lb-table tbody tr:hover { background: var(--panel); }
.lb-gold td { color: var(--gold); }
.lb-silver td { color: #c0c0c0; }
.lb-bronze td { color: #cd7f32; }

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
.footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 40px 24px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a { font-size: 14px; color: var(--text-muted); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 12px; color: var(--text-muted); }

/* ═══════════════════════════════
   MODAL
═══════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px;
  width: 100%;
  max-width: 440px;
  position: relative;
  animation: modalIn 0.25s ease both;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--white); }
.modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  margin-bottom: 28px;
}
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 6px;
}
.modal-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  width: 100%;
  transition: border-color 0.2s;
  outline: none;
  -webkit-appearance: none;
}
.modal-input:focus { border-color: var(--gold-dim); }
.modal-input option { background: var(--bg2); }
.modal-submit {
  margin-top: 16px;
  width: 100%;
  padding: 14px;
  font-size: 15px;
}
.modal-switch {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
}
.modal-switch a { color: var(--gold); }

/* ═══════════════════════════════
   PAGE HEADER (inner pages)
   Item 34 S4.3 — slimmed down so content lands above the fold.
═══════════════════════════════ */
.page-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 48px 24px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,215,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
.page-header-content { position: relative; z-index: 1; }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.8vw, 34px);
  color: var(--white);
  letter-spacing: 3px;
}
.page-header h1 span { color: var(--gold); }
.page-header p { color: var(--text-dim); font-size: 15px; margin-top: 8px; }
.page-header .section-label { font-size: 12px; }

/* ═══════════════════════════════
   RACE CARDS (races.html)
═══════════════════════════════ */
.race-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  transition: all 0.25s;
  margin-bottom: 16px;
}
.race-card:hover { border-color: var(--gold-dim); }
.race-card.live { border-color: var(--green); }
.race-card.completed { opacity: 0.6; }

.rc-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rc-status.open { background: rgba(0,204,102,0.15); color: var(--green); border: 1px solid rgba(0,204,102,0.3); }
.rc-status.upcoming { background: var(--gold-glow); color: var(--gold); border: 1px solid var(--gold-dim); }
.rc-status.live { background: rgba(255,68,68,0.15); color: var(--red); border: 1px solid rgba(255,68,68,0.3); animation: blink 1.5s ease infinite; }
.rc-status.finished { background: var(--panel2); color: var(--text-muted); border: 1px solid var(--border); }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.rc-title { font-family: var(--font-display); font-size: 20px; color: var(--white); margin-bottom: 6px; }
.rc-meta { display: flex; gap: 20px; flex-wrap: wrap; }
.rc-meta span { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.rc-meta span strong { color: var(--text); }
.rc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rc-prize { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.rc-prize-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.rc-entries-count { font-size: 13px; color: var(--text-muted); }

/* ═══════════════════════════════
   FORUM (forum.html)
═══════════════════════════════ */
.forum-category {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}
.forum-cat-header {
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.forum-cat-icon { font-size: 20px; }
.forum-cat-title { font-family: var(--font-display); font-size: 16px; color: var(--gold); }
.forum-cat-desc { font-size: 13px; color: var(--text-muted); margin-left: auto; }

.forum-topic {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
  transition: background 0.2s;
}
.forum-topic:last-child { border-bottom: none; }
.forum-topic:hover { background: rgba(255,215,0,0.02); }
.forum-topic-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  transition: color 0.2s;
  cursor: pointer;
}
.forum-topic-title:hover { color: var(--gold); }
.forum-topic-meta { font-size: 12px; color: var(--text-muted); }
.forum-topic-pin { color: var(--gold-dim); font-size: 12px; margin-right: 6px; }
.forum-replies { text-align: center; }
.forum-replies-num { font-family: var(--font-display); font-size: 18px; color: var(--text); }
.forum-replies-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.forum-last-post { text-align: right; font-size: 12px; color: var(--text-muted); min-width: 120px; }

/* ═══════════════════════════════
   GUIDE (howtoplay.html)
═══════════════════════════════ */
.guide-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
.guide-sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  position: sticky;
  top: 84px;
}
.guide-sidebar h3 {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.guide-nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  transition: all 0.2s;
  margin-bottom: 2px;
  text-decoration: none;
}
.guide-nav-link:hover, .guide-nav-link.active { color: var(--gold); background: var(--gold-glow); }
.guide-content h2 {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--white);
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.guide-content h2:first-child { margin-top: 0; }
.guide-content h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  margin: 28px 0 10px;
}
.guide-content p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}
.guide-content ul {
  margin: 0 0 16px 20px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 2;
}
.guide-tip {
  background: var(--gold-glow);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 14px 20px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--gold);
}
.guide-tip strong { font-weight: 700; }

/* ═══════════════════════════════
   PLAY PAGE
═══════════════════════════════ */
.play-page {
  padding-top: 64px;
  min-height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.play-frame-wrap {
  width: 100%;
  max-width: 1400px;
  background: #000;
  border: 1px solid var(--border);
}
.play-frame-placeholder {
  width: 100%;
  aspect-ratio: 1400/680;
  background: radial-gradient(ellipse at 50% 50%, #0d1525 0%, #050810 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.play-placeholder-icon { font-size: 64px; }
.play-placeholder-text {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  letter-spacing: 4px;
}
.play-placeholder-sub { font-size: 15px; color: var(--text-muted); }

/* ═══════════════════════════════
   RING DISPLAY (item 43 — pigeon ring numbers)
   Used wherever a real ring number is rendered as a label
   alongside or in place of a bird's display name. Mono font
   so digits align in tabular contexts (race results, leaderboard
   rows). Colour: same gold as other identifying labels.
═══════════════════════════════ */
.ring-display {
  font-family: var(--font-mono);
  color: var(--gold);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.ring-display-muted {
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
/* 23/09 — LAPTOP NAV. Logged in, the nav needed ~1,630px, so on a 1366 or
   1536px laptop (1920 @125% scaling — the commonest) LOG OUT sat off the
   right edge and players had to zoom out to find it. auth.js now makes
   Messages an icon and puts Log Out in the loft-name menu; these two rules
   do the rest. Measured logged in: one line from 1341px up; 901–1340px the
   LINKS move into the ☰ menu while balance / bell / ✉ / loft menu stay
   visible (below 900 the phone rule hides the whole group, as before). */
@media (max-width: 1500px) {
  .nav-link { padding: 6px 9px; font-size: 13px; letter-spacing: 0.5px; }
  .nav-auth { gap: 8px; }
}
@media (max-width: 1340px) and (min-width: 901px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; margin-left: 12px; }
}
@media (max-width: 900px) {
  .nav-links, .nav-auth { display: none; }
  .nav-hamburger { display: block; }
  .rp-inner { grid-template-columns: 1fr; }
  .steps { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); align-self: center; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-sidebar { position: static; }
  .race-card { grid-template-columns: 1fr; }
  .rc-actions { align-items: flex-start; }
}
@media (max-width: 600px) {
  .hero-stats { display: none; }
  .hstat { padding: 0 16px; }
  .forum-topic { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════
   TOUCH SCREENS — finger-sized targets (24/09)
   Phones and tablets only (pointer: coarse): desktop and laptop layouts are
   untouched. 44px is the common minimum for a fingertip. Pills and filter
   chips are clickable <span>s, so they need inline-flex for min-height to
   take effect at all. The game canvas is handled separately (tap assist in
   game_club_only.js), because enlarging it here would change nothing inside it.
═══════════════════════════════ */
@media (pointer: coarse) {
  button, .btn-gold, .btn-ghost, .btn-outline,
  input[type="button"], input[type="submit"] { min-height: 44px; }
  a.btn-gold, a.btn-ghost, a.btn-outline { display: inline-flex; align-items: center; justify-content: center; }
  .nav-link, .mobile-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .mobile-nav a { display: flex; }
  select, input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="number"] { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  .bp-sort-pill, .bp-filter-pill, .race-filter-btn, .tr-hd-btn, .tr-hd-x {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  .bp-info { padding: 12px 12px; margin: -12px -8px -12px -6px; }
}