.weather-scene{position:relative}
.moon-scene{--moon-native-size:128px;position:absolute;top:100px;right:clamp(25px,9vw,160px);width:170px;margin:0;pointer-events:none}
.moon-scene[hidden]{display:none!important}
.moon-trigger{display:block;width:128px;height:128px;margin:auto;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;color:#d9edf8}
.moon-trigger:focus-visible{outline:2px solid #c9e7f5;outline-offset:4px}
.moon-portrait{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen}
.moon-portrait[hidden]{visibility:hidden;display:block}
.moon-scene[data-above="false"] .moon-portrait{opacity:.5}
.moon-info{position:fixed;inset:auto;margin:0;width:270px;max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);overflow:auto;box-sizing:border-box;padding:17px 18px;border:1px solid #d2e7f53d;border-radius:15px;background:#112d43f5;color:#edf6fc;box-shadow:0 10px 35px #00111e55;font:12px/1.6 system-ui,sans-serif;text-align:left;pointer-events:auto;mix-blend-mode:normal;isolation:isolate;z-index:20}
.moon-info[hidden]{display:none!important}.moon-info strong,.moon-info>span{display:block}.moon-info strong{font-size:15px;font-weight:500;padding-right:20px}.moon-info .moon-horizon{color:#b8cedd}.moon-info details{margin-top:12px;font-size:11px}.moon-info summary{cursor:pointer}.moon-info p{margin:7px 0}.moon-info a{color:#bce2f6}.moon-info a:focus-visible,.moon-info summary:focus-visible{outline:2px solid #bce2f6;outline-offset:2px}.moon-info-close{position:absolute;right:8px;top:8px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#cee3f1;font-size:20px;cursor:pointer}.moon-info-close:hover{background:#ffffff12}
@media(max-width:1100px){.moon-scene{--moon-native-size:110px;right:15px;width:155px}.moon-trigger{width:110px;height:110px}}
@media(max-width:900px){.moon-scene{position:static;width:64px;margin:8px 0 0 auto}.moon-trigger{width:64px;height:64px}}
@media(min-width:901px) and (max-height:680px){.moon-scene{--moon-native-size:84px;top:115px;right:0;width:125px}.moon-trigger{width:84px;height:84px}}
/* Blend the entire fixed stacking context so JPEG blacks disappear in the sky. */
.moon-scene[data-placement="aligned"]{position:fixed;z-index:3;top:var(--moon-top);left:var(--moon-left);right:auto;width:var(--moon-width);transform:translateX(-50%);mix-blend-mode:screen}
.moon-scene[data-placement="aligned"] .moon-trigger{width:var(--moon-size);height:var(--moon-size);max-width:100%}
.moon-scene[data-placement="compact"]{position:static;width:64px;margin:8px 0 0 auto}
.moon-scene[data-placement="compact"] .moon-trigger{width:64px;height:64px;margin:0}

/* Keep the lunar view beside short commune names on phones only. */
@media(max-width:600px){.moon-scene[data-placement="mobile-title"]{position:absolute;left:var(--moon-mobile-left);top:var(--moon-mobile-top);right:auto;width:64px;margin:0}.moon-scene[data-placement="mobile-title"] .moon-trigger{width:64px;height:64px;margin:0}}