:root{
  --sky1:#040818;--sky2:#0c1a40;--sky3:#1b2f5e;
  --hill1:#070d1c;--hill2:#0c1630;--hill3:#122044;
  --cloud:rgba(190,205,235,.16);
  --glow:rgba(120,150,255,.10);
  --card:rgba(10,18,42,.46);--line:rgba(255,255,255,.14);
  --ink:#fff;--soft:rgba(255,255,255,.72);
  --sway:1deg;--swaydur:4s;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.phase-dawn{--sky1:#27356b;--sky2:#b9688f;--sky3:#f7b56d;--hill1:#141a33;--hill2:#27294d;--hill3:#4a3a63;--cloud:rgba(255,214,200,.5);--glow:rgba(255,190,120,.35)}
.phase-day{--sky1:#1f6fc9;--sky2:#5aa7ea;--sky3:#bfe1fb;--hill1:#1d4a2c;--hill2:#2f6b3c;--hill3:#5b9a62;--cloud:rgba(255,255,255,.85);--glow:rgba(255,240,190,.4);--card:rgba(8,28,62,.42)}
.phase-dusk{--sky1:#1b2558;--sky2:#a84e7b;--sky3:#f08a4b;--hill1:#0f1328;--hill2:#231f42;--hill3:#45305a;--cloud:rgba(255,190,170,.42);--glow:rgba(255,150,90,.35)}
.phase-day.overcast{--sky1:#5b6c80;--sky2:#8898a8;--sky3:#c3ccd4;--hill1:#22392a;--hill2:#3a5641;--hill3:#62806a;--cloud:rgba(236,240,245,.8);--glow:rgba(255,255,255,.1);--card:rgba(14,26,44,.5)}
.snowy{--hill1:#c9d6e6;--hill2:#a9bad0;--hill3:#8da0ba}
.phase-night.snowy{--hill1:#5b6c8c;--hill2:#44547a;--hill3:#2f3d63}

*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--ink);background:var(--sky1);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------- sky ---------- */
#sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(var(--sky1),var(--sky2) 55%,var(--sky3))}
#glow{position:absolute;left:-10%;right:-10%;bottom:10%;height:60%;background:radial-gradient(ellipse at 50% 100%,var(--glow),transparent 65%)}
#fx{position:absolute;inset:0;width:100%;height:100%}
#orb{position:absolute;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;left:75%;top:20%;transition:left 2s,top 2s}
.phase-day #orb,.phase-dawn #orb,.phase-dusk #orb{background:radial-gradient(circle,#fff8d6 0,#ffd95a 55%,#ffb93a 100%);box-shadow:0 0 60px 20px rgba(255,214,102,.55),0 0 160px 70px rgba(255,200,90,.25);animation:pulse 6s ease-in-out infinite}
.phase-night #orb{width:64px;height:64px;background:radial-gradient(circle at 35% 35%,#fffdf0,#dfe6f5 60%,#b9c4dc);box-shadow:0 0 40px 10px rgba(210,225,255,.35);}
.phase-night #orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 68% 30%,rgba(120,135,170,.35) 0 9%,transparent 10%),radial-gradient(circle at 40% 66%,rgba(120,135,170,.3) 0 12%,transparent 13%),radial-gradient(circle at 70% 70%,rgba(120,135,170,.25) 0 6%,transparent 7%)}
.overcast #orb{opacity:.35}
@keyframes pulse{50%{transform:scale(1.06)}}

#clouds{position:absolute;inset:0}
.cloud{position:absolute;left:-340px;width:260px;height:74px;border-radius:74px;background:var(--cloud);filter:blur(5px);animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:120px;height:110px;left:38px;top:-52px}
.cloud::after{width:92px;height:84px;left:128px;top:-34px}
@keyframes drift{to{transform:translateX(calc(100vw + 700px))}}

#fog{position:absolute;left:-20%;right:-20%;bottom:0;height:55%;opacity:0;transition:opacity 2s;background:linear-gradient(transparent,rgba(220,228,240,.5) 60%,rgba(220,228,240,.75));animation:fogmove 30s ease-in-out infinite alternate}
.foggy #fog{opacity:1}
@keyframes fogmove{to{transform:translateX(6%)}}

#land{position:absolute;left:0;bottom:0;width:100%;height:42vh;min-height:230px}
.hill{transition:fill 2s}
.h1{fill:var(--hill1)}.h2{fill:var(--hill2)}.h3{fill:var(--hill3)}
.tree polygon,.tree rect{fill:var(--hill1)}
#trees-back .tree polygon,#trees-back .tree rect{fill:var(--hill2);filter:brightness(.8)}
.tree .sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway var(--swaydur) ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(calc(var(--sway) * -1))}to{transform:rotate(var(--sway))}}
#house .wall{fill:var(--hill1);filter:brightness(1.5)}
#house .roof,#house .mast{fill:var(--hill1);filter:brightness(1.15)}
#house .win{fill:rgba(255,255,255,.25)}
.phase-night #house .win,.phase-dusk #house .win,.phase-dawn #house .win{fill:#ffd36b;filter:drop-shadow(0 0 5px #ffb92e);animation:flicker 7s infinite}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:1}50%{opacity:.75}53%{opacity:1}}

/* ---------- layout ---------- */
.top,main,footer{max-width:1080px;margin:0 auto;padding:0 18px}
.top{display:flex;align-items:center;justify-content:space-between;padding-top:18px}
.brand{display:flex;align-items:center;gap:12px}
h1{font-size:1.15rem;margin:0;letter-spacing:.01em}
.brand p{margin:0;font-size:.85rem;color:var(--soft)}
h2{font-size:1rem;font-weight:600;margin:34px 0 12px;color:var(--soft);text-transform:uppercase;letter-spacing:.09em}
#unit{font:inherit;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(10px)}
#unit:hover{background:rgba(255,255,255,.18)}
#unit:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}
#notice{margin:16px 0 0;padding:10px 14px;border-radius:12px;background:rgba(190,70,20,.6);border:1px solid rgba(255,190,150,.5);font-size:.92rem}

.hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:34px 4px 26px;text-shadow:0 2px 14px rgba(0,0,20,.35)}
#hero-icon svg{width:132px;height:132px;display:block}
#hero-temp{font-size:clamp(4.6rem,17vw,8rem);font-weight:200;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#hero-cond{font-size:1.45rem;font-weight:600;margin-top:6px}
#hero-sub{color:var(--soft);margin-top:4px}
#hero-hilo{margin-left:auto;display:flex;gap:10px}
.pill{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 16px;text-align:center;backdrop-filter:blur(10px);text-shadow:none}
.pill b{display:block;font-size:1.5rem;font-weight:500;font-variant-numeric:tabular-nums}
.pill span{font-size:.78rem;color:var(--soft)}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px 18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:rise .7s both}
.grid .card:nth-child(2){animation-delay:.06s}.grid .card:nth-child(3){animation-delay:.12s}.grid .card:nth-child(4){animation-delay:.18s}.grid .card:nth-child(5){animation-delay:.24s}.grid .card:nth-child(6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.card h3{margin:0 0 8px;font-size:.78rem;font-weight:600;color:var(--soft);text-transform:uppercase;letter-spacing:.09em}
.big{font-size:2.1rem;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums}
.big small{font-size:1rem;color:var(--soft);font-weight:400}
.sub{color:var(--soft);font-size:.9rem;margin-top:6px}
.row{display:flex;align-items:center;gap:14px}

.compass{width:92px;height:92px;flex:none}
.compass .ring{fill:none;stroke:var(--line);stroke-width:2}
.compass text{fill:var(--soft);font-size:10px;text-anchor:middle;font-weight:600}
.compass .needle{transform-origin:50px 50px;transition:transform 1.6s cubic-bezier(.3,1.6,.5,1)}
.compass .wob{transform-origin:50px 50px;animation:wobble 3.2s ease-in-out infinite alternate}
@keyframes wobble{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

.bar{height:8px;border-radius:8px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#7fd0ff,#4f8dff);transition:width 1.4s ease-out}
.bar.uv i{background:linear-gradient(90deg,#7ddc7a,#ffd84d,#ff8a3d,#e0457b)}
.drops{position:absolute;right:14px;top:10px;width:46px;height:60px;opacity:.9}
.drops i{position:absolute;top:-10px;width:3px;height:12px;border-radius:3px;background:#8fd3ff;animation:fall 1.1s linear infinite}
.drops i:nth-child(1){left:4px}.drops i:nth-child(2){left:20px;animation-delay:.35s}.drops i:nth-child(3){left:36px;animation-delay:.7s}
.dry .drops{display:none}
@keyframes fall{to{transform:translateY(70px);opacity:0}}
.rec{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;font-size:.92rem;align-items:baseline}
.rec b{font-variant-numeric:tabular-nums;font-weight:600}
.rec span{color:var(--soft)}
.cold{color:#9fd6ff}.hot{color:#ffc28a}

.fc{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.fc .card{text-align:center;padding:12px 6px}
.fc svg{width:54px;height:54px}
.fc .d{font-weight:600}
.fc .t{font-variant-numeric:tabular-nums}
.fc .t span{color:var(--soft)}
.fc .p{font-size:.8rem;color:#a9dcff;min-height:1.1em}

.grid.cities{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
#tiles{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cities .card{padding:0;min-height:176px;display:flex;flex-direction:column;justify-content:space-between;border-color:rgba(255,255,255,.2)}
.city-sky{position:absolute;inset:0;z-index:0}
.c-day .city-sky{background:linear-gradient(#2f80d6,#8cc6f4)}
.c-night .city-sky{background:linear-gradient(#070d26,#1d2f63)}
.c-day.c-grey .city-sky{background:linear-gradient(#627488,#a3b1bf)}
.c-night.c-grey .city-sky{background:linear-gradient(#0d1322,#2c3546)}
.city-sky svg{position:absolute;right:6px;top:42px;width:74px;height:74px}
.city-top,.city-bot{position:relative;z-index:1;padding:14px 16px;text-shadow:0 1px 8px rgba(0,0,30,.45)}
.city-top b{font-size:1.08rem}
.city-top > span{display:block;font-size:.82rem;color:rgba(255,255,255,.82)}
.city-bot .big{font-size:2.5rem}
.city-bot .sub{color:rgba(255,255,255,.86);margin-top:2px}

footer{padding:40px 18px 32vh;color:var(--soft);font-size:.85rem;text-shadow:0 1px 6px rgba(0,0,20,.5)}
footer p{margin:4px 0}

/* ---------- weather icons ---------- */
.ic .spin{transform-origin:32px 32px;animation:spin 24s linear infinite}
.ic .spin.off{transform-origin:24px 24px}
.ic .bob{animation:bob 5s ease-in-out infinite alternate}
.ic .dropl{animation:icdrop 1.2s linear infinite}
.ic .dropl:nth-of-type(2){animation-delay:.4s}.ic .dropl:nth-of-type(3){animation-delay:.8s}
.ic .flake{animation:icdrop 2.6s linear infinite}
.ic .flake:nth-of-type(2){animation-delay:.9s}.ic .flake:nth-of-type(3){animation-delay:1.7s}
.ic .bolt{animation:flash 2.8s infinite}
.ic .mist{animation:bob 4s ease-in-out infinite alternate}
.ic .tw{animation:twinkle 2.4s ease-in-out infinite alternate}
.ic .tw:nth-of-type(2){animation-delay:1.1s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{from{transform:translateX(-2px)}to{transform:translateX(3px)}}
@keyframes icdrop{from{transform:translateY(-4px);opacity:0}30%{opacity:1}to{transform:translateY(10px);opacity:0}}
@keyframes flash{0%,86%,100%{opacity:0}88%,92%{opacity:1}90%{opacity:.3}}
@keyframes twinkle{from{opacity:.3}to{opacity:1}}

@media (max-width:640px){
  .hero{gap:10px;padding-top:22px}
  #hero-icon svg{width:96px;height:96px}
  #hero-hilo{margin-left:0;width:100%}
  .pill{flex:1}
  .fc{gap:6px}
  .fc svg{width:40px;height:40px}
  #tiles,.grid.cities{grid-template-columns:1fr 1fr}
  .cities .card:last-child:nth-child(odd){grid-column:1/-1}
  #tiles .card:first-child,#tiles .card:last-child{grid-column:1/-1}
  #orb{opacity:.5;zoom:.6}
  .compass{width:74px;height:74px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}