/* The game's Live sky (src/meta/scenes.ts liveScene, src/ui/Scenery.tsx) for every posygame.app page.
   sky.js builds the layer and picks sunrise, day, golden hour or night from the visitor's clock. */
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(/site/fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-weight:600;font-display:swap;src:url(/site/fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(/site/fonts/nunito-latin-800-normal.woff2) format('woff2')}
:root{--navy:#1c2b5a;--cream-hi:#fffaee;--k:1;--top:env(safe-area-inset-top,0px)}
@media (min-width:900px){:root{--k:1.35}}
html,body{background:#2b8be0;-webkit-tap-highlight-color:transparent}

.scenery{position:fixed;inset:0;z-index:0;overflow:hidden;container-type:size;transition:opacity 2.4s ease}
.scenery.enter{opacity:0}
.sc-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sk1) 0%,var(--sk2) 52%,var(--sk3) 100%)}
.scene-day{--sk1:#63bdf6;--sk2:#42a3ee;--sk3:#2b8be0}
.scene-sunset{--sk1:#7b86dc;--sk2:#f29d86;--sk3:#ffcf8a}
.scene-night{--sk1:#11163f;--sk2:#25276e;--sk3:#45398f}
.scene-dawn{--sk1:#8f9be0;--sk2:#f3b6c4;--sk3:#ffd9a8}

.sc-sun{position:absolute;top:calc(var(--top) + 70px);right:8px;width:calc(104px * var(--k));animation:sc-spin 120s linear infinite}
.sc-sun.low{top:auto;bottom:22%;right:18%;width:calc(169px * var(--k))}
.sc-sun.rising{top:auto;bottom:18%;right:22%;width:calc(150px * var(--k));animation:sc-spin 120s linear infinite,sc-sunrise 60s ease-out both}
.sc-moon{position:absolute;top:calc(var(--top) + 150px);right:26px;width:calc(72px * var(--k));animation:sc-bob 7s ease-in-out infinite alternate}
.sc-stars img{position:absolute;animation:sc-twinkle 2.8s ease-in-out infinite alternate}
.sc-item{position:absolute;left:0;animation:sc-drift var(--d) linear infinite}
.sc-item img,.sc-pop img,.sc-stars img{display:block;height:auto}
.bob img{animation:sc-bob 5s ease-in-out infinite alternate}
.warm img{filter:sepia(.45) saturate(1.5) hue-rotate(-18deg)}
.dusk img{opacity:.32;filter:brightness(.75) saturate(.6)}
/* A star falls on its own every 11s on the night sky. */
.sc-shoot{position:absolute;top:10%;left:78%;width:140px;height:3px;border-radius:3px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));transform-origin:left center;opacity:0;animation:sc-shoot 11s ease-out infinite 3s}
.sc-land{position:absolute;left:0;right:0;bottom:0;height:min(30%,calc(260px * var(--k)));overflow:hidden;opacity:0;transition:opacity .5s ease}
.sc-land.ready{opacity:1}
/* Each tile is painted to wrap, so tiles join without a seam; the strip pans by exactly one tile. */
.sc-land-strip{display:flex;width:max-content;height:100%;animation:sc-pan 180s linear infinite}
.sc-land-strip img{display:block;flex:none;height:100%;width:auto;margin-right:-1px}
.sc-pop{position:fixed;z-index:1;bottom:-70px;animation:sc-pop 5.6s cubic-bezier(.3,0,.7,1) both;pointer-events:none}
.sc-pop img{animation:sc-wobble 1.6s ease-in-out infinite alternate}
.squish{animation:squish .6s cubic-bezier(.3,1.6,.5,1)}

@keyframes sc-drift{from{transform:translateX(-35cqw)}to{transform:translateX(125cqw)}}
@keyframes sc-bob{to{transform:translateY(-14px) rotate(3deg)}}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-sunrise{from{translate:0 70px;filter:saturate(1.4) hue-rotate(-14deg)}to{translate:0 -40px}}
@keyframes sc-twinkle{from{opacity:.3;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@keyframes sc-pan{to{transform:translateX(calc(-100% / 6))}}
@keyframes sc-wobble{to{transform:translateX(14px)}}
@keyframes sc-pop{from{transform:translateY(0) scale(.6)}12%{transform:translateY(-12vh) scale(1)}to{transform:translateY(-125vh) scale(1)}}
@keyframes sc-shoot{0%{transform:rotate(155deg) translateX(0);opacity:0}1%{opacity:1}10%,100%{transform:rotate(155deg) translateX(70cqw);opacity:0}}
@keyframes splash-bob{to{transform:translateY(-6px)}}
@keyframes squish{0%{transform:scale(1)}30%{transform:scale(1.12,.88)}55%{transform:scale(.94,1.08)}80%{transform:scale(1.03,.97)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.scenery *,.squish{animation-play-state:paused!important}.scenery{transition:none}}