2.9

Scope weather effects
Scope objects
Scope selection changes

assets/css/header.css

@@ -252,7 +252,7 @@
   transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 .scope-play:hover {
-  background: rgba(200, 146, 42, 0.18);
+  background: rgba(16, 10, 3, 0.8);
   border-color: rgba(200, 146, 42, 0.85);
   color: #f5edd6;
 }
@@ -263,19 +263,19 @@
   color: #ffd98a;
 }
 .scope-play.is-playing:hover {
-  background: #2e1d0a;
+  background: #160d03;
   color: #ffe6b0;
 }
 .scope-play-icon { font-size: 9px; line-height: 1; }
-/* While playing, the simulated clock is the main readout — big, bright and
-   monospaced so the digits don't jitter as they tick. */
+/* While playing, the simulated clock is the readout — same size as the idle
+   label, but monospaced + tabular so the digits don't jitter as they tick. */
 .scope-play.is-playing .scope-play-label {
   font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 15px;
+  font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
   font-variant-numeric: tabular-nums;
-  min-width: 52px;
+  min-width: 40px;
   text-align: center;
   color: #ffd98a;
 }

assets/css/table.css

@@ -103,10 +103,28 @@
   border-left: none;
 }
 
-/* Each tab's background is an inline per-day weather gradient, so we darken
-   the whole tab with a filter on hover (!important to beat the inline filter). */
-.utci-day-tab:hover {
-  filter: brightness(0.93) !important;
+/* The selected-tab background is a different gradient (radial vs linear), and
+   CSS can't tween between gradients — so we paint the active gradient as an
+   overlay pseudo-element behind the tab content and fade its opacity on hover.
+   z-index:-1 keeps it above the tab's own background but below the labels. */
+.utci-day-tab::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--w-bg-active);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* On hover, a non-active tab fades in the selected gradient + filter so it
+   previews the selected shade (!important to beat the inline filter). */
+.utci-day-tab:hover:not(.active)::before {
+  opacity: 1;
+}
+.utci-day-tab:hover:not(.active) {
+  filter: saturate(1.1) brightness(1.04) !important;
 }
 
 .utci-day-tab.active {

assets/js/app.js

@@ -526,11 +526,15 @@ export function UTCIForecast() {
               precip=${scopeRow?.precip ?? 0}
               snow=${scopeRow?.snow ?? 0}
               visKm=${scopeRow?.visKm ?? null}
+              env=${utciEnv}
+              wind=${scopeRow?.va ?? 0}
+              gust=${scopeRow?.gust ?? 0}
+              wd=${scopeRow?.wd ?? null}
             />
             ${hourlyRows.length > 0 && html`
               <button type="button"
                       class=${`scope-play ${playing ? 'is-playing' : ''}`}
-                      onClick=${() => setPlaying(p => !p)}
+                      onClick=${() => { if (playing) { setPlaying(false); setSimMs(null); } else setPlaying(true); }}
                       title=${playing ? 'Stop time-lapse' : 'Play a 24-hour time-lapse on the scope'}>
                 <span class="scope-play-icon">${playing ? '◼' : '▶'}</span>
                 <span class="scope-play-label">${playing ? simClock : 'Day cycle'}</span>

assets/js/components/DayTabs.js

@@ -338,6 +338,7 @@ export function DayTabs({
                 : `${band.label} · day ${i + 1} of 14`}
               style=${{
                 background: isActive ? wBgActive : wBg,
+                '--w-bg-active': wBgActive,
                 color: wText,
                 borderTop: '1px solid #c9b08a',
                 borderRight: 'none',