/* ═══════════════════════════════════════════════════════════════════════
   §1  THEME TOKENS  (default: Videoccult)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Depth layers */
  --void:          #050407;
  --abyss:         #080610;
  --deep:          #0e0b18;
  --chamber:       #150f22;
  --altar:         #1e1530;
  --surface:       #251c3a;
  --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;

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

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

  /* Borders */
  --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);

  /* Extras */
  --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 */
  --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;

  /* Nav / sidebar chrome */
  --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);

  /* Sidebar width — single source of truth */
  --sidebar-w: 220px;
  /* Top bar height — single source of truth */
  --games-nav-h: 4.5rem;
}


/* Theme color overrides (netrunner/blackwall/witch/lovecraft/dark_academia/
   light_academia/hedgerow) moved to css/theme-core.css, shared with the
   main site -- this was a second, older, sparser copy of the same §4
   blocks above (now also moved) that happened to win the cascade since it
   loaded later; removed rather than left to silently shadow the shared
   file's fuller definitions. */


/* ═══════════════════════════════════════════════════════════════════════
   §2  RESET & GLOBAL SURFACE
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { 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;
  min-height: 100vh;
}

/* Light theme body text */
:root[data-vc-theme="light_academia"] body,
:root[data-vc-theme="hedgerow"] body { color: var(--text); }

/* Film grain */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9000; 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;
}
/* Scanlines */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px);
}

body.vc-fx-noise-off::before    { content: none !important; }
body.vc-fx-scanlines-off::after { content: none !important; }
html.vc-modal-open, body.vc-modal-open { overflow: hidden; }

/* Keyframes */
@keyframes flicker {
  0%,100% { opacity:1; }
  92%     { opacity:1; }
  93%     { opacity:.7; }
  94%     { opacity:1; }
  96%     { opacity:.85; }
  97%     { opacity:1; }
}
@keyframes vcPulse { 0%,100%{opacity:.45} 50%{opacity:.85} }
@keyframes vcTraceSweep { from{left:-70%} to{left:130%} }
@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; }
}


/* ═══════════════════════════════════════════════════════════════════════
   §3  SHELL LAYOUT
   The sidebar is position:fixed. .vc-main is offset by --sidebar-w.
   .vc-shell is a passive wrapper — no flex, no grid.
   ═══════════════════════════════════════════════════════════════════════ */

.vc-shell { min-height: 100vh; }

.vc-view         { display: none; }
.vc-view.active  { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   §3.5  TOP BAR
   ═══════════════════════════════════════════════════════════════════════ */

.games-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 28px;
  height: var(--games-nav-h);
  background: var(--nav-shell, rgba(5,4,7,.92));
  border-bottom: 1px solid var(--nav-border, var(--border));
  backdrop-filter: blur(16px);
}

.games-topbar-logo { line-height: 1.15; }
/* Compound selector (not just .games-topbar-wordmark) so this reliably
   beats §4's .sidebar-logo-wordmark rule on specificity regardless of
   source order -- this element carries both classes so the per-expansion-
   theme flicker/glow effects that already target .sidebar-logo-wordmark
   (aw2_oldgods, zelda_sheikah, etc.) keep working unchanged. */
.games-topbar-wordmark.sidebar-logo-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold-glow);
  text-transform: uppercase;
  margin-bottom: 0;
}
.games-topbar-wordmark .sigil { color: var(--blood-bright); margin: 0 2px; }
.games-topbar-sub {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blood-bright);
  opacity: 0.85;
  margin-top: 2px;
}

.games-topbar-links { display: flex; gap: 2px; }
.games-topbar-links a {
  color: var(--dust);
  text-decoration: none;
  font-family: var(--font-vhs);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
}
.games-topbar-links a:hover,
.games-topbar-links a.active {
  color: var(--gold);
  background: var(--nav-active-bg, color-mix(in srgb, var(--gold) 8%, transparent));
  border-color: var(--nav-active-border, color-mix(in srgb, var(--gold) 15%, transparent));
}

.games-topbar-right { display: flex; align-items: center; }
.games-topbar-right .sidebar-auth-pill { margin: 0; }

@media (max-width: 860px) {
  .games-topbar-links { display: none; }
  .games-topbar { padding: 0 16px; gap: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   §4  SIDEBAR
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar {
  width: var(--sidebar-w);
  position: fixed;
  top: var(--games-nav-h); left: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-shell, linear-gradient(180deg, rgba(12,8,20,.98), rgba(8,5,15,.98)));
  border-right: 1px solid var(--sidebar-border, rgba(180,120,60,.12));
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbar */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Logo block */
.sidebar-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo-wordmark {
  font-family: var(--font-occult);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold-glow);
  animation: flicker 8s infinite;
  margin-bottom: 5px;
}
.sidebar-logo-wordmark .vc-sigil {
  display: inline;
  font-style: normal;
  font-size: 15px;
  color: var(--gold-bright);
  text-shadow:
    0 0 8px var(--gold-glow),
    0 0 20px var(--gold-glow);
  filter: drop-shadow(0 0 4px var(--gold-glow));
  letter-spacing: 0;
}
.sidebar-logo-sub {
  font-family: var(--font-vhs);
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blood-bright);
  opacity: 0.85;
  padding-left: 2px;
}

