/* ═══════════════════════════════════════════════════════════
   VIDEOCCULT GAMES — Merged Styles
   1. Theme base  |  2. Core games  |  3. Expansion  |  4. Shell
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. THEME BASE ──────────────────────────────────────── */
/*
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║           VIDEOCCULT — THEME & FX SYSTEM                            ║
 * ║           Extracted & cleaned from index_v47_2_.html                ║
 * ╠══════════════════════════════════════════════════════════════════════╣
 * ║  HOW TO PORT TO A NEW PROJECT                                       ║
 * ║                                                                      ║
 * ║  1. Drop this file in your project.                                  ║
 * ║  2. Add  data-vc-theme="<id>"  to your <html> or <body> element.    ║
 * ║  3. Optionally add FX body classes (see §FX TOGGLES).               ║
 * ║  4. To add a new theme, copy the THEME TEMPLATE at the bottom.      ║
 * ║                                                                      ║
 * ║  THEME IDs:  videoccult · netrunner · blackwall · witch              ║
 * ║              lovecraft · dark_academia · light_academia · hedgerow   ║
 * ║                                                                      ║
 * ║  FX CLASSES (on <body>):                                             ║
 * ║    vc-fx-noise-off   — disable film-grain noise overlay              ║
 * ║    vc-fx-scanlines-off — disable CRT scanline overlay                ║
 * ║    vc-fx-icegrid-on  — data-grid lines inside cards/panels           ║
 * ║    vc-fx-trace-on    — hover shimmer sweep on interactive elements   ║
 * ║    vc-fx-sigils-on   — daemon sigil glyphs on active badges/tags     ║
 * ║    vc-fx-glitch-on   — micro glitch pulse on modal open              ║
 * ║    vc-fx-breach-on   — reserved for breach/alert effects             ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1  FONTS
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Load these from Google Fonts (or self-host equivalents):
  https://fonts.googleapis.com/css2?
    family=UnifrakturMaguntia&
    family=Share+Tech+Mono&
    family=Cinzel:wght@400;600;700;900&
    family=Crimson+Text:ital,wght@0,400;0,600;1,400&
    display=swap
*/


