/* ============================================================
   ☀️ StormCast — Full Stylesheet
   Bold & colorful redesign with dramatic weather visuals
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  --wind:       1;
  --wind-rot:   0deg;
  --rain-angle: 110deg;
  --temp-k:     0;

  /* Brand palette */
  --orange-500: #ff6b35;
  --orange-400: #ff8c5a;
  --orange-300: #f7c59f;
  --orange-200: #ffe4cc;

  /* Glass surfaces */
  --glass-dark:   rgba(8, 8, 18, 0.58);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-inner:  rgba(255, 255, 255, 0.04);

  /* Text */
  --text-100: rgba(255, 255, 255, 0.96);
  --text-70:  rgba(255, 255, 255, 0.70);
  --text-50:  rgba(255, 255, 255, 0.50);
  --text-35:  rgba(255, 255, 255, 0.35);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--orange-500), var(--orange-300));
  --grad-btn:   linear-gradient(135deg, #ff6b35, #e05020);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #08080f;
  color: var(--text-100);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

/* ── App Shell ──────────────────────────────────────────────── */
.app {
  width: min(980px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Brand Header ───────────────────────────────────────────── */
.pageBrand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 4px;
}

.brandMark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #1a0800;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.35);
}

.brandText {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scene Container ────────────────────────────────────────── */
.scene {
  position: relative;
  width: 100%;
  height: min(680px, 90dvh);
  border-radius: 26px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: #0a0a1a;
  box-shadow:
    0 28px 100px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ── Sky Base — per mode/time ───────────────────────────────── */
.skyBase {
  position: absolute;
  inset: 0;
  transition: background 1.2s ease;
}

/* Clear day: deep blue → sky → horizon amber → sunset */
.scene[data-mode="clear"][data-time="day"] .skyBase {
  background: linear-gradient(175deg,
    #003d99 0%, #0066cc 18%, #0099ff 38%,
    #55aaff 52%, #ffcc44 72%, #ff8800 84%, #ff4400 100%);
}

/* Clear night: near-black deep space */
.scene[data-mode="clear"][data-time="night"] .skyBase {
  background: linear-gradient(175deg,
    #000308 0%, #020b28 25%, #08122e 50%,
    #150a30 72%, #0d0018 100%);
}

/* Cloudy day */
.scene[data-mode="cloudy"][data-time="day"] .skyBase {
  background: linear-gradient(175deg,
    #2a3a4a 0%, #38485a 30%, #485868 60%, #303e4e 100%);
}
.scene[data-mode="cloudy"][data-time="night"] .skyBase {
  background: linear-gradient(175deg,
    #0a0d12 0%, #0e1520 30%, #131c28 60%, #0a1018 100%);
}

/* Rain day */
.scene[data-mode="rain"][data-time="day"] .skyBase {
  background: linear-gradient(175deg,
    #182636 0%, #1e3044 30%, #263a50 60%, #182030 100%);
}
.scene[data-mode="rain"][data-time="night"] .skyBase {
  background: linear-gradient(175deg,
    #060a10 0%, #0a1018 30%, #0e1520 60%, #080c14 100%);
}

/* Storm night */
.scene[data-mode="storm"][data-time="day"] .skyBase {
  background: linear-gradient(175deg,
    #111820 0%, #181f28 30%, #1a2230 60%, #10181e 100%);
}
.scene[data-mode="storm"][data-time="night"] .skyBase {
  background: linear-gradient(175deg,
    #040406 0%, #08060e 25%, #100810 50%, #06040a 100%);
}

/* Snow day */
.scene[data-mode="snow"][data-time="day"] .skyBase {
  background: linear-gradient(175deg,
    #b8c8d8 0%, #c8d8e8 35%, #d8e8f4 65%, #ccd8e8 100%);
}
.scene[data-mode="snow"][data-time="night"] .skyBase {
  background: linear-gradient(175deg,
    #0c1018 0%, #101520 35%, #141a28 65%, #0c1218 100%);
}

/* Fog day */
.scene[data-mode="fog"][data-time="day"] .skyBase {
  background: linear-gradient(175deg,
    #788898 0%, #8a9aa8 35%, #9aaab6 65%, #8898a4 100%);
}
.scene[data-mode="fog"][data-time="night"] .skyBase {
  background: linear-gradient(175deg,
    #0e1218 0%, #141820 35%, #181e28 65%, #10141c 100%);
}

/* ── Stars ──────────────────────────────────────────────────── */
.stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at  8% 12%, rgba(255,255,255,0.95) 40%, transparent 60%),
    radial-gradient(1px   1px   at 20% 32%, rgba(255,255,255,0.85) 40%, transparent 60%),
    radial-gradient(2px   2px   at 35% 10%, rgba(255,240,200,0.90) 40%, transparent 60%),
    radial-gradient(1px   1px   at 50% 26%, rgba(255,255,255,0.80) 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 16%, rgba(200,220,255,0.90) 40%, transparent 60%),
    radial-gradient(1px   1px   at 78% 38%, rgba(255,255,255,0.75) 40%, transparent 60%),
    radial-gradient(2px   2px   at 91% 20%, rgba(255,255,255,0.85) 40%, transparent 60%),
    radial-gradient(1px   1px   at 14% 52%, rgba(255,255,255,0.70) 40%, transparent 60%),
    radial-gradient(1px   1px   at 43% 46%, rgba(200,220,255,0.80) 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 50%, rgba(255,255,255,0.85) 40%, transparent 60%),
    radial-gradient(1px   1px   at 88% 58%, rgba(255,220,180,0.75) 40%, transparent 60%),
    radial-gradient(1px   1px   at 56% 68%, rgba(255,255,255,0.65) 40%, transparent 60%);
  background-size: 440px 440px;
  transition: opacity 1.2s ease;
}
.scene[data-time="night"] .stars { opacity: 1; }

/* ── Sun / Moon Orb ─────────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  transition: width 1s ease, height 1s ease, background 1s ease, box-shadow 1s ease;
}

.scene[data-time="day"] .orb {
  width: 115px;
  height: 115px;
  background: radial-gradient(circle at 40% 35%,
    #fffde0 8%, #ffe066 35%, #ffaa00 65%, rgba(255, 100, 0, 0.18) 100%);
  box-shadow:
    0 0 60px 22px rgba(255, 190, 0, 0.55),
    0 0 130px 50px rgba(255, 130, 0, 0.28),
    0 0 220px 80px rgba(255, 80, 0, 0.12);
}

.scene[data-time="night"] .orb {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 38% 32%,
    #f4f8ff 8%, #c8dcf0 42%, rgba(140, 185, 228, 0.28) 80%, transparent 100%);
  box-shadow:
    0 0 32px 10px rgba(160, 205, 245, 0.38),
    0 0 80px 24px rgba(100, 155, 225, 0.16);
}

/* Hide orb in fog */
.scene[data-mode="fog"] .orb { opacity: 0.18; }

/* ── Cloud Layer ────────────────────────────────────────────── */
.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
}

.cloudLayer {
  position: absolute;
  top: 14%;
  left: -30%;
  width: 165%;
  height: 46%;
  background:
    radial-gradient(130px 85px  at 10% 72%, rgba(190,195,215,0.55) 25%, transparent 70%),
    radial-gradient(200px 120px at 28% 56%, rgba(175,180,205,0.50) 22%, transparent 72%),
    radial-gradient(190px 115px at 55% 66%, rgba(180,185,210,0.48) 22%, transparent 72%),
    radial-gradient(240px 150px at 82% 56%, rgba(185,190,215,0.52) 22%, transparent 72%);
  filter: blur(12px);
  animation: driftClouds 20s linear infinite;
  transform: translateZ(0);
}

.cloudLayer.back {
  top: 8%;
  opacity: 0.60;
  filter: blur(18px);
  animation-duration: 30s;
  animation-direction: reverse;
}

@keyframes driftClouds {
  from { transform: translateX(0); }
  to   { transform: translateX(14%); }
}

/* Storm clouds are darker */
.scene[data-mode="storm"] .cloudLayer {
  background:
    radial-gradient(130px 85px  at 10% 72%, rgba(60, 55, 80, 0.90) 25%, transparent 70%),
    radial-gradient(200px 120px at 28% 56%, rgba(50, 48, 70, 0.88) 22%, transparent 72%),
    radial-gradient(190px 115px at 55% 66%, rgba(55, 52, 75, 0.85) 22%, transparent 72%),
    radial-gradient(240px 150px at 82% 56%, rgba(60, 58, 80, 0.88) 22%, transparent 72%);
}

.scene[data-mode="clear"]  .clouds { opacity: 0.14; }
.scene[data-mode="cloudy"] .clouds { opacity: 0.88; }
.scene[data-mode="rain"]   .clouds { opacity: 0.92; }
.scene[data-mode="storm"]  .clouds { opacity: 1.00; }
.scene[data-mode="snow"]   .clouds { opacity: 0.72; }
.scene[data-mode="fog"]    .clouds { opacity: 0.48; }

/* ── Rain ───────────────────────────────────────────────────── */
.rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  overflow: hidden;
}

.rain i {
  position: absolute;
  inset: -40% -20%;
  background-image: repeating-linear-gradient(
    var(--rain-angle),
    transparent 0px, transparent 14px,
    rgba(170, 205, 255, 0.45) 14px, rgba(170, 205, 255, 0.45) 15.5px,
    transparent 15.5px, transparent 30px
  );
  animation: rainFall calc(0.55s / var(--wind)) linear infinite;
}

@keyframes rainFall {
  from { transform: translate(-5%, -15%); }
  to   { transform: translate(5%, 15%); }
}

.scene[data-mode="rain"]  .rain { opacity: 0.95; }
.scene[data-mode="storm"] .rain { opacity: 1.00; }

/* ── Snow ───────────────────────────────────────────────────── */
.snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.snow::before,
.snow::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2.5px 2.5px at  5% 10%, rgba(255,255,255,0.96) 50%, transparent 55%),
    radial-gradient(2px   2px   at 18% 32%, rgba(255,255,255,0.88) 50%, transparent 55%),
    radial-gradient(3px   3px   at 30% 18%, rgba(255,255,255,0.92) 50%, transparent 55%),
    radial-gradient(2px   2px   at 46% 44%, rgba(255,255,255,0.82) 50%, transparent 55%),
    radial-gradient(2.5px 2.5px at 60% 26%, rgba(255,255,255,0.90) 50%, transparent 55%),
    radial-gradient(2px   2px   at 74% 56%, rgba(255,255,255,0.84) 50%, transparent 55%),
    radial-gradient(3px   3px   at 87% 38%, rgba(255,255,255,0.94) 50%, transparent 55%),
    radial-gradient(2px   2px   at 95% 72%, rgba(255,255,255,0.80) 50%, transparent 55%);
  background-size: 320px 320px;
  animation: snowFall 8s linear infinite;
}

.snow::after {
  background-position: 160px 160px;
  animation-duration: 11s;
  animation-delay: -4s;
  opacity: 0.75;
}

@keyframes snowFall {
  from { transform: translateY(-12%) translateX(-3%); }
  to   { transform: translateY(12%) translateX(3%); }
}

.scene[data-mode="snow"] .snow { opacity: 1; }

/* ── Fog ────────────────────────────────────────────────────── */
.fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  background: linear-gradient(180deg,
    rgba(155, 165, 175, 0.00) 0%,
    rgba(155, 165, 175, 0.30) 35%,
    rgba(175, 183, 190, 0.52) 65%,
    rgba(195, 200, 208, 0.65) 100%);
  animation: fogShift 10s ease-in-out infinite alternate;
}

@keyframes fogShift {
  from { transform: scaleX(1)    translateX(0); }
  to   { transform: scaleX(1.03) translateX(1%); }
}

.scene[data-mode="fog"] .fog { opacity: 1; }

/* ── Lightning ──────────────────────────────────────────────── */
.lightning {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.72);
  mix-blend-mode: overlay;
}

.bolt {
  position: absolute;
  width: 105px;
  height: 205px;
  left: 66%;
  top: 14%;
  opacity: 0;
  filter: drop-shadow(0 0 22px rgba(200, 180, 255, 0.95));
}

.bolt path { fill: rgba(230, 215, 255, 0.96); }

.scene[data-mode="storm"] .lightning {
  animation: lightningFlash 4.5s ease-in-out infinite;
}
.scene[data-mode="storm"] .bolt {
  animation: boltShow 4.5s ease-in-out infinite;
}

@keyframes lightningFlash {
  0%, 83%, 94%, 100% { opacity: 0; }
  86%  { opacity: 0.65; }
  91%  { opacity: 0.28; }
}
@keyframes boltShow {
  0%, 82%, 95%, 100% { opacity: 0; }
  85%  { opacity: 0.95; }
  92%  { opacity: 0.45; }
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 40;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

/* Tabs */
.tabs {
  display: flex;
  gap: 3px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.tab {
  border: 0;
  cursor: pointer;
  padding: 9px 17px;
  border-radius: 13px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--text-70);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}

.tab:hover {
  color: var(--text-100);
  background: rgba(255, 255, 255, 0.08);
}

.tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,107,53,0.72), rgba(247,197,159,0.52));
  box-shadow: 0 1px 10px rgba(255, 107, 53, 0.32);
}

/* Unit toggle */
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unitToggle {
  display: flex;
  gap: 3px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.unitBtn {
  border: 0;
  cursor: pointer;
  padding: 9px 13px;
  border-radius: 13px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-70);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}

.unitBtn:hover {
  color: var(--text-100);
  background: rgba(255, 255, 255, 0.08);
}

.unitBtn.is-active {
  background: linear-gradient(135deg, rgba(255,107,53,0.72), rgba(247,197,159,0.52));
  color: #fff;
  box-shadow: 0 1px 10px rgba(255, 107, 53, 0.32);
}

/* Refresh icon button */
.iconBtn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease, transform 150ms ease;
}

.iconBtn:hover {
  background: rgba(255, 107, 53, 0.28);
  border-color: rgba(255, 107, 53, 0.45);
}

.iconBtn:active { transform: scale(0.90); }

/* ── HUD ────────────────────────────────────────────────────── */
.hud {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}

/* ── Main Weather Card ──────────────────────────────────────── */
.card {
  display: flex;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow:
    0 20px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  background: var(--glass-dark);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.accentStripe {
  width: 5px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #ff6b35, #f7c59f 50%, #ff6b35);
}

.cardInner {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 22px 22px 18px;
  flex: 1;
  min-width: 0;
}

/* Temperature block */
.tempBlock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 115px;
  flex-shrink: 0;
}

.temp {
  font-size: 88px;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -5px;
  background: linear-gradient(160deg, #ffffff 40%, rgba(255, 255, 255, 0.68) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.deg {
  font-size: 32px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: -1px;
  margin-top: 8px;
  line-height: 1;
  /* override gradient on .temp */
  -webkit-text-fill-color: rgba(255, 255, 255, 0.75);
}

.feelsLine {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-50);
}

/* Meta block */
.meta {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.city {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.80));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.desc {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-50);
  letter-spacing: 0.1px;
}

/* Stats 2×2 grid */
.statsGrid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.statItem {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--glass-inner);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 200ms ease, border-color 200ms ease;
}

.statItem:hover {
  background: rgba(255, 107, 53, 0.08);
  border-color: rgba(255, 107, 53, 0.18);
}

.statIcon {
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.92;
}

.statLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-35);
  line-height: 1;
  margin-bottom: 3px;
}

