/* ===========================================
   One Shot — Piraten · Zee · Eilanden
   Volledig thema-override voor /oneshot/
   =========================================== */

/* GIF als vaste achtergrond */
html {
  background: #0E0E14 !important;
}

body {
  background-image: url('/oneshot/animation loop GIF by Alejandro Pérez.gif') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Geen sterren */
body::before,
body::after {
  display: none !important;
}

/* Vignette: zijkanten iets donkerder zodat content leesbaar blijft */
body::before {
  display: block !important;
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 8, 14, 0.55) 0%,  transparent 28%),
    linear-gradient(to top,    rgba(4, 4, 10, 0.50) 0%,  transparent 22%);
  pointer-events: none;
  z-index: 0;
  animation: none !important;
}

/* main content boven de vignette */
main {
  position: relative;
  z-index: 1;
}

/* Tekst: lichtgrijs uit de hemelzone van de GIF */
body {
  color: rgba(212, 212, 204, 0.92) !important;
}

/* ── Cards — donker als de golfzone, glazen rand ── */
.card {
  background: rgba(10, 10, 16, 0.82) !important;
  border-color: rgba(180, 180, 172, 0.14) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.70),
              inset 0 1px 0 rgba(220, 220, 212, 0.05) !important;
}

/* ── Pager ── */
.pager a {
  background: rgba(10, 10, 16, 0.78) !important;
  border-color: rgba(180, 180, 172, 0.14) !important;
  backdrop-filter: blur(5px);
  color: rgba(200, 200, 192, 0.85) !important;
}
.pager a:hover {
  background: rgba(18, 18, 24, 0.92) !important;
  text-decoration: none;
  color: rgba(224, 224, 216, 1) !important;
}

/* ── Navigatie pills — goud als enig warm accent ── */
.pill {
  background: rgba(10, 10, 16, 0.78) !important;
  border-color: rgba(168, 138, 58, 0.40) !important;
  color: rgba(210, 182, 92, 0.95) !important;
  backdrop-filter: blur(5px);
}
.pill:hover {
  background: rgba(18, 18, 24, 0.92) !important;
  border-color: rgba(200, 165, 72, 0.62) !important;
  color: rgba(232, 204, 110, 1) !important;
  text-decoration: none;
}

/* ── Links — warm goud tegen het koude grijs ── */
a {
  color: rgba(200, 168, 74, 0.95) !important;
}
a:hover {
  color: rgba(228, 196, 100, 1) !important;
}

/* ── Subtitels — uit de middentoon van de GIF ── */
.subtitle {
  color: rgba(152, 152, 144, 0.82) !important;
}

/* ── Meta-info ── */
.meta {
  color: rgba(138, 138, 130, 0.72) !important;
}

/* ── Koppen — licht als de hemelzone bovenin de GIF ── */
h1, h2, h3 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.96);
  color: rgba(226, 226, 218, 0.98) !important;
}

/* ── Footer ── */
.footer {
  color: rgba(100, 100, 94, 0.55) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

/* ── Luister-knop ── */
.listen-btn {
  border-color: rgba(168, 138, 58, 0.32) !important;
  background: rgba(10, 10, 16, 0.70) !important;
}
.listen-btn:hover {
  background: rgba(168, 138, 58, 0.15) !important;
  border-color: rgba(200, 165, 72, 0.50) !important;
}

/* ── Reader: blokcitaat ── */
.reader blockquote {
  border-left-color: rgba(148, 118, 50, 0.50) !important;
  background: rgba(6, 6, 10, 0.48) !important;
}

/* ── Reader: scheidslijn ── */
.reader hr {
  background: rgba(160, 160, 152, 0.14) !important;
}