/* ═══════════════════════════════════════════════════════════════════════
   §2  DEFAULT THEME TOKENS  (Videoccult — the original sanctum)
       These are the base values that every other theme overrides.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Depth layers (dark → light) ── */
  --void:          #050407;
  --abyss:         #080610;
  --deep:          #0e0b18;
  --chamber:       #150f22;
  --altar:         #1e1530;
  --surface:       #251c3a;

  /* ── Aliases used across components ── */
  --bg:            var(--void);
  --bg2:           var(--abyss);
  --panel:         var(--chamber);
  --panel2:        var(--altar);

  /* ── Text ── */
  --text:          rgba(220,210,195,.92);
  --static:        #b8a898;
  --bone:          #d4c9b0;
  --fog:           #7a6e80;
  --dust:          #4a4255;
  --muted:         #6a6070;

  /* ── Primary accent (gold) ── */
  --gold:          #c9973a;
  --gold-bright:   #e8b84b;
  --gold-pale:     #f0d080;
  --gold-dim:      rgba(201,151,58,.55);
  --gold-glow:     rgba(201,151,58,.20);

  /* ── Secondary accent (blood / crimson) ── */
  --blood:         #8b1a1a;
  --blood-bright:  #c0392b;
  --blood-glow:    rgba(139,26,26,.30);

  /* ── Borders & rims ── */
  --border:        rgba(180,120,60,.20);
  --border-bright: rgba(180,120,60,.45);
  --rim:           rgba(180,120,60,.15);
  --line:          rgba(180,120,60,.10);

  /* ── Extra named colours ── */
  --green:         #4ecf8a;
  --violet:        #b9c7ff;
  --mist:          #a79db6;

  /* ── Typography ── */
  --font-occult:   'Cinzel', serif;
  --font-vhs:      'Share Tech Mono', monospace;
  --font-grimoire: 'Crimson Text', serif;
  --font-display:  'Cinzel', serif;

  /* ── Shape ── */
  --radius:        8px;
  --radius-lg:     14px;

  /* ── FX default colours (Videoccult gold sweep) ── */
  --fx-trace-color:     rgba(201,151,58,.20);
  --fx-icegrid-h:       rgba(201,151,58,.06);
  --fx-icegrid-v:       rgba(201,151,58,.04);
  --fx-icegrid-opacity: 0.14;
  --fx-icegrid-size:    28px;

  /* ── Codex control surfaces (theme-tunable) ── */
  --codex-control-bg:          rgba(12,9,22,.85);
  --codex-control-border:      var(--border);
  --codex-control-text:        var(--static);
  --codex-chip-bg:             rgba(255,255,255,.02);
  --codex-chip-border:         rgba(201,151,58,.20);
  --codex-chip-text:           var(--fog);
  --codex-chip-bg-active:      rgba(201,151,58,.12);
  --codex-chip-border-active:  rgba(201,151,58,.55);
  --codex-chip-text-active:    var(--gold);

  /* ── Ritual badge surfaces (theme-tunable) ── */
  --ritual-bg-a:           rgba(8,9,18,.92);
  --ritual-bg-b:           rgba(10,8,14,.92);
  --ritual-glow-a:         rgba(169,119,255,.10);
  --ritual-glow-b:         rgba(139,26,26,.16);
  --ritual-border:         rgba(201,151,58,.22);
  --ritual-recent-border:  rgba(232,184,75,.72);
  --ritual-subtext:        rgba(230,215,185,.82);
  --codex-stat-bg-a:       rgba(22,14,40,.70);
  --codex-stat-bg-b:       rgba(10,8,18,.85);

  /* ── Nav / sidebar chrome (overridden per-theme) ── */
  --nav-shell:          linear-gradient(180deg, rgba(10,6,18,.97), rgba(6,4,12,.97));
  --nav-border:         rgba(180,120,60,.16);
  --sidebar-shell:      linear-gradient(180deg, rgba(12,8,20,.98), rgba(8,5,15,.98));
  --sidebar-border:     rgba(180,120,60,.12);
  --nav-active-bg:      rgba(201,151,58,.08);
  --nav-active-border:  rgba(201,151,58,.20);
  --sidebar-active-bg:  rgba(201,151,58,.08);
  --sidebar-active-border: rgba(201,151,58,.20);
}


/* ═══════════════════════════════════════════════════════════════════════
   §3  GLOBAL SURFACE & OVERLAY
   ═══════════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--static);
  font-family: var(--font-grimoire);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── Film-grain noise overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
}

/* ── CRT scanline overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
}

/* §4 theme variable overrides (netrunner/blackwall/witch/lovecraft/
   dark_academia/light_academia/hedgerow, incl. the light-theme body text
   color rule and light_academia's nav/sidebar text overrides) moved to
   css/theme-core.css, shared with the main site -- see that file. */


/* ═══════════════════════════════════════════════════════════════════════
   §5  THEME-PICKER CARD COMPONENT
       The grid of clickable theme swatches shown in Settings.
   ═══════════════════════════════════════════════════════════════════════ */

.vc-theme-picker-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel) 94%, transparent),
    color-mix(in srgb, var(--bg2) 92%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 8%, transparent);
}

.vc-theme-grimoire-help {
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 10px;
}

/* ── Recent chips ── */
.vc-theme-recent-row   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.vc-theme-recent-label { font-size: 10px; letter-spacing: .20em; text-transform: uppercase; color: var(--muted); }
.vc-theme-recent-chip {
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--gold-pale);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}

/* ── Card grid ── */
.vc-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (max-width: 860px) { .vc-theme-grid { grid-template-columns: 1fr; } }

.vc-theme-card {
  position: relative;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel) 96%, transparent),
      color-mix(in srgb, var(--bg2) 93%, transparent)
    ),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.015),
      rgba(255,255,255,.015) 1px,
      transparent 1px,
      transparent 3px
    );
  padding: 12px 12px 10px;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Radial glow corner */
