/** * Cyberpunk world theme — hot pink / teal / sodium-orange over wet black. * Blade Runner, not an arcade cabinet: the old acid magenta #ff3eff is gone. * Activated by setting data-world="cyberpunk" on . */ html[data-world="cyberpunk"], [data-world-scope="cyberpunk"] { /* Background — deep violet-black, wet alley */ --c-bg: #0c0716; --c-bg-alt: #140b24; --c-bg-warm: #1c0f2e; --c-surface: #180f2c; --c-surface-light: #24153e; --c-border: #362052; --c-border-glow: rgba(255, 46, 136, 0.28); --c-text: #e6dcff; --c-text-dim: #8a78a8; --c-text-bright: #ffffff; /* Accent — hot pink; secondary — teal */ --c-accent: #ff2e88; --c-accent-dim: rgba(255, 46, 136, 0.16); --c-accent-glow: rgba(255, 46, 136, 0.45); --c-accent-2: #00e5c7; /* Creds — signage yellow */ --c-gold: #ffd24f; --c-gold-dim: rgba(255, 210, 79, 0.15); --c-gold-glow: rgba(255, 210, 79, 0.4); --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); --grad-hp: linear-gradient(90deg, #b3244a 0%, #ff3060 100%); --grad-mp: linear-gradient(90deg, #1f7fa8 0%, #39d9ff 100%); --grad-dp: linear-gradient(90deg, #b32064 0%, #ff2e88 100%); --c-dp-glow: rgba(255, 46, 136, 0.45); /* Torch — neon sign spill, cold pink */ --c-torch: 255, 110, 175; /* Display face — angular tech display */ --font-display: 'Chakra Petch', 'Inter', sans-serif; /* Concrete + neon trim walls */ --c-wall: #180d26; --c-wall-light: #26163c; --c-wall-dark: #0d0616; --c-wall-edge: #452a62; --c-floor: #0c0618; --c-floor-alt: #110820; --c-floor-edge: rgba(255, 46, 136, 0.04); --c-trail: rgba(0, 229, 199, 0.20); /* Wall texture — concrete with neon trim slits (pink top, teal base, sodium-orange service strip) */ --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='%23180d26'/%3E%3Crect x='0' y='0' width='40' height='1' fill='%23ff2e88' opacity='0.35'/%3E%3Crect x='0' y='39' width='40' height='1' fill='%2300e5c7' opacity='0.35'/%3E%3Crect x='4' y='6' width='12' height='2' fill='%23ff2e88' opacity='0.18'/%3E%3Crect x='24' y='22' width='12' height='2' fill='%2300e5c7' opacity='0.18'/%3E%3Crect x='4' y='30' width='8' height='1' fill='%23e8873a' opacity='0.22'/%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='%23ff2e88' opacity='0.35'/%3E%3Ccircle cx='24' cy='6' r='0.5' fill='%2300e5c7' opacity='0.3'/%3E%3Ccircle cx='14' cy='28' r='0.7' fill='%23e8873a' opacity='0.3'/%3E%3Ccircle cx='32' cy='32' r='0.5' fill='%23ff2e88' opacity='0.3'/%3E%3Ccircle cx='4' cy='34' r='0.4' fill='%2300e5c7' opacity='0.25'/%3E%3C/svg%3E"); /* Background — pink/teal haze with a sodium streetlight low in the frame */ --bg-abyss: radial-gradient(ellipse at 30% 40%, rgba(255, 46, 136, 0.11) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(0, 229, 199, 0.09) 0%, transparent 45%), radial-gradient(ellipse at 50% 90%, rgba(232, 135, 58, 0.07) 0%, transparent 40%), radial-gradient(ellipse at 10% 80%, rgba(200, 40, 120, 0.06) 0%, transparent 35%), radial-gradient(ellipse at 90% 20%, rgba(0, 200, 220, 0.05) 0%, transparent 35%); --fog-color: rgba(10, 4, 20, 0.94); }