.weather-control{
  position:absolute;
  z-index:9;
  top:max(76px,calc(var(--safe-top) + 70px));
  right:14px;
  width:152px;
  color:#3c5038;
  font-family:"Noto Serif SC","Songti SC",Georgia,serif;
}
.weather-control>summary{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:7px 11px;
  border:1px solid rgba(105,91,53,.25);
  border-radius:2px 10px 3px 8px;
  background:#f1ead0 url("../../assets/runtime/ui/optimized/task-journal-pattern-today.webp") center/cover;
  box-shadow:0 7px 15px rgba(42,53,34,.18);
  cursor:pointer;
  list-style:none;
}
.weather-control>summary::-webkit-details-marker{display:none}
.weather-control>summary img{width:27px;height:18px;object-fit:cover;object-position:center;opacity:.72;mix-blend-mode:multiply}
.weather-control>summary img{display:none}
.weather-control>summary::before{content:"☁";color:#75806a;font-size:1rem;line-height:1}
.weather-control>summary span{min-width:0;display:grid;gap:1px}
.weather-control>summary strong{font-size:.73rem;letter-spacing:.05em}
.weather-control>summary small{max-width:94px;overflow:hidden;color:#75806a;font-size:.5rem;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.weather-menu{
  margin-top:6px;
  padding:8px;
  border:1px solid rgba(80,76,45,.28);
  border-radius:8px 3px 10px 4px;
  background:#eee5ca url("../../assets/runtime/ui/optimized/task-journal-pattern-today.webp") center/cover;
  box-shadow:0 14px 30px rgba(37,47,31,.24);
}
.weather-menu p{margin:0 4px 7px;color:#7d6d45;font-size:.56rem;letter-spacing:.08em}
.weather-menu button{
  width:100%;
  min-height:35px;
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  padding:6px 8px;
  border:0;
  border-bottom:1px solid rgba(91,88,56,.14);
  color:#40513a;
  background:transparent;
  text-align:left;
  font-family:inherit;
}
.weather-menu button:last-child{border-bottom:0}
.weather-menu button.is-active{background:rgba(111,132,91,.13)}
.weather-menu button span{font-size:.68rem;font-weight:800}
.weather-menu button small{font-size:.55rem;color:#7a806c}
.weather-menu [data-weather-random]{margin-top:4px;text-align:center;color:#6b5b34;border:1px dashed rgba(112,94,51,.32)}

.weather-atmosphere{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  transition:background-color 1s ease,opacity 1s ease;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0 23%,rgba(0,0,0,.18) 38%,transparent 48% 67%,rgba(0,0,0,.2) 79%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0 23%,rgba(0,0,0,.18) 38%,transparent 48% 67%,rgba(0,0,0,.2) 79%,#000 100%);
}

.town-view .canvas-shell{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:background-image .8s ease,filter .8s ease;
}

.town-view[data-weather="after-rain"] .canvas-shell{
  background-image:
    linear-gradient(180deg,rgba(219,242,250,.08),rgba(194,225,181,.04)),
    url("../../assets/runtime/weather-scenes/after-rain-storybook-v1.webp");
}
.town-view[data-weather="misty-autumn"] .canvas-shell{
  background-image:
    linear-gradient(180deg,rgba(226,214,188,.13),rgba(104,91,69,.08)),
    url("../../assets/runtime/weather-scenes/misty-autumn-storybook-v1.webp");
}
.town-view[data-weather="firefly-night"] .canvas-shell{
  background-image:
    linear-gradient(180deg,rgba(7,24,53,.12),rgba(9,41,57,.08)),
    url("../../assets/runtime/weather-scenes/firefly-night-storybook-v1.webp");
}
.weather-cloud,.weather-particles{display:none!important}
.weather-atmosphere::before{
  content:"";
  position:absolute;
  top:-4%;
  left:-22%;
  width:145%;
  height:38%;
  opacity:.22;
  background:
    radial-gradient(ellipse at 12% 42%,rgba(255,255,245,.84) 0 7%,transparent 8%),
    radial-gradient(ellipse at 19% 31%,rgba(255,255,248,.78) 0 9%,transparent 10%),
    radial-gradient(ellipse at 29% 48%,rgba(242,249,244,.74) 0 11%,transparent 12%),
    radial-gradient(ellipse at 67% 30%,rgba(255,255,247,.72) 0 8%,transparent 9%),
    radial-gradient(ellipse at 78% 43%,rgba(241,248,244,.72) 0 12%,transparent 13%);
  filter:blur(4px);
  transform:translate3d(0,0,0);
  animation:weather-cloud-drift 44s linear infinite alternate;
}
.weather-atmosphere::after{
  content:"";
  position:absolute;
  inset:-8%;
  opacity:0;
  background:
    radial-gradient(ellipse at 12% 18%,rgba(213,175,78,.8) 0 2px,transparent 3px),
    radial-gradient(ellipse at 26% 58%,rgba(238,220,137,.8) 0 2px,transparent 3px),
    radial-gradient(ellipse at 48% 28%,rgba(166,183,113,.7) 0 2px,transparent 3px),
    radial-gradient(ellipse at 66% 72%,rgba(224,184,87,.75) 0 2px,transparent 3px),
    radial-gradient(ellipse at 84% 36%,rgba(244,226,151,.78) 0 2px,transparent 3px);
  background-size:160px 190px,210px 230px,180px 210px,240px 200px,190px 250px;
  animation:weather-particle-drift 13s ease-in-out infinite alternate;
}
.town-view[data-weather="after-rain"] .map-canvas{filter:saturate(1.13) brightness(1.055) contrast(1.015) drop-shadow(0 12px 18px rgba(40,78,58,.12))}
.town-view[data-weather="after-rain"] .weather-atmosphere{
  background-color:rgba(211,235,222,.06);
  background-image:url("../../assets/runtime/weather-scenes/after-rain-storybook-v1.webp");
}
.town-view[data-weather="after-rain"] .weather-atmosphere::before{opacity:.24}
.town-view[data-weather="after-rain"] .weather-atmosphere::after{opacity:.13}

.town-view[data-weather="misty-autumn"] .map-canvas{filter:saturate(.72) sepia(.24) brightness(.88) contrast(.92) drop-shadow(0 15px 20px rgba(72,56,39,.18))}
.town-view[data-weather="misty-autumn"] .weather-atmosphere{
  background-color:rgba(102,92,68,.12);
  background-image:url("../../assets/runtime/weather-scenes/misty-autumn-storybook-v1.webp");
}
.town-view[data-weather="misty-autumn"] .weather-atmosphere::before{top:5%;height:62%;opacity:.48;filter:blur(9px) sepia(.22)}
.town-view[data-weather="misty-autumn"] .weather-atmosphere::after{opacity:.2}

.town-view[data-weather="firefly-night"] .map-canvas{filter:brightness(.64) saturate(.98) contrast(1.12) hue-rotate(8deg) drop-shadow(0 0 22px rgba(75,151,160,.18))}
.town-view[data-weather="firefly-night"] .weather-atmosphere{
  background-color:rgba(5,28,49,.2);
  background-image:url("../../assets/runtime/weather-scenes/firefly-night-storybook-v1.webp");
}
.town-view[data-weather="firefly-night"] .weather-atmosphere::before{opacity:.12;filter:blur(7px) brightness(.6)}
.town-view[data-weather="firefly-night"] .weather-atmosphere::after{opacity:.62;filter:saturate(2) brightness(1.35);mix-blend-mode:screen}
.town-view[data-weather="firefly-night"] .map-hotspot,
.town-view[data-weather="firefly-night"] .hud-card,
.town-view[data-weather="firefly-night"] .task-preview{filter:brightness(1.08)}
.town-view[data-weather="firefly-night"] .map-hotspot{box-shadow:0 0 18px rgba(255,220,126,.18)}
.town-view[data-weather="misty-autumn"] .map-hotspot{filter:sepia(.12) saturate(.86)}

@keyframes weather-cloud-drift{from{transform:translateX(-3%)}to{transform:translateX(16%)}}
@keyframes weather-particle-drift{from{transform:translate3d(-1%,-1%,0)}to{transform:translate3d(2%,3%,0)}}
@media(prefers-reduced-motion:reduce){.weather-atmosphere::before,.weather-atmosphere::after{animation:none!important}}