.vc-theme-card::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    radial-gradient(140px 80px at 8% 10%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 45%);
}

/* Inner inset border */
.vc-theme-card::after {
  content: "";
  position: absolute; inset: 8px;
  pointer-events: none;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 10%, transparent);
}

.vc-theme-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--gold) 38%, var(--line));
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.vc-theme-card.active {
  border-color: color-mix(in srgb, var(--gold) 70%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent),
    0 10px 26px color-mix(in srgb, var(--gold) 12%, transparent);
}

.vc-theme-card.active .vc-theme-name { color: var(--gold); }

/* ── ACTIVE pill badge (top-right corner of card) ── */
.vc-theme-active {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  background: color-mix(in srgb, var(--gold) 16%, rgba(0,0,0,.6));
  color: var(--gold);
  border-radius: 6px;
  padding: 4px 10px 3px;
  font-family: var(--font-vhs, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent) inset,
    0 0 10px color-mix(in srgb, var(--gold) 28%, transparent),
    0 2px 6px rgba(0,0,0,.5);
  text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 70%, transparent);
  pointer-events: none;
}

/* Netrunner — active badge in cyan */
:root[data-vc-theme="netrunner"] .vc-theme-active {
  border-color: rgba(0,240,255,.70) !important;
  background:   rgba(0,240,255,.12) !important;
  color:        #00f0ff !important;
  box-shadow:
    0 0 12px rgba(0,240,255,.30),
    0 0 0 1px rgba(0,240,255,.18) inset,
    0 2px 6px rgba(0,0,0,.5) !important;
  text-shadow: 0 0 10px rgba(0,240,255,.70) !important;
}

/* Blackwall — active badge in arterial red */
:root[data-vc-theme="blackwall"] .vc-theme-active {
  border-color: rgba(255,31,53,.75) !important;
  background:   rgba(255,10,30,.13) !important;
  color:        #ff4d60 !important;
  box-shadow:
    0 0 14px rgba(255,31,53,.40),
    0 0 0 1px rgba(255,31,53,.22) inset,
    0 2px 8px rgba(0,0,0,.6) !important;
  text-shadow: 0 0 10px rgba(255,31,53,.75) !important;
}

/* ── Card text ── */
.vc-theme-name {
  position: relative; z-index: 1;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 13px; line-height: 1.15;
  color: color-mix(in srgb, var(--text) 96%, white);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}

.vc-theme-flavor {
  position: relative; z-index: 1;
  margin: 0;
  color: color-mix(in srgb, var(--bone) 92%, white 8%);
  font-size: 12px; line-height: 1.45; min-height: 32px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  opacity: 1;
}

/* ── Colour swatches ── */
.vc-theme-swatches { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: 9px; }
.vc-theme-swatch   {
  width: 13px; height: 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}

/* ── Light-theme card overrides (legibility on bright backgrounds) ── */
:root[data-vc-theme="light_academia"] .vc-theme-card,
:root[data-vc-theme="hedgerow"]       .vc-theme-card {
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.05) !important;
  border-color: rgba(156,126,87,.20) !important;
}
:root[data-vc-theme="light_academia"] .vc-theme-card .vc-theme-name,
:root[data-vc-theme="hedgerow"]       .vc-theme-card .vc-theme-name  { color: var(--bone) !important; text-shadow: none; }
:root[data-vc-theme="light_academia"] .vc-theme-card .vc-theme-flavor,
:root[data-vc-theme="hedgerow"]       .vc-theme-card .vc-theme-flavor { color: rgba(44,34,26,.86) !important; text-shadow: none !important; }


/* ── Theme-shell panel (wraps the whole picker in Settings) ── */
.vc-theme-shell, .vc-theme-shell * { color: inherit; }
.vc-theme-shell .vc-theme-head          { color: rgba(236,229,214,.95) !important; }
.vc-theme-shell .vc-theme-sub           { color: rgba(236,229,214,.80) !important; }
.vc-theme-shell .vc-theme-recent-label  { color: rgba(236,229,214,.78) !important; }
.vc-theme-shell .vc-theme-recent-chip {
  color:        rgba(248,238,212,.96) !important;
  background:   rgba(255,214,122,.06) !important;
  border-color: rgba(214,170,80,.28) !important;
}

