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

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  overflow: hidden;
}

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

.bg-layer {
  position: absolute;
  inset: 0;
  transition: background 1.5s ease;
  background: linear-gradient(180deg, #4a6fa5, #6b8db5);
}

.bg-clear-day   { background: linear-gradient(180deg, #1e88ff 0%, #5ec8ff 55%, #b9ecff 100%); }
.bg-clear-night { background: linear-gradient(180deg, #1a2a8c 0%, #3a4ec8 70%, #5a78e8 100%); }
.bg-cloudy      { background: linear-gradient(180deg, #7a8ea8 0%, #b6c8de 100%); }
.bg-rain        { background: linear-gradient(180deg, #2d5a8f 0%, #6aa4d6 100%); }
.bg-snow        { background: linear-gradient(180deg, #9ec3e8 0%, #e6f2ff 100%); }
.bg-storm       { background: linear-gradient(180deg, #2a1f5e 0%, #5a4a9e 100%); }
.bg-fog         { background: linear-gradient(180deg, #aab6c4 0%, #d8e2ec 100%); }

.anim-layer { position: absolute; inset: 0; pointer-events: none; }

/* Parallax depth layers. setScene() builds three of these inside #anim. */
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --speed-mult: 1;
  --scale: 1;
  --blur: 0px;
  --opacity: 1;
  --wind-mult: 1;
  opacity: var(--opacity);
  filter: blur(var(--blur));
}
.layer.back  { --speed-mult: 0.4; --scale: 0.6; --blur: 0.5px; --opacity: 0.5; --wind-mult: 0.5; }
.layer.mid   { --speed-mult: 1.0; --scale: 1.0; --blur: 0;     --opacity: 1.0; --wind-mult: 1.0; }
.layer.front { --speed-mult: 1.8; --scale: 1.6; --blur: 1.5px; --opacity: 0.9; --wind-mult: 1.8; }

/* Sun */
.sun {
  position: absolute;
  top: 10%; right: 12%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7c2 0%, #ffd84d 55%, #ffb700 100%);
  box-shadow: 0 0 80px 20px rgba(255, 200, 60, 0.5);
  animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Moon */
.moon {
  position: absolute;
  top: 12%; right: 14%;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fefce8 0%, #e8e4c4 60%, #c9c19a 100%);
  box-shadow: 0 0 60px 10px rgba(255, 255, 220, 0.3);
}

/* Stars */
.star {
  position: absolute;
  width: calc(2px * var(--scale, 1));
  height: calc(2px * var(--scale, 1));
  background: #fff;
  border-radius: 50%;
  animation: twinkle calc(3s / var(--speed-mult, 1)) ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Clouds */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  filter: blur(2px);
  animation: drift linear infinite;
  transform-origin: center;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud::before { width: 60%; height: 140%; top: -50%; left: 15%; }
.cloud::after  { width: 50%; height: 120%; top: -35%; right: 10%; }
.cloud-dark { background: rgba(80, 90, 105, 0.85); }
@keyframes drift {
  from { transform: translateX(-20vw) scale(var(--scale, 1)); }
  to   { transform: translateX(120vw) scale(var(--scale, 1)); }
}

/* Rain */
.raindrop {
  --tilt: 0deg;
  --drift: 0vw;
  position: absolute;
  width: calc(2px * var(--scale, 1));
  height: calc(14px * var(--scale, 1));
  background: linear-gradient(transparent, #aacbe6);
  animation: fall linear infinite;
  top: -20px;
  transform: rotate(calc(var(--tilt) * var(--wind-mult, 1)));
}
@keyframes fall {
  from { transform: translate(0, 0) rotate(calc(var(--tilt) * var(--wind-mult, 1))); }
  to   { transform: translate(calc(var(--drift) * var(--wind-mult, 1)), 110vh) rotate(calc(var(--tilt) * var(--wind-mult, 1))); }
}

/* Snow */
.snowflake {
  position: absolute;
  color: #fff;
  top: -20px;
  user-select: none;
  animation: snowfall linear infinite;
  font-size: 14px;
  transform-origin: top center;
}
@keyframes snowfall {
  to { transform: translateY(110vh) translateX(40px) rotate(360deg) scale(var(--scale, 1)); }
}

/* Lightning */
.lightning {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: flash 6s infinite;
}
@keyframes flash {
  0%, 92%, 100% { opacity: 0; }
  93%, 94% { opacity: 0.8; }
  95% { opacity: 0; }
  96%, 97% { opacity: 0.6; }
}

/* Fog */
.fog-bank {
  position: absolute;
  width: 200vw; height: calc(80px * var(--scale, 1));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: drift calc(25s / var(--speed-mult, 1)) linear infinite;
  filter: blur(8px);
}
.fog-bank.reverse { animation-name: drift-reverse; }
@keyframes drift-reverse {
  from { transform: translateX(120vw) scale(var(--scale, 1)); }
  to   { transform: translateX(-20vw) scale(var(--scale, 1)); }
}

/* App header */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.app-header-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.app-logo {
  font-size: 1.4rem;
  line-height: 1;
  transform: translateY(2px);
}
.app-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.app-tagline {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-left: auto;
}
@media (max-width: 480px) {
  .app-tagline { display: none; }
}

/* Dashboard */
.dashboard {
  max-width: 600px;
  margin: 0 auto;
  padding: 84px 24px 40px;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

header h1 {
  font-size: 1.8rem;
  font-weight: 500;
}
header p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-top: 4px;
  text-transform: capitalize;
}

.current {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
}
.temp-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.temp {
  font-size: 5rem;
  font-weight: 200;
  line-height: 1;
}
.unit-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.unit-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.2s ease;
}
.unit-btn.active {
  background: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
.unit-btn:hover { opacity: 1; }
.details {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.details span {
  display: block;
  font-size: 0.8rem;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.details strong {
  font-size: 1.1rem;
  font-weight: 500;
}

.driving {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
}
.driving h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-bottom: 16px;
  font-weight: 500;
}
.rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #888;
  box-shadow: 0 0 12px currentColor;
}
.dot.good     { background: #4ade80; color: #4ade80; }
.dot.caution  { background: #fbbf24; color: #fbbf24; }
.dot.hazard   { background: #ef4444; color: #ef4444; }
.driving ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.driving li {
  font-size: 0.95rem;
  opacity: 0.95;
  padding-left: 18px;
  position: relative;
}
.driving li::before {
  content: '•';
  position: absolute;
  left: 4px;
  opacity: 0.6;
}

.map-section {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
}
.map-section h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-bottom: 16px;
  font-weight: 500;
}
#map {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  text-shadow: none;
  background: #1a2533;
}
.leaflet-container { font-family: inherit; }
.radar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.85rem;
  opacity: 0.9;
}
.radar-controls button {
  padding: 6px 14px;
  font-size: 0.8rem;
}

.clothing {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
}
.clothing h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-bottom: 16px;
  font-weight: 500;
}
.clothing ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.clothing li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
}
.clothing li .icon {
  font-size: 1.4rem;
  width: 32px;
  text-align: center;
}

footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
button:hover { background: rgba(255, 255, 255, 0.3); }
button.copied {
  background: rgba(80, 200, 120, 0.5);
  border-color: rgba(80, 200, 120, 0.7);
}
button { transition: background 0.2s, border-color 0.2s; }
#status { font-size: 0.85rem; opacity: 0.8; }