fixed the map, made it so the map is scrollable and synced the timing between the admin page and map page. They now share the same elapsed time. need to fix map css for altering the svg.

Grey = cant click
Red = current
Green = complete
blue = skipped?

Need to add Clue page Need to fix Leaderboard.

app/(main)/admin/page.js

@@ -2,6 +2,11 @@
 import { useState, useEffect, useRef } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import {
+  setHuntTimer,
+  clearHuntTimer,
+  formatElapsedTime,
+} from "@/utils/timerService";
 
 export default function AdminDashboard() {
   const { data: session, status } = useSession();
@@ -38,6 +43,9 @@ export default function AdminDashboard() {
             const currentTime = Date.now();
             const elapsed = Math.floor((currentTime - startTime) / 1000);
             setElapsedTime(elapsed);
+
+            // Update global timer data for all clients
+            setHuntTimer(data.startTime, data.endTime);
           }
 
           // If there's an end time, set it
@@ -182,6 +190,9 @@ export default function AdminDashboard() {
           setTimerEndTime(null);
         }
 
+        // Update global timer data for all clients
+        setHuntTimer(data.startTime, data.endTime);
+
         setError("");
       } else {
         setError(data.error || "Failed to start timer");
@@ -210,7 +221,11 @@ export default function AdminDashboard() {
       if (data.success) {
         setTimerActive(false);
         setTimerEndTime(null);
-        setError("");
+        setElapsedTime(0);
+        formatTimeDisplay(0);
+
+        // Clear timer data for all clients
+        clearHuntTimer();
       } else {
         setError(data.error || "Failed to stop timer");
       }