/* ─── Bootstrap theme overrides ─────────────────────────────────────────── */

:root {
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, sans-serif;
  --bs-body-bg: #f6f5fc;
  --bs-body-color: #17122b;
  --bs-secondary-color: #635d78;
  --bs-tertiary-bg: #eeecfb;
  --bs-border-color: rgba(29, 20, 60, 0.1);
  --bs-primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #7c3aed;
  --bs-link-color-rgb: 124, 58, 237;
  --bs-link-hover-color: #4f46e5;
  --bs-link-hover-color-rgb: 79, 70, 229;
  --bs-border-radius: 0.9rem;
  --bs-border-radius-sm: 0.6rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-pill: 999px;

  --font-display: "Space Grotesk", var(--bs-font-sans-serif);
  --brand-gradient: linear-gradient(120deg, #7c3aed, #06b6d4);
  --brand-gradient-2: linear-gradient(120deg, #ec4899, #7c3aed);
  --brand-glow: 0 8px 24px rgba(124, 58, 237, 0.32);
}

body {
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .display-5, .display-6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.text-body-secondary { color: var(--bs-secondary-color) !important; }

/* ─── Brand ─────────────────────────────────────────────────────────────── */

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: var(--brand-glow);
}
.navbar-brand { font-weight: 700; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn-brand {
  background: var(--brand-gradient);
  color: #fff;
  border: 0;
  box-shadow: var(--brand-glow);
}
.btn-brand:hover, .btn-brand:focus {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ─── Nav ───────────────────────────────────────────────────────────────── */

.site-nav {
  background: rgba(246, 245, 252, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bs-border-color);
}
.nav-search { min-width: 260px; }
.nav-search .form-control { border-radius: 999px 0 0 999px; border-right: 0; }
.nav-search .btn { border-radius: 0 999px 999px 0; }

@media (min-width: 992px) {
  .nav-search { min-width: 220px; }
}

/* ─── Eyebrow / headers ─────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-primary);
}

.page-header {
  background:
    radial-gradient(680px 340px at 12% -10%, rgba(124, 58, 237, 0.16), transparent),
    radial-gradient(600px 300px at 100% 0%, rgba(6, 182, 212, 0.14), transparent),
    var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

/* ─── Hero (detail pages) ───────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 420px;
  background-color: #241a42;
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 10, 35, 0.15) 0%, rgba(15, 10, 35, 0.55) 60%, var(--bs-body-bg) 100%),
    linear-gradient(90deg, rgba(15, 10, 35, 0.55) 0%, rgba(15, 10, 35, 0.05) 55%);
}
.hero .eyebrow { color: #c9b8ff; }
.hero-subtitle { color: rgba(255, 255, 255, 0.85); max-width: 620px; }

.rating-badge {
  background: linear-gradient(120deg, #f59e0b, #f97316);
  color: #fff;
}

/* ─── Home hero ─────────────────────────────────────────────────────────── */

.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.home-hero-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(560px 420px at 18% 20%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(520px 420px at 85% 15%, rgba(6, 182, 212, 0.24), transparent 60%),
    radial-gradient(480px 360px at 60% 90%, rgba(236, 72, 153, 0.18), transparent 60%);
  filter: blur(10px);
}
.home-hero-title {
  max-width: 15ch;
  background: linear-gradient(120deg, var(--bs-body-color) 30%, var(--bs-primary) 70%, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -16px rgba(124, 58, 237, 0.32);
  border-color: rgba(124, 58, 237, 0.35);
}
.card-media {
  aspect-ratio: 16 / 10;
  background-color: #241a42;
  background-size: cover;
  background-position: center;
  position: relative;
}
.card-media-portrait { aspect-ratio: 3 / 4; }

.card-kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-primary);
}

.badge-cheat { background: var(--brand-gradient) !important; }
.badge-review { background: linear-gradient(120deg, #f59e0b, #f97316) !important; }
.badge-article { background: linear-gradient(120deg, #06b6d4, #0ea5e9) !important; }
.badge-news { background: linear-gradient(120deg, #ec4899, #7c3aed) !important; }
.badge-game { background: linear-gradient(120deg, #64748b, #334155) !important; }
.badge-hot { background: linear-gradient(120deg, #ec4899, #f97316) !important; }

/* ─── Filter pills ──────────────────────────────────────────────────────── */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--brand-gradient);
}

/* ─── Game detail ───────────────────────────────────────────────────────── */

.prose :is(h2, h3) { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }

.release-list li { border-bottom: 1px dashed var(--bs-border-color); }
.release-list li:last-child { border-bottom: 0; }

.screenshot {
  aspect-ratio: 16 / 9;
  border-radius: var(--bs-border-radius-sm);
  background-color: #241a42;
  background-size: cover;
  background-position: center;
}

/* ─── Search ────────────────────────────────────────────────────────────── */

.search-result-media {
  width: 120px;
  min-width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: var(--bs-border-radius-sm);
  background-color: #241a42;
  background-size: cover;
  background-position: center;
}

/* ─── Pagination ────────────────────────────────────────────────────────── */

.pagination .page-item.active .page-link {
  background: var(--brand-gradient);
  border-color: transparent;
}
.pagination .page-link { color: var(--bs-body-color); font-weight: 600; }

/* ─── Footer ────────────────────────────────────────────────────────────── */

.site-footer { background: var(--bs-tertiary-bg); }