html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(59,130,246,0.22), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(168,85,247,0.16), transparent 22%),
    radial-gradient(circle at 14% 18%, rgba(34,211,238,0.12), transparent 18%),
    linear-gradient(180deg, #01030a 0%, #020617 45%, #030712 100%);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e5e7eb;
  overflow-x: hidden;
}

.body-funny {
  background:
    radial-gradient(circle at 8% 12%, rgba(255,190,11,0.32), transparent 18%),
    radial-gradient(circle at 82% 10%, rgba(255,0,110,0.28), transparent 20%),
    radial-gradient(circle at 48% 0%, rgba(58,134,255,0.32), transparent 28%),
    radial-gradient(circle at 22% 88%, rgba(6,214,160,0.24), transparent 18%),
    radial-gradient(circle at 92% 78%, rgba(131,56,236,0.22), transparent 18%),
    linear-gradient(135deg, #1a001f 0%, #031235 28%, #2a0044 58%, #001b2e 100%);
}

.screen-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(rgba(255,255,255,0.18) 0.7px, transparent 0.7px);
  background-size: 6px 6px;
  mix-blend-mode: soft-light;
  animation: noiseShift 8s linear infinite;
  z-index: 1;
}

.page-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  box-sizing: border-box;
}

.dashboard {
  width: 100%;
  max-width: 1240px;
  display: grid;
  gap: 20px;
}

.card,
.mini-card,
.forecast-panel {
  border-radius: 26px;
  border: 1px solid rgba(148,163,184,0.16);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}

.hero {
  min-height: 360px;
  padding: 26px;
  position: relative;
  box-sizing: border-box;
  background: var(--card-bg, linear-gradient(135deg, #0b1220, #0a1a2a));
  border: 1px solid var(--card-border, rgba(148,163,184,.18));
  transition: all 0.6s ease;
}

.hero-bg,
.overlay,
.fx,
.scanlines,
.grid-glow,
.funny-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg {
  background:
    radial-gradient(circle at 72% 22%, rgba(255,255,255,0.12), transparent 18%),
    radial-gradient(circle at 18% 78%, rgba(34,211,238,0.12), transparent 24%);
  animation: heroShift 10s ease-in-out infinite;
  z-index: 0;
}

.overlay {
  opacity: 0.28;
  background: var(--card-overlay, none);
  z-index: 1;
}

.scanlines {
  opacity: 0.18;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.08) 0px,
    rgba(255,255,255,0.08) 1px,
    transparent 2px,
    transparent 6px
  );
  mix-blend-mode: soft-light;
  animation: scanMove 6s linear infinite;
  z-index: 2;
}

.grid-glow {
  opacity: 0.22;
  background:
    linear-gradient(rgba(34,211,238,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.14) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 78%);
  z-index: 1;
}

.funny-aurora {
  opacity: 0.46;
  background:
    radial-gradient(circle at 8% 22%, rgba(255,190,11,0.60), transparent 20%),
    radial-gradient(circle at 28% 78%, rgba(6,214,160,0.42), transparent 20%),
    radial-gradient(circle at 78% 18%, rgba(255,0,110,0.52), transparent 20%),
    radial-gradient(circle at 58% 52%, rgba(58,134,255,0.45), transparent 24%),
    radial-gradient(circle at 90% 80%, rgba(131,56,236,0.35), transparent 18%);
  filter: blur(22px);
  animation: auroraMove 7s ease-in-out infinite;
  z-index: 1;
}

/* FUNNY MODE FLOATERS */
.chaos {
  position: absolute;
  z-index: 3;
  font-size: 34px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.18));
  pointer-events: none;
}

.chaos-1 { top: 18px; left: 46%; animation: chaosFloat1 9s ease-in-out infinite; }
.chaos-2 { top: 90px; left: 74%; animation: chaosFloat2 7s ease-in-out infinite; }
.chaos-3 { top: 150px; left: 56%; animation: chaosFloat3 6.5s ease-in-out infinite; }
.chaos-4 { top: 210px; left: 84%; animation: chaosFloat4 8s ease-in-out infinite; }
.chaos-5 { top: 42px; left: 88%; animation: chaosFloat5 5.5s ease-in-out infinite; }
.chaos-6 { top: 245px; left: 62%; animation: chaosFloat6 10s ease-in-out infinite; }

