Actually fix mobile nav + arm albums infinite scroll for cached loads

Two regressions from the previous fix:

1. Mobile nav still wrapped into a tall stack. The @media block was
   placed BEFORE the base `.nav-btn { flex: 1; min-width: 120px }`
   rule, so source-order specificity made the base rule override the
   mobile one. Moved the @media block to AFTER all base nav-btn rules
   so it wins on screens ≤720px.

2. Albums infinite scroll never engaged when the gallery was loaded
   from cache (the common case). `getAlbumCache` returned only the
   array, `setAlbumCache` discarded pagination, and the DOMContentLoad
   auto-load + `refreshAlbumsSilently` both bypassed
   `setupAlbumsInfiniteScroll`. Now the cache preserves `{ list, page,
   pages, total }`, a new `getAlbumCacheFull` exposes it, and every
   cached-render path primes pagination state and arms the observer.
   Background refresh also re-arms the observer after pulling fresh
   `pages`, fixing the case where the cache had a stale `pages: 1`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

css/style.css

@@ -212,30 +212,6 @@ body {
     flex-wrap: wrap;
 }
 
-/* On narrow screens, switch to horizontal scrolling so 5+ tabs stay
-   on one row instead of breaking into a tall stack. */
-@media (max-width: 720px) {
-    .main-nav {
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        overflow-y: hidden;
-        scroll-snap-type: x proximity;
-        -webkit-overflow-scrolling: touch;
-        scrollbar-width: none;
-    }
-    .main-nav::-webkit-scrollbar {
-        display: none;
-    }
-    .nav-btn {
-        flex: 0 0 auto;
-        min-width: auto;
-        white-space: nowrap;
-        scroll-snap-align: start;
-        padding: 10px 16px;
-        font-size: 0.9rem;
-    }
-}
-
 .nav-btn {
     flex: 1;
     min-width: 120px;
@@ -261,6 +237,33 @@ body {
     box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
 }
 
+/* On narrow screens, switch to horizontal scrolling so all 6 tabs stay
+   on a single row instead of breaking into a tall stack. Placed after
+   the base .nav-btn rules so its specificity-tie-breaker wins. */
+@media (max-width: 720px) {
+    .main-nav {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-snap-type: x proximity;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        gap: 4px;
+        padding: 6px;
+    }
+    .main-nav::-webkit-scrollbar {
+        display: none;
+    }
+    .nav-btn {
+        flex: 0 0 auto;
+        min-width: auto;
+        white-space: nowrap;
+        scroll-snap-align: start;
+        padding: 10px 14px;
+        font-size: 0.88rem;
+    }
+}
+
 /* ============ Panels ============ */
 .panel {
     background: var(--glass-bg);