/* Auth pill */
.sidebar-auth-pill {
  margin: 10px 10px 6px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sidebar-auth-pill .auth-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dust);
  box-shadow: 0 0 5px var(--dust);
  transition: background .3s, box-shadow .3s;
}
.sidebar-auth-pill.authed .auth-dot {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74,222,128,.6);
}
.sidebar-auth-pill.error .auth-dot {
  background: var(--blood-bright);
  box-shadow: 0 0 8px rgba(220,80,80,.6);
}
.sidebar-auth-pill .auth-label {
  font-family: var(--font-vhs);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dust);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-auth-pill.authed .auth-label { color: rgba(180,255,212,.8); }
.sidebar-auth-pill .auth-action {
  font-family: var(--font-vhs);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .8;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  flex-shrink: 0;
  transition: opacity .15s;
}
.sidebar-auth-pill .auth-action:hover { opacity: 1; }

.sidebar-avatar {
  width: 34px; height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  display: none;
  align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blood, #5a0a0a), var(--panel, #1a1218));
  border: 1px solid rgba(201,151,58,.35);
  font-size: 18px; line-height: 1;
  color: var(--gold);
  box-shadow: 0 0 10px rgba(139,26,26,0.3);
  transition: border-color .2s, box-shadow .2s;
}
.sidebar-auth-pill.authed .sidebar-avatar { display: flex; }
.sidebar-avatar:hover { border-color: rgba(201,151,58,.6); box-shadow: 0 0 14px rgba(139,26,26,0.5); }
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }


/* Section label */
.sidebar-section-label {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fog);
  padding: 14px 16px 6px;
  flex-shrink: 0;
}

/* Nav */
.sidebar .nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  flex-shrink: 0;
}

.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 6px;
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mist);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar .nav-item:hover {
  background: var(--nav-active-bg, rgba(201,151,58,.08));
  color: var(--gold);
  border-color: var(--rim);
}
.sidebar .nav-item.active {
  background: var(--sidebar-active-bg, rgba(201,151,58,.08));
  color: var(--gold);
  border-color: var(--sidebar-active-border, rgba(201,151,58,.20));
}

/* Count badge */
.sidebar .nav-item .nav-count {
  margin-left: auto;
  font-size: 9px;
  opacity: .6;
  background: rgba(255,255,255,.06);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: all .2s;
}
.sidebar .nav-item .nav-count.has-items {
  background: rgba(201,151,58,.15);
  color: var(--gold);
  opacity: 1;
}

/* Divider */
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 14px;
  flex-shrink: 0;
}

/* Footer */
.sidebar-footer {
  margin-top: auto;
  padding: 12px 16px;
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--dust);
  opacity: .45;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-sync-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 1;
}
.sidebar-sync-row .sync-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dust);
  transition: background .3s;
  flex-shrink: 0;
}
.sidebar-sync-row.synced  .sync-dot { background: #4ade80; }
.sidebar-sync-row.syncing .sync-dot { background: var(--gold); animation: vcPulse .9s ease-in-out infinite; }
.sidebar-sync-row.offline .sync-dot { background: var(--blood-bright); }


/* ═══════════════════════════════════════════════════════════════════════
   §5  MAIN AREA
   ═══════════════════════════════════════════════════════════════════════ */

.vc-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding-top: var(--games-nav-h);
}

.vc-page { padding: 0 28px 60px; }


/* ═══════════════════════════════════════════════════════════════════════
   §6  PAGE HEADER (shared across views)
   ═══════════════════════════════════════════════════════════════════════ */

.vc-page-header { padding: 28px 28px 0; }

/* ── Library header with inline action buttons ── */
.vc-lib-page-header { padding-bottom: 0; }
.vc-lib-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
}
.vc-lib-header-left { flex: 1; min-width: 0; }
.vc-lib-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.vc-page-eyebrow {
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--blood-bright);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vc-page-eyebrow::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,26,26,.5)); }
.vc-page-eyebrow::after  { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(139,26,26,.5), transparent); }

.vc-page-title {
  font-family: var(--font-occult);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-pale);
  text-shadow: 0 0 30px rgba(201,151,58,.2);
  margin-bottom: 5px;
}
.vc-page-sub {
  font-family: var(--font-grimoire);
  font-size: 15px;
  font-style: italic;
  color: var(--fog);
  margin-bottom: 20px;
}
.vc-page-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
  margin-bottom: 20px;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7  BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--static);
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover {
  border-color: var(--border-bright);
  color: var(--gold-pale);
}

