From 6f8cd2eac08a930791f8fbaecc66b5cc41c017f6 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sun, 22 Mar 2026 07:20:06 +0000
Subject: [PATCH] Matrix: reworked map visibility + dimmer markers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced sepia+hue-rotate chain with grayscale+brightness+contrast
- Green tint via ::before (multiply) + ::after (screen) overlays
- Much brighter base map — roads/coastlines/land clearly visible
- Markers dimmed to #005f15 at 40% opacity
- DivIcon markers at 35% brightness
---
 public/index.html |  4 ++--
 public/live.js    |  6 +++---
 public/style.css  | 14 +++++++++-----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index ec78f77..1680a15 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="MeshCore Analyzer">
   <meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
-  <link rel="stylesheet" href="style.css?v=1774163919">
+  <link rel="stylesheet" href="style.css?v=1774164006">
   <link rel="stylesheet" href="home.css">
   <link rel="stylesheet" href="live.css?v=1774058575">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -90,7 +90,7 @@
   <script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="traces.js?v=1774135052" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="live.js?v=1774163847" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="live.js?v=1774164006" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="observers.js?v=1774290000" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="observer-detail.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/live.js b/public/live.js
index 45e07c6..fb7794d 100644
--- a/public/live.js
+++ b/public/live.js
@@ -1694,9 +1694,9 @@
       // Re-tint existing node markers green
       for (const [key, marker] of Object.entries(nodeMarkers)) {
         marker._matrixPrevColor = marker._baseColor;
-        marker._baseColor = '#00aa2a';
-        marker.setStyle({ fillColor: '#00aa2a', color: '#00aa2a' });
-        if (marker._glowMarker) marker._glowMarker.setStyle({ fillColor: '#00aa2a' });
+        marker._baseColor = '#005f15';
+        marker.setStyle({ fillColor: '#005f15', color: '#005f15', fillOpacity: 0.4, opacity: 0.4 });
+        if (marker._glowMarker) marker._glowMarker.setStyle({ fillColor: '#005f15', fillOpacity: 0.1 });
       }
     } else {
       container.classList.remove('matrix-theme');
diff --git a/public/style.css b/public/style.css
index 8f23a72..0b03850 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1537,11 +1537,15 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 
 /* === Matrix Theme === */
 .matrix-theme .leaflet-tile-pane {
-  filter: brightness(0.55) contrast(1.5) sepia(1) hue-rotate(70deg) saturate(2.5);
+  filter: grayscale(1) brightness(0.7) contrast(1.8);
 }
-.matrix-theme .leaflet-tile-pane::after {
-  content: ''; position: absolute; inset: 0; z-index: 1;
-  background: rgba(0, 255, 65, 0.03); mix-blend-mode: overlay; pointer-events: none;
+.matrix-theme .leaflet-container::before {
+  content: ''; position: absolute; inset: 0; z-index: 401;
+  background: rgba(0, 60, 10, 0.35); mix-blend-mode: multiply; pointer-events: none;
+}
+.matrix-theme .leaflet-container::after {
+  content: ''; position: absolute; inset: 0; z-index: 402;
+  background: rgba(0, 255, 65, 0.06); mix-blend-mode: screen; pointer-events: none;
 }
 .matrix-theme { background: #000 !important; }
 .matrix-theme .leaflet-control-zoom a { background: #0a0a0a !important; color: #00ff41 !important; border-color: #00ff4130 !important; }
@@ -1592,4 +1596,4 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 
 /* Node labels on map */
 .matrix-theme .node-label { color: #00ff41 !important; text-shadow: 0 0 4px #00ff41 !important; }
-.matrix-theme .leaflet-marker-icon:not(.matrix-char) { filter: hue-rotate(90deg) saturate(2) brightness(0.6); }
+.matrix-theme .leaflet-marker-icon:not(.matrix-char) { filter: hue-rotate(90deg) saturate(1) brightness(0.35) opacity(0.5); }