/* Light themes override the shell text so it reads on bright backgrounds */
:root[data-vc-theme="light_academia"] .vc-theme-shell,
:root[data-vc-theme="hedgerow"]       .vc-theme-shell {
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(210,169,111,.08), rgba(210,169,111,0) 55%),
    linear-gradient(180deg, rgba(255,252,246,.03), rgba(255,252,246,.01)),
    rgba(245,239,228,.08) !important;
  border-color: rgba(156,126,87,.20) !important;
}
:root[data-vc-theme="light_academia"] .vc-theme-shell .vc-theme-head,
:root[data-vc-theme="hedgerow"]       .vc-theme-shell .vc-theme-head  { color: var(--bone) !important; }
:root[data-vc-theme="light_academia"] .vc-theme-shell .vc-theme-sub,
:root[data-vc-theme="hedgerow"]       .vc-theme-shell .vc-theme-sub,
:root[data-vc-theme="light_academia"] .vc-theme-shell .vc-theme-recent-label,
:root[data-vc-theme="hedgerow"]       .vc-theme-shell .vc-theme-recent-label { color: color-mix(in srgb, var(--text) 78%, transparent) !important; }
:root[data-vc-theme="light_academia"] .vc-theme-shell .vc-theme-recent-chip,
:root[data-vc-theme="hedgerow"]       .vc-theme-shell .vc-theme-recent-chip {
  color:        var(--bone) !important;
  background:   rgba(255,255,255,.15) !important;
  border-color: rgba(156,126,87,.28) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6  SETTINGS PANEL SURFACE OVERRIDES
       Academia/Hedgerow themes need their own panel texture.
   ═══════════════════════════════════════════════════════════════════════ */

:root[data-vc-theme="dark_academia"] .settings-section {
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(211,168,102,.08), rgba(211,168,102,0) 55%),
    rgba(29,23,18,.92) !important;
  border-color: rgba(197,154,94,.22) !important;
}

:root[data-vc-theme="light_academia"] .settings-section {
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(209,169,112,.10), rgba(209,169,112,0) 55%),
    linear-gradient(180deg, rgba(255,252,244,.06), rgba(255,252,244,.02)),
    rgba(228,218,198,.22) !important;
  border-color: rgba(156,126,87,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

:root[data-vc-theme="hedgerow"] .settings-section {
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(134,164,120,.12), rgba(134,164,120,0) 55%),
    linear-gradient(180deg, rgba(250,247,236,.04), rgba(250,247,236,.01)),
    rgba(233,239,229,.22) !important;
  border-color: rgba(139,166,126,.26) !important;
}

/* Hedgerow settings shell (grimoire panel + tabs) */
:root[data-vc-theme="hedgerow"] .settings-section,
:root[data-vc-theme="hedgerow"] .theme-grimoire-panel,
:root[data-vc-theme="hedgerow"] .settings-tabs,
:root[data-vc-theme="hedgerow"] .settings-subtabs {
  background:   var(--settings-shell-bg) !important;
  border-color: var(--settings-shell-border) !important;
  box-shadow: inset 0 1px 0 rgba(241,236,220,.04), 0 10px 32px rgba(0,0,0,.22);
}

/* Surface cards (card, modal, panel, queue-item, rail-card) */
:root[data-vc-theme="dark_academia"] .card,
:root[data-vc-theme="dark_academia"] .modal-shell,
:root[data-vc-theme="dark_academia"] .panel,
:root[data-vc-theme="dark_academia"] .queue-item,
:root[data-vc-theme="dark_academia"] .rail-card {
  background:
    radial-gradient(120% 120% at 8% 0%, rgba(211,168,102,.08), rgba(211,168,102,0) 55%),
    rgba(25,20,16,.74) !important;
  border-color: rgba(197,154,94,.18) !important;
}

