/* ═══════════════════════════════════════════════════════════ 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="" to your or 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 ): ║ * ║ 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 ); } /* Light theme bodies need explicit text colour */ :root[data-vc-theme="light_academia"] body, :root[data-vc-theme="hedgerow"] body { color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════ §4 THEME VARIABLE OVERRIDES Each block only lists tokens that differ from the §2 defaults. ═══════════════════════════════════════════════════════════════════════ */ /* ── 4.0 Videoccult (default) — no overrides needed ── */ :root[data-vc-theme="videoccult"] { } /* ── 4.1 Netrunner — clean cyan HUD, data-glass, trace lines ── */ :root[data-vc-theme="netrunner"] { --void: #05070c; --abyss: #080b14; --chamber: #0b1120; --deep: #080b14; --altar: #0b1120; --surface: #101a2c; --text: rgba(236,248,255,.92); --static: rgba(236,248,255,.90); --fog: rgba(184,210,235,.55); --dust: rgba(184,210,235,.38); /* Gold slot → cyan */ --gold: #00f0ff; --gold-pale: rgba(220,252,255,.92); --gold-dim: rgba(0,240,255,.55); --gold-glow: rgba(0,240,255,.20); /* Blood slot → hot red alert */ --blood: #ff2a3d; --blood-bright: #ff5a67; --border: rgba(0,240,255,.16); --border-bright: rgba(0,240,255,.40); --rim: rgba(0,240,255,.18); --line: rgba(0,240,255,.10); /* Named Netrunner palette */ --nr-cyan: #00f0ff; --nr-blue: #2c7bff; --nr-violet: #7b2cff; --nr-red: #ff2a3d; /* FX colours */ --fx-trace-color: rgba(0,240,255,.22); --fx-icegrid-h: rgba(0,240,255,.07); --fx-icegrid-v: rgba(0,240,255,.05); --fx-icegrid-opacity: 0.14; } /* ── 4.2 Blackwall — arterial red, corrupted void, daemon static ── */ :root[data-vc-theme="blackwall"] { --void: #07040a; --abyss: #0e0508; --chamber: #160a0c; --deep: #0e0508; --altar: #160a0c; --surface: #200b0e; --bg: #07040a; --bg2: #0e0508; --panel: #160a0c; --panel2: #1c0c0f; --text: rgba(255,228,228,.92); --static: rgba(255,220,220,.88); --fog: rgba(255,160,160,.50); --dust: rgba(255,130,130,.32); /* Gold slot → hot arterial red */ --gold: #ff1f35; --gold-pale: rgba(255,200,200,.94); --gold-dim: rgba(255,31,53,.55); --gold-glow: rgba(255,31,53,.28); /* Blood slot → corrupted violet */ --blood: #9b30ff; --blood-bright: #c466ff; --border: rgba(255,31,53,.20); --border-bright: rgba(255,31,53,.55); --rim: rgba(255,31,53,.22); --line: rgba(255,31,53,.14); /* Named Blackwall palette */ --bw-red: #ff1f35; --bw-violet: #9b30ff; --bw-cyan: #00f0ff; /* Convenience aliases */ --accent: var(--bw-red); --accent-dim: rgba(255,31,53,.18); /* FX colours */ --fx-trace-color: rgba(255,31,53,.24); --fx-icegrid-h: rgba(255,31,53,.08); --fx-icegrid-v: rgba(155,48,255,.06); --fx-icegrid-opacity: 0.12; } /* ── 4.3 Witch — velvet violets, moonlit spellcraft ── */ :root[data-vc-theme="witch"] { --void: #0c0714; --abyss: #100918; --chamber: #1b1029; --deep: #140b1f; --altar: #1b1029; --surface: #241535; --text: #efe6f8; --bone: #f2eaf9; --gold: #b78cff; --gold-pale: #f3eaff; --gold-dim: rgba(183,140,255,.55); --gold-glow: rgba(183,140,255,.20); --blood: #5b246f; --blood-bright: #8e44ad; --rim: rgba(183,140,255,.28); --border: rgba(172,134,255,.16); --border-bright: rgba(172,134,255,.40); --fx-trace-color: rgba(172,134,255,.20); --fx-icegrid-h: rgba(172,134,255,.06); --fx-icegrid-v: rgba(127,74,182,.05); --fx-icegrid-opacity: 0.12; } /* ── 4.4 Lovecraft — briny ink, sea-glass sigils, eldritch archive ── */ :root[data-vc-theme="lovecraft"] { --void: #071014; --abyss: #0b1a20; --chamber: #0f2228; --deep: #0b1a20; --altar: #0f2228; --surface: #142e38; --text: #d6e6de; --static: #d6e6de; --bone: #dbe8e2; --gold: #8fb6a5; --gold-pale: #d5efe5; --gold-dim: rgba(143,182,165,.55); --gold-glow: rgba(143,182,165,.20); --blood: #153a38; --blood-bright: #2c6b68; --rim: rgba(143,182,165,.28); --border: rgba(90,138,136,.20); --border-bright: rgba(90,138,136,.40); --fx-trace-color: rgba(90,138,136,.22); --fx-icegrid-h: rgba(90,138,136,.07); --fx-icegrid-v: rgba(32,54,59,.05); --fx-icegrid-opacity: 0.13; } /* ── 4.5 Dark Academia — candlelit vellum, oak desks, annotations ── */ :root[data-vc-theme="dark_academia"] { --void: #120d0a; --abyss: #1a1410; --chamber: #231b15; --deep: #1a1410; --altar: #231b15; --surface: #2e2219; --text: #efe3cf; --bone: #f3e8d6; --gold: #b98b55; --gold-pale: #f0ddbf; --gold-dim: rgba(185,139,85,.55); --gold-glow: rgba(185,139,85,.20); --blood: #5a2e21; --blood-bright: #85412f; --rim: rgba(185,139,85,.26); --border: rgba(188,148,96,.20); --border-bright: rgba(188,148,96,.44); --nav-shell: linear-gradient(180deg, rgba(27,22,18,.96), rgba(22,18,15,.95)); --nav-border: rgba(201,164,112,.18); --sidebar-shell: linear-gradient(180deg, rgba(24,20,16,.98), rgba(18,15,12,.98)); --sidebar-border: rgba(201,164,112,.14); --nav-active-bg: rgba(201,164,112,.08); --nav-active-border: rgba(201,164,112,.20); --sidebar-active-bg: rgba(201,164,112,.08); --sidebar-active-border: rgba(201,164,112,.20); --fx-trace-color: rgba(188,148,96,.18); --fx-icegrid-h: rgba(188,148,96,.05); --fx-icegrid-v: rgba(141,90,67,.04); --fx-icegrid-opacity: 0.11; } /* ── 4.6 Light Academia — sunlit papers, linen margins, scholastic calm ── */ :root[data-vc-theme="light_academia"] { --void: #ede6da; --abyss: #e8dfcf; --chamber: #f4eee2; --deep: #e8dfcf; --altar: #f4eee2; --surface: #f9f5ee; --bg: #ede6da; --bg2: #e8dfcf; --panel: #f4eee2; --panel2: #f9f5ee; --text: #2b2218; --static: #3a2e20; --bone: #33291e; --fog: rgba(80,60,40,.55); --dust: rgba(80,60,40,.36); --gold: #8e6a3d; --gold-pale: #f6f0e3; --gold-dim: rgba(142,106,61,.55); --gold-glow: rgba(142,106,61,.18); --blood: #8a4c3c; --blood-bright: #a55c49; --rim: rgba(142,106,61,.25); --border: rgba(156,126,87,.20); --border-bright: rgba(156,126,87,.44); --nav-shell: linear-gradient(180deg, rgba(243,239,228,.96), rgba(236,231,217,.94)); --nav-border: rgba(145,115,84,.20); --sidebar-shell: linear-gradient(180deg, rgba(241,236,224,.98), rgba(232,226,212,.98)); --sidebar-border: rgba(145,115,84,.16); --nav-active-bg: rgba(145,115,84,.08); --nav-active-border: rgba(145,115,84,.20); --sidebar-active-bg: rgba(145,115,84,.08); --sidebar-active-border: rgba(145,115,84,.20); } /* Light Academia nav text overrides */ :root[data-vc-theme="light_academia"] .nav-logo { color: #6c5032 !important; text-shadow: none !important; } :root[data-vc-theme="light_academia"] .nav-logo .sigil { color: #9f6a47 !important; } :root[data-vc-theme="light_academia"] .nav-links a, :root[data-vc-theme="light_academia"] .nav-right span, :root[data-vc-theme="light_academia"] .sidebar-item, :root[data-vc-theme="light_academia"] .sidebar-section-label { color: rgba(56,44,32,.78) !important; } :root[data-vc-theme="light_academia"] .nav-links a:hover, :root[data-vc-theme="light_academia"] .nav-links a.active, :root[data-vc-theme="light_academia"] .sidebar-item:hover, :root[data-vc-theme="light_academia"] .sidebar-item.active { color: #5a4126 !important; } :root[data-vc-theme="light_academia"] .sidebar-group-icon { background: rgba(255,250,242,.75) !important; border-color: rgba(145,115,84,.20) !important; color: #6c5032 !important; } /* ── 4.7 Hedgerow Witch — moss paths, dried herbs, soft hedge-magic ── */ :root[data-vc-theme="hedgerow"] { --void: #f2eee5; --abyss: #ebe5d8; --chamber: #f6f2ea; --deep: #ebe5d8; --altar: #f6f2ea; --surface: #faf8f3; --bg: #f2eee5; --bg2: #ebe5d8; --panel: #f6f2ea; --panel2: #faf8f3; --text: #2e342d; --static: #3a4038; --bone: #3a4038; --fog: rgba(46,52,45,.55); --dust: rgba(46,52,45,.36); --gold: #7e8f74; --gold-pale: #f3eee6; --gold-dim: rgba(126,143,116,.55); --gold-glow: rgba(126,143,116,.18); --blood: #a07a84; --blood-bright: #b28c96; --rim: rgba(126,143,116,.22); --border: rgba(144,166,127,.20); --border-bright: rgba(144,166,127,.44); --nav-shell: radial-gradient(90% 180% at 10% 0%, rgba(120,153,112,.10), transparent 60%), linear-gradient(180deg, rgba(21,27,21,.96), rgba(15,20,16,.95)); --nav-border: rgba(164,186,146,.18); --sidebar-shell: radial-gradient(120% 140% at 10% 0%, rgba(120,153,112,.08), transparent 60%), linear-gradient(180deg, rgba(17,23,18,.98), rgba(12,16,13,.98)); --sidebar-border: rgba(164,186,146,.14); --nav-active-bg: rgba(164,186,146,.07); --nav-active-border: rgba(164,186,146,.18); --sidebar-active-bg: rgba(164,186,146,.07); --sidebar-active-border: rgba(164,186,146,.18); --settings-shell-bg: radial-gradient(120% 120% at 12% 8%, rgba(138,167,120,.07), transparent 55%), linear-gradient(180deg, rgba(17,22,16,.94), rgba(11,15,13,.94)); --settings-shell-border: rgba(164,186,146,.20); --fx-trace-color: rgba(144,166,127,.20); --fx-icegrid-h: rgba(144,166,127,.06); --fx-icegrid-v: rgba(120,153,112,.04); --fx-icegrid-opacity: 0.12; } /* ═══════════════════════════════════════════════════════════════════════ §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 ║ * ╚══════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════════ §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; } /* ── Theme overrides (Netrunner) ── */ :root[data-vc-theme="netrunner"] { --void: #05070c; --abyss: #080b14; --chamber: #0b1120; --deep: #080b14; --altar: #0b1120; --surface: #101a2c; --text: rgba(236,248,255,.92); --static: rgba(236,248,255,.90); --fog: rgba(184,210,235,.55); --dust: rgba(184,210,235,.38); --gold: #00f0ff; --gold-pale: rgba(220,252,255,.92); --gold-dim: rgba(0,240,255,.55); --gold-glow: rgba(0,240,255,.20); --blood: #ff2a3d; --blood-bright: #ff5a67; --border: rgba(0,240,255,.16); --border-bright: rgba(0,240,255,.40); --rim: rgba(0,240,255,.18); --line: rgba(0,240,255,.10); --fx-trace-color: rgba(0,240,255,.22); --fx-icegrid-h: rgba(0,240,255,.07); --fx-icegrid-v: rgba(0,240,255,.05); } :root[data-vc-theme="blackwall"] { --void: #07040a; --abyss: #0e0508; --chamber: #160a0c; --deep: #0e0508; --altar: #160a0c; --surface: #200b0e; --text: rgba(255,228,228,.92); --static: rgba(255,220,220,.88); --fog: rgba(255,160,160,.50); --dust: rgba(255,130,130,.32); --gold: #ff1f35; --gold-pale: rgba(255,200,200,.94); --gold-dim: rgba(255,31,53,.55); --gold-glow: rgba(255,31,53,.28); --blood: #9b30ff; --blood-bright: #c466ff; --border: rgba(255,31,53,.20); --border-bright: rgba(255,31,53,.55); --rim: rgba(255,31,53,.22); --line: rgba(255,31,53,.14); --fx-trace-color: rgba(255,31,53,.24); --fx-icegrid-h: rgba(255,31,53,.08); --fx-icegrid-v: rgba(155,48,255,.06); } :root[data-vc-theme="witch"] { --void: #0c0714; --abyss: #100918; --chamber: #1b1029; --deep: #140b1f; --altar: #1b1029; --surface: #241535; --text: #efe6f8; --bone: #f2eaf9; --gold: #b78cff; --gold-pale: #f3eaff; --gold-dim: rgba(183,140,255,.55); --gold-glow: rgba(183,140,255,.20); --blood: #5b246f; --blood-bright: #8e44ad; --rim: rgba(183,140,255,.28); --border: rgba(172,134,255,.16); --border-bright: rgba(172,134,255,.40); } :root[data-vc-theme="lovecraft"] { --void: #071014; --abyss: #0b1a20; --chamber: #0f2228; --deep: #0b1a20; --altar: #0f2228; --surface: #142e38; --text: #d6e6de; --static: #d6e6de; --bone: #dbe8e2; --gold: #8fb6a5; --gold-pale: #d5efe5; --gold-dim: rgba(143,182,165,.55); --gold-glow: rgba(143,182,165,.20); --blood: #153a38; --blood-bright: #2c6b68; --rim: rgba(143,182,165,.28); --border: rgba(90,138,136,.20); --border-bright: rgba(90,138,136,.40); } :root[data-vc-theme="dark_academia"] { --void: #120d0a; --abyss: #1a1410; --chamber: #231b15; --deep: #1a1410; --altar: #231b15; --surface: #2e2219; --text: #efe3cf; --bone: #f3e8d6; --gold: #b98b55; --gold-pale: #f0ddbf; --gold-dim: rgba(185,139,85,.55); --gold-glow: rgba(185,139,85,.20); --blood: #5a2e21; --blood-bright: #85412f; --rim: rgba(185,139,85,.26); --border: rgba(188,148,96,.20); --border-bright: rgba(188,148,96,.44); } :root[data-vc-theme="light_academia"] { --void: #ede6da; --abyss: #e8dfcf; --chamber: #f4eee2; --deep: #e8dfcf; --altar: #f4eee2; --surface: #f9f5ee; --text: #2b2218; --static: #3a2e20; --bone: #33291e; --fog: rgba(80,60,40,.55); --dust: rgba(80,60,40,.36); --gold: #8e6a3d; --gold-pale: #f6f0e3; --blood: #8a4c3c; --blood-bright: #a55c49; --border: rgba(156,126,87,.20); --border-bright: rgba(156,126,87,.44); --rim: rgba(142,106,61,.25); } :root[data-vc-theme="hedgerow"] { --void: #f2eee5; --abyss: #ebe5d8; --chamber: #f6f2ea; --deep: #ebe5d8; --altar: #f6f2ea; --surface: #faf8f3; --text: #2e342d; --static: #3a4038; --bone: #3a4038; --fog: rgba(46,52,45,.55); --dust: rgba(46,52,45,.36); --gold: #7e8f74; --gold-pale: #f3eee6; --blood: #a07a84; --blood-bright: #b28c96; --border: rgba(144,166,127,.20); --border-bright: rgba(144,166,127,.44); --rim: rgba(126,143,116,.22); } /* ═══════════════════════════════════════════════════════════════════════ §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; } /* ═══════════════════════════════════════════════════════════════════════ §4 SIDEBAR ═══════════════════════════════════════════════════════════════════════ */ .sidebar { width: var(--sidebar-w); position: fixed; top: 0; 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; } .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; } /* 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 ── */ .vc-gm-action-bar { display: flex; align-items: center; gap: 8px; padding: 11px 26px; background: rgba(0,0,0,.22); border-top: 1px solid var(--border); } .vc-gm-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); color: var(--fog); font-size: 14px; cursor: pointer; transition: all .15s; } .vc-gm-icon-btn:hover { border-color: var(--border-bright); color: var(--static); } .vc-gm-icon-btn--danger:hover { border-color: rgba(255,80,80,.4); color: rgba(255,100,100,.65); } /* 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