*{box-sizing:border-box}
:root{
  --design-w:1600;
  --design-h:900;
  --safe:14px;
  --glass-bg:rgba(21,36,55,.18);
  --glass-bg-soft:rgba(26,48,76,.16);
  --glass-border:rgba(255,255,255,.24);
  --text:#fff;
  --muted:rgba(255,255,255,.82);
}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:#07111d;color:var(--text)}
body{position:relative}
.scene{position:relative;width:100vw;height:100vh;overflow:hidden;isolation:isolate;background:#0b1622}
.background,.time-tone,.moon-layer,.clouds,.fog-layer,.rain-layer,.snow-layer,.lightning-layer,.wet-screen,.cold-edge{position:absolute;inset:0;pointer-events:none}
.background{z-index:0;background-position:center center;background-size:cover;background-repeat:no-repeat;transform:scale(1.015)}
.time-day .background{background-image:url('assets/backgrounds/day.png')}
.time-sunrise .background{background-image:url('assets/backgrounds/sunrise.png')}
.time-sunset .background{background-image:url('assets/backgrounds/sunset.png')}
.time-night .background{background-image:url('assets/backgrounds/night.png')}

.time-tone{z-index:1}
.time-day .time-tone{background:linear-gradient(180deg,rgba(70,145,230,.04),transparent 56%,rgba(0,0,0,.04))}
.time-sunrise .time-tone{background:linear-gradient(180deg,rgba(255,197,145,.10),transparent 55%,rgba(0,0,0,.06))}
.time-sunset .time-tone{background:linear-gradient(180deg,rgba(255,137,57,.10),rgba(60,22,59,.04) 60%,rgba(0,0,0,.10))}
.time-night .time-tone{background:linear-gradient(180deg,rgba(5,15,35,.03),rgba(3,10,22,.02) 45%,rgba(0,0,0,.03))}

/* Realistic image-based moon, intentionally large on the right */
.moon-layer{z-index:2;opacity:0;background-repeat:no-repeat;background-position:right 2vw top 2vh;background-size:38vw auto;transition:opacity .35s ease}
.time-night .moon-layer{opacity:1}
.moon-none .moon-layer{background-image:url('assets/moon/moon_none.png')}
.moon-crescent .moon-layer{background-image:url('assets/moon/moon_crescent.png')}
.moon-quarter .moon-layer{background-image:url('assets/moon/moon_quarter.png')}
.moon-half .moon-layer{background-image:url('assets/moon/moon_half.png')}
.moon-gibbous .moon-layer{background-image:url('assets/moon/moon_gibbous.png')}
.moon-full .moon-layer{background-image:url('assets/moon/moon_full.png')}

/* Clouds */
.cloud-back{z-index:3;opacity:0;transition:opacity .35s ease}
.cloud-back::before,.cloud-back::after{content:"";position:absolute;inset:0}
.weather-partly .cloud-back,.weather-cloudy .cloud-back,.weather-rain .cloud-back,.weather-storm .cloud-back,.weather-snow .cloud-back,.weather-fog .cloud-back{opacity:1}

/* Scattered clouds */
.weather-partly .cloud-back::before{
  background:
    radial-gradient(ellipse 24% 9% at 14% 14%,rgba(255,255,255,.78) 0 62%,transparent 69%),
    radial-gradient(ellipse 19% 8% at 31% 16%,rgba(244,247,250,.78) 0 62%,transparent 69%),
    radial-gradient(ellipse 24% 10% at 68% 17%,rgba(248,249,251,.72) 0 62%,transparent 70%),
    radial-gradient(ellipse 20% 8% at 84% 13%,rgba(235,239,244,.72) 0 60%,transparent 68%);
  filter:blur(12px);
}

/* Fully overcast: no visible blue sky and clouds descend over the mountain */
.weather-cloudy .cloud-back::before{
  background:
    radial-gradient(ellipse 42% 15% at 8% 9%,rgba(202,207,215,.98) 0 64%,transparent 71%),
    radial-gradient(ellipse 42% 16% at 34% 10%,rgba(190,196,205,.98) 0 64%,transparent 72%),
    radial-gradient(ellipse 46% 17% at 64% 9%,rgba(180,187,198,.98) 0 65%,transparent 72%),
    radial-gradient(ellipse 40% 15% at 92% 10%,rgba(171,179,191,.96) 0 64%,transparent 71%),
    radial-gradient(ellipse 42% 13% at 28% 30%,rgba(173,181,190,.87) 0 58%,transparent 71%),
    radial-gradient(ellipse 46% 14% at 67% 31%,rgba(160,169,180,.86) 0 58%,transparent 72%),
    linear-gradient(180deg,rgba(150,158,169,.84) 0%,rgba(142,151,162,.62) 30%,rgba(126,136,146,.28) 56%,transparent 74%);
  filter:blur(18px);
}
.weather-cloudy .cloud-back::after{background:linear-gradient(180deg,rgba(80,90,102,.16) 0%,rgba(62,72,83,.12) 58%,transparent 80%)}

/* Rain/storm: darker and denser than cloudy; no sky visible */
.weather-rain .cloud-back::before,.weather-storm .cloud-back::before{
  background:
    radial-gradient(ellipse 46% 16% at 7% 8%,rgba(94,103,114,.99) 0 65%,transparent 72%),
    radial-gradient(ellipse 44% 17% at 35% 9%,rgba(84,94,106,.99) 0 66%,transparent 73%),
    radial-gradient(ellipse 48% 18% at 67% 8%,rgba(74,84,96,.99) 0 66%,transparent 73%),
    radial-gradient(ellipse 42% 16% at 96% 9%,rgba(66,76,88,.98) 0 66%,transparent 73%),
    radial-gradient(ellipse 44% 14% at 27% 31%,rgba(70,80,91,.93) 0 60%,transparent 72%),
    radial-gradient(ellipse 48% 15% at 70% 32%,rgba(62,72,83,.94) 0 60%,transparent 72%),
    linear-gradient(180deg,rgba(56,67,80,.92) 0%,rgba(48,59,71,.70) 34%,rgba(41,50,61,.32) 60%,transparent 79%);
  filter:blur(18px);
}
.weather-rain .cloud-back::after{background:linear-gradient(180deg,rgba(30,38,48,.26),rgba(30,37,45,.10) 72%,transparent 84%)}
.weather-storm .cloud-back::after{background:linear-gradient(180deg,rgba(12,17,24,.46),rgba(12,17,24,.22) 72%,transparent 86%)}

/* Fog: broad layers in front of the lower mountain */
.fog-layer{z-index:4;opacity:0}
.weather-fog .fog-layer{opacity:1}
.fog-layer::before,.fog-layer::after{content:"";position:absolute;inset:0}
.fog-layer::before{
  background:
    radial-gradient(ellipse 48% 17% at 12% 63%,rgba(235,239,241,.62) 0 40%,transparent 72%),
    radial-gradient(ellipse 54% 19% at 55% 59%,rgba(227,232,235,.59) 0 42%,transparent 73%),
    radial-gradient(ellipse 46% 17% at 91% 66%,rgba(220,225,230,.54) 0 39%,transparent 71%),
    linear-gradient(180deg,rgba(210,216,222,.24) 0%,rgba(222,227,231,.44) 55%,rgba(235,239,242,.58) 100%);
  filter:blur(22px);
}
.fog-layer::after{background:linear-gradient(180deg,rgba(245,247,248,.08),rgba(245,247,248,.22) 48%,rgba(245,247,248,.34));backdrop-filter:blur(5px) saturate(.72)}

/* Rain drops on glass: NO moving streaks */
.rain-back{display:none!important}
.wet-screen{z-index:7;opacity:0;background-position:center;background-repeat:no-repeat;background-size:cover;transition:opacity .3s ease}
.weather-rain .wet-screen{opacity:.60;background-image:url('assets/glass/glass_rain.png')}
.weather-storm .wet-screen{opacity:.82;background-image:url('assets/glass/glass_storm.png')}

/* Storm flash only */
.lightning-layer{z-index:6;opacity:0}
.weather-storm .lightning-layer{opacity:1}
.lightning-layer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.72) 0%,rgba(200,222,255,.22) 12%,transparent 34%);mix-blend-mode:screen;animation:stormFlash 8s infinite}
@keyframes stormFlash{0%,81%,84%,100%{opacity:0}82%,82.5%{opacity:.9}83%,83.5%{opacity:.35}}

