#weatherNotice{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);width:min(88vw,420px);pointer-events:none;text-align:center;opacity:0;visibility:hidden;font-family:'Fredoka',system-ui,sans-serif}
#weatherNotice .rain-heading{position:relative;display:inline-block;padding-left:24px;color:#77d2ff;font-size:clamp(28px,7vw,38px);line-height:1.08;font-weight:700;text-shadow:0 2px 2px #173965;margin-bottom:5px}
#weatherNotice .rain-heading::before{content:'';position:absolute;left:4px;top:10px;width:6px;height:10px;border-radius:60% 40% 60% 40%;background:#77d2ff;transform:rotate(16deg);box-shadow:-6px -7px 0 -1px #b9eeff,6px 7px 0 -1px #45b6f4}
#weatherNotice .rain-warning{color:#d5f2ff;font-size:clamp(18px,4.7vw,25px);line-height:1.15;font-weight:700;text-shadow:0 2px 2px #173965}
#weatherNotice.show{visibility:visible;animation:rain-notice-pop 1.8s both}
@keyframes rain-notice-pop{0%{opacity:0;transform:translate(-50%,-42%) scale(.86)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}28%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.98)}}
@media(max-height:500px){#weatherNotice{top:43%;width:min(75vw,400px)}#weatherNotice .rain-heading{font-size:28px}#weatherNotice .rain-warning{font-size:19px}}
@media(prefers-reduced-motion:reduce){#weatherNotice.show{animation:rain-notice-still 1.8s both}@keyframes rain-notice-still{0%,78%{opacity:1}100%{opacity:0}}}