fix: Audio button isn't matching the theme

[Nl-T-lN]

Resolves: #68

Description

This PR fixes a visual inconsistency where the Mute button did not match the “glass” theme of the Score button.

Problem

The mute button’s styles were previously defined inline in script.js, resulting in a plain, solid-color appearance.
It lacked the shared visual elements (like gradient, backdrop-filter, rounded corners) used in the score button and other UI elements — making it look inconsistent, as shown in the screenshot

Changes Made

• script.js

  • Removed the entire Object.assign(muteBtn.style, ...) block.
  • Now the script only creates the <button>, assigns its ID and text, and appends it to the DOM. Styling is now handled purely via CSS.

• style.css

  • Added a new CSS rule for #muteBtn, mirroring the #score style.
  • Included font, padding, background gradient, border-radius, box-shadow, and backdrop-filter for a unified “glass” look.
  • Added border: none, cursor: pointer, and justify-content: center for polished UX.

Visual Confirmation

mutebutton_fix.mp4

• Before: Mute button had a basic, solid background and was misaligned.
• After: Mute button now perfectly matches the glass-style score button and is symmetrically aligned at the top-left.
  (Replace this placeholder with the updated screenshot of the fixed UI.)

---

✅ Testing Checklist (All Verified)

• Loaded the game on a desktop browser.
• Mute button (top-left) visually matches the glass style of the score button (top-right).
• Buttons are perfectly aligned (equal spacing from top and sides).
• Mute button toggles icon and sound correctly on click.
• Both buttons remain aligned and scale correctly on window resize.
• Verified on a mobile device (and emulator).
• Style and alignment consistent on smaller screens.
• Mute button is tappable and functions correctly on mobile.

---

[vercel]

@Nl-T-lN is attempting to deploy a commit to the Maitri Vaghasiya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
3d-blockstack	Ready	Preview	Comment	Oct 26, 2025 1:41pm