Add music.mp3 looping BGM on map, pause during questions, 🎵/🔇 mute toggle in header

game.js

@@ -52,6 +52,45 @@ function saveGame(s) {
 function loadGame()  { try { const r=localStorage.getItem(SAVE_KEY); return r?JSON.parse(r):null; } catch(_){return null;} }
 function clearSave() { try { localStorage.removeItem(SAVE_KEY); } catch(_){} }
 
+/* ─── BACKGROUND MUSIC ───────────────────────────────────── */
+const Music = (() => {
+  let audio   = null;
+  let muted   = false;
+
+  function getAudio() {
+    if (!audio) {
+      audio        = new Audio('./music.mp3');
+      audio.loop   = true;
+      audio.volume = 0.5;
+    }
+    return audio;
+  }
+
+  function updateBtn() {
+    const btn = document.getElementById('music-toggle');
+    if (!btn) return;
+    btn.textContent = muted ? '🔇' : '🎵';
+    btn.classList.toggle('muted', muted);
+  }
+
+  return {
+    play() {
+      if (muted) return;
+      const a = getAudio();
+      if (a.paused) a.play().catch(() => {});
+    },
+    pause() {
+      if (audio) audio.pause();
+    },
+    toggle() {
+      muted = !muted;
+      updateBtn();
+      if (muted) Music.pause();
+      else       Music.play();
+    },
+  };
+})();
+
 /* ─── CHIPTUNE SOUND ENGINE ──────────────────────────────── */
 const SFX = (() => {
   let ctx = null;
@@ -740,12 +779,15 @@ class Game {
 
       this._placeMapSprites();
       this._updateDirArrow(false);
-      SFX.overworldStart();
+      Music.play();
       saveGame(this.state);
       this.flashSaveDot();
 
       const npcEl2 = document.getElementById('map-npc');
       if (npcEl2) npcEl2.onclick = ()=>this._talkToNPC();
+
+      const musicBtn = document.getElementById('music-toggle');
+      if (musicBtn) musicBtn.onclick = () => Music.toggle();
     });
   }
 
@@ -774,6 +816,7 @@ class Game {
 
     this.show('battle');
     this._showController(true);
+    Music.pause();
     this.state.answering=false;
     this.state.cursor=0;
 

index.html

@@ -94,6 +94,7 @@
         <div class="prog-bar-outer"><div class="prog-bar-inner" id="map-prog-bar"></div></div>
         <span class="prog-text" id="map-prog-text">0/100</span>
         <span class="save-dot" id="save-dot" title="Auto-saved">💾</span>
+        <span class="music-toggle" id="music-toggle" title="Mute/Unmute Music">🎵</span>
       </div>
     </div>
     <div class="overworld-bg map-world" id="map-world">

style.css

@@ -397,7 +397,17 @@ html, body {
 .prog-bar-outer { width:80px; height:9px; background:var(--black); border:2px solid var(--lightgray); overflow:hidden; }
 .prog-bar-inner { height:100%; width:0%; background:var(--hp-green); transition:width .5s ease; }
 .prog-text  { font-size:6px; color:var(--white); }
-.save-dot   { font-size:12px; animation:blink 3s ease-in-out infinite; }
+.save-dot     { font-size:12px; animation:blink 3s ease-in-out infinite; }
+.music-toggle {
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity .2s;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  padding: 2px 4px;
+}
+.music-toggle.muted { opacity: .35; }
 
 .map-world  {
   position: relative;