.statValue {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-100);
  line-height: 1.2;
}

/* ── Panel (forecast / hourly) ──────────────────────────────── */
.panel {
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-dark);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.40);
}

.panelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.panelTitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.panelSub {
  font-size: 12px;
  color: var(--text-35);
  font-weight: 600;
}

.panelHint {
  font-size: 11px;
  color: var(--text-35);
  padding: 8px 18px 12px;
  font-style: italic;
}

/* ── Forecast Grid ──────────────────────────────────────────── */
.forecastGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  background: rgba(255, 255, 255, 0.055);
}

@media (max-width: 500px) {
  .forecastGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fItem {
  padding: 14px 12px;
  background: var(--glass-dark);
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 200ms ease;
}

.fItem:last-child { border-right: 0; }
.fItem:hover { background: rgba(255, 107, 53, 0.09); }

.fDay {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-50);
}

.fIcon { font-size: 22px; margin: 4px 0 1px; }

.fDesc {
  font-size: 11px;
  color: var(--text-50);
  line-height: 1.35;
}

.fTemps {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  align-items: baseline;
}

.fHi {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-100);
}

.fLo {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-35);
}

/* ── Hourly Strip ───────────────────────────────────────────── */
.hourlyRow {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.04);
  scrollbar-width: none;
}
.hourlyRow::-webkit-scrollbar { display: none; }

