/* ── Reset & base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #0f0f1a;
  color: #d4d4e0;
  min-height: 100vh;
}

/* ── Header ────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-bottom: 2px solid #c9aa71;
  padding: 1.5rem 2rem;
  text-align: center;
}
header h1 {
  font-size: 1.8rem;
  color: #c9aa71;
  letter-spacing: 1px;
}
header p {
  color: #8888aa;
  margin-top: .3rem;
  font-size: .9rem;
}

/* ── Top navigation ────────────────────────────────────── */
.top-nav {
  max-width: 1200px; margin: 0 auto; padding: .8rem 1rem 0;
  display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
}
.top-nav a {
  color: #8888aa; text-decoration: none; font-size: .85rem; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; padding: .3rem 0;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.top-nav a:hover, .top-nav a.active { color: #c9aa71; border-bottom-color: #c9aa71; }
.top-nav .nav-profile-link { margin-left: auto; }
.top-nav .nav-patreon-link { color: #FF424D !important; }
.top-nav .nav-patreon-link:hover { border-bottom-color: #FF424D; }

/* ── Raid hero banner ──────────────────────────────────── */
.raid-hero {
  max-width: 1200px; margin: 1.5rem auto 0; padding: 0 1rem;
}
.raid-hero-inner {
  position: relative; border-radius: 12px; overflow: hidden;
  height: 180px; border: 1px solid #2a2a4a;
}
.raid-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.raid-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,20,.95) 0%, rgba(10,10,20,.6) 50%, transparent 100%);
  display: flex; align-items: center; padding: 0 2rem;
}
.raid-hero-text h2 { font-size: 1.6rem; color: #fff; font-weight: 700; }
.raid-hero-text p  { color: #8888aa; font-size: .85rem; margin-top: .2rem; }

/* ── Raid sub-nav (pills) ─────────────────────────────── */
nav.raid-nav {
  max-width: 1200px; margin: 0 auto; padding: .8rem 1rem 0;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
nav.raid-nav a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; border-radius: 6px; background: #16162a;
  border: 1px solid #2a2a4a; color: #8888aa; font-size: .82rem;
  font-weight: 600; text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
nav.raid-nav a:hover, nav.raid-nav a.active {
  color: #c9aa71; border-color: #c9aa71; background: #1e1e38;
}

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid #2a2a4a;
  padding: 1.5rem 1rem;
  text-align: center;
  margin-top: 2rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  font-size: .82rem;
  margin-bottom: .5rem;
}
.footer-links a {
  color: #8888aa;
  text-decoration: none;
  transition: color .15s;
}
.footer-links a:hover { color: #c9aa71; }
.footer-sep { color: #333; }
.footer-copy {
  font-size: .75rem;
  color: #555;
  margin: 0;
}

/* ── Ad slots ─────────────────────────────────────────── */
.ad-slot { max-width: 1200px; margin: .6rem auto 0; padding: 0 1rem; text-align: center; min-height: 0; }
.ad-slot ins { display: block; }

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .top-nav { gap: .8rem; padding: .6rem .5rem 0; }
  header { padding: 1rem; }
  header h1 { font-size: 1.25rem; letter-spacing: 0; }
  .raid-hero-inner { height: 130px; }
  .raid-hero-text h2 { font-size: 1.2rem; }
}