* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #000; color: #fff; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  -webkit-user-select: none; user-select: none;
  --c1: #1f5f4a; --c2: #0d2f26; --accent: #4ade80;
}

/* Temperature bands (feels-like): freezing / cold / mild / warm / hot */
.t-freezing { --c1: #2b4fa8; --c2: #0e1f4d; --accent: #7cb4ff; }
.t-cold     { --c1: #1d6b7a; --c2: #0b2c36; --accent: #5fd4e6; }
.t-mild     { --c1: #2c7a55; --c2: #0f3022; --accent: #6ee7a0; }
.t-warm     { --c1: #a8741a; --c2: #4a2d08; --accent: #fbbf24; }
.t-hot      { --c1: #c2501a; --c2: #5a1d08; --accent: #fb923c; }

/* Backgrounds: ?bg=dark | tint | ambient */
#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: #0a0c0f; }
#bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0; }
.night #bg::after { opacity: .45; }
.bg-tint #bg, .bg-ambient #bg { background: linear-gradient(160deg, var(--c1), var(--c2)); }
.blob, .fx { display: none; position: absolute; }
.bg-ambient .blob { display: block; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 65%);
  -webkit-animation: drift 70s ease-in-out infinite alternate; animation: drift 70s ease-in-out infinite alternate; }
.blob.b1 { left: -120px; top: -200px; }
.blob.b2 { right: -160px; top: 40px; background: radial-gradient(circle, var(--accent), rgba(0,0,0,0) 65%) !important; opacity: .35;
  -webkit-animation-duration: 95s; animation-duration: 95s; -webkit-animation-direction: alternate-reverse; animation-direction: alternate-reverse; }
.blob.b3 { left: 150px; bottom: -330px; -webkit-animation-duration: 120s; animation-duration: 120s; }
@-webkit-keyframes drift { from { -webkit-transform: translate3d(0,0,0) scale(1); } to { -webkit-transform: translate3d(140px,90px,0) scale(1.25); } }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(140px,90px,0) scale(1.25); } }

/* Condition layers (ambient only), transform-only animation */
.bg-ambient.fx-rain .fx.rain, .bg-ambient.fx-snow .fx.snow { display: block; top: -60%; bottom: -60%; left: -30%; right: -30%; }
.fx.rain { background-image: radial-gradient(ellipse 1px 22px at 12px 30px, rgba(255,255,255,.4), rgba(255,255,255,0)),
                             radial-gradient(ellipse 1px 16px at 55px 85px, rgba(255,255,255,.28), rgba(255,255,255,0));
  background-size: 80px 120px, 80px 120px;
  -webkit-transform: rotate(10deg); transform: rotate(10deg);
  -webkit-animation: fall 2.2s linear infinite; animation: fall 2.2s linear infinite; }
@-webkit-keyframes fall { from { -webkit-transform: rotate(10deg) translateY(0); } to { -webkit-transform: rotate(10deg) translateY(120px); } }
@keyframes fall { from { transform: rotate(10deg) translateY(0); } to { transform: rotate(10deg) translateY(120px); } }
.fx.snow { background-image: radial-gradient(circle 3px at 20px 25px, rgba(255,255,255,.85), rgba(255,255,255,0)),
                             radial-gradient(circle 2px at 70px 80px, rgba(255,255,255,.6), rgba(255,255,255,0)),
                             radial-gradient(circle 2px at 45px 110px, rgba(255,255,255,.5), rgba(255,255,255,0));
  background-size: 90px 120px, 90px 120px, 90px 120px;
  -webkit-animation: fallslow 12s linear infinite; animation: fallslow 12s linear infinite; }
@-webkit-keyframes fallslow { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(120px); } }
@keyframes fallslow { from { transform: translateY(0); } to { transform: translateY(120px); } }
.bg-ambient.fx-cloud .fx.cloud { display: block; width: 560px; height: 220px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.2), rgba(255,255,255,0) 68%);
  -webkit-animation: cloud 100s linear infinite alternate; animation: cloud 100s linear infinite alternate; }
.fx.c1 { top: 10px; left: -200px; }
.fx.c2 { top: 150px; left: 100px; -webkit-animation-duration: 140s !important; animation-duration: 140s !important; }
@-webkit-keyframes cloud { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(420px); } }
@keyframes cloud { from { transform: translateX(0); } to { transform: translateX(420px); } }

main { position: relative; height: 100%; display: flex; flex-direction: column;
  padding: 10px calc(14px + env(safe-area-inset-right)) 6px calc(14px + env(safe-area-inset-left)); }