/* Sizes */
.btn-sm { padding: 6px 12px; font-size: 9px; }
.btn-lg { padding: 12px 24px; font-size: 11px; }

/* Variants */
.btn-ghost {
  border-color: var(--border);
  background: rgba(255,255,255,.03);
  color: var(--dust);
}
.btn-ghost:hover {
  border-color: var(--border-bright);
  color: var(--gold);
  background: rgba(201,151,58,.05);
}

.btn-ritual {
  border-color: var(--blood-bright);
  background: rgba(139,26,26,.18);
  color: rgba(255,160,140,.9);
  box-shadow: 0 0 16px rgba(139,26,26,.2);
}
.btn-ritual:hover {
  background: rgba(139,26,26,.28);
  border-color: rgba(200,60,50,.6);
  box-shadow: 0 0 24px rgba(139,26,26,.3);
  color: #ffb0a0;
}

.btn-primary {
  border-color: var(--gold-dim);
  background: rgba(201,151,58,.12);
  color: var(--gold);
}
.btn-primary:hover {
  background: rgba(201,151,58,.2);
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}

/* Shelf button (secondary actions in modal) */
.btn-shelf {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dust);
  cursor: pointer;
  transition: all .15s;
}
.btn-shelf:hover { border-color: var(--gold); color: var(--gold); }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 2px; top: 2px;
  background: var(--dust);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.toggle input:checked + .toggle-slider { background: rgba(201,151,58,.25); border-color: var(--gold-dim); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); background: var(--gold); }


/* ═══════════════════════════════════════════════════════════════════════
   §8  SEARCH PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* Search bar */
.games-search-wrap { position: relative; margin-bottom: 10px; }

.games-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 16px; pointer-events: none; opacity: .45;
}
.games-search-input {
  width: 100%;
  padding: 13px 120px 13px 48px;
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--static);
  font-family: var(--font-grimoire);
  font-style: italic;
  font-size: 16px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.games-search-input:focus {
  border-color: var(--border-bright);
  box-shadow: 0 0 0 3px rgba(201,151,58,.08), 0 0 20px rgba(201,151,58,.07);
}
.games-search-input::placeholder { color: var(--dust); font-style: italic; }

.games-search-btn-pos {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
}

#games-status {
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
  padding: 4px 0 0;
  min-height: 18px;
}

/* Filter pills */
.games-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.games-filter-row .filter-label {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
  margin-right: 4px;
}
.games-filter-row .filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--deep);
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.games-filter-row .filter-pill input { display: none; }
.games-filter-row .filter-pill:hover { border-color: var(--gold); color: var(--gold); }
.games-filter-row .filter-pill.on {
  border-color: var(--blood-bright);
  color: #e07070;
  background: rgba(139,26,26,.1);
}

/* Toolbar */
.games-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(201,151,58,.10);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.games-toolbar .gt-left,
.games-toolbar .gt-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.games-toolbar .gt-sep { width: 1px; height: 18px; background: var(--border); opacity: .75; margin: 0 2px; }

.games-toolbar .gt-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dust);
  cursor: pointer;
  user-select: none;
}
.games-toolbar .gt-check input { accent-color: var(--gold); width: 14px; height: 14px; }

.games-toolbar .gt-label {
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dust);
}
.games-toolbar .gt-select {
  height: 32px;
  padding: 0 10px;
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--static);
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
  min-width: 160px;
  outline: none;
}
.games-toolbar .gt-select:focus { border-color: var(--border-bright); }

/* Recent searches */
.games-recent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 16px;
  min-height: 36px;
  flex-wrap: wrap;
}
.games-recent .recent-label {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
  padding-top: 6px;
  white-space: nowrap;
}
.games-recent .recent-muted {
  font-family: var(--font-grimoire);
  font-style: italic;
  font-size: 13px;
  color: var(--dust);
  opacity: .75;
  padding: 5px 0;
}
.games-recent .recent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.games-recent .recent-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--fog);
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
}
.games-recent .recent-chip:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,151,58,.05); }


/* ═══════════════════════════════════════════════════════════════════════
   §9  RESULT CARDS
   ═══════════════════════════════════════════════════════════════════════ */

#games-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
#games-results.poster-only .result-info { display: none; }
#games-results.poster-only { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

