Use banner for attack and operations mode instead of notification

Author: frank9999

public/css/world-map.css

@@ -59,7 +59,7 @@
     display: block;
     width: 100%;
     background: #1a1a1a;
-    height: calc(100vh - 350px);
+    height: calc(100vh - 150px);
     min-height: 400px;
 }
 
@@ -698,7 +698,7 @@
 .attack-mode-banner {
     display: none;
     position: fixed;
-    top: 0;
+    bottom: 0;
     left: 0;
     width: 100%;
     padding: 12px 20px;
@@ -708,7 +708,7 @@
     text-align: center;
     z-index: 10001;
     font-size: 14px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
 }
 
 .attack-mode-banner button {

public/js/world/attack.js

@@ -12,8 +12,10 @@
 
     const attackUnitsModal = document.getElementById('attackUnitsModal');
     const confirmAttackUnitsBtn = document.getElementById('confirmAttackUnitsBtn');
+    const attackModeBanner = document.getElementById('attackModeBanner');
 
     confirmAttackUnitsBtn.onclick = sendAttackFleet;
+    document.getElementById('cancelAttackModeBtn').onclick = cancelAttackMode;
 
     function getDefaultTileClick() {
         return WorldApp.defaultTileClick;
@@ -59,10 +61,9 @@
             };
 
             worldMap.render();
-            showNotification(
-                'Select one of your ' + result.eligibleRegions.length + ' highlighted region(s) to attack from. Click the target or press Escape to cancel.',
-                'info'
-            );
+            attackModeBanner.style.display = 'flex';
+            document.getElementById('attackModeText').textContent =
+                'Attack Mode: Select one of ' + result.eligibleRegions.length + ' highlighted region(s) to attack from. Click target or press Escape to cancel.';
         } catch (error) {
             console.error('Error loading attack-from regions:', error);
             showNotification('An error occurred. Please try again.', 'error');
@@ -82,7 +83,7 @@
 
         worldMap.config.onTileClick = getDefaultTileClick();
         worldMap.render();
-        showNotification('Attack cancelled.', 'info');
+        attackModeBanner.style.display = 'none';
     }
 
     async function showAttackUnitsModal(targetRegion, sourceRegion) {