:root[data-vc-theme="light_academia"] .card,
:root[data-vc-theme="light_academia"] .modal-shell,
:root[data-vc-theme="light_academia"] .panel,
:root[data-vc-theme="light_academia"] .queue-item,
:root[data-vc-theme="light_academia"] .rail-card {
  background: rgba(255,252,244,.70) !important;
  border-color: rgba(156,126,87,.18) !important;
}

:root[data-vc-theme="hedgerow"] .card,
:root[data-vc-theme="hedgerow"] .modal-shell,
:root[data-vc-theme="hedgerow"] .panel,
:root[data-vc-theme="hedgerow"] .queue-item,
:root[data-vc-theme="hedgerow"] .rail-card {
  background: rgba(248,245,236,.70) !important;
  border-color: rgba(139,166,126,.18) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7  FX TOGGLE SYSTEM
       Body classes switch each effect on/off independently.
       All colours are driven by --fx-* vars so themes get them for free.
   ═══════════════════════════════════════════════════════════════════════ */

/* §7.1  Kill switches */
body.vc-fx-noise-off::before    { content: none !important; }
body.vc-fx-scanlines-off::after { content: none !important; }


/* §7.2  Ice-grid (data-grid lines inside surfaces) */
body.vc-fx-icegrid-on .modal,
body.vc-fx-icegrid-on .card,
body.vc-fx-icegrid-on .panel,
body.vc-fx-icegrid-on .settings-section { position: relative; }

body.vc-fx-icegrid-on .modal::before,
body.vc-fx-icegrid-on .card::before,
body.vc-fx-icegrid-on .panel::before,
body.vc-fx-icegrid-on .settings-section::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--fx-icegrid-h) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fx-icegrid-v) 1px, transparent 1px);
  background-size: var(--fx-icegrid-size, 28px) var(--fx-icegrid-size, 28px);
  opacity: var(--fx-icegrid-opacity, 0.12);
  mix-blend-mode: screen;
}


/* §7.3  Trace sweep (shimmer on hover for interactive elements) */
body.vc-fx-trace-on .btn:not(.vc-modal-close),
body.vc-fx-trace-on .vc-theme-card,
body.vc-fx-trace-on .watch-item,
body.vc-fx-trace-on .result-card,
body.vc-fx-trace-on .queue-item {
  position: relative;
  overflow: hidden;
}

body.vc-fx-trace-on .btn:not(.vc-modal-close)::after,
body.vc-fx-trace-on .vc-theme-card::after,
body.vc-fx-trace-on .watch-item::after,
body.vc-fx-trace-on .result-card::after,
body.vc-fx-trace-on .queue-item::after {
  content: "";
  position: absolute; top: -30%; left: -60%;
  width: 60%; height: 160%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, var(--fx-trace-color), transparent);
  opacity: 0;
  pointer-events: none;
}

body.vc-fx-trace-on .btn:not(.vc-modal-close):hover::after,
body.vc-fx-trace-on .vc-theme-card:hover::after,
body.vc-fx-trace-on .watch-item:hover::after,
body.vc-fx-trace-on .result-card:hover::after,
body.vc-fx-trace-on .queue-item:hover::after {
  opacity: 1;
  animation: vcTraceSweep 0.65s ease-out 1;
}

@keyframes vcTraceSweep {
  from { left: -70%; }
  to   { left: 130%; }
}


/* §7.4  Daemon sigils (⛧ glyphs on active badges and tags) */
body.vc-fx-sigils-on .tag.gold,
body.vc-fx-sigils-on .queue-auto-badge,
body.vc-fx-sigils-on .watch-history-badge.first-watch-badge { position: relative; }