.result-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--deep);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.result-card:hover {
  border-color: var(--border-bright);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.result-card:focus-visible {
  outline: 2px solid rgba(201,151,58,.6);
  outline-offset: 2px;
}

.result-poster {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  overflow: hidden;
}
.result-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.result-card:hover .result-poster img { transform: scale(1.03); }

.poster-fallback {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
}

/* Shelf badges on results */
.result-badges {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}
.rb {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
}
.rb-owned   { border: 1px solid rgba(255,255,255,.2);  color: rgba(255,255,255,.5); }
.rb-played  { border: 1px solid rgba(201,151,58,.4);  color: #c9973a; }
.rb-playing { border: 1px solid rgba(82,176,0,.45); color: #7de040; }

.result-info { padding: 10px 10px 12px; }
.result-title {
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--static);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.result-meta {
  font-family: var(--font-vhs);
  font-size: 9px;
  color: var(--dust);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.result-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 3px;
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(120,92,255,.10);
  border: 1px solid rgba(120,92,255,.22);
  color: rgba(200,185,255,.88);
}

/* Skeleton loading */
.result-card.skel { pointer-events: none; }
.result-card.skel .result-poster img { display: none; }
.skel-box {
  width: 100%; height: 100%;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  animation: vcPulse 1.4s ease-in-out infinite;
}
.skel-line {
  height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  margin: 10px 0 0;
  animation: vcPulse 1.4s ease-in-out infinite;
}
.skel-line.w70 { width: 70%; }
.skel-line.w35 { width: 35%; }
.skel-tags { display: flex; gap: 5px; margin-top: 9px; }
.skel-pill {
  width: 44px; height: 17px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  animation: vcPulse 1.4s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10  LIBRARY VIEW
   ═══════════════════════════════════════════════════════════════════════ */

.lib-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px 12px;
}
.lib-sync-label {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
  opacity: .7;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lib-sync-label .ldot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dust);
  transition: background .3s;
  flex-shrink: 0;
}
.lib-sync-label.synced  .ldot { background: #4ade80; }
.lib-sync-label.syncing .ldot { background: var(--gold); animation: vcPulse .9s infinite; }
.lib-topbar-spacer { flex: 1; }

.lib-inner { padding: 0 28px 60px; }

.lib-stats-strip {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--deep);
  overflow: hidden;
  margin-bottom: 28px;
}
.lib-stat {
  flex: 1;
  min-width: 80px;
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.lib-stat:last-child { border-right: none; }
.lib-stat-n {
  font-family: var(--font-occult);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 5px;
}
.lib-stat-label {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
}

.lib-section { margin-bottom: 36px; }
.lib-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.lib-section-icon { font-size: 16px; }
.lib-section-title {
  font-family: var(--font-occult);
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-pale);
  letter-spacing: .5px;
}
.lib-section-count {
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--dust);
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 999px;
}
.lib-add-group-btn { margin-left: auto; }

.lib-empty-shelf {
  padding: 20px 0;
  font-family: var(--font-grimoire);
  font-style: italic;
  font-size: 14px;
  color: var(--dust);
  opacity: .7;
}

.lib-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.lib-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--deep);
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.lib-card:hover { border-color: var(--border-bright); box-shadow: 0 4px 16px rgba(0,0,0,.4); }

.lib-card-poster {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.lib-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lib-card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 6px;
  opacity: 0;
  transition: opacity .15s;
}
.lib-card:hover .lib-card-overlay { opacity: 1; }

.lib-card-remove {
  appearance: none;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,100,100,.35);
  color: rgba(255,130,130,.9);
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  padding: 3px 6px;
  font-family: var(--font-vhs);
  letter-spacing: 1px;
  transition: all .12s;
}
.lib-card-remove:hover { background: rgba(180,40,40,.7); border-color: rgba(255,100,100,.6); }

.lib-card-info { padding: 8px 8px 10px; }
.lib-card-name {
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--static);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-card-year { font-family: var(--font-vhs); font-size: 9px; color: var(--dust); letter-spacing: 1px; display: block; margin-top: 2px; }
.lib-card-ago  { font-family: var(--font-vhs); font-size: 8px; color: var(--dust); opacity: .6; letter-spacing: 1px; margin-top: 2px; }
.lib-card-rating {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--gold);
  background: rgba(201,151,58,.1);
  border: 1px solid rgba(201,151,58,.25);
  border-radius: 3px;
  padding: 1px 5px;
}

/* Group lockers */
.lib-group-row {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--deep);
}
.lib-group-name {
  font-family: var(--font-occult);
  font-size: 14px;
  color: var(--gold-pale);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lib-group-shelf-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-mini-card {
  width: 52px; height: 74px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.lib-mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Auth gate */
.lib-auth-gate {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-grimoire);
  color: var(--fog);
}
.lib-auth-gate .gate-icon { font-size: 42px; margin-bottom: 16px; opacity: .5; }
.lib-auth-gate h3 { font-family: var(--font-occult); color: var(--gold-pale); font-size: 20px; margin-bottom: 8px; }
.lib-auth-gate p  { font-size: 15px; font-style: italic; opacity: .75; margin-bottom: 20px; }


/* ═══════════════════════════════════════════════════════════════════════
   §11  SETTINGS VIEW
   ═══════════════════════════════════════════════════════════════════════ */

.vc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
}
.vc-topbar h1 {
  margin: 0;
  font-family: var(--font-occult);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-pale);
  letter-spacing: .5px;
}
#view-settings .vc-page { padding-top: 24px; }