.hero-top,
.hero-bottom {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.hero-top {
  align-items: flex-start;
}

.hero-bottom {
  align-items: flex-end;
  margin-top: 28px;
}

.hero-left {
  min-width: 0;
  flex: 1 1 auto;
}

.eyebrow {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.9;
  color: #a5f3fc;
  text-shadow: 0 0 14px rgba(34,211,238,0.35);
}

.funny-mode .eyebrow,
.body-funny .forecast-title,
.body-funny .mini-title {
  color: #fff1a8;
  text-shadow: 0 0 16px rgba(255,190,11,0.35);
}

.location {
  margin-top: 8px;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.9px;
  color: #f8fafc;
  text-shadow: 0 0 18px rgba(255,255,255,0.08);
}

.desc {
  margin-top: 12px;
  font-size: 13px;
  color: #dbeafe;
  opacity: 0.95;
}

.msg {
  margin-top: 14px;
  max-width: 760px;
  font-size: 17px;
  color: #f8fafc;
  opacity: 1;
}

.funny-mode .msg {
  color: #fff4d6;
  text-shadow: 0 0 12px rgba(255,190,11,0.18);
}

.hero-symbol-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  flex: 0 0 auto;
}

.hero-ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  border: 2px solid rgba(255,255,255,0.16);
}

.ring-1 {
  animation: spinSlow 18s linear infinite;
}

.ring-2 {
  inset: 16px;
  border-color: rgba(34,211,238,0.22);
  animation: spinReverse 12s linear infinite;
}

.funny-mode .ring-1 { border-color: rgba(255,190,11,0.34); }
.funny-mode .ring-2 { border-color: rgba(255,0,110,0.30); }

.hero-symbol {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.28), rgba(255,255,255,0.04) 28%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  box-shadow:
    inset 0 0 24px rgba(255,255,255,0.08),
    0 0 40px rgba(34,211,238,0.18);
  backdrop-filter: blur(4px);
  animation: symbolPulse 3.5s ease-in-out infinite;
}

.funny-mode .hero-symbol {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.34), rgba(255,255,255,0.08) 28%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  box-shadow:
    inset 0 0 30px rgba(255,255,255,0.10),
    0 0 26px rgba(255,190,11,0.22),
    0 0 52px rgba(255,0,110,0.22),
    0 0 72px rgba(58,134,255,0.18);
}

.symbol-text {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
}

.temp-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.temp {
  font-size: 108px;
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: -4px;
  color: #f8fafc;
  text-shadow: 0 0 24px rgba(255,255,255,0.08);
}

.feels {
  font-size: 15px;
  opacity: 0.9;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 14px;
  min-width: 330px;
}

.stat {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.03);
}

.funny-mode .stat {
  background:
    linear-gradient(135deg, rgba(255,190,11,0.16), rgba(255,0,110,0.12), rgba(58,134,255,0.14));
  border-color: rgba(255,255,255,0.18);
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.74;
}

.stat-value {
  font-size: 18px;
  font-weight: 900;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.mini-card {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.96), rgba(2,6,23,0.96)),
    radial-gradient(circle at 82% 20%, rgba(34,211,238,0.08), transparent 28%);
  padding: 22px;
  position: relative;
}

.mini-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34,211,238,0.08), transparent 52%);
  pointer-events: none;
}

.body-funny .mini-funny-1 {
  background:
    linear-gradient(135deg, rgba(255,136,0,0.28), rgba(255,0,110,0.18)),
    linear-gradient(135deg, rgba(32,11,55,0.92), rgba(8,20,60,0.94));
}
.body-funny .mini-funny-2 {
  background:
    linear-gradient(135deg, rgba(58,134,255,0.28), rgba(131,56,236,0.18)),
    linear-gradient(135deg, rgba(32,11,55,0.92), rgba(8,20,60,0.94));
}
.body-funny .mini-funny-3 {
  background:
    linear-gradient(135deg, rgba(6,214,160,0.24), rgba(255,190,11,0.18)),
    linear-gradient(135deg, rgba(32,11,55,0.92), rgba(8,20,60,0.94));
}

.body-funny .mini-card::after {
  background: linear-gradient(90deg, rgba(255,190,11,0.10), transparent 52%);
}

.mini-title,
.mini-main,
.mini-sub {
  position: relative;
  z-index: 1;
}

.mini-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.78;
  color: #a5f3fc;
}

.mini-main {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.04;
}

.mini-sub {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
}

.forecast-panel {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.98), rgba(2,6,23,0.98)),
    radial-gradient(circle at 90% 0%, rgba(34,211,238,0.10), transparent 24%);
  padding: 22px;
  position: relative;
}

.forecast-panel-funny {
  background:
    linear-gradient(135deg, rgba(36,8,49,0.98), rgba(6,18,52,0.98)),
    radial-gradient(circle at 92% 12%, rgba(255,0,110,0.18), transparent 20%),
    radial-gradient(circle at 12% 0%, rgba(255,190,11,0.18), transparent 20%),
    radial-gradient(circle at 40% 100%, rgba(58,134,255,0.12), transparent 20%);
}

.forecast-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 48px
  );
  pointer-events: none;
}

