/* ============================================================
   weather.css — live, theme-aware weather overlays
   Driven by html[data-weather="clear|clouds|fog|rain|snow|storm"]
   and html[data-weather-int="normal|heavy"]. The look is tinted per
   theme via --wx / --wx-fog so it always matches the active palette.
   Sits behind page content (z-0), never blocks text.
   ============================================================ */

.weather {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: block;
  /* defaults (auto / time-of-day themes) */
  --wx: rgba(184, 202, 230, 0.55);
  --wx-fog: rgba(205, 215, 235, 0.34);
}

/* a little dimmer in bright daytime so it stays subtle */
html[data-phase="day"] .weather { opacity: 0.78; }
html[data-phase="night"] .weather { opacity: 1; }

/* ---- per-theme tints (match the active palette, kept high-contrast vs each bg) ---- */
html[data-theme-select="auto"]     .weather { --wx: rgba(175, 200, 235, 0.9); --wx-fog: rgba(205, 215, 235, 0.36); }
html[data-theme-select="auto"][data-phase="day"]  .weather,
html[data-theme-select="auto"][data-phase="dawn"] .weather { --wx: rgba(80, 105, 150, 0.72); --wx-fog: rgba(140, 155, 180, 0.4); }
html[data-theme-select="pixel"]    .weather { --wx: rgba(40, 95, 180, 0.8); --wx-fog: rgba(150, 185, 230, 0.5); }
html[data-theme-select="card"]     .weather { --wx: rgba(170, 198, 255, 0.88); --wx-fog: rgba(150, 185, 230, 0.34); }
html[data-theme-select="strategy"] .weather { --wx: rgba(92, 70, 44, 0.62); --wx-fog: rgba(150, 125, 80, 0.42); }
html[data-theme-select="survival"] .weather { --wx: rgba(236, 206, 170, 0.82); --wx-fog: rgba(170, 145, 105, 0.4); }
html[data-theme-select="rpg"]      .weather { --wx: rgba(232, 210, 158, 0.82); --wx-fog: rgba(180, 168, 130, 0.34); }

/* =====================  RAIN  =====================
   discrete, sparse, soft streaks that fall slowly (calm, not a barcode) */
.weather::before,
.weather::after { content: ""; position: absolute; inset: -25% -10%; }

html[data-weather="rain"] .weather::before,
html[data-weather="storm"] .weather::before {
  background-image: radial-gradient(1.4px 11px at 50% 0, var(--wx), transparent 72%);
  background-size: 46px 82px;
  transform: rotate(7deg);
  opacity: 0.7;
  animation: wx-rain-back 1.6s linear infinite;
}
html[data-weather="rain"] .weather::after,
html[data-weather="storm"] .weather::after {
  background-image: radial-gradient(1.8px 15px at 50% 0, var(--wx), transparent 72%);
  background-size: 36px 110px;
  transform: rotate(8deg);
  opacity: 0.88;
  animation: wx-rain-front 1.15s linear infinite;
}
html[data-weather-int="heavy"][data-weather="rain"] .weather::after,
html[data-weather="storm"] .weather::after { animation-duration: 0.85s; opacity: 0.95; }
@keyframes wx-rain-back { to { background-position: 0 82px; } }
@keyframes wx-rain-front { to { background-position: 0 110px; } }
/* on the light Strategy/Pixel themes, keep raindrops subtle so dark text stays readable */
html[data-theme-select="strategy"][data-weather="rain"] .weather::before,
html[data-theme-select="pixel"][data-weather="rain"] .weather::before { opacity: 0.34; }
html[data-theme-select="strategy"][data-weather="rain"] .weather::after,
html[data-theme-select="pixel"][data-weather="rain"] .weather::after { opacity: 0.46; }
html[data-theme-select="strategy"][data-weather="storm"] .weather::before,
html[data-theme-select="pixel"][data-weather="storm"] .weather::before { opacity: 0.4; }
html[data-theme-select="strategy"][data-weather="storm"] .weather::after,
html[data-theme-select="pixel"][data-weather="storm"] .weather::after { opacity: 0.55; }

/* storm: just a calm darkening + heavier rain — NO lightning flash */
html[data-weather="storm"] .weather {
  background: radial-gradient(120% 80% at 50% 0%, rgba(10, 14, 30, 0.22), transparent 70%);
}

