Add data-driven pause menu settings view

Introduce a new SETTINGS view to the pause menu with two tabs: GAME SETTINGS (placeholder to open vanilla Fallout 4 settings) and MULTIPLAYER SETTINGS (data-driven custom options). Adds HTML for the settings panel and tabs, comprehensive CSS for tab/pane/row styling, and a large JS update that provides: F4SE/C++ bridge stubs (openGameSettings, setMultiplayerSetting, onBack, onOpenView), a multiplayerSettings data model, rendering and keyboard navigation (tab/content focus, row movement, value cycling), prompt-bar updates, and view-mode transitions (pause/map/settings). Also: map interaction refinements, map blur handling, open settings by default, and documentation updates in changelog.md and docs/dev-log.md.

changelog.md

@@ -9,7 +9,17 @@ For testing notes, milestone summaries, known issues, and next steps, see [`docs
 
 ## [Unreleased]
 
+### Changed
+- Pause menu settings prototype now uses two tabs only: **GAME SETTINGS** (placeholder to open vanilla Fallout 4 settings later) and **MULTIPLAYER SETTINGS** (custom Commonwealth Online options for Profile, Voice Chat, Map & Social, and Network). Removed the full category clone (Gameplay, Display, Audio, Controls, Accessibility, etc.).
+- Multiplayer settings are data-driven (`text`, `toggle`, `select`, `slider`, `keybind`) with selected-row descriptions and keyboard navigation (tabs / list focus, value cycling).
+- `window.CommonwealthOnlineUI` bridge stubs now expose `openGameSettings`, `setMultiplayerSetting`, `onBack`, and `onOpenView`.
+- Selected multiplayer setting rows use a solid amber bar with a thin green leading edge instead of a muddy green-to-amber fade.
+
 ### Added
+- Settings view on the pause menu prototype (`ui/views/CommonwealthOnline/pause-menu/`) with keyboard navigation, controller prompt bar, and F4SE bridge placeholders.
+
+### Fixed
+- Pause menu settings: pause-nav selection bars no longer spill into the settings panel (clip bars in settings mode).
 - Dedicated PC back button on the pause menu map (`ESC` keycap + BACK label, top-left) so mouse users can leave map mode without relying on the controller B prompt. Fades in after the left panel hides and fades out immediately on exit so it does not overlap the logo.
 - Static HTML/CSS/JS pause menu concept prototype at `ui/views/CommonwealthOnline/pause-menu/` — Fallout 4–styled multiplayer map pause screen with left menu, server info panel, controller prompts, and keyboard navigation (MAP selected by default).
 - Mouse wheel zoom and click-drag pan on the pause menu map background (`ui/views/CommonwealthOnline/pause-menu/script.js`), previewing the intended Fallout 76-style navigable map; markers move with the map via shared CSS custom properties.

docs/dev-log.md

@@ -7,6 +7,46 @@ failed experiments, successful tests, and next steps.
 
 ---
 
+## 2026-07-04 - Pause Menu Settings: Game vs Multiplayer Tabs
+
+### Summary
+Redesigned the pause menu settings prototype so it no longer clones the full Fallout 4 settings tree. Settings now has two tabs: GAME SETTINGS (placeholder to open vanilla FO4 settings later) and MULTIPLAYER SETTINGS (custom Commonwealth Online options only).
+
+### Files Changed
+- `ui/views/CommonwealthOnline/pause-menu/index.html`
+- `ui/views/CommonwealthOnline/pause-menu/styles.css`
+- `ui/views/CommonwealthOnline/pause-menu/script.js`
+- `changelog.md`
+- `docs/dev-log.md`
+
+### Details
+- Left pause nav stays visible with SETTINGS selected; map/background remains dimmed behind a translucent panel
+- Tabs: GAME SETTINGS | MULTIPLAYER SETTINGS (default: Multiplayer)
+- Game Settings shows a short explanation and an OPEN FALLOUT 4 SETTINGS button that calls `CommonwealthOnlineUI.openGameSettings()`
+- Multiplayer Settings is data-driven (`multiplayerSettings`) with sections PROFILE, VOICE CHAT, MAP & SOCIAL, NETWORK
+- Setting types: text, toggle, select, slider, keybind; selected-row description at panel bottom
+- Keyboard: Left/Right switches tabs when tab row focused; Up/Down moves multiplayer rows; Left/Right changes values; Tab switches focus; Enter activates; Escape backs out
+- Bridge stubs: `openGameSettings`, `setMultiplayerSetting`, `onBack`, `onOpenView`
+- Prototype still opens on the settings view by default for review
+
+### Testing
+- Open `ui/views/CommonwealthOnline/pause-menu/index.html` in a browser
+- Confirm SETTINGS is highlighted and MULTIPLAYER SETTINGS is the default tab
+- Switch to GAME SETTINGS and click OPEN FALLOUT 4 SETTINGS; confirm console log only
+- Cycle multiplayer toggles/selects/sliders with arrows and Enter; confirm `setMultiplayerSetting` logs
+- Tab between tabs and content; Escape returns to pause menu
+
+### Known Issues
+- No real INI / F4SE / vanilla SettingsMenu integration yet (console + bridge stubs only)
+- Keybind rebinding and display-name editing are not implemented (logs only)
+
+### Next Steps
+- Wire `openGameSettings` to open vanilla Fallout 4 SettingsMenu from F4SE
+- Persist multiplayer settings via plugin / INI
+
+---
+
+
 ## 2026-07-04 - Pause Menu Markers Share Map Blur
 
 ### Summary

ui/views/CommonwealthOnline/pause-menu/index.html

@@ -73,7 +73,7 @@
     </aside>
 
     <!-- Top-right server info -->
-    <section class="server-panel" aria-label="Current server">
+    <section class="server-panel" id="serverPanel" aria-label="Current server">
       <h2 class="server-panel__heading">CURRENT SERVER</h2>
       <div class="server-panel__row">
         <span class="signal-bars" aria-hidden="true">
@@ -85,6 +85,72 @@
       <p class="server-panel__players">12 / 24</p>
     </section>
 
+    <!-- Settings view: GAME SETTINGS | MULTIPLAYER SETTINGS -->
+    <section class="settings-view" id="settingsPanel" aria-label="Settings" hidden>
+      <div class="settings-panel">
+        <h1 class="settings-panel__heading">SETTINGS</h1>
+
+        <div class="settings-tabs" id="settingsTabs" role="tablist" aria-label="Settings tabs">
+          <button
+            type="button"
+            class="settings-tab"
+            id="tabGameSettings"
+            role="tab"
+            data-tab="game"
+            aria-selected="false"
+            aria-controls="gameSettingsPane"
+          >
+            GAME SETTINGS
+          </button>
+          <button
+            type="button"
+            class="settings-tab is-selected"
+            id="tabMultiplayerSettings"
+            role="tab"
+            data-tab="multiplayer"
+            aria-selected="true"
+            aria-controls="multiplayerSettingsPane"
+          >
+            MULTIPLAYER SETTINGS
+          </button>
+        </div>
+
+        <div
+          class="settings-pane settings-pane--game"
+          id="gameSettingsPane"
+          role="tabpanel"
+          aria-labelledby="tabGameSettings"
+          hidden
+        >
+          <h2 class="settings-pane__heading">GAME SETTINGS</h2>
+          <p class="settings-pane__description">
+            Adjust Fallout 4 controls, display, audio, and gameplay options using the default game settings menu.
+          </p>
+          <button type="button" class="settings-open-btn" id="openGameSettingsBtn">
+            OPEN FALLOUT 4 SETTINGS
+          </button>
+          <p class="settings-pane__note">
+            This will open the vanilla Fallout 4 settings menu. Commonwealth Online will return after it closes.
+          </p>
+        </div>
+
+        <div
+          class="settings-pane settings-pane--multiplayer"
+          id="multiplayerSettingsPane"
+          role="tabpanel"
+          aria-labelledby="tabMultiplayerSettings"
+        >
+          <div
+            class="settings-rows"
+            id="settingsRows"
+            aria-label="Multiplayer setting options"
+            role="listbox"
+          ></div>
+          <p class="settings-description" id="settingsDescription"></p>
+        </div>
+      </div>
+    </section>
+
     <!-- Bottom controller prompts (pause menu) -->
     <footer class="prompt-bar" id="pausePromptBar" aria-label="Controller prompts">
       <div class="prompt">
@@ -101,6 +167,34 @@
       </div>
     </footer>
 
+    <!-- Settings mode prompt bar (contents updated by script.js per active tab) -->
+    <footer class="prompt-bar prompt-bar--settings" id="settingsPromptBar" aria-label="Settings prompts" hidden>
+      <div class="prompt" data-prompt="move">
+        <span class="prompt__glyph prompt__glyph--text" aria-hidden="true">↑↓</span>
+        <span class="prompt__label">MOVE</span>
+      </div>
+      <div class="prompt" data-prompt="change">
+        <span class="prompt__glyph prompt__glyph--text" aria-hidden="true">←→</span>
+        <span class="prompt__label">CHANGE</span>
+      </div>
+      <div class="prompt" data-prompt="select">
+        <span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
+          <img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_A_White_Alt.png" src="./assets/icons/Xbox/T_X_A_White_Alt.png" alt="" draggable="false">
+        </span>
+        <span class="prompt__label">SELECT</span>
+      </div>
+      <div class="prompt" data-prompt="back">
+        <span class="prompt__glyph prompt__glyph--icon" aria-hidden="true">
+          <img class="prompt__glyph-img" data-glyph-src="./assets/icons/Xbox/T_X_B_White_Alt.png" src="./assets/icons/Xbox/T_X_B_White_Alt.png" alt="" draggable="false">
+        </span>
+        <span class="prompt__label">BACK</span>
+      </div>
+      <div class="prompt" data-prompt="tab">
+        <span class="prompt__glyph prompt__glyph--text" aria-hidden="true">TAB</span>
+        <span class="prompt__label">SWITCH FOCUS</span>
+      </div>
+    </footer>
+
     <!-- PC back button (map mode only) -->
     <button type="button" class="map-pc-back" id="mapBackButton" aria-hidden="true">
       <span class="map-pc-back__key" aria-hidden="true">ESC</span>

ui/views/CommonwealthOnline/pause-menu/styles.css

@@ -601,6 +601,497 @@ body {
   outline-offset: 2px;
 }
 
+/* ── Settings view (GAME / MULTIPLAYER tabs) ──────────────────── */
+/*
+ * Pause nav stays on the far left with SETTINGS selected.
+ * A single translucent panel holds two Fallout-style tabs and the
+ * active tab content. Game Settings only explains opening vanilla FO4
+ * settings; Multiplayer Settings is the custom CO options list.
+ */
+
+.settings-view {
+  position: absolute;
+  top: calc(114px * var(--co-ui-scale));
+  left: max(calc(320px * var(--co-ui-scale)), calc(28% + 20px * var(--co-ui-scale)));
+  right: calc(32px * var(--co-ui-scale));
+  bottom: calc(52px * var(--co-ui-scale));
+  z-index: 11;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  transition: opacity 180ms ease-out, visibility 180ms ease-out;
+}
+
+.settings-view[hidden] {
+  display: none;
+}
+
+.settings-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding:
+    calc(16px * var(--co-ui-scale))
+    calc(20px * var(--co-ui-scale))
+    calc(12px * var(--co-ui-scale));
+  background: rgba(6, 12, 8, 0.78);
+  border: 1px solid rgba(201, 168, 74, 0.28);
+  box-shadow:
+    inset 0 0 28px rgba(0, 0, 0, 0.35),
+    0 2px 16px rgba(0, 0, 0, 0.3);
+}
+
+.settings-panel__heading {
+  flex-shrink: 0;
+  margin-bottom: calc(14px * var(--co-ui-scale));
+  font-size: calc(22px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  color: var(--co-amber);
+}
+
+/* Fallout-style tab row */
+
+.settings-tabs {
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  gap: calc(4px * var(--co-ui-scale));
+  margin-bottom: calc(16px * var(--co-ui-scale));
+  border-bottom: 1px solid rgba(62, 207, 74, 0.22);
+}
+
+.settings-tab {
+  position: relative;
+  flex: 1;
+  min-height: calc(44px * var(--co-ui-scale));
+  padding:
+    calc(10px * var(--co-ui-scale))
+    calc(16px * var(--co-ui-scale));
+  border: 1px solid transparent;
+  border-bottom: none;
+  background: rgba(4, 10, 6, 0.35);
+  color: var(--co-text-pale);
+  font-family: inherit;
+  font-size: calc(15px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  transition:
+    color var(--co-transition),
+    background var(--co-transition),
+    border-color var(--co-transition);
+}
+
+.settings-tab:hover {
+  color: var(--co-text-pale);
+  background: rgba(62, 207, 74, 0.08);
+}
+
+.settings-tab.is-selected {
+  color: var(--co-select-text);
+  background: linear-gradient(
+    180deg,
+    var(--co-select-yellow) 0%,
+    var(--co-select-yellow-bright) 100%
+  );
+  border-color: rgba(201, 168, 74, 0.55);
+  box-shadow: 0 0 12px rgba(196, 168, 75, 0.2);
+}
+
+.settings-tabs.is-focus-region .settings-tab.is-selected {
+  box-shadow:
+    0 0 0 1px rgba(62, 207, 74, 0.45),
+    0 0 14px rgba(196, 168, 75, 0.28);
+}
+
+.settings-tabs.is-focus-region .settings-tab:not(.is-selected) {
+  outline: 1px solid rgba(62, 207, 74, 0.2);
+  outline-offset: -1px;
+}
+
+/* Tab panes */
+
+.settings-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.settings-pane[hidden] {
+  display: none;
+}
+
+.settings-pane--game {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding:
+    calc(20px * var(--co-ui-scale))
+    calc(8px * var(--co-ui-scale))
+    calc(8px * var(--co-ui-scale));
+  gap: calc(16px * var(--co-ui-scale));
+}
+
+.settings-pane__heading {
+  font-size: calc(18px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  color: var(--co-text-pale);
+}
+
+.settings-pane__description {
+  max-width: calc(640px * var(--co-ui-scale));
+  font-size: calc(15px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1.5;
+  color: var(--co-text-muted);
+}
+
+.settings-open-btn {
+  margin-top: calc(8px * var(--co-ui-scale));
+  min-width: calc(360px * var(--co-ui-scale));
+  min-height: calc(48px * var(--co-ui-scale));
+  padding:
+    calc(12px * var(--co-ui-scale))
+    calc(24px * var(--co-ui-scale));
+  border: 1px solid rgba(201, 168, 74, 0.45);
+  background: rgba(8, 16, 10, 0.65);
+  color: var(--co-text-pale);
+  font-family: inherit;
+  font-size: calc(16px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  cursor: pointer;
+  outline: none;
+  transition:
+    color var(--co-transition),
+    background var(--co-transition),
+    border-color var(--co-transition),
+    box-shadow var(--co-transition);
+}
+
+.settings-open-btn:hover,
+.settings-open-btn.is-focused {
+  color: var(--co-select-text);
+  background: linear-gradient(
+    90deg,
+    var(--co-select-yellow) 0%,
+    var(--co-select-yellow-bright) 100%
+  );
+  border-color: rgba(201, 168, 74, 0.7);
+  box-shadow: 0 0 14px rgba(196, 168, 75, 0.25);
+}
+
+.settings-pane--game.is-focus-region .settings-open-btn {
+  box-shadow:
+    0 0 0 1px rgba(62, 207, 74, 0.4),
+    0 0 14px rgba(196, 168, 75, 0.22);
+}
+
+.settings-pane__note {
+  max-width: calc(560px * var(--co-ui-scale));
+  font-size: calc(12px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.45;
+  color: var(--co-text-muted);
+  opacity: 0.8;
+}
+
+/* Multiplayer settings list */
+
+.settings-pane--multiplayer {
+  min-height: 0;
+}
+
+.settings-rows {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: calc(2px * var(--co-ui-scale));
+  overflow-y: auto;
+  min-height: 0;
+  padding: calc(2px * var(--co-ui-scale)) 0;
+}
+
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: calc(2px * var(--co-ui-scale));
+}
+
+.settings-section + .settings-section {
+  margin-top: calc(10px * var(--co-ui-scale));
+}
+
+.settings-section__heading {
+  padding:
+    calc(6px * var(--co-ui-scale))
+    calc(14px * var(--co-ui-scale))
+    calc(4px * var(--co-ui-scale));
+  font-size: calc(11px * var(--co-ui-scale));
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  color: var(--co-amber);
+  border-bottom: 1px solid rgba(62, 207, 74, 0.15);
+  margin-bottom: calc(2px * var(--co-ui-scale));
+}
+
+.settings-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  align-items: center;
+  gap: calc(20px * var(--co-ui-scale));
+  min-height: calc(40px * var(--co-ui-scale));
+  padding:
+    calc(8px * var(--co-ui-scale))
+    calc(14px * var(--co-ui-scale));
+  border: none;
+  background: transparent;
+  color: var(--co-text-pale);
+  font-family: inherit;
+  font-size: calc(16px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  transition:
+    color var(--co-transition),
+    background var(--co-transition);
+}
+
+.settings-row__label {
+  position: relative;
+  z-index: 2;
+  color: var(--co-text-pale);
+  opacity: 0.88;
+}
+
+.settings-row__value {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: calc(12px * var(--co-ui-scale));
+  min-width: 0;
+  color: var(--co-text-pale);
+  text-align: right;
+}
+
+.settings-row__value-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Selected row: solid amber bar with a thin green leading edge */
+
+.settings-row__bar {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--co-select-yellow) 0%,
+    var(--co-select-yellow-bright) 100%
+  );
+  opacity: 0;
+  transition: opacity var(--co-transition);
+  z-index: 1;
+  box-shadow:
+    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
+    0 0 12px rgba(196, 168, 75, 0.2);
+}
+
+.settings-row:hover:not(.is-selected) {
+  background: rgba(201, 168, 74, 0.08);
+}
+
+.settings-row.is-selected .settings-row__bar {
+  opacity: 1;
+}
+
+.settings-row.is-selected,
+.settings-row.is-selected .settings-row__label,
+.settings-row.is-selected .settings-row__value,
+.settings-row.is-selected .settings-row__value-text,
+.settings-row.is-selected .settings-cycler__arrow,
+.settings-row.is-selected .settings-slider__pct {
+  color: var(--co-select-text);
+  opacity: 1;
+}
+
+.settings-rows.is-focus-region .settings-row.is-selected .settings-row__bar {
+  box-shadow:
+    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
+    0 0 0 1px rgba(62, 207, 74, 0.35),
+    0 0 14px rgba(196, 168, 75, 0.28);
+}
+
+.settings-row.is-readonly:not(.is-selected) .settings-row__label,
+.settings-row.is-readonly:not(.is-selected) .settings-row__value-text {
+  opacity: 0.78;
+}
+
+/* Cycler: < value > */
+
+.settings-cycler {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(10px * var(--co-ui-scale));
+  min-width: 0;
+}
+
+.settings-cycler__arrow {
+  flex-shrink: 0;
+  font-size: calc(14px * var(--co-ui-scale));
+  font-weight: 700;
+  color: var(--co-amber-muted);
+  opacity: 0.75;
+  line-height: 1;
+}
+
+.settings-row.is-selected .settings-cycler__arrow {
+  color: var(--co-select-text);
+  opacity: 0.9;
+}
+
+.settings-row.is-readonly .settings-cycler__arrow {
+  visibility: hidden;
+}
+
+/* Slider control */
+
+.settings-slider {
+  display: flex;
+  align-items: center;
+  gap: calc(14px * var(--co-ui-scale));
+  width: min(100%, calc(260px * var(--co-ui-scale)));
+}
+
+.settings-slider__track {
+  position: relative;
+  flex: 1;
+  height: calc(2px * var(--co-ui-scale));
+  background: rgba(216, 221, 208, 0.35);
+}
+
+.settings-slider__fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(216, 221, 208, 0.85);
+}
+
+.settings-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: calc(4px * var(--co-ui-scale));
+  height: calc(14px * var(--co-ui-scale));
+  background: var(--co-text-pale);
+  transform: translate(-50%, -50%);
+}
+
+.settings-slider__pct {
+  flex-shrink: 0;
+  min-width: calc(42px * var(--co-ui-scale));
+  font-size: calc(15px * var(--co-ui-scale));
+  letter-spacing: 0.04em;
+  color: var(--co-text-pale);
+  text-align: right;
+}
+
+.settings-row.is-selected .settings-slider__track {
+  background: rgba(26, 28, 24, 0.35);
+}
+
+.settings-row.is-selected .settings-slider__fill,
+.settings-row.is-selected .settings-slider__thumb {
+  background: var(--co-select-text);
+}
+
+/* Description footer */
+
+.settings-description {
+  flex-shrink: 0;
+  margin-top: calc(6px * var(--co-ui-scale));
+  padding:
+    calc(12px * var(--co-ui-scale))
+    calc(14px * var(--co-ui-scale))
+    calc(4px * var(--co-ui-scale));
+  border-top: 1px solid rgba(201, 168, 74, 0.18);
+  min-height: calc(44px * var(--co-ui-scale));
+  font-size: calc(13px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1.45;
+  color: var(--co-text-muted);
+}
+
+/* Settings prompt bar */
+
+.prompt-bar--settings {
+  gap: calc(28px * var(--co-ui-scale));
+}
+
+.prompt-bar--settings .prompt[hidden] {
+  display: none;
+}
+
+.prompt__glyph--text {
+  min-width: calc(28px * var(--co-ui-scale));
+  height: calc(22px * var(--co-ui-scale));
+  padding: 0 calc(6px * var(--co-ui-scale));
+  border-radius: 2px;
+  font-size: calc(11px * var(--co-ui-scale));
+  letter-spacing: 0.04em;
+}
+
+/* Settings mode: keep pause nav, dim map more, hide server panel */
+
+.pause-screen.is-settings-mode .left-panel {
+  overflow: hidden;
+  background:
+    linear-gradient(
+      90deg,
+      rgba(8, 14, 10, 0.9) 0%,
+      rgba(8, 14, 10, 0.78) 65%,
+      rgba(8, 14, 10, 0.15) 100%
+    );
+}
+
+.pause-screen.is-settings-mode .menu-item__bar {
+  width: calc(100% + 28px * var(--co-ui-scale));
+}
+
+.pause-screen.is-settings-mode .server-panel {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.pause-screen.is-settings-mode .map-overlay {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(6, 10, 8, 0.88) 0%,
+      rgba(6, 10, 8, 0.55) 24%,
+      rgba(6, 10, 8, 0.4) 55%,
+      rgba(6, 10, 8, 0.48) 100%
+    ),
+    rgba(4, 8, 6, 0.32);
+}
+
 /* ── Responsive tweaks ───────────────────────────────────────── */
 /*
  * Sizing is already fluid via --co-ui-scale (see :root), which now scales