.forecast-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.forecast-title {
  font-size: 20px;
  font-weight: 900;
  color: #a5f3fc;
}

.forecast-subtitle {
  font-size: 12px;
  opacity: 0.76;
}

.forecast-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.forecast-item {
  border-radius: 20px;
  padding: 18px 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(3px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.forecast-funny {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)),
    radial-gradient(circle at 25% 20%, rgba(255,190,11,0.18), transparent 26%),
    radial-gradient(circle at 80% 80%, rgba(255,0,110,0.14), transparent 26%),
    radial-gradient(circle at 50% 0%, rgba(58,134,255,0.10), transparent 20%);
}

.forecast-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28);
  border-color: rgba(34,211,238,0.28);
}

.body-funny .forecast-item:hover {
  border-color: rgba(255,190,11,0.34);
  box-shadow: 0 16px 30px rgba(0,0,0,0.28), 0 0 22px rgba(255,0,110,0.14);
}

.forecast-time {
  font-size: 12px;
  opacity: 0.8;
  position: relative;
  z-index: 2;
}

.forecast-symbol {
  margin-top: 12px;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  min-height: 38px;
  position: relative;
  z-index: 2;
}

.forecast-temp {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.forecast-fx {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.28;
  z-index: 1;
}

.forecast-fx-a {
  width: 58px;
  height: 58px;
  top: 6px;
  left: 10px;
  background: rgba(255,190,11,0.32);
  animation: blobA 4s ease-in-out infinite;
}

.forecast-fx-b {
  width: 46px;
  height: 46px;
  bottom: 8px;
  right: 8px;
  background: rgba(255,0,110,0.24);
  animation: blobB 3.6s ease-in-out infinite;
}

.anim-sun,
.anim-cloud,
.anim-fog,
.anim-rain,
.anim-storm,
.anim-snow,
.anim-generic {
  display: inline-block;
}

.anim-sun { animation: sunSpin 3.5s linear infinite; }
.anim-cloud { animation: cloudDrift 1.8s ease-in-out infinite; }
.anim-fog { animation: fogTextDrift 1.4s ease-in-out infinite; }
.anim-rain { animation: rainBounce 0.55s ease-in-out infinite; }
.anim-storm { animation: stormShake 0.45s ease-in-out infinite, stormFlash 1.2s linear infinite; }
.anim-snow { animation: snowTwinkle 1s ease-in-out infinite; }
.anim-generic { animation: genericPulse 1.3s ease-in-out infinite; }

.forecast-clear { box-shadow: inset 0 0 0 1px rgba(250,204,21,0.10); }
.forecast-cloud { box-shadow: inset 0 0 0 1px rgba(148,163,184,0.10); }
.forecast-fog { box-shadow: inset 0 0 0 1px rgba(226,232,240,0.10); }
.forecast-drizzle,
.forecast-rain { box-shadow: inset 0 0 0 1px rgba(56,189,248,0.12); }
.forecast-storm { box-shadow: inset 0 0 0 1px rgba(168,85,247,0.14); }
.forecast-snow { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }

.accent-blue {
  box-shadow:
    0 24px 80px rgba(0,0,0,0.52),
    0 0 54px rgba(59,130,246,0.24),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.accent-yellow {
  box-shadow:
    0 24px 80px rgba(0,0,0,0.52),
    0 0 54px rgba(245,158,11,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.accent-purple {
  box-shadow:
    0 24px 80px rgba(0,0,0,0.54),
    0 0 62px rgba(168,85,247,0.34),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.accent-cyan {
  box-shadow:
    0 24px 80px rgba(0,0,0,0.52),
    0 0 62px rgba(34,211,238,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.accent-soft {
  box-shadow:
    0 24px 80px rgba(0,0,0,0.52),
    0 0 40px rgba(226,232,240,0.14),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.accent-rainbow {
  box-shadow:
    0 24px 80px rgba(0,0,0,0.50),
    0 0 24px rgba(255,190,11,0.18),
    0 0 46px rgba(255,0,110,0.20),
    0 0 68px rgba(58,134,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.glow-blue { filter: drop-shadow(0 0 16px rgba(147,197,253,.46)); }
.glow-yellow { filter: drop-shadow(0 0 18px rgba(253,224,71,.52)); }
.glow-purple { filter: drop-shadow(0 0 18px rgba(196,181,253,.56)); }
.glow-cyan { filter: drop-shadow(0 0 18px rgba(34,211,238,.56)); }
.glow-soft { filter: drop-shadow(0 0 12px rgba(255,255,255,.26)); }
.glow-rainbow {
  filter:
    drop-shadow(0 0 10px rgba(255,190,11,.50))
    drop-shadow(0 0 18px rgba(255,0,110,.38))
    drop-shadow(0 0 24px rgba(58,134,255,.30));
}

/* KEYFRAMES */
@keyframes fogDrift {
  0% { transform: translateX(-18%) scale(1.08); opacity: 0.16; }
  50% { transform: translateX(12%) scale(1.16); opacity: 0.28; }
  100% { transform: translateX(-18%) scale(1.08); opacity: 0.16; }
}

@keyframes rainSlide {
  0% { transform: translateY(-10%); }
  100% { transform: translateY(10%); }
}

@keyframes lightningFlash {
  0%, 90%, 100% { opacity: 0; }
  92% { opacity: 0.82; }
  93% { opacity: 0.12; }
  94% { opacity: 0.58; }
  96% { opacity: 0; }
}

@keyframes scanMove {
  0% { transform: translateY(-8px); }
  100% { transform: translateY(8px); }
}

@keyframes noiseShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(1px,-1px); }
  50% { transform: translate(-1px,1px); }
  75% { transform: translate(1px,1px); }
  100% { transform: translate(0,0); }
}

@keyframes heroShift {
  0%, 100% { transform: scale(1) translateX(0); }
  50% { transform: scale(1.04) translateX(8px); }
}

@keyframes auroraMove {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(10px) scale(1.06); }
}

@keyframes symbolPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes sunSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

@keyframes fogTextDrift {
  0%, 100% { transform: translateX(0); opacity: 0.8; }
  50% { transform: translateX(5px); opacity: 1; }
}

@keyframes rainBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes stormShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes stormFlash {
  0%, 90%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255,255,255,0.15); }
  92% { opacity: 0.4; text-shadow: 0 0 16px rgba(255,255,255,0.35); }
  94% { opacity: 1; text-shadow: 0 0 22px rgba(255,255,255,0.45); }
}

@keyframes snowTwinkle {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.2); opacity: 1; }
}

@keyframes genericPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes blobA {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(6px,-4px) scale(1.12); }
}

@keyframes blobB {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-5px,5px) scale(1.14); }
}

