#weather-wash {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  transition: opacity 1.4s ease;
}
#weather-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
body[data-weather="clear-day"] #weather-wash {
  background: radial-gradient(62% 46% at 50% 26%, rgba(255, 196, 90, 0.09) 0%, rgba(255, 196, 90, 0) 70%);
}
body[data-weather="clear-night"] #weather-wash {
  background: radial-gradient(120% 90% at 50% -10%, rgba(38, 54, 110, 0.28) 0%, rgba(38, 54, 110, 0) 62%);
}
body[data-weather="cloudy"] #weather-wash {
  background: linear-gradient(rgba(130, 140, 150, 0.07), rgba(130, 140, 150, 0.03));
}
#weather-wash::before {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  opacity: 0;
}
body[data-weather="cloudy"] #weather-wash::before {
  opacity: 1;
  background: radial-gradient(34% 26% at 24% 30%, rgba(150, 160, 170, 0.1) 0%, rgba(150, 160, 170, 0) 70%), radial-gradient(40% 30% at 74% 22%, rgba(150, 160, 170, 0.08) 0%, rgba(150, 160, 170, 0) 70%);
  animation: cloud-drift 80s ease-in-out infinite alternate;
}
body[data-weather="fog"] #weather-wash {
  background: linear-gradient(rgba(150, 155, 145, 0.09), rgba(150, 155, 145, 0.05));
}
body[data-weather="rain"] #weather-wash {
  background: linear-gradient(rgba(8, 12, 18, 0.42), rgba(8, 12, 18, 0.18)), radial-gradient(70% 34% at 50% 0%, rgba(120, 135, 150, 0.12) 0%, rgba(120, 135, 150, 0) 70%);
}
body[data-weather="storm"] #weather-wash {
  background: linear-gradient(rgba(6, 9, 14, 0.55), rgba(6, 9, 14, 0.28)), radial-gradient(70% 34% at 50% 0%, rgba(110, 125, 145, 0.14) 0%, rgba(110, 125, 145, 0) 70%);
}
@keyframes cloud-drift {
  from {
    transform: translateX(-3%);
  }
  to {
    transform: translateX(3%);
  }
}
.wx-now {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--tx3);
  text-align: center;
}
.wx-now:empty {
  display: none;
}