Update README.md

The API without a date param returns today's operating data directly,
invalidating the previous assumption that today's date was always missing.

- Add fetchToday(apiId, revalidate?) to sixflags.ts — calls the dateless
  endpoint with optional ISR cache
- Extract parseApiDay() helper shared by scrapeMonth and fetchToday
- Update upsertDay WHERE clause: >= date('now') so today can be updated
  (was > date('now'), which froze today after first write)
- scrape.ts: add a today-scrape pass after the monthly loop so each run
  always writes fresh today data to the DB
- app/page.tsx: fetch live today data for all parks (5-min ISR) and merge
  into the data map before computing open/closing/weatherDelay status
- app/park/[id]/page.tsx: prefer live today data from API for todayData
  so weather delays and hour changes surface within 5 minutes
- scrapeRidesForDay: update comment only — role unchanged (QT fallback)

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

.gitea/workflows/deploy.yml

@@ -4,26 +4,14 @@ on:
   push:
     branches:
       - main
-    tags:
-      - 'v*'
 
 jobs:
   build-push:
     name: Build & Push
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
     steps:
       - uses: actions/checkout@v4
 
-      - name: Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ vars.REGISTRY }}/${{ gitea.repository_owner }}/sixflagssupercalendar
-          tags: |
-            type=semver,pattern={{version}}
-            type=raw,value=latest,enable={{is_default_branch}}
-
       - name: Log in to Gitea registry
         uses: docker/login-action@v3
         with:
@@ -31,10 +19,18 @@ jobs:
           username: ${{ gitea.actor }}
           password: ${{ secrets.REGISTRY_TOKEN }}
 
-      - name: Build and push
+      - name: Build and push web image
         uses: docker/build-push-action@v6
         with:
           context: .
+          target: web
           push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ vars.REGISTRY }}/${{ gitea.repository_owner }}/sixflagssupercalendar:web
+
+      - name: Build and push scraper image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          target: scraper
+          push: true
+          tags: ${{ vars.REGISTRY }}/${{ gitea.repository_owner }}/sixflagssupercalendar:scraper

Dockerfile

@@ -1,4 +1,4 @@
-# Stage 1: Install all dependencies (dev included — scripts need tsx + playwright)
+# Stage 1: Install all dependencies (dev included — scraper needs tsx + playwright)
 FROM node:22-bookworm-slim AS deps
 RUN apt-get update && apt-get install -y --no-install-recommends python3 make g++ && \
     rm -rf /var/lib/apt/lists/*
@@ -11,47 +11,60 @@ FROM deps AS builder
 COPY . .
 RUN npm run build
 
-# Stage 3: Production runner
-FROM node:22-bookworm-slim AS runner
+# ── web ──────────────────────────────────────────────────────────────────────
+# Minimal Next.js runner. No playwright, no tsx, no scripts.
+# next build --output standalone bundles its own node_modules (incl. better-sqlite3).
+FROM node:22-bookworm-slim AS web
 WORKDIR /app
 
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
-# Store Playwright browser in a predictable path inside the image
-ENV PLAYWRIGHT_BROWSERS_PATH=/app/.playwright
 
-# Create non-root user before copying files so --chown works
 RUN addgroup --system --gid 1001 nodejs && \
     adduser --system --uid 1001 nextjs
 
-# Copy Next.js standalone output
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 
-# Copy scripts + library source (needed for npm run discover/scrape via tsx)
-COPY --from=builder --chown=nextjs:nodejs /app/scripts ./scripts
-COPY --from=builder --chown=nextjs:nodejs /app/lib ./lib
-COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json
-COPY --from=builder --chown=nextjs:nodejs /app/tsconfig.json ./tsconfig.json
-
-# Replace standalone's minimal node_modules with full deps
-# (includes tsx, playwright, and all devDependencies)
-COPY --from=deps --chown=nextjs:nodejs /app/node_modules ./node_modules
-
-# Install Playwright Chromium browser + all required system libraries.
-# Runs as root so apt-get works; browser lands in PLAYWRIGHT_BROWSERS_PATH.
-RUN npx playwright install --with-deps chromium && \
-    chown -R nextjs:nodejs /app/.playwright
-
-# SQLite data directory — mount a named volume here for persistence
 RUN mkdir -p /app/data && chown nextjs:nodejs /app/data
 VOLUME ["/app/data"]
 
 USER nextjs
-
 EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
-
 CMD ["node", "server.js"]
+
+# ── scraper ───────────────────────────────────────────────────────────────────
+# Scraper-only image. No Next.js output. Runs on a nightly schedule via
+# scripts/scrape-schedule.sh. Staleness windows are configurable via env vars:
+#   PARK_HOURS_STALENESS_HOURS  (default: 72)
+#   COASTER_STALENESS_HOURS     (default: 720 = 30 days)
+FROM node:22-bookworm-slim AS scraper
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PLAYWRIGHT_BROWSERS_PATH=/app/.playwright
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/scripts ./scripts
+COPY --from=builder --chown=nextjs:nodejs /app/lib ./lib
+COPY --from=builder --chown=nextjs:nodejs /app/tests ./tests
+COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json
+COPY --from=builder --chown=nextjs:nodejs /app/tsconfig.json ./tsconfig.json
+
+# Full node_modules — includes tsx, playwright, better-sqlite3, all devDeps
+COPY --from=deps --chown=nextjs:nodejs /app/node_modules ./node_modules
+
+# Install Playwright Chromium + system libraries (runs as root, then fixes ownership)
+RUN npx playwright install --with-deps chromium && \
+    chown -R nextjs:nodejs /app/.playwright
+
+RUN mkdir -p /app/data && chown nextjs:nodejs /app/data
+VOLUME ["/app/data"]
+
+USER nextjs
+CMD ["sh", "/app/scripts/scrape-schedule.sh"]

README.md

@@ -63,7 +63,7 @@ Scrape operating hours for the full year:
 npm run scrape
 ```
 
-Force a full re-scrape (ignores the 7-day staleness window):
+Force a full re-scrape (ignores the staleness window):
 
 ```bash
 npm run scrape:force
@@ -79,6 +79,12 @@ npm run debug -- --park kingsisland --date 2026-06-15
 
 Output is printed to the terminal and saved to `debug/{parkId}_{date}.txt`.
 
+### Run tests
+
+```bash
+npm test
+```
+
 ### Run the dev server
 
 ```bash
@@ -91,33 +97,93 @@ Open [http://localhost:3000](http://localhost:3000). Navigate weeks with the `
 
 ## Deployment
 
-The app uses Next.js standalone output. The SQLite database is stored in a Docker volume at `/app/data`.
+The app ships as two separate Docker images that share a named volume for the SQLite database:
+
+| Image | Tag | Purpose |
+|-------|-----|---------|
+| Next.js web server | `:web` | Reads DB, serves content. No scraping tools. |
+| Scraper + scheduler | `:scraper` | Nightly data refresh. No web server. |
+
+Images are built and pushed automatically by CI on every push to `main`.
+
+### First-time setup
+
+**1. Pull the images**
+
+```bash
+docker pull gitea.thewrightserver.net/josh/sixflagssupercalendar:web
+docker pull gitea.thewrightserver.net/josh/sixflagssupercalendar:scraper
+```
+
+**2. Discover park API IDs**
+
+This one-time step opens a headless browser for each park to find its internal Six Flags API ID. Run it against the scraper image so Playwright is available:
+
+```bash
+docker run --rm -v root_park_data:/app/data \
+  gitea.thewrightserver.net/josh/sixflagssupercalendar:scraper \
+  npm run discover
+```
+
+**3. Set RCDB IDs for the coaster filter**
+
+Open `data/park-meta.json` in the Docker volume and set `rcdb_id` for each park to the numeric ID from the RCDB URL (e.g. `https://rcdb.com/4529.htm` → `4529`). You can curl it directly from the repo:
+
+```bash
+curl -o /var/lib/docker/volumes/root_park_data/_data/park-meta.json \
+  https://gitea.thewrightserver.net/josh/SixFlagsSuperCalendar/raw/branch/main/data/park-meta.json
+```
+
+**4. Run the initial scrape**
+
+```bash
+docker run --rm -v root_park_data:/app/data \
+  gitea.thewrightserver.net/josh/sixflagssupercalendar:scraper \
+  npm run scrape
+```
+
+**5. Start services**
 
 ```bash
 docker compose up -d
 ```
 
-### Seed the database inside the container
+Both services start. The scraper runs nightly at 3 AM (container timezone, set via `TZ`).
 
-The production image includes Playwright and Chromium, so discovery and scraping run directly against the container's volume:
+### Updating
 
 ```bash
-docker compose exec web npm run discover
-docker compose exec web npm run scrape
+docker compose pull && docker compose up -d
 ```
 
-Or as a one-off against the named volume:
+### Scraper environment variables
+
+Set these in `docker-compose.yml` under the `scraper` service to override defaults:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `TZ` | `UTC` | Timezone for the nightly 3 AM run (e.g. `America/New_York`) |
+| `PARK_HOURS_STALENESS_HOURS` | `72` | Hours before park schedule data is re-fetched |
+| `COASTER_STALENESS_HOURS` | `720` | Hours before RCDB coaster lists are re-fetched (720 = 30 days) |
+
+### Manual scrape
+
+To trigger a scrape outside the nightly schedule:
 
 ```bash
-docker run --rm -v sixflagssupercalendar_park_data:/app/data \
-  gitea.thewrightserver.net/josh/sixflagssupercalendar:latest \
-  npm run scrape
+docker compose exec scraper npm run scrape
+```
+
+Force re-scrape of all data (ignores staleness):
+
+```bash
+docker compose exec scraper npm run scrape:force
 ```
 
 ---
 
 ## Data Refresh
 
-The scraper skips any park + month already scraped within the last 72 hours. The nightly Docker scraper service handles this automatically. Parks or months not yet in the database show a `—` placeholder; parks with no open days in the displayed week are hidden from the calendar automatically.
+The scraper skips any park + month already scraped within the staleness window (`PARK_HOURS_STALENESS_HOURS`, default 72h). Past dates are never overwritten — once a day occurs, the API stops returning data for it, so the record written when it was a future date is preserved forever. The nightly scraper handles refresh automatically.
 
-Roller coaster lists (from RCDB) are refreshed every 30 days on each `npm run scrape` run, for parks with a configured `rcdb_id`.
+Roller coaster lists (from RCDB) are refreshed per `COASTER_STALENESS_HOURS` (default 720h = 30 days) for parks with a configured `rcdb_id`.

app/globals.css

@@ -27,6 +27,18 @@
   --color-open-text: #4ade80;
   --color-open-hours: #bbf7d0;
 
+  /* ── Weather delay — blue (open by schedule but all rides closed) ───────── */
+  --color-weather-bg: #0a1020;
+  --color-weather-border: #3b82f6;
+  --color-weather-text: #60a5fa;
+  --color-weather-hours: #bfdbfe;
+
+  /* ── Closing — amber (post-close buffer, rides still winding down) ───────── */
+  --color-closing-bg: #1a1100;
+  --color-closing-border: #d97706;
+  --color-closing-text: #fbbf24;
+  --color-closing-hours: #fde68a;
+
   /* ── Passholder preview — vivid cyan ─────────────────────────────────────── */
   --color-ph-bg: #051518;
   --color-ph-border: #22d3ee;
