Hotfix/No way to pause on mobile (#19)

- Added pause button functionality to control game state (pause/resume).
- Updated sound status button visibility and styling for improved user experience.
- Adjusted button styles for better responsiveness and aesthetics on mobile devices.
- Implemented logic to show/hide buttons based on game state transitions.

This update improves gameplay interaction and visual feedback for users.

Reviewed-on: #19
Co-authored-by: Juan Sebastian Montoya <juansmm@outlook.com>
Co-committed-by: Juan Sebastian Montoya <juansmm@outlook.com>

src/game/Game.js

@@ -411,6 +411,16 @@ export class Game {
       document.getElementById('instructions').style.display = 'block';
     }
     
+    // Show pause and sound buttons when game starts
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.style.display = 'block';
+    }
+    const soundStatus = document.getElementById('soundStatus');
+    if (soundStatus) {
+      soundStatus.style.display = 'block';
+    }
+    
     // Reset UI
     this.updateUI();
     document.getElementById('combo').style.display = 'none';
@@ -436,6 +446,13 @@ export class Game {
       this.soundSystem.stopBackgroundMusic();
     }
     
+    // Update pause button text
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.textContent = '▶️';
+      pauseBtn.title = 'Resume Game';
+    }
+    
     if (this.uiSystem) {
       this.uiSystem.setState('paused');
     } else {
@@ -458,6 +475,13 @@ export class Game {
       });
     }
     
+    // Update pause button text
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.textContent = '⏸️';
+      pauseBtn.title = 'Pause Game';
+    }
+    
     if (this.uiSystem) {
       this.uiSystem.setState('playing');
     } else {
@@ -476,6 +500,16 @@ export class Game {
     this.isPaused = false;
     this.timeScale = 0; // Stop time in menu
     
+    // Hide pause and sound buttons when returning to menu
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.style.display = 'none';
+    }
+    const soundStatus = document.getElementById('soundStatus');
+    if (soundStatus) {
+      soundStatus.style.display = 'none';
+    }
+    
     // Update UI state
     if (this.uiSystem) {
       this.uiSystem.setState('menu');
@@ -516,6 +550,20 @@ export class Game {
       pauseMenuBtn.addEventListener('click', () => this.returnToMenu());
     }
     
+    // Pause button (for mobile)
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.addEventListener('click', () => {
+        if (this.gameActive && !this.inMenu) {
+          if (this.isPaused) {
+            this.resumeGame();
+          } else {
+            this.pauseGame();
+          }
+        }
+      });
+    }
+    
     document.getElementById('restartBtn').addEventListener('click', () => this.restart());
 
     // Toggle performance monitor with 'T' key