/* WhosIn backgrounds. The names must match BACKGROUNDS in functions/_lib.js */
.bg-aurora { background: radial-gradient(1200px 600px at 10% 0%, #7c3aed 0%, transparent 60%), radial-gradient(900px 600px at 100% 20%, #06b6d4 0%, transparent 55%), radial-gradient(800px 700px at 50% 110%, #22c55e 0%, transparent 55%), #0b0a1a; }
.bg-sunset { background: linear-gradient(160deg, #ff7e5f 0%, #feb47b 40%, #ff5f9e 75%, #7b2ff7 100%); }
.bg-ocean { background: linear-gradient(170deg, #0ea5e9 0%, #2563eb 45%, #1e1b4b 100%); }
.bg-grape { background: linear-gradient(160deg, #a855f7 0%, #6d28d9 50%, #2e1065 100%); }
.bg-mint { background: linear-gradient(160deg, #6ee7b7 0%, #10b981 45%, #065f46 100%); }
.bg-peach { background: linear-gradient(160deg, #fecaca 0%, #fdba74 50%, #fb7185 100%); }
.bg-midnight { background: radial-gradient(800px 500px at 80% 0%, #1e3a8a 0%, transparent 60%), linear-gradient(180deg, #0f172a, #020617); }
.bg-forest { background: linear-gradient(170deg, #84cc16 0%, #15803d 45%, #052e16 100%); }
.bg-candy { background: linear-gradient(135deg, #f9a8d4 0%, #c4b5fd 50%, #93c5fd 100%); }
.bg-lava { background: radial-gradient(700px 500px at 20% 100%, #f97316 0%, transparent 60%), radial-gradient(700px 500px at 90% 10%, #dc2626 0%, transparent 60%), #1c0a05; }
.bg-sky { background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 55%, #f0f9ff 100%); }
.bg-mono { background: linear-gradient(160deg, #3f3f46, #18181b); }
.bg-dots { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.22) 1.5px, transparent 0) 0 0 / 22px 22px, linear-gradient(160deg, #4f46e5, #7c3aed); }
.bg-grid { background: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(160deg, #0891b2, #1e40af); }
.bg-stars { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(2px 2px at 40% 80%, #fde68a, transparent), radial-gradient(1px 1px at 85% 65%, #fff, transparent), radial-gradient(1.5px 1.5px at 10% 70%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #c4b5fd, transparent) 0 0 / 260px 260px, radial-gradient(900px 600px at 50% 0%, #312e81, #0b0820); }
.bg-snow { background: radial-gradient(3px 3px at 15% 20%, #fff, transparent), radial-gradient(2px 2px at 60% 35%, #fff, transparent), radial-gradient(3px 3px at 80% 75%, #fff, transparent), radial-gradient(2px 2px at 35% 60%, #fff, transparent), radial-gradient(2.5px 2.5px at 90% 15%, #fff, transparent) 0 0 / 180px 180px, linear-gradient(180deg, #1e3a5f 0%, #b91c1c 140%); }
.bg-hearts { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18) 0 6px, transparent 7px) 0 0 / 40px 40px, linear-gradient(160deg, #fb7185, #db2777 55%, #831843); }
.bg-waves { background: repeating-radial-gradient(circle at 0 100%, rgba(255,255,255,.08) 0 18px, transparent 18px 36px), linear-gradient(160deg, #14b8a6, #0e7490 55%, #164e63); }
/* backgrounds that are light need dark text on cards over them */
.light-bg { --on-bg: #0f172a; }
.bg-neon { background: radial-gradient(600px 400px at 15% 20%, #ec4899aa, transparent 60%), radial-gradient(600px 400px at 85% 80%, #22d3eeaa, transparent 60%), #07051a; }
.bg-galaxy { background: radial-gradient(1px 1px at 25% 35%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 15%, #fff, transparent), radial-gradient(1px 1px at 50% 70%, #fff, transparent) 0 0 / 200px 200px, radial-gradient(500px 300px at 30% 40%, #7c3aed88, transparent 70%), radial-gradient(500px 300px at 70% 70%, #db277788, transparent 70%), #05030f; }
.bg-rainbow { background: linear-gradient(135deg, #f43f5e, #f97316, #eab308, #22c55e, #06b6d4, #6366f1, #a855f7); }
.bg-sakura { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 0 4px, transparent 5px) 0 0 / 60px 60px, linear-gradient(160deg, #fbcfe8, #f472b6 55%, #9d174d); }
.bg-gold { background: radial-gradient(700px 400px at 30% 0%, #fde68a, transparent 60%), linear-gradient(160deg, #ca8a04, #78350f); }
.bg-matrix { background: repeating-linear-gradient(90deg, rgba(34,197,94,.12) 0 2px, transparent 2px 14px), linear-gradient(180deg, #021b0b, #000); }