*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scene / Sky ── */
#app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  transition: background 2s ease;
}

/* Sky states */
.sky.clear-day    { background: linear-gradient(180deg, #1e90ff 0%, #87ceeb 60%, #ffdea3 100%); }
.sky.clear-night  { background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3e 60%, #2d2d5e 100%); }
.sky.cloudy-day   { background: linear-gradient(180deg, #6e7f94 0%, #9fb3c8 60%, #bcc8d4 100%); }
.sky.cloudy-night { background: linear-gradient(180deg, #1a1f2e 0%, #2d3546 100%); }
.sky.rainy        { background: linear-gradient(180deg, #2c3e50 0%, #3d5068 60%, #4a6280 100%); }
.sky.snowy        { background: linear-gradient(180deg, #b0bec5 0%, #cfd8dc 60%, #eceff1 100%); }
.sky.stormy       { background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #3d3d3d 100%); }
.sky.foggy        { background: linear-gradient(180deg, #a0a8b0 0%, #c8d0d8 60%, #dde4e8 100%); }

/* ── Sun ── */
.sun {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7a1 0%, #ffd700 50%, #ffaa00 100%);
  box-shadow: 0 0 60px 20px rgba(255, 215, 0, 0.5), 0 0 120px 40px rgba(255, 165, 0, 0.2);
  animation: pulse-sun 4s ease-in-out infinite;
}

@keyframes pulse-sun {
  0%, 100% { box-shadow: 0 0 60px 20px rgba(255,215,0,0.5), 0 0 120px 40px rgba(255,165,0,0.2); }
  50%       { box-shadow: 0 0 80px 30px rgba(255,215,0,0.7), 0 0 160px 60px rgba(255,165,0,0.3); }
}

/* Sun rays */
.sun::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg, rgba(255,220,0,0.15) 10deg,
    transparent 20deg, rgba(255,220,0,0.15) 30deg,
    transparent 40deg, rgba(255,220,0,0.15) 50deg,
    transparent 60deg, rgba(255,220,0,0.15) 70deg,
    transparent 80deg, rgba(255,220,0,0.15) 90deg,
    transparent 100deg, rgba(255,220,0,0.15) 110deg,
    transparent 120deg, rgba(255,220,0,0.15) 130deg,
    transparent 140deg, rgba(255,220,0,0.15) 150deg,
    transparent 160deg, rgba(255,220,0,0.15) 170deg,
    transparent 180deg, rgba(255,220,0,0.15) 190deg,
    transparent 200deg, rgba(255,220,0,0.15) 210deg,
    transparent 220deg, rgba(255,220,0,0.15) 230deg,
    transparent 240deg, rgba(255,220,0,0.15) 250deg,
    transparent 260deg, rgba(255,220,0,0.15) 270deg,
    transparent 280deg, rgba(255,220,0,0.15) 290deg,
    transparent 300deg, rgba(255,220,0,0.15) 310deg,
    transparent 320deg, rgba(255,220,0,0.15) 330deg,
    transparent 340deg, rgba(255,220,0,0.15) 350deg,
    transparent 360deg
  );
  animation: spin-rays 20s linear infinite;
}

@keyframes spin-rays { to { transform: rotate(360deg); } }

/* ── Moon ── */
.moon {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0f0e0 0%, #d4d4b0 60%, #b0b090 100%);
  box-shadow: 0 0 30px 10px rgba(200,200,150,0.3), inset -8px -8px 0 0 rgba(0,0,0,0.1);
  animation: glow-moon 6s ease-in-out infinite;
}

@keyframes glow-moon {
  0%, 100% { box-shadow: 0 0 30px 10px rgba(200,200,150,0.3); }
  50%       { box-shadow: 0 0 50px 20px rgba(200,200,150,0.5); }
}

/* ── Clouds ── */
.clouds { position: absolute; inset: 0; pointer-events: none; }

.cloud {
  position: absolute;
  background: rgba(255,255,255,0.9);
  border-radius: 50px;
  animation: drift linear infinite;
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud-dark {
  background: rgba(100,110,120,0.85) !important;
}

@keyframes drift {
  from { transform: translateX(-150%); }
  to   { transform: translateX(110vw); }
}

/* ── Rain ── */
.particles { position: absolute; inset: 0; pointer-events: none; }

.raindrop {
  position: absolute;
  top: -10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(174,214,241,0.8));
  animation: fall linear infinite;
}

@keyframes fall {
  to { transform: translateY(110vh) translateX(30px); opacity: 0; }
}

/* ── Snow ── */
.snowflake {
  position: absolute;
  top: -10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  animation: snowfall linear infinite;
}

@keyframes snowfall {
  to { transform: translateY(110vh) translateX(var(--drift, 20px)); opacity: 0; }
}

/* ── Lightning ── */
.lightning {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  animation: strike 8s ease-in-out infinite;
}

@keyframes strike {
  0%,88%,92%,100% { background: rgba(255,255,255,0); }
  89%,91%          { background: rgba(255,255,255,0.35); }
}

/* ── Fog ── */
.fog-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(200,210,215,0) 0%,
    rgba(200,210,215,0.4) 40%,
    rgba(200,210,215,0.6) 60%,
    rgba(200,210,215,0.4) 100%);
  animation: fog-drift 15s ease-in-out infinite alternate;
}

@keyframes fog-drift {
  from { transform: translateX(-5%); opacity: 0.6; }
  to   { transform: translateX(5%);  opacity: 0.9; }
}

/* Stars */
.star {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: twinkle ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── Cards / Content ── */
#content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 480px;
}

#status-msg {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.card {
  width: 100%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 1.8rem 2rem;
  color: white;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* hidden state handled by .hidden below */

.location {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 0.4rem;
  letter-spacing: 0.05em;
}

.temp {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 0.3rem;
}

.condition {
  font-size: 1.3rem;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.details {
  display: flex;
  gap: 1.2rem;
  font-size: 0.9rem;
  opacity: 0.75;
  flex-wrap: wrap;
}

.details span::before {
  margin-right: 4px;
}

#humidity-display::before  { content: '💧'; }
#wind-display::before      { content: '💨'; }
#uv-display::before        { content: '☀️'; }

/* Map card */
#map {
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
}

/* Leaflet overrides to blend with glassmorphism */
.leaflet-tile-pane { filter: brightness(0.9) saturate(0.85); }

.leaflet-popup-content-wrapper {
  background: rgba(20, 20, 40, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.leaflet-popup-tip { background: rgba(20, 20, 40, 0.9); }

.leaflet-popup-content {
  margin: 10px 14px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
}

.leaflet-control-zoom a {
  background: rgba(20,20,40,0.85) !important;
  color: white !important;
  border-color: rgba(255,255,255,0.2) !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(40,40,70,0.95) !important;
}

.leaflet-control-attribution {
  background: rgba(0,0,0,0.4) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.65rem;
}

.leaflet-control-attribution a { color: rgba(255,255,255,0.6) !important; }

/* Hourly strip */
#hourly-card h2,
#tomorrow-card h2,
#clothing-card h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.9;
  letter-spacing: 0.03em;
}

.temp-chart {
  width: 100%;
  height: 64px;
  display: block;
  margin-bottom: 0.8rem;
  border-radius: 8px;
}

.hourly-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.hourly-strip::-webkit-scrollbar { height: 4px; }
.hourly-strip::-webkit-scrollbar-track { background: transparent; }
.hourly-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.hour-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 54px;
  padding: 0.6rem 0.4rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.hour-cell.now {
  background: rgba(255,255,255,0.2);
  outline: 1px solid rgba(255,255,255,0.35);
}

.hour-cell .hour-time {
  opacity: 0.7;
  font-size: 0.72rem;
  font-weight: 500;
}

.hour-cell .hour-icon { font-size: 1.3rem; line-height: 1; }

.hour-cell .hour-temp {
  font-weight: 600;
  font-size: 0.9rem;
}

.hour-cell .hour-precip {
  font-size: 0.7rem;
  opacity: 0.75;
  color: #aee4ff;
}

.hour-cell .hour-wind {
  font-size: 0.68rem;
  opacity: 0.65;
}

.tomorrow-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.tomorrow-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tomorrow-condition {
  font-size: 1.1rem;
  opacity: 0.9;
}

.tomorrow-temps {
  font-size: 1.6rem;
  font-weight: 600;
  white-space: nowrap;
}

.tomorrow-temps .temp-low {
  opacity: 0.55;
  font-weight: 400;
  font-size: 1.3rem;
}

/* Clothing card */

#clothing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#clothing-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  opacity: 0.9;
}

#clothing-list li .icon {
  font-size: 1.4rem;
  min-width: 2rem;
  text-align: center;
}

.hidden { display: none !important; }

/* Error state */
#status-msg.error { color: #ffb3b3; }

/* Temp unit toggle */
#unit-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 20px;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.2s;
}

#unit-toggle:hover { background: rgba(255,255,255,0.25); }

/* Last updated */
#last-updated {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  z-index: 20;
}