@import url('https://fonts.googleapis.com/css2?family=Nosifer&family=Frighten+One&family=Special+Elite&display=swap');

/* ============================================================================
   FLOODSHOW.LIVE — DOWNLOAD VAULT: SPOOKY SEASON ADDITIONS (Halloween 2026)
   ----------------------------------------------------------------------------
   Appended to spooky.css. The downloads page has its own inline stylesheet
   (jewel-toned gold/pink/cyan) and its own component vocabulary, none of
   which the base spooky theme covered. Everything here is scoped under
   `html.spooky`, so it only applies during the season (through 2026-11-02,
   per spooky.js). After that the page returns to its normal look with no
   edits.
   ========================================================================== */

/* ---------------------------------------------------------------- palette */
html.spooky {
  --gold: #ffa62b;        /* pumpkin */
  --pink: #e0245e;        /* blood */
  --cyan: #6bff9e;        /* poison green */
  --dark-bg: #0b0410;
  --card-bg: #180a20;
}

/* The downloads page sets its own body background inline. Override it. */
html.spooky body {
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(255,140,30,0.20), transparent 62%),
    radial-gradient(900px 520px at 8% 6%, rgba(150,40,200,0.20), transparent 64%),
    linear-gradient(180deg, #0b0410 0%, #17061f 50%, #0b0410 100%);
  background-attachment: fixed;
  color: #f3e9ff;
}

/* drifting embers instead of a static starfield */
html.spooky body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,166,43,.85), transparent),
    radial-gradient(2px 2px at 28% 68%, rgba(255,105,180,.70), transparent),
    radial-gradient(1px 1px at 44% 14%, rgba(107,255,158,.70), transparent),
    radial-gradient(2px 2px at 61% 44%, rgba(255,166,43,.65), transparent),
    radial-gradient(1px 1px at 74% 76%, rgba(255,105,180,.60), transparent),
    radial-gradient(2px 2px at 88% 30%, rgba(107,255,158,.55), transparent);
  background-size: 520px 520px, 380px 380px, 300px 300px, 640px 640px, 460px 460px, 560px 560px;
  animation: embers-drift 26s linear infinite;
  opacity: .55;
}

@keyframes embers-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 -520px, 0 -380px, 0 -300px, 0 -640px, 0 -460px, 0 -560px; }
}

/* low fog rolling across the page */
html.spooky body::after {
  content: '';
  position: fixed;
  left: -20%;
  right: -20%;
  bottom: -12%;
  height: 46%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(190,120,255,.13), transparent 70%),
    radial-gradient(55% 100% at 75% 100%, rgba(255,166,43,.10), transparent 72%);
  filter: blur(26px);
  animation: fog-roll 24s ease-in-out infinite alternate;
}

@keyframes fog-roll {
  from { transform: translateX(-4%); }
  to   { transform: translateX(5%); }
}

/* ---------------------------------------------------------------- chrome */
html.spooky .nav {
  background: rgba(8, 3, 13, 0.94);
  border-bottom: 2px solid rgba(255, 166, 43, 0.34);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .55);
}

html.spooky .nav-logo {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 140, 30, .55);
  font-family: 'Nosifer', cursive;
  letter-spacing: 1px;
}

html.spooky .nav-links a { color: #9d8aad; }
html.spooky .nav-links a:hover { color: var(--gold); text-shadow: 0 0 10px rgba(255,140,30,.45); }

/* a ghost drifts out of the page title on hover */
html.spooky h1.site-title {
  background: linear-gradient(90deg, #e0245e, #ffa62b, #6bff9e, #e0245e);
  background-size: 300% 100%;
  filter: drop-shadow(0 0 22px rgba(255, 120, 30, .45));
}

html.spooky h1.site-title:hover::after {
  content: '👻';
  position: absolute;
  margin-left: 12px;
  font-size: .62em;
  opacity: 0;
  transform: translateY(6px) scale(.8);
  transition: all .35s ease;
  -webkit-text-fill-color: initial;
  filter: none;
}

html.spooky h1.site-title:hover::after { opacity: .9; transform: translateY(-6px) scale(1); }

html.spooky .hero-gem { filter: drop-shadow(0 0 16px rgba(255, 140, 30, .5)); }

html.spooky .hero-sub {
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(107, 255, 158, .40);
  letter-spacing: 7px;
}

html.spooky .section-title {
  color: #f6e9ff;
  text-shadow: 0 0 16px rgba(224, 36, 94, .38);
  letter-spacing: 6px;
}

html.spooky .section-title::after {
  background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan));
  box-shadow: 0 0 14px rgba(255, 140, 30, .45);
}