/* =====================  SNOW  ===================== */
html[data-weather="snow"] .weather::before {
  background-image:
    radial-gradient(var(--wx) 1.7px, transparent 2.4px),
    radial-gradient(var(--wx) 1.2px, transparent 1.8px);
  background-size: 42px 42px, 28px 28px;
  background-position: 0 0, 14px 14px;
  animation: wx-snow-back 9s linear infinite;
  opacity: 0.8;
}
html[data-weather="snow"] .weather::after {
  background-image: radial-gradient(var(--wx) 2.4px, transparent 3.2px);
  background-size: 64px 64px;
  animation: wx-snow-front 6s linear infinite;
}
html[data-weather-int="heavy"][data-weather="snow"] .weather::before { animation-duration: 5.5s; }
html[data-weather-int="heavy"][data-weather="snow"] .weather::after { animation-duration: 3.6s; }
@keyframes wx-snow-back { to { background-position: 26px 720px, 40px 720px; } }
@keyframes wx-snow-front { to { background-position: -36px 680px; } }

/* =====================  FOG / CLOUDS  =====================
   clouds = distinct drifting puffs; fog = broad rolling haze bands.
   Both clearly visible now (raised --wx-fog alphas above). */
html[data-weather="clouds"] .weather::before {
  inset: -8% -25%;
  background:
    radial-gradient(38% 60% at 16% 30%, var(--wx-fog), transparent 62%),
    radial-gradient(46% 70% at 44% 22%, var(--wx-fog), transparent 64%),
    radial-gradient(40% 64% at 72% 32%, var(--wx-fog), transparent 62%),
    radial-gradient(34% 56% at 90% 24%, var(--wx-fog), transparent 62%);
  filter: blur(6px);
  animation: wx-fog 40s ease-in-out infinite alternate;
}
html[data-weather="clouds"] .weather::after {
  inset: -8% -25%;
  background:
    radial-gradient(42% 64% at 30% 70%, var(--wx-fog), transparent 64%),
    radial-gradient(38% 60% at 64% 78%, var(--wx-fog), transparent 64%);
  filter: blur(7px);
  opacity: 0.8;
  animation: wx-fog 30s ease-in-out infinite alternate-reverse;
}
html[data-weather="fog"] .weather::before {
  inset: -10% -20%;
  background:
    linear-gradient(0deg, var(--wx-fog), transparent 40%),
    radial-gradient(120% 30% at 30% 60%, var(--wx-fog), transparent 70%),
    radial-gradient(120% 28% at 70% 40%, var(--wx-fog), transparent 70%);
  filter: blur(10px);
  animation: wx-fog 32s ease-in-out infinite alternate;
}
html[data-weather="fog"] .weather::after {
  inset: -10% -20%;
  background: radial-gradient(140% 26% at 50% 85%, var(--wx-fog), transparent 72%);
  filter: blur(14px);
  opacity: 0.85;
  animation: wx-fog 24s ease-in-out infinite alternate-reverse;
}
@keyframes wx-fog {
  from { transform: translateX(-5%); }
  to   { transform: translateX(7%); }
}

/* =====================  NIGHT SKY (stars + real moon phase)  =====================
   shows at night when the sky is open-ish (clear / cloudy), behind content. */
.wx-sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
html[data-phase="night"][data-weather="clear"]  .wx-sky,
html[data-phase="night"][data-weather=""]       .wx-sky,
html[data-phase="night"][data-weather="clouds"] .wx-sky { opacity: 1; }
html[data-phase="night"][data-weather="clouds"] .wx-sky { opacity: 0.55; }
/* stars */
.wx-sky::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 27% 33%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 54% 27%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 67% 16%, #fff, transparent 60%),
    radial-gradient(1px 1px at 78% 30%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 14%, #fff, transparent 60%),
    radial-gradient(1px 1px at 20% 44%, #fff, transparent 60%),
    radial-gradient(1.1px 1.1px at 60% 40%, #fff, transparent 60%),
    radial-gradient(1px 1px at 34% 52%, #fff, transparent 60%);
  opacity: 0.85;
  animation: wx-twinkle 4.5s ease-in-out infinite;
}
/* moon — phase carved by an inset shadow whose offset (--moon-sx) is set by JS */
.wx-sky::after {
  content: ""; position: absolute; top: 8%; right: 10%;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fdf7e2, #d9d2bb);
  box-shadow:
    inset var(--moon-sx, 0px) 0 0 0 rgba(8, 10, 22, 0.95),
    0 0 26px rgba(240, 240, 255, 0.28);
}
html[data-moon="new"] .wx-sky::after { box-shadow: inset 0 0 0 1px rgba(190,195,215,0.35), 0 0 18px rgba(180,190,220,0.12); background: rgba(20,24,40,0.6); }
@keyframes wx-twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.5; } }

/* pixel theme: chunky, stepped snow only (rain stays smooth to avoid strobing) */
html[data-theme-select="pixel"][data-weather="snow"] .weather::before,
html[data-theme-select="pixel"][data-weather="snow"] .weather::after {
  animation-timing-function: steps(10);
}

@media (prefers-reduced-motion: reduce) {
  .weather::before, .weather::after, .wx-sky::before { animation: none !important; }
}