feat(ui): consolidate secondary controls in settings menu

web/player.js

@@ -422,7 +422,26 @@
       byId("match-screen").hidden = name !== "match";
       byId("observer-screen").hidden = name !== "observer";
       documentObject.body.classList.toggle("match-active", name === "match");
+      ["settings-mute", "settings-motion", "settings-help"].forEach(id => { byId(id).hidden = name !== "match"; });
       if (name !== "match") stopBreakthroughTravel();
+      if (name !== "match") closeSettings(false);
+    }
+
+    function closeSettings(restoreFocus) {
+      const menu = byId("settings-menu");
+      if (menu.hidden) return;
+      menu.hidden = true;
+      const trigger = byId("settings-toggle");
+      trigger.setAttribute("aria-expanded", "false");
+      if (restoreFocus) trigger.focus();
+    }
+
+    function openSettings() {
+      const menu = byId("settings-menu");
+      menu.hidden = false;
+      byId("settings-toggle").setAttribute("aria-expanded", "true");
+      const firstAction = menu.querySelector(".settings-item:not([hidden])");
+      if (firstAction) firstAction.focus();
     }
 
     function renderWelcomeHeadline(headline) {
@@ -951,23 +970,27 @@
 
     function setMuted(muted) {
       state.muted = muted;
-      const button = byId("mute-toggle");
+      const button = byId("settings-mute");
       button.setAttribute("aria-pressed", String(muted));
-      button.setAttribute("aria-label", muted ? "Включить звук" : "Выключить звук");
-      button.title = muted ? "Включить звук" : "Выключить звук";
-      button.querySelector("use").setAttribute("href", muted ? "/icons.svg#sound" : "/icons.svg#sound");
+      button.textContent = muted ? "Звук: выкл" : "Звук: вкл";
     }
 
     function setReducedMotion(reduced) {
       state.reducedMotion = reduced;
       if (reduced) stopBreakthroughTravel();
       documentObject.documentElement.dataset.reducedMotion = String(reduced);
-      byId("motion-toggle").setAttribute("aria-pressed", String(reduced));
-      byId("motion-toggle").setAttribute("aria-label", reduced ? "Включить движение" : "Уменьшить движение");
+      const button = byId("settings-motion");
+      button.setAttribute("aria-pressed", String(reduced));
+      button.textContent = reduced ? "Движение: выкл" : "Движение: вкл";
     }
 
     documentObject.addEventListener("pointerdown", beginFeedback, {once: true});
     documentObject.addEventListener("keydown", event => {
+      if (event.key === "Escape" && !byId("settings-menu").hidden) {
+        event.preventDefault();
+        closeSettings(true);
+        return;
+      }
       if (event.target instanceof windowObject.HTMLInputElement || byId("match-screen").hidden) return;
       beginFeedback();
       const direction = directionFromKey(event.code); if (direction) { event.preventDefault(); move(direction, null); }
@@ -1025,9 +1048,14 @@
       });
     });
     byId("drop-key").addEventListener("click", () => send("drop_key", {}, byId("drop-key")));
-    byId("mute-toggle").addEventListener("click", () => setMuted(!state.muted));
-    byId("motion-toggle").addEventListener("click", () => setReducedMotion(!state.reducedMotion));
-    byId("onboarding-replay").addEventListener("click", () => showOnboarding(0));
+    byId("settings-toggle").addEventListener("click", () => {
+      if (byId("settings-menu").hidden) openSettings();
+      else closeSettings(false);
+    });
+    byId("settings-mute").addEventListener("click", () => setMuted(!state.muted));
+    byId("settings-motion").addEventListener("click", () => setReducedMotion(!state.reducedMotion));
+    byId("settings-help").addEventListener("click", () => { closeSettings(false); showOnboarding(0); });
+    byId("settings-wifi").addEventListener("click", () => closeSettings(false));
     byId("onboarding-next").addEventListener("click", () => {
       const next = nextOnboardingStep(state.onboardingStep);
       if (next == null) hideOnboarding();
@@ -1052,7 +1080,11 @@
     const stopObserverDrag = event => { if (state.observer.dragging && state.observer.dragging.id === event.pointerId) { state.observer.dragging = null; byId("observer-stage").classList.remove("dragging"); } };
     byId("observer-stage").addEventListener("pointerup", stopObserverDrag);
     byId("observer-stage").addEventListener("pointercancel", stopObserverDrag);
-    byId("details-toggle").addEventListener("click", () => { const panel = byId("details-panel"); panel.hidden = !panel.hidden; byId("details-toggle").setAttribute("aria-expanded", String(!panel.hidden)); });
+    documentObject.addEventListener("pointerdown", event => {
+      const menu = byId("settings-menu");
+      const trigger = byId("settings-toggle");
+      if (!menu.hidden && !menu.contains(event.target) && !trigger.contains(event.target)) closeSettings(false);
+    });
     byId("modal-action").addEventListener("click", () => {
       if (state.session && state.session.role === "player" && state.session.slot === 1 && state.snapshot && state.snapshot.phase === "finished") {
         send("restart", {}, byId("modal-action"));