.hItem {
  min-width: 110px;
  flex-shrink: 0;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 200ms ease;
}

.hItem:last-child { border-right: 0; }
.hItem:hover { background: rgba(255, 107, 53, 0.09); }

.hTime {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--orange-400);
}

.hIcon { font-size: 20px; margin: 3px 0 1px; }

.hTemp {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-100);
}

.hDesc {
  font-size: 11px;
  color: var(--text-50);
  line-height: 1.3;
}

.hWind {
  font-size: 11px;
  color: var(--text-35);
  margin-top: 1px;
}

/* ── Footer / Search ────────────────────────────────────────── */
.footer {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 30;
}

.footer input {
  flex: 1;
  height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.50);
  color: var(--text-100);
  outline: none;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: border-color 220ms ease, background 220ms ease;
}

.footer input::placeholder { color: var(--text-35); }

.footer input:focus {
  border-color: rgba(255, 107, 53, 0.60);
  background: rgba(0, 0, 0, 0.62);
}

.btn {
  height: 50px;
  padding: 0 22px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.2px;
  color: #fff;
  background: var(--grad-btn);
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.42);
  transition: background 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}

.btn:hover {
  background: linear-gradient(135deg, #ff8050, #ff6b35);
  box-shadow: 0 6px 28px rgba(255, 107, 53, 0.58);
  transform: translateY(-1px);
}

.btn:active { transform: scale(0.95); }

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 540px) {
  .scene { height: min(600px, 88dvh); }

  .cardInner { flex-direction: column; gap: 12px; }
  .tempBlock { flex-direction: row; align-items: baseline; gap: 10px; min-width: unset; }
  .temp { font-size: 72px; }
  .deg { margin-top: 0; }
  .feelsLine { display: none; }

  .statsGrid { grid-template-columns: 1fr 1fr; }

  .tabs .tab { padding: 8px 11px; font-size: 12px; }
  .unitBtn   { padding: 8px 10px; font-size: 12px; }

  .hud { bottom: 84px; }
  .footer { bottom: 14px; }
  .footer input { height: 46px; }
  .btn { height: 46px; padding: 0 16px; font-size: 13px; }
}