/* ================================================================ SHATTERED REALM — themes.css Six unlockable UI themes. Each theme overrides only the accent CSS variables defined in main.css. The void/surface/text palette stays consistent — only the primary accent colour group shifts. HOW IT WORKS ───────────────────────────────────────────────────────────── JS sets data-theme="" on . Each block below targets that attribute and overrides the relevant CSS custom properties. Because everything in main.css references these variables, the entire UI re-skins instantly — zero DOM manipulation, zero class juggling, zero JS repaints. UNLOCK CONDITIONS (enforced in js/systems/prestige.js) ───────────────────────────────────────────────────────────── default → Always available blood → Reach Zone 10 arcane → Complete first Ascension nature → Unlock Forest Warden hero faction ice → Reach PvP rank Platinum void → Complete 10 Ascensions (Outsider unlock) TABLE OF CONTENTS ───────────────────────────────────────────────────────────── 01. Default (Dark Gold) — always available 02. Blood Knight (Dark Crimson) — zone milestone 03. Arcane (Deep Purple) — first ascension 04. Forest Warden(Dark Green) — faction unlock 05. Ice Sovereign(Glacier Blue) — pvp milestone 06. Void Walker (Indigo Abyss) — transcendence 07. Theme transition animation 08. Per-theme overrides for complex components ================================================================ */ /* ================================================================ 01. DEFAULT — Dark Gold The base theme. Defined here as well as in main.css :root so switching back from another theme fully resets everything. ================================================================ */ [data-theme="default"] { /* Gold accent — primary */ --clr-gold: #d4a017; --clr-gold-hi: #ffd700; --clr-gold-lo: #8a6a10; --clr-gold-glow: rgba(212, 160, 23, 0.18); --clr-gold-glow2: rgba(212, 160, 23, 0.06); /* Crimson — danger / enemy (unchanged across themes) */ --clr-crim: #c0392b; --clr-crim-hi: #e74c3c; --clr-crim-lo: #7b241c; --clr-crim-glow: rgba(192, 57, 43, 0.18); /* Arcane — secondary accent */ --clr-arc: #7c3aed; --clr-arc-hi: #a855f7; --clr-arc-lo: #4c1d95; --clr-arc-glow: rgba(124, 58, 237, 0.18); /* Teal — healer / nature */ --clr-teal: #0d9488; --clr-teal-hi: #2dd4bf; --clr-teal-lo: #134e4a; /* Amber — fire / warning */ --clr-amber: #d97706; --clr-amber-hi: #fbbf24; --clr-amber-lo: #78350f; /* Borders keyed to accent */ --border-gold: rgba(212, 160, 23, 0.35); --border-arc: rgba(168, 85, 247, 0.30); /* Shadows keyed to accent */ --shadow-gold: 0 0 24px rgba(212, 160, 23, 0.22); --shadow-arc: 0 0 20px rgba(168, 85, 247, 0.20); /* Surface layer — unchanged */ --clr-surface: #141428; --clr-surface-2: #1a1a34; --clr-surface-3: #20203e; --clr-surface-4: #282850; /* HUD zone bar fill */ --hud-bar-a: var(--clr-gold-lo); --hud-bar-b: var(--clr-gold); /* Tab active indicator */ --tab-active-clr: var(--clr-gold); --tab-active-glow: var(--clr-gold-glow); /* Loading bar fill */ --load-bar-a: var(--clr-gold-lo); --load-bar-b: var(--clr-gold-hi); /* Prestige souls value */ --prestige-val-clr: var(--clr-gold-hi); /* Auth header glow */ --auth-header-glow: rgba(212, 160, 23, 0.14); /* Gacha title color */ --gacha-title-clr: var(--clr-arc-hi); --gacha-title-glow: var(--clr-arc-glow); /* Theme badge color (shown in settings) */ --theme-badge-bg: var(--clr-gold-glow); --theme-badge-clr: var(--clr-gold); } /* ================================================================ 02. BLOOD KNIGHT — Dark Crimson Deep red dominates. Death metal meets dark fantasy. Unlock: clear Zone 10. ================================================================ */ [data-theme="blood"] { /* Primary accent → crimson */ --clr-gold: #c0392b; --clr-gold-hi: #ff4d3d; --clr-gold-lo: #7b241c; --clr-gold-glow: rgba(192, 57, 43, 0.22); --clr-gold-glow2: rgba(192, 57, 43, 0.07); /* Danger stays slightly different so errors still read */ --clr-crim: #9b1b10; --clr-crim-hi: #c0392b; --clr-crim-lo: #5c1009; --clr-crim-glow: rgba(155, 27, 16, 0.22); /* Arcane → dark amber (bone gold) */ --clr-arc: #92400e; --clr-arc-hi: #d97706; --clr-arc-lo: #451a03; --clr-arc-glow: rgba(146, 64, 14, 0.22); /* Teal → muted iron */ --clr-teal: #6b4226; --clr-teal-hi: #b45309; --clr-teal-lo: #3c1e0e; /* Amber stays amber */ --clr-amber: #b45309; --clr-amber-hi: #d97706; --clr-amber-lo: #7c2d12; /* Borders */ --border-gold: rgba(192, 57, 43, 0.40); --border-arc: rgba(217, 119, 6, 0.30); /* Shadows */ --shadow-gold: 0 0 24px rgba(192, 57, 43, 0.28); --shadow-arc: 0 0 20px rgba(217, 119, 6, 0.20); /* Surface — slightly warmer blacks */ --clr-surface: #160a0a; --clr-surface-2: #1e0e0e; --clr-surface-3: #281414; --clr-surface-4: #301a1a; /* Theme-specific vars */ --hud-bar-a: var(--clr-gold-lo); --hud-bar-b: var(--clr-gold-hi); --tab-active-clr: var(--clr-gold-hi); --tab-active-glow: var(--clr-gold-glow); --load-bar-a: var(--clr-gold-lo); --load-bar-b: var(--clr-gold-hi); --prestige-val-clr: var(--clr-gold-hi); --auth-header-glow: rgba(192, 57, 43, 0.16); --gacha-title-clr: var(--clr-arc-hi); --gacha-title-glow: var(--clr-arc-glow); --theme-badge-bg: var(--clr-gold-glow); --theme-badge-clr: var(--clr-gold-hi); } /* Blood Knight — body ambient */ [data-theme="blood"] body { background-image: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(192,57,43,0.05) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(146,64,14,0.04) 0%, transparent 50%); } /* Blood Knight — loading rune color */ [data-theme="blood"] .loading-logo-rune svg circle, [data-theme="blood"] .loading-logo-rune svg polygon { stroke: #ff4d3d; } [data-theme="blood"] .loading-logo-rune svg circle:last-child { fill: #ff4d3d; } [data-theme="blood"] .loading-title { color: #ff4d3d; text-shadow: 0 0 40px rgba(192,57,43,0.4), 0 0 80px rgba(192,57,43,0.1); } [data-theme="blood"] .loading-bar-fill { background: linear-gradient(90deg, #7b241c, #ff4d3d); box-shadow: 0 0 8px rgba(192,57,43,0.4); } [data-theme="blood"] .hud-logo-text { color: #ff4d3d; text-shadow: 0 0 16px rgba(192,57,43,0.4); } [data-theme="blood"] .hud-zone-bar-fill { background: linear-gradient(90deg, #7b241c, #ff4d3d); } [data-theme="blood"] .tab-item.active { color: #ff4d3d; } [data-theme="blood"] .tab-item.active::before { background: #ff4d3d; box-shadow: 0 2px 8px rgba(192,57,43,0.4); } [data-theme="blood"] .enemy-hp-bar-fill { background: linear-gradient(90deg, #5c1009, #c0392b); } [data-theme="blood"] .auth-card { border-color: rgba(192,57,43,0.40); } [data-theme="blood"] .btn-primary { background: #c0392b; border-color: #c0392b; } [data-theme="blood"] .btn-primary:hover { background: #ff4d3d; border-color: #ff4d3d; box-shadow: 0 0 24px rgba(192,57,43,0.30); } [data-theme="blood"] .quest-progress-fill { background: #c0392b; } [data-theme="blood"] .building-level-fill { background: #c0392b; } [data-theme="blood"] .worker-fill { background: #7b241c; } [data-theme="blood"] .gacha-pity-fill { background: linear-gradient(90deg, #7b241c, #c0392b); } /* ================================================================ 03. ARCANE — Deep Purple Mystic. Gacha-forward. Feels like pulling a divine hero. Unlock: first Ascension. ================================================================ */ [data-theme="arcane"] { /* Primary accent → vivid purple */ --clr-gold: #7c3aed; --clr-gold-hi: #a855f7; --clr-gold-lo: #4c1d95; --clr-gold-glow: rgba(124, 58, 237, 0.22); --clr-gold-glow2: rgba(124, 58, 237, 0.07); /* Danger → magenta-adjacent so it's still distinct */ --clr-crim: #be185d; --clr-crim-hi: #ec4899; --clr-crim-lo: #831843; --clr-crim-glow: rgba(190, 24, 93, 0.20); /* Arcane → cyan (secondary) */ --clr-arc: #0891b2; --clr-arc-hi: #22d3ee; --clr-arc-lo: #164e63; --clr-arc-glow: rgba(8, 145, 178, 0.20); /* Teal → stays similar, slight shift */ --clr-teal: #0e7490; --clr-teal-hi: #38bdf8; --clr-teal-lo: #0c4a6e; /* Amber stays */ --clr-amber: #d97706; --clr-amber-hi: #fbbf24; --clr-amber-lo: #78350f; /* Borders */ --border-gold: rgba(124, 58, 237, 0.40); --border-arc: rgba(8, 145, 178, 0.35); /* Shadows */ --shadow-gold: 0 0 24px rgba(124, 58, 237, 0.28); --shadow-arc: 0 0 20px rgba(8, 145, 178, 0.22); /* Surface — slightly blue-tinted darks */ --clr-surface: #09090f; --clr-surface-2: #0f0f1d; --clr-surface-3: #16162b; --clr-surface-4: #1e1e38; --hud-bar-a: var(--clr-gold-lo); --hud-bar-b: var(--clr-gold-hi); --tab-active-clr: var(--clr-gold-hi); --tab-active-glow: var(--clr-gold-glow); --load-bar-a: var(--clr-gold-lo); --load-bar-b: var(--clr-gold-hi); --prestige-val-clr: var(--clr-gold-hi); --auth-header-glow: rgba(124, 58, 237, 0.16); --gacha-title-clr: var(--clr-gold-hi); --gacha-title-glow: var(--clr-gold-glow); --theme-badge-bg: var(--clr-gold-glow); --theme-badge-clr: var(--clr-gold-hi); } [data-theme="arcane"] body { background-image: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(124,58,237,0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(8,145,178,0.04) 0%, transparent 50%); } [data-theme="arcane"] .loading-title { color: #a855f7; text-shadow: 0 0 40px rgba(124,58,237,0.5), 0 0 80px rgba(124,58,237,0.15); } [data-theme="arcane"] .loading-bar-fill { background: linear-gradient(90deg, #4c1d95, #a855f7); box-shadow: 0 0 8px rgba(124,58,237,0.4); } [data-theme="arcane"] .hud-logo-text { color: #a855f7; text-shadow: 0 0 16px rgba(124,58,237,0.5); } [data-theme="arcane"] .hud-zone-bar-fill { background: linear-gradient(90deg, #4c1d95, #a855f7); } [data-theme="arcane"] .tab-item.active { color: #a855f7; } [data-theme="arcane"] .tab-item.active::before { background: #a855f7; box-shadow: 0 2px 8px rgba(124,58,237,0.45); } [data-theme="arcane"] .auth-card { border-color: rgba(124,58,237,0.45); } [data-theme="arcane"] .btn-primary { background: #7c3aed; border-color: #7c3aed; } [data-theme="arcane"] .btn-primary:hover { background: #a855f7; border-color: #a855f7; box-shadow: 0 0 24px rgba(124,58,237,0.32); } [data-theme="arcane"] .toggle-switch input:checked + .toggle-slider { background: #7c3aed; border-color: #7c3aed; } [data-theme="arcane"] .toggle-switch input:checked + .toggle-slider::before { background: #a855f7; } [data-theme="arcane"] .quest-progress-fill { background: #7c3aed; } [data-theme="arcane"] .building-level-fill { background: #7c3aed; } [data-theme="arcane"] .gacha-pity-fill { background: linear-gradient(90deg, #4c1d95, #a855f7); } [data-theme="arcane"] .avatar-option.selected { border-color: #a855f7; box-shadow: 0 0 12px rgba(124,58,237,0.35); } [data-theme="arcane"] .field-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.18); } [data-theme="arcane"] .gacha-banner-wrap { border-color: rgba(124,58,237,0.50); } [data-theme="arcane"] .prestige-souls-val { color: #a855f7; text-shadow: 0 0 24px rgba(124,58,237,0.5); } /* ================================================================ 04. FOREST WARDEN — Deep Green Earthy, organic, quiet power. Ranger / nature faction aesthetic. Unlock: unlock the Nature faction heroes. ================================================================ */ [data-theme="nature"] { /* Primary accent → forest green */ --clr-gold: #16a34a; --clr-gold-hi: #4ade80; --clr-gold-lo: #14532d; --clr-gold-glow: rgba(22, 163, 74, 0.20); --clr-gold-glow2: rgba(22, 163, 74, 0.06); /* Danger stays crimson */ --clr-crim: #c0392b; --clr-crim-hi: #e74c3c; --clr-crim-lo: #7b241c; --clr-crim-glow: rgba(192, 57, 43, 0.18); /* Arcane → mossy amber-green */ --clr-arc: #65a30d; --clr-arc-hi: #a3e635; --clr-arc-lo: #365314; --clr-arc-glow: rgba(101, 163, 13, 0.20); /* Teal → deeper emerald */ --clr-teal: #059669; --clr-teal-hi: #34d399; --clr-teal-lo: #064e3b; /* Amber — earthy */ --clr-amber: #b45309; --clr-amber-hi: #d97706; --clr-amber-lo: #7c2d12; /* Borders */ --border-gold: rgba(22, 163, 74, 0.40); --border-arc: rgba(101, 163, 13, 0.35); /* Shadows */ --shadow-gold: 0 0 24px rgba(22, 163, 74, 0.25); --shadow-arc: 0 0 20px rgba(101, 163, 13, 0.20); /* Surface — ever so slightly warm green-tinted */ --clr-surface: #09110d; --clr-surface-2: #0f1a14; --clr-surface-3: #162118; --clr-surface-4: #1c2a1f; --hud-bar-a: var(--clr-gold-lo); --hud-bar-b: var(--clr-gold-hi); --tab-active-clr: var(--clr-gold-hi); --tab-active-glow: var(--clr-gold-glow); --load-bar-a: var(--clr-gold-lo); --load-bar-b: var(--clr-gold-hi); --prestige-val-clr: var(--clr-gold-hi); --auth-header-glow: rgba(22, 163, 74, 0.14); --gacha-title-clr: var(--clr-arc-hi); --gacha-title-glow: var(--clr-arc-glow); --theme-badge-bg: var(--clr-gold-glow); --theme-badge-clr: var(--clr-gold-hi); } [data-theme="nature"] body { background-image: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(22,163,74,0.05) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 0% 100%, rgba(5,150,105,0.04) 0%, transparent 50%); } [data-theme="nature"] .loading-title { color: #4ade80; text-shadow: 0 0 40px rgba(22,163,74,0.45), 0 0 80px rgba(22,163,74,0.12); } [data-theme="nature"] .loading-bar-fill { background: linear-gradient(90deg, #14532d, #4ade80); box-shadow: 0 0 8px rgba(22,163,74,0.35); } [data-theme="nature"] .hud-logo-text { color: #4ade80; text-shadow: 0 0 16px rgba(22,163,74,0.45); } [data-theme="nature"] .hud-zone-bar-fill { background: linear-gradient(90deg, #14532d, #4ade80); } [data-theme="nature"] .tab-item.active { color: #4ade80; } [data-theme="nature"] .tab-item.active::before { background: #4ade80; box-shadow: 0 2px 8px rgba(22,163,74,0.4); } [data-theme="nature"] .auth-card { border-color: rgba(22,163,74,0.40); } [data-theme="nature"] .btn-primary { background: #16a34a; border-color: #16a34a; color: #f0fdf4; } [data-theme="nature"] .btn-primary:hover { background: #4ade80; border-color: #4ade80; box-shadow: 0 0 24px rgba(22,163,74,0.30); } [data-theme="nature"] .toggle-switch input:checked + .toggle-slider { background: #16a34a; border-color: #16a34a; } [data-theme="nature"] .toggle-switch input:checked + .toggle-slider::before { background: #4ade80; } [data-theme="nature"] .quest-progress-fill { background: #16a34a; } [data-theme="nature"] .building-level-fill { background: #16a34a; } [data-theme="nature"] .worker-fill { background: #059669; } [data-theme="nature"] .gacha-pity-fill { background: linear-gradient(90deg, #14532d, #4ade80); } [data-theme="nature"] .avatar-option.selected { border-color: #4ade80; box-shadow: 0 0 12px rgba(22,163,74,0.30); } [data-theme="nature"] .field-input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); } [data-theme="nature"] .gacha-banner-title { color: #4ade80; text-shadow: 0 0 24px rgba(22,163,74,0.35); } [data-theme="nature"] .gacha-banner-wrap { border-color: rgba(22,163,74,0.45); } [data-theme="nature"] .gacha-pull-btn { background: #14532d; border-color: rgba(22,163,74,0.40); } [data-theme="nature"] .gacha-pull-btn:hover { background: #16a34a; } [data-theme="nature"] .gacha-pull-cost { color: #4ade80; } [data-theme="nature"] .prestige-panel { border-color: rgba(22,163,74,0.40); } [data-theme="nature"] .prestige-panel::before { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(22,163,74,0.06) 0%, transparent 70%); } [data-theme="nature"] .prestige-title { color: #4ade80; } [data-theme="nature"] .prestige-souls-val { color: #4ade80; text-shadow: 0 0 24px rgba(22,163,74,0.4); } [data-theme="nature"] .prestige-souls-lbl { color: #14532d; } /* ================================================================ 05. ICE SOVEREIGN — Glacier Blue Cold, royal, clinical. Perfect for the calculated PvP player. Unlock: reach PvP Platinum rank. ================================================================ */ [data-theme="ice"] { /* Primary accent → ice blue */ --clr-gold: #0284c7; --clr-gold-hi: #38bdf8; --clr-gold-lo: #0c4a6e; --clr-gold-glow: rgba(2, 132, 199, 0.20); --clr-gold-glow2: rgba(2, 132, 199, 0.06); /* Danger — slightly warmer so it reads against blue */ --clr-crim: #b91c1c; --clr-crim-hi: #f87171; --clr-crim-lo: #7f1d1d; --clr-crim-glow: rgba(185, 28, 28, 0.20); /* Arcane → cyan / teal secondary */ --clr-arc: #0e7490; --clr-arc-hi: #67e8f9; --clr-arc-lo: #164e63; --clr-arc-glow: rgba(14, 116, 144, 0.22); /* Teal → white-blue ice */ --clr-teal: #0891b2; --clr-teal-hi: #e0f2fe; --clr-teal-lo: #075985; /* Amber — cold amber is gone, use silver */ --clr-amber: #475569; --clr-amber-hi: #94a3b8; --clr-amber-lo: #1e293b; /* Borders */ --border-gold: rgba(2, 132, 199, 0.40); --border-arc: rgba(14, 116, 144, 0.35); /* Shadows */ --shadow-gold: 0 0 24px rgba(2, 132, 199, 0.26); --shadow-arc: 0 0 20px rgba(14, 116, 144, 0.22); /* Surface — icy dark slate */ --clr-surface: #07101a; --clr-surface-2: #0c1928; --clr-surface-3: #122134; --clr-surface-4: #1a2e44; --hud-bar-a: var(--clr-gold-lo); --hud-bar-b: var(--clr-gold-hi); --tab-active-clr: var(--clr-gold-hi); --tab-active-glow: var(--clr-gold-glow); --load-bar-a: var(--clr-gold-lo); --load-bar-b: var(--clr-gold-hi); --prestige-val-clr: var(--clr-gold-hi); --auth-header-glow: rgba(2, 132, 199, 0.14); --gacha-title-clr: var(--clr-arc-hi); --gacha-title-glow: var(--clr-arc-glow); --theme-badge-bg: var(--clr-gold-glow); --theme-badge-clr: var(--clr-gold-hi); } [data-theme="ice"] body { background-image: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(2,132,199,0.05) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(14,116,144,0.04) 0%, transparent 50%); } [data-theme="ice"] .loading-title { color: #38bdf8; text-shadow: 0 0 40px rgba(2,132,199,0.50), 0 0 80px rgba(2,132,199,0.14); } [data-theme="ice"] .loading-bar-fill { background: linear-gradient(90deg, #0c4a6e, #38bdf8); box-shadow: 0 0 8px rgba(2,132,199,0.40); } [data-theme="ice"] .hud-logo-text { color: #38bdf8; text-shadow: 0 0 16px rgba(2,132,199,0.50); } [data-theme="ice"] .hud-zone-bar-fill { background: linear-gradient(90deg, #0c4a6e, #38bdf8); } [data-theme="ice"] .tab-item.active { color: #38bdf8; } [data-theme="ice"] .tab-item.active::before { background: #38bdf8; box-shadow: 0 2px 8px rgba(2,132,199,0.45); } [data-theme="ice"] .auth-card { border-color: rgba(2,132,199,0.42); } [data-theme="ice"] .btn-primary { background: #0284c7; border-color: #0284c7; color: #f0f9ff; } [data-theme="ice"] .btn-primary:hover { background: #38bdf8; border-color: #38bdf8; box-shadow: 0 0 24px rgba(2,132,199,0.32); } [data-theme="ice"] .toggle-switch input:checked + .toggle-slider { background: #0284c7; border-color: #0284c7; } [data-theme="ice"] .toggle-switch input:checked + .toggle-slider::before { background: #38bdf8; } [data-theme="ice"] .quest-progress-fill { background: #0284c7; } [data-theme="ice"] .building-level-fill { background: #0284c7; } [data-theme="ice"] .worker-fill { background: #0891b2; } [data-theme="ice"] .gacha-pity-fill { background: linear-gradient(90deg, #0c4a6e, #38bdf8); } [data-theme="ice"] .avatar-option.selected { border-color: #38bdf8; box-shadow: 0 0 12px rgba(2,132,199,0.32); } [data-theme="ice"] .field-input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,0.18); } [data-theme="ice"] .gacha-banner-title { color: #38bdf8; text-shadow: 0 0 24px rgba(2,132,199,0.38); } [data-theme="ice"] .gacha-banner-wrap { border-color: rgba(2,132,199,0.45); } [data-theme="ice"] .gacha-pull-btn { background: #0c4a6e; border-color: rgba(2,132,199,0.42); } [data-theme="ice"] .gacha-pull-btn:hover { background: #0284c7; } [data-theme="ice"] .gacha-pull-cost { color: #38bdf8; } [data-theme="ice"] .guild-banner { border-color: rgba(2,132,199,0.40); } [data-theme="ice"] .guild-name { color: #38bdf8; } [data-theme="ice"] .prestige-panel { border-color: rgba(2,132,199,0.40); } [data-theme="ice"] .prestige-title { color: #38bdf8; } [data-theme="ice"] .prestige-souls-val { color: #38bdf8; text-shadow: 0 0 24px rgba(2,132,199,0.45); } /* Ice crystalline shimmer on combat arena */ [data-theme="ice"] .combat-arena::before { background: radial-gradient(ellipse 60% 80% at 50% 20%, rgba(2,132,199,0.07) 0%, transparent 70%); } /* ================================================================ 06. VOID WALKER — Indigo Abyss The rarest theme. Transcendence achieved. The line between reality and void blurs. Pure deep indigo, ethereal highlights. Unlock: 10 Ascensions (Outsider tier reached). ================================================================ */ [data-theme="void"] { /* Primary accent → deep indigo shifting to ethereal lavender */ --clr-gold: #4338ca; --clr-gold-hi: #818cf8; --clr-gold-lo: #1e1b4b; --clr-gold-glow: rgba(67, 56, 202, 0.24); --clr-gold-glow2: rgba(67, 56, 202, 0.07); /* Danger → violet-pink so it reads against indigo */ --clr-crim: #7e22ce; --clr-crim-hi: #c084fc; --clr-crim-lo: #4a044e; --clr-crim-glow: rgba(126, 34, 206, 0.22); /* Arcane → bright white-blue ethereal */ --clr-arc: #6366f1; --clr-arc-hi: #c7d2fe; --clr-arc-lo: #312e81; --clr-arc-glow: rgba(99, 102, 241, 0.24); /* Teal → astral purple */ --clr-teal: #7c3aed; --clr-teal-hi: #e9d5ff; --clr-teal-lo: #4c1d95; /* Amber → void silver */ --clr-amber: #475569; --clr-amber-hi: #cbd5e1; --clr-amber-lo: #1e293b; /* Borders */ --border-gold: rgba(67, 56, 202, 0.45); --border-arc: rgba(99, 102, 241, 0.35); /* Shadows — heavy, deep */ --shadow-gold: 0 0 32px rgba(67, 56, 202, 0.30); --shadow-arc: 0 0 24px rgba(99, 102, 241, 0.24); /* Surface — near-black with the slightest indigo wash */ --clr-surface: #08080f; --clr-surface-2: #0e0e1c; --clr-surface-3: #141427; --clr-surface-4: #1c1c32; --hud-bar-a: var(--clr-gold-lo); --hud-bar-b: var(--clr-gold-hi); --tab-active-clr: var(--clr-gold-hi); --tab-active-glow: var(--clr-gold-glow); --load-bar-a: var(--clr-gold-lo); --load-bar-b: var(--clr-gold-hi); --prestige-val-clr: var(--clr-gold-hi); --auth-header-glow: rgba(67, 56, 202, 0.16); --gacha-title-clr: var(--clr-arc-hi); --gacha-title-glow: var(--clr-arc-glow); --theme-badge-bg: var(--clr-gold-glow); --theme-badge-clr: var(--clr-gold-hi); } [data-theme="void"] body { background-image: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(67,56,202,0.07) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(99,102,241,0.05) 0%, transparent 50%), radial-gradient(ellipse 40% 30% at 0% 100%, rgba(126,34,206,0.04) 0%, transparent 50%); } [data-theme="void"] .loading-logo-rune svg { filter: drop-shadow(0 0 16px rgba(67,56,202,0.6)); } [data-theme="void"] .loading-title { color: #818cf8; text-shadow: 0 0 40px rgba(67,56,202,0.60), 0 0 80px rgba(67,56,202,0.25), 0 0 120px rgba(67,56,202,0.10); animation: void-title-breathe 3s ease-in-out infinite; } [data-theme="void"] .loading-bar-fill { background: linear-gradient(90deg, #1e1b4b, #818cf8); box-shadow: 0 0 12px rgba(67,56,202,0.50); } [data-theme="void"] .hud-logo-text { color: #818cf8; text-shadow: 0 0 16px rgba(67,56,202,0.55); animation: void-title-breathe 3s ease-in-out infinite; } [data-theme="void"] .hud-zone-bar-fill { background: linear-gradient(90deg, #1e1b4b, #818cf8); } [data-theme="void"] .tab-item.active { color: #818cf8; } [data-theme="void"] .tab-item.active::before { background: #818cf8; box-shadow: 0 2px 10px rgba(67,56,202,0.50); } [data-theme="void"] .auth-card { border-color: rgba(67,56,202,0.48); box-shadow: 0 8px 32px rgba(0,0,0,0.70), 0 0 40px rgba(67,56,202,0.20); } [data-theme="void"] .btn-primary { background: #4338ca; border-color: #4338ca; color: #e0e7ff; } [data-theme="void"] .btn-primary:hover { background: #818cf8; border-color: #818cf8; color: #1e1b4b; box-shadow: 0 0 28px rgba(67,56,202,0.38); } [data-theme="void"] .toggle-switch input:checked + .toggle-slider { background: #4338ca; border-color: #4338ca; } [data-theme="void"] .toggle-switch input:checked + .toggle-slider::before { background: #818cf8; } [data-theme="void"] .quest-progress-fill { background: #4338ca; } [data-theme="void"] .building-level-fill { background: #4338ca; } [data-theme="void"] .worker-fill { background: #312e81; } [data-theme="void"] .gacha-pity-fill { background: linear-gradient(90deg, #1e1b4b, #818cf8); } [data-theme="void"] .avatar-option.selected { border-color: #818cf8; box-shadow: 0 0 16px rgba(67,56,202,0.40); } [data-theme="void"] .field-input:focus { border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.22); } /* Void — all golden text becomes indigo */ [data-theme="void"] .guild-name { color: #818cf8; } [data-theme="void"] .guild-banner { border-color: rgba(67,56,202,0.45); } [data-theme="void"] .guild-banner::before { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(67,56,202,0.07) 0%, transparent 70%); } [data-theme="void"] .gacha-banner-title { color: #818cf8; text-shadow: 0 0 24px rgba(67,56,202,0.45); } [data-theme="void"] .gacha-banner-wrap { border-color: rgba(67,56,202,0.50); } [data-theme="void"] .gacha-pull-btn { background: #1e1b4b; border-color: rgba(67,56,202,0.45); } [data-theme="void"] .gacha-pull-btn:hover { background: #4338ca; } [data-theme="void"] .gacha-pull-cost { color: #818cf8; } [data-theme="void"] .prestige-panel { border-color: rgba(67,56,202,0.45); box-shadow: 0 0 40px rgba(67,56,202,0.14); } [data-theme="void"] .prestige-panel::before { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(67,56,202,0.08) 0%, transparent 70%); } [data-theme="void"] .prestige-title { color: #818cf8; text-shadow: 0 0 20px rgba(67,56,202,0.40); } [data-theme="void"] .prestige-souls-val { color: #818cf8; text-shadow: 0 0 28px rgba(67,56,202,0.55); animation: void-title-breathe 3s ease-in-out infinite; } [data-theme="void"] .prestige-souls-lbl { color: #312e81; } [data-theme="void"] .ancient-card { border-color: rgba(67,56,202,0.40); } [data-theme="void"] .ancient-name { color: #818cf8; } /* Void — enemy HP bar gets void tint */ [data-theme="void"] .enemy-hp-bar-fill { background: linear-gradient(90deg, #1e1b4b, #4338ca); } /* Void — loading screen deeper purple */ [data-theme="void"] #loading-screen { background: #08080f; } /* Void — hero rarity stripe — legendary becomes void indigo */ [data-theme="void"] .hero-rarity-stripe--legendary { background: linear-gradient(90deg, #1e1b4b, #818cf8, #1e1b4b); } /* Void — combat arena ambient */ [data-theme="void"] .combat-arena::before { background: radial-gradient(ellipse 60% 80% at 50% 20%, rgba(67,56,202,0.09) 0%, transparent 70%); } /* Void — damage numbers crit color */ [data-theme="void"] .damage-float--crit { color: #818cf8; text-shadow: 0 0 12px rgba(67,56,202,0.55); } /* Void — prestige flash color */ [data-theme="void"] #prestige-flash { background: radial-gradient(ellipse at center, rgba(67,56,202,0.9) 0%, rgba(8,8,15,0) 70%); } /* Void — level up text */ [data-theme="void"] .levelup-text { color: #818cf8; text-shadow: 0 0 40px rgba(67,56,202,0.80), 0 0 80px rgba(67,56,202,0.50), 0 0 120px rgba(67,56,202,0.25); } /* ================================================================ 07. THEME TRANSITION ANIMATION Smooth crossfade when switching themes via settings. Applied by JS temporarily when data-theme changes. ================================================================ */ html.theme-transitioning, html.theme-transitioning * { transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================================ 08. PER-THEME COMPLEX COMPONENT OVERRIDES Components that can't be handled by variable overrides alone. ================================================================ */ /* ── Void Walker breathing animation (unique to void theme) ── */ @keyframes void-title-breathe { 0%, 100% { opacity: 1; text-shadow: 0 0 24px rgba(67,56,202,0.55), 0 0 48px rgba(67,56,202,0.25), 0 0 72px rgba(67,56,202,0.10); } 50% { opacity: 0.88; text-shadow: 0 0 36px rgba(67,56,202,0.70), 0 0 72px rgba(67,56,202,0.40), 0 0 108px rgba(67,56,202,0.18); } } /* ── Blood Knight: theme swatch in settings ── */ [data-theme="blood"] .theme-option--selected { border-color: #ff4d3d; box-shadow: 0 0 20px rgba(192,57,43,0.28); } [data-theme="arcane"] .theme-option--selected { border-color: #a855f7; box-shadow: 0 0 20px rgba(124,58,237,0.28); } [data-theme="nature"] .theme-option--selected { border-color: #4ade80; box-shadow: 0 0 20px rgba(22,163,74,0.28); } [data-theme="ice"] .theme-option--selected { border-color: #38bdf8; box-shadow: 0 0 20px rgba(2,132,199,0.28); } [data-theme="void"] .theme-option--selected { border-color: #818cf8; box-shadow: 0 0 20px rgba(67,56,202,0.32); } /* ── Non-default themes: gold text in HUD resource amounts ── */ [data-theme="blood"] .hud-res--gold .hud-res-amount { color: #ff4d3d; } [data-theme="arcane"] .hud-res--gold .hud-res-amount { color: #a855f7; } [data-theme="nature"] .hud-res--gold .hud-res-amount { color: #4ade80; } [data-theme="ice"] .hud-res--gold .hud-res-amount { color: #38bdf8; } [data-theme="void"] .hud-res--gold .hud-res-amount { color: #818cf8; } /* ── Non-default themes: toggle gold becomes theme accent ── */ [data-theme="blood"] .toggle-switch input:checked + .toggle-slider { background: #c0392b; border-color: #c0392b; } [data-theme="blood"] .toggle-switch input:checked + .toggle-slider::before { background: #ff4d3d; } /* ── Void: faction pill active border uses void purple ── */ [data-theme="void"] .faction-pill.active[data-faction]:not([data-faction="all"]) { color: #818cf8; border-color: #818cf8; } /* ── Ice: faction pill active border uses ice blue ── */ [data-theme="ice"] .faction-pill.active[data-faction]:not([data-faction="all"]) { color: #38bdf8; border-color: #38bdf8; } /* ── All non-default themes: prestige flash ── */ [data-theme="arcane"] #prestige-flash { background: radial-gradient(ellipse at center, rgba(124,58,237,0.88) 0%, rgba(9,9,15,0) 70%); } [data-theme="nature"] #prestige-flash { background: radial-gradient(ellipse at center, rgba(22,163,74,0.88) 0%, rgba(9,17,13,0) 70%); } [data-theme="ice"] #prestige-flash { background: radial-gradient(ellipse at center, rgba(2,132,199,0.88) 0%, rgba(7,16,26,0) 70%); } [data-theme="blood"] #prestige-flash { background: radial-gradient(ellipse at center, rgba(192,57,43,0.88) 0%, rgba(22,10,10,0) 70%); } /* ── All non-default themes: level up text ── */ [data-theme="blood"] .levelup-text { color: #ff4d3d; text-shadow: 0 0 40px rgba(192,57,43,0.75), 0 0 80px rgba(192,57,43,0.45), 0 0 120px rgba(192,57,43,0.20); } [data-theme="arcane"] .levelup-text { color: #a855f7; text-shadow: 0 0 40px rgba(124,58,237,0.75), 0 0 80px rgba(124,58,237,0.45), 0 0 120px rgba(124,58,237,0.20); } [data-theme="nature"] .levelup-text { color: #4ade80; text-shadow: 0 0 40px rgba(22,163,74,0.70), 0 0 80px rgba(22,163,74,0.40), 0 0 120px rgba(22,163,74,0.18); } [data-theme="ice"] .levelup-text { color: #38bdf8; text-shadow: 0 0 40px rgba(2,132,199,0.72), 0 0 80px rgba(2,132,199,0.42), 0 0 120px rgba(2,132,199,0.18); } /* ── All non-default themes: achievement popup border ── */ [data-theme="blood"] #achievement-popup { border-color: rgba(192,57,43,0.45); box-shadow: 0 0 24px rgba(192,57,43,0.25); } [data-theme="arcane"] #achievement-popup { border-color: rgba(124,58,237,0.45); box-shadow: 0 0 24px rgba(124,58,237,0.25); } [data-theme="nature"] #achievement-popup { border-color: rgba(22,163,74,0.45); box-shadow: 0 0 24px rgba(22,163,74,0.22); } [data-theme="ice"] #achievement-popup { border-color: rgba(2,132,199,0.45); box-shadow: 0 0 24px rgba(2,132,199,0.24); } [data-theme="void"] #achievement-popup { border-color: rgba(67,56,202,0.50); box-shadow: 0 0 28px rgba(67,56,202,0.28); } [data-theme="blood"] .achievement-icon { background: rgba(192,57,43,0.18); border-color: rgba(192,57,43,0.40); } [data-theme="arcane"] .achievement-icon { background: rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.40); } [data-theme="nature"] .achievement-icon { background: rgba(22,163,74,0.16); border-color: rgba(22,163,74,0.38); } [data-theme="ice"] .achievement-icon { background: rgba(2,132,199,0.16); border-color: rgba(2,132,199,0.38); } [data-theme="void"] .achievement-icon { background: rgba(67,56,202,0.18); border-color: rgba(67,56,202,0.42); } /* ── Void: boss alert colors ── */ [data-theme="void"] #boss-alert { border-color: #4338ca; color: #818cf8; box-shadow: 0 0 24px rgba(67,56,202,0.30); } /* ── Nature / Ice: enemy type badge adjustments ── */ [data-theme="nature"] .enemy-type-badge.boss { border-color: #16a34a; color: #4ade80; background: rgba(22,163,74,0.18); } [data-theme="ice"] .enemy-type-badge.boss { border-color: #0284c7; color: #38bdf8; background: rgba(2,132,199,0.18); } [data-theme="void"] .enemy-type-badge.boss { border-color: #4338ca; color: #818cf8; background: rgba(67,56,202,0.18); } /* ── Quest progress fill for non-default themes ── */ [data-theme="blood"] .quest-reward-pill { background: rgba(192,57,43,0.18); color: #ff4d3d; border-color: rgba(192,57,43,0.40); } [data-theme="arcane"] .quest-reward-pill { background: rgba(124,58,237,0.18); color: #a855f7; border-color: rgba(124,58,237,0.40); } [data-theme="nature"] .quest-reward-pill { background: rgba(22,163,74,0.16); color: #4ade80; border-color: rgba(22,163,74,0.38); } [data-theme="ice"] .quest-reward-pill { background: rgba(2,132,199,0.16); color: #38bdf8; border-color: rgba(2,132,199,0.38); } [data-theme="void"] .quest-reward-pill { background: rgba(67,56,202,0.18); color: #818cf8; border-color: rgba(67,56,202,0.40); }