@@ -80,20 +92,34 @@
   clip-path: inset(0 -16px 0 0);
 }
 
-/* ── Park row hover (group/group-hover via Tailwind not enough across sticky cols) */
-.park-row:hover td,
-.park-row:hover th {
-  background-color: var(--color-surface-hover) !important;
-}
-
 /* ── Park name link hover ────────────────────────────────────────────────── */
 .park-name-link {
   text-decoration: none;
   color: inherit;
-  transition: color 120ms ease;
+  transition: background 150ms ease;
 }
 .park-name-link:hover {
-  color: var(--color-accent);
+  background: var(--color-surface-hover);
+}
+
+/* ── Mobile park card hover ─────────────────────────────────────────────── */
+.park-card {
+  transition: background 150ms ease;
+}
+.park-card:hover {
+  background: var(--color-surface-hover) !important;
+}
+
+/* ── Park month calendar — responsive row heights ───────────────────────── */
+/* Mobile: fixed uniform rows so narrow columns don't cause height variance  */
+.park-calendar-grid {
+  grid-auto-rows: 72px;
+}
+/* sm+: let rows breathe and grow with their content (cells are wide enough) */
+@media (min-width: 640px) {
+  .park-calendar-grid {
+    grid-auto-rows: minmax(108px, auto);
+  }
 }
 
 /* ── Pulse animation for skeleton ───────────────────────────────────────── */

app/page.tsx

@@ -1,10 +1,12 @@
-import { WeekCalendar } from "@/components/WeekCalendar";
-import { MobileCardList } from "@/components/MobileCardList";
-import { WeekNav } from "@/components/WeekNav";
-import { Legend } from "@/components/Legend";
-import { EmptyState } from "@/components/EmptyState";
-import { PARKS, groupByRegion } from "@/lib/parks";
-import { openDb, getDateRange } from "@/lib/db";
+import { HomePageClient } from "@/components/HomePageClient";
+import { PARKS } from "@/lib/parks";
+import { openDb, getDateRange, getApiId } from "@/lib/db";
+import { getTodayLocal, isWithinOperatingWindow, getOperatingStatus } from "@/lib/env";
+import { fetchLiveRides } from "@/lib/scrapers/queuetimes";
+import { fetchToday } from "@/lib/scrapers/sixflags";
+import { QUEUE_TIMES_IDS } from "@/lib/queue-times-map";
+import { readParkMeta, getCoasterSet } from "@/lib/park-meta";
+import type { DayData } from "@/lib/db";
 
 interface PageProps {
   searchParams: Promise<{ week?: string }>;
@@ -18,9 +20,10 @@ function getWeekStart(param: string | undefined): string {
       return d.toISOString().slice(0, 10);
     }
   }
-  const today = new Date();
-  today.setDate(today.getDate() - today.getDay());
-  return today.toISOString().slice(0, 10);
+  const todayIso = getTodayLocal();
+  const d = new Date(todayIso + "T00:00:00");
+  d.setDate(d.getDate() - d.getDay());
+  return d.toISOString().slice(0, 10);
 }
 
 function getWeekDates(sundayIso: string): string[] {
@@ -32,9 +35,10 @@ function getWeekDates(sundayIso: string): string[] {
 }
 
 function getCurrentWeekStart(): string {
-  const today = new Date();
-  today.setDate(today.getDate() - today.getDay());
-  return today.toISOString().slice(0, 10);
+  const todayIso = getTodayLocal();
+  const d = new Date(todayIso + "T00:00:00");
+  d.setDate(d.getDate() - d.getDay());
+  return d.toISOString().slice(0, 10);
 }
 
 export default async function HomePage({ searchParams }: PageProps) {
@@ -42,11 +46,36 @@ export default async function HomePage({ searchParams }: PageProps) {
   const weekStart = getWeekStart(params.week);
   const weekDates = getWeekDates(weekStart);
   const endDate = weekDates[6];
-  const today = new Date().toISOString().slice(0, 10);
+  const today = getTodayLocal();
   const isCurrentWeek = weekStart === getCurrentWeekStart();
 
   const db = openDb();
   const data = getDateRange(db, weekStart, endDate);
+
+  // Merge live today data from the Six Flags API (dateless endpoint, 5-min ISR cache).
+  // This ensures weather delays, early closures, and hour changes surface within 5 minutes
+  // without waiting for the next scheduled scrape. Only fetched when viewing the current week.
+  if (weekDates.includes(today)) {
+    const todayResults = await Promise.all(
+      PARKS.map(async (p) => {
+        const apiId = getApiId(db, p.id);
+        if (!apiId) return null;
+        const live = await fetchToday(apiId, 300); // 5-min ISR cache
+        return live ? { parkId: p.id, live } : null;
+      })
+    );
+    for (const result of todayResults) {
+      if (!result) continue;
+      const { parkId, live } = result;
+      if (!data[parkId]) data[parkId] = {};
+      data[parkId][today] = {
+        isOpen: live.isOpen,
+        hoursLabel: live.hoursLabel ?? null,
+        specialType: live.specialType ?? null,
+      } satisfies DayData;
+    }
+  }
+
   db.close();
 
   const scrapedCount = Object.values(data).reduce(
@@ -54,100 +83,68 @@ export default async function HomePage({ searchParams }: PageProps) {
     0
   );
 
-  const visibleParks = PARKS.filter((park) =>
-    weekDates.some((date) => data[park.id]?.[date]?.isOpen)
-  );
+  // Always fetch both ride and coaster counts — the client decides which to display.
+  const parkMeta = readParkMeta();
+  const hasCoasterData = PARKS.some((p) => (parkMeta[p.id]?.coasters.length ?? 0) > 0);
 
-  const grouped = groupByRegion(visibleParks);
+  let rideCounts: Record<string, number> = {};
+  let coasterCounts: Record<string, number> = {};
+  let closingParkIds: string[] = [];
+  let openParkIds: string[] = [];
+  let weatherDelayParkIds: string[] = [];
+  if (weekDates.includes(today)) {
+    // Parks within operating hours right now (for open dot — independent of ride counts)
+    const openTodayParks = PARKS.filter((p) => {
+      const dayData = data[p.id]?.[today];
+      if (!dayData?.isOpen || !dayData.hoursLabel) return false;
+      return isWithinOperatingWindow(dayData.hoursLabel, p.timezone);
+    });
+    openParkIds = openTodayParks.map((p) => p.id);
+    closingParkIds = openTodayParks
+      .filter((p) => {
+        const dayData = data[p.id]?.[today];
+        return dayData?.hoursLabel
+          ? getOperatingStatus(dayData.hoursLabel, p.timezone) === "closing"
+          : false;
+      })
+      .map((p) => p.id);
+    // Only fetch ride counts for parks that have queue-times coverage
+    const trackedParks = openTodayParks.filter((p) => QUEUE_TIMES_IDS[p.id]);
+    const results = await Promise.all(
+      trackedParks.map(async (p) => {
+        const coasterSet = getCoasterSet(p.id, parkMeta);
+        const result = await fetchLiveRides(QUEUE_TIMES_IDS[p.id], coasterSet, 300);
+        const rideCount = result ? result.rides.filter((r) => r.isOpen).length : null;
+        const coasterCount = result ? result.rides.filter((r) => r.isOpen && r.isCoaster).length : 0;
+        return { id: p.id, rideCount, coasterCount };
+      })
+    );
+    // Parks with queue-times coverage but 0 open rides = likely weather delay
+    weatherDelayParkIds = results
+      .filter(({ rideCount }) => rideCount === 0)
+      .map(({ id }) => id);
+    rideCounts = Object.fromEntries(
+      results.filter(({ rideCount }) => rideCount != null && rideCount > 0).map(({ id, rideCount }) => [id, rideCount!])
+    );
+    coasterCounts = Object.fromEntries(
+      results.filter(({ coasterCount }) => coasterCount > 0).map(({ id, coasterCount }) => [id, coasterCount])
+    );
+  }
 
   return (
-    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
-      {/* ── Header ─────────────────────────────────────────────────────────── */}
-      <header style={{
-        position: "sticky",
-        top: 0,
-        zIndex: 20,
-        background: "var(--color-bg)",
-        borderBottom: "1px solid var(--color-border)",
-      }}>
-        {/* Row 1: Title + park count */}
-        <div style={{
-          padding: "12px 16px 10px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 12,
-        }}>
-          <span style={{
-            fontSize: "1.1rem",
-            fontWeight: 700,
-            color: "var(--color-text)",
-            letterSpacing: "-0.02em",
-          }}>
-            Thoosie Calendar
-          </span>
-
-          <span style={{
-            background: "var(--color-surface)",
-            border: "1px solid var(--color-border)",
-            borderRadius: 20,
-            padding: "3px 10px",
-            fontSize: "0.7rem",
-            color: "var(--color-text-muted)",
-            fontWeight: 500,
-          }}>
-            {visibleParks.length} of {PARKS.length} parks open
-          </span>
-        </div>
-
-        {/* Row 2: Week nav + legend (legend hidden on mobile) */}
-        <div style={{
-          padding: "8px 16px 10px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 16,
-          borderTop: "1px solid var(--color-border-subtle)",
-        }}>
-          <WeekNav
-            weekStart={weekStart}
-            weekDates={weekDates}
-            isCurrentWeek={isCurrentWeek}
-          />
-          <div className="hidden sm:flex">
-            <Legend />
-          </div>
-        </div>
-      </header>
-
-      {/* ── Main content ───────────────────────────────────────────────────── */}
-      <main className="px-4 sm:px-6 pb-12">
-        {scrapedCount === 0 ? (
-          <EmptyState />
-        ) : (
-          <>
-            {/* Mobile: card list (hidden on lg+) */}
-            <div className="lg:hidden">
-              <MobileCardList
-                grouped={grouped}
-                weekDates={weekDates}
-                data={data}
-                today={today}
-              />
-            </div>
-
-            {/* Desktop: week table (hidden below lg) */}
-            <div className="hidden lg:block">
-              <WeekCalendar
-                parks={visibleParks}
-                weekDates={weekDates}
-                data={data}
-                grouped={grouped}
-              />
-            </div>
-          </>
-        )}
-      </main>
-    </div>
+    <HomePageClient
+      weekStart={weekStart}
+      weekDates={weekDates}
+      today={today}
+      isCurrentWeek={isCurrentWeek}
+      data={data}
+      rideCounts={rideCounts}
+      coasterCounts={coasterCounts}
+      openParkIds={openParkIds}
+      closingParkIds={closingParkIds}
+      weatherDelayParkIds={weatherDelayParkIds}
+      hasCoasterData={hasCoasterData}
+      scrapedCount={scrapedCount}
+    />
   );
 }

app/park/[id]/page.tsx

@@ -1,15 +1,18 @@
 import Link from "next/link";
+import { BackToCalendarLink } from "@/components/BackToCalendarLink";
 import { notFound } from "next/navigation";
 import { PARK_MAP } from "@/lib/parks";
 import { openDb, getParkMonthData, getApiId } from "@/lib/db";
 import { scrapeRidesForDay } from "@/lib/scrapers/sixflags";
 import { fetchLiveRides } from "@/lib/scrapers/queuetimes";
+import { fetchToday } from "@/lib/scrapers/sixflags";
 import { QUEUE_TIMES_IDS } from "@/lib/queue-times-map";
 import { readParkMeta, getCoasterSet } from "@/lib/park-meta";
 import { ParkMonthCalendar } from "@/components/ParkMonthCalendar";
 import { LiveRidePanel } from "@/components/LiveRidePanel";
 import type { RideStatus, RidesFetchResult } from "@/lib/scrapers/sixflags";
 import type { LiveRidesResult } from "@/lib/scrapers/queuetimes"; // used as prop type below
+import { getTodayLocal, isWithinOperatingWindow } from "@/lib/env";
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -23,8 +26,8 @@ function parseMonthParam(param: string | undefined): { year: number; month: numb
       return { year: y, month: m };
     }
   }
-  const now = new Date();
-  return { year: now.getFullYear(), month: now.getMonth() + 1 };
+  const [y, m] = getTodayLocal().split("-").map(Number);
+  return { year: y, month: m };
 }
 
 export default async function ParkPage({ params, searchParams }: PageProps) {
@@ -34,7 +37,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
   const park = PARK_MAP.get(id);
   if (!park) notFound();
 
-  const today = new Date().toISOString().slice(0, 10);
+  const today = getTodayLocal();
   const { year, month } = parseMonthParam(monthParam);
 
   const db = openDb();
@@ -42,7 +45,13 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
   const apiId = getApiId(db, id);
   db.close();
 
-  const todayData = monthData[today];
+  // Prefer live today data from the Six Flags API (5-min ISR cache) so that
+  // weather delays and hour changes surface immediately rather than showing
+  // stale DB values. Fall back to DB if the API call fails.
+  const liveToday = apiId !== null ? await fetchToday(apiId, 300).catch(() => null) : null;
+  const todayData = liveToday
+    ? { isOpen: liveToday.isOpen, hoursLabel: liveToday.hoursLabel ?? null, specialType: liveToday.specialType ?? null }
+    : monthData[today];
   const parkOpenToday = todayData?.isOpen && todayData?.hoursLabel;
 
   // ── Ride data: try live Queue-Times first, fall back to schedule ──────────
@@ -53,14 +62,33 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
   let liveRides: LiveRidesResult | null = null;
   let ridesResult: RidesFetchResult | null = null;
 
+  // Determine if we're within the 1h-before-open to 1h-after-close window.
+  const withinWindow = todayData?.hoursLabel
+    ? isWithinOperatingWindow(todayData.hoursLabel, park.timezone)
+    : false;
+
   if (queueTimesId) {
-    liveRides = await fetchLiveRides(queueTimesId, coasterSet);
+    const raw = await fetchLiveRides(queueTimesId, coasterSet);
+    if (raw) {
+      // Outside the window: show the ride list but force all rides closed
+      liveRides = withinWindow
+        ? raw
+        : {
+            ...raw,
+            rides: raw.rides.map((r) => ({ ...r, isOpen: false, waitMinutes: 0 })),
+          };
+    }
   }
 
-  // Only hit the schedule API as a fallback when live data is unavailable
+  // Weather delay: park is within operating hours but queue-times shows 0 open rides
+  const isWeatherDelay =
+    withinWindow &&
+    liveRides !== null &&
+    liveRides.rides.length > 0 &&
+    liveRides.rides.every((r) => !r.isOpen);
+
+  // Only hit the schedule API as a fallback when Queue-Times live data is unavailable.
   if (!liveRides && apiId !== null) {
-    // Note: the API drops today's date from its response (only returns future dates),
-    // so scrapeRidesForDay may fall back to the nearest upcoming date.
     ridesResult = await scrapeRidesForDay(apiId, today);
   }
 
@@ -78,19 +106,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
         alignItems: "center",
         gap: 16,
       }}>
