/* Ambient background effects — one shared picker, works on every page.
   #ambient sits behind all page content (z-index:0), page content must have position:relative + z-index:1
   which style.css already gives via header/main/footer. */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* --- rain --- */
#ambient.fx-rain span{position:absolute;top:-10vh;width:1px;background:linear-gradient(to bottom,transparent,var(--amb-c,#ffffff66));animation:amb-fall linear infinite}
@keyframes amb-fall{to{transform:translateY(120vh)}}

/* --- snow --- */
#ambient.fx-snow i{position:absolute;top:-5vh;border-radius:50%;background:#ffffffcc;animation:amb-snow linear infinite}
@keyframes amb-snow{0%{transform:translate(0,0)}50%{transform:translate(20px,60vh)}100%{transform:translate(-10px,120vh)}}

/* --- aurora --- */
#ambient.fx-aurora i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:amb-drift ease-in-out infinite alternate}
@keyframes amb-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,-4vh) scale(1.15)}}

/* --- ocean --- */
#ambient.fx-ocean i{position:absolute;left:-10%;width:120%;height:60px;border-radius:50%;background:var(--amb-c,#3fb6c9);opacity:.12;animation:amb-wave ease-in-out infinite}
@keyframes amb-wave{0%,100%{transform:translateX(-4%) scaleY(1)}50%{transform:translateX(4%) scaleY(1.4)}}

/* --- galaxy --- */
#ambient.fx-galaxy i{position:absolute;border-radius:50%;background:#fff;animation:amb-twinkle ease-in-out infinite}
@keyframes amb-twinkle{0%,100%{opacity:.15}50%{opacity:1}}

/* --- sakura --- */
#ambient.fx-sakura span{position:absolute;top:-8vh;font-size:1.1rem;animation:amb-petal linear infinite}
@keyframes amb-petal{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx,40px),120vh) rotate(320deg)}}

/* --- fire --- */
#ambient.fx-fire i{position:absolute;bottom:-4vh;border-radius:50%;background:radial-gradient(circle,#ffb347,#ff512f 70%,transparent);animation:amb-ember ease-in infinite}
@keyframes amb-ember{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx,20px),-90vh);opacity:0}}

/* --- night_city --- */
#ambient.fx-night_city i{position:absolute;bottom:0;width:2px;background:linear-gradient(to top,var(--amb-c,#7fd1ff),transparent);animation:amb-rise ease-in-out infinite alternate}
@keyframes amb-rise{from{height:10vh;opacity:.25}to{height:35vh;opacity:.7}}

@media(prefers-reduced-motion:reduce){#ambient{display:none}}

/* --- picker UI --- */
.amb-btn{position:fixed;right:18px;bottom:18px;z-index:90;width:50px;height:50px;border-radius:50%;border:2px solid var(--pink);background:var(--bg);color:var(--ink);font-size:1.3rem;box-shadow:0 8px 24px #00000033}
body.eluga .amb-btn{border-color:#3f9b5c}
.amb-panel{position:fixed;right:18px;bottom:78px;z-index:90;background:var(--bg);border:2px solid var(--bd);border-radius:20px;padding:14px;display:none;grid-template-columns:repeat(3,1fr);gap:8px;width:216px;box-shadow:0 20px 50px #00000044}
.amb-panel.on{display:grid}
.amb-panel button{border:2px solid var(--bd);background:var(--card);border-radius:12px;padding:8px 4px;font-size:.72rem;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px}
.amb-panel button span{font-size:1.2rem}
.amb-panel button.on{border-color:var(--pink)}
body.eluga .amb-panel button.on{border-color:#3f9b5c}