improvements and style changes of adding name to team functionality

public/script.js

@@ -118,8 +118,30 @@ function waitForCategorySelection(customName, squareEl, squareNumber) {
   document.querySelectorAll('.categories').forEach(cat => {
     cat.classList.add('category-selectable');
   });
+
+  // --- Add overlay to dim only the map area with transition ---
+  let mapWrapper = document.getElementById('mapWrapper');
+  let overlay = document.createElement('div');
+  overlay.id = 'category-select-overlay';
+  overlay.style.position = 'absolute';
+  overlay.style.top = '0';
+  overlay.style.left = '0';
+  overlay.style.width = '100%';
+  overlay.style.height = '100%';
+  overlay.style.background = 'rgba(0,0,0,0.55)';
+  overlay.style.zIndex = '999';
+  overlay.style.pointerEvents = 'auto';
+  overlay.style.opacity = '0';
+  overlay.style.transition = 'opacity 0.3s ease';
+  mapWrapper.appendChild(overlay);
+  // Trigger fade-in
+  requestAnimationFrame(() => {
+    overlay.style.opacity = '1';
+  });
+  // --- end overlay ---
+
   const msg = document.createElement('div');
-  msg.textContent = 'Click a category to add "' + customName + '"';
+  msg.innerHTML = 'Select a team to add <span style="color:#d103f9;">' + customName + '</span> to';
   msg.className = 'category-select-msg';
   msg.style.position = 'absolute';
   msg.style.top = '40%';
@@ -133,6 +155,27 @@ function waitForCategorySelection(customName, squareEl, squareNumber) {
   msg.style.fontSize = '1.1em';
   document.body.appendChild(msg);
 
+  // --- Overlay click cancels the add operation ---
+  overlay.addEventListener('click', function cancelAddFruit() {
+    // Remove highlight/selectable from categories
+    document.querySelectorAll('.categories').forEach(cat => {
+      cat.classList.remove('category-selectable');
+      cat.removeEventListener('click', onCategoryClick, true);
+    });
+    // Remove overlay and message
+    document.body.removeChild(msg);
+    overlay.style.opacity = '0';
+    setTimeout(() => {
+      if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+    }, 300);
+    // Restore the square to its original state (just the number)
+    squareEl.innerHTML = '';
+    const numDiv = document.createElement('div');
+    numDiv.className = 'square-number';
+    numDiv.textContent = squareNumber;
+    squareEl.appendChild(numDiv);
+  });
+
   // Handler for category click
   function onCategoryClick(e) {
     e.stopPropagation();
@@ -141,6 +184,14 @@ function waitForCategorySelection(customName, squareEl, squareNumber) {
       cat.removeEventListener('click', onCategoryClick, true);
     });
     document.body.removeChild(msg);
+    // --- Remove overlay with fade-out ---
+    if (overlay && overlay.parentNode) {
+      overlay.style.opacity = '0';
+      setTimeout(() => {
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+      }, 300);
+    }
+    // --- end remove overlay ---
 
     // Find category name
     const catHeader = e.currentTarget.querySelector('.category-header h4');