-        <Link href="/" style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          fontSize: "0.8rem",
-          color: "var(--color-text-muted)",
-          textDecoration: "none",
-          transition: "color 120ms ease",
-        }}
-          className="park-name-link"
-        >
-          ← Calendar
-        </Link>
+        <BackToCalendarLink />
         <div style={{ width: 1, height: 16, background: "var(--color-border)" }} />
         <span style={{ fontSize: "0.9rem", fontWeight: 600, color: "var(--color-text)", letterSpacing: "-0.01em" }}>
           {park.name}
@@ -110,12 +126,31 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
             month={month}
             monthData={monthData}
             today={today}
+            timezone={park.timezone}
           />
         </section>
 
         {/* ── Ride Status ─────────────────────────────────────────────────── */}
         <section>
-          <SectionHeading>
+          <SectionHeading aside={liveRides ? (
+            <a
+              href="https://queue-times.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                fontSize: "0.68rem",
+                color: "var(--color-text-dim)",
+                textDecoration: "none",
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                transition: "color 120ms ease",
+              }}
+              className="park-name-link"
+            >
+              via queue-times.com
+            </a>
+          ) : undefined}>
             Rides
             {liveRides ? (
               <LiveBadge />
@@ -134,6 +169,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
             <LiveRidePanel
               liveRides={liveRides}
               parkOpenToday={!!parkOpenToday}
+              isWeatherDelay={isWeatherDelay}
             />
           ) : (
             <RideList
@@ -158,12 +194,12 @@ function formatShortDate(iso: string): string {
 
 // ── Sub-components ─────────────────────────────────────────────────────────
 
-function SectionHeading({ children }: { children: React.ReactNode }) {
+function SectionHeading({ children, aside }: { children: React.ReactNode; aside?: React.ReactNode }) {
   return (
     <div style={{
       display: "flex",
-      alignItems: "baseline",
-      gap: 0,
+      alignItems: "center",
+      justifyContent: "space-between",
       marginBottom: 14,
       paddingBottom: 10,
       borderBottom: "1px solid var(--color-border)",
@@ -175,9 +211,12 @@ function SectionHeading({ children }: { children: React.ReactNode }) {
         letterSpacing: "0.04em",
         textTransform: "uppercase",
         margin: 0,
+        display: "flex",
+        alignItems: "center",
       }}>
         {children}
       </h2>
+      {aside}
     </div>
   );
 }

components/BackToCalendarLink.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+
+export function BackToCalendarLink() {
+  const [href, setHref] = useState("/");
+
+  useEffect(() => {
+    const saved = localStorage.getItem("lastWeek");
+    if (saved) setHref(`/?week=${saved}`);
+  }, []);
+
+  return (
+    <Link
+      href={href}
+      className="park-name-link"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        fontSize: "0.8rem",
+        color: "var(--color-text-muted)",
+        textDecoration: "none",
+        transition: "color 120ms ease",
+      }}
+    >
+      ← Calendar
+    </Link>
+  );
+}

components/EmptyState.tsx

@@ -10,21 +10,11 @@ export function EmptyState() {
       color: "var(--color-text-muted)",
     }}>
       <div style={{ fontSize: "2rem" }}>📅</div>
-      <div style={{ fontSize: "1rem", fontWeight: 600, color: "var(--color-text)" }}>No data scraped yet</div>
+      <div style={{ fontSize: "1rem", fontWeight: 600, color: "var(--color-text)" }}>Schedule not available yet</div>
       <div style={{ fontSize: "0.85rem", textAlign: "center", lineHeight: 1.6 }}>
-        Run the following to populate the calendar:
+        Park hours for this period haven&apos;t been published yet.<br />
+        Check back closer to your visit.
       </div>
-      <pre style={{
-        background: "var(--color-surface)",
-        border: "1px solid var(--color-border)",
-        borderRadius: 8,
-        padding: "12px 20px",
-        fontSize: "0.8rem",
-        color: "var(--color-text)",
-        lineHeight: 1.8,
-      }}>
-        npm run discover{"\n"}npm run scrape
-      </pre>
     </div>
   );
 }