/* Snow: fully overcast, low cloud on mountain, realistic flakes */
.snow-layer{z-index:5;opacity:0}
.weather-snow .snow-layer{opacity:1}
.weather-snow .cloud-back::before{
  background:
    radial-gradient(ellipse 46% 17% at 8% 7%,rgba(190,198,207,.99) 0 65%,transparent 73%),
    radial-gradient(ellipse 46% 17% at 36% 9%,rgba(180,188,198,.99) 0 65%,transparent 73%),
    radial-gradient(ellipse 48% 18% at 68% 8%,rgba(168,177,188,.99) 0 66%,transparent 73%),
    radial-gradient(ellipse 44% 17% at 96% 10%,rgba(158,168,180,.98) 0 65%,transparent 72%),
    radial-gradient(ellipse 48% 15% at 28% 31%,rgba(166,175,185,.92) 0 60%,transparent 72%),
    radial-gradient(ellipse 50% 16% at 73% 32%,rgba(154,164,176,.93) 0 60%,transparent 72%),
    linear-gradient(180deg,rgba(144,154,166,.92),rgba(141,151,163,.74) 36%,rgba(128,139,151,.34) 63%,transparent 81%);
  filter:blur(18px);
}
.snow-layer::before,.snow-layer::after{content:"";position:absolute;inset:-8%;background-repeat:repeat}
.snow-layer::before{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.96) 0 1.5px,transparent 2.1px),
    radial-gradient(circle,rgba(255,255,255,.84) 0 2.3px,transparent 3px),
    radial-gradient(circle,rgba(255,255,255,.76) 0 3px,transparent 3.8px);
  background-size:120px 120px,220px 220px,310px 310px;
  background-position:0 0,40px 80px,110px 35px;
  animation:snowFall 10s linear infinite;
}
.snow-layer::after{background-image:radial-gradient(circle,rgba(255,255,255,.60) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.50) 0 1.7px,transparent 2.3px);background-size:90px 90px,170px 170px;filter:blur(.3px);animation:snowFall 15s linear infinite reverse}
@keyframes snowFall{from{transform:translateY(-4%)}to{transform:translateY(10%)}}

