/* ═══════════════════════════════════════════════════════════════════
   PREMIUM DARK-MODE POLISH — film grain, vignette, scrollbar, selection,
   glowing gold focus accents. All overlay layers are pointer-events:none
   so they never intercept clicks.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Film grain overlay (static, no animation for performance) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ── Vignette ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* ── Gold focus accent on interactive elements ── */
.nav-btn:focus-visible,
.landing-cta:focus-visible,
.quiz-trigger-btn:focus-visible,
.btn-primary:focus-visible,
.filter-select:focus-visible,
input:focus-visible,
.range-input:focus,
.pill:focus-visible,
.view-btn:focus-visible,
.search-clear:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(201, 148, 58, 0.5),
    0 0 12px rgba(201, 148, 58, 0.25);
  border-color: rgba(201, 148, 58, 0.8) !important;
}

/* Glowing gold border on active nav buttons */
.nav-btn.active {
  box-shadow:
    inset 0 -2px 0 0 #c9943a,
    0 0 10px rgba(201, 148, 58, 0.25);
}

/* ── Scrollbar styling ── */
/* Thin, gold thumb, dark track. WebKit + Firefox both covered. */
* {
  scrollbar-width: thin;
  scrollbar-color: #c9943a #1a1209;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #1a1209;
  border-left: 1px solid rgba(201, 148, 58, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c9943a, #8a6a2a);
  border-radius: 5px;
  border: 2px solid #1a1209;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f0d674, #c9943a);
}

::-webkit-scrollbar-corner {
  background: #1a1209;
}

/* ── Text selection ── */
/* ::selection styling is provided by refine.css. */

/* ── Input caret + placeholder polish ── */
input,
textarea,
.filter-select {
  caret-color: #f0d674;
}

input::placeholder {
  color: rgba(245, 230, 200, 0.4);
  font-style: italic;
}

/* ── Reduced motion: freeze the grain animation ── */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}