.settings-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--deep);
  padding: 16px;
  margin-bottom: 16px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info { flex: 1; min-width: 0; }
.settings-row-label {
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--static);
  margin-bottom: 3px;
}
.settings-row-desc {
  font-family: var(--font-grimoire);
  font-size: 13px;
  color: var(--fog);
  font-style: italic;
  line-height: 1.4;
}

.card-title {
  font-family: var(--font-occult);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-pale);
  margin-bottom: 12px;
  letter-spacing: .5px;
}
.modal-section-label {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 8px;
}
.modal-divider {
  height: 1px;
  background: var(--border);
}

/* Input */
.input {
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--chamber);
  border: 1px solid var(--border);
  color: var(--static);
  font-family: var(--font-grimoire);
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.input:focus { border-color: var(--border-bright); }

/* Theme picker (injected by JS) */
.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;
}
.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;
  font-family: var(--font-vhs);
}
.vc-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.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));
  padding: 12px 12px 10px;
  overflow: hidden;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.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)); }
.vc-theme-name { font-family: var(--font-display); font-size: 13px; color: color-mix(in srgb, var(--text) 96%, white); margin-bottom: 4px; position: relative; z-index: 1; }
.vc-theme-flavor { font-size: 12px; color: color-mix(in srgb, var(--bone) 92%, white 8%); line-height: 1.45; min-height: 32px; position: relative; z-index: 1; }
.vc-theme-swatches { display: flex; gap: 6px; margin-top: 9px; position: relative; z-index: 1; }
.vc-theme-swatch { width: 13px; height: 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); }
.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);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §12  AUTH MODAL
   ═══════════════════════════════════════════════════════════════════════ */

.vc-auth-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.vc-auth-modal[aria-hidden="false"] { display: flex; }
.vc-auth-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
}
.vc-auth-modal-dialog {
  position: relative;
  width: min(420px, calc(100vw - 40px));
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  background: var(--deep);
  box-shadow: 0 0 60px rgba(139,26,26,.25), 0 32px 80px rgba(0,0,0,.8);
  padding: 28px 28px 24px;
}
.vc-auth-modal-dialog::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: inherit;
}
.vc-auth-title { font-family: var(--font-occult); font-size: 22px; color: var(--gold-pale); margin-bottom: 6px; font-weight: 700; }
.vc-auth-sub   { font-family: var(--font-grimoire); font-style: italic; font-size: 14px; color: var(--fog); margin-bottom: 22px; }
.vc-auth-field { margin-bottom: 14px; }
.vc-auth-field label {
  display: block;
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 6px;
}
.vc-auth-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--chamber);
  border: 1px solid var(--border);
  color: var(--static);
  font-family: var(--font-grimoire);
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.vc-auth-field input:focus { border-color: var(--border-bright); }
.vc-auth-error {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blood-bright);
  margin-bottom: 12px;
  min-height: 16px;
}
.vc-auth-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.vc-auth-switch {
  font-family: var(--font-vhs);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dust);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin-left: auto;
  transition: color .15s;
  opacity: .7;
}
.vc-auth-switch:hover { color: var(--gold); opacity: 1; }
.vc-auth-close { position: absolute; top: 12px; right: 14px; }


/* ═══════════════════════════════════════════════════════════════════════
   §13  GAME DETAILS MODAL
   ═══════════════════════════════════════════════════════════════════════ */

.vc-modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.vc-modal[aria-hidden="false"] { display: flex; }
.vc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
}
.vc-modal-dialog {
  position: relative;
  width: min(1100px, calc(100vw - 32px));
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  background: var(--deep);
  box-shadow: 0 0 80px rgba(139,26,26,.28), 0 40px 100px rgba(0,0,0,.9);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.vc-modal-dialog::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 10; pointer-events: none;
}

/* Banner */
#vc-game-modal[data-has-banner] .vc-modal-dialog::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: var(--vc-game-banner, none);
  background-size: cover;
  background-position: center top;
  opacity: 1; transform: scale(1.04);
  filter: saturate(1.1) brightness(.9);
  pointer-events: none; z-index: 0;
}

