/* Weather center */
#wx {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  color:#fff; text-align:center;
  padding:2rem;
  -webkit-tap-highlight-color:transparent;
  pointer-events:none;
  position:relative;
}
#wx > * { pointer-events:auto; }
.wx-date {
  font-size:clamp(11px,2.6vw,13px); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:1.1rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
}
.wx-icon {
  font-size:clamp(54px,15vw,80px); line-height:1; margin:.3rem 0;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  width:clamp(70px,18vw,100px);
  display:flex; align-items:center; justify-content:center;
}
.wx-icon.pop { transform:scale(1.18); }
.wx-icon i { font-size: inherit; line-height: 1; display: block; }
.wx-temp {
  font-size:clamp(70px,19vw,104px); font-weight:200;
  letter-spacing:-3px; line-height:1;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
}
.wx-desc {
  font-size:clamp(14px,3.4vw,17px);
  color:rgba(255,255,255,.85); margin-top:.5rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
}
.wx-meta {
  font-size:clamp(11px,2.4vw,13px); font-weight:600;
  color:rgba(255,255,255,.60); margin-top:.3rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
}

/* ── Metric widgets ── */
.metric {
  position:absolute; z-index:5;
  color:rgba(255,255,255,.52);
  font-size:clamp(10px,2.1vw,12px);
  font-weight:400; letter-spacing:.035em;
  pointer-events:none; line-height:1.55;
  transition:opacity .4s;
  text-shadow:1px 1px 0 rgba(0,0,0,.42);
}
.metric .val {
  color:rgba(255,255,255,.88);
  font-weight:530; font-size:clamp(12px,2.7vw,15px);
}
.metric .lbl {
  font-size:clamp(9px,1.7vw,10px);
  color:rgba(255,255,255,.52);
  text-transform:uppercase; letter-spacing:.07em;
}
.m-wind  { top:clamp(12px,4.5vh,34px); left:clamp(8px,3.2vw,22px); }
.m-wind .arr {
  display:inline-block; font-size:clamp(15px,3.6vw,20px);
  color:rgba(255,255,255,.72);
  transition:transform .65s cubic-bezier(.34,1.56,.64,1);
  vertical-align:middle; margin-right:3px;
}
.m-atmos { top:clamp(12px,4.5vh,34px); right:clamp(8px,3.2vw,22px); text-align:right; }
.m-precip{ bottom:clamp(148px,23vh,205px); left:clamp(8px,3.2vw,22px); }
.m-extra { bottom:clamp(148px,23vh,205px); right:clamp(8px,3.2vw,22px); text-align:right; }
.m-thunder {
  left:50%;
  transform:translateX(-50%);
  opacity:0; text-align:center;
  font-size:clamp(12px,2.8vw,15px);
  transition:opacity .45s;
}
.m-thunder.show { opacity:.78; }
.m-uv { left:50%; transform:translateX(-50%); text-align:center; }
.m-thunder .wi { font-size:clamp(17px,4.5vw,22px); display:block; margin-bottom:2px; }
.m-thunder .lbl { color:rgba(255,255,255,.67); text-shadow:1px 1px 0 rgba(0,0,0,.54); }
.m-fire { display:inline-flex; align-items:center; font-size:9px; font-weight:800; letter-spacing:.9px; padding:2px 6px; border-radius:5px; cursor:pointer; vertical-align:middle; text-transform:uppercase; margin-top:3px; }
.fr-1{background:#8bc34a;box-shadow:0 0 4px #8bc34a;color:#2a4f09;}
.fr-2{background:#cddc39;box-shadow:0 0 4px #cddc39;color:#4a5000;}
.fr-3{background:#ffc107;box-shadow:0 0 4px #ffc107;color:#5c3a00;}
.fr-4{background:#ff9800;box-shadow:0 0 5px #ff9800;color:#5c2200;}
.fr-5{background:#f44336;box-shadow:0 0 6px #f44336;color:#fff;}
.fr-6{background:#b71c1c;box-shadow:0 0 7px #b71c1c;color:#fff;}
.uv-bars{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;margin:2px auto 4px;width:52px;height:auto;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.42));}
.uv-bar{height:3px;min-width:2px;border-radius:1px 2px 2px 1px;background:rgba(255,255,255,.12);transition:background .4s;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.42));}
#wx-sunrise i, #wx-sunset i { filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)); }
#wx-sunrise span, #wx-sunset span { text-shadow:1px 1px 0 rgba(0,0,0,.42); }
.wx-loading{display:none;flex-direction:column;align-items:center;gap:10px;pointer-events:none;}
.wx-spin{width:22px;height:22px;border:2px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.8);border-radius:50%;animation:wxspin .8s linear infinite;}
@keyframes wxspin{to{transform:rotate(360deg);}}
.wx-load-txt{font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.65);}