Add a top-right mute button that silences all audio (persisted)

A fixed glass button in the top-right toggles mute for every audio element (tapes + lobby) via querySelectorAll('audio').muted - independent of the volume/fade logic, so unmuting restores it. The choice persists in localStorage ('lofinity:muted') and is restored on load. z-index 50 keeps it above the modals so it works while a tape plays. Verified in preview: renders, mutes all 3 audio elements, persists across reload.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/index.html

@@ -72,6 +72,23 @@
       </div>
       <button id="start-btn" type="button">▶ click to start</button>
     </div>
+    <button
+      id="mute-btn"
+      class="mute-btn"
+      type="button"
+      aria-label="mute all sound"
+      aria-pressed="false"
+      title="mute"
+    >
+      <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M4 9 L7.5 9 L13 5 L13 19 L7.5 15 L4 15 Z" fill="currentColor" stroke="none" />
+        <g class="mute-waves">
+          <path d="M16 9.5a4 4 0 0 1 0 5" />
+          <path d="M18.6 7a8 8 0 0 1 0 10" />
+        </g>
+        <line class="mute-slash" x1="3.5" y1="3.5" x2="20.5" y2="20.5" />
+      </svg>
+    </button>
     <div id="vending-label" class="hover-label"><span>♪ vend a vibe</span></div>
     <div id="collection-label" class="hover-label">
       <span>♪ cassette collection</span>

frontend/style.css

@@ -159,6 +159,50 @@ body {
   }
 }
 
+/* Global mute toggle, top-right. z-index above the modals (max 20) so it stays
+   clickable while a tape plays. No transform on this backdrop-filter element. */
+.mute-btn {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 50;
+  width: 2.6rem;
+  height: 2.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: #ffffff;
+  background: rgba(18, 28, 58, 0.34);
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.mute-btn:hover {
+  background: rgba(18, 28, 58, 0.55);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+
+.mute-btn.muted {
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.mute-btn .mute-slash {
+  display: none;
+}
+.mute-btn.muted .mute-waves {
+  display: none;
+}
+.mute-btn.muted .mute-slash {
+  display: inline;
+}
+
 @keyframes title-bob {
   from {
     transform: translateY(0);

frontend/ui.js

@@ -157,6 +157,35 @@ export function initUI({
   window.addEventListener("pointerdown", primeLobby);
   window.addEventListener("keydown", primeLobby);
 
+  // --- mute -------------------------------------------------------------------
+  // Top-right toggle that silences ALL audio (tapes + lobby). Persisted in
+  // localStorage so the choice survives reloads. Uses each element's `muted`
+  // flag, which is independent of the volume/fade logic — unmuting restores it.
+  const muteBtn = $("mute-btn");
+  const MUTE_KEY = "lofinity:muted";
+  let muted = false;
+  try {
+    muted = localStorage.getItem(MUTE_KEY) === "1";
+  } catch {
+    /* private mode — default to unmuted */
+  }
+  function applyMute() {
+    document.querySelectorAll("audio").forEach((el) => (el.muted = muted));
+    muteBtn.classList.toggle("muted", muted);
+    muteBtn.setAttribute("aria-pressed", String(muted));
+    muteBtn.title = muted ? "unmute" : "mute";
+  }
+  applyMute(); // restore the persisted choice on load
+  muteBtn.addEventListener("click", () => {
+    muted = !muted;
+    try {
+      localStorage.setItem(MUTE_KEY, muted ? "1" : "0");
+    } catch {
+      /* ignore */
+    }
+    applyMute();
+  });
+
   function setStage(stage) {
     controlsRow.classList.toggle("hidden", stage !== "prompt");
     generating.classList.toggle("hidden", stage !== "generating");