fix(earthquakes): Remove position:relative CSS causing icon offset

ROOT CAUSE IDENTIFIED:
The popup was appearing in the correct location (Japan) but the icon
was appearing elsewhere (Australia). This proved the marker position
was CORRECT but the icon visual was being offset.

PROBLEM:
CSS rule 'position: relative !important' on .earthquake-icon was
breaking Leaflet's marker positioning, causing icons to render far
from their actual marker positions.

SOLUTION:
- Removed 'position: relative' from .earthquake-icon CSS
- Removed 'position: relative' from .earthquake-icon div CSS
- Reverted to standard [lat, lon] format (popup confirmed this is correct)

The popups appearing in correct locations proved:
- Coordinate extraction is correct: lat=coords[1], lon=coords[0]
- Marker positioning is correct: L.marker([lat, lon])
- Only the icon visual rendering was broken by CSS

This explains why the issue persisted regardless of [lat,lon] vs [lon,lat]
testing - the CSS was always breaking the icon positioning.

src/plugins/layers/useEarthquakes.js

@@ -96,8 +96,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
         mag: mag,
         geojson: `[lon=${coords[0]}, lat=${coords[1]}, depth=${coords[2]}]`,
         extracted: `lat=${lat} (coords[1]), lon=${lon} (coords[0])`,
-        leafletMarkerCall: `L.marker([${lon}, ${lat}])`,
+        leafletMarkerCall: `L.marker([${lat}, ${lon}])`,
-        explanation: `TESTING: Using [longitude, latitude] format`
+        explanation: `Standard Leaflet [latitude, longitude] format - CSS position fixed`
       });
 
       currentQuakeIds.add(quakeId);
@@ -147,21 +147,18 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           box-shadow: 0 2px 8px rgba(0,0,0,0.5);
         ">${waveIcon}</div>`,
         iconSize: [size, size],
-        iconAnchor: [size/2, size/2]
+        iconAnchor: [size/2, size/2],
+        popupAnchor: [0, 0]  // Popup appears at the marker position (icon center)
       });
       
       console.log(`📍 Creating marker for ${quakeId}: M${mag.toFixed(1)} at [lat=${lat}, lon=${lon}] - ${props.place}`);
       
-      // TESTING: Try swapping to [lon, lat] format
+      // Use standard Leaflet [latitude, longitude] format
-      // Based on user testing, [lat, lon] format is plotting in wrong locations
+      // The popup was appearing in the correct location, confirming marker position is correct
-      // Japan earthquake (37.6°N, 142.4°E) appearing near Tasmania with [lat, lon]
+      // The icon was appearing offset due to CSS position: relative issue (now fixed)
-      // This suggests coordinates need to be swapped
+      const markerCoords = [lat, lon];  // CORRECT: [latitude, longitude]
-      const markerCoords = [lon, lat];  // SWAPPED: [longitude, latitude]
       
-      console.log(`   → TESTING [LON, LAT] FORMAT:`);
+      console.log(`   → Creating L.marker([${markerCoords[0]}, ${markerCoords[1]}]) = [lat, lon]`);
-      console.log(`   → markerCoords = [${markerCoords[0]}, ${markerCoords[1]}]`);
-      console.log(`   → This is [${lon}, ${lat}] = [longitude, latitude]`);
-      console.log(`   → For Japan: [142.4, 37.6] should plot in Japan, not Tasmania`);
       
       const circle = L.marker(markerCoords, { 
         icon, 
@@ -196,8 +193,8 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
           }
         }, 10);
         
-        // Create pulsing ring effect - use same [lon, lat] format as marker
+        // Create pulsing ring effect - use same [lat, lon] format
-        const pulseRing = L.circle([lon, lat], {
+        const pulseRing = L.circle([lat, lon], {
           radius: 50000, // 50km radius in meters
           fillColor: color,
           fillOpacity: 0,

src/styles/main.css

@@ -876,7 +876,7 @@ body::before {
 .earthquake-icon {
   z-index: 10000 !important;
   pointer-events: auto;
-  position: relative !important;
+  /* Removed position: relative - was causing icons to appear offset from marker position */
 }
 
 .earthquake-icon div {
@@ -885,7 +885,7 @@ body::before {
   justify-content: center;
   cursor: pointer;
   user-select: none;
-  position: relative;
+  /* position: relative removed here too */
   z-index: 10000 !important;
 }