From 3443a969cd6991a67962757c2df2ea32a2db2c20 Mon Sep 17 00:00:00 2001
From: HikeMap User <melancholytron@gmail.com>
Date: Sat, 10 Jan 2026 20:33:46 -0600
Subject: [PATCH] Fix WASD controls, fog of war rotation, and mobile touch
 handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace touch/mouse events with Pointer Events API for WASD buttons
- Add setPointerCapture for reliable hold detection on mobile
- Fix fog of war radius calculation to use Math.hypot for rotation support
- Add pitch event listener for fog updates
- Disable map pitch/tilt to keep fog circles correct (temporary)
- Show WASD controls when GPS Test Mode enabled via admin panel
- Add CSS touch-action and tap-highlight fixes for mobile

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 1211 +++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 809 insertions(+), 402 deletions(-)

diff --git a/index.html b/index.html
index d994f40..1af575e 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
     <meta property="og:type" content="website">
     <meta property="og:image" content="/icon-512x512.png">
 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link href="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" />
     <style>
         :root {
@@ -58,27 +58,16 @@
             position: relative;
             z-index: 1;
         }
-        /* In nav mode, disable pointer events on trails so markers are easier to tap */
-        body.nav-mode .leaflet-overlay-pane path.leaflet-interactive {
-            pointer-events: none;
-        }
-        /* But keep route highlight interactive for potential future use */
-        body.nav-mode .leaflet-overlay-pane path.route-highlight {
-            pointer-events: auto;
-        }
-        /* Ensure Leaflet doesn't block our popups */
-        .leaflet-container {
+        /* Ensure MapLibre map doesn't block our popups */
+        .maplibregl-map {
             z-index: 1 !important;
         }
-        /* Ensure marker pane stays above tiles during zoom */
-        .leaflet-marker-pane {
+        /* MapLibre markers z-index */
+        .maplibregl-marker {
             z-index: 600 !important;
         }
-        .leaflet-overlay-pane {
-            z-index: 400 !important;
-        }
-        /* Fog of War overlay - between overlay and marker panes */
-        .leaflet-fog-pane {
+        /* Fog of War overlay */
+        .fog-overlay {
             z-index: 450 !important;
             pointer-events: none;
         }
@@ -2275,6 +2264,8 @@
         .monster-marker-container {
             background: transparent !important;
             border: none !important;
+            pointer-events: auto !important;
+            touch-action: none;
         }
         .monster-marker {
             position: relative;
@@ -2289,6 +2280,11 @@
             /* Semi-transparent background for tap area */
             background: radial-gradient(circle, rgba(255,100,100,0.25) 0%, rgba(255,100,100,0) 70%);
             border-radius: 50%;
+            pointer-events: auto;
+            touch-action: none;
+            -webkit-touch-callout: none;
+            user-select: none;
+            -webkit-user-select: none;
         }
         .monster-marker:hover {
             transform: scale(1.2);
@@ -2901,6 +2897,9 @@
             grid-template-rows: 50px 50px;
             gap: 4px;
             opacity: 0.85;
+            touch-action: none;
+            -webkit-touch-callout: none;
+            pointer-events: auto;
         }
         .wasd-controls.hidden {
             display: none;
@@ -2922,7 +2921,11 @@
             transition: all 0.1s;
             user-select: none;
             -webkit-user-select: none;
-            touch-action: manipulation;
+            -webkit-touch-callout: none;
+            touch-action: none;
+            -ms-touch-action: none;
+            pointer-events: auto;
+            -webkit-tap-highlight-color: transparent;
         }
         .wasd-btn:active {
             transform: scale(0.95);
@@ -3471,6 +3474,36 @@
         .blend-section .blend-row {
             margin-bottom: 10px;
         }
+        .color-picker-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            gap: 10px;
+        }
+        .color-picker-row:last-child {
+            margin-bottom: 0;
+        }
+        .color-picker-label {
+            flex: 1;
+            font-size: 12px;
+            color: #444;
+        }
+        .color-picker-row input[type="color"] {
+            width: 36px;
+            height: 28px;
+            padding: 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            -webkit-appearance: none;
+        }
+        .color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
+            padding: 2px;
+        }
+        .color-picker-row input[type="color"]::-webkit-color-swatch {
+            border-radius: 2px;
+            border: none;
+        }
         .layer-filter-close {
             position: absolute;
             top: 8px;
@@ -4329,362 +4362,684 @@
         </div>
     </div>
 
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    <script src="https://unpkg.com/leaflet-rotate@0.2.8/dist/leaflet-rotate-src.js"></script>
+    <script src="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.js"></script>
+    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
     <script>
-        // Initialize the map with higher max zoom and rotation support
-        const map = L.map('map', {
-            maxZoom: 22,
-            rotate: true,
-            rotateControl: false,
-            touchRotate: false,
-            bearing: 0,
-            doubleClickZoom: false  // Disable to prevent interference with our double-tap handlers
-        }).setView([30.49, -97.84], 13);
-
-        // Explicitly disable doubleClickZoom (belt and suspenders - init option + explicit call)
-        map.doubleClickZoom.disable();
+        // =====================
+        // FANTASY MAP STYLE
+        // =====================
+        // Default fantasy colors (can be customized via settings)
+        const mapColors = {
+            land: '#1a1a2e',
+            water: '#0f3460',
+            roads: '#e94560',
+            buildings: '#16213e',
+            parks: '#1b4332'
+        };
 
-        // Base layers
-        const streetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-            maxZoom: 22,
-            maxNativeZoom: 19
-        });
+        // Build the fantasy map style
+        function buildFantasyStyle(colors, use3dBuildings = true) {
+            return {
+                version: 8,
+                name: 'HikeMap Fantasy',
+                sources: {
+                    'openmaptiles': {
+                        type: 'vector',
+                        url: 'https://tiles.openfreemap.org/planet'
+                    }
+                },
+                glyphs: 'https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf',
+                layers: [
+                    // Background
+                    { id: 'background', type: 'background', paint: { 'background-color': colors.land } },
+                    // Parks
+                    { id: 'park', type: 'fill', source: 'openmaptiles', 'source-layer': 'park',
+                      paint: { 'fill-color': colors.parks, 'fill-opacity': 0.7 } },
+                    // Landcover - wood
+                    { id: 'landcover_wood', type: 'fill', source: 'openmaptiles', 'source-layer': 'landcover',
+                      filter: ['==', ['get', 'class'], 'wood'],
+                      paint: { 'fill-color': colors.parks, 'fill-opacity': 0.5 } },
+                    // Landcover - grass
+                    { id: 'landcover_grass', type: 'fill', source: 'openmaptiles', 'source-layer': 'landcover',
+                      filter: ['==', ['get', 'class'], 'grass'],
+                      paint: { 'fill-color': colors.parks, 'fill-opacity': 0.4 } },
+                    // Water
+                    { id: 'water', type: 'fill', source: 'openmaptiles', 'source-layer': 'water',
+                      paint: { 'fill-color': colors.water } },
+                    // Waterways
+                    { id: 'waterway', type: 'line', source: 'openmaptiles', 'source-layer': 'waterway',
+                      paint: { 'line-color': colors.water, 'line-width': ['interpolate', ['linear'], ['zoom'], 8, 1, 14, 3] } },
+                    // Buildings (3D or 2D)
+                    use3dBuildings ? {
+                        id: 'buildings-3d', type: 'fill-extrusion', source: 'openmaptiles', 'source-layer': 'building', minzoom: 13,
+                        paint: {
+                            'fill-extrusion-color': colors.buildings,
+                            'fill-extrusion-height': ['get', 'render_height'],
+                            'fill-extrusion-base': ['get', 'render_min_height'],
+                            'fill-extrusion-opacity': 0.85
+                        }
+                    } : {
+                        id: 'buildings', type: 'fill', source: 'openmaptiles', 'source-layer': 'building', minzoom: 13,
+                        paint: { 'fill-color': colors.buildings, 'fill-opacity': 0.8 }
+                    },
+                    // Roads - service/track
+                    { id: 'roads-service', type: 'line', source: 'openmaptiles', 'source-layer': 'transportation',
+                      filter: ['match', ['get', 'class'], ['service', 'track'], true, false],
+                      paint: { 'line-color': colors.roads, 'line-width': 1, 'line-opacity': 0.4 } },
+                    // Roads - path/pedestrian
+                    { id: 'roads-path', type: 'line', source: 'openmaptiles', 'source-layer': 'transportation',
+                      filter: ['match', ['get', 'class'], ['path', 'pedestrian'], true, false],
+                      paint: { 'line-color': colors.roads, 'line-width': 1, 'line-dasharray': [2, 1], 'line-opacity': 0.6 } },
+                    // Roads - minor
+                    { id: 'roads-minor', type: 'line', source: 'openmaptiles', 'source-layer': 'transportation',
+                      filter: ['==', ['get', 'class'], 'minor'],
+                      layout: { 'line-cap': 'round', 'line-join': 'round' },
+                      paint: { 'line-color': colors.roads, 'line-width': ['interpolate', ['exponential', 1.2], ['zoom'], 13, 1, 20, 10], 'line-opacity': 0.8 } },
+                    // Roads - secondary/tertiary
+                    { id: 'roads-secondary', type: 'line', source: 'openmaptiles', 'source-layer': 'transportation',
+                      filter: ['match', ['get', 'class'], ['secondary', 'tertiary'], true, false],
+                      layout: { 'line-cap': 'round', 'line-join': 'round' },
+                      paint: { 'line-color': colors.roads, 'line-width': ['interpolate', ['exponential', 1.2], ['zoom'], 8, 0.5, 20, 13] } },
+                    // Roads - primary/trunk
+                    { id: 'roads-primary', type: 'line', source: 'openmaptiles', 'source-layer': 'transportation',
+                      filter: ['match', ['get', 'class'], ['primary', 'trunk'], true, false],
+                      layout: { 'line-cap': 'round', 'line-join': 'round' },
+                      paint: { 'line-color': colors.roads, 'line-width': ['interpolate', ['exponential', 1.2], ['zoom'], 5, 0.5, 20, 18] } },
+                    // Roads - motorway
+                    { id: 'roads-motorway', type: 'line', source: 'openmaptiles', 'source-layer': 'transportation',
+                      filter: ['==', ['get', 'class'], 'motorway'],
+                      layout: { 'line-cap': 'round', 'line-join': 'round' },
+                      paint: { 'line-color': colors.roads, 'line-width': ['interpolate', ['exponential', 1.2], ['zoom'], 5, 1, 20, 20] } },
+                    // Rail
+                    { id: 'rail', type: 'line', source: 'openmaptiles', 'source-layer': 'transportation',
+                      filter: ['==', ['get', 'class'], 'rail'],
+                      paint: { 'line-color': '#888888', 'line-width': 2, 'line-dasharray': [3, 3] } },
+                    // Boundaries
+                    { id: 'boundary', type: 'line', source: 'openmaptiles', 'source-layer': 'boundary',
+                      filter: ['==', ['get', 'admin_level'], 2],
+                      paint: { 'line-color': '#888888', 'line-width': 1, 'line-dasharray': [4, 2] } },
+                    // Road labels
+                    { id: 'road-labels', type: 'symbol', source: 'openmaptiles', 'source-layer': 'transportation_name', minzoom: 14,
+                      layout: { 'text-field': ['coalesce', ['get', 'name_en'], ['get', 'name']], 'text-size': 10, 'symbol-placement': 'line', 'text-font': ['Noto Sans Regular'] },
+                      paint: { 'text-color': '#ffffff', 'text-halo-color': colors.land, 'text-halo-width': 1 } },
+                    // Place labels
+                    { id: 'place-labels', type: 'symbol', source: 'openmaptiles', 'source-layer': 'place',
+                      layout: { 'text-field': ['coalesce', ['get', 'name_en'], ['get', 'name']], 'text-size': ['interpolate', ['linear'], ['zoom'], 10, 12, 14, 16], 'text-font': ['Noto Sans Bold'] },
+                      paint: { 'text-color': '#ffffff', 'text-halo-color': colors.land, 'text-halo-width': 2 } }
+                ]
+            };
+        }
 
-        const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-            attribution: '&copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
+        // =====================
+        // MAP INITIALIZATION (MapLibre GL JS)
+        // =====================
+        const map = new maplibregl.Map({
+            container: 'map',
+            style: buildFantasyStyle(mapColors, true),
+            center: [-97.84, 30.49],  // Note: [lng, lat] for MapLibre
+            zoom: 13,
             maxZoom: 22,
-            maxNativeZoom: 19
+            bearing: 0,
+            pitch: 0,  // Disable pitch to keep fog of war circles correct
+            maxPitch: 0,  // Prevent user from tilting map (fog doesn't work with perspective)
+            doubleClickZoom: false
         });
 
-        // CartoDB free tile layers
-        const cartoPositron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-            subdomains: 'abcd',
-            maxZoom: 22,
-            maxNativeZoom: 20
-        });
+        // Add navigation controls
+        map.addControl(new maplibregl.NavigationControl(), 'top-right');
 
