Sharpen the cyberpunk visuals — too diffused/hard to read

- Removed the whole-app animated scanline overlay entirely — biggest
  single contributor to the hazy look.
- text-shadow glow blur cut from 8px to 2px across the board (headers
  keep a hint of neon, body text is now crisp).
- hud-panel: solid 0.97-alpha background (was 0.88 + backdrop-blur(10px),
  which softened everything behind/inside it), tighter box-shadow.
- Map: dropped the saturate/hue-rotate tile filter (just brightness now),
  halved drop-shadow blur radii on markers/links/fields/clusters.
- Bumped low-opacity text (many labels were down at /30-/60 which reads
  fine on a mockup but is genuinely hard to read against a busy map) up
  to /75-/95 across Login/TeamPick/MapView.

frontend/src/style.css

@@ -17,39 +17,25 @@ h1, h2, .font-display {
   font-family: 'Orbitron', sans-serif;
 }
 
-/* Subtle animated scanline field over the whole app — cheap, pure-CSS. */
+/* Tight, crisp glow — a hint of neon without blurring the text itself.
-#app::before {
+   These were 8px before, which read as diffused/hard to read; kept short
-  content: '';
+   enough here to add color without softening edges. */
-  position: fixed;
+.text-glow-cyan { text-shadow: 0 0 2px rgba(0, 255, 242, 0.9); }
-  inset: 0;
+.text-glow-orange { text-shadow: 0 0 2px rgba(255, 95, 31, 0.9); }
-  pointer-events: none;
+.text-glow-green { text-shadow: 0 0 2px rgba(57, 255, 20, 0.9); }
-  z-index: 2000;
-  background-image: repeating-linear-gradient(
-    0deg,
-    rgba(0, 255, 242, 0.035) 0px,
-    rgba(0, 255, 242, 0.035) 1px,
-    transparent 1px,
-    transparent 3px
-  );
-  mix-blend-mode: screen;
-}
-
-.text-glow-cyan { text-shadow: 0 0 8px rgba(0, 255, 242, 0.85); }
-.text-glow-orange { text-shadow: 0 0 8px rgba(255, 95, 31, 0.9); }
-.text-glow-green { text-shadow: 0 0 8px rgba(57, 255, 20, 0.9); }
 
 .hud-panel {
-  background: rgba(8, 10, 20, 0.88);
+  background: rgba(6, 8, 16, 0.97);
-  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 255, 242, 0.5);
-  border: 1px solid rgba(0, 255, 242, 0.35);
+  box-shadow: 0 0 6px rgba(0, 255, 242, 0.15);
-  box-shadow: 0 0 20px rgba(0, 255, 242, 0.12), inset 0 0 30px rgba(0, 255, 242, 0.04);
   clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
 }
 
