feat: coaster-only toggle on live ride status panel

Queue-Times groups rides into lands (e.g. "Coasters", "Family", "Kids").
Capture that categorisation in LiveRide.isCoaster and surface it as a
toggle in the new LiveRidePanel client component.

- lib/scrapers/queuetimes.ts: add isCoaster: boolean to LiveRide,
  derived from land.name.toLowerCase().includes("coaster")
- components/LiveRidePanel.tsx: client component replacing the old
  inline LiveRideList; adds a "🎢 Coasters only" pill toggle that
  filters the grid; toggle only appears when the park has coaster-
  categorised rides; amber when active, muted when inactive
- app/park/[id]/page.tsx: swap LiveRideList for LiveRidePanel,
  remove now-dead LiveRideList/LiveRideRow functions

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

app/park/[id]/page.tsx

@@ -6,8 +6,9 @@ import { scrapeRidesForDay } from "@/lib/scrapers/sixflags";
 import { fetchLiveRides } from "@/lib/scrapers/queuetimes";
 import { QUEUE_TIMES_IDS } from "@/lib/queue-times-map";
 import { ParkMonthCalendar } from "@/components/ParkMonthCalendar";
+import { LiveRidePanel } from "@/components/LiveRidePanel";
 import type { RideStatus, RidesFetchResult } from "@/lib/scrapers/sixflags";
-import type { LiveRidesResult, LiveRide } from "@/lib/scrapers/queuetimes";
+import type { LiveRidesResult } from "@/lib/scrapers/queuetimes"; // used as prop type below
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -126,7 +127,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
           </SectionHeading>
 
           {liveRides ? (
-            <LiveRideList
+            <LiveRidePanel
               liveRides={liveRides}
               parkOpenToday={!!parkOpenToday}
             />
@@ -207,158 +208,6 @@ function LiveBadge() {
   );
 }
 
-// ── Live ride list (Queue-Times data) ──────────────────────────────────────
-
-function LiveRideList({
-  liveRides,
-  parkOpenToday,
-}: {
-  liveRides: LiveRidesResult;
-  parkOpenToday: boolean;
-}) {
-  const { rides } = liveRides;
-  const openRides = rides.filter((r) => r.isOpen);
-  const closedRides = rides.filter((r) => !r.isOpen);
-  const anyOpen = openRides.length > 0;
-
-  return (
-    <div>
-      {/* Summary badge row */}
-      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
-        {anyOpen ? (
-          <div style={{
-            background: "var(--color-open-bg)",
-            border: "1px solid var(--color-open-border)",
-            borderRadius: 20,
-            padding: "4px 12px",
-            fontSize: "0.72rem",
-            fontWeight: 600,
-            color: "var(--color-open-hours)",
-          }}>
-            {openRides.length} open
-          </div>
-        ) : (
-          <div style={{
-            background: "var(--color-surface)",
-            border: "1px solid var(--color-border)",
-            borderRadius: 20,
-            padding: "4px 12px",
-            fontSize: "0.72rem",
-            fontWeight: 500,
-            color: "var(--color-text-muted)",
-          }}>
-            {parkOpenToday ? "Not open yet — check back soon" : "No rides open"}
-          </div>
-        )}
-        {anyOpen && closedRides.length > 0 && (
-          <div style={{
-            background: "var(--color-surface)",
-            border: "1px solid var(--color-border)",
-            borderRadius: 20,
-            padding: "4px 12px",
-            fontSize: "0.72rem",
-            fontWeight: 500,
-            color: "var(--color-text-muted)",
-          }}>
-            {closedRides.length} closed / down
-          </div>
-        )}
-      </div>
-
-      {/* Two-column grid */}
-      <div style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-        gap: 6,
-      }}>
-        {openRides.map((ride) => <LiveRideRow key={ride.name} ride={ride} />)}
-        {closedRides.map((ride) => <LiveRideRow key={ride.name} ride={ride} />)}
-      </div>
-
-      {/* Attribution — required by Queue-Times terms */}
-      <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>
-  );
-}
-
-function LiveRideRow({ ride }: { ride: LiveRide }) {
-  const showWait = ride.isOpen && ride.waitMinutes > 0;
-
-  return (
-    <div style={{
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      gap: 10,
-      padding: "8px 12px",
-      background: "var(--color-surface)",
-      border: `1px solid ${ride.isOpen ? "var(--color-open-border)" : "var(--color-border)"}`,
-      borderRadius: 8,
-      opacity: ride.isOpen ? 1 : 0.6,
-    }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
-        <span style={{
-          width: 7,
-          height: 7,
-          borderRadius: "50%",
-          background: ride.isOpen ? "var(--color-open-text)" : "var(--color-text-dim)",
-          flexShrink: 0,
-        }} />
-        <span style={{
-          fontSize: "0.8rem",
-          color: ride.isOpen ? "var(--color-text)" : "var(--color-text-muted)",
-          fontWeight: ride.isOpen ? 500 : 400,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}>
-          {ride.name}
-        </span>
-      </div>
-      {showWait && (
-        <span style={{
-          fontSize: "0.72rem",
-          color: "var(--color-open-hours)",
-          fontWeight: 600,
-          flexShrink: 0,
-          whiteSpace: "nowrap",
-        }}>
-          {ride.waitMinutes} min
-        </span>
-      )}
-      {ride.isOpen && !showWait && (
-        <span style={{
-          fontSize: "0.68rem",
-          color: "var(--color-open-text)",
-          fontWeight: 500,
-          flexShrink: 0,
-          opacity: 0.7,
-        }}>
-          walk-on
-        </span>
-      )}
-    </div>
-  );
-}
-
 // ── Schedule ride list (Six Flags operating-hours API fallback) ────────────
 
 function RideList({