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/styles.css

@@ -54,6 +54,46 @@ header {
     color: var(--text);
 }
 
+/* ── Date Navigation ───────────────────────────── */
+
+.date-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    padding-bottom: 0.5rem;
+}
+
+.date-btn {
+    background: var(--badge-bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding: 0.25rem 0.6rem;
+    cursor: pointer;
+    transition: background 0.12s ease, border-color 0.12s ease;
+}
+
+.date-btn:hover {
+    background: #333;
+    border-color: #555;
+}
+
+.date-btn:focus-visible {
+    outline: 2px solid var(--cup-gold-1);
+    outline-offset: 2px;
+}
+
+.date-label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    min-width: 6rem;
+    text-align: center;
+}
+
 /* ── Layout ─────────────────────────────────────── */
 
 main {
@@ -71,6 +111,78 @@ main {
     display: none;
 }
 
+.update-toast {
+    position: fixed;
+    bottom: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: var(--radius);
+    padding: 0.6rem 1rem;
+    font-size: 0.82rem;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.update-toast-btn {
+    background: var(--cup-gold-1);
+    color: #1a1200;
+    border: none;
+    border-radius: var(--radius-sm);
+    padding: 0.3rem 0.7rem;
+    font-size: 0.78rem;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.update-toast-btn:hover {
+    background: var(--cup-gold-2);
+}
+
+.stale-banner {
+    text-align: center;
+    padding: 0.45rem 1rem;
+    background: rgba(239, 68, 68, 0.12);
+    color: #fca5a5;
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+}
+
+.stale-banner.hidden {
+    display: none;
+}
+
+main.stale {
+    opacity: 0.6;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 4rem 1rem;
+}
+
+.empty-state.hidden {
+    display: none;
+}
+
+.empty-state-heading {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-bottom: 0.4rem;
+}
+
+.empty-state-sub {
+    font-size: 0.85rem;
+    color: #555;
+}
+
 .section-heading {
     font-size: 0.7rem;
     font-weight: 700;
@@ -232,8 +344,10 @@ main {
 }
 
 .team-record {
-    font-size: 0.72rem;
-    color: var(--text-muted);
+    font-size: 0.78rem;
+    color: #999;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
     margin-left: auto;
     flex-shrink: 0;
     white-space: nowrap;
@@ -1020,7 +1134,13 @@ main {
 }
 
 .bracket-matchup-complete {
-    opacity: 0.75;
+    opacity: 0.55;
+}
+
+.bracket-col-active {
+    color: var(--cup-gold-2);
+    border-bottom: 2px solid var(--cup-gold-1);
+    padding-bottom: 0.2rem;
 }
 
 .bracket-matchup-empty {