html.spooky .section-lede { color: #a895b8; }

/* ------------------------------------------------------- library cards */
html.spooky .lib-card {
  background: linear-gradient(145deg, rgba(38, 14, 52, .96), rgba(16, 7, 24, .96));
  border: 1px solid rgba(255, 166, 43, .26);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

html.spooky .lib-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 166, 43, .65);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .62), 0 0 34px rgba(255, 140, 30, .26);
}

html.spooky .lib-card .t { color: #ffe6c2; }
html.spooky .lib-card .s { color: #9d8aad; }
html.spooky .lib-card .ic { filter: drop-shadow(0 0 12px rgba(255, 140, 30, .45)); }
html.spooky .lib-card.pink  { border-color: rgba(224, 36, 94, .34); }
html.spooky .lib-card.cyan  { border-color: rgba(107, 255, 158, .30); }
html.spooky .lib-card.green { border-color: rgba(107, 255, 158, .26); }

/* ---------------------------------------------------------- search bar */
html.spooky .jump-wrap {
  background: linear-gradient(180deg, rgba(11, 4, 16, .97), rgba(11, 4, 16, .82));
  border-top: 1px solid rgba(255, 166, 43, .20);
  border-bottom: 1px solid rgba(255, 166, 43, .20);
}

html.spooky .vault-bar input {
  background: rgba(30, 12, 42, .9);
  border: 1px solid rgba(255, 166, 43, .32);
  color: #f3e9ff;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .5);
}

html.spooky .vault-bar input::placeholder { color: #7e6b91; }
html.spooky .vault-bar input:focus {
  border-color: var(--gold);
  box-shadow: inset 0 0 18px rgba(0,0,0,.5), 0 0 18px rgba(255, 140, 30, .34);
  outline: none;
}

html.spooky .vault-bar .count { color: #8f7ba3; }
html.spooky .vault-error {
  background: rgba(224, 36, 94, .10);
  border-color: rgba(224, 36, 94, .45);
  color: #ffc2d2;
}

/* ------------------------------------------------------------- books */
html.spooky .book {
  background: linear-gradient(160deg, rgba(34, 13, 46, .97), rgba(13, 6, 20, .97));
  border: 1px solid rgba(255, 166, 43, .20);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .48);
  transition: border-color .25s ease, box-shadow .25s ease;
}

html.spooky .book:hover {
  border-color: rgba(255, 166, 43, .55);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .58), 0 0 28px rgba(255, 140, 30, .18);
}

html.spooky .book-head { border-bottom: 1px solid rgba(255, 166, 43, .16); }
html.spooky .book-name { color: #ffe6c2; }
html.spooky .book-meta { color: var(--cyan); opacity: .8; }
html.spooky .book-desc { color: #9d8aad; }

html.spooky .book-cover {
  border: 1px solid rgba(255, 166, 43, .28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .6);
}

html.spooky .book-cover-wrap.ico { color: #ffe6c2; text-shadow: 0 0 16px rgba(255, 140, 30, .45); }

html.spooky .book-chev { color: var(--gold); }
html.spooky .book-body { background: rgba(8, 3, 14, .55); }

/* chapters inside a book */
html.spooky .ch {
  background: rgba(28, 11, 39, .7);
  border: 1px solid rgba(255, 166, 43, .14);
  border-radius: 8px;
}

html.spooky .ch:hover {
  border-color: rgba(255, 166, 43, .48);
  background: rgba(42, 16, 56, .8);
}

html.spooky .ch-num {
  background: rgba(255, 166, 43, .16);
  color: var(--gold);
  border: 1px solid rgba(255, 166, 43, .34);
}

html.spooky .ch-name { color: #f0e4fb; }
html.spooky .ch-dur { color: #8f7ba3; }
html.spooky .ch-dl { color: var(--cyan); }
html.spooky .ch-dl:hover { color: #b6ffd2; }
html.spooky .ch-caption { color: #9d8aad; }

/* -------------------------------------------------------------- shows */
html.spooky .group {
  background: rgba(16, 7, 24, .7);
  border: 1px solid rgba(255, 166, 43, .18);
  border-radius: 14px;
}

html.spooky .group-title {
  color: #ffe6c2;
  text-shadow: 0 0 14px rgba(255, 140, 30, .35);
}

html.spooky .group-desc { color: #9d8aad; }

html.spooky .ep {
  background: linear-gradient(155deg, rgba(34, 13, 46, .95), rgba(13, 6, 20, .95));
  border: 1px solid rgba(255, 166, 43, .18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

html.spooky .ep:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 166, 43, .58);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .58), 0 0 26px rgba(255, 140, 30, .2);
}

html.spooky .ep-frame {
  border: 1px solid rgba(255, 166, 43, .22);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .6);
}

html.spooky .ep-glyph { color: #ffe6c2; text-shadow: 0 0 16px rgba(255, 140, 30, .45); }
html.spooky .ep-title { color: #f0e4fb; }
html.spooky .ep-meta { color: #8f7ba3; }
html.spooky .ep-dur { color: var(--cyan); opacity: .8; }

html.spooky .ep-play {
  background: rgba(11, 4, 16, .74);
  border: 1px solid rgba(255, 166, 43, .5);
  color: var(--gold);
}

html.spooky .ep-play:hover {
  background: rgba(255, 166, 43, .9);
  color: #2a1200;
  box-shadow: 0 0 24px rgba(255, 140, 30, .55);
}

html.spooky .ep-links a {
  border: 1px solid rgba(107, 255, 158, .30);
  color: var(--cyan);
}

html.spooky .ep-links a:hover {
  border-color: var(--cyan);
  background: rgba(107, 255, 158, .14);
}

html.spooky .ep-back {
  color: var(--gold);
  border-color: rgba(255, 166, 43, .34);
}

/* pills and footer */
html.spooky .pill {
  background: rgba(255, 166, 43, .12);
  border: 1px solid rgba(255, 166, 43, .3);
  color: var(--gold);
}

html.spooky .footer { color: #7e6b91; }
html.spooky .footer a { color: var(--gold); }

/* a single slow flicker on the whole page — subtle, not a strobe */
@media (prefers-reduced-motion: no-preference) {
  html.spooky .container { animation: vault-flicker 7s ease-in-out infinite; }
}

@keyframes vault-flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .93; }
  96% { opacity: .99; }
  97% { opacity: .95; }
}

/* --------------------------------------------------------------- media */
html.spooky video {
  border: 1px solid rgba(255, 166, 43, .28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  html.spooky body::before,
  html.spooky body::after,
  html.spooky .container { animation: none !important; }
}

/* ------------------------------------------------- spooky typography */
html.spooky h1.site-title {
  font-family: 'Nosifer', cursive;
  letter-spacing: 3px;
}

html.spooky .nav-logo {
  font-family: 'Frighten One', cursive;
  letter-spacing: 2px;
}

html.spooky .section-title {
  font-family: 'Frighten One', cursive;
  letter-spacing: 3px;
}

html.spooky .book-name,
html.spooky .group-title {
  font-family: 'Special Elite', 'EB Garamond', Georgia, serif;
  letter-spacing: .5px;
}

/* the vault is a crypt, not a showroom */
html.spooky .hero-sub::after {
  content: ' · the vault is open ·';
  color: var(--pink);
  opacity: .8;
}