/* vc-theme-active is position:absolute — prepend sigil inline via ::before */
body.vc-fx-sigils-on .vc-theme-active::before {
  content: "⛧ ";
  font-size: 9px;
  opacity: .85;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(201,151,58,.5));
  vertical-align: middle;
}
body[data-vc-theme="blackwall"].vc-fx-sigils-on .vc-theme-active::before {
  color:  var(--bw-red, #ff1f35);
  filter: drop-shadow(0 0 6px rgba(255,31,53,.65));
}

/* Floating sigil above gold tags */
body.vc-fx-sigils-on .tag.gold::before {
  content: "⛧";
  position: absolute;
  left: -10px; top: -8px;
  font-size: 10px;
  opacity: .65;
  color:  var(--gold);
  filter: drop-shadow(0 0 10px rgba(0,240,255,.25));
}
body[data-vc-theme="blackwall"].vc-fx-sigils-on .tag.gold::before {
  color:  var(--bw-red, #ff1f35);
  filter: drop-shadow(0 0 10px rgba(255,31,53,.35));
}

/* Corner sigil tick-marks on theme cards */
body.vc-fx-sigils-on .vc-theme-card::before { content: "" !important; }
body.vc-fx-sigils-on .vc-theme-card.active  { --sigil-corner-color: rgba(201,151,58,.22); }

body.vc-fx-sigils-on .vc-theme-card {
  outline: 1px solid transparent;
  box-shadow:
    -1px -1px 0 0 var(--sigil-corner-color, rgba(201,151,58,.10)),
     1px -1px 0 0 var(--sigil-corner-color, rgba(201,151,58,.10)),
    -1px  1px 0 0 var(--sigil-corner-color, rgba(201,151,58,.10)),
     1px  1px 0 0 var(--sigil-corner-color, rgba(201,151,58,.10));
}
body.vc-fx-sigils-on .vc-theme-card.active {
  box-shadow:
    0 0 0 1px  color-mix(in srgb, var(--gold) 24%, transparent),
    0 10px 26px color-mix(in srgb, var(--gold) 12%, transparent),
    -2px -2px 0 0 rgba(201,151,58,.35),
     2px -2px 0 0 rgba(201,151,58,.35),
    -2px  2px 0 0 rgba(201,151,58,.35),
     2px  2px 0 0 rgba(201,151,58,.35);
}

/* Blackwall sigil corners override */
body[data-vc-theme="blackwall"].vc-fx-sigils-on .vc-theme-card {
  box-shadow:
    -1px -1px 0 0 rgba(255,31,53,.18),
     1px -1px 0 0 rgba(255,31,53,.18),
    -1px  1px 0 0 rgba(255,31,53,.18),
     1px  1px 0 0 rgba(255,31,53,.18);
}
body[data-vc-theme="blackwall"].vc-fx-sigils-on .vc-theme-card.active {
  box-shadow:
    0 0 0 1px  rgba(255,31,53,.32),
    0 10px 26px rgba(255,31,53,.18),
    -2px -2px 0 0 rgba(255,31,53,.50),
     2px -2px 0 0 rgba(255,31,53,.50),
    -2px  2px 0 0 rgba(255,31,53,.50),
     2px  2px 0 0 rgba(255,31,53,.50);
}


/* §7.5  Glitch pulse (micro-glitch on modal open) */
body.vc-fx-glitch-on    .modal { animation: none; }
body.vc-fx-glitch-pulse .modal { animation: vcGlitchPulse 180ms ease-out 1; }

@keyframes vcGlitchPulse {
  0%   { transform: translateY(0);   filter: none; }
  20%  { transform: translateY(-1px); filter: contrast(1.05) saturate(1.05); }
  55%  { transform: translateY(1px);  filter: contrast(1.10) saturate(1.10); }
  100% { transform: translateY(0);   filter: none; }
}


/* §7.6  Breach (reserved — class added by vcSetFX, style as needed) */
/*
  body.vc-fx-breach-on  { ... }
  Suggested use: red edge-vignette, pulsing border on key UI elements.
  Example:
    body.vc-fx-breach-on::before {
      background: radial-gradient(ellipse at center, transparent 60%, rgba(255,31,53,.12) 100%);
      animation: vcBreachPulse 2s ease-in-out infinite;
    }
*/


/* ═══════════════════════════════════════════════════════════════════════
   §8  JAVASCRIPT REFERENCE
       The canonical JS implementation lives in videoccult-games.js.
       For the theme/FX API see: vcApplyTheme, vcGetTheme, vcSetFX,
       vcGetFX, vcSnapPrePreset, and vcRegisterTheme in Section 1.

       localStorage keys:
         vc_theme_v1          — active theme id
         vc_theme_recent_v1   — recently used ids (JSON array)
         vc_preset_prev_snap  — pre-preset snapshot for revert
         vc_fx_noise          — VHS grain (1/0)
         vc_fx_scanlines      — CRT scanlines (1/0)
         vc_fx_icegrid        — ICE grid overlay (1/0)
         vc_fx_trace          — trace sweep on hover (1/0)
         vc_fx_sigils         — daemon sigils (1/0)
         vc_fx_glitch         — glitch pulse (1/0)
         vc_fx_breach         — breach alert (1/0)

       Runtime theme registration:
         vcRegisterTheme({
           id:'blade_runner', label:'Blade Runner',
           flavor:'Acid rain and neon kanji.',
           swatches:['#05040e','#120d20','#ff6a00','#8080ff'],
           cssVars:{
             '--void':'#05040e', '--gold':'#ff6a00',
             '--fx-trace-color':'rgba(255,106,0,.22)',
             '--fx-icegrid-h':'rgba(255,106,0,.07)',
             '--fx-icegrid-v':'rgba(128,128,255,.05)'
           }
         });
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   §9  NEW THEME TEMPLATE
       Copy this block, fill in values, done. All FX inherit automatically.
   ═══════════════════════════════════════════════════════════════════════

:root[data-vc-theme="my_theme"] {
  // ── Depth layers ──
  --void:          #0a0a0a;   // deepest background
  --abyss:         #101010;
  --chamber:       #181818;   // card/panel fill
  --deep:          #101010;
  --altar:         #181818;
  --surface:       #202020;   // raised element fill

  // ── Text ──
  --text:          rgba(255,245,220,.92);
  --static:        rgba(255,245,220,.88);
  --bone:          rgba(255,250,235,.95);
  --fog:           rgba(200,180,140,.55);
  --dust:          rgba(200,180,140,.35);

  // ── Primary accent ──
  --gold:          #e8b840;   // buttons, borders, highlights
  --gold-pale:     rgba(255,230,160,.94);
  --gold-dim:      rgba(232,184,64,.55);
  --gold-glow:     rgba(232,184,64,.28);

  // ── Secondary accent ──
  --blood:         #c05020;
  --blood-bright:  #e07040;

  // ── Borders ──
  --border:        rgba(232,184,64,.20);
  --border-bright: rgba(232,184,64,.50);
  --rim:           rgba(232,184,64,.18);
  --line:          rgba(232,184,64,.12);

  // ── FX colour palette (theme automatically applied to all FX modules) ──
  --fx-trace-color:     rgba(232,184,64,.22);  // hover sweep shimmer
  --fx-icegrid-h:       rgba(232,184,64,.07);  // horizontal grid lines
  --fx-icegrid-v:       rgba(200,140,40,.05);  // vertical grid lines
  --fx-icegrid-opacity: 0.13;
}

// Optional: custom active-badge style for this theme
:root[data-vc-theme="my_theme"] .vc-theme-active {
  border-color: rgba(232,184,64,.70) !important;
  background:   rgba(232,184,64,.13) !important;
  color:        #e8b840 !important;
  box-shadow:   0 0 12px rgba(232,184,64,.30), 0 0 0 1px rgba(232,184,64,.14) inset, 0 2px 6px rgba(0,0,0,.5) !important;
  text-shadow:  0 0 10px rgba(232,184,64,.70) !important;
}

// Then add to the THEMES array in §8 JS:
// { id:'my_theme', label:'My Theme', flavor:'One-line vibe.',
//   swatches:['#0a0a0a','#181818','#e8b840','#c05020'] }

   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 2. CORE GAMES UI ───────────────────────────────────── */
/*
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║  VIDEOCCULT — Games Archive · Core Stylesheet v3                    ║
 * ║  Self-contained: theme tokens + layout + all components             ║
 * ║  Replaces vc_core_games_SITE_READY_CLASSIC_v2.css                   ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 */