/* vibe.css — Songly's rotating visual vibes (color palettes). * * Named "vibe" and not "theme" on purpose: "theme" in Songly already means * a themed SONG pack (songs-themes.js / the lobby's theme picker). A vibe * is purely cosmetic — the colors the whole app wears today. * * Every page (lobby + player screens) shares the same :root palette, so a * vibe is just a different set of values for those variables, selected by * a data-vibe attribute on . vibe.js picks the vibe: a new one * every day (deterministic from the date, so the host TV and every phone * agree without any syncing), or a manual pick stored in localStorage. * * Semantics kept stable across vibes so the game stays readable: * --lime → "correct / go" accent, always green-ish * --red → "wrong" accent, always red-ish * --gold → scores / 1st place, always warm yellow-ish * --cream → main text, always light * Everything else (backgrounds, glows, pink/cyan accents) is fair game. * * --glow-1/2/3 feed the big radial background gradients. */ /* 🪩 Neon Party — the original Songly look (default, also data-vibe="neon") */ :root { --bg-deep: #0a0420; --bg-mid: #1a0840; --hot-pink: #ff2d8e; --electric: #00f0ff; --gold: #ffd60a; --lime: #c5ff3d; --orange: #ff6b1a; --purple: #a855f7; --red: #ef4444; --cream: #fff4e0; --glow-1: rgba(255, 45, 142, 0.25); --glow-2: rgba(0, 240, 255, 0.2); --glow-3: rgba(255, 214, 10, 0.08); } /* 🇮🇸 Iceland — northern lights over black sand */ [data-vibe="iceland"] { --bg-deep: #02131f; --bg-mid: #063049; --hot-pink: #3dffb5; --electric: #7fd7ff; --gold: #ffe066; --lime: #a5ff5e; --orange: #ff9e6b; --purple: #7f9dff; --red: #ff5c5c; --cream: #eef8ff; --glow-1: rgba(61, 255, 181, 0.18); --glow-2: rgba(127, 215, 255, 0.16); --glow-3: rgba(127, 157, 255, 0.10); } /* 🕺 Disco Fever — purple velvet and mirror-ball gold */ [data-vibe="disco"] { --bg-deep: #14051f; --bg-mid: #2a0a3f; --hot-pink: #ff3df0; --electric: #b388ff; --gold: #f8c537; --lime: #b8ff4d; --orange: #ff8a3d; --purple: #c77dff; --red: #ff4d6d; --cream: #fdf0ff; --glow-1: rgba(255, 61, 240, 0.22); --glow-2: rgba(179, 136, 255, 0.18); --glow-3: rgba(248, 197, 55, 0.10); } /* 🌴 Sunset Beach — last song before the bonfire */ [data-vibe="sunset"] { --bg-deep: #1f0a14; --bg-mid: #3d1024; --hot-pink: #ff5e78; --electric: #ffb35e; --gold: #ffd166; --lime: #b5ff66; --orange: #ff7b3d; --purple: #ff8fab; --red: #f03e3e; --cream: #fff1e0; --glow-1: rgba(255, 94, 120, 0.24); --glow-2: rgba(255, 179, 94, 0.18); --glow-3: rgba(255, 123, 61, 0.10); } /* 👾 Retro Arcade — CRT phosphor and high scores */ [data-vibe="arcade"] { --bg-deep: #030503; --bg-mid: #0b140b; --hot-pink: #ff00aa; --electric: #00ff66; --gold: #ffee00; --lime: #66ff00; --orange: #ff9100; --purple: #bb66ff; --red: #ff3333; --cream: #e8ffe8; --glow-1: rgba(0, 255, 102, 0.14); --glow-2: rgba(255, 0, 170, 0.14); --glow-3: rgba(255, 238, 0, 0.07); } /* 🍬 Bubblegum Pop — sugar rush */ [data-vibe="bubblegum"] { --bg-deep: #2b0a26; --bg-mid: #4d1040; --hot-pink: #ff7ad9; --electric: #7afcff; --gold: #ffc94d; --lime: #b0ff7a; --orange: #ffa07a; --purple: #d29bff; --red: #ff5e7e; --cream: #fff0fa; --glow-1: rgba(255, 122, 217, 0.24); --glow-2: rgba(122, 252, 255, 0.16); --glow-3: rgba(210, 155, 255, 0.10); } /* 🎷 Midnight Jazz — smoky club, brass section */ [data-vibe="midnight"] { --bg-deep: #050a1f; --bg-mid: #0a1433; --hot-pink: #e0a458; --electric: #6fb7ff; --gold: #f2c14e; --lime: #9fdc6e; --orange: #e8833a; --purple: #8090ff; --red: #e05263; --cream: #f5ecd7; --glow-1: rgba(224, 164, 88, 0.16); --glow-2: rgba(111, 183, 255, 0.14); --glow-3: rgba(128, 144, 255, 0.08); } /* 🚀 Outer Space — void with nebulas */ [data-vibe="space"] { --bg-deep: #030308; --bg-mid: #0d0d26; --hot-pink: #c46bff; --electric: #55e8ff; --gold: #ffd76b; --lime: #7dff9e; --orange: #ff8c5e; --purple: #9b7bff; --red: #ff4d5e; --cream: #eef0ff; --glow-1: rgba(196, 107, 255, 0.20); --glow-2: rgba(85, 232, 255, 0.16); --glow-3: rgba(125, 255, 158, 0.07); }