fix: robust coaster matching + dark carnival color scheme

Matching fixes:
- normalize() now strips all non-word/non-space chars via [^\w\s] instead of
  a hand-rolled list, catching !, curly apostrophe (U+2019), and any future edge cases
- Add isCoaster() helper with prefix matching (min 5 chars) to handle subtitle
  mismatches in either direction (e.g. "Apocalypse" vs "Apocalypse the Ride",
  "The New Revolution - Classic" vs "New Revolution")
- Fix top-level rides loop which still used coasterNames.has(normalize()) instead
  of isCoaster() — this was the recurring bug causing top-level rides to miss

UI:
- Dark neutral base (#111) replacing cold navy and muddy purple
- Neon accent palette: hot pink, electric green, vivid yellow, cyan
- Park page max-width 960→1280px, calendar cells 72→96px tall
- Scrollbar accent matches theme

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

app/globals.css

@@ -1,49 +1,49 @@
 @import "tailwindcss";
 
 @theme {
-  /* ── Backgrounds ─────────────────────────────────────────────────────────── */
+  /* ── Backgrounds — deep neutral dark, no purple tint ─────────────────────── */
-  --color-bg: #0c1220;
+  --color-bg: #111111;
-  --color-surface: #141c2e;
+  --color-surface: #1c1c1c;
-  --color-surface-2: #1c2640;
+  --color-surface-2: #242424;
-  --color-surface-hover: #222e4a;
+  --color-surface-hover: #2c2c2c;
-  --color-border: #1f2d45;
+  --color-border: #333333;
-  --color-border-subtle: #172035;
+  --color-border-subtle: #272727;
 
-  /* ── Text ────────────────────────────────────────────────────────────────── */
+  /* ── Text — clean white, no tint ─────────────────────────────────────────── */
-  --color-text: #f1f5f9;
+  --color-text: #f5f5f5;
-  --color-text-secondary: #94a3b8;
+  --color-text-secondary: #b0b0b0;
-  --color-text-muted: #64748b;
+  --color-text-muted: #737373;
-  --color-text-dim: #475569;
+  --color-text-dim: #4a4a4a;
 
-  /* ── Warm accent (Today / active states) ─────────────────────────────────── */
+  /* ── Hot pink accent — neon sign energy ──────────────────────────────────── */
-  --color-accent: #f59e0b;
+  --color-accent: #ff4d8d;
-  --color-accent-hover: #d97706;
+  --color-accent-hover: #e6006e;
-  --color-accent-text: #fef3c7;
+  --color-accent-text: #fff0f7;
-  --color-accent-muted: #78350f;
+  --color-accent-muted: #3d0f22;
 
-  /* ── Open (green) ────────────────────────────────────────────────────────── */
+  /* ── Open — electric lime green (go!) ────────────────────────────────────── */
-  --color-open-bg: #052e16;
+  --color-open-bg: #0a1a0d;
-  --color-open-border: #16a34a;
+  --color-open-border: #22c55e;
   --color-open-text: #4ade80;
-  --color-open-hours: #dcfce7;
+  --color-open-hours: #bbf7d0;
 
-  /* ── Passholder preview (purple) ─────────────────────────────────────────── */
+  /* ── Passholder preview — vivid cyan ─────────────────────────────────────── */
-  --color-ph-bg: #1e0f2e;
+  --color-ph-bg: #051518;
-  --color-ph-border: #7e22ce;
+  --color-ph-border: #22d3ee;
-  --color-ph-hours: #e9d5ff;
+  --color-ph-hours: #cffafe;
-  --color-ph-label: #c084fc;
+  --color-ph-label: #67e8f9;
 
-  /* ── Today column (amber instead of cold blue) ───────────────────────────── */
+  /* ── Today — vivid yellow, unmissable ────────────────────────────────────── */
-  --color-today-bg: #1c1a0e;
+  --color-today-bg: #1a1800;
-  --color-today-border: #f59e0b;
+  --color-today-border: #facc15;
-  --color-today-text: #fde68a;
+  --color-today-text: #fef08a;
 
-  /* ── Weekend header ──────────────────────────────────────────────────────── */
+  /* ── Weekend — barely-there dark tint ───────────────────────────────────────*/
-  --color-weekend-header: #141f35;
+  --color-weekend-header: #181818;
 
   /* ── Region header ───────────────────────────────────────────────────────── */
-  --color-region-bg: #0e1628;
+  --color-region-bg: #161616;
-  --color-region-accent: #334155;
+  --color-region-accent: #ff4d8d;
 }
 
 :root {
@@ -64,14 +64,14 @@
   height: 6px;
 }
 ::-webkit-scrollbar-track {
-  background: var(--color-bg);
+  background: var(--color-surface-2);
 }
 ::-webkit-scrollbar-thumb {
   background: var(--color-border);
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-muted);
+  background: var(--color-accent);
 }
 
 /* ── Sticky column shadow when scrolling ─────────────────────────────────── */

app/park/[id]/page.tsx

@@ -100,7 +100,7 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
         </span>
       </header>
 
