Feature: Add Sound & Music Toggle Controls to Game UI 🎵🔇

📌 Description:
Currently, the game has engaging sound effects and background music — but not all players want audio during gameplay. Let’s add an intuitive way for users to toggle sound effects and background music on/off directly from the game screen.

✨ Feature Requirements:
Add two toggle buttons/icons:

🎵 Toggle Music – enable/disable background music

🔔 Toggle Sound Effects – enable/disable collision, game over, countdown sounds

Position them in a non-obstructive spot on the game screen (top-right or bottom-left)

Buttons should show the current status (e.g., 🎵 ON / OFF)

Should persist during a single play session (no need for localStorage)

Update button appearance when toggled (CSS class or icon change)

🛠️ Files to Modify:
index.html – Add toggle buttons inside the canvas container or overlay

style.css – Style the toggle buttons (hover effects, mobile responsive)

script.js (or main game logic file) – Implement toggle logic using flags like isMusicOn, isSfxOn

💡 Sample HTML:
html
Copy
Edit

💡 Sample JS Logic:
js
Copy
Edit
let isMusicOn = true;
let isSfxOn = true;

document.getElementById('musicToggle').addEventListener('click', () => {
isMusicOn = !isMusicOn;
backgroundMusic.volume = isMusicOn ? 1 : 0;
updateButtonLabel();
});

document.getElementById('sfxToggle').addEventListener('click', () => {
isSfxOn = !isSfxOn;
// Use this flag before playing sounds like paddle hit or game over
updateButtonLabel();
});

function updateButtonLabel() {
musicToggle.textContent = `🎵 Music: ${isMusicOn ? 'ON' : 'OFF'}`;
sfxToggle.textContent = `🔔 SFX: ${isSfxOn ? 'ON' : 'OFF'}`;
}
✅ Acceptance Criteria:
Sound and music can be muted/unmuted independently.

Buttons are accessible and do not obstruct gameplay.

Works well on both desktop and mobile.

No major changes to game loop or core logic.

Follow consistent styling and file structure.

🏷️ Labels:
level:1 feature good-first-issue UX enhancement audio