Fix map display and zoom issues

-   Reduced region label size.
-   Restored connections.
-   Inverted zoom direction.

src/components/GalaxyMap.tsx

@@ -103,8 +103,8 @@ export const GalaxyMap = () => {
     const mouseX = e.clientX - rect.left;
     const mouseY = e.clientY - rect.top;
 
-    // Reverse scroll direction: positive deltaY zooms out, negative zooms in
-    const scale = e.deltaY > 0 ? 1.1 : 0.9;
+    // Invert scroll direction: negative deltaY (scroll up) zooms out, positive (scroll down) zooms in
+    const scale = e.deltaY < 0 ? 1.1 : 0.9;
     const newWidth = viewBox.width * scale;
     const newHeight = viewBox.height * scale;
 

src/components/MapNode.tsx

@@ -27,9 +27,9 @@ export const MapNode: React.FC<MapNodeProps> = ({
     : '#a855f7'; // fallback purple color
 
   if (type === 'region') {
-    // 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
+    // Further reduce region size to prevent overlap - made even smaller
+    const pillWidth = Math.max(name.length * 5, 40); // Reduced from 8 to 5, min from 60 to 40
+    const pillHeight = 18; // Reduced from 24 to 18
     
     return (
       <g
@@ -71,13 +71,13 @@ export const MapNode: React.FC<MapNodeProps> = ({
           }`}
         />
         
-        {/* Text inside pill */}
+        {/* Text inside pill - made smaller */}
         <text
           x="0"
-          y="4"
+          y="3"
           textAnchor="middle"
           fill="#ffffff"
-          fontSize="11"
+          fontSize="8"
           fontWeight="bold"
           className="transition-all duration-300 pointer-events-none select-none"
           style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
@@ -89,7 +89,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
   } else {
     // Render system as a dot with external label
     const nodeSize = 6;
-    const textOffset = 18; // Position text below the dot
+    const textOffset = 20; // Position text below the dot - moved down more
     
     return (
       <g

src/components/RegionMap.tsx

@@ -104,8 +104,8 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
     const mouseX = e.clientX - rect.left;
     const mouseY = e.clientY - rect.top;
 
-    // Reverse scroll direction: positive deltaY zooms out, negative zooms in
-    const scale = e.deltaY > 0 ? 1.1 : 0.9;
+    // Invert scroll direction: negative deltaY (scroll up) zooms out, positive (scroll down) zooms in
+    const scale = e.deltaY < 0 ? 1.1 : 0.9;
     const newWidth = viewBox.width * scale;
     const newHeight = viewBox.height * scale;
 
@@ -113,7 +113,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
     const mouseYInSVG = viewBox.y + (mouseY / rect.height) * viewBox.height;
 
     const newX = mouseXInSVG - (mouseX / rect.width) * newWidth;
-    const newY = mouseYInSVG - (mouseY / rect.height) * newWidth;
+    const newY = mouseYInSVG - (mouseY / rect.height) * newHeight;
 
     setViewBox({
       x: newX,