/** * Cyberpunk world theme — neon-pink / cyan / black palette overriding tokens. * Activated by setting data-world="cyberpunk" on . */ html[data-world="cyberpunk"] { /* Background — deep magenta-black, wet alley */ --c-bg: #0a0414; --c-bg-alt: #150825; --c-bg-warm: #1f0a30; --c-surface: #1a1030; --c-surface-light: #281640; --c-border: #3a1f56; --c-border-glow: rgba(255, 62, 255, 0.3); --c-text: #e6dcff; --c-text-dim: #8a78a8; --c-text-bright: #ffffff; /* Accent — hot magenta */ --c-accent: #ff3eff; --c-accent-dim: rgba(255, 62, 255, 0.18); --c-accent-glow: rgba(255, 62, 255, 0.5); /* Creds — neon yellow */ --c-gold: #fbbf24; --c-gold-dim: rgba(251, 191, 36, 0.15); --c-gold-glow: rgba(251, 191, 36, 0.45); --c-heal: #39ff9a; --c-heal-dim: rgba(57, 255, 154, 0.15); --c-danger: #ff3060; --c-danger-dim: rgba(255, 48, 96, 0.15); --c-danger-glow: rgba(255, 48, 96, 0.45); --c-mana: #39d9ff; --c-mana-dim: rgba(57, 217, 255, 0.15); /* Concrete + neon trim walls */ --c-wall: #1a0e2a; --c-wall-light: #2a1840; --c-wall-dark: #0e0618; --c-wall-edge: #4a2868; --c-floor: #0c0618; --c-floor-alt: #110820; --c-floor-edge: rgba(255, 62, 255, 0.04); --c-trail: rgba(255, 62, 255, 0.22); /* Wall texture — concrete with neon trim slits */ --wall-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%231a0e2a'/%3E%3Crect x='0' y='0' width='40' height='1' fill='%23ff3eff' opacity='0.35'/%3E%3Crect x='0' y='39' width='40' height='1' fill='%2339d9ff' opacity='0.35'/%3E%3Crect x='4' y='6' width='12' height='2' fill='%23ff3eff' opacity='0.18'/%3E%3Crect x='24' y='22' width='12' height='2' fill='%2339d9ff' opacity='0.18'/%3E%3Crect x='4' y='30' width='8' height='1' fill='%23ff3eff' opacity='0.15'/%3E%3C/svg%3E"); /* Floor — wet asphalt with neon reflections */ --floor-texture: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' fill='%230c0618'/%3E%3Crect x='0' y='0' width='40' height='40' fill='%23110820' opacity='0.5'/%3E%3Ccircle cx='8' cy='10' r='0.6' fill='%23ff3eff' opacity='0.35'/%3E%3Ccircle cx='24' cy='6' r='0.5' fill='%2339d9ff' opacity='0.3'/%3E%3Ccircle cx='14' cy='28' r='0.7' fill='%23fbbf24' opacity='0.28'/%3E%3Ccircle cx='32' cy='32' r='0.5' fill='%23ff3eff' opacity='0.3'/%3E%3Ccircle cx='4' cy='34' r='0.4' fill='%2339d9ff' opacity='0.25'/%3E%3C/svg%3E"); /* Background — magenta neon haze */ --bg-abyss: radial-gradient(ellipse at 30% 40%, rgba(255, 62, 255, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(57, 217, 255, 0.10) 0%, transparent 45%), radial-gradient(ellipse at 50% 90%, rgba(251, 191, 36, 0.05) 0%, transparent 40%), radial-gradient(ellipse at 10% 80%, rgba(200, 50, 200, 0.06) 0%, transparent 35%), radial-gradient(ellipse at 90% 20%, rgba(40, 200, 255, 0.05) 0%, transparent 35%); --fog-color: rgba(10, 4, 20, 0.94); }