Display a clear "Game Paused" overlay when the game is stopped

[AjaysDevWorkspace]

⏸️ Feature Request: Add Pause Overlay

Description:

When the player presses the Pause button, the game currently just freezes — which works, but doesn’t provide clear visual feedback. To improve clarity and user experience, we need to add a stylish, semi-transparent overlay that visually communicates when the game is paused.

---

🎯 Requirements:

• When the game state is set to Paused, display a dark, semi-transparent overlay covering the #game-board.
• Centered on this overlay, show the text “GAME PAUSED” (or a similar message) in a large, clear, and contrasting font.
• The overlay must disappear instantly when the game is resumed (i.e., state changes from Paused to Active).

---

💡 Implementation Hints:

• Create an overlay element (e.g., a <div id="pause-overlay">) styled with CSS.
• Use a semi-transparent background (e.g., rgba(0, 0, 0, 0.6)) and position it absolutely over #game-board.
• Toggling the overlay’s visibility can be handled by the game’s pause/resume logic.
• Optional: Add a simple fade-in/out transition for smoother visuals.

---

🧩 Files Likely Involved:

• script.js — game state logic and pause/resume event handling.
• style.css — overlay styling and animation (if applicable).
• HTML template containing #game-board — for overlay placement.

---

✅ Acceptance Criteria:

• A dark, semi-transparent overlay appears when the game is paused.
• “GAME PAUSED” text is centered and easily visible.
• Overlay disappears immediately when the game resumes.
• No disruption or flicker in gameplay visuals when toggling pause/resume.

---

Enhancement Type: User Interface / Visual Feedback
Component: Pause Logic, Game UI

[sujayxbarui]

Please assign this task to me

[Nitin-0017]

please assign this task to me