@keyframes chaosFloat1 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(16px,-12px) rotate(10deg); }
}
@keyframes chaosFloat2 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(-12px,10px) rotate(-8deg); }
}
@keyframes chaosFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(10px,-8px) scale(1.18); }
}
@keyframes chaosFloat4 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(-18px,-10px) rotate(12deg); }
}
@keyframes chaosFloat5 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(8px,8px) scale(1.2); }
}
@keyframes chaosFloat6 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(14px,-14px) rotate(-10deg); }
}

.icon-float { animation: heroShift 4.5s ease-in-out infinite; }
.icon-pulse { animation: symbolPulse 2.6s ease-in-out infinite; }
.icon-spin-slow { animation: spinSlow 10s linear infinite; }
.icon-bounce { animation: rainBounce 1.2s ease-in-out infinite; }

.fx-fog,
.fx-rain,
.fx-lightning {
  opacity: 0;
}

.fog .fx-fog {
  opacity: 1;
  inset: -18%;
  background:
    radial-gradient(circle at 30% 50%, rgba(255,255,255,0.20), transparent 34%),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,0.14), transparent 34%);
  animation: fogDrift 12s ease-in-out infinite;
  z-index: 2;
}

.rain .fx-rain,
.drizzle .fx-rain {
  opacity: 1;
  background: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0.10) 0 2px,
    transparent 2px 12px
  );
  animation: rainSlide 1.4s linear infinite;
  z-index: 2;
}

.storm .fx-lightning {
  opacity: 1;
  background: linear-gradient(120deg, rgba(255,255,255,0.82), rgba(255,255,255,0.12));
  animation: lightningFlash 4.8s linear infinite;
  mix-blend-mode: screen;
  z-index: 3;
}

.clear .symbol-text,
.cloud .symbol-text,
.fog .symbol-text,
.rain .symbol-text,
.drizzle .symbol-text,
.storm .symbol-text,
.snow .symbol-text {
  text-shadow: 0 0 22px rgba(255,255,255,0.18);
}

@media (max-width: 980px) {
  .mini-grid,
  .forecast-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-top,
  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats {
    min-width: 0;
    width: 100%;
  }

  .temp {
    font-size: 80px;
  }

  .hero-symbol-wrap {
    width: 150px;
    height: 150px;
  }

  .symbol-text {
    font-size: 58px;
  }

  .chaos {
    font-size: 28px;
  }
}

@media (max-width: 640px) {
  .mini-grid,
  .forecast-strip {
    grid-template-columns: 1fr;
  }

  .location {
    font-size: 28px;
  }

  .temp {
    font-size: 64px;
  }

  .hero-symbol-wrap {
    width: 130px;
    height: 130px;
  }

  .symbol-text {
    font-size: 46px;
  }

  .chaos {
    font-size: 24px;
  }
}