-        const cartoPositronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-            subdomains: 'abcd',
-            maxZoom: 22,
-            maxNativeZoom: 20
-        });
+        // =====================
+        // COORDINATE HELPER FUNCTIONS
+        // =====================
+        // Convert [lat, lng] to [lng, lat] for MapLibre
+        function toMapLibre(coord) {
+            if (Array.isArray(coord)) return [coord[1], coord[0]];
+            return [coord.lng, coord.lat];
+        }
 
-        const cartoVoyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-            subdomains: 'abcd',
-            maxZoom: 22,
-            maxNativeZoom: 20
-        });
+        // Convert array of [lat, lng] coords to [lng, lat]
+        function toMapLibreCoords(coords) {
+            return coords.map(c => Array.isArray(c) ? [c[1], c[0]] : [c.lng, c.lat]);
+        }
 
-        const cartoVoyagerLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-            subdomains: 'abcd',
-            maxZoom: 22,
-            maxNativeZoom: 20
-        });
+        // Distance in meters between two [lng, lat] points
+        function distanceMeters(lngLat1, lngLat2) {
+            return turf.distance(turf.point(lngLat1), turf.point(lngLat2), { units: 'meters' });
+        }
 
-        const cartoDark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-            subdomains: 'abcd',
-            maxZoom: 22,
-            maxNativeZoom: 20
-        });
+        // Create a circle polygon for a given center and radius
+        function createCircleGeoJSON(lngLat, radiusMeters) {
+            return turf.circle(lngLat, radiusMeters / 1000, { units: 'kilometers', steps: 64 });
+        }
 
-        const cartoDarkLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
-            subdomains: 'abcd',
-            maxZoom: 22,
-            maxNativeZoom: 20
-        });
+        // =====================
+        // LEAFLET API COMPATIBILITY SHIMS
+        // =====================
+        // These allow gradual migration by providing Leaflet-like methods
 
-        // ÖPNVKarte (Public Transport Map)
-        const opnvKarte = L.tileLayer('https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png', {
-            attribution: 'Map &copy; <a href="https://memomaps.de/">memomaps.de</a> CC-BY-SA, map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-            maxZoom: 22,
-            maxNativeZoom: 18
-        });
+        // map.setView([lat, lng], zoom) - Leaflet-style view setting
+        map.setView = function(latLng, zoom) {
+            const center = Array.isArray(latLng) ? [latLng[1], latLng[0]] : [latLng.lng, latLng.lat];
+            if (zoom !== undefined) {
+                this.jumpTo({ center: center, zoom: zoom });
+            } else {
+                this.setCenter(center);
+            }
+            return this;
+        };
 
