feat: UI redesign with park detail pages and ride status

Visual overhaul:
- Warmer color system with amber accent for Today, better text hierarchy
- Row hover highlighting, sticky column shadow on horizontal scroll
- Closed cells replaced with dot (·) instead of "Closed" text
- Regional grouping (Northeast/Southeast/Midwest/Texas & South/West)
- Two-row header with park count badge and WeekNav on separate lines
- Amber "Today" button in WeekNav when off current week
- Mobile card layout (< 1024px) with 7-day grid per park; table on desktop
- Skeleton loading state via app/loading.tsx

Park detail pages (/park/[id]):
- Month calendar view with ← → navigation via ?month= param
- Live ride status fetched from Six Flags API (cached 1h)
- Ride hours only shown when they differ from park operating hours
- Fallback to nearest upcoming open day when today is dropped by API,
  including cross-month fallback for end-of-month edge case

Data layer:
- Park type gains region field; parks.ts exports groupByRegion()
- db.ts gains getParkMonthData() for single-park month queries
- sixflags.ts gains scrapeRidesForDay() returning RidesFetchResult
  with rides, dataDate, isExact, and parkHoursLabel

Removed: CalendarGrid.tsx, MonthNav.tsx (dead code)

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

app/loading.tsx

@@ -0,0 +1,82 @@
+// Next.js automatically shows this while the page Server Component fetches data.
+// No client JS — the skeleton is pure HTML + CSS animation.
+
+const SKELETON_ROWS = 8;
+const SKELETON_COLS = 7;
+
+export default function Loading() {
+  return (
+    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
+      {/* Skeleton header */}
+      <header style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 20,
+        background: "var(--color-bg)",
+        borderBottom: "1px solid var(--color-border)",
+      }}>
+        <div style={{ padding: "12px 24px 10px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <div className="skeleton" style={{ width: 180, height: 22, borderRadius: 6 }} />
+          <div className="skeleton" style={{ width: 120, height: 26, borderRadius: 20 }} />
+        </div>
+        <div style={{ padding: "8px 24px 10px", borderTop: "1px solid var(--color-border-subtle)", display: "flex", alignItems: "center", gap: 12 }}>
+          <div className="skeleton" style={{ width: 32, height: 32, borderRadius: 6 }} />
+          <div className="skeleton" style={{ width: 200, height: 20, borderRadius: 4 }} />
+          <div className="skeleton" style={{ width: 32, height: 32, borderRadius: 6 }} />
+        </div>
+      </header>
+
+      {/* Skeleton table — desktop */}
+      <main style={{ padding: "0 24px 48px" }}>
+        <div style={{ overflowX: "auto", marginTop: 0 }}>
+          <table style={{ borderCollapse: "collapse", width: "100%", minWidth: 700, tableLayout: "fixed" }}>
+            <colgroup>
+              <col style={{ width: 240 }} />
+              {Array.from({ length: SKELETON_COLS }).map((_, i) => (
+                <col key={i} style={{ width: 130 }} />
+              ))}
+            </colgroup>
+
+            {/* Column headers */}
+            <thead>
+              <tr>
+                <th style={{ padding: "10px 14px", borderBottom: "1px solid var(--color-border)" }}>
+                  <div className="skeleton" style={{ width: 40, height: 12, borderRadius: 3 }} />
+                </th>
+                {Array.from({ length: SKELETON_COLS }).map((_, i) => (
+                  <th key={i} style={{ padding: "10px 8px", borderBottom: "1px solid var(--color-border)", borderLeft: "1px solid var(--color-border)", textAlign: "center" }}>
+                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
+                      <div className="skeleton" style={{ width: 24, height: 10, borderRadius: 3 }} />
+                      <div className="skeleton" style={{ width: 18, height: 18, borderRadius: 3 }} />
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+
+            {/* Skeleton rows */}
+            <tbody>
+              {Array.from({ length: SKELETON_ROWS }).map((_, rowIdx) => (
+                <tr key={rowIdx} style={{ background: rowIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)" }}>
+                  <td style={{ padding: "10px 14px", borderBottom: "1px solid var(--color-border)", borderRight: "1px solid var(--color-border)" }}>
+                    <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+                      <div className="skeleton" style={{ width: `${140 + (rowIdx % 3) * 20}px`, height: 13, borderRadius: 3 }} />
+                      <div className="skeleton" style={{ width: 80, height: 10, borderRadius: 3 }} />
+                    </div>
+                  </td>
+                  {Array.from({ length: SKELETON_COLS }).map((_, colIdx) => (
+                    <td key={colIdx} style={{ padding: 4, borderBottom: "1px solid var(--color-border)", borderLeft: "1px solid var(--color-border)", height: 56 }}>
+                      {(rowIdx + colIdx) % 3 === 0 && (
+                        <div className="skeleton" style={{ width: "100%", height: "100%", borderRadius: 6 }} />
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  );
+}