-/* Darken + tint the CARTO dark tiles a bit further and desaturate slightly
+/* Darken the CARTO dark tiles a bit further so our neon markers/links pop
-   so our neon markers/links pop harder against the basemap. */
+   harder against the basemap. Dropped the earlier saturate/hue-rotate —
+   it was adding a slight haze over the whole map. */
 .leaflet-tile-pane {
-  filter: brightness(0.75) saturate(1.3) hue-rotate(-6deg);
+  filter: brightness(0.7);
 }
 
 .leaflet-container {
@@ -58,31 +44,31 @@ h1, h2, .font-display {
 
 .leaflet-popup-content-wrapper,
 .leaflet-tooltip {
-  background: rgba(8, 10, 20, 0.92) !important;
+  background: rgba(6, 8, 16, 0.97) !important;
-  color: #d8fbff !important;
+  color: #f0feff !important;
-  border: 1px solid rgba(0, 255, 242, 0.4) !important;
+  border: 1px solid rgba(0, 255, 242, 0.5) !important;
   font-family: 'Share Tech Mono', monospace !important;
-  box-shadow: 0 0 12px rgba(0, 255, 242, 0.25) !important;
+  box-shadow: 0 0 4px rgba(0, 255, 242, 0.2) !important;
 }
 .leaflet-popup-tip {
-  background: rgba(8, 10, 20, 0.92) !important;
+  background: rgba(6, 8, 16, 0.97) !important;
 }
 
 .regress-portal-marker {
-  filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af));
+  filter: drop-shadow(0 0 2px var(--portal-glow, #9ca3af));
 }
 .regress-portal-marker.claimed {
   animation: portal-pulse 2.4s ease-in-out infinite;
 }
 @keyframes portal-pulse {
-  0%, 100% { filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af)); }
+  0%, 100% { filter: drop-shadow(0 0 2px var(--portal-glow, #9ca3af)); }
-  50% { filter: drop-shadow(0 0 10px var(--portal-glow, #9ca3af)); }
+  50% { filter: drop-shadow(0 0 4px var(--portal-glow, #9ca3af)); }
 }
 
-.regress-link-orange { filter: drop-shadow(0 0 4px #ff5f1f); }
+.regress-link-orange { filter: drop-shadow(0 0 1.5px #ff5f1f); }
-.regress-link-green { filter: drop-shadow(0 0 4px #39ff14); }
+.regress-link-green { filter: drop-shadow(0 0 1.5px #39ff14); }
-.regress-field-orange { filter: drop-shadow(0 0 6px #ff5f1f); }
+.regress-field-orange { filter: drop-shadow(0 0 2px #ff5f1f); }
-.regress-field-green { filter: drop-shadow(0 0 6px #39ff14); }
+.regress-field-green { filter: drop-shadow(0 0 2px #39ff14); }
 
 /* Reskin leaflet.markercluster's default light-green bubble look to match
    the HUD theme — overrides MarkerCluster.Default.css. Color reflects what's
@@ -97,32 +83,32 @@ h1, h2, .font-display {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #d8fbff;
+  color: #f0feff;
   font-family: 'Share Tech Mono', monospace;
   font-weight: bold;
   font-size: 12px;
 }
 
 .regress-cluster--neutral div {
-  background: radial-gradient(circle at 35% 35%, rgba(0, 255, 242, 0.35), rgba(0, 255, 242, 0.12) 70%);
+  background: rgba(0, 255, 242, 0.22);
   border: 2px solid #00fff2;
-  box-shadow: 0 0 10px rgba(0, 255, 242, 0.5);
+  box-shadow: 0 0 4px rgba(0, 255, 242, 0.4);
 }
 
 .regress-cluster--orange div {
-  background: radial-gradient(circle at 35% 35%, rgba(255, 95, 31, 0.45), rgba(255, 95, 31, 0.15) 70%);
+  background: rgba(255, 95, 31, 0.3);
   border: 2px solid #ff5f1f;
-  box-shadow: 0 0 12px rgba(255, 95, 31, 0.65);
+  box-shadow: 0 0 5px rgba(255, 95, 31, 0.5);
 }
 
 .regress-cluster--green div {
-  background: radial-gradient(circle at 35% 35%, rgba(57, 255, 20, 0.45), rgba(57, 255, 20, 0.15) 70%);
+  background: rgba(57, 255, 20, 0.3);
   border: 2px solid #39ff14;
-  box-shadow: 0 0 12px rgba(57, 255, 20, 0.65);
+  box-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
 }
 
 .regress-cluster--contested div {
-  background: linear-gradient(135deg, rgba(255, 95, 31, 0.45) 50%, rgba(57, 255, 20, 0.45) 50%);
+  background: linear-gradient(135deg, rgba(255, 95, 31, 0.35) 50%, rgba(57, 255, 20, 0.35) 50%);
   border: 2px solid #ffffff;
-  box-shadow: 0 0 12px rgba(255, 0, 229, 0.55);
+  box-shadow: 0 0 5px rgba(255, 0, 229, 0.4);
 }

frontend/src/views/LoginView.vue

@@ -43,7 +43,7 @@ async function handleNsecLogin() {
     ></div>
 
     <h1 class="font-display text-5xl font-black tracking-[0.3em] text-cyan-neon text-glow-cyan">REGRESS</h1>
-    <p class="max-w-sm text-cyan-neon/60">
+    <p class="max-w-sm text-cyan-neon/90">
       Real-world nodes. Two factions. Claim them for orange or green — sign in with Nostr to jack in.
     </p>
     <button
@@ -53,11 +53,11 @@ async function handleNsecLogin() {
     >
       {{ loggingIn ? 'Authenticating…' : 'Connect with Nostr' }}
     </button>
-    <p v-if="!hasNip07()" class="text-sm text-cyan-neon/40">
+    <p v-if="!hasNip07()" class="text-sm text-cyan-neon/75">
       No NIP-07 extension detected — install Alby or nos2x, or open this app from the Archipelago dashboard.
     </p>
 
-    <button class="text-xs text-cyan-neon/30 underline hover:text-magenta-neon" @click="showNsecForm = !showNsecForm">
+    <button class="text-xs text-cyan-neon/60 underline hover:text-magenta-neon" @click="showNsecForm = !showNsecForm">
       {{ showNsecForm ? 'Hide' : 'Or paste an nsec (unsafe)' }}
     </button>
 

frontend/src/views/MapView.vue

@@ -230,20 +230,20 @@ watch(linkSourceId, redraw);
       <div class="flex items-center gap-5">
         <span class="font-display text-lg font-black tracking-widest text-cyan-neon text-glow-cyan">REGRESS</span>
         <span class="flex items-center gap-1 font-bold text-orange-neon text-glow-orange">
-          ▲ {{ orangeScore?.claimedPlaces ?? 0 }} <span class="text-orange-neon/60">nodes</span> ·
+          ▲ {{ orangeScore?.claimedPlaces ?? 0 }} <span class="text-orange-neon/90">nodes</span> ·
-          {{ orangeScore?.links ?? 0 }} <span class="text-orange-neon/60">links</span> ·
+          {{ orangeScore?.links ?? 0 }} <span class="text-orange-neon/90">links</span> ·
-          {{ orangeScore?.fields ?? 0 }} <span class="text-orange-neon/60">fields</span> ·
+          {{ orangeScore?.fields ?? 0 }} <span class="text-orange-neon/90">fields</span> ·
           {{ (orangeScore?.areaKm2 ?? 0).toFixed(2) }} km²
         </span>
         <span class="flex items-center gap-1 font-bold text-green-neon text-glow-green">
-          ▲ {{ greenScore?.claimedPlaces ?? 0 }} <span class="text-green-neon/60">nodes</span> ·
+          ▲ {{ greenScore?.claimedPlaces ?? 0 }} <span class="text-green-neon/90">nodes</span> ·
-          {{ greenScore?.links ?? 0 }} <span class="text-green-neon/60">links</span> ·
+          {{ greenScore?.links ?? 0 }} <span class="text-green-neon/90">links</span> ·
-          {{ greenScore?.fields ?? 0 }} <span class="text-green-neon/60">fields</span> ·
+          {{ greenScore?.fields ?? 0 }} <span class="text-green-neon/90">fields</span> ·
           {{ (greenScore?.areaKm2 ?? 0).toFixed(2) }} km²
         </span>
       </div>
       <div class="flex items-center gap-3">
-        <span class="text-cyan-neon/70">
+        <span class="text-cyan-neon/95">
           {{ auth.displayName ?? auth.pubkey?.slice(0, 8) }}//<span
             :class="auth.team === 'orange' ? 'text-orange-neon text-glow-orange' : 'text-green-neon text-glow-green'"
             class="font-bold uppercase"
@@ -279,12 +279,12 @@ watch(linkSourceId, redraw);
           <h2 class="font-display font-bold text-cyan-neon text-glow-cyan">
             {{ selectedPlace.name || `Node ${selectedPlace.id}` }}
           </h2>
-          <button class="text-cyan-neon/50 hover:text-cyan-neon" @click="selectedPlaceId = null">✕</button>
+          <button class="text-cyan-neon/80 hover:text-cyan-neon" @click="selectedPlaceId = null">✕</button>
         </div>
-        <p v-if="selectedPlace.address" class="mb-2 text-cyan-neon/50">{{ selectedPlace.address }}</p>
+        <p v-if="selectedPlace.address" class="mb-2 text-cyan-neon/80">{{ selectedPlace.address }}</p>
         <p class="mb-3">
           STATUS:
-          <span v-if="!selectedPlace.claim_team" class="text-cyan-neon/60">UNCLAIMED</span>
+          <span v-if="!selectedPlace.claim_team" class="text-cyan-neon/90">UNCLAIMED</span>
           <span
             v-else
             class="font-bold uppercase"

frontend/src/views/TeamPickView.vue

@@ -23,7 +23,7 @@ async function pick(team: Team) {
 <template>
   <div class="flex h-full flex-col items-center justify-center gap-6 px-6 text-center">
     <h1 class="font-display text-3xl font-black tracking-widest text-cyan-neon text-glow-cyan">CHOOSE YOUR FACTION</h1>
-    <p class="max-w-sm text-cyan-neon/60">
+    <p class="max-w-sm text-cyan-neon/90">
       This choice is permanent — you can't switch teams later, so pick the side you're actually playing for.
     </p>
     <div class="flex gap-6">