.vc-modal-body {
  position: relative; z-index: 2;
  overflow-y: auto; overflow-x: hidden;
  max-height: 92vh;
  padding: 22px 24px 28px;
}
#vc-game-modal[data-has-banner] .vc-modal-body {
  background: linear-gradient(to bottom, rgba(8,6,14,.74) 0%, rgba(8,6,14,.90) 40%, rgba(8,6,14,.97) 100%);
}
.vc-modal-close { position: absolute; top: 12px; right: 14px; z-index: 20; }
.vc-modal-back { position: absolute; top: 12px; left: 14px; z-index: 20; font-family: var(--font-vhs, monospace); font-size: 10px; letter-spacing: .5px; }

/* Modal scrollbar */
.vc-modal-body::-webkit-scrollbar { width: 4px; }
.vc-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   GAME MODAL v2 — Banner backdrop + hero layout
═══════════════════════════════════════════════════════════════ */

/* Banner backdrop — set via --vc-game-banner CSS var */
#vc-game-modal[data-has-banner] .vc-modal-dialog::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: var(--vc-game-banner, none);
  background-size: cover;
  background-position: center top;
  opacity: 1; transform: scale(1.04);
  filter: saturate(1.1) brightness(.85);
  pointer-events: none; z-index: 0;
}
#vc-game-modal[data-has-banner] .vc-modal-body {
  background: linear-gradient(to bottom, rgba(8,6,14,.72) 0%, rgba(8,6,14,.88) 35%, rgba(8,6,14,.97) 60%, var(--deep) 100%);
}

/* ── HERO ── */
.vc-gm-hero {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  padding: 28px 26px 22px;
  min-height: 190px;
  position: relative;
}
.vc-game-modal-cover {
  width: 130px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-bright);
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(201,151,58,.12), 0 0 28px rgba(201,151,58,.08);
  transform: translateY(-6px);
  flex-shrink: 0;
}
.vc-game-modal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vc-gm-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vc-game-modal-title {
  font-family: var(--font-occult);
  font-size: 28px; font-weight: 700;
  color: var(--gold-pale);
  text-shadow: 0 0 40px rgba(201,151,58,.35), 0 2px 10px rgba(0,0,0,.8);
  line-height: 1.05;
}
.vc-game-modal-sub {
  font-family: var(--font-vhs);
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dust);
}

