Add region security and coloring

Add security field to region data and implement color-coding.

public/universe.json

@@ -4,30 +4,35 @@
     "regionName": "Derelik",
     "x": "413",
     "y": "357",
+    "security": 0.3,
     "connectsTo": ["Devoid", "Domain"]
   },
   {
     "regionName": "Devoid",
     "x": "200",
     "y": "250",
+    "security": 0.7,
     "connectsTo": ["Derelik", "Domain", "Genesis"]
   },
   {
     "regionName": "Domain",
     "x": "600",
     "y": "300",
+    "security": 0.9,
     "connectsTo": ["Devoid", "Derelik", "Kador"]
   },
   {
     "regionName": "Genesis",
     "x": "350",
     "y": "500",
+    "security": 0.4,
     "connectsTo": ["Devoid", "Kador"]
   },
   {
     "regionName": "Kador",
     "x": "500",
     "y": "180",
+    "security": 0.6,
     "connectsTo": ["Domain", "Genesis"]
   }
 ]

src/components/GalaxyMap.tsx

@@ -9,6 +9,7 @@ interface Region {
   regionName: string;
   x: string;
   y: string;
+  security: number;
   connectsTo: string[];
 }
 
@@ -148,6 +149,7 @@ export const GalaxyMap = () => {
                 onMouseDown={() => handleMouseDown(region.regionName)}
                 isDragging={draggedNode === region.regionName}
                 type="region"
+                security={region.security}
               />
             ))}
           </svg>

src/components/MapNode.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import { getSecurityColor } from '../utils/securityColors';
 
@@ -25,12 +24,10 @@ export const MapNode: React.FC<MapNodeProps> = ({
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   
-  // Use security-based color for systems, default colors for regions
+  // Use security-based color for both systems and regions
-  const nodeColor = type === 'system' && security !== undefined
+  const nodeColor = security !== undefined
     ? getSecurityColor(security)
-    : type === 'region' 
+    : '#a855f7'; // fallback purple color
-      ? (isHovered ? '#8b5cf6' : '#a855f7')
-      : (isHovered ? '#06b6d4' : '#0891b2');
 
   if (type === 'region') {
     // Render region as a pill/rounded rectangle