/* Lost Forest and The Radiant Forest: fog, moon and aurora layers, the Seven Radiant Moons strip, the Moon Catch stars. See js/ui/radiant.js. */

#forestfx { position: fixed; inset: 0; z-index: 2; display: none; pointer-events: none; overflow: hidden; }
#forestfx > div { position: absolute; inset: 0; display: none; }
#forestfx i { position: absolute; display: block; }
body.biome-LostForest #forestfx, body.biome-RadiantForest #forestfx { display: block; }
body.biome-LostForest #forestfx .lf, body.biome-RadiantForest #forestfx .rf { display: block; }

/* Lost Forest: green dark, fog drifting through, a few light shafts */
.lf .tint { inset: 0; background: linear-gradient(rgba(10, 46, 16, .16), rgba(0, 18, 4, .3)); mix-blend-mode: multiply; }
.lf .fog { inset: -25%; opacity: .22; background: radial-gradient(ellipse at 28% 38%, rgba(70, 190, 80, .4), transparent 58%), radial-gradient(ellipse at 78% 66%, rgba(30, 130, 55, .4), transparent 60%); mix-blend-mode: screen; animation: lfdrift 42s ease-in-out infinite alternate; }
.lf .fog.b { opacity: .14; background: radial-gradient(ellipse at 62% 28%, rgba(90, 210, 100, .3), transparent 55%); animation-duration: 57s; animation-direction: alternate-reverse; }
.lf .shafts { inset: 0; background: repeating-linear-gradient(104deg, transparent 0 9%, rgba(160, 255, 150, .04) 10% 12.5%, transparent 14% 25%); mix-blend-mode: screen; animation: lfshaft 16s ease-in-out infinite alternate; }
.lf .vig { inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 10, 2, .4)); }
@keyframes lfdrift { from { transform: translate(-4%, -2%); } to { transform: translate(5%, 3%); } }
@keyframes lfshaft { from { transform: translateX(-3%); opacity: .7; } to { transform: translateX(3%); opacity: 1; } }

/* The Radiant Forest: the aurora and the falling stars carry the scene */
.rf .veil { inset: 0; background: linear-gradient(rgba(4, 6, 32, .5), rgba(8, 6, 36, .25) 60%, rgba(0, 0, 10, .45)); mix-blend-mode: multiply; }
.rf .aurora { position: absolute; inset: 0; mix-blend-mode: screen; }
.rf .aurora i { top: -8%; bottom: 22%; width: 15%; left: calc(var(--i) * 17% - 4%); filter: blur(16px); opacity: .55; background: linear-gradient(to top, transparent, var(--c) 38%, transparent 96%); animation: auroraw 11s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2.3s); }
.rf .aurora i:nth-child(1) { --c: #2fd5e8; } .rf .aurora i:nth-child(2) { --c: #3f6bff; } .rf .aurora i:nth-child(3) { --c: #8a52ff; }
.rf .aurora i:nth-child(4) { --c: #e046c4; } .rf .aurora i:nth-child(5) { --c: #3f8bff; } .rf .aurora i:nth-child(6) { --c: #2fe3b4; }
@keyframes auroraw { from { transform: translateX(-3vw) scaleY(.9); opacity: .38; } to { transform: translateX(3vw) scaleY(1.06); opacity: .7; } }

/* Moon Catch: a dashed circle on the ground and the star dropping into it */
.pickup.mstar { width: 84px; height: 84px; animation: none; }
.pickup.mstar .ring { position: absolute; inset: 0; border: 2px dashed rgba(175, 215, 255, .95); border-radius: 50%; box-shadow: 0 0 14px rgba(120, 180, 255, .5), inset 0 0 14px rgba(120, 180, 255, .3); animation: mring 1.8s ease-in-out infinite; }
.pickup.mstar i { inset: auto; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 0; border-radius: 0; background: #eaf6ff; box-shadow: none; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: mfall 1.5s cubic-bezier(.4, 0, .8, 1) both, mglow 1.4s ease-in-out 1.5s infinite alternate; }
@keyframes mring { 50% { transform: scale(1.08); opacity: .7; } }
@keyframes mfall { from { transform: translate(-80px, -280px) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mglow { to { transform: scale(1.18); filter: brightness(1.3); } }

/* the Seven Radiant Moons: top centre, under the biome timer */
#moons { position: fixed; top: 70px; left: 50%; z-index: 6; display: none; width: min(340px, 92vw); transform: translateX(-50%); padding: 7px 12px 8px; text-align: center; color: #dbe6ff; background: rgba(8, 12, 30, .8); border: 1px solid #2c3d73; border-top: 3px solid #7fb4ff; pointer-events: auto; }
#moons.on { display: block; }
#moons .mt { display: flex; justify-content: space-between; align-items: baseline; font: 600 12px var(--head); letter-spacing: .04em; color: #aebfe8; }
#moons .mc { font: 700 14px var(--head); color: #fff; }
#moons .grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 28px auto; gap: 5px 6px; margin: 6px 0 7px; align-items: center; }
#moons .mn { grid-row: 1; }
#moons .mn { height: 28px; background: #2b3350; clip-path: var(--s); transition: background .3s; }
#moons .mn.lit { background: #e4f1ff; filter: drop-shadow(0 0 5px #8fc6ff); }
#moons .mn.pop { animation: moonpop .9s ease-out; }
@keyframes moonpop { 0% { transform: scale(.6); filter: brightness(3) drop-shadow(0 0 14px #fff); } 45% { transform: scale(1.5); } 100% { transform: none; } }
#moons .tc { grid-row: 2; padding: 1px 0; text-align: center; font: 600 10.5px var(--head); color: #56628a; border: 1px solid #2b3560; }
#moons .tc.open { color: #07101f; background: #9fd0ff; border-color: #9fd0ff; }
#moons .cyc, #moons .bls { font: 500 11.5px/1.35 var(--body); color: #7f8db5; }
#moons .cyc.now { margin-top: 2px; font-weight: 700; color: #ffe08a; }
#moons .bls { color: #aebfe8; }
#moons .bls:empty { display: none; }
#moons.solo .mt, #moons.solo .grid, #moons.solo .bls { display: none; }
#moons.solo { padding: 6px 12px; }

#banner .b.long { animation-duration: 8s; }
body.mobile #moons { top: calc(max(6px, env(safe-area-inset-top)) + 150px); width: min(300px, 70vw); }

@media (prefers-reduced-motion: reduce) { .lf .fog, .lf .shafts, .rf .aurora i, .pickup.mstar .ring, .pickup.mstar i { animation: none !important; } }