/* Cold/frost halo around the monitor only during snow */
.cold-edge{z-index:8;opacity:0}
.weather-snow .cold-edge{opacity:1;box-shadow:inset 0 0 34px 16px rgba(255,255,255,.72),inset 0 0 78px 28px rgba(213,229,242,.40)}
.weather-snow .cold-edge::before,.weather-snow .cold-edge::after{content:"";position:absolute;inset:0;pointer-events:none}
.weather-snow .cold-edge::before{background:radial-gradient(ellipse at top left,rgba(255,255,255,.56),transparent 18%),radial-gradient(ellipse at top right,rgba(255,255,255,.52),transparent 18%),radial-gradient(ellipse at bottom left,rgba(255,255,255,.44),transparent 18%),radial-gradient(ellipse at bottom right,rgba(255,255,255,.44),transparent 18%);filter:blur(4px)}
.weather-snow .cold-edge::after{border:12px solid rgba(240,248,255,.18);box-shadow:inset 0 0 28px rgba(255,255,255,.28)}

/* Dashboard */
.dashboard{position:absolute;top:50%;left:50%;width:calc(var(--design-w)*1px);height:calc(var(--design-h)*1px);padding:18px;display:flex;flex-direction:column;gap:12px;transform-origin:center center;z-index:10}
.glass,.glass-soft{position:relative;border:1px solid var(--glass-border);border-radius:24px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.glass{background:linear-gradient(180deg,rgba(25,49,76,.18),rgba(16,31,48,.13));backdrop-filter:blur(12px) saturate(110%)}
.glass-soft{background:linear-gradient(180deg,rgba(30,65,105,.17),rgba(17,39,68,.12));backdrop-filter:blur(10px) saturate(108%)}
.topbar{height:58px;min-height:58px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between}
.brand-row{display:flex;align-items:center;gap:12px;min-width:0}.logo{width:38px;height:38px;object-fit:contain;border-radius:8px;flex:none}.brand-row strong{display:block;font-size:21px;line-height:1.05}.brand-row small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.status{font-size:11px;color:rgba(255,255,255,.92);white-space:nowrap}
.hero{height:180px;min-height:180px;padding:24px 28px;display:flex;align-items:flex-end;justify-content:space-between}.hero-main small{display:block;font-size:12px}.hero h1{margin:10px 0 6px;font-size:88px;line-height:.92;letter-spacing:-2px}.hero p{margin:0;font-size:25px;font-weight:600}.minmax{display:flex;gap:18px;margin-top:10px;font-size:13px;color:var(--muted)}.hero-side{display:grid;gap:10px;text-align:right;font-size:15px;align-self:center}.hero-side span{color:var(--muted)}.hero-side b{color:#fff}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:none}.cards article{min-height:82px;padding:14px 16px;display:flex;flex-direction:column;gap:5px}.cards b{font-size:12px}.cards strong{font-size:28px;line-height:1.02}.cards small{font-size:11px;color:var(--muted);line-height:1.25}
.wide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0;flex:1 1 auto}.widget-large{min-height:0;padding:12px;display:flex;flex-direction:column}.widget-title{font-size:12px;font-weight:700;margin-bottom:8px}.remote-box{min-height:0;flex:1 1 auto;border-radius:18px;overflow:hidden;background:rgba(0,0,0,.10)}
#webcamSmall,#wuForecast{contain:layout paint size;overflow:hidden;width:100%;height:100%}#webcamSmall *,#wuForecast *{box-sizing:border-box;max-width:100%}#webcamSmall img,#webcamSmall video,#webcamSmall iframe,#wuForecast iframe{display:block!important;width:100%!important;height:100%!important;border:0!important;object-fit:cover!important}#wuForecast img{max-width:100%!important;height:auto!important;display:block;margin:0 auto}.webcam-card{position:relative}.webcam-hit{position:absolute;inset:0;z-index:3}.remote-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:#fff}
.controls{min-height:64px;padding:10px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:none}.controls label{display:block;font-size:10px;color:rgba(255,255,255,.74);margin:0 0 4px 6px}.controls select{width:100%;height:38px;padding:7px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(8,27,50,.65);color:#fff;font-size:14px}
.footer{min-height:48px;padding:8px 12px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;flex:none}.footer-logo{width:32px;height:32px;object-fit:contain}.footer b{font-size:10px;line-height:1.25;display:block}.footer span{font-size:9px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.snow-layer::before,.snow-layer::after,.lightning-layer::before{animation:none!important}}

/* ===== V3: BASI NEVE DEDICATE PER LE 4 FASCE ORARIE =====
   Quando weather-snow è attivo, il paesaggio usa una fotografia già imbiancata.
   Il layer neve continua ad aggiungere cielo coperto, fiocchi e alone freddo. */
.time-sunrise.weather-snow .background{
  background-image:url('assets/backgrounds/snow/sunrise.png')!important;
}
.time-day.weather-snow .background{
  background-image:url('assets/backgrounds/snow/day.png')!important;
}
.time-sunset.weather-snow .background{
  background-image:url('assets/backgrounds/snow/sunset.png')!important;
}
.time-night.weather-snow .background{
  background-image:url('assets/backgrounds/snow/night.png')!important;
}