#sky, #haze, #weather, #flash { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#sky {
  background: linear-gradient(180deg, rgba(255, 140, 60, var(--warm, 0)) 0%, rgba(255, 95, 120, calc(var(--warm, 0) * 0.7)) 100%);
  mix-blend-mode: soft-light;
}
#haze {
  background: radial-gradient(ellipse at 50% 55%, rgba(225, 230, 236, calc(var(--fog, 0) * 0.35)) 0%, rgba(215, 222, 230, var(--fog, 0)) 100%);
  transition: opacity 1s;
}
[data-theme="block"] #weather { image-rendering: pixelated; }
#flash { background: transparent; }
#flash.on { animation: lightning 0.9s ease-out; }
@keyframes lightning {
  0% { background: rgba(255, 255, 255, 0.5); }
  12% { background: rgba(255, 255, 255, 0); }
  22% { background: rgba(255, 255, 255, 0.32); }
  100% { background: rgba(255, 255, 255, 0); }
}

.wx { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wx svg { width: 18px; height: 18px; flex: none; }

#w-weather {
  right: 16px;
  bottom: calc(216px + var(--sb));
  font: 15px WestScript;
  color: #2b1d10;
  text-shadow: 0 0 5px #e8dbb8, 0 0 2px #e8dbb8;
}
[data-phase="night"] #w-weather, [data-phase="night"] #w-coins, [data-phase="night"] #w-coords { color: #f3e6c4; text-shadow: 0 0 5px #1f160d, 0 0 2px #1f160d; }
[data-phase="night"] #w-banner { color: #f3e6c4; text-shadow: 0 0 6px #1f160d, 0 0 2px #1f160d; }

#c-weather { font: 17px CityA; color: #fff; margin-top: 2px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; display: flex; justify-content: flex-end; }

#t-weather { font-size: 11px; color: #9fb38a; margin-top: 3px; letter-spacing: 0.1em; }