Fix visual issues and add features

-   Remove white boxes around system nodes.
-   Reverse zoom direction.
-   Reduce region node size.
-   Implement URL encoding for region names.
-   Color connections based on node security.

src/components/MapNode.tsx

@@ -27,9 +27,9 @@ export const MapNode: React.FC<MapNodeProps> = ({
     : '#a855f7'; // fallback purple color
 
   if (type === 'region') {
-    // Render region as a pill/rounded rectangle
-    const pillWidth = Math.max(name.length * 12, 80);
-    const pillHeight = 32;
+    // Reduce region size to prevent overlap
+    const pillWidth = Math.max(name.length * 8, 60); // Reduced from 12 to 8, min from 80 to 60
+    const pillHeight = 24; // Reduced from 32 to 24
     
     return (
       <g
@@ -44,11 +44,11 @@ export const MapNode: React.FC<MapNodeProps> = ({
       >
         {/* Glow effect */}
         <rect
-          x={-pillWidth/2 - 4}
-          y={-pillHeight/2 - 4}
-          width={pillWidth + 8}
-          height={pillHeight + 8}
-          rx={(pillHeight + 8) / 2}
+          x={-pillWidth/2 - 3}
+          y={-pillHeight/2 - 3}
+          width={pillWidth + 6}
+          height={pillHeight + 6}
+          rx={(pillHeight + 6) / 2}
           fill={nodeColor}
           opacity={isHovered ? 0.3 : 0.1}
           filter="url(#glow)"
@@ -64,7 +64,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
           rx={pillHeight / 2}
           fill={nodeColor}
           stroke="#ffffff"
-          strokeWidth="2"
+          strokeWidth="1.5"
           filter="url(#glow)"
           className={`transition-all duration-300 ${
             isHovered ? 'drop-shadow-lg' : ''
@@ -74,10 +74,10 @@ export const MapNode: React.FC<MapNodeProps> = ({
         {/* Text inside pill */}
         <text
           x="0"
-          y="5"
+          y="4"
           textAnchor="middle"
           fill="#ffffff"
-          fontSize="14"
+          fontSize="11"
           fontWeight="bold"
           className="transition-all duration-300 pointer-events-none select-none"
           style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
@@ -88,8 +88,8 @@ export const MapNode: React.FC<MapNodeProps> = ({
     );
   } else {
     // Render system as a dot with external label
-    const nodeSize = 8;
-    const textOffset = 20; // Increased from 15 to move text further down
+    const nodeSize = 6;
+    const textOffset = 18; // Position text below the dot
     
     return (
       <g
@@ -104,19 +104,17 @@ export const MapNode: React.FC<MapNodeProps> = ({
       >
         {/* Node glow effect */}
         <circle
-          r={nodeSize + 6}
+          r={nodeSize + 4}
           fill={nodeColor}
           opacity={isHovered ? 0.3 : 0.1}
           filter="url(#glow)"
           className="transition-all duration-300"
         />
         
-        {/* Main node */}
+        {/* Main node - removed stroke to eliminate white border */}
         <circle
           r={nodeSize}
           fill={nodeColor}
-          stroke="#ffffff"
-          strokeWidth="2"
           filter="url(#glow)"
           className={`transition-all duration-300 ${
             isHovered ? 'drop-shadow-lg' : ''
@@ -125,7 +123,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
         
         {/* Inner core */}
         <circle
-          r={nodeSize - 4}
+          r={nodeSize - 3}
           fill={isHovered ? '#ffffff' : nodeColor}
           opacity={0.8}
           className="transition-all duration-300"
@@ -137,7 +135,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
           y={textOffset}
           textAnchor="middle"
           fill="#ffffff"
-          fontSize="12"
+          fontSize="10"
           fontWeight="bold"
           className={`transition-all duration-300 ${
             isHovered ? 'fill-purple-200' : 'fill-white'