/* The swamp's shared hour and weather over the scene strip (static/world.js sets the data-* and --wx-*). */
.wxsky,.wxfront{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.wxfront{z-index:2}
.wxsky>*,.wxfront>*{position:absolute;pointer-events:none}
.wxsky>*,.wxfront>*:not(.wxsplash){opacity:0}
.pen.wxlive .wxsky>*,.pen.wxlive .wxfront>*:not(.wxsplash){transition:opacity 4s ease}   /* no fade on first paint */

/* darkness and the glow at either end of the day: behind the goblins, plus a light dimming in front */
.wxsky{background-color:rgba(16,22,60,calc(var(--wx-dark,0) * .55))}
.pen.wxlive .wxsky,.pen.wxlive .wxfront::before{transition:background-color 8s linear}
.pen[data-out="0"] .wxsky{background-color:rgba(30,20,40,calc(var(--wx-dark,0) * .22));
 background-image:radial-gradient(ellipse at 50% 35%,rgba(255,190,90,calc(var(--wx-dark,0) * .16)),transparent 70%)}
.wxfront::before{content:"";position:absolute;inset:0;background:rgba(16,22,60,calc(var(--wx-dark,0) * .14))}
.pen[data-out="0"] .wxfront::before{background:rgba(30,20,40,calc(var(--wx-dark,0) * .07))}
.pen[data-out="1"][data-phase="dawn"] .wxsky{background-image:linear-gradient(rgba(255,170,120,.28),rgba(255,210,150,.08) 58%,transparent 70%)}
.pen[data-out="1"][data-phase="dusk"] .wxsky{background-image:linear-gradient(rgba(240,120,80,.32),rgba(200,110,150,.12) 58%,transparent 70%)}

/* stars and moon (outdoors, dark, fading under cloud) */
.wxstars{left:0;right:0;top:0;height:56%;
 background-image:radial-gradient(1.2px 1.2px at 12px 9px,#fffbe6 50%,transparent),radial-gradient(1px 1px at 47px 27px,#fffbe6 50%,transparent),
  radial-gradient(1.4px 1.4px at 83px 14px,#fffbe6 50%,transparent),radial-gradient(1px 1px at 121px 34px,#fffbe6 50%,transparent),
  radial-gradient(1.2px 1.2px at 150px 6px,#fffbe6 50%,transparent);background-size:170px 46px}
.wxmoon{top:6px;left:28%}
.pen[data-out="1"][data-phase="night"] .wxstars,.pen[data-out="1"][data-phase="late"] .wxstars{opacity:calc(.9 - var(--wx-cloud,0) * .9 - var(--wx-fog,0) * .7)}
.pen[data-out="1"][data-phase="night"] .wxmoon,.pen[data-out="1"][data-phase="late"] .wxmoon{opacity:calc(1 - var(--wx-cloud,0) * .85)}
.pen[data-out="1"][data-phase="dusk"] .wxstars{opacity:calc(.35 - var(--wx-cloud,0) * .35)}

/* cloud: a grey wash over the sky part */
.wxcloud{left:0;right:0;top:0;height:62%;background:linear-gradient(rgba(96,104,112,.55),rgba(96,104,112,.0))}
.pen[data-out="1"] .wxcloud{opacity:calc(var(--wx-cloud,0) * .8)}

/* fireflies on dark, dry-ish nights outdoors */
.wxflies{inset:0}
.wxflies i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e6ff7a;box-shadow:0 0 5px 2px rgba(220,255,120,.7);
 animation:wxfly 7s ease-in-out infinite alternate,wxblink 2.3s ease-in-out infinite}
.wxflies i:nth-child(1){left:9%;top:58%}.wxflies i:nth-child(2){left:23%;top:40%;animation-delay:-2s,-.6s}
.wxflies i:nth-child(3){left:41%;top:64%;animation-delay:-4s,-1.2s}.wxflies i:nth-child(4){left:58%;top:46%;animation-delay:-1s,-1.7s}
.wxflies i:nth-child(5){left:72%;top:60%;animation-delay:-5s,-.3s}.wxflies i:nth-child(6){left:86%;top:42%;animation-delay:-3s,-2s}
.wxflies i:nth-child(7){left:94%;top:66%;animation-delay:-6s,-1s}
.pen[data-out="1"][data-phase="night"]:not([data-wx="rain"]):not([data-wx="storm"]):not([data-wx="snow"]) .wxflies,
.pen[data-out="1"][data-phase="late"]:not([data-wx="rain"]):not([data-wx="storm"]):not([data-wx="snow"]) .wxflies,
.pen[data-out="1"][data-phase="dusk"][data-wx="clear"] .wxflies{opacity:.9}
@keyframes wxfly{0%{transform:translate(0,0)}50%{transform:translate(14px,-9px)}100%{transform:translate(-10px,6px)}}
@keyframes wxblink{0%,100%{filter:brightness(.4);opacity:.3}50%{filter:brightness(1.2);opacity:1}}

/* puddles on the ground while it rains outdoors */
.wxpuddles{inset:0}
.wxpuddles i{position:absolute;height:6px;border-radius:50%;background:rgba(150,175,195,.55);border:1px solid rgba(29,27,24,.35)}
.wxpuddles i:nth-child(1){left:14%;bottom:12%;width:44px}.wxpuddles i:nth-child(2){left:52%;bottom:6%;width:30px}.wxpuddles i:nth-child(3){left:78%;bottom:16%;width:38px}
.pen[data-out="1"]:not([data-wx="snow"]) .wxpuddles{opacity:calc(var(--wx-rain,0) * 1.4)}

/* rain: two sheets of streaks at different speeds, slanted by the wind */
.wxrain{top:-30px;bottom:0;left:-30%;right:-30%;transform:skewX(var(--wx-slant,-12deg));background-repeat:repeat;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' stroke='%23c4d8ea' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 4v9M22 30v8M40 12v9M54 44v8M14 50v7M33 52v6M60 20v7'/%3E%3C/svg%3E")}
.wxrain.a{animation:wxfall .55s linear infinite}
.wxrain.b{background-size:44px 44px;animation:wxfall2 .8s linear infinite}
@keyframes wxfall{from{background-position:0 0}to{background-position:0 64px}}
@keyframes wxfall2{from{background-position:0 0}to{background-position:0 44px}}
.pen[data-out="1"][data-wx="drizzle"] .wxrain.a{opacity:.45}
.pen[data-out="1"][data-wx="rain"] .wxrain,.pen[data-out="1"][data-wx="storm"] .wxrain{opacity:calc(.45 + var(--wx-rain,0) * .5)}
.pen[data-out="0"][data-wx="rain"] .wxrain.a,.pen[data-out="0"][data-wx="storm"] .wxrain.a{opacity:.12;bottom:auto;height:22px}

/* snow */
.wxsnow{top:-40px;bottom:0;left:-10%;right:-10%;animation:wxsnow 6s linear infinite;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' fill='%23fbfdff' stroke='%231d1b18' stroke-width='.5'%3E%3Ccircle cx='8' cy='10' r='2'/%3E%3Ccircle cx='40' cy='26' r='1.6'/%3E%3Ccircle cx='60' cy='52' r='2.2'/%3E%3Ccircle cx='22' cy='58' r='1.5'/%3E%3C/svg%3E")}
@keyframes wxsnow{from{background-position:0 0}to{background-position:30px 70px}}
.pen[data-out="1"][data-wx="snow"] .wxsnow{opacity:.95}

/* fog: soft banks drifting across (indoors a thin haze at the edges) */
.wxfog{top:20%;bottom:-10%;left:-40%;width:180%;
 background:radial-gradient(ellipse 22% 40% at 20% 60%,rgba(232,236,226,.85),transparent 70%),radial-gradient(ellipse 26% 45% at 55% 50%,rgba(232,236,226,.8),transparent 70%),
  radial-gradient(ellipse 20% 38% at 85% 65%,rgba(232,236,226,.85),transparent 70%);animation:wxdrift 38s ease-in-out infinite alternate}
.wxfog.b{top:0;animation-duration:55s;animation-direction:alternate-reverse}
@keyframes wxdrift{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.pen[data-out="1"] .wxfog{opacity:calc(var(--wx-fog,0) * .9)}
.pen[data-out="0"] .wxfog.a{opacity:calc(var(--wx-fog,0) * .2)}

/* lightning */
.wxfront .wxbolt,.pen.wxlive .wxfront .wxbolt{inset:0;background:#f7f9ff;transition:none}
.pen.wxflash[data-out="1"] .wxbolt{opacity:.7}
.pen.wxflash[data-out="0"] .wxbolt{opacity:.18}

/* a puddle hop */
.wxsplash{width:26px;height:8px;margin-left:-13px;border:1.5px solid rgba(196,216,234,.95);border-radius:50%;animation:wxring .85s ease-out forwards}
@keyframes wxring{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}

/* jumping at thunder */
.walker.flinch .pengob{animation:wxflinch .5s ease-out}
@keyframes wxflinch{0%{transform:translateY(0)}25%{transform:translateY(-9px) scale(1.04,.96)}60%{transform:translateY(-2px)}100%{transform:translateY(0)}}

/* the goblin-time chip */
.wxhud{position:absolute;top:3px;right:6px;display:flex;align-items:center;gap:4px;padding:1px 5px 1px 4px;opacity:.92;pointer-events:none;
 font-size:10px;line-height:14px;font-weight:600;color:#1d1b18;background:rgba(255,253,245,.85);border:1.5px solid #1d1b18;border-radius:9px 10px 8px 10px;white-space:nowrap}
.wxhud b{font-weight:700}
.wxhud[hidden]{display:none}

@media (prefers-reduced-motion: reduce){.wxrain,.wxsnow,.wxfog,.wxflies i{animation:none!important}}