/* An isolated background layer keeps the sun/moon behind the 3D city and controls. */
.city-stage.has-local-sky{isolation:isolate}
.city-stage.has-local-sky > .sky{display:none!important}
.city-stage.has-local-sky::before,
.city-stage.has-local-sky::after{display:none!important}
.city-sky{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(180deg,#a9d4e9,#dcecf3);
}
.city-sky[data-phase=day]{background:linear-gradient(180deg,#a9d4e9,#dcecf3)}
.city-sky[data-phase=dawn]{background:linear-gradient(180deg,#9dabc6,#e4c2ba 62%,#eee0cd)}
.city-sky[data-phase=dusk]{background:linear-gradient(180deg,#7f91b1,#c7a5b1 62%,#e2c4b5)}
.city-sky[data-phase=night]{background:linear-gradient(180deg,#14233b,#293c54 65%,#46576a)}
.city-sky .celestial{
  position:absolute;
  right:clamp(96px,18vw,320px);
  top:clamp(100px,17vh,160px);
  width:clamp(32px,3.5vw,48px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
}
.city-sky .celestial-sun{
  background:#fff0ba;
  box-shadow:0 0 24px 8px #ffe3a533;
  opacity:.88;
}
.city-sky .celestial[hidden]{display:none}
@media(max-width:700px){
  .city-sky .celestial{
    right:22%;
    top:calc(94px + env(safe-area-inset-top,0px));
    width:32px;
  }
}
@media(max-height:500px) and (orientation:landscape){
  .city-sky .celestial{top:64px;right:22%;width:28px}
}
/* Only the small placement button intercepts input; the city keeps every other gesture. */
.celestial-placements{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}
.celestial-placements .celestial{position:absolute;right:clamp(96px,18vw,320px);top:clamp(100px,17vh,160px);width:48px;min-height:48px;padding:0;border:0;background:transparent;color:#14271e;pointer-events:auto;cursor:pointer;font:600 12px/1.3 sans-serif;isolation:isolate}
.celestial-placements .celestial-body{display:block;width:40px;height:40px;margin:4px;border-radius:50%}
.celestial-placements .celestial-sun .celestial-body{background:#fff0ba;box-shadow:0 0 24px 8px #ffe3a533}
/* The face and halo match in decorative and sponsored modes. Static shadows keep
   the moon bright on small screens without a filter, animation or extra hit area. */
.city-sky .celestial-moon,
.celestial-placements .celestial-moon .celestial-body{
  background:
    radial-gradient(circle at 65% 66%,#a8bdd42e 0 9%,transparent 11%),
    radial-gradient(circle at 36% 41%,#b8cbdc24 0 13%,transparent 15%),
    radial-gradient(circle at 35% 28%,#fffef4 0 28%,#edf4ff 66%,#d6e5fa 100%);
  box-shadow:inset 0 0 5px 2px #ffffffb3,0 0 13px 5px #eff7ffb3,0 0 34px 13px #c6dfff59,0 0 64px 24px #a9ccff21;
  opacity:1;
}
.celestial-sponsor{position:absolute;right:52px;top:0;width:126px;padding:7px;background:#14271ef2;color:#fff;border:1px solid #819765;border-radius:8px;text-align:left;overflow-wrap:anywhere;display:none;box-sizing:border-box}
.celestial-sponsor b,.celestial-sponsor small{display:block}
.celestial-sponsor small{margin-top:3px;color:#d5e99b;font-size:10px}
.celestial-sponsor img{float:left;width:28px;height:28px;margin:0 6px 3px 0;object-fit:contain;background:white;border-radius:4px}
.celestial-sponsor img[hidden]{display:none}
.celestial.is-sponsored .celestial-sponsor,.celestial:hover .celestial-sponsor,.celestial:focus-visible .celestial-sponsor{display:block}
.celestial-placements .celestial:focus-visible{outline:3px solid #d5e99b;outline-offset:3px;border-radius:50%}
.celestial-placements .celestial[hidden]{display:none}
@media(max-width:700px){.celestial-placements .celestial{right:14px;top:calc(94px + env(safe-area-inset-top,0px))}.celestial-sponsor{width:112px;font-size:11px}}
@media(max-height:500px) and (orientation:landscape){.celestial-placements .celestial{top:64px;right:14px}}


/* Celestial faces belong to the native 3D horizon, never the flat map. */
.city-sky .celestial,.celestial-placements{display:none!important}