.stale main { opacity: .55; -webkit-filter: grayscale(1); filter: grayscale(1); }

/* Warnings */
.warns { display: flex; }
.warns:empty { display: none; }
.warn { flex: 1; display: flex; align-items: center; margin-bottom: 8px; padding: 6px 12px; border-radius: 16px; font-size: 22px; font-weight: 700; color: #000; }
.warn + .warn { margin-left: 8px; }
.warn .wi { font-size: 36px; margin-right: 10px; }
.warn .wt { flex: 1; line-height: 1.1; }
.warn .wh { font-weight: 600; margin-left: 8px; opacity: .8; }
.lvl-minor { background: #facc15; }
.lvl-moderate { background: #fb923c; }
.lvl-severe { background: #ef4444; color: #fff; -webkit-animation: pulse 3s ease-in-out infinite; animation: pulse 3s ease-in-out infinite; }
.lvl-extreme { background: #a21caf; color: #fff; -webkit-animation: pulse 2s ease-in-out infinite; animation: pulse 2s ease-in-out infinite; }
@-webkit-keyframes pulse { 50% { opacity: .7; } }
@keyframes pulse { 50% { opacity: .7; } }

/* Top: now + what to wear */
.top { flex: 1; min-height: 0; display: flex; align-items: center; }
.now { display: flex; align-items: center; width: 46%; }
.now .icon { font-size: 92px; line-height: 1; margin-right: 10px; }
.temp { font-size: 92px; font-weight: 600; line-height: 1; }
.feels { font-size: 20px; opacity: .75; margin-top: 2px; }
.badges { display: flex; flex-wrap: wrap; margin-top: 8px; font-size: 20px; font-weight: 600; }
.badge { background: rgba(255,255,255,.14); border-radius: 12px; padding: 3px 10px; margin: 0 6px 6px 0; }
.badge.rain { background: rgba(80,170,255,.45); }
.badge.wind { background: rgba(255,255,255,.28); }
.wear { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
.tile { width: 78px; height: 78px; margin: 5px; border-radius: 20px; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; font-size: 50px; }
.tile.wet { box-shadow: inset 0 0 0 3px #5bb8ff; }
.tile svg { width: 52px; height: 52px; }
.none { font-size: 60px; }
.has-warn .now .icon, .has-warn .temp { font-size: 68px; }
.has-warn .feels { font-size: 16px; }
.has-warn .badges { margin-top: 4px; font-size: 17px; }
.has-warn .tile { width: 62px; height: 62px; font-size: 40px; margin: 4px; border-radius: 16px; }
.has-warn .tile svg { width: 42px; height: 42px; }

/* Next hours: one continuous strip */
.hours { display: flex; background: rgba(0,0,0,.28); border-radius: 18px; padding: 4px 2px 6px; }
.hour { flex: 1; text-align: center; padding: 6px 0 4px; margin: 0 2px; border-top: 4px solid var(--accent); border-radius: 6px; }
.hour .t { font-size: 14px; opacity: .75; }
.hour .i { font-size: 30px; line-height: 1.25; }
.hour .d { font-size: 22px; font-weight: 600; }
.bar { width: 12px; height: 30px; margin: 4px auto 0; border-radius: 6px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; right: 0; bottom: 0; background: #5bb8ff; }
.hour .p { font-size: 12px; color: #9fd4ff; height: 14px; line-height: 14px; }
.hour.w-minor, .hour.w-moderate, .hour.w-severe, .hour.w-extreme { background: rgba(255,255,255,.1); }
.hour.w-minor { box-shadow: 0 0 0 2px #facc15; }
.hour.w-moderate { box-shadow: 0 0 0 2px #fb923c; }
.hour.w-severe { box-shadow: 0 0 0 2px #ef4444; }
.hour.w-extreme { box-shadow: 0 0 0 2px #d946ef; }

footer { text-align: right; font-size: 11px; opacity: .45; height: 14px; line-height: 14px; margin-top: 2px; }

.login { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.login[hidden] { display: none; }
.login .box { text-align: center; width: 80%; }
.login .l { font-size: 24px; margin-bottom: 14px; }
.login input { width: 100%; font-size: 22px; padding: 10px; border-radius: 10px; border: 0; text-align: center; }
.login button { margin-top: 12px; font-size: 20px; padding: 10px 24px; border-radius: 10px; border: 0; background: #6bf; color: #000; }
.login .err { color: #e96; margin-top: 10px; min-height: 1em; }

@media (prefers-reduced-motion: reduce) {
  .blob, .fx, .warn { -webkit-animation: none !important; animation: none !important; }
}