Merge status message into top controls panel for better UI

index.html

@@ -72,6 +72,11 @@
                 <span class="player-marker" id="currentPlayer">X</span>
               </div>
             </div>
+            
+            <div class="status-message" id="statusMessage">
+              Player X starts the game
+            </div>
+
             <div class="score-display">
               <div class="score-item">
                 <span class="score-label">Player X</span>
@@ -105,10 +110,6 @@
           <div class="board" id="gameBoard"></div>
         </div>
 
-        <div class="status-message" id="statusMessage">
-          Player X starts the game
-        </div>
-
         <!-- Multiplayer Panel -->
         <div id="multiplayerPanel" class="multiplayer-panel" style="display: none;">
           <div class="player-stats-card">
@@ -267,7 +268,7 @@
         const gameControls = document.getElementById('gameControls');
         const multiplayerPanel = document.getElementById('multiplayerPanel');
         const boardWrapper = document.querySelector('.board-wrapper');
-        const statusMessage = document.getElementById('statusMessage');
+        // statusMessage is now inside gameControls, so we don't need to toggle it separately
 
         if (mode === 'local') {
           localBtn.classList.add('active');
@@ -275,7 +276,6 @@
           gameControls.style.display = 'grid';
           multiplayerPanel.style.display = 'none';
           boardWrapper.style.display = 'flex';
-          statusMessage.style.display = 'block';
 
           // Reset to local mode
           if (window.multiplayerClient) {
@@ -293,7 +293,6 @@
           gameControls.style.display = 'none';
           multiplayerPanel.style.display = 'block';
           boardWrapper.style.display = 'none';
-          statusMessage.style.display = 'none';
 
           // Initialize multiplayer if not already
           if (!window.multiplayerClient) {

styles.css

@@ -435,13 +435,26 @@ body {
 /* Status Message */
 .status-message {
   text-align: center;
-  padding: 1.5rem;
-  background: var(--bg-secondary);
+  padding: 1rem;
+  background: var(--bg-tertiary);
   border-radius: 12px;
   border: 1px solid var(--border-light);
   color: var(--text-secondary);
   font-weight: 600;
-  font-size: 1.1rem;
+  font-size: 1rem;
+  width: 100%;
+}
+
+.status-message.success {
+  border-color: var(--success);
+  color: var(--success);
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.status-message.info {
+  border-color: var(--accent-secondary);
+  color: var(--accent-secondary);
+  background: rgba(56, 189, 248, 0.1);
 }
 
 /* Victory Overlay */