components/HomePageClient.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { WeekCalendar } from "./WeekCalendar";
+import { MobileCardList } from "./MobileCardList";
+import { WeekNav } from "./WeekNav";
+import { Legend } from "./Legend";
+import { EmptyState } from "./EmptyState";
+import { PARKS, groupByRegion } from "@/lib/parks";
+import type { DayData } from "@/lib/db";
+
+const REFRESH_INTERVAL_MS = 2 * 60 * 1000; // 2 minutes
+const OPEN_REFRESH_BUFFER_MS = 30_000;      // 30s after opening time before hitting the API
+
+/** Parse the opening hour/minute from a hoursLabel like "10am", "10:30am", "11am". */
+function parseOpenTime(hoursLabel: string): { hour: number; minute: number } | null {
+  const openPart = hoursLabel.split(" - ")[0].trim();
+  const match = openPart.match(/^(\d+)(?::(\d+))?(am|pm)$/i);
+  if (!match) return null;
+  let hour = parseInt(match[1], 10);
+  const minute = match[2] ? parseInt(match[2], 10) : 0;
+  const period = match[3].toLowerCase();
+  if (period === "pm" && hour !== 12) hour += 12;
+  if (period === "am" && hour === 12) hour = 0;
+  return { hour, minute };
+}
+
+/** Milliseconds from now until a given local clock time in a timezone. Negative if already past. */
+function msUntilLocalTime(hour: number, minute: number, timezone: string): number {
+  const now = new Date();
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: false,
+  }).formatToParts(now);
+  const localHour   = parseInt(parts.find(p => p.type === "hour")!.value, 10) % 24;
+  const localMinute = parseInt(parts.find(p => p.type === "minute")!.value, 10);
+  return ((hour * 60 + minute) - (localHour * 60 + localMinute)) * 60_000;
+}
+
+const COASTER_MODE_KEY = "coasterMode";
+
+interface HomePageClientProps {
+  weekStart: string;
+  weekDates: string[];
+  today: string;
+  isCurrentWeek: boolean;
+  data: Record<string, Record<string, DayData>>;
+  rideCounts: Record<string, number>;
+  coasterCounts: Record<string, number>;
+  openParkIds: string[];
+  closingParkIds: string[];
+  weatherDelayParkIds: string[];
+  hasCoasterData: boolean;
+  scrapedCount: number;
+}
+
+export function HomePageClient({
+  weekStart,
+  weekDates,
+  today,
+  isCurrentWeek,
+  data,
+  rideCounts,
+  coasterCounts,
+  openParkIds,
+  closingParkIds,
+  weatherDelayParkIds,
+  hasCoasterData,
+  scrapedCount,
+}: HomePageClientProps) {
+  const router = useRouter();
+  const [coastersOnly, setCoastersOnly] = useState(false);
+
+  // Hydrate from localStorage after mount to avoid SSR mismatch.
+  useEffect(() => {
+    setCoastersOnly(localStorage.getItem(COASTER_MODE_KEY) === "true");
+  }, []);
+
+  // Periodically re-fetch server data (ride counts, open status) without a full page reload.
+  useEffect(() => {
+    if (!isCurrentWeek) return;
+    const id = setInterval(() => router.refresh(), REFRESH_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [isCurrentWeek, router]);
+
+  // Schedule a targeted refresh at each park's exact opening time so the
+  // open indicator and ride counts appear immediately rather than waiting
+  // up to 2 minutes for the next polling cycle.
+  useEffect(() => {
+    if (!isCurrentWeek) return;
+    const timeouts: ReturnType<typeof setTimeout>[] = [];
+
+    for (const park of PARKS) {
+      const dayData = data[park.id]?.[today];
+      if (!dayData?.isOpen || !dayData.hoursLabel) continue;
+      const openTime = parseOpenTime(dayData.hoursLabel);
+      if (!openTime) continue;
+      const ms = msUntilLocalTime(openTime.hour, openTime.minute, park.timezone);
+      // Only schedule if opening is still in the future (within the next 24h)
+      if (ms > 0 && ms < 24 * 60 * 60 * 1000) {
+        timeouts.push(setTimeout(() => router.refresh(), ms));                          // mark as open
+        timeouts.push(setTimeout(() => router.refresh(), ms + OPEN_REFRESH_BUFFER_MS)); // pick up ride counts
+      }
+    }
+
+    return () => timeouts.forEach(clearTimeout);
+  }, [isCurrentWeek, today, data, router]);
+
+  // Remember the current week so the park page back button returns here.
+  useEffect(() => {
+    localStorage.setItem("lastWeek", weekStart);
+  }, [weekStart]);
+
+  const toggle = () => {
+    const next = !coastersOnly;
+    setCoastersOnly(next);
+    localStorage.setItem(COASTER_MODE_KEY, String(next));
+  };
+
+  const activeCounts = coastersOnly ? coasterCounts : rideCounts;
+
+  const visibleParks = PARKS.filter((park) =>
+    weekDates.some((date) => data[park.id]?.[date]?.isOpen)
+  );
+  const grouped = groupByRegion(visibleParks);
+
+  return (
+    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
+      {/* ── Header ───────────────────────────────────────────────────────────── */}
+      <header style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 20,
+        background: "var(--color-bg)",
+        borderBottom: "1px solid var(--color-border)",
+      }}>
+        {/* Row 1: Title + controls */}
+        <div style={{
+          padding: "12px 16px 10px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+        }}>
+          <span style={{
+            fontSize: "1.1rem",
+            fontWeight: 700,
+            color: "var(--color-text)",
+            letterSpacing: "-0.02em",
+          }}>
+            Thoosie Calendar
+          </span>
+
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            {hasCoasterData && (
+              <button
+                onClick={toggle}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 5,
+                  padding: "4px 12px",
+                  borderRadius: 20,
+                  border: coastersOnly
+                    ? "1px solid var(--color-accent)"
+                    : "1px solid var(--color-border)",
+                  background: coastersOnly
+                    ? "var(--color-accent-muted)"
+                    : "var(--color-surface)",
+                  color: coastersOnly
+                    ? "var(--color-accent)"
+                    : "var(--color-text-muted)",
+                  fontSize: "0.72rem",
+                  fontWeight: 600,
+                  cursor: "pointer",
+                  transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                🎢 Coaster Mode
+              </button>
+            )}
+
+            <span className="hidden sm:inline-flex" style={{
+              background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
+              border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
+              borderRadius: 20,
+              padding: "4px 14px",
+              fontSize: "0.78rem",
+              color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
+              fontWeight: 600,
+              alignItems: "center",
+              whiteSpace: "nowrap",
+            }}>
+              {visibleParks.length} of {PARKS.length} parks open this week
+            </span>
+          </div>
+        </div>
+
+        {/* Row 2: Week nav + legend */}
+        <div style={{
+          padding: "8px 16px 10px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 16,
+          borderTop: "1px solid var(--color-border-subtle)",
+        }}>
+          <WeekNav
+            weekStart={weekStart}
+            weekDates={weekDates}
+            isCurrentWeek={isCurrentWeek}
+          />
+          <div className="hidden sm:flex">
+            <Legend />
+          </div>
+        </div>
+      </header>
+
+      {/* ── Main content ────────────────────────────────────────────────────── */}
+      <main className="px-4 sm:px-6 pb-12">
+        {scrapedCount === 0 ? (
+          <EmptyState />
+        ) : (
+          <>
+            {/* Mobile: card list (hidden on lg+) */}
+            <div className="lg:hidden">
+              <MobileCardList
+                grouped={grouped}
+                weekDates={weekDates}
+                data={data}
+                today={today}
+                rideCounts={activeCounts}
+                coastersOnly={coastersOnly}
+                openParkIds={openParkIds}
+                closingParkIds={closingParkIds}
+                weatherDelayParkIds={weatherDelayParkIds}
+              />
+            </div>
+
+            {/* Desktop: week table (hidden below lg) */}
+            <div className="hidden lg:block">
+              <WeekCalendar
+                parks={visibleParks}
+                weekDates={weekDates}
+                data={data}
+                grouped={grouped}
+                rideCounts={activeCounts}
+                coastersOnly={coastersOnly}
+                openParkIds={openParkIds}
+                closingParkIds={closingParkIds}
+                weatherDelayParkIds={weatherDelayParkIds}
+              />
+            </div>
+          </>
+        )}
+      </main>
+    </div>
+  );
+}

components/LiveRidePanel.tsx

@@ -1,18 +1,26 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import type { LiveRidesResult, LiveRide } from "@/lib/scrapers/queuetimes";
 
 interface LiveRidePanelProps {
   liveRides: LiveRidesResult;
   parkOpenToday: boolean;
+  isWeatherDelay?: boolean;
 }
 
-export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps) {
+export function LiveRidePanel({ liveRides, parkOpenToday, isWeatherDelay }: LiveRidePanelProps) {
   const { rides } = liveRides;
   const hasCoasters = rides.some((r) => r.isCoaster);
   const [coastersOnly, setCoastersOnly] = useState(false);
 
+  // Pre-select coaster filter if Coaster Mode is enabled on the homepage.
+  useEffect(() => {
+    if (hasCoasters && localStorage.getItem("coasterMode") === "true") {
+      setCoastersOnly(true);
+    }
+  }, [hasCoasters]);
+
   const visible = coastersOnly ? rides.filter((r) => r.isCoaster) : rides;
   const openRides = visible.filter((r) => r.isOpen);
   const closedRides = visible.filter((r) => !r.isOpen);
@@ -42,6 +50,19 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
           }}>
             {openRides.length} open
           </div>
+        ) : isWeatherDelay ? (
+          <div style={{
+            background: "var(--color-weather-bg)",
+            border: "1px solid var(--color-weather-border)",
+            borderRadius: 20,
+            padding: "4px 12px",
+            fontSize: "0.72rem",
+            fontWeight: 600,
+            color: "var(--color-weather-text)",
+            flexShrink: 0,
+          }}>
+            ⛈ Weather Delay — all rides currently closed
+          </div>
         ) : (
           <div style={{
             background: "var(--color-surface)",
@@ -57,8 +78,8 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
           </div>
         )}
 
-        {/* Closed count badge */}
-        {anyOpen && closedRides.length > 0 && (
+        {/* Closed count badge — always shown when there are closed rides */}
+        {closedRides.length > 0 && (
           <div style={{
             background: "var(--color-surface)",
             border: "1px solid var(--color-border)",
@@ -69,7 +90,7 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
             color: "var(--color-text-muted)",
             flexShrink: 0,
           }}>
-            {closedRides.length} closed / down
+            {closedRides.length} {anyOpen ? "closed / down" : "rides total"}
           </div>
         )}
 
@@ -115,26 +136,6 @@ export function LiveRidePanel({ liveRides, parkOpenToday }: LiveRidePanelProps)
         {closedRides.map((ride) => <RideRow key={ride.name} ride={ride} />)}
       </div>
 
-      {/* ── Attribution ──────────────────────────────────────────────────── */}
-      <div style={{
-        marginTop: 20,
-        fontSize: "0.68rem",
-        color: "var(--color-text-dim)",
-        display: "flex",
-        alignItems: "center",
-        gap: 4,
-      }}>
-        Powered by{" "}
-        <a
-          href="https://queue-times.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ color: "var(--color-text-muted)", textDecoration: "underline" }}
-        >
-          Queue-Times.com
-        </a>
-        {" "}· Updates every 5 minutes
-      </div>
     </div>
   );
 }

components/MobileCardList.tsx

@@ -8,9 +8,14 @@ interface MobileCardListProps {
   weekDates: string[];
   data: Record<string, Record<string, DayData>>;
   today: string;
+  rideCounts?: Record<string, number>;
+  coastersOnly?: boolean;
+  openParkIds?: string[];
+  closingParkIds?: string[];
+  weatherDelayParkIds?: string[];
 }
 
-export function MobileCardList({ grouped, weekDates, data, today }: MobileCardListProps) {
+export function MobileCardList({ grouped, weekDates, data, today, rideCounts, coastersOnly, openParkIds, closingParkIds, weatherDelayParkIds }: MobileCardListProps) {
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 20, paddingTop: 14 }}>
       {Array.from(grouped.entries()).map(([region, parks]) => (
@@ -19,25 +24,17 @@ export function MobileCardList({ grouped, weekDates, data, today }: MobileCardLi
           <div style={{
             display: "flex",
             alignItems: "center",
-            gap: 10,
             marginBottom: 10,
             paddingLeft: 2,
           }}>
-            <div style={{
-              width: 3,
-              height: 14,
-              borderRadius: 2,
-              background: "var(--color-region-accent)",
-              flexShrink: 0,
-            }} />
             <span style={{
-              fontSize: "0.65rem",
+              fontSize: "0.6rem",
               fontWeight: 700,
-              letterSpacing: "0.1em",
+              letterSpacing: "0.14em",
               textTransform: "uppercase",
-              color: "var(--color-text-muted)",
+              color: "var(--color-text-secondary)",
             }}>
-              {region}
+              — {region} —
             </span>
           </div>
 
@@ -50,7 +47,12 @@ export function MobileCardList({ grouped, weekDates, data, today }: MobileCardLi
                 weekDates={weekDates}
                 parkData={data[park.id] ?? {}}
                 today={today}
-              />
+                openRideCount={rideCounts?.[park.id]}
+                coastersOnly={coastersOnly}
+                isOpen={openParkIds?.includes(park.id)}
+                isClosing={closingParkIds?.includes(park.id)}
+                isWeatherDelay={weatherDelayParkIds?.includes(park.id)}
+                />
             ))}
           </div>
         </div>

components/ParkCard.tsx

@@ -1,18 +1,25 @@
 import Link from "next/link";
 import type { Park } from "@/lib/scrapers/types";
 import type { DayData } from "@/lib/db";
+import { getTimezoneAbbr } from "@/lib/env";
 
 interface ParkCardProps {
   park: Park;
   weekDates: string[]; // 7 dates YYYY-MM-DD, Sun–Sat
   parkData: Record<string, DayData>;
   today: string;
+  openRideCount?: number;
+  coastersOnly?: boolean;
+  isOpen?: boolean;
+  isClosing?: boolean;
+  isWeatherDelay?: boolean;
 }
 
 const DOW = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
-export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
+export function ParkCard({ park, weekDates, parkData, today, openRideCount, coastersOnly, isOpen, isClosing, isWeatherDelay }: ParkCardProps) {
   const openDays = weekDates.filter((d) => parkData[d]?.isOpen && parkData[d]?.hoursLabel);
+  const tzAbbr = getTimezoneAbbr(park.timezone);
   const isOpenToday = openDays.includes(today);
 
   return (
@@ -21,12 +28,14 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
       data-park={park.name.toLowerCase()}
       style={{ textDecoration: "none", display: "block" }}
     >
-      <div style={{
+      <div className="park-card" style={{
         background: "var(--color-surface)",
         border: "1px solid var(--color-border)",
+        borderLeft: isOpen
+          ? `3px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`
+          : "1px solid var(--color-border)",
         borderRadius: 12,
         overflow: "hidden",
-        transition: "border-color 120ms ease",
       }}>
         {/* ── Card header ───────────────────────────────────────────────────── */}
         <div style={{
@@ -34,9 +43,10 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
           display: "flex",
           alignItems: "flex-start",
           justifyContent: "space-between",
+          flexWrap: "wrap",
           gap: 12,
         }}>
-          <div>
+          <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{
               fontSize: "0.95rem",
               fontWeight: 600,
@@ -54,20 +64,20 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
             </div>
           </div>
 
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5 }}>
           {isOpenToday ? (
             <div style={{
-              background: "var(--color-open-bg)",
-              border: "1px solid var(--color-open-border)",
+              background: isWeatherDelay ? "var(--color-weather-bg)" : isClosing ? "var(--color-closing-bg)" : "var(--color-open-bg)",
+              border: `1px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`,
               borderRadius: 20,
               padding: "4px 10px",
               fontSize: "0.65rem",
               fontWeight: 700,
-              color: "var(--color-open-text)",
+              color: isWeatherDelay ? "var(--color-weather-text)" : isClosing ? "var(--color-closing-text)" : "var(--color-open-text)",
               whiteSpace: "nowrap",
-              flexShrink: 0,
               letterSpacing: "0.03em",
             }}>
-              Open today
+              {isWeatherDelay ? "⛈ Weather Delay" : isClosing ? "Closing" : "Open today"}
             </div>
           ) : (
             <div style={{
@@ -79,11 +89,33 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
               fontWeight: 500,
               color: "var(--color-text-muted)",
               whiteSpace: "nowrap",
-              flexShrink: 0,
             }}>
               Closed today
             </div>
           )}
+          {isOpenToday && isWeatherDelay && (
+            <div style={{
+              fontSize: "0.65rem",
+              color: "var(--color-weather-hours, #bfdbfe)",
+              fontWeight: 500,
+              textAlign: "right",
+            }}>
+              ⛈ Weather Delay
+            </div>
+          )}
+          {isOpenToday && !isWeatherDelay && openRideCount !== undefined && (
+            <div style={{
+              fontSize: "0.65rem",
+              color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)",
+              fontWeight: 500,
+              textAlign: "right",
+            }}>
+              {openRideCount} {coastersOnly
+                ? (openRideCount === 1 ? "coaster" : "coasters")
+                : (openRideCount === 1 ? "ride" : "rides")} operating
+            </div>
+          )}
+          </div>
         </div>
 
         {/* ── Open days list ────────────────────────────────────────────────── */}
@@ -121,10 +153,10 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
                   <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                     {isPH && (
                       <span style={{
-                        fontSize: "0.58rem",
+                        fontSize: "0.65rem",
                         fontWeight: 700,
                         color: "var(--color-ph-label)",
-                        letterSpacing: "0.05em",
+                        letterSpacing: "0.04em",
                         textTransform: "uppercase",
                       }}>
                         Passholder
@@ -139,7 +171,10 @@ export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
                         ? "var(--color-today-text)"
                         : "var(--color-open-hours)",
                     }}>
-                      {dayData.hoursLabel}
+                      {dayData.hoursLabel}{" "}
+                      <span style={{ fontSize: "0.68rem", fontWeight: 400, color: "var(--color-text-dim)" }}>
+                        {tzAbbr}
+                      </span>
                     </span>
                   </div>
                 </div>

components/ParkMonthCalendar.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { DayData } from "@/lib/db";
+import { getTimezoneAbbr } from "@/lib/env";
 
 interface ParkMonthCalendarProps {
   parkId: string;
@@ -7,6 +8,7 @@ interface ParkMonthCalendarProps {
   month: number; // 1-indexed
   monthData: Record<string, DayData>; // 'YYYY-MM-DD' → DayData
   today: string; // YYYY-MM-DD
+  timezone: string; // IANA timezone, e.g. "America/New_York"
 }
 
 const DOW_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -29,7 +31,8 @@ function daysInMonth(year: number, month: number): number {
   return new Date(year, month, 0).getDate();
 }
 
-export function ParkMonthCalendar({ parkId, year, month, monthData, today }: ParkMonthCalendarProps) {
+export function ParkMonthCalendar({ parkId, year, month, monthData, today, timezone }: ParkMonthCalendarProps) {
+  const tzAbbr = getTimezoneAbbr(timezone);
   const firstDow = new Date(year, month - 1, 1).getDay(); // 0=Sun
   const totalDays = daysInMonth(year, month);
 
@@ -115,97 +118,126 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today }: Par
           ))}
         </div>
 
-        {/* Weeks */}
-        {weeks.map((week, wi) => (
-          <div key={wi} style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(7, 1fr)",
-            borderBottom: wi < weeks.length - 1 ? "1px solid var(--color-border-subtle)" : "none",
-          }}>
-            {week.map((cell, ci) => {
-              if (!cell.day || !cell.iso) {
-                return (
-                  <div key={ci} style={{
-                    minHeight: 96,
-                    background: ci === 0 || ci === 6 ? "var(--color-weekend-header)" : "transparent",
-                    borderRight: ci < 6 ? "1px solid var(--color-border-subtle)" : "none",
-                  }} />
-                );
-              }
-
-              const dayData = monthData[cell.iso];
-              const isToday = cell.iso === today;
-              const isWeekend = ci === 0 || ci === 6;
-              const isOpen = dayData?.isOpen && dayData?.hoursLabel;
-              const isPH = dayData?.specialType === "passholder_preview";
-
-              const bg = isToday
-                ? "var(--color-today-bg)"
-                : isWeekend
-                ? "var(--color-weekend-header)"
-                : "transparent";
+        {/*
+          All day cells in ONE flat grid — eliminates per-week wrapper
+          divs that caused independent row heights and the slant effect.
+          Row height is controlled responsively via .park-calendar-grid CSS:
+          mobile = 72px fixed, sm+ = minmax(96px, auto).
+        */}
+        <div
+          className="park-calendar-grid"
+          style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}
+        >
+          {cells.map((cell, idx) => {
+            const ci = idx % 7;
+            const isLastRow = idx >= cells.length - 7;
+            const borderBottom = !isLastRow ? "1px solid var(--color-border-subtle)" : "none";
+            const borderRight  = ci < 6     ? "1px solid var(--color-border-subtle)" : "none";
 
+            if (!cell.day || !cell.iso) {
               return (
-                <div key={ci} style={{
-                  minHeight: 96,
-                  padding: "10px 12px",
-                  background: bg,
-                  borderRight: ci < 6 ? "1px solid var(--color-border-subtle)" : "none",
-                  borderLeft: isToday ? "2px solid var(--color-today-border)" : "none",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 5,
-                }}>
-                  {/* Date number */}
-                  <span style={{
-                    fontSize: "0.95rem",
-                    fontWeight: isToday ? 700 : isWeekend ? 600 : 400,
-                    color: isToday
-                      ? "var(--color-today-text)"
-                      : isWeekend
-                      ? "var(--color-text)"
-                      : "var(--color-text-muted)",
-                    lineHeight: 1,
-                  }}>
-                    {cell.day}
-                  </span>
-
-                  {/* Status */}
-                  {!dayData ? (
-                    <span style={{ fontSize: "0.75rem", color: "var(--color-text-dim)" }}>—</span>
-                  ) : isPH && isOpen ? (
-                    <div style={{
-                      background: "var(--color-ph-bg)",
-                      border: "1px solid var(--color-ph-border)",
-                      borderRadius: 5,
-                      padding: "3px 6px",
-                    }}>
-                      <div style={{ fontSize: "0.6rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
-                        Passholder
-                      </div>
-                      <div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 2 }}>
-                        {dayData.hoursLabel}
-                      </div>
-                    </div>
-                  ) : isOpen ? (
-                    <div style={{
-                      background: "var(--color-open-bg)",
-                      border: "1px solid var(--color-open-border)",
-                      borderRadius: 5,
-                      padding: "3px 6px",
-                    }}>
-                      <div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
-                        {dayData.hoursLabel}
-                      </div>
-                    </div>
-                  ) : (
-                    <span style={{ fontSize: "1rem", color: "var(--color-text-dim)", lineHeight: 1 }}>·</span>
-                  )}
-                </div>
+                <div key={idx} style={{
+                  overflow: "hidden",
+                  background: ci === 0 || ci === 6 ? "var(--color-weekend-header)" : "transparent",
+                  borderRight,
+                  borderBottom,
+                }} />
               );
-            })}
-          </div>
-        ))}
+            }
+
+            const dayData  = monthData[cell.iso];
+            const isToday  = cell.iso === today;
+            const isWeekend = ci === 0 || ci === 6;
+            const isOpen   = dayData?.isOpen && dayData?.hoursLabel;
+            const isPH     = dayData?.specialType === "passholder_preview";
+
+            const bg = isToday
+              ? "var(--color-today-bg)"
+              : isWeekend
+              ? "var(--color-weekend-header)"
+              : "transparent";
+
+            return (
+              <div key={idx} style={{
+                padding: "8px 8px",
+                overflow: "hidden",
+                background: bg,
+                borderRight,
+                borderBottom,
+                borderLeft: isToday ? "2px solid var(--color-today-border)" : "none",
+                display: "flex",
+                flexDirection: "column",
+                gap: 6,
+              }}>
+                {/* Date number */}
+                <span style={{
+                  fontSize: "0.88rem",
+                  fontWeight: isToday ? 700 : isWeekend ? 600 : 400,
+                  color: isToday
+                    ? "var(--color-today-text)"
+                    : isWeekend
+                    ? "var(--color-text)"
+                    : "var(--color-text-muted)",
+                  lineHeight: 1,
+                  flexShrink: 0,
+                }}>
+                  {cell.day}
+                </span>
+
+                {/* ── Mobile status: colored dot only (sm:hidden) ──────── */}
+                {/* Cells are ~55px wide on mobile — no room for hours text */}
+                {!dayData ? (
+                  <span className="sm:hidden" style={{ fontSize: "0.7rem", color: "var(--color-text-dim)" }}>—</span>
+                ) : isOpen ? (
+                  <div className="sm:hidden" style={{
+                    width: 7, height: 7, borderRadius: "50%", flexShrink: 0,
+                    background: isPH ? "var(--color-ph-border)" : "var(--color-open-border)",
+                  }} />
+                ) : null}
+
+                {/* ── Desktop status: full pill with hours (hidden sm:block) */}
+                {!dayData ? (
+                  <span className="hidden sm:inline" style={{ fontSize: "0.75rem", color: "var(--color-text-dim)" }}>—</span>
+                ) : isPH && isOpen ? (
+                  <div className="hidden sm:block" style={{
+                    background: "var(--color-ph-bg)",
+                    border: "1px solid var(--color-ph-border)",
+                    borderRadius: 5,
+                    padding: "8px 6px",
+                    textAlign: "center",
+                  }}>
+                    <div style={{ fontSize: "0.6rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+                      Passholder
+                    </div>
+                    <div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 4 }}>
+                      {dayData.hoursLabel}
+                    </div>
+                    <div style={{ fontSize: "0.58rem", color: "var(--color-ph-label)", opacity: 0.75, marginTop: 3, letterSpacing: "0.04em" }}>
+                      {tzAbbr}
+                    </div>
+                  </div>
+                ) : isOpen ? (
+                  <div className="hidden sm:block" style={{
+                    background: "var(--color-open-bg)",
+                    border: "1px solid var(--color-open-border)",
+                    borderRadius: 5,
+                    padding: "8px 6px",
+                    textAlign: "center",
+                  }}>
+                    <div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
+                      {dayData.hoursLabel}
+                    </div>
+                    <div style={{ fontSize: "0.58rem", color: "var(--color-open-hours)", opacity: 0.6, marginTop: 4, letterSpacing: "0.04em" }}>
+                      {tzAbbr}
+                    </div>
+                  </div>
+                ) : (
+                  <span className="hidden sm:inline" style={{ fontSize: "1rem", color: "var(--color-text-dim)", lineHeight: 1 }}>·</span>
+                )}
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
@@ -215,12 +247,13 @@ const navLinkStyle: React.CSSProperties = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
-  padding: "6px 14px",
-  borderRadius: 6,
+  padding: "10px 16px",
+  borderRadius: 8,
   border: "1px solid var(--color-border)",
   background: "var(--color-surface)",
   color: "var(--color-text-muted)",
   fontSize: "1rem",
   lineHeight: 1,
   textDecoration: "none",
+  minWidth: 44,
 };

components/WeekCalendar.tsx

@@ -3,12 +3,18 @@ import Link from "next/link";
 import type { Park } from "@/lib/scrapers/types";
 import type { DayData } from "@/lib/db";
 import type { Region } from "@/lib/parks";
+import { getTodayLocal, getTimezoneAbbr } from "@/lib/env";
 
 interface WeekCalendarProps {
   parks: Park[];
   weekDates: string[]; // 7 dates, YYYY-MM-DD, Sun–Sat
   data: Record<string, Record<string, DayData>>; // parkId → date → DayData
   grouped?: Map<Region, Park[]>; // pre-grouped parks (if provided, renders region headers)
+  rideCounts?: Record<string, number>; // parkId → open ride/coaster count for today
+  coastersOnly?: boolean;
+  openParkIds?: string[];
+  closingParkIds?: string[];
+  weatherDelayParkIds?: string[];
 }
 
 const DOW = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -29,12 +35,12 @@ function parseDate(iso: string) {
 
 function DayCell({
   dayData,
-  isToday,
   isWeekend,
+  tzAbbr,
 }: {
   dayData: DayData | undefined;
-  isToday: boolean;
   isWeekend: boolean;
+  tzAbbr: string;
 }) {
   const base: React.CSSProperties = {
     padding: 0,
@@ -42,15 +48,8 @@ function DayCell({
     verticalAlign: "middle",
     borderBottom: "1px solid var(--color-border)",
     borderLeft: "1px solid var(--color-border)",
-    height: 56,
-    background: isToday
-      ? "var(--color-today-bg)"
-      : isWeekend
-      ? "var(--color-weekend-header)"
-      : "transparent",
-    borderLeftColor: isToday ? "var(--color-today-border)" : undefined,
-    borderRightColor: isToday ? "var(--color-today-border)" : undefined,
-    borderRight: isToday ? "1px solid var(--color-today-border)" : undefined,
+    height: 72,
+    background: isWeekend ? "var(--color-weekend-header)" : "transparent",
     transition: "background 120ms ease",
   };
 
@@ -72,7 +71,7 @@ function DayCell({
 
   if (dayData.specialType === "passholder_preview") {
     return (
-      <td style={{ ...base, padding: 4 }}>
+      <td style={{ ...base, padding: 6 }}>
         <div style={{
           background: "var(--color-ph-bg)",
           border: "1px solid var(--color-ph-border)",
@@ -99,13 +98,21 @@ function DayCell({
           </span>
           <span style={{
             color: "var(--color-ph-hours)",
-            fontSize: "0.7rem",
-            fontWeight: 500,
+            fontSize: "0.78rem",
+            fontWeight: 600,
             letterSpacing: "-0.01em",
             whiteSpace: "nowrap",
           }}>
             {dayData.hoursLabel}
           </span>
+          <span style={{
+            color: "var(--color-ph-label)",
+            fontSize: "0.6rem",
+            fontWeight: 500,
+            letterSpacing: "0.04em",
+          }}>
+            {tzAbbr}
+          </span>
         </div>
       </td>
     );
@@ -117,23 +124,34 @@ function DayCell({
         background: "var(--color-open-bg)",
         border: "1px solid var(--color-open-border)",
         borderRadius: 6,
-        padding: "6px 4px",
+        padding: "4px",
         textAlign: "center",
         height: "100%",
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        gap: 2,
         transition: "filter 150ms ease",
       }}>
         <span style={{
           color: "var(--color-open-hours)",
-          fontSize: "0.7rem",
-          fontWeight: 500,
+          fontSize: "0.78rem",
+          fontWeight: 600,
           letterSpacing: "-0.01em",
           whiteSpace: "nowrap",
         }}>
           {dayData.hoursLabel}
         </span>
+        <span style={{
+          color: "var(--color-open-hours)",
+          fontSize: "0.6rem",
+          fontWeight: 500,
+          opacity: 0.6,
+          letterSpacing: "0.04em",
+        }}>
+          {tzAbbr}
+        </span>
       </div>
     </td>
   );
@@ -148,17 +166,16 @@ function RegionHeader({ region, colSpan }: { region: string; colSpan: number })
           padding: "10px 14px 6px",
           background: "var(--color-region-bg)",
           borderBottom: "1px solid var(--color-border-subtle)",
-          borderLeft: "3px solid var(--color-region-accent)",
         }}
       >
         <span style={{
-          fontSize: "0.65rem",
+          fontSize: "0.6rem",
           fontWeight: 700,
-          letterSpacing: "0.1em",
+          letterSpacing: "0.14em",
           textTransform: "uppercase",
-          color: "var(--color-text-muted)",
+          color: "var(--color-text-secondary)",
         }}>
-          {region}
+          — {region} —
         </span>
       </td>
     </tr>
@@ -171,16 +188,28 @@ function ParkRow({
   weekDates,
   parsedDates,
   parkData,
-  today,
+  rideCounts,
+  coastersOnly,
+  openParkIds,
+  closingParkIds,
+  weatherDelayParkIds,
 }: {
   park: Park;
   parkIdx: number;
   weekDates: string[];
   parsedDates: ReturnType<typeof parseDate>[];
   parkData: Record<string, DayData>;
-  today: string;
+  rideCounts?: Record<string, number>;
+  coastersOnly?: boolean;
+  openParkIds?: string[];
+  closingParkIds?: string[];
+  weatherDelayParkIds?: string[];
 }) {
   const rowBg = parkIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)";
+  const tzAbbr = getTimezoneAbbr(park.timezone);
+  const isOpen = openParkIds?.includes(park.id) ?? false;
+  const isClosing = closingParkIds?.includes(park.id) ?? false;
+  const isWeatherDelay = weatherDelayParkIds?.includes(park.id) ?? false;
   return (
     <tr
       className="park-row"
@@ -191,38 +220,62 @@ function ParkRow({
         position: "sticky",
         left: 0,
         zIndex: 5,
-        padding: "10px 14px",
+        padding: 0,
         borderBottom: "1px solid var(--color-border)",
         borderRight: "1px solid var(--color-border)",
-        whiteSpace: "nowrap",
+        borderLeft: isOpen
+          ? `3px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`
+          : "3px solid transparent",
         verticalAlign: "middle",
         background: rowBg,
         transition: "background 120ms ease",
       }}>
-        <Link href={`/park/${park.id}`} className="park-name-link">
-          <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2 }}>
-            {park.name}
-          </span>
+        <Link href={`/park/${park.id}`} className="park-name-link" style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 14px",
+          gap: 10,
+        }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)", whiteSpace: "nowrap" }}>
+                {park.name}
+              </span>
+            </div>
+            <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
+              {park.location.city}, {park.location.state}
+            </div>
+          </div>
+          {isWeatherDelay && (
+            <div style={{ fontSize: "0.72rem", color: "var(--color-weather-text)", fontWeight: 600, textAlign: "center", maxWidth: 72, lineHeight: 1.3 }}>
+              Weather Delay
+            </div>
+          )}
+          {!isWeatherDelay && rideCounts?.[park.id] !== undefined && (
+            <div style={{ fontSize: "0.72rem", color: isClosing ? "var(--color-closing-hours)" : "var(--color-open-hours)", fontWeight: 600, textAlign: "center", maxWidth: 72, lineHeight: 1.3 }}>
+              {rideCounts[park.id]} {coastersOnly
+                ? (rideCounts[park.id] === 1 ? "coaster" : "coasters")
+                : (rideCounts[park.id] === 1 ? "ride" : "rides")} operating
+            </div>
+          )}
         </Link>
-        <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
-          {park.location.city}, {park.location.state}
-        </div>
       </td>
 
       {weekDates.map((date, i) => (
         <DayCell
           key={date}
           dayData={parkData[date]}
-          isToday={date === today}
           isWeekend={parsedDates[i].isWeekend}
+          tzAbbr={tzAbbr}
         />
       ))}
     </tr>
   );
 }
 
-export function WeekCalendar({ parks, weekDates, data, grouped }: WeekCalendarProps) {
-  const today = new Date().toISOString().slice(0, 10);
+export function WeekCalendar({ parks, weekDates, data, grouped, rideCounts, coastersOnly, openParkIds, closingParkIds, weatherDelayParkIds }: WeekCalendarProps) {
+  const today = getTodayLocal();
   const parsedDates = weekDates.map(parseDate);
 
   const firstMonth = parsedDates[0].month;
@@ -236,7 +289,7 @@ export function WeekCalendar({ parks, weekDates, data, grouped }: WeekCalendarPr
   const colSpan = weekDates.length + 1; // park col + 7 day cols
 
   return (
-    <div style={{ overflowX: "auto", overflowY: "visible" }}>
+    <div style={{ overflowX: "auto", overflowY: "visible", paddingRight: 16 }}>
       <table style={{
         borderCollapse: "collapse",
         width: "100%",
@@ -335,7 +388,11 @@ export function WeekCalendar({ parks, weekDates, data, grouped }: WeekCalendarPr
                   weekDates={weekDates}
                   parsedDates={parsedDates}
                   parkData={data[park.id] ?? {}}
-                  today={today}
+                  rideCounts={rideCounts}
+                  coastersOnly={coastersOnly}
+                  openParkIds={openParkIds}
+                  closingParkIds={closingParkIds}
+                  weatherDelayParkIds={weatherDelayParkIds}
                 />
               ))}
             </Fragment>

components/WeekNav.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 
 interface WeekNavProps {
@@ -32,8 +33,19 @@ function shiftWeek(weekStart: string, delta: number): string {
 
 export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
   const router = useRouter();
-  const nav = (delta: number) =>
+  const nav = (delta: number) => {
     router.push(`/?week=${shiftWeek(weekStart, delta)}`);
+  };
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if (e.key === "ArrowLeft")  nav(-1);
+      if (e.key === "ArrowRight") nav(1);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [weekStart]);
 
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
@@ -63,7 +75,7 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
         fontSize: "1rem",
         fontWeight: 600,
         color: "var(--color-text)",
-        minWidth: 200,
+        minWidth: 140,
         textAlign: "center",
         letterSpacing: "-0.01em",
         fontVariantNumeric: "tabular-nums",
@@ -85,8 +97,8 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
 }
 
 const navBtnStyle: React.CSSProperties = {
-  padding: "6px 14px",
-  borderRadius: 6,
+  padding: "10px 16px",
+  borderRadius: 8,
   border: "1px solid var(--color-border)",
   background: "var(--color-surface)",
   color: "var(--color-text-muted)",
@@ -94,11 +106,13 @@ const navBtnStyle: React.CSSProperties = {
   fontSize: "1rem",
   lineHeight: 1,
   transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
+  minWidth: 44,
+  textAlign: "center",
 };
 
 const navBtnHover: React.CSSProperties = {
-  padding: "6px 14px",
-  borderRadius: 6,
+  padding: "10px 16px",
+  borderRadius: 8,
   border: "1px solid var(--color-text-dim)",
   background: "var(--color-surface-2)",
   color: "var(--color-text-secondary)",
@@ -106,6 +120,8 @@ const navBtnHover: React.CSSProperties = {
   fontSize: "1rem",
   lineHeight: 1,
   transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
+  minWidth: 44,
+  textAlign: "center",
 };
 
 const todayBtnStyle: React.CSSProperties = {

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   web:
-    image: gitea.thewrightserver.net/josh/sixflagssupercalendar:latest
+    image: gitea.thewrightserver.net/josh/sixflagssupercalendar:web
     ports:
       - "3000:3000"
     volumes:
@@ -10,13 +10,14 @@ services:
     restart: unless-stopped
 
   scraper:
-    image: gitea.thewrightserver.net/josh/sixflagssupercalendar:latest
+    image: gitea.thewrightserver.net/josh/sixflagssupercalendar:scraper
     volumes:
       - park_data:/app/data
     environment:
       - NODE_ENV=production
-      - TZ=America/New_York   # set your local timezone so "3am" is 3am your time
-    command: sh /app/scripts/scrape-schedule.sh
+      - TZ=America/New_York
+      - PARK_HOURS_STALENESS_HOURS=72
+      - COASTER_STALENESS_HOURS=720
     restart: unless-stopped
 
 volumes:

lib/db.ts

@@ -46,12 +46,10 @@ export function upsertDay(
   hoursLabel?: string,
   specialType?: string
 ) {
-  // Today and past dates: INSERT new rows freely, but NEVER overwrite existing records.
-  // Once an operating day begins the API drops that date from its response, so a
-  // re-scrape would incorrectly record the day as closed. The DB row written when
-  // the date was still in the future is the permanent truth for that day.
+  // Today and future dates: full upsert — hours can change (e.g. weather delays,
+  // early closures) and the dateless API endpoint now returns today's live data.
   //
-  // Future dates only: full upsert — hours can change and closures can be added.
+  // Past dates: INSERT-only — never overwrite once the day has passed.
   db.prepare(`
     INSERT INTO park_days (park_id, date, is_open, hours_label, special_type, scraped_at)
     VALUES (?, ?, ?, ?, ?, ?)
@@ -60,7 +58,7 @@ export function upsertDay(
       hours_label  = excluded.hours_label,
       special_type = excluded.special_type,
       scraped_at   = excluded.scraped_at
-    WHERE park_days.date > date('now')
+    WHERE park_days.date >= date('now')
   `).run(parkId, date, isOpen ? 1 : 0, hoursLabel ?? null, specialType ?? null, new Date().toISOString());
 }
 
@@ -167,7 +165,8 @@ export function getMonthCalendar(
   return result;
 }
 
-const STALE_AFTER_MS = 72 * 60 * 60 * 1000; // 72 hours
+import { parseStalenessHours } from "./env";
+const STALE_AFTER_MS = parseStalenessHours(process.env.PARK_HOURS_STALENESS_HOURS, 72) * 60 * 60 * 1000;
 
 /**
  * Returns true when the scraper should skip this park+month.

lib/env.ts

@@ -0,0 +1,97 @@
+/**
+ * Environment variable helpers.
+ */
+
+/**
+ * Parse a staleness window from an env var string (interpreted as hours).
+ * Falls back to `defaultHours` when the value is missing, non-numeric,
+ * non-finite, or <= 0 — preventing NaN from silently breaking staleness checks.
+ */
+export function parseStalenessHours(envVar: string | undefined, defaultHours: number): number {
+  const parsed = parseInt(envVar ?? "", 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultHours;
+}
+
+/**
+ * Returns today's date as YYYY-MM-DD using local wall-clock time with a 3 AM
+ * switchover. Before 3 AM local time we still consider it "yesterday", so the
+ * calendar doesn't flip to the next day at midnight while people are still out
+ * at the park.
+ *
+ * Important: `new Date().toISOString()` returns UTC, which causes the date to
+ * advance at 8 PM EDT (UTC-4) or 7 PM EST (UTC-5) — too early. This helper
+ * corrects that by using local year/month/day components and rolling back one
+ * day when the local hour is before 3.
+ */
+export function getTodayLocal(): string {
+  const now = new Date();
+  if (now.getHours() < 3) {
+    now.setDate(now.getDate() - 1);
+  }
+  const y = now.getFullYear();
+  const m = String(now.getMonth() + 1).padStart(2, "0");
+  const d = String(now.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
+/**
+ * Returns the short timezone abbreviation for a given IANA timezone,
+ * e.g. "America/Los_Angeles" → "PDT" or "PST".
+ */
+export function getTimezoneAbbr(timezone: string): string {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
+    timeZoneName: "short",
+  }).formatToParts(new Date());
+  return parts.find((p) => p.type === "timeZoneName")?.value ?? "";
+}
+
+/**
+ * Returns true when the current time in the park's timezone is within
+ * the operating window (open time through 1 hour after close), based on
+ * a hoursLabel like "10am – 6pm". Falls back to true when unparseable.
+ *
+ * Uses the park's IANA timezone so a Pacific park's "10am" is correctly
+ * compared to Pacific time regardless of where the server is running.
+ */
+export function isWithinOperatingWindow(hoursLabel: string, timezone: string): boolean {
+  return getOperatingStatus(hoursLabel, timezone) !== "closed";
+}
+
+/**
+ * Returns the park's current operating status relative to its scheduled hours:
+ *   "open"    — within the scheduled open window
+ *   "closing" — past scheduled close but within the 1-hour wind-down buffer
+ *   "closed"  — outside the window entirely
+ * Falls back to "open" when the label can't be parsed.
+ */
+export function getOperatingStatus(hoursLabel: string, timezone: string): "open" | "closing" | "closed" {
+  const m = hoursLabel.match(
+    /^(\d+)(?::(\d+))?(am|pm)\s*[–-]\s*(\d+)(?::(\d+))?(am|pm)$/i
+  );
+  if (!m) return "open";
+  const toMinutes = (h: string, min: string | undefined, period: string) => {
+    let hours = parseInt(h, 10);
+    const minutes = min ? parseInt(min, 10) : 0;
+    if (period.toLowerCase() === "pm" && hours !== 12) hours += 12;
+    if (period.toLowerCase() === "am" && hours === 12) hours = 0;
+    return hours * 60 + minutes;
+  };
+  const openMin  = toMinutes(m[1], m[2], m[3]);
+  const closeMin = toMinutes(m[4], m[5], m[6]);
+
+  // Get the current time in the park's local timezone.
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: false,
+  }).formatToParts(new Date());
+  const h   = parseInt(parts.find((p) => p.type === "hour")?.value   ?? "0", 10);
+  const min = parseInt(parts.find((p) => p.type === "minute")?.value ?? "0", 10);
+  const nowMin = (h % 24) * 60 + min;
+
+  if (nowMin >= openMin && nowMin <= closeMin) return "open";
+  if (nowMin > closeMin && nowMin <= closeMin + 60) return "closing";
+  return "closed";
+}

lib/park-meta.ts

@@ -44,7 +44,7 @@ export function defaultParkMeta(): ParkMeta {
   return { rcdb_id: null, coasters: [], coasters_scraped_at: null };
 }
 
-const COASTER_STALE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+const COASTER_STALE_MS = parseStalenessHours(process.env.COASTER_STALENESS_HOURS, 720) * 60 * 60 * 1000;
 
 /** Returns true when the coaster list needs to be re-scraped from RCDB. */
 export function areCoastersStale(entry: ParkMeta): boolean {
@@ -54,6 +54,7 @@ export function areCoastersStale(entry: ParkMeta): boolean {
 
 import { normalizeForMatch } from "./coaster-match";
 export { normalizeForMatch as normalizeRideName } from "./coaster-match";
+import { parseStalenessHours } from "./env";
 
 /**
  * Returns a Set of normalized coaster names for fast membership checks.

lib/scrapers/queuetimes.ts

@@ -77,6 +77,7 @@ export async function fetchLiveRides(
     const res = await fetch(url, {
       headers: HEADERS,
       next: { revalidate },
+      signal: AbortSignal.timeout(10_000),
     } as RequestInit & { next: { revalidate: number } });
 
     if (!res.ok) return null;

lib/scrapers/rcdb.ts

@@ -28,7 +28,7 @@ const HEADERS = {
 export async function scrapeRcdbCoasters(rcdbId: number): Promise<string[] | null> {
   const url = `${BASE}/${rcdbId}.htm`;
   try {
-    const res = await fetch(url, { headers: HEADERS });
+    const res = await fetch(url, { headers: HEADERS, signal: AbortSignal.timeout(15_000) });
     if (!res.ok) {
       console.error(`  RCDB ${rcdbId}: HTTP ${res.status}`);
       return null;

lib/scrapers/sixflags.ts

@@ -107,12 +107,12 @@ async function fetchApi(
 ): Promise<ApiResponse> {
   const fetchOpts: RequestInit & { next?: { revalidate: number } } = { headers: HEADERS };
   if (revalidate !== undefined) fetchOpts.next = { revalidate };
-  const res = await fetch(url, fetchOpts);
+  const res = await fetch(url, { ...fetchOpts, signal: AbortSignal.timeout(15_000) });
 
   if (res.status === 429 || res.status === 503) {
     const retryAfter = res.headers.get("Retry-After");
     const waitMs = retryAfter
-      ? parseInt(retryAfter) * 1000
+      ? Math.min(parseInt(retryAfter, 10) * 1000, 5 * 60 * 1000) // cap at 5 min
       : BASE_BACKOFF_MS * Math.pow(2, attempt);
     console.log(
       `  [rate-limited] HTTP ${res.status} — waiting ${waitMs / 1000}s (attempt ${attempt + 1}/${MAX_RETRIES})`
@@ -166,13 +166,48 @@ function apiDateToIso(apiDate: string): string {
   return `${yyyy}-${mm}-${dd}`;
 }
 
+/** Parse a single ApiDay into a DayResult. Shared by scrapeMonth and fetchToday. */
+function parseApiDay(d: ApiDay): DayResult {
+  const date = parseApiDate(d.date);
+  const operating =
+    d.operatings?.find((o) => o.operatingTypeName === "Park") ??
+    d.operatings?.[0];
+  const item = operating?.items?.[0];
+  const hoursLabel =
+    item?.timeFrom && item?.timeTo
+      ? `${fmt24(item.timeFrom)} – ${fmt24(item.timeTo)}`
+      : undefined;
+  const isPassholderPreview = d.events?.some((e) =>
+    e.extEventName.toLowerCase().includes("passholder preview")
+  ) ?? false;
+  const isBuyout = item?.isBuyout ?? false;
+  const isOpen = !d.isParkClosed && hoursLabel !== undefined && (!isBuyout || isPassholderPreview);
+  const specialType: DayResult["specialType"] = isPassholderPreview ? "passholder_preview" : undefined;
+  return { date, isOpen, hoursLabel: isOpen ? hoursLabel : undefined, specialType };
+}
+
 /**
- * Fetch ride operating status for a given date.
+ * Fetch today's operating data directly (no date param = API returns today).
+ * Pass `revalidate` (seconds) for Next.js ISR caching; omit for a fully fresh fetch.
+ */
+export async function fetchToday(apiId: number, revalidate?: number): Promise<DayResult | null> {
+  try {
+    const url = `${API_BASE}/${apiId}`;
+    const raw = await fetchApi(url, 0, 0, revalidate);
+    if (!raw.dates.length) return null;
+    return parseApiDay(raw.dates[0]);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Fetch ride operating status for a given date. Used as a fallback when
+ * Queue-Times live data is unavailable.
  *
- * The Six Flags API drops dates that have already started (including today),
- * returning only tomorrow onwards. When the requested date is missing, we fall
- * back to the nearest available upcoming date in the same month's response so
- * the UI can still show a useful (if approximate) schedule.
+ * The monthly API endpoint (`?date=YYYYMM`) may not include today; use
+ * `fetchToday(apiId)` to get today's park hours directly. The fallback
+ * chain here will find the nearest upcoming date if an exact match is missing.
  *
  * Returns null if no ride data could be found at all (API error, pre-season,
  * no venues in response).
@@ -286,30 +321,7 @@ export async function scrapeMonth(
 
   const data = await fetchApi(url);
 
-  return data.dates.map((d): DayResult => {
-    const date = parseApiDate(d.date);
-    // Prefer the "Park" operating entry; fall back to first entry
-    const operating =
-      d.operatings?.find((o) => o.operatingTypeName === "Park") ??
-      d.operatings?.[0];
-    const item = operating?.items?.[0];
-    const hoursLabel =
-      item?.timeFrom && item?.timeTo
-        ? `${fmt24(item.timeFrom)} – ${fmt24(item.timeTo)}`
-        : undefined;
-
-    const isPassholderPreview = d.events?.some((e) =>
-      e.extEventName.toLowerCase().includes("passholder preview")
-    ) ?? false;
-
-    const isBuyout = item?.isBuyout ?? false;
-
-    // Buyout days are private events — treat as closed unless it's a passholder preview
-    const isOpen = !d.isParkClosed && hoursLabel !== undefined && (!isBuyout || isPassholderPreview);
-    const specialType: DayResult["specialType"] = isPassholderPreview ? "passholder_preview" : undefined;
-
-    return { date, isOpen, hoursLabel: isOpen ? hoursLabel : undefined, specialType };
-  });
+  return data.dates.map(parseApiDay);
 }
 
 /**

next.config.ts

@@ -1,9 +1,34 @@
 import type { NextConfig } from "next";
 
+const CSP = [
+  "default-src 'self'",
+  "script-src 'self' 'unsafe-inline'",  // Next.js requires unsafe-inline for hydration
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data:",
+  "font-src 'self'",
+  "connect-src 'self' https://queue-times.com",
+  "frame-ancestors 'none'",
+].join("; ");
+
 const nextConfig: NextConfig = {
   // better-sqlite3 is a native module — must not be bundled by webpack
   serverExternalPackages: ["better-sqlite3"],
   output: "standalone",
+
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "X-Frame-Options",        value: "DENY" },
+          { key: "Referrer-Policy",        value: "strict-origin-when-cross-origin" },
+          { key: "Permissions-Policy",     value: "geolocation=(), microphone=(), camera=()" },
+          { key: "Content-Security-Policy", value: CSP },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;

scripts/discover.ts

@@ -116,7 +116,6 @@ async function main() {
       // Fetch full info to store name/abbreviation
       const info = await fetchParkInfo(apiId);
       setApiId(db, park.id, apiId, info?.parkAbbreviation, info?.parkName);
-      console.log(`done (ID ${apiId})`);
     } catch (err) {
       console.log(`ERROR: ${err}`);
     }

scripts/scrape.ts

@@ -9,7 +9,7 @@
 
 import { openDb, upsertDay, getApiId, isMonthScraped } from "../lib/db";
 import { PARKS } from "../lib/parks";
-import { scrapeMonth, RateLimitError } from "../lib/scrapers/sixflags";
+import { scrapeMonth, fetchToday, RateLimitError } from "../lib/scrapers/sixflags";
 import { readParkMeta, writeParkMeta, areCoastersStale } from "../lib/park-meta";
 import { scrapeRcdbCoasters } from "../lib/scrapers/rcdb";
 
@@ -100,6 +100,25 @@ async function main() {
   console.log(`\n  ${totalFetched} fetched  ${totalSkipped} skipped  ${totalErrors} errors`);
   if (totalErrors > 0) console.log("  Re-run to retry failed months.");
 
+  // ── Today scrape (always fresh — dateless endpoint returns current day) ────
+  console.log("\n── Today's data ──");
+  for (const park of ready) {
+    const apiId = getApiId(db, park.id)!;
+    process.stdout.write(`  ${park.shortName.padEnd(22)} `);
+    try {
+      const today = await fetchToday(apiId);
+      if (today) {
+        upsertDay(db, park.id, today.date, today.isOpen, today.hoursLabel, today.specialType);
+        console.log(today.isOpen ? `open  ${today.hoursLabel ?? ""}` : "closed");
+      } else {
+        console.log("no data");
+      }
+    } catch {
+      console.log("error");
+    }
+    await sleep(500);
+  }
+
   db.close();
 
   // ── RCDB coaster scrape (30-day staleness) ────────────────────────────────