-      <main style={{ padding: "24px", maxWidth: 960, margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
+      <main style={{ padding: "24px 32px", maxWidth: 1280, margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
 
         {/* ── Month Calendar ───────────────────────────────────────────────── */}
         <section>

components/ParkMonthCalendar.tsx

@@ -126,7 +126,7 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today }: Par
               if (!cell.day || !cell.iso) {
                 return (
                   <div key={ci} style={{
-                    minHeight: 72,
+                    minHeight: 96,
                     background: ci === 0 || ci === 6 ? "var(--color-weekend-header)" : "transparent",
                     borderRight: ci < 6 ? "1px solid var(--color-border-subtle)" : "none",
                   }} />
@@ -147,18 +147,18 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today }: Par
 
               return (
                 <div key={ci} style={{
-                  minHeight: 72,
+                  minHeight: 96,
-                  padding: "8px 10px",
+                  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: 4,
+                  gap: 5,
                 }}>
                   {/* Date number */}
                   <span style={{
-                    fontSize: "0.85rem",
+                    fontSize: "0.95rem",
                     fontWeight: isToday ? 700 : isWeekend ? 600 : 400,
                     color: isToday
                       ? "var(--color-today-text)"
@@ -172,18 +172,18 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today }: Par
 
                   {/* Status */}
                   {!dayData ? (
-                    <span style={{ fontSize: "0.65rem", color: "var(--color-text-dim)" }}>—</span>
+                    <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: 4,
+                      borderRadius: 5,
-                      padding: "2px 5px",
+                      padding: "3px 6px",
                     }}>
-                      <div style={{ fontSize: "0.55rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+                      <div style={{ fontSize: "0.6rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
                         Passholder
                       </div>
-                      <div style={{ fontSize: "0.6rem", color: "var(--color-ph-hours)", marginTop: 1 }}>
+                      <div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 2 }}>
                         {dayData.hoursLabel}
                       </div>
                     </div>
@@ -191,15 +191,15 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today }: Par
                     <div style={{
                       background: "var(--color-open-bg)",
                       border: "1px solid var(--color-open-border)",
-                      borderRadius: 4,
+                      borderRadius: 5,
-                      padding: "2px 5px",
+                      padding: "3px 6px",
                     }}>
-                      <div style={{ fontSize: "0.6rem", color: "var(--color-open-hours)" }}>
+                      <div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
                         {dayData.hoursLabel}
                       </div>
                     </div>
                   ) : (
-                    <span style={{ fontSize: "0.9rem", color: "var(--color-text-dim)", lineHeight: 1 }}>·</span>
+                    <span style={{ fontSize: "1rem", color: "var(--color-text-dim)", lineHeight: 1 }}>·</span>
                   )}
                 </div>
               );

lib/park-meta.ts

@@ -67,9 +67,9 @@ export function areCoastersStale(entry: ParkMeta): boolean {
  */
 export function normalizeRideName(name: string): string {
   return name
-    .replace(/[™®©]/g, "")
+    .replace(/[\u2122\u00ae\u00a9™®©]/g, "")
     .replace(/^the\s+/i, "")
-    .replace(/[-:'".]/g, " ")
+    .replace(/[^\w\s]/g, " ")
     .replace(/\s+/g, " ")
     .toLowerCase()
     .trim();

lib/scrapers/queuetimes.ts

@@ -11,18 +11,44 @@ const BASE = "https://queue-times.com/parks";
 
 /**
  * Normalize a ride name for fuzzy matching between Queue-Times and RCDB.
- * Strips trademark symbols, leading "THE ", and punctuation before comparing.
+ *
+ * - Strips trademark/copyright symbols (™ ® © and Unicode variants)
+ * - Strips leading "THE " prefix
+ * - Replaces ALL non-word, non-space characters with a space
+ *   (handles !, -, :, ', ' U+2019, ", and any other punctuation)
+ * - Collapses whitespace, lowercases, trims
  */
 function normalize(name: string): string {
   return name
-    .replace(/[™®©]/g, "")
+    .replace(/[\u2122\u00ae\u00a9™®©]/g, "")
     .replace(/^the\s+/i, "")
-    .replace(/[-:'".]/g, " ")
+    .replace(/[^\w\s]/g, " ")
     .replace(/\s+/g, " ")
     .toLowerCase()
     .trim();
 }
 
+/**
+ * Check if a Queue-Times ride name matches any coaster in the RCDB set.
+ *
+ * Exact normalized match covers most cases. Prefix matching handles cases
+ * where one source drops or adds a subtitle:
+ *   "Apocalypse" (QT) vs "Apocalypse the Ride" (RCDB)
+ *   "The New Revolution - Classic" (QT) vs "New Revolution" (RCDB)
+ *
+ * Minimum 5 chars on the shorter side prevents accidental short matches.
+ */
+function isCoaster(name: string, coasterSet: Set<string>): boolean {
+  const norm = normalize(name);
+  if (coasterSet.has(norm)) return true;
+  for (const c of coasterSet) {
+    const shorter = norm.length <= c.length ? norm : c;
+    const longer  = norm.length <= c.length ? c : norm;
+    if (shorter.length >= 5 && longer.startsWith(shorter)) return true;
+  }
+  return false;
+}
+
 const HEADERS = {
   "User-Agent":
     "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 " +
@@ -105,7 +131,7 @@ export async function fetchLiveRides(
           isOpen: r.is_open,
           waitMinutes: r.wait_time ?? 0,
           lastUpdated: r.last_updated,
-          isCoaster: coasterNames ? coasterNames.has(normalize(r.name)) : false,
+          isCoaster: coasterNames ? isCoaster(r.name, coasterNames) : false,
         });
       }
     }
@@ -118,7 +144,7 @@ export async function fetchLiveRides(
         isOpen: r.is_open,
         waitMinutes: r.wait_time ?? 0,
         lastUpdated: r.last_updated,
-        isCoaster: coasterNames ? coasterNames.has(normalize(r.name)) : false,
+        isCoaster: coasterNames ? isCoaster(r.name, coasterNames) : false,
       });
     }