/* Status stamp */
.vc-gm-status-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-family: var(--font-vhs);
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  width: fit-content;
  cursor: pointer;
  transition: all .2s;
  /* default — locker state; JS overrides color vars per-state */
  background: rgba(201,151,58,.12);
  border: 1px solid rgba(201,151,58,.38);
  color: var(--gold);
}
.vc-gm-status-stamp[data-status="playing"]   { background:rgba(110,181,255,.12); border-color:rgba(110,181,255,.38); color:#6eb5ff; }
.vc-gm-status-stamp[data-status="completed"] { background:rgba(78,207,138,.12);  border-color:rgba(78,207,138,.38);  color:#4ecf8a; }
.vc-gm-status-stamp[data-status="backlog"]   { background:rgba(240,208,128,.1);  border-color:rgba(240,208,128,.32); color:#f0d080; }
.vc-gm-status-stamp[data-status="wishlist"]  { background:rgba(196,154,255,.12); border-color:rgba(196,154,255,.35); color:#c49aff; }
.vc-gm-status-stamp[data-status="dropped"]   { background:rgba(255,122,122,.1);  border-color:rgba(255,122,122,.32); color:#ff7a7a; }
.vc-gm-stamp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
  animation: vc-stamp-pulse 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes vc-stamp-pulse { 0%,100%{opacity:1} 50%{opacity:.38} }
.vc-gm-stamp-text { flex: 1; }
.vc-gm-stamp-edit { font-size: 9px; opacity: .45; }

/* Rating row (reused personal-block id) */
.vc-gm-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-gm-rating-lbl {
  font-family: var(--font-vhs); font-size: 8px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--dust); white-space: nowrap;
}
.vc-game-stars { display: flex; gap: 3px; }
.vc-game-stars .star {
  font-size: 16px; cursor: pointer;
  opacity: .2; transition: opacity .1s;
  color: var(--gold); line-height: 1;
}
.vc-game-stars .star.on { opacity: 1; }
.vc-game-stars:hover .star { opacity: 1; }
.vc-game-stars .star:hover ~ .star { opacity: .2 !important; }
#vc-game-rating-val {
  font-family: var(--font-vhs); font-size: 10px; letter-spacing: 1px; color: var(--gold);
}

/* Copy chips row in hero */
.vc-gm-copies-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vc-gm-copy-chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* individual chip — rendered by vcRefreshOwnedSection into #vc-modal-owned-chips */
.vc-owned-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  cursor: pointer; transition: all .15s;
  font-size: 11px;
}
.vc-owned-chip:hover { border-color: var(--border-bright); background: rgba(201,151,58,.08); }
.vc-gm-copy-add-btn {
  padding: 5px 12px;
  background: transparent;
  border: 1px dashed rgba(201,151,58,.28);
  border-radius: var(--radius);
  color: var(--gold-dim);
  font-family: var(--font-vhs); font-size: 10px; letter-spacing: 1px;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.vc-gm-copy-add-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── SHELF PILLS ROW ── */
.vc-gm-shelf-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 26px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
}
.vc-gm-shelf-lbl {
  font-family: var(--font-vhs); font-size: 8px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--dust); margin-right: 4px; white-space: nowrap;
}
/* Override btn-shelf inside shelf row to pill style */
.vc-gm-shelf-row .vc-gm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  font-family: var(--font-vhs); font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.3);
}
.vc-gm-shelf-row .vc-gm-pill:hover { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }
/* Active states — set by syncActionLabels via textContent change + data attr */
.vc-gm-shelf-row .vc-gm-pill.active-locker    { background:rgba(201,151,58,.14); border-color:rgba(201,151,58,.45); color:var(--gold); }
.vc-gm-shelf-row .vc-gm-pill.active-playing   { background:rgba(110,181,255,.13); border-color:rgba(110,181,255,.42); color:#6eb5ff; }
.vc-gm-shelf-row .vc-gm-pill.active-completed { background:rgba(78,207,138,.12);  border-color:rgba(78,207,138,.4);  color:#4ecf8a; }
.vc-gm-shelf-row .vc-gm-pill.active-backlog   { background:rgba(240,208,128,.1);  border-color:rgba(240,208,128,.32); color:#f0d080; }
.vc-gm-shelf-row .vc-gm-pill.active-wishlist  { background:rgba(196,154,255,.11); border-color:rgba(196,154,255,.35); color:#c49aff; }
.vc-gm-shelf-row .vc-gm-pill.active-dropped   { background:rgba(255,122,122,.1);  border-color:rgba(255,122,122,.32); color:#ff7a7a; }

/* ── COVEN ROW ── */
.vc-gm-coven-row {
  display: flex; align-items: center; gap: 0;
  padding: 10px 26px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
.vc-gm-coven-block { display: flex; align-items: center; gap: 9px; flex: 1; }
.vc-gm-coven-block + .vc-gm-coven-block {
  border-left: 1px solid var(--border); padding-left: 22px; margin-left: 6px;
}
.vc-gm-coven-lbl {
  font-family: var(--font-vhs); font-size: 8px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--dust); white-space: nowrap;
}
.vc-gm-avatars { display: flex; align-items: center; }
.vc-gm-av {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--deep); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-occult); font-size: 10px; font-weight: 700; color: var(--gold);
  margin-right: -8px; flex-shrink: 0; overflow: hidden;
}
.vc-gm-av:last-child { margin-right: 0; }
.vc-gm-av img { width: 100%; height: 100%; object-fit: cover; }
.vc-gm-coven-n {
  font-family: var(--font-vhs); font-size: 9px; color: var(--fog); margin-left: 14px;
}

/* ── NOTES BLOCK ── */
.vc-gm-notes-block {
  padding: 14px 26px;
  border-bottom: 1px solid var(--border);
}
.vc-gm-sec-lbl {
  font-family: var(--font-vhs); font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dust); margin-bottom: 8px;
  display: flex; align-items: center; gap: 7px;
}
.vc-gm-sec-lbl::before { content: '⛧'; color: var(--blood-bright); font-size: 10px; }
/* reuse existing .vc-game-notes-area styles */

/* ── COLLAPSIBLE SECTIONS ── */
.vc-gm-collapse { border-bottom: 1px solid var(--border); }
.vc-gm-collapse-hdr {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px;
  background: none; border: none; cursor: pointer;
  transition: background .15s; text-align: left;
}
.vc-gm-collapse-hdr:hover { background: rgba(255,255,255,.02); }
.vc-gm-collapse-title {
  font-family: var(--font-vhs); font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--fog); display: flex; align-items: center; gap: 7px;
}
.vc-gm-collapse-title::before { content: '⛧'; color: var(--blood-bright); font-size: 10px; }
.vc-gm-chevron {
  font-family: var(--font-vhs); font-size: 9px; color: var(--dust);
  transition: transform .2s; flex-shrink: 0;
}
.vc-gm-collapse.open .vc-gm-chevron { transform: rotate(180deg); }
.vc-gm-collapse-body { display: none; padding: 4px 26px 18px; }
.vc-gm-collapse.open .vc-gm-collapse-body { display: block; }

.vc-gm-storyline-block { margin-bottom: 12px; }
.vc-gm-storyline-text {
  font-family: var(--font-grimoire); font-style: italic; font-size: 13px;
  color: var(--fog); line-height: 1.7; border-left: 2px solid var(--border);
  padding-left: 12px; margin-bottom: 10px;
}
.vc-gm-summary-text {
  font-family: var(--font-grimoire); font-size: 14px;
  color: var(--fog); line-height: 1.78;
}

/* ── ACTION BAR ── */
/* Keep old facts/media/links CSS working (IDs still used) */
.vc-game-modal-links-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 8px;
}
.vc-linkcard {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; min-height: 52px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.vc-linkcard:hover { border-color: rgba(201,151,58,.4); background: rgba(0,0,0,.24); }
.vc-linkcard .h {
  font-family: var(--font-vhs);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-pale); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-linkcard .p { font-size: 12px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fog); }