-        // Add street map by default
-        streetMap.addTo(map);
-
-        // Tile layer configurations (for creating overlay instances)
-        const tileConfigs = {
-            "OSM Street": { url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', options: { subdomains: 'abc', maxZoom: 22, maxNativeZoom: 19 } },
-            "Positron": { url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', options: { subdomains: 'abcd', maxZoom: 22, maxNativeZoom: 20 } },
-            "Positron (No Labels)": { url: 'https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', options: { subdomains: 'abcd', maxZoom: 22, maxNativeZoom: 20 } },
-            "Voyager": { url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', options: { subdomains: 'abcd', maxZoom: 22, maxNativeZoom: 20 } },
-            "Voyager (No Labels)": { url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', options: { subdomains: 'abcd', maxZoom: 22, maxNativeZoom: 20 } },
-            "Dark": { url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', options: { subdomains: 'abcd', maxZoom: 22, maxNativeZoom: 20 } },
-            "Dark (No Labels)": { url: 'https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', options: { subdomains: 'abcd', maxZoom: 22, maxNativeZoom: 20 } },
-            "Satellite": { url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', options: { maxZoom: 22, maxNativeZoom: 19 } },
-            "Transport (ÖPNV)": { url: 'https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png', options: { maxZoom: 22, maxNativeZoom: 18 } }
+        // map.distance(latlng1, latlng2) - Calculate distance in meters
+        map.distance = function(latlng1, latlng2) {
+            const lngLat1 = Array.isArray(latlng1) ? [latlng1[1], latlng1[0]] : [latlng1.lng, latlng1.lat];
+            const lngLat2 = Array.isArray(latlng2) ? [latlng2[1], latlng2[0]] : [latlng2.lng, latlng2.lat];
+            return distanceMeters(lngLat1, lngLat2);
         };
 
-        // Layer instances for base layer switching
-        const baseMaps = {
-            "OSM Street": streetMap,
-            "Positron": cartoPositronLabels,
-            "Positron (No Labels)": cartoPositron,
-            "Voyager": cartoVoyagerLabels,
-            "Voyager (No Labels)": cartoVoyager,
-            "Dark": cartoDarkLabels,
-            "Dark (No Labels)": cartoDark,
-            "Satellite": satellite,
-            "Transport (ÖPNV)": opnvKarte
+        // map.latLngToContainerPoint - For canvas-based drawing (fog of war, etc.)
+        map.latLngToContainerPoint = function(latlng) {
+            const lngLat = Array.isArray(latlng) ? [latlng[1], latlng[0]] : [latlng.lng, latlng.lat];
+            return this.project(lngLat);
         };
 
-        // Custom Layer & Filter Control
-        const LayerFilterControl = L.Control.extend({
-            options: { position: 'bottomleft' },
+        // =====================
+        // FULL LEAFLET COMPATIBILITY LAYER
+        // =====================
+        // This provides Leaflet-like API for gradual migration
+
+        // Track created layers for cleanup
+        let leafletCompatLayerCounter = 0;
+
+        const L = {
+            // L.latLng - creates an object with distanceTo method
+            latLng: function(lat, lng) {
+                let finalLat, finalLng;
+
+                if (Array.isArray(lat)) {
+                    // L.latLng([lat, lng]) - array form
+                    finalLat = lat[0];
+                    finalLng = lat[1];
+                } else if (typeof lat === 'object' && lat !== null) {
+                    // L.latLng({lat, lng}) - object form
+                    finalLat = lat.lat;
+                    finalLng = lat.lng;
+                } else {
+                    // L.latLng(lat, lng) - separate args
+                    finalLat = lat;
+                    finalLng = lng;
+                }
 
-            onAdd: function(map) {
-                this._map = map;
-                this._currentLayer = streetMap;
-                this._overlayLayer = null;
-                this._filters = {
-                    brightness: 100,
-                    contrast: 100,
-                    saturate: 100,
-                    grayscale: 0,
-                    hueRotate: 0,
-                    invert: false
+                return {
+                    lat: finalLat,
+                    lng: finalLng,
+                    distanceTo: function(other) {
+                        return distanceMeters([this.lng, this.lat], [other.lng, other.lat]);
+                    }
                 };
-                this._blend = {
-                    overlay: 'none',
-                    opacity: 70,
-                    mode: 'overlay'
+            },
+
+            // L.divIcon - creates a marker configuration object
+            divIcon: function(options) {
+                return {
+                    type: 'divIcon',
+                    html: options.html || '',
+                    iconSize: options.iconSize || [20, 20],
+                    iconAnchor: options.iconAnchor || [10, 10],
+                    className: options.className || ''
                 };
+            },
 
-                const container = L.DomUtil.create('div', 'layer-filter-control');
+            // L.marker - creates a MapLibre marker
+            marker: function(latlng, options) {
+                options = options || {};
+                const lat = Array.isArray(latlng) ? latlng[0] : latlng.lat;
+                const lng = Array.isArray(latlng) ? latlng[1] : latlng.lng;
+
+                // Create DOM element from divIcon
+                const el = document.createElement('div');
+                if (options.icon) {
+                    el.className = options.icon.className || 'custom-div-icon';
+                    el.innerHTML = options.icon.html || '';
+                    if (options.icon.iconSize) {
+                        el.style.width = options.icon.iconSize[0] + 'px';
+                        el.style.height = options.icon.iconSize[1] + 'px';
+                    }
+                }
 
-                // Build layer radio buttons HTML
-                let layerOptionsHtml = '';
-                Object.keys(baseMaps).forEach((name, i) => {
-                    const checked = i === 0 ? 'checked' : '';
-                    layerOptionsHtml += `<label><input type="radio" name="baseLayer" value="${name}" ${checked}>${name}</label>`;
-                });
+                const marker = new maplibregl.Marker({
+                    element: el,
+                    anchor: 'center',
+                    draggable: options.draggable || false
+                }).setLngLat([lng, lat]);
 
-                // Build overlay layer options
-                let overlayOptionsHtml = '<option value="none">None</option>';
-                Object.keys(baseMaps).forEach(name => {
-                    overlayOptionsHtml += `<option value="${name}">${name}</option>`;
+                // Add Leaflet-like methods
+                marker.setLatLng = function(ll) {
+                    const lat = Array.isArray(ll) ? ll[0] : ll.lat;
+                    const lng = Array.isArray(ll) ? ll[1] : ll.lng;
+                    this.setLngLat([lng, lat]);
+                    return this;
+                };
+                marker.getLatLng = function() {
+                    const ll = this.getLngLat();
+                    return { lat: ll.lat, lng: ll.lng };
+                };
+                marker.setIcon = function(icon) {
+                    const el = this.getElement();
+                    if (icon && icon.html) {
+                        el.innerHTML = icon.html;
+                    }
+                    if (icon && icon.className) {
+                        el.className = icon.className;
+                    }
+                    return this;
+                };
+                marker.on = function(event, handler) {
+                    const el = this.getElement();
+                    if (event === 'click') {
+                        // For click events, also handle touch for better mobile support
+                        let touchStartTime = 0;
+                        let touchStartX = 0;
+                        let touchStartY = 0;
+
+                        el.addEventListener('touchstart', (e) => {
+                            touchStartTime = Date.now();
+                            touchStartX = e.touches[0].clientX;
+                            touchStartY = e.touches[0].clientY;
+                        }, { passive: true });
+
+                        el.addEventListener('touchend', (e) => {
+                            const touchDuration = Date.now() - touchStartTime;
+                            const touch = e.changedTouches[0];
+                            const dx = Math.abs(touch.clientX - touchStartX);
+                            const dy = Math.abs(touch.clientY - touchStartY);
+
+                            // Only trigger if it was a quick tap (not a drag)
+                            if (touchDuration < 300 && dx < 20 && dy < 20) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handler(e);
+                            }
+                        }, { passive: false });
+
+                        // Also keep regular click for desktop
+                        el.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            handler(e);
+                        });
+                    } else {
+                        el.addEventListener(event, handler);
+                    }
+                    return this;
+                };
+
+                return marker;
+            },
+
+            // L.polyline - creates a GeoJSON line layer
+            polyline: function(coords, options) {
+                options = options || {};
+                const id = 'polyline-' + (++leafletCompatLayerCounter);
+
+                // Convert coords to GeoJSON (Leaflet uses [lat, lng], MapLibre uses [lng, lat])
+                const geoCoords = coords.map(c => {
+                    if (Array.isArray(c)) return [c[1], c[0]];
+                    return [c.lng, c.lat];
                 });
 
-                // Blend modes
-                const blendModes = ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
-                                    'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-                                    'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
-                let blendModeOptionsHtml = blendModes.map(m =>
-                    `<option value="${m}" ${m === 'overlay' ? 'selected' : ''}>${m}</option>`
-                ).join('');
+                const layer = {
+                    _id: id,
+                    _coords: coords,
+                    _options: options,
+                    _added: false,
+
+                    addTo: function(map) {
+                        if (this._added) return this;
+                        map.addSource(this._id, {
+                            type: 'geojson',
+                            data: {
+                                type: 'Feature',
+                                geometry: { type: 'LineString', coordinates: geoCoords }
+                            }
+                        });
+                        map.addLayer({
+                            id: this._id,
+                            type: 'line',
+                            source: this._id,
+                            paint: {
+                                'line-color': options.color || '#3388ff',
+                                'line-width': options.weight || 3,
+                                'line-opacity': options.opacity !== undefined ? options.opacity : 1
+                            }
+                        });
+                        this._added = true;
+                        return this;
+                    },
+
+                    setLatLngs: function(newCoords) {
+                        this._coords = newCoords;
+                        const geoCoords = newCoords.map(c => {
+                            if (Array.isArray(c)) return [c[1], c[0]];
+                            return [c.lng, c.lat];
+                        });
+                        const source = map.getSource(this._id);
+                        if (source) {
+                            source.setData({
+                                type: 'Feature',
+                                geometry: { type: 'LineString', coordinates: geoCoords }
+                            });
+                        }
+                        return this;
+                    },
+
+                    setStyle: function(style) {
+                        if (style.color) map.setPaintProperty(this._id, 'line-color', style.color);
+                        if (style.weight) map.setPaintProperty(this._id, 'line-width', style.weight);
+                        if (style.opacity !== undefined) map.setPaintProperty(this._id, 'line-opacity', style.opacity);
+                        return this;
+                    },
 
-                container.innerHTML = `
-                    <div class="layer-filter-toggle" title="Map Layers & Filters">🗺️</div>
+                    remove: function() {
+                        if (map.getLayer(this._id)) map.removeLayer(this._id);
+                        if (map.getSource(this._id)) map.removeSource(this._id);
+                        this._added = false;
+                        return this;
+                    },
+
+                    on: function(event, handler) {
+                        map.on(event, this._id, handler);
+                        return this;
+                    }
+                };
+
+                return layer;
+            },
+
+            // L.circle - creates a GeoJSON circle (polygon)
+            circle: function(latlng, options) {
+                options = options || {};
+                const id = 'circle-' + (++leafletCompatLayerCounter);
+                const lat = Array.isArray(latlng) ? latlng[0] : latlng.lat;
+                const lng = Array.isArray(latlng) ? latlng[1] : latlng.lng;
+                const radius = options.radius || 10;
+
+                const layer = {
+                    _id: id,
+                    _latlng: { lat, lng },
+                    _radius: radius,
+                    _options: options,
+                    _added: false,
+
+                    addTo: function(map) {
+                        if (this._added) return this;
+                        const circleGeoJSON = createCircleGeoJSON([this._latlng.lng, this._latlng.lat], this._radius);
+                        map.addSource(this._id, {
+                            type: 'geojson',
+                            data: circleGeoJSON
+                        });
+                        map.addLayer({
+                            id: this._id + '-fill',
+                            type: 'fill',
+                            source: this._id,
+                            paint: {
+                                'fill-color': options.fillColor || options.color || '#3388ff',
+                                'fill-opacity': options.fillOpacity !== undefined ? options.fillOpacity : 0.2
+                            }
+                        });
+                        if (options.weight !== 0) {
+                            map.addLayer({
+                                id: this._id + '-stroke',
+                                type: 'line',
+                                source: this._id,
+                                paint: {
+                                    'line-color': options.color || '#3388ff',
+                                    'line-width': options.weight || 3
+                                }
+                            });
+                        }
+                        this._added = true;
+                        return this;
+                    },
+
+                    setLatLng: function(ll) {
+                        const lat = Array.isArray(ll) ? ll[0] : ll.lat;
+                        const lng = Array.isArray(ll) ? ll[1] : ll.lng;
+                        this._latlng = { lat, lng };
+                        this._updateData();
+                        return this;
+                    },
+
+                    setRadius: function(r) {
+                        this._radius = r;
+                        this._updateData();
+                        return this;
+                    },
+
+                    _updateData: function() {
+                        const source = map.getSource(this._id);
+                        if (source) {
+                            source.setData(createCircleGeoJSON([this._latlng.lng, this._latlng.lat], this._radius));
+                        }
+                    },
+
+                    remove: function() {
+                        if (map.getLayer(this._id + '-fill')) map.removeLayer(this._id + '-fill');
+                        if (map.getLayer(this._id + '-stroke')) map.removeLayer(this._id + '-stroke');
+                        if (map.getSource(this._id)) map.removeSource(this._id);
+                        this._added = false;
+                        return this;
+                    }
+                };
+
+                return layer;
+            },
+
+            // L.circleMarker - creates a simple circle marker (non-geographic)
+            circleMarker: function(latlng, options) {
+                options = options || {};
+                const lat = Array.isArray(latlng) ? latlng[0] : latlng.lat;
+                const lng = Array.isArray(latlng) ? latlng[1] : latlng.lng;
+
+                const el = document.createElement('div');
+                const size = (options.radius || 5) * 2;
+                el.style.width = size + 'px';
+                el.style.height = size + 'px';
+                el.style.backgroundColor = options.fillColor || options.color || '#3388ff';
+                el.style.border = (options.weight || 1) + 'px solid ' + (options.color || '#3388ff');
+                el.style.borderRadius = '50%';
+                el.style.opacity = options.fillOpacity !== undefined ? options.fillOpacity : 0.5;
+                el.className = options.className || 'circle-marker';
+
+                const marker = new maplibregl.Marker({
+                    element: el,
+                    anchor: 'center',
+                    draggable: options.draggable || false
+                }).setLngLat([lng, lat]);
+
+                // Add Leaflet-like methods
+                marker.setLatLng = function(ll) {
+                    const lat = Array.isArray(ll) ? ll[0] : ll.lat;
+                    const lng = Array.isArray(ll) ? ll[1] : ll.lng;
+                    this.setLngLat([lng, lat]);
+                    return this;
+                };
+                marker.getLatLng = function() {
+                    const ll = this.getLngLat();
+                    return { lat: ll.lat, lng: ll.lng };
+                };
+                marker.setStyle = function(style) {
+                    const el = this.getElement();
+                    if (style.color) el.style.borderColor = style.color;
+                    if (style.fillColor) el.style.backgroundColor = style.fillColor;
+                    if (style.fillOpacity !== undefined) el.style.opacity = style.fillOpacity;
+                    return this;
+                };
+                marker.on = function(event, handler) {
+                    this.getElement().addEventListener(event, handler);
+                    return this;
+                };
+
+                return marker;
+            },
+
+            // L.DomEvent compatibility
+            DomEvent: {
+                stopPropagation: function(e) {
+                    if (e) e.stopPropagation();
+                    return this;
+                },
+                preventDefault: function(e) {
+                    if (e) e.preventDefault();
+                    return this;
+                },
+                disableClickPropagation: function(el) {
+                    el.addEventListener('click', function(e) { e.stopPropagation(); });
+                    el.addEventListener('mousedown', function(e) { e.stopPropagation(); });
+                    return this;
+                },
+                disableScrollPropagation: function(el) {
+                    el.addEventListener('wheel', function(e) { e.stopPropagation(); });
+                    return this;
+                }
+            },
+
+            // L.DomUtil compatibility
+            DomUtil: {
+                create: function(tagName, className, container) {
+                    const el = document.createElement(tagName);
+                    if (className) el.className = className;
+                    if (container) container.appendChild(el);
+                    return el;
+                }
+            }
+        };
+
+        // map.removeLayer compatibility
+        map.removeLayer = function(layer) {
+            if (layer && typeof layer.remove === 'function') {
+                layer.remove();
+            }
+            return this;
+        };
+
+        // MapLibre Style Control - Customize fantasy map colors and 3D buildings
+        class MapStyleControl {
+            constructor() {
+                this._use3dBuildings = true;
+            }
+
+            onAdd(map) {
+                this._map = map;
+                this._container = document.createElement('div');
+                this._container.className = 'layer-filter-control';
+
+                this._container.innerHTML = `
+                    <div class="layer-filter-toggle" title="Map Style">🗺️</div>
                     <div class="layer-filter-panel">
                         <div class="layer-filter-close">✕</div>
                         <div class="layer-filter-section">
-                            <div class="layer-filter-section-title">Base Layer</div>
-                            ${layerOptionsHtml}
-                        </div>
-                        <div class="layer-filter-section blend-section">
-                            <div class="layer-filter-section-title">Layer Blend</div>
-                            <div class="blend-row">
-                                <label>Overlay Layer</label>
-                                <select id="overlayLayer">${overlayOptionsHtml}</select>
-                            </div>
-                            <div class="blend-row">
-                                <label>Blend Mode</label>
-                                <select id="blendMode">${blendModeOptionsHtml}</select>
-                            </div>
-                            <div class="filter-slider-row">
-                                <span class="filter-slider-label">Opacity</span>
-                                <input type="range" id="overlayOpacity" min="0" max="100" value="70">
-                                <span class="filter-slider-value" id="overlayOpacityVal">70%</span>
-                            </div>
-                        </div>
-                        <div class="layer-filter-section">
-                            <div class="layer-filter-section-title">CSS Filters</div>
-                            <div class="filter-slider-row">
-                                <span class="filter-slider-label">Brightness</span>
-                                <input type="range" id="filterBrightness" min="0" max="200" value="100">
-                                <span class="filter-slider-value" id="filterBrightnessVal">100%</span>
+                            <div class="layer-filter-section-title">Fantasy Theme Colors</div>
+                            <div class="color-picker-row">
+                                <span class="color-picker-label">Land</span>
+                                <input type="color" id="colorLand" value="${mapColors.land}">
                             </div>
-                            <div class="filter-slider-row">
-                                <span class="filter-slider-label">Contrast</span>
-                                <input type="range" id="filterContrast" min="0" max="200" value="100">
-                                <span class="filter-slider-value" id="filterContrastVal">100%</span>
+                            <div class="color-picker-row">
+                                <span class="color-picker-label">Water</span>
+                                <input type="color" id="colorWater" value="${mapColors.water}">
                             </div>
-                            <div class="filter-slider-row">
-                                <span class="filter-slider-label">Saturation</span>
-                                <input type="range" id="filterSaturate" min="0" max="200" value="100">
-                                <span class="filter-slider-value" id="filterSaturateVal">100%</span>
+                            <div class="color-picker-row">
+                                <span class="color-picker-label">Roads</span>
+                                <input type="color" id="colorRoads" value="${mapColors.roads}">
                             </div>
-                            <div class="filter-slider-row">
-                                <span class="filter-slider-label">Grayscale</span>
-                                <input type="range" id="filterGrayscale" min="0" max="100" value="0">
-                                <span class="filter-slider-value" id="filterGrayscaleVal">0%</span>
+                            <div class="color-picker-row">
+                                <span class="color-picker-label">Buildings</span>
+                                <input type="color" id="colorBuildings" value="${mapColors.buildings}">
                             </div>
-                            <div class="filter-slider-row">
-                                <span class="filter-slider-label">Hue Rotate</span>
-                                <input type="range" id="filterHueRotate" min="0" max="360" value="0">
-                                <span class="filter-slider-value" id="filterHueRotateVal">0°</span>
+                            <div class="color-picker-row">
+                                <span class="color-picker-label">Parks</span>
+                                <input type="color" id="colorParks" value="${mapColors.parks}">
                             </div>
+                        </div>
+                        <div class="layer-filter-section">
+                            <div class="layer-filter-section-title">Options</div>
                             <div class="filter-checkbox-row">
-                                <label><input type="checkbox" id="filterInvert"> Invert Colors</label>
+                                <label><input type="checkbox" id="toggle3dBuildings" checked> 3D Buildings</label>
                             </div>
-                            <button class="filter-reset-btn" id="filterReset">Reset All</button>
+                            <button class="filter-reset-btn" id="styleReset">Reset to Default</button>
                         </div>
                     </div>
                 `;
 
-                // Prevent map interactions
-                L.DomEvent.disableClickPropagation(container);
-                L.DomEvent.disableScrollPropagation(container);
+                // Prevent map interactions on the control
+                this._container.addEventListener('mousedown', e => e.stopPropagation());
+                this._container.addEventListener('wheel', e => e.stopPropagation());
 
                 // Toggle panel
-                const toggle = container.querySelector('.layer-filter-toggle');
-                const closeBtn = container.querySelector('.layer-filter-close');
-                toggle.addEventListener('click', () => container.classList.add('expanded'));
-                closeBtn.addEventListener('click', () => container.classList.remove('expanded'));
-
-                // Layer switching
-                container.querySelectorAll('input[name="baseLayer"]').forEach(radio => {
-                    radio.addEventListener('change', (e) => {
-                        this._map.removeLayer(this._currentLayer);
-                        this._currentLayer = baseMaps[e.target.value];
-                        this._currentLayer.addTo(this._map);
-                        this._applyFilters();
-                    });
-                });
-
-                // Filter sliders
-                const sliderConfig = [
-                    { id: 'filterBrightness', key: 'brightness', unit: '%' },
-                    { id: 'filterContrast', key: 'contrast', unit: '%' },
-                    { id: 'filterSaturate', key: 'saturate', unit: '%' },
-                    { id: 'filterGrayscale', key: 'grayscale', unit: '%' },
-                    { id: 'filterHueRotate', key: 'hueRotate', unit: '°' }
+                const toggle = this._container.querySelector('.layer-filter-toggle');
+                const closeBtn = this._container.querySelector('.layer-filter-close');
+                toggle.addEventListener('click', () => this._container.classList.add('expanded'));
+                closeBtn.addEventListener('click', () => this._container.classList.remove('expanded'));
+
+                // Color pickers
+                const colorInputs = [
+                    { id: 'colorLand', key: 'land' },
+                    { id: 'colorWater', key: 'water' },
+                    { id: 'colorRoads', key: 'roads' },
+                    { id: 'colorBuildings', key: 'buildings' },
+                    { id: 'colorParks', key: 'parks' }
                 ];
 
-                sliderConfig.forEach(cfg => {
-                    const slider = container.querySelector(`#${cfg.id}`);
-                    const valueEl = container.querySelector(`#${cfg.id}Val`);
-                    slider.addEventListener('input', (e) => {
-                        this._filters[cfg.key] = parseInt(e.target.value);
-                        valueEl.textContent = e.target.value + cfg.unit;
-                        this._applyFilters();
+                colorInputs.forEach(cfg => {
+                    this._container.querySelector(`#${cfg.id}`).addEventListener('input', (e) => {
+                        mapColors[cfg.key] = e.target.value;
+                        this._updateStyle();
                     });
                 });
 
-                // Invert checkbox
-                container.querySelector('#filterInvert').addEventListener('change', (e) => {
-                    this._filters.invert = e.target.checked;
-                    this._applyFilters();
-                });
-
-                // Overlay layer selection
-                container.querySelector('#overlayLayer').addEventListener('change', (e) => {
-                    this._blend.overlay = e.target.value;
-                    this._updateOverlayLayer();
-                });
-
-                // Blend mode selection
-                container.querySelector('#blendMode').addEventListener('change', (e) => {
-                    this._blend.mode = e.target.value;
-                    this._applyBlendMode();
-                });
-
-                // Overlay opacity slider
-                const opacitySlider = container.querySelector('#overlayOpacity');
-                const opacityVal = container.querySelector('#overlayOpacityVal');
-                opacitySlider.addEventListener('input', (e) => {
-                    this._blend.opacity = parseInt(e.target.value);
-                    opacityVal.textContent = e.target.value + '%';
-                    this._applyBlendMode();
+                // 3D Buildings toggle
+                this._container.querySelector('#toggle3dBuildings').addEventListener('change', (e) => {
+                    this._use3dBuildings = e.target.checked;
+                    this._updateStyle();
                 });
 
                 // Reset button
-                container.querySelector('#filterReset').addEventListener('click', () => {
-                    // Reset filters
-                    this._filters = { brightness: 100, contrast: 100, saturate: 100, grayscale: 0, hueRotate: 0, invert: false };
-                    container.querySelector('#filterBrightness').value = 100;
-                    container.querySelector('#filterBrightnessVal').textContent = '100%';
-                    container.querySelector('#filterContrast').value = 100;
-                    container.querySelector('#filterContrastVal').textContent = '100%';
-                    container.querySelector('#filterSaturate').value = 100;
-                    container.querySelector('#filterSaturateVal').textContent = '100%';
-                    container.querySelector('#filterGrayscale').value = 0;
-                    container.querySelector('#filterGrayscaleVal').textContent = '0%';
-                    container.querySelector('#filterHueRotate').value = 0;
-                    container.querySelector('#filterHueRotateVal').textContent = '0°';
-                    container.querySelector('#filterInvert').checked = false;
-                    this._applyFilters();
-
-                    // Reset blend
-                    this._blend = { overlay: 'none', opacity: 70, mode: 'overlay' };
-                    container.querySelector('#overlayLayer').value = 'none';
-                    container.querySelector('#blendMode').value = 'overlay';
-                    container.querySelector('#overlayOpacity').value = 70;
-                    container.querySelector('#overlayOpacityVal').textContent = '70%';
-                    this._updateOverlayLayer();
+                this._container.querySelector('#styleReset').addEventListener('click', () => {
+                    // Reset to default fantasy colors
+                    mapColors.land = '#1a1a2e';
+                    mapColors.water = '#0f3460';
+                    mapColors.roads = '#e94560';
+                    mapColors.buildings = '#16213e';
+                    mapColors.parks = '#1b4332';
+                    this._use3dBuildings = true;
+
+                    // Update inputs
+                    this._container.querySelector('#colorLand').value = mapColors.land;
+                    this._container.querySelector('#colorWater').value = mapColors.water;
+                    this._container.querySelector('#colorRoads').value = mapColors.roads;
+                    this._container.querySelector('#colorBuildings').value = mapColors.buildings;
+                    this._container.querySelector('#colorParks').value = mapColors.parks;
+                    this._container.querySelector('#toggle3dBuildings').checked = true;
+
+                    this._updateStyle();
                 });
 
-                this._container = container;
-                return container;
-            },
+                return this._container;
+            }
 
-            _updateOverlayLayer: function() {
-                // Remove existing overlay
-                if (this._overlayLayer) {
-                    this._map.removeLayer(this._overlayLayer);
-                    this._overlayLayer = null;
-                }
-
-                // Add new overlay if selected
-                if (this._blend.overlay !== 'none') {
-                    const config = tileConfigs[this._blend.overlay];
-                    if (config) {
-                        // Create a new tile layer instance for overlay
-                        this._overlayLayer = L.tileLayer(config.url, {
-                            ...config.options,
-                            className: 'overlay-tile-layer'
-                        });
-                        this._overlayLayer.addTo(this._map);
-                        // Apply blend mode after a short delay to ensure container exists
-                        setTimeout(() => this._applyBlendMode(), 100);
-                    }
-                }
-            },
+            onRemove() {
+                this._container.parentNode.removeChild(this._container);
+            }
 
-            _applyBlendMode: function() {
-                if (this._overlayLayer) {
-                    const overlayContainer = this._overlayLayer.getContainer();
-                    if (overlayContainer) {
-                        overlayContainer.style.opacity = this._blend.opacity / 100;
-                        overlayContainer.style.mixBlendMode = this._blend.mode;
-                    }
-                }
-            },
+            _updateStyle() {
+                // Save to localStorage for persistence
+                localStorage.setItem('hikemapColors', JSON.stringify(mapColors));
+                localStorage.setItem('hikemap3dBuildings', this._use3dBuildings);
 
-            _applyFilters: function() {
-                const tilePane = this._map.getPanes().tilePane;
-                const f = this._filters;
-                tilePane.style.filter = `
-                    brightness(${f.brightness}%)
-                    contrast(${f.contrast}%)
-                    saturate(${f.saturate}%)
-                    grayscale(${f.grayscale}%)
-                    hue-rotate(${f.hueRotate}deg)
-                    ${f.invert ? 'invert(1)' : ''}
-                `.trim();
+                // Rebuild and apply the style
+                this._map.setStyle(buildFantasyStyle(mapColors, this._use3dBuildings));
             }
-        });
+        }
 
-        new LayerFilterControl().addTo(map);
+        // Style control removed - using fixed fantasy theme
+        // map.addControl(new MapStyleControl(), 'bottom-left');
 
         // =====================
         // FOG OF WAR SYSTEM
@@ -4720,13 +5075,14 @@
             updateFogOfWar();
         }
 
-        // Helper: Calculate destination point from lat/lng + distance (meters) + bearing (degrees)
-        function destinationPoint(latlng, distance, bearing) {
+        // Helper: Calculate destination point from [lng, lat] + distance (meters) + bearing (degrees)
+        // Returns [lng, lat] array for MapLibre compatibility
+        function destinationPoint(lngLat, distance, bearing) {
             const R = 6371000; // Earth radius in meters
             const d = distance / R;
             const brng = bearing * Math.PI / 180;
-            const lat1 = latlng.lat * Math.PI / 180;
-            const lng1 = latlng.lng * Math.PI / 180;
+            const lat1 = lngLat[1] * Math.PI / 180;
+            const lng1 = lngLat[0] * Math.PI / 180;
 
             const lat2 = Math.asin(
                 Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(brng)
@@ -4736,7 +5092,7 @@
                 Math.cos(d) - Math.sin(lat1) * Math.sin(lat2)
             );
 
-            return L.latLng(lat2 * 180 / Math.PI, lng2 * 180 / Math.PI);
+            return [lng2 * 180 / Math.PI, lat2 * 180 / Math.PI];  // [lng, lat]
         }
 
         // Flag to track if fog system is ready (navMode must exist)
@@ -4772,14 +5128,16 @@
             // Homebase reveal (only if homebase exists)
             if (playerStats && playerStats.homeBaseLat != null && playerStats.homeBaseLng != null) {
                 // Calculate reveal circle center using container coordinates (viewport-relative)
-                const homeLatLng = L.latLng(playerStats.homeBaseLat, playerStats.homeBaseLng);
-                const centerPoint = map.latLngToContainerPoint(homeLatLng);
+                // MapLibre uses [lng, lat] order
+                const homeLngLat = [playerStats.homeBaseLng, playerStats.homeBaseLat];
+                const centerPoint = map.project(homeLngLat);
 
                 // Calculate radius in pixels using map projection (with multiplier)
+                // Use actual distance between projected points to handle rotation correctly
                 const effectiveHomebaseRadius = playerRevealRadius * homebaseRadiusMultiplier;
-                const edgeLatLng = destinationPoint(homeLatLng, effectiveHomebaseRadius, 90);
-                const edgePoint = map.latLngToContainerPoint(edgeLatLng);
-                const radiusPixels = Math.abs(edgePoint.x - centerPoint.x);
+                const edgeLngLat = destinationPoint(homeLngLat, effectiveHomebaseRadius, 90);
+                const edgePoint = map.project(edgeLngLat);
+                const radiusPixels = Math.hypot(edgePoint.x - centerPoint.x, edgePoint.y - centerPoint.y);
 
                 // Cut out revealed area using composite operation
                 fogCtx.save();
@@ -4803,24 +5161,26 @@
 
             // Secondary reveal: Player's explore radius when outside homebase
             if (userLocation) {
-                const playerLatLng = L.latLng(userLocation.lat, userLocation.lng);
+                // MapLibre uses [lng, lat] order
+                const playerLngLat = [userLocation.lng, userLocation.lat];
 
                 // Check if player is outside homebase radius (or no homebase)
                 // Use effective homebase radius with multiplier
                 const effectiveHomebaseRadius = playerRevealRadius * homebaseRadiusMultiplier;
                 let isOutsideHomebase = true;
                 if (playerStats && playerStats.homeBaseLat != null && playerStats.homeBaseLng != null) {
-                    const homeLatLng = L.latLng(playerStats.homeBaseLat, playerStats.homeBaseLng);
-                    const distToHome = playerLatLng.distanceTo(homeLatLng);
+                    const homeLngLat = [playerStats.homeBaseLng, playerStats.homeBaseLat];
+                    const distToHome = distanceMeters(playerLngLat, homeLngLat);
                     isOutsideHomebase = distToHome > effectiveHomebaseRadius;
                 }
 
                 if (isOutsideHomebase) {
-                    const playerPoint = map.latLngToContainerPoint(playerLatLng);
+                    const playerPoint = map.project(playerLngLat);
                     const effectiveExploreRadius = playerExploreRadius * exploreRadiusMultiplier;
-                    const playerEdge = destinationPoint(playerLatLng, effectiveExploreRadius, 90);
-                    const playerEdgePoint = map.latLngToContainerPoint(playerEdge);
-                    const playerRadiusPixels = Math.abs(playerEdgePoint.x - playerPoint.x);
+                    const playerEdge = destinationPoint(playerLngLat, effectiveExploreRadius, 90);
+                    const playerEdgePoint = map.project(playerEdge);
+                    // Use actual distance to handle rotation correctly
+                    const playerRadiusPixels = Math.hypot(playerEdgePoint.x - playerPoint.x, playerEdgePoint.y - playerPoint.y);
 
                     fogCtx.save();
                     fogCtx.globalCompositeOperation = 'destination-out';
@@ -4844,22 +5204,23 @@
 
         // Check if a location is within the revealed area (homebase or player explore radius)
         function isInRevealedArea(lat, lng) {
-            const checkPoint = L.latLng(lat, lng);
+            // MapLibre uses [lng, lat] order
+            const checkLngLat = [lng, lat];
 
             // Check homebase radius (with multiplier)
             if (playerStats && playerStats.homeBaseLat != null && playerStats.homeBaseLng != null) {
-                const homeLatLng = L.latLng(playerStats.homeBaseLat, playerStats.homeBaseLng);
+                const homeLngLat = [playerStats.homeBaseLng, playerStats.homeBaseLat];
                 const effectiveHomebaseRadius = playerRevealRadius * homebaseRadiusMultiplier;
-                if (homeLatLng.distanceTo(checkPoint) <= effectiveHomebaseRadius) {
+                if (distanceMeters(homeLngLat, checkLngLat) <= effectiveHomebaseRadius) {
                     return true;
                 }
             }
 
             // Check player's explore radius (with multiplier)
             if (userLocation) {
-                const playerLatLng = L.latLng(userLocation.lat, userLocation.lng);
+                const playerLngLat = [userLocation.lng, userLocation.lat];
                 const effectiveExploreRadius = playerExploreRadius * exploreRadiusMultiplier;
-                if (playerLatLng.distanceTo(checkPoint) <= effectiveExploreRadius) {
+                if (distanceMeters(playerLngLat, checkLngLat) <= effectiveExploreRadius) {
                     return true;
                 }
             }
@@ -4872,6 +5233,7 @@
         map.on('zoom', updateFogOfWar);
         map.on('resize', resizeFogCanvas);
         map.on('rotate', updateFogOfWar);
+        map.on('pitch', updateFogOfWar);
 
         // NOTE: initFogOfWar() is called lazily from updateFogOfWar() to avoid
         // temporal dead zone issues with navMode variable
@@ -6034,11 +6396,14 @@
                 }
 
                 if (gpsMarker) {
-                    map.removeLayer(gpsMarker);
+                    gpsMarker.remove();  // MapLibre marker removal
                     gpsMarker = null;
                 }
                 if (gpsAccuracyCircle) {
-                    map.removeLayer(gpsAccuracyCircle);
+                    // Remove MapLibre layers and source
+                    if (map.getLayer('gps-accuracy-fill')) map.removeLayer('gps-accuracy-fill');
+                    if (map.getLayer('gps-accuracy-stroke')) map.removeLayer('gps-accuracy-stroke');
+                    if (map.getSource('gps-accuracy')) map.removeSource('gps-accuracy');
                     gpsAccuracyCircle = null;
                 }
 
@@ -6153,42 +6518,61 @@
                 updateFogOfWar();
             }
 
-            // Update or create marker
+            // Update or create marker (MapLibre version)
             if (!gpsMarker) {
-                const myIcon = L.divIcon({
-                    html: '<i class="mdi mdi-navigation" style="color: #4285f4; font-size: 36px; transform: rotate(' + (currentHeading || 0) + 'deg);"></i>',
-                    iconSize: [36, 36],
-                    iconAnchor: [18, 18],
-                    className: 'custom-div-icon'
-                });
-                gpsMarker = L.marker([lat, lng], { icon: myIcon }).addTo(map);
+                const el = document.createElement('div');
+                el.className = 'custom-div-icon gps-marker-icon';
+                el.innerHTML = '<i class="mdi mdi-navigation" style="color: #4285f4; font-size: 36px; transform: rotate(' + (currentHeading || 0) + 'deg);"></i>';
+                el.style.width = '36px';
+                el.style.height = '36px';
+                gpsMarker = new maplibregl.Marker({ element: el, anchor: 'center' })
+                    .setLngLat([lng, lat])
+                    .addTo(map);
             } else {
-                gpsMarker.setLatLng([lat, lng]);
+                gpsMarker.setLngLat([lng, lat]);
                 // Update rotation if we have heading
                 if (currentHeading !== null) {
-                    const myIcon = L.divIcon({
-                        html: '<i class="mdi mdi-navigation" style="color: #4285f4; font-size: 36px; transform: rotate(' + currentHeading + 'deg);"></i>',
-                        iconSize: [36, 36],
-                        iconAnchor: [18, 18],
-                        className: 'custom-div-icon'
-                    });
-                    gpsMarker.setIcon(myIcon);
+                    const el = gpsMarker.getElement();
+                    const icon = el.querySelector('.mdi-navigation');
+                    if (icon) {
+                        icon.style.transform = 'rotate(' + currentHeading + 'deg)';
+                    }
                 }
             }
 
-            // Update or create accuracy circle
+            // Update or create accuracy circle (MapLibre GeoJSON version)
             if (!gpsAccuracyCircle) {
-                gpsAccuracyCircle = L.circle([lat, lng], {
-                    radius: accuracy,
-                    color: '#4285f4',
-                    fillColor: '#4285f4',
-                    fillOpacity: 0.15,
-                    weight: 1,
-                    interactive: false  // Don't capture touch events
-                }).addTo(map);
+                // Create circle as GeoJSON using turf.js
+                const circleGeoJSON = createCircleGeoJSON([lng, lat], accuracy);
+                map.addSource('gps-accuracy', {
+                    type: 'geojson',
+                    data: circleGeoJSON
+                });
+                map.addLayer({
+                    id: 'gps-accuracy-fill',
+                    type: 'fill',
+                    source: 'gps-accuracy',
+                    paint: {
+                        'fill-color': '#4285f4',
+                        'fill-opacity': 0.15
+                    }
+                });
+                map.addLayer({
+                    id: 'gps-accuracy-stroke',
+                    type: 'line',
+                    source: 'gps-accuracy',
+                    paint: {
+                        'line-color': '#4285f4',
+                        'line-width': 1
+                    }
+                });
+                gpsAccuracyCircle = true;  // Flag that source exists
             } else {
-                gpsAccuracyCircle.setLatLng([lat, lng]);
-                gpsAccuracyCircle.setRadius(accuracy);
+                // Update existing source
+                const source = map.getSource('gps-accuracy');
+                if (source) {
+                    source.setData(createCircleGeoJSON([lng, lat], accuracy));
+                }
             }
 
             // Check if we're near a track
@@ -6326,11 +6710,18 @@
                     gpsBackupInterval = null;
                 }
 
+                // Show WASD controls
+                const wasdControls = document.getElementById('wasdControls');
+                if (wasdControls) wasdControls.classList.remove('hidden');
+
                 // Trigger initial position update
                 simulateGpsPosition();
                 updateStatus('GPS Test Mode enabled - use WASD to move', 'info');
             } else {
                 infoDiv.style.display = 'none';
+                // Hide WASD controls when disabling test mode
+                const wasdControls = document.getElementById('wasdControls');
+                if (wasdControls) wasdControls.classList.add('hidden');
                 updateStatus('GPS Test Mode disabled', 'info');
             }
         }
@@ -6502,23 +6893,42 @@
                 }
             };
 
+            // Use Pointer Events for unified touch/mouse handling
             buttons.forEach(btn => {
                 const dir = btn.dataset.dir;
+                let isPressed = false;
 
-                // Touch events
-                btn.addEventListener('touchstart', (e) => startMove(e, dir), { passive: false });
-                btn.addEventListener('touchend', stopMove, { passive: false });
-                btn.addEventListener('touchcancel', stopMove, { passive: false });
+                btn.addEventListener('pointerdown', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    isPressed = true;
+                    btn.setPointerCapture(e.pointerId);
+                    startMove(e, dir);
+                });
 
-                // Mouse events for desktop
-                btn.addEventListener('mousedown', (e) => startMove(e, dir));
-                btn.addEventListener('mouseup', stopMove);
-                btn.addEventListener('mouseleave', stopMove);
-            });
+                btn.addEventListener('pointerup', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (isPressed) {
+                        isPressed = false;
+                        btn.releasePointerCapture(e.pointerId);
+                        stopMove();
+                    }
+                });
 
-            // Also stop if touch/mouse ends outside buttons
-            document.addEventListener('touchend', stopMove);
-            document.addEventListener('mouseup', stopMove);
+                btn.addEventListener('pointercancel', (e) => {
+                    if (isPressed) {
+                        isPressed = false;
+                        btn.releasePointerCapture(e.pointerId);
+                        stopMove();
+                    }
+                });
+
+                // Prevent context menu on long press
+                btn.addEventListener('contextmenu', (e) => {
+                    e.preventDefault();
+                });
+            });
         }
 
         // Initialize WASD controls after DOM is ready
@@ -12202,10 +12612,11 @@
             // Fix Leaflet map sizing - must recalculate after container becomes visible
             setTimeout(() => {
                 if (map) {
-                    map.invalidateSize();
+                    map.resize();  // MapLibre equivalent of invalidateSize
                     // Re-center on user position if available
                     if (gpsMarker) {
-                        map.setView(gpsMarker.getLatLng(), map.getZoom());
+                        const lngLat = gpsMarker.getLngLat();
+                        map.setCenter([lngLat.lng, lngLat.lat]);
                     }
                     // Force refresh of markers that may have been added while map was hidden
                     refreshMapMarkers();
@@ -12215,35 +12626,31 @@
 
         // Refresh all map markers after map becomes visible
         function refreshMapMarkers() {
-            // Refresh GPS marker by recreating it
+            // Refresh GPS marker by recreating it (MapLibre version)
             if (gpsMarker && userLocation) {
                 const lat = userLocation.lat;
                 const lng = userLocation.lng;
-                map.removeLayer(gpsMarker);
+                gpsMarker.remove();
                 gpsMarker = null;
                 // Recreate the marker
-                const myIcon = L.divIcon({
-                    html: '<i class="mdi mdi-navigation" style="color: #4285f4; font-size: 36px; transform: rotate(' + (currentHeading || 0) + 'deg);"></i>',
-                    iconSize: [36, 36],
-                    iconAnchor: [18, 18],
-                    className: 'custom-div-icon'
-                });
-                gpsMarker = L.marker([lat, lng], { icon: myIcon }).addTo(map);
+                const el = document.createElement('div');
+                el.className = 'custom-div-icon gps-marker-icon';
+                el.innerHTML = '<i class="mdi mdi-navigation" style="color: #4285f4; font-size: 36px; transform: rotate(' + (currentHeading || 0) + 'deg);"></i>';
+                el.style.width = '36px';
+                el.style.height = '36px';
+                gpsMarker = new maplibregl.Marker({ element: el, anchor: 'center' })
+                    .setLngLat([lng, lat])
+                    .addTo(map);
             }
 
-            // Refresh accuracy circle
+            // Refresh accuracy circle (MapLibre - just update the source data)
             if (gpsAccuracyCircle && userLocation) {
                 const lat = userLocation.lat;
                 const lng = userLocation.lng;
-                map.removeLayer(gpsAccuracyCircle);
-                gpsAccuracyCircle = L.circle([lat, lng], {
-                    radius: userLocation.accuracy || 10,
-                    color: '#4285f4',
-                    fillColor: '#4285f4',
-                    fillOpacity: 0.15,
-                    weight: 1,
-                    interactive: false
-                }).addTo(map);
+                const source = map.getSource('gps-accuracy');
+                if (source) {
+                    source.setData(createCircleGeoJSON([lng, lat], userLocation.accuracy || 10));
+                }
             }
 
             // Refresh home base marker