feat: add 10 UX improvements from interface review

- Stale data banner after 3 consecutive fetch failures, auto-clears on recovery
- Date navigation with left/right arrows (Yesterday/Today/Tomorrow labels),
  fetches from NHL API for non-today dates, disables auto-refresh on history
- Empty state message when no games are scheduled
- Series detail page auto-refreshes every 30s when a game is live
- Notification permission deferred until a playoff OT actually occurs
- Scroll position saved/restored when navigating to/from series detail
- Team records rendered with better contrast and tabular nums
- Active bracket round highlighted with gold heading + underline,
  completed rounds dimmed more aggressively, mobile accordion auto-opens
  current round
- Browser tab title shows live game count (e.g. "NHL Scoreboard (3 Live)")
- Service worker update shows a dismissable toast instead of force-reloading

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/static/script.js

@@ -1,13 +1,65 @@
+let failCount = 0;
+const STALE_THRESHOLD = 3;
+
+// ── Date Navigation ──────────────────────────────────
+
+function localDateStr() {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+let viewingDate = localDateStr();
+
+function isToday() {
+    return viewingDate === localDateStr();
+}
+
+function shiftDate(offset) {
+    const [y, m, d] = viewingDate.split('-').map(Number);
+    const dt = new Date(y, m - 1, d + offset);
+    viewingDate = `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`;
+    updateDateLabel();
+    startAutoRefresh();
+}
+
+function formatDateLabel(dateStr) {
+    if (dateStr === localDateStr()) return 'Today';
+    const [y, m, d] = dateStr.split('-').map(Number);
+    const dt = new Date(y, m - 1, d);
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    if (dt.toDateString() === yesterday.toDateString()) return 'Yesterday';
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    if (dt.toDateString() === tomorrow.toDateString()) return 'Tomorrow';
+    return dt.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
+}
+
+function updateDateLabel() {
+    const label = document.getElementById('date-label');
+    if (label) label.textContent = formatDateLabel(viewingDate);
+}
+
 async function fetchScoreboardData() {
+    const url = isToday() ? '/scoreboard' : `/scoreboard?date=${viewingDate}`;
     try {
-        const res = await fetch('/scoreboard');
+        const res = await fetch(url);
         if (!res.ok) throw new Error(res.status);
+        failCount = 0;
+        setStale(false);
         updateScoreboard(await res.json());
     } catch (e) {
         console.error('Failed to fetch scoreboard data:', e);
+        failCount++;
+        if (failCount >= STALE_THRESHOLD) setStale(true);
     }
 }
 
+function setStale(stale) {
+    document.getElementById('stale-banner').classList.toggle('hidden', !stale);
+    document.querySelector('main').classList.toggle('stale', stale);
+}
+
 function updateScoreboard(data) {
     applyMeta(data.meta);
 
@@ -34,6 +86,14 @@ function updateScoreboard(data) {
         if (hasGames) restoreClocks(grid, clockSnapshot);
     }
 
+    const anyGames = sections.some(s => s.games && s.games.length > 0);
+    document.getElementById('empty-state').classList.toggle('hidden', anyGames);
+
+    restoreScroll();
+
+    const liveCount = (data.live_games || []).length + (data.intermission_games || []).length + (data.pinned_games || []).filter(g => g['Game State'] === 'LIVE').length;
+    document.title = liveCount ? `NHL Scoreboard (${liveCount} Live)` : 'NHL Scoreboard';
+
     updateGauges();
     maybeNotifyOT(data);
 }
@@ -372,10 +432,17 @@ function persistSeenOT(set) {
 
 function maybeNotifyOT(data) {
     if (!('Notification' in window)) return;
+
+    const candidates = [...(data.pinned_games || []), ...(data.live_games || [])];
+    const hasPlayoffOT = candidates.some(g => g['Playoff OT']);
+
+    if (hasPlayoffOT && Notification.permission === 'default') {
+        Notification.requestPermission().catch(() => {});
+        return;
+    }
     if (Notification.permission !== 'granted') return;
 
     const seen = seenOTKeys();
-    const candidates = [...(data.pinned_games || []), ...(data.live_games || [])];
     let changed = false;
     for (const g of candidates) {
         if (!g['Playoff OT']) continue;
@@ -396,32 +463,68 @@ function maybeNotifyOT(data) {
     if (changed) persistSeenOT(seen);
 }
 
-function requestNotificationPermission() {
-    if (!('Notification' in window)) return;
-    if (Notification.permission !== 'default') return;
-    Notification.requestPermission().catch(() => {});
+// ── Update Toast ─────────────────────────────────────
+
+function showUpdateToast() {
+    if (document.getElementById('update-toast')) return;
+    const toast = document.createElement('div');
+    toast.id = 'update-toast';
+    toast.className = 'update-toast';
+    toast.innerHTML = 'New version available <button class="update-toast-btn">Reload</button>';
+    toast.querySelector('button').addEventListener('click', () => location.reload());
+    document.body.appendChild(toast);
+}
+
+// ── Scroll Restoration ───────────────────────────────
+
+const SCROLL_KEY = 'nhl_scroll_y';
+let scrollRestored = false;
+
+function saveScroll() {
+    sessionStorage.setItem(SCROLL_KEY, String(window.scrollY));
+}
+
+function restoreScroll() {
+    if (scrollRestored) return;
+    scrollRestored = true;
+    const y = parseInt(sessionStorage.getItem(SCROLL_KEY) || '0', 10);
+    if (y > 0) {
+        requestAnimationFrame(() => window.scrollTo(0, y));
+    }
+    sessionStorage.removeItem(SCROLL_KEY);
 }
 
 // ── Init ─────────────────────────────────────────────
 
-function autoRefresh() {
+let refreshTimer = null;
+
+function startAutoRefresh() {
+    stopAutoRefresh();
     fetchScoreboardData();
-    setTimeout(autoRefresh, 5000);
+    if (isToday()) {
+        refreshTimer = setTimeout(startAutoRefresh, 5000);
+    }
+}
+
+function stopAutoRefresh() {
+    if (refreshTimer) { clearTimeout(refreshTimer); refreshTimer = null; }
 }
 
 window.addEventListener('load', () => {
-    requestNotificationPermission();
-    autoRefresh();
+    updateDateLabel();
+    document.getElementById('date-prev').addEventListener('click', () => shiftDate(-1));
+    document.getElementById('date-next').addEventListener('click', () => shiftDate(1));
+    document.addEventListener('click', e => {
+        if (e.target.closest('.series-link')) saveScroll();
+    });
+    startAutoRefresh();
     setInterval(tickClocks, 1000);
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/sw.js').catch(err => {
             console.warn('Service worker registration failed:', err);
         });
-        let reloading = false;
         navigator.serviceWorker.addEventListener('controllerchange', () => {
-            if (reloading) return;
-            reloading = true;
-            location.reload();
+            showUpdateToast();
         });
     }
 });