/* ═══════════════════════════════════════════════════════════════════════
   §14  TOAST
   ═══════════════════════════════════════════════════════════════════════ */

.vc-toast {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%) translateY(10px);
  background: var(--chamber);
  border: 1px solid var(--border-bright);
  color: var(--gold);
  padding: 10px 18px;
  border-radius: 4px;
  font-family: var(--font-vhs);
  font-size: 11px; letter-spacing: 1px;
  opacity: 0;
  transition: opacity .18s, transform .18s;
  z-index: 10050;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 16px rgba(201,151,58,.1);
  pointer-events: none;
}
.vc-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ═══════════════════════════════════════════════════════════════════════
   §15  DIAGNOSTICS OVERLAY  (Ctrl+Shift+D)
   ═══════════════════════════════════════════════════════════════════════ */

#vc-diag-overlay {
  position: fixed;
  top: 60px; right: 20px;
  width: 280px;
  background: var(--chamber);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.8);
  z-index: 9998;
  font-family: var(--font-vhs);
  font-size: 10px;
  letter-spacing: 1px;
}
#vc-diag-overlay .hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
}
#vc-diag-overlay .body { padding: 10px 14px; }
#vc-diag-overlay .row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
#vc-diag-overlay .row:last-child { border-bottom: none; }
#vc-diag-overlay .k { color: var(--dust); }
#vc-diag-overlay .v { color: var(--gold-pale); }
#vc-diag-overlay .btns { display: flex; gap: 8px; margin-top: 10px; }


/* ═══════════════════════════════════════════════════════════════════════
   §16  FX TOGGLES
   ═══════════════════════════════════════════════════════════════════════ */

body.vc-fx-icegrid-on .vc-modal-dialog,
body.vc-fx-icegrid-on .lib-card,
body.vc-fx-icegrid-on .result-card,
body.vc-fx-icegrid-on .settings-section { position: relative; }

body.vc-fx-icegrid-on .vc-modal-dialog::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, .12);
  mix-blend-mode: screen;
  z-index: 1;
}

body.vc-fx-trace-on .btn,
body.vc-fx-trace-on .result-card { position: relative; overflow: hidden; }

body.vc-fx-trace-on .btn::after,
body.vc-fx-trace-on .result-card::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:hover::after,
body.vc-fx-trace-on .result-card:hover::after {
  opacity: 1;
  animation: vcTraceSweep .65s ease-out 1;
}

body.vc-fx-glitch-pulse .vc-modal-dialog { animation: vcGlitchPulse 180ms ease-out 1; }


/* ═══════════════════════════════════════════════════════════════════════
   §17  RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .sidebar { display: none; }
  .vc-main { margin-left: 0; }
  .vc-game-modal-hero { flex-direction: column; }
  .vc-game-modal-cover { width: 100%; max-width: 180px; }
  .vc-page, .lib-inner { padding: 0 16px 40px; }
  .vc-page-header { padding: 20px 16px 0; }
  .lib-stats-strip { flex-wrap: wrap; }
  .lib-stat { min-width: calc(33% - 1px); }
  .vc-game-modal-facts-grid { grid-template-columns: 1fr; }
  .vc-theme-grid { grid-template-columns: 1fr; }
  .games-toolbar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .vc-page-title { font-size: 24px; }
  .vc-modal-dialog { margin: 2vh auto; }
  .vc-modal-body { padding: 16px 16px 20px; }
}


/* ─── 3. THEME EXPANSION ─────────────────────────────────── */
/*
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║  VIDEOCCULT — THEME EXPANSION PACK v1                                   ║
 * ║  New IP themes: Alan Wake II · Control · Mass Effect · Resident Evil    ║
 * ║  KOTOR · Zelda · Marathon · Halo 2 · Mario · Dragon Age · Fallout       ║
 * ║                                                                          ║
 * ║  HOW TO USE:                                                             ║
 * ║  1. Include this file AFTER videoccult-themes.css                        ║
 * ║  2. Register themes via vcRegisterTheme() OR use the auto-boot block     ║
 * ║     at the bottom of this file (include the <script> tag in your HTML)  ║
 * ║  3. Each theme wires its FX preset via the applyPreset* functions        ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 */