/* ============================================================
   OFG — SPECTRUM  (live BRIGHT ⇄ DUSK ⇄ DARK fader)
   Every colour reads from a --c-* variable that spectrum.js
   interpolates from the slider. Applied via body.theme-spectrum.
   ============================================================ */

body.theme-spectrum {
  background: var(--c-bg);
  color: var(--c-ink-panel);
}

/* fields + words + copy all follow the live variables */
.theme-spectrum .field { transition: background 120ms linear; }
.theme-spectrum .field--powder { background: var(--c-powder); }
.theme-spectrum .field--coral  { background: var(--c-coral);  }
.theme-spectrum .field--yellow { background: var(--c-yellow); }
.theme-spectrum .field--cream  { background: var(--c-cream);  }

.theme-spectrum .stage::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(6,10,22,var(--vig,0)) 100%);
}

.theme-spectrum .word { transition: color 120ms linear; }
.theme-spectrum .word--1 { color: var(--c-only);  text-shadow: 0 0 38px rgba(255,107,103,var(--glow,0)); }
.theme-spectrum .word--2 { color: var(--c-fun);   text-shadow: 0 0 38px rgba(150,210,245,var(--glow,0)); }
.theme-spectrum .word--3 { color: var(--c-games); text-shadow: 0 0 38px rgba(255,212,71,var(--glow,0)); }

.theme-spectrum .brand { color: var(--c-brand); }
.theme-spectrum .nav-tr .nav-link,
.theme-spectrum .say-copy { color: var(--c-saycopy); }
.theme-spectrum .nav-bl .nav-link,
.theme-spectrum .nav-br .sound-toggle,
.theme-spectrum .est-copy,
.theme-spectrum .scroll-cue { color: var(--c-ink-panel); }
.theme-spectrum .nav-count { color: var(--ofg-coral); }

/* ---- THE MOOD FADER (compact, top-centre, out of the way) ---- */
.mood {
  position: fixed; z-index: var(--z-overlay);
  left: 50%; top: calc(var(--gutter) - 0.15rem); transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.28rem 0.55rem; border-radius: 999px;
  background: rgba(0,0,0,0.10); backdrop-filter: blur(6px);
  color: var(--c-ink-panel);
}
.mood .mood-ic { font-size: 0.78rem; line-height: 1; opacity: 0.85; }
.mood .mood-label {
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  min-width: 4.5ch; text-align: center; opacity: 0.85;
}
.mood-range {
  -webkit-appearance: none; appearance: none;
  width: 120px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg,
    #F4F1EA 0%, #A9D5EA 20%, #22304F 52%, #1B1216 80%, #0E0D12 100%);
  outline-offset: 4px; cursor: ew-resize;
}
.mood-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ofg-coral); border: 2px solid #F4F1EA;
  box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.mood-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ofg-coral); border: 2px solid #F4F1EA;
}

@media (prefers-reduced-motion: reduce) {
  .theme-spectrum .field, .theme-spectrum .word { transition: none; }
}