:root {
  --bg: #0b0f17;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --line: rgba(255,255,255,.10);
  --panel: rgba(17,24,39,.72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "LinotypeUniversBasicLight", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% 10%, #111827, var(--bg));
  color: var(--text);
  min-height: 100vh;
  padding: 18px;
  transition: background 0.8s ease;
}

#matrixRain{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body[data-theme="matrix"] #matrixRain{
  opacity: 0.55;
}

#fluxCursorGlow{
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,0,199,0.22) 0%, rgba(0,255,255,0.18) 35%, transparent 70%);
  filter: blur(18px);
  transition: opacity 0.2s ease;
}

body[data-theme="neonflow"] #fluxCursorGlow{
  opacity: 0.7;
}

#app{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.mainRow{
  display: grid;
  grid-template-columns: minmax(560px, 2fr) minmax(300px, 1fr) minmax(300px, 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 1200px){
  .mainRow{
    grid-template-columns: minmax(460px, 1.4fr) minmax(280px, 1fr);
  }
}

@media (max-width: 900px){
  .mainRow{
    grid-template-columns: 1fr;
  }
}

.col{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.colWeather{
  min-width: 560px;
}

@media (max-width: 1200px){
  .colWeather{
    min-width: 460px;
  }
}

@media (max-width: 900px){
  .colWeather{
    min-width: 0;
  }
}

/* ✅ key: allow dropdown to overflow */
.shell{
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  overflow: visible;         /* ✅ was hidden */
  position: relative;        /* ✅ stacking context */
  backdrop-filter: blur(10px);
}

/* ✅ new: clip ONLY the content area, not the topbar dropdown */
.shellClip{
  overflow: hidden;
  border-radius: 0 0 22px 22px;
}

/* keep topbar above everything */
.topbar{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  overflow: visible;
  position: relative;
  z-index: 20;               /* ✅ above content */
}

.brand{
  font-weight: 900;
  letter-spacing: .3px;
  font-family: "LinotypeUniversBasicLight", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

body[data-theme="glass"] .sideTitle,
body[data-theme="glass"] .newsTitle{
  font-family: "WindsorProUltHv", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.cityGroup{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.cityInput{
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}

.btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.btn:hover{
  background: rgba(255,255,255,.07);
}

.chips{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 700px){
  .topbar{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cityGroup{
    width: 100%;
  }

  .chips{
    justify-content: flex-start;
  }
}

.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.chip.on{
  background: rgba(255,255,255,.10);
}

.content{
  padding: 14px;
  position: relative;
  z-index: 1;
}

.card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  padding: 14px;
}

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

.updated{
  margin-top: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

.row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bigTemp{
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1px;
}

.desc{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}

.stats{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 640px){
  .stats{ grid-template-columns: 1fr; }
}

.stat{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
}

.k{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.v{
  margin: 6px 0 0 0;
  font-weight: 900;
  font-size: 14px;
}

.days{
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.day{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.dayName{
  font-weight: 900;
}

.dayMeta{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

/* History menu */
.historyWrap{
  position: relative;
}
.historyMenu{
  position: absolute;
  top: 44px;
  right: 0;
  width: 230px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17,24,39,.92);
  backdrop-filter: blur(10px);
  padding: 8px;
  z-index: 150;
}
.histTitle{
  font-weight: 900;
  padding: 8px 10px;
  opacity: .9;
}
.histItem{
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 10px;
  cursor: pointer;
  font-weight: 800;
  margin-top: 6px;
}
.histItem:hover{
  background: rgba(255,255,255,.08);
}
.empty{
  padding: 8px 10px;
  color: var(--muted);
  font-weight: 800;
}

/* Theme dropdown (custom) */
.themeDropdown{ position: relative; }
.themeButton{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.themeMenu{
  position: absolute;
  right: 0;
  top: 46px;
  width: 220px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(17,24,39,.92);
  backdrop-filter: blur(10px);
  padding: 8px;
  z-index: 200;              /* ✅ above everything */
  display: none;
}
.themeDropdown.open .themeMenu{ display: block; }
.themeOption{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 10px;
  cursor: pointer;
  font-weight: 900;
  margin-top: 6px;
}
.themeOption:hover{ background: rgba(255,255,255,.08); }
.themeOption .tag{
  font-size: 11px;
  opacity: .75;
  font-weight: 900;
}
.themeSelectHidden{ display:none !important; }

/* Music widget */
.sideCard{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(10px);
}

.sideTitle{
  margin: 0 0 4px 0;
  font-weight: 900;
}

.sideHint{
  margin: 10px 0 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.playerRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 10px;
}
.playerRow input{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}
.playerRow button{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.playerRow button:hover{
  background: rgba(255,255,255,.07);
}

.playerBtns{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.playerBtns button{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.playerBtns button:hover{
  background: rgba(255,255,255,.07);
}

.waveCanvas{
  width: 100%;
  height: 84px;
  display: block;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.15);
}

/* Glass-only wavy line (canvas) */
.glassWaveCanvas{
  width: 100%;
  height: 84px;
  display: block;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.15);
}

.progressRow{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.volumeRow{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.volLabel, .progLabel{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.volVal, .timeVal{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.volSlider, .progSlider{
  width: 100%;
  accent-color: currentColor;

  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
  padding: 0;
  margin: 0;
}

.volSlider::-webkit-slider-runnable-track,
.progSlider::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--line);
}

.volSlider::-webkit-slider-thumb,
.progSlider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  border: 0;
  margin-top: -4px;
}

.volSlider::-moz-range-track,
.progSlider::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--line);
}

.volSlider::-moz-range-thumb,
.progSlider::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  border: 0;
}

.volSlider:focus,
.progSlider:focus{
  outline: none;
}

/* YouTube results scroll box */
.ytResultsScroll{
  margin-top: 10px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
}
.ytResultsScroll .btn{ width: 100%; }

/* Breaking News Widget */
.newsWidget {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(10px);
}

.newsTitle {
  margin: 0 0 4px 0;
  font-weight: 900;
}

.newsItem {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
}

.newsItem:last-child {
  border-bottom: none;
}

.newsTimestamp {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  display: block;
}

/* Radar + Commute widgets */
.radarWidget .radarNote{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  margin-top: 4px;
}

.radarFrame{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  position: relative;
  height: 220px;
}

.radarImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.radarEmpty{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  padding: 16px;
}

.radarOverlay{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: var(--text);
  font-weight: 800;
  font-size: 11px;
  border: 1px solid var(--line);
}

.radarAttribution{
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.radarRefresh{
  padding: 4px 8px;
  font-size: 12px;
}

.radarTitleRow{
  display: flex;
  align-items: center;
  gap: 8px;
}

.radarStatusBadge{
  font-size: 11px;
  font-weight: 800;
  color: #ffe08a;
  background: rgba(255,224,138,0.12);
  border: 1px solid rgba(255,224,138,0.35);
  border-radius: 999px;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Encom globe widget */
.encomGlobeWidget{
  min-height: 320px;
}

.encomGlobeTag{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7bf7ff;
  border: 1px solid rgba(64,214,232,0.55);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(56,240,255,0.12);
}

.encomGlobeFrame{
  margin-top: 10px;
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
}

.encomGlobeIframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.encomGlobeNote{
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.encomGlobeLink{
  color: var(--accent);
  text-decoration: none;
}

.encomGlobeLink:hover{
  text-decoration: underline;
}

/* Glass sprite inline in Weather */
.brandGlass .glassSpriteInline{
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 3px;
  vertical-align: -3px;
  background-image: url("opensource.png");
  background-size: 2200% 100%;
  animation: glassSpriteAnim 1s steps(21) infinite;
  image-rendering: pixelated;
  transform: rotate(-6deg);
}

@keyframes glassSpriteAnim{
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}
/* Inception spinning top widget */
.inceptionTopWidget{
  min-height: 240px;
}

.inceptionTopTag{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #dcc7ff;
  border: 1px solid rgba(199,169,255,0.55);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(199,169,255,0.12);
}

.inceptionTopStage{
  margin-top: 12px;
  height: 180px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.06), rgba(0,0,0,0.25));
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  overflow: hidden;
}

.inceptionTop3d{
  width: 100%;
  height: 100%;
}

.inceptionTopNote{
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.inceptionTopStatus{
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.commuteWidget .commuteHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.commuteBadge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
}

.commuteBadge.good{
  background: rgba(74, 222, 128, .14);
  color: #86efac;
  border-color: rgba(134, 239, 172, .3);
}

.commuteBadge.caution{
  background: rgba(251, 191, 36, .14);
  color: #fde68a;
  border-color: rgba(253, 230, 138, .35);
}

.commuteBadge.delay{
  background: rgba(248, 113, 113, .14);
  color: #fecaca;
  border-color: rgba(254, 202, 202, .35);
}

.commuteBadge.hazard{
  background: rgba(248, 113, 113, .22);
  color: #fee2e2;
  border-color: rgba(254, 202, 202, .55);
}

.commuteMeta{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.commuteBody{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.commuteGrid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.commuteStat{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 8px 10px;
}

.commuteK{
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.commuteV{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 900;
}

/* Sky Look widget */
.skyWidget .skyHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.skyBadge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
}

.skyBadge.great{
  background: rgba(59, 130, 246, .18);
  color: #bfdbfe;
  border-color: rgba(191, 219, 254, .45);
}

.skyBadge.good{
  background: rgba(14, 165, 233, .18);
  color: #bae6fd;
  border-color: rgba(186, 230, 253, .4);
}

.skyBadge.fair{
  background: rgba(245, 158, 11, .18);
  color: #fde68a;
  border-color: rgba(253, 230, 138, .45);
}

.skyBadge.poor{
  background: rgba(248, 113, 113, .18);
  color: #fecaca;
  border-color: rgba(254, 202, 202, .45);
}

.skyBadge.daylight{
  background: rgba(148, 163, 184, .18);
  color: #e2e8f0;
  border-color: rgba(226, 232, 240, .35);
}

.skyMeta{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.skyBody{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.skyRow{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.skyStat{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 8px 10px;
}

.skyK{
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.skyV{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 900;
}

/* Micro cinema widget */
.microCinema .microHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.microTag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  background: rgba(255,255,255,.04);
}

.microPoster{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.microPosterImg{
  width: 100%;
  display: block;
  object-fit: cover;
}

.microPosterTitle{
  margin-top: 10px;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .3px;
}

.microSynopsis{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.microAttribution{
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.4;
}

/* Motorsport widget */
.motorsportWidget .msHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.msControls{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msRefresh{
  padding: 6px 10px;
  font-size: 12px;
}

.msSection{
  margin-top: 10px;
}

.msTitle{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 6px;
}

.msTable{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  padding: 6px;
}

.msRow{
  display: grid;
  grid-template-columns: 28px 1fr 48px;
  gap: 8px;
  align-items: center;
  padding: 6px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
}

.msRow:last-child{
  border-bottom: none;
}

.msHead{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
}

.msPos{
  text-align: center;
}

.msPts{
  text-align: right;
}

.msEmpty{
  padding: 8px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.msAttribution{
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}




/* Weather-based dynamic backgrounds */
body[data-weather="sunny"] {
  background: radial-gradient(1200px 700px at 50% -5%, rgba(255,200,87,0.25), transparent 50%),
              radial-gradient(900px 600px at 20% 30%, rgba(255,180,120,0.15), transparent 60%),
              linear-gradient(180deg, #0a1420 0%, #0f1a28 50%, #0d1420 100%) !important;
}

body[data-weather="rainy"] {
  background: radial-gradient(1200px 700px at 40% -10%, rgba(100,150,200,0.20), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(120,160,220,0.15), transparent 60%),
              linear-gradient(180deg, #0a0f1a 0%, #0f1520 55%, #08101a 100%) !important;
}

body[data-weather="stormy"] {
  background: radial-gradient(1200px 700px at 30% -10%, rgba(80,100,150,0.25), transparent 55%),
              radial-gradient(900px 600px at 70% 30%, rgba(100,120,180,0.15), transparent 60%),
              linear-gradient(180deg, #050810 0%, #0b1018 55%, #060a12 100%) !important;
}

body[data-weather="snowy"] {
  background: radial-gradient(1200px 700px at 40% -5%, rgba(200,220,255,0.20), transparent 55%),
              radial-gradient(900px 600px at 60% 20%, rgba(180,210,250,0.15), transparent 60%),
              linear-gradient(180deg, #0f1620 0%, #111a28 55%, #0d1420 100%) !important;
}

body[data-weather="cloudy"] {
  background: radial-gradient(1200px 700px at 50% -10%, rgba(120,140,170,0.18), transparent 55%),
              radial-gradient(900px 600px at 20% 40%, rgba(100,130,170,0.12), transparent 65%),
              linear-gradient(180deg, #0a1018 0%, #0e1520 55%, #0a1015 100%) !important;
}

body[data-weather="foggy"] {
  background: radial-gradient(1200px 700px at 40% -10%, rgba(110,140,160,0.22), transparent 60%),
              radial-gradient(900px 600px at 70% 25%, rgba(120,150,180,0.16), transparent 65%),
              linear-gradient(180deg, #0a0d15 0%, #0f1418 55%, #08090f 100%) !important;
}

body[data-weather="neutral"] {
  background: radial-gradient(1200px 600px at 20% 10%, #111827, var(--bg)) !important;
}

/* ======= Weather Animations ======= */

/* Snowflake animation */
@keyframes snowfallAnim {
  0% {
    transform: translateY(-10vh) translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(var(--horizontal-move, 0)) translateY(50vh);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(var(--horizontal-move, 30px));
    opacity: 0;
  }
}

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  animation: snowfallAnim linear forwards;
}


/* Sunny pulse animation */
@keyframes sunnyPulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
}

body[data-weather="sunny"] {
  animation: sunnyPulse 8s ease-in-out infinite;
}

/* Rain canvas container */
#rainCanvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Fog drift animation */
@keyframes fogDrift {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
}


.fogBand {
  position: absolute;
  width: 120%;
  height: 20%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: fogDrift 20s ease-in-out infinite;
}
/* Album of the Day */
.albumOfDay{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.albumHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.albumTag{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
}

.albumRow{
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
}

.albumCover{
  width: 86px;
  height: 86px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.15);
}

.albumCoverImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.albumTitle{
  font-weight: 900;
  font-size: 15px;
}

.albumArtist{
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.albumNote{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* SoundCloud widget */
.soundcloudWidget{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soundcloudRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.soundcloudRow input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
  color: var(--text);
  padding: 8px 10px;
  font-weight: 700;
}

.soundcloudFrame{
  height: 170px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.15);
  overflow: hidden;
}

.soundcloudIframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.soundcloudEmpty{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}