map WIP

app/(main)/map/map.module.css

@@ -85,6 +85,7 @@
   height: fit-content; /* Allow natural height */
   display: block; /* Change to block for proper scrolling */
   overflow: visible; /* Show content beyond boundaries */
+  z-index: 5; /* Ensure it's above the background */
 }
 
 .svg-container svg {
@@ -95,7 +96,12 @@
   object-fit: none; /* Don't constrain the SVG */
 }
 
-/* Map background - display as full-page map */
+/* Remove the default map background when we have the processed SVG */
+.svg-container + .map-background {
+  display: none;
+}
+
+/* Map background - only shown when SVG is loading */
 .map-background {
   position: absolute;
   top: 0;
@@ -106,7 +112,7 @@
   background-size: auto; /* Don't resize the background */
   background-position: top right; /* Position at top right */
   background-repeat: no-repeat;
-  z-index: 5;
+  z-index: 3; /* Lower z-index than the processed SVG */
 }
 
 /* Circle elements in the SVG map - attach to a container class */
@@ -119,6 +125,70 @@
   fill: #ffb74d !important; /* Only change color on hover, no movement */
 }
 
+/* Circle elements in the SVG map - attach to a container class */
+.svg-container circle.clue-point {
+  cursor: pointer;
+  transition: fill 0.3s ease, stroke-width 0.3s ease;
+  pointer-events: all; /* Ensure clicks are detected */
+  stroke-width: 2px;
+  r: 8; /* Set a minimum radius for all clue points */
+}
+
+/* Improve circle visibility and interactivity */
+.svg-container circle.clue-point {
+  cursor: pointer !important;
+  transition: all 0.3s ease;
+  pointer-events: all !important;
+  stroke-width: 2px;
+  r: 12px; /* Larger radius for better visibility and easier clicks */
+  z-index: 10;
+  position: relative;
+}
+
+/* Enhance hover effect */
+.svg-container circle.clue-point:hover {
+  fill: #ffb74d !important; /* Orange hover color */
+  stroke: #ff6d00 !important;
+  stroke-width: 4px !important;
+  transform: scale(1.2);
+  z-index: 20;
+  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
+}
+
+/* Invisible click areas for easier interaction */
+.svg-container circle.clue-point-click-area {
+  pointer-events: all !important;
+  cursor: pointer !important;
+  opacity: 0.01; /* Nearly invisible but still interactive */
+  z-index: 5;
+}
+
+/* Create custom animation for the current clue */
+@keyframes clue-point-pulse {
+  0% {
+    stroke-width: 3px;
+    transform: scale(1);
+    filter: drop-shadow(0px 0px 2px rgba(255, 152, 0, 0.7));
+  }
+  50% {
+    stroke-width: 5px;
+    transform: scale(1.2);
+    filter: drop-shadow(0px 0px 8px rgba(255, 152, 0, 0.9));
+  }
+  100% {
+    stroke-width: 3px;
+    transform: scale(1);
+    filter: drop-shadow(0px 0px 2px rgba(255, 152, 0, 0.7));
+  }
+}
+
+.svg-container circle.clue-point:hover {
+  fill: #ffb74d !important; /* Orange hover color */
+  stroke: #ff6d00;
+  stroke-width: 3px;
+  transform: scale(1.1);
+}
+
 /* Remaining styles unchanged */
 .map-svg {
   width: 100% !important; /* Override Next.js Image default width */
@@ -133,8 +203,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
   width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  background-color: rgba(105, 181, 168, 0.8);
 }
 
 .loading-spinner {