Restyle server browser UI; hide overlay on join

Restyles the server browser to match main-menu/settings (Futura PT Demibold, amber/green palette, yellow selection bars, shared panel chrome), removes SVG border strips, and tweaks modal width/layout. Adds JS + C++ coordination so the custom main-menu overlay hides when a server join begins (C++ invokes onSessionLoading and calls HideMainMenu; CompleteJoinFailure restores the menu/browser). Controller glyph tint now derives from --co-amber. Updates changelog and dev-log; includes compiled Vault109 script update.
2026-07-07 17:43:52 +12:00
parent 9447bc308f
commit 549c117818
11 changed files with 467 additions and 275 deletions
@@ -6,7 +6,7 @@
  left: calc(50% + 48px * var(--co-ui-scale));
  transform: translate(-50%, calc(-50% + 10px * var(--co-ui-scale)));
  z-index: 11;
-  width: min(calc(1080px * var(--co-ui-scale)), calc(100vw - 80px * var(--co-ui-scale)));
+  width: min(calc(920px * var(--co-ui-scale)), calc(100vw - 80px * var(--co-ui-scale)));
  height: min(calc(720px * var(--co-ui-scale)), calc(100vh - 120px * var(--co-ui-scale)));
  display: flex;
  align-items: stretch;
@@ -2,18 +2,13 @@
  "use strict";

  function buildMarkup(layout) {
-    var embeddedClass = layout === "embedded" ? " co-browser--embedded" : "";
+    var layoutClass = layout === "embedded" ? " co-browser--embedded" : " co-browser--standalone";
    return (
      '<div class="co-root' +
-      embeddedClass +
+      layoutClass +
      '" id="coRoot">' +
      '<div class="co-panel" id="coPanel">' +
-      '<svg class="co-panel-border co-panel-border-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075.97 11" preserveAspectRatio="none" aria-hidden="true">' +
-      '<polyline class="co-panel-border-line" points="0 10.97 0 0 1075.97 0 1075.97 10.5"/>' +
-      "</svg>" +
-      '<svg class="co-panel-border co-panel-border-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075.97 11" preserveAspectRatio="none" aria-hidden="true">' +
-      '<polyline class="co-panel-border-line" points="0 0.47 0 8.91 1075.97 8.97 1075.97 0.47"/>' +
-      "</svg>" +
+      '<h1 class="co-panel__heading">MULTIPLAYER</h1>' +
      '<div class="co-subpanel">' +
      '<nav class="co-nav-list"></nav>' +
      '<div class="co-subpanel-content">' +
@@ -71,10 +71,15 @@

  function getTintColor() {
    var style = getComputedStyle(document.documentElement);
+    var amber = style.getPropertyValue("--co-amber").trim() || "#c9a84a";
+    var hex = amber.replace("#", "");
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
    return {
-      r: parseInt(style.getPropertyValue("--co-r"), 10) || 18,
-      g: parseInt(style.getPropertyValue("--co-g"), 10) || 255,
-      b: parseInt(style.getPropertyValue("--co-b"), 10) || 21
+      r: parseInt(hex.slice(0, 2), 16) || 201,
+      g: parseInt(hex.slice(2, 4), 16) || 168,
+      b: parseInt(hex.slice(4, 6), 16) || 74
    };
  }

@@ -5,16 +5,6 @@
    return Math.max(0, Math.min(255, Math.round(value)));
  }

-  function applyHudRgb(root, prefix, color) {
-    if (!color) {
-      return;
-    }
-
-    root.style.setProperty(prefix + "-r", String(clampByte(color.r)));
-    root.style.setProperty(prefix + "-g", String(clampByte(color.g)));
-    root.style.setProperty(prefix + "-b", String(clampByte(color.b)));
-  }
-
  function applyCursorTint(root, color) {
    if (!color) {
      return;
@@ -41,8 +31,6 @@

    var root = document.documentElement;
    var hud = theme.hud || theme;
-    applyHudRgb(root, "--co", hud);
-    applyHudRgb(root, "--co-bg", theme.hudBackground);
    applyCursorTint(root, hud);

    if (window.CO_ControllerGlyphs && CO_ControllerGlyphs.onThemeApplied) {
@@ -50,7 +38,7 @@
    }

    console.log(
-      "[CO] Applied HUD theme rgb(" +
+      "[CO] Applied browser cursor theme rgb(" +
        clampByte(hud.r) + "," +
        clampByte(hud.g) + "," +
        clampByte(hud.b) + ")"
@@ -1,72 +1,43 @@
+/* Commonwealth Online — server browser UI
+ * Expects theme tokens from the host view (main menu / pause menu):
+ * --co-ui-scale, --co-amber, --co-text-pale, --co-text-muted,
+ * --co-select-yellow, --co-select-yellow-bright, --co-select-text,
+ * --co-transition, --co-green, --co-green-dim, --co-amber-muted
+ */
+
@font-face {
-  font-family: "Roboto Condensed";
-  src: url("./assets/fonts/RobotoCondensed-SemiBold.ttf") format("truetype");
-  font-weight: 600 700;
-  font-style: normal;
-  font-display: block;
+  font-family: "Futura PT Demibold";
+  src: url("../../fonts/futura-pt-demibold.otf") format("opentype");
+  font-weight: 600;
+  font-display: swap;
 }

 :root {
-  /* RGB components — overridden at runtime from Fallout4Prefs.ini via plugin. */
-  --co-r: 18;
-  --co-g: 255;
-  --co-b: 21;
-  --co-bg-r: 0;
-  --co-bg-g: 10;
-  --co-bg-b: 0;
-  --co-green: rgb(var(--co-r), var(--co-g), var(--co-b));
-  --co-green-soft: rgb(var(--co-r), var(--co-g), var(--co-b));
-  --co-green-dim: rgba(var(--co-r), var(--co-g), var(--co-b), 0.22);
-  --co-bg: rgba(var(--co-bg-r), var(--co-bg-g), var(--co-bg-b), 0.62);
-  --co-bg-dark: rgba(var(--co-bg-r), var(--co-bg-g), var(--co-bg-b), 0.72);
-  --co-bg-list: transparent;
-  --co-selected: rgb(var(--co-r), var(--co-g), var(--co-b));
-  --co-selected-text: rgb(
-    calc(var(--co-r) * 0.05),
-    calc(var(--co-g) * 0.05),
-    calc(var(--co-b) * 0.05)
-  );
-  --co-border: rgb(var(--co-r), var(--co-g), var(--co-b));
-  --co-text-dim: rgba(var(--co-r), var(--co-g), var(--co-b), 0.5);
-  --co-ping-good: rgb(var(--co-r), var(--co-g), var(--co-b));
-  --co-ping-mid: #c8ff28;
-  --co-ping-bad: #ffd428;
-  --co-danger: #ff6a6a;
-  --co-font: "Roboto Condensed", "Bahnschrift", "Arial Narrow", Arial, sans-serif;
-  --co-transition: 80ms linear;
-  /*
-   * UI scale: 1920×1080 is the design baseline (scale 1). Higher resolutions scale up
-   * so text and chrome stay readable and aligned with the native Scaleform menu.
-   * layout.js also sets --co-ui-scale on resize for Ultralight.
-   */
-  --co-ui-scale: max(1, min(calc(100vw / 1920), calc(100vh / 1080)));
-  --co-border-stroke: calc(5px * var(--co-ui-scale));
-  --co-border-strip-height: calc(11px * var(--co-ui-scale));
-  --co-border-cap: calc(10px * var(--co-ui-scale));
-  --co-border-edge: calc(4px * var(--co-ui-scale));
-  /*
-   * Fallout 4 submenu alignment (1280×720 reference, expressed as viewport %):
-   *   Left   — tight gap, no overlap (~454px @ 1280)
-   *   Top    — MULTIPLAYER row (~286px @ 720)
-   *   Bottom — main menu box bottom (~146px inset @ 720)
-   */
-  --co-panel-left: 35.6vw;
-  --co-panel-right: 2vw;
-  --co-panel-top: 39.5vh;
-  --co-panel-bottom: 20.5vh;
-  --co-font-xs: calc(11px * var(--co-ui-scale));
-  --co-font-sm: calc(12px * var(--co-ui-scale));
-  --co-font-md: calc(16px * var(--co-ui-scale));
-  --co-font-lg: calc(20px * var(--co-ui-scale));
-  --co-nav-width: calc(196px * var(--co-ui-scale));
-  /*
-   * In-game cursor is rendered by PrismaUI_F4 from Data/PrismaUI_F4/misc/cursor.png
-   * (deployed from assets/F4MouseCursor.png). CSS cursor only applies in a browser.
-   */
-  --co-cursor: url("./assets/F4MouseCursor.png") 1 1, default;
+  --co-ui-scale: 1;
+
+  /* Standalone fallbacks — match main-menu/styles.css when no host is present */
+  --co-black: #0a0c0a;
+  --co-amber: #c9a84a;
+  --co-amber-muted: rgba(201, 168, 74, 0.55);
+  --co-text-pale: #d8ddd0;
+  --co-text-muted: #9aa898;
+  --co-select-yellow: #c4a84b;
+  --co-select-yellow-bright: #d4bc62;
+  --co-select-text: #1a1c18;
+  --co-green: #3ecf4a;
+  --co-green-dim: rgba(62, 207, 74, 0.35);
+  --co-transition: 120ms ease-out;
+  --co-font: "Futura PT Demibold", "Roboto Condensed", "Bahnschrift", "Arial Narrow", Arial, sans-serif;
+  --co-ping-good: #3ecf4a;
+  --co-ping-mid: #c9a84a;
+  --co-ping-bad: #d48a4a;
+  --co-danger: #e07070;
+  --co-cursor: default;
 }

-* {
+*,
+*::before,
+*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
@@ -79,7 +50,7 @@ body {
  overflow: hidden;
  font-family: var(--co-font);
  font-weight: 600;
-  color: var(--co-green);
+  color: var(--co-text-pale);
  background: transparent;
  user-select: none;
  -webkit-font-smoothing: antialiased;
@@ -91,64 +62,103 @@ body {
  cursor: none !important;
 }

+/* ── Root layout ─────────────────────────────────────────────── */
+
 .co-root {
  position: relative;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
  pointer-events: none;
  background: transparent;
 }

-/* Submenu panel — SVG border overlay + translucent fill. */
+.co-root.co-browser--standalone {
+  width: 100vw;
+  height: 100vh;
+  pointer-events: auto;
+  background: var(--co-black);
+}
+
+.co-root.co-browser--standalone::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      ellipse 80% 60% at 72% 42%,
+      rgba(62, 207, 74, 0.08) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 55% 45% at 35% 70%,
+      rgba(201, 168, 74, 0.06) 0%,
+      transparent 50%
+    ),
+    linear-gradient(
+      165deg,
+      #0b120d 0%,
+      #141a12 28%,
+      #1a2218 48%,
+      #121810 72%,
+      #080c08 100%
+    );
+  filter: brightness(0.82) contrast(1.05) saturate(0.65);
+}
+
+/* ── Panel shell (matches .settings-panel) ─────────────────── */
+
 .co-panel {
  position: absolute;
-  left: var(--co-panel-left);
-  right: var(--co-panel-right);
-  top: var(--co-panel-top);
-  bottom: var(--co-panel-bottom);
+  left: var(--co-panel-left, 0);
+  right: var(--co-panel-right, 0);
+  top: var(--co-panel-top, 0);
+  bottom: var(--co-panel-bottom, 0);
  min-height: 0;
  display: flex;
  flex-direction: column;
-  border: none;
-  background: var(--co-bg);
+  border: 1px solid rgba(201, 168, 74, 0.28);
+  background: rgba(6, 12, 8, 0.78);
+  box-shadow:
+    inset 0 0 28px rgba(0, 0, 0, 0.35),
+    0 2px 16px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  transition: opacity var(--co-transition);
-  padding: var(--co-border-cap) var(--co-border-edge);
-  overflow: visible;
+  padding:
+    calc(16px * var(--co-ui-scale))
+    calc(20px * var(--co-ui-scale))
+    calc(12px * var(--co-ui-scale));
+  overflow: hidden;
  font-size: calc(16px * var(--co-ui-scale));
 }

+.co-root.co-browser--standalone .co-panel {
+  left: 50%;
+  top: 50%;
+  right: auto;
+  bottom: auto;
+  transform: translate(-50%, -50%);
+  width: min(calc(920px * var(--co-ui-scale)), calc(100vw - 80px * var(--co-ui-scale)));
+  height: min(calc(720px * var(--co-ui-scale)), calc(100vh - 120px * var(--co-ui-scale)));
+  z-index: 1;
+}
+
 .co-panel.co-loading {
  opacity: 0.85;
 }

-/*
- * Top/bottom border strips (from assets/MenuBoarder.svg).
- * Split so each edge anchors correctly — a single stretched SVG misaligns in Ultralight.
- */
 .co-panel-border {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: var(--co-border-strip-height);
-  pointer-events: none;
-  z-index: 10;
+  display: none;
 }

-.co-panel-border-top {
-  top: 0;
-}
-
-.co-panel-border-bottom {
-  bottom: 0;
-}
-
-.co-panel-border-line {
-  fill: none;
-  stroke: var(--co-border);
-  stroke-width: var(--co-border-stroke);
-  stroke-miterlimit: 10;
-  vector-effect: non-scaling-stroke;
+.co-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);
 }

 .co-subpanel {
@@ -156,57 +166,74 @@ body {
  min-height: 0;
  display: flex;
  overflow: hidden;
+  gap: calc(12px * var(--co-ui-scale));
 }

-/* Left nav — mirrors Settings / Load category list. */
+/* ── Left nav (vertical tab strip) ───────────────────────────── */
+
 .co-nav-list {
-  flex: 0 0 var(--co-nav-width);
+  flex: 0 0 calc(168px * var(--co-ui-scale));
  display: flex;
  flex-direction: column;
-  padding: 0.375em 0;
-  border-right: 0.0625em solid var(--co-green-dim);
+  gap: calc(4px * var(--co-ui-scale));
+  padding: calc(4px * var(--co-ui-scale)) 0;
+  border-right: 1px solid rgba(62, 207, 74, 0.22);
  overflow-y: auto;
 }

 .co-nav-item {
  appearance: none;
-  border: none;
-  background: transparent;
-  color: var(--co-green-soft);
+  position: relative;
+  border: 1px solid transparent;
+  background: rgba(4, 10, 6, 0.35);
+  color: var(--co-text-pale);
  font: inherit;
-  font-size: var(--co-font-md);
+  font-size: calc(13px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
-  padding: 0.625em 1em;
+  padding:
+    calc(10px * var(--co-ui-scale))
+    calc(12px * var(--co-ui-scale));
  cursor: var(--co-cursor);
-  transition: background var(--co-transition), color var(--co-transition);
+  outline: none;
+  transition:
+    color var(--co-transition),
+    background var(--co-transition),
+    border-color var(--co-transition),
+    box-shadow var(--co-transition);
 }

-.co-nav-item:hover:not(.active),
-.co-nav-item.hovered:not(.active) {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.08);
-}
-
-.co-nav-item.active.hovered {
-  filter: brightness(1.08);
+.co-nav-item:hover:not(.active) {
+  background: rgba(62, 207, 74, 0.08);
+  color: var(--co-text-pale);
 }

 .co-nav-item.active {
-  background: var(--co-selected);
-  color: var(--co-selected-text);
-}
-
-.co-nav-item.focused:not(.active) {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.12);
+  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);
 }

 .co-nav-list.focused .co-nav-item.focused:not(.active) {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.12);
+  outline: 1px solid rgba(62, 207, 74, 0.35);
+  outline-offset: -1px;
 }

-/* Right content */
+.co-nav-list.focused .co-nav-item.active {
+  box-shadow:
+    0 0 0 1px rgba(62, 207, 74, 0.45),
+    0 0 14px rgba(196, 168, 75, 0.28);
+}
+
+/* ── Right content ───────────────────────────────────────────── */
+
 .co-subpanel-content {
  flex: 1;
  min-width: 0;
@@ -238,38 +265,44 @@ body {
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
-  padding: 0.625em 1em 0.5em;
+  padding:
+    0
+    calc(4px * var(--co-ui-scale))
+    calc(10px * var(--co-ui-scale));
+  border-bottom: 1px solid rgba(62, 207, 74, 0.15);
+  margin-bottom: calc(8px * var(--co-ui-scale));
 }

 .co-subpanel-title {
-  font-size: var(--co-font-sm);
+  font-size: calc(15px * var(--co-ui-scale));
  font-weight: 700;
-  letter-spacing: 0.16em;
+  letter-spacing: 0.14em;
  text-transform: uppercase;
-  color: var(--co-text-dim);
+  color: var(--co-text-pale);
 }

 .co-subpanel-meta {
  display: flex;
  gap: 0.625em;
-  font-size: var(--co-font-xs);
+  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
-  color: var(--co-text-dim);
+  color: var(--co-text-muted);
  white-space: nowrap;
 }

 .co-subpanel-meta .co-count {
-  color: var(--co-green-soft);
+  color: var(--co-amber);
 }

-/* Preview — Load-menu thumbnail (favorites / recent only). */
+/* ── Preview area ────────────────────────────────────────────── */
+
 .co-preview-area {
  flex-shrink: 0;
-  margin: 0 0.75em 0.5em;
-  border: 0.0625em solid var(--co-green-dim);
-  background: var(--co-bg-dark);
+  margin: 0 0 calc(8px * var(--co-ui-scale));
+  border: 1px solid rgba(201, 168, 74, 0.22);
+  background: rgba(4, 10, 6, 0.55);
  overflow: hidden;
 }

@@ -284,8 +317,8 @@ body {
  display: flex;
  align-items: center;
  justify-content: center;
-  color: var(--co-text-dim);
-  font-size: var(--co-font-sm);
+  color: var(--co-text-muted);
+  font-size: calc(12px * var(--co-ui-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
@@ -298,37 +331,41 @@ body {
 }

 .co-preview-caption {
-  padding: 0.375em 0.625em;
-  border-top: 0.0625em solid var(--co-green-dim);
-  font-size: var(--co-font-xs);
+  padding:
+    calc(6px * var(--co-ui-scale))
+    calc(10px * var(--co-ui-scale));
+  border-top: 1px solid rgba(201, 168, 74, 0.18);
+  font-size: calc(11px * var(--co-ui-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
 }

 .co-preview-caption .co-preview-name {
-  font-size: var(--co-font-sm);
+  font-size: calc(12px * var(--co-ui-scale));
  font-weight: 700;
-  color: var(--co-green);
+  color: var(--co-text-pale);
 }

 .co-preview-caption .co-preview-stats {
-  color: var(--co-text-dim);
+  color: var(--co-text-muted);
 }

-/* Filters */
+/* ── Filters ─────────────────────────────────────────────────── */
+
 .co-filters {
  flex-shrink: 0;
-  padding: 0 0.75em 0.625em;
+  padding: 0 0 calc(10px * var(--co-ui-scale));
  display: flex;
  flex-direction: column;
-  gap: 0.375em;
+  gap: calc(6px * var(--co-ui-scale));
 }

 .co-filters.focused .co-filter-row.focused .co-filter-input,
 .co-filters.focused .co-filter-row.focused .co-filter-select,
-.co-filters.focused .co-filter-row.focused .co-checkbox {
-  outline: 0.0625em solid var(--co-green);
+.co-filters.focused .co-filter-row.focused .co-checkbox,
+.co-filters.focused .co-filter-row.focused.co-btn {
+  outline: 1px solid rgba(62, 207, 74, 0.45);
  outline-offset: 0;
 }

@@ -336,7 +373,7 @@ body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
-  gap: 0.375em 0.625em;
+  gap: calc(6px * var(--co-ui-scale)) calc(10px * var(--co-ui-scale));
 }

 .co-filters-row-selects .co-filter-row {
@@ -351,7 +388,7 @@ body {
 .co-filter-row {
  display: flex;
  flex-direction: column;
-  gap: 0.1875em;
+  gap: calc(3px * var(--co-ui-scale));
  min-width: 0;
 }

@@ -362,72 +399,76 @@ body {
 .co-filter-row.co-filter-checks {
  flex-direction: row;
  align-items: center;
-  gap: 0.3125em;
+  gap: calc(5px * var(--co-ui-scale));
  flex: 0 0 auto;
 }

 .co-filter-label {
-  font-size: var(--co-font-xs);
+  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
-  color: var(--co-text-dim);
+  color: var(--co-amber);
 }

 .co-filter-input,
 .co-filter-select {
  width: 100%;
-  background: var(--co-bg-dark);
-  border: 0.0625em solid var(--co-green-dim);
-  color: var(--co-green);
+  background: rgba(4, 10, 6, 0.55);
+  border: 1px solid rgba(201, 168, 74, 0.28);
+  color: var(--co-text-pale);
  font: inherit;
-  font-size: var(--co-font-sm);
+  font-size: calc(12px * var(--co-ui-scale));
  font-weight: 600;
-  padding: 0.3125em 0.5em;
+  padding:
+    calc(5px * var(--co-ui-scale))
+    calc(8px * var(--co-ui-scale));
  border-radius: 0;
  cursor: var(--co-cursor);
-  transition: border-color var(--co-transition);
+  transition: border-color var(--co-transition), background var(--co-transition);
 }

 .co-filter-input::placeholder {
-  color: var(--co-text-dim);
+  color: var(--co-text-muted);
 }

 .co-filter-input:hover,
 .co-filter-input.hovered,
 .co-filter-select:hover,
 .co-filter-select.hovered {
-  border-color: rgba(var(--co-r), var(--co-g), var(--co-b), 0.45);
+  border-color: rgba(201, 168, 74, 0.45);
+  background: rgba(8, 16, 10, 0.65);
 }

 .co-filter-input:focus,
 .co-filter-select:focus {
-  border-color: var(--co-border);
+  border-color: rgba(201, 168, 74, 0.55);
  outline: none;
 }

 .co-checkbox-row {
  display: flex;
  align-items: center;
-  gap: 0.3125em;
-  font-size: var(--co-font-xs);
+  gap: calc(5px * var(--co-ui-scale));
+  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
+  color: var(--co-text-muted);
  cursor: var(--co-cursor);
-  transition: background var(--co-transition), border-color var(--co-transition);
+  transition: background var(--co-transition), color var(--co-transition);
 }

 .co-checkbox-row:hover,
 .co-checkbox-row.hovered {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.06);
+  color: var(--co-text-pale);
 }

 .co-checkbox {
  width: calc(13px * var(--co-ui-scale));
  height: calc(13px * var(--co-ui-scale));
-  border: 0.0625em solid var(--co-border);
-  background: transparent;
+  border: 1px solid var(--co-amber-muted);
+  background: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
@@ -438,39 +479,57 @@ body {
  content: "X";
  font-size: calc(9px * var(--co-ui-scale));
  font-weight: 700;
-  color: var(--co-green);
+  color: var(--co-amber);
  line-height: 1;
 }

 .co-btn {
  appearance: none;
-  border: 0.0625em solid var(--co-green-dim);
-  background: transparent;
-  color: var(--co-green);
+  border: 1px solid rgba(201, 168, 74, 0.45);
+  background: rgba(8, 16, 10, 0.65);
+  color: var(--co-text-pale);
  font: inherit;
-  font-size: var(--co-font-xs);
+  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
-  padding: 0.3125em 0.625em;
+  padding:
+    calc(6px * var(--co-ui-scale))
+    calc(10px * var(--co-ui-scale));
  cursor: var(--co-cursor);
  margin-left: auto;
  flex-shrink: 0;
-  transition: background var(--co-transition), border-color var(--co-transition);
+  transition:
+    color var(--co-transition),
+    background var(--co-transition),
+    border-color var(--co-transition),
+    box-shadow var(--co-transition);
 }

 .co-btn:hover,
 .co-btn.hovered {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.1);
-  border-color: rgba(var(--co-r), var(--co-g), var(--co-b), 0.45);
+  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);
 }

 .co-btn.focused {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.18);
-  outline: 0.0625em solid var(--co-green);
+  color: var(--co-select-text);
+  background: linear-gradient(
+    90deg,
+    var(--co-select-yellow) 0%,
+    var(--co-select-yellow-bright) 100%
+  );
+  outline: 1px solid rgba(62, 207, 74, 0.4);
 }

-/* Server list — save-file style rows */
+/* ── Server list ─────────────────────────────────────────────── */
+
 .co-server-list-wrap {
  flex: 1;
  min-height: 0;
@@ -480,15 +539,15 @@ body {
 }

 .co-server-list-wrap.focused {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.03);
+  background: rgba(201, 168, 74, 0.03);
 }

 .co-server-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
-  scrollbar-color: var(--co-green-dim) transparent;
-  padding: 0 0.25em;
+  scrollbar-color: rgba(201, 168, 74, 0.35) transparent;
+  padding: calc(2px * var(--co-ui-scale)) 0;
 }

 .co-server-list::-webkit-scrollbar {
@@ -496,29 +555,70 @@ body {
 }

 .co-server-list::-webkit-scrollbar-thumb {
-  background: var(--co-green-dim);
+  background: rgba(201, 168, 74, 0.35);
 }

 .co-server-row {
+  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
-  padding: 0.5em 0.75em;
-  font-size: var(--co-font-md);
+  min-height: calc(40px * var(--co-ui-scale));
+  padding:
+    calc(8px * var(--co-ui-scale))
+    calc(14px * var(--co-ui-scale));
+  font-size: calc(15px * var(--co-ui-scale));
  line-height: 1.2;
+  color: var(--co-text-pale);
  cursor: var(--co-cursor);
-  transition: background var(--co-transition), color var(--co-transition);
+  transition: color var(--co-transition);
 }

-.co-server-row:hover:not(.selected),
-.co-server-row.hovered:not(.selected) {
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.06);
+.co-server-row::before {
+  content: "";
+  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: 0;
+  box-shadow:
+    inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
+    0 0 12px rgba(196, 168, 75, 0.2);
 }

-.co-server-row.selected {
-  background: var(--co-selected);
-  color: var(--co-selected-text);
+.co-server-row:hover:not(.selected) {
+  background: rgba(201, 168, 74, 0.08);
+}
+
+.co-server-list-wrap.focused .co-server-row.selected::before {
+  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);
+}
+
+.co-server-row.selected::before {
+  opacity: 1;
+}
+
+.co-server-row.selected,
+.co-server-row.selected .co-server-row-name,
+.co-server-row.selected .co-server-row-right,
+.co-server-row.selected .co-fav,
+.co-server-row.selected .co-ping {
+  color: var(--co-select-text);
+}
+
+.co-server-row-left,
+.co-server-row-right {
+  position: relative;
+  z-index: 1;
 }

 .co-server-row-left {
@@ -530,10 +630,9 @@ body {
 }

 .co-server-row-name {
-  font-size: var(--co-font-lg);
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-size: calc(16px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -544,29 +643,24 @@ body {
  align-items: center;
  gap: 1.25em;
  flex-shrink: 0;
-  font-size: var(--co-font-md);
-  font-weight: 700;
+  font-size: calc(14px * var(--co-ui-scale));
+  font-weight: 600;
  letter-spacing: 0.04em;
-}
-
-.co-server-row.selected .co-server-row-right,
-.co-server-row.selected .co-fav,
-.co-server-row.selected .co-ping {
-  color: var(--co-selected-text);
+  color: var(--co-text-muted);
 }

 .co-fav {
-  color: var(--co-text-dim);
+  color: var(--co-text-muted);
  font-size: calc(15px * var(--co-ui-scale));
  flex-shrink: 0;
 }

 .co-fav.on {
-  color: var(--co-green);
+  color: var(--co-amber);
 }

 .co-server-row.selected .co-fav.on {
-  color: var(--co-selected-text);
+  color: var(--co-select-text);
 }

 .co-ping-good { color: var(--co-ping-good); }
@@ -576,35 +670,40 @@ body {
 .co-server-row.selected .co-ping-good,
 .co-server-row.selected .co-ping-mid,
 .co-server-row.selected .co-ping-bad {
-  color: var(--co-selected-text);
+  color: var(--co-select-text);
 }

 .co-scroll-indicator {
  flex-shrink: 0;
  text-align: center;
-  padding: 0.125em 0 0.25em;
-  font-size: var(--co-font-xs);
+  padding: calc(2px * var(--co-ui-scale)) 0 calc(4px * var(--co-ui-scale));
+  font-size: calc(11px * var(--co-ui-scale));
  letter-spacing: 0.15em;
-  color: var(--co-text-dim);
+  color: var(--co-text-muted);
 }

 .co-scroll-indicator.hidden {
  display: none;
 }

-/* Footer prompts */
+/* ── Footer prompts (matches main-menu .prompt-bar) ─────────── */
+
 .co-action-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
-  padding: 0.375em 0.875em 0.5em;
-  border-top: 0.0625em solid var(--co-green-dim);
+  padding:
+    calc(10px * var(--co-ui-scale))
+    calc(4px * var(--co-ui-scale))
+    0;
+  border-top: 1px solid rgba(201, 168, 74, 0.18);
+  margin-top: calc(6px * var(--co-ui-scale));
 }

 .co-prompts {
  display: flex;
-  gap: 1em;
+  gap: calc(28px * var(--co-ui-scale));
  flex-wrap: wrap;
  justify-content: flex-end;
 }
@@ -612,81 +711,94 @@ body {
 .co-prompt {
  display: flex;
  align-items: center;
-  gap: 0.375em;
-  font-size: var(--co-font-xs);
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  gap: calc(8px * var(--co-ui-scale));
+  font-size: calc(11px * var(--co-ui-scale));
+  font-weight: 600;
+  letter-spacing: 0.16em;
  text-transform: uppercase;
-  color: var(--co-green-soft);
+  color: var(--co-text-pale);
+  opacity: 0.85;
 }

 .co-prompt-key {
-  min-width: calc(18px * var(--co-ui-scale));
-  height: calc(18px * var(--co-ui-scale));
-  border: 0.0625em solid var(--co-border);
-  border-radius: 50%;
-  display: flex;
+  display: inline-flex;
  align-items: center;
  justify-content: center;
-  font-size: calc(8px * var(--co-ui-scale));
+  min-width: calc(22px * var(--co-ui-scale));
+  height: calc(22px * var(--co-ui-scale));
+  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
+  color: var(--co-amber);
+  border: 1px solid var(--co-amber-muted);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.35);
+  line-height: 1;
  padding: 0 calc(3px * var(--co-ui-scale));
 }

 .co-prompt-key--glyph {
-  position: relative;
-  display: inline-block;
-  min-width: 0;
  border: none;
  border-radius: 0;
+  background: transparent;
+  min-width: calc(28px * var(--co-ui-scale));
+  width: calc(28px * var(--co-ui-scale));
+  height: calc(28px * var(--co-ui-scale));
  padding: 0;
-  flex-shrink: 0;
-  vertical-align: middle;
 }

 .co-prompt-key--glyph .co-glyph-img {
  width: 100%;
  height: 100%;
  display: block;
+  pointer-events: none;
+  user-select: none;
 }

+/* ── Direct connect ──────────────────────────────────────────── */
+
 .co-direct-connect {
-  padding: 1em 1.25em;
+  padding:
+    calc(12px * var(--co-ui-scale))
+    calc(8px * var(--co-ui-scale));
  max-width: calc(480px * var(--co-ui-scale));
 }

 .co-direct-row {
-  margin-bottom: 0.75em;
+  margin-bottom: calc(12px * var(--co-ui-scale));
 }

 .co-direct-row.focused .co-filter-input {
-  outline: 0.0625em solid var(--co-green);
-  background: rgba(var(--co-r), var(--co-g), var(--co-b), 0.08);
+  outline: 1px solid rgba(62, 207, 74, 0.45);
+  background: rgba(8, 16, 10, 0.65);
 }

 .co-direct-row label {
  display: block;
-  font-size: var(--co-font-xs);
+  font-size: calc(11px * var(--co-ui-scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
-  color: var(--co-text-dim);
-  margin-bottom: 0.25em;
+  color: var(--co-amber);
+  margin-bottom: calc(4px * var(--co-ui-scale));
 }

 .co-empty {
-  padding: 1.5em 1em;
+  padding:
+    calc(24px * var(--co-ui-scale))
+    calc(16px * var(--co-ui-scale));
  text-align: center;
-  color: var(--co-text-dim);
-  font-size: var(--co-font-md);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  color: var(--co-text-muted);
+  font-size: calc(14px * var(--co-ui-scale));
+  letter-spacing: 0.06em;
+  line-height: 1.45;
 }

+/* ── Join overlay ────────────────────────────────────────────── */
+
 .co-join-overlay {
  position: absolute;
  inset: 0;
-  background: rgba(0, 0, 0, 0.75);
+  background: rgba(4, 8, 6, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -700,10 +812,11 @@ body {
 }

 .co-join-overlay p {
-  font-size: var(--co-font-md);
-  letter-spacing: 0.1em;
+  font-size: calc(15px * var(--co-ui-scale));
+  letter-spacing: 0.08em;
  text-transform: uppercase;
-  margin-top: 0.875em;
+  margin-top: calc(14px * var(--co-ui-scale));
+  color: var(--co-text-pale);
 }

 .co-join-overlay.co-error p {
@@ -713,8 +826,8 @@ body {
 .co-spinner {
  width: calc(22px * var(--co-ui-scale));
  height: calc(22px * var(--co-ui-scale));
-  border: calc(2px * var(--co-ui-scale)) solid var(--co-green-dim);
-  border-top-color: var(--co-green);
+  border: calc(2px * var(--co-ui-scale)) solid rgba(201, 168, 74, 0.35);
+  border-top-color: var(--co-amber);
  border-radius: 50%;
  animation: co-spin 0.8s linear infinite;
 }
@@ -472,6 +472,39 @@
    exitBrowserMode(true);
  };

+  window.onMainMenuShown = function () {
+    if (mainScreen) {
+      mainScreen.classList.remove("is-session-loading");
+    }
+  };
+
+  window.onSessionLoading = function () {
+    if (viewMode === "browser") {
+      cancelBrowserPanelHide();
+      browserController.hide();
+      browserPanel.classList.remove("is-open");
+      browserPanel.hidden = true;
+    } else if (viewMode === "settings") {
+      cancelSettingsPanelHide();
+      settingsController.hide();
+      settingsPanel.classList.remove("is-open");
+      settingsPanel.hidden = true;
+    }
+
+    viewMode = "menu";
+    if (mainScreen) {
+      mainScreen.classList.remove("is-browser-mode", "is-settings-mode");
+      mainScreen.classList.add("is-session-loading");
+    }
+    if (mainPromptBar) {
+      mainPromptBar.hidden = true;
+    }
+    if (settingsPromptBar) {
+      settingsPromptBar.hidden = true;
+    }
+    setSelected(-1);
+  };
+
  function enterSettingsMode() {
    if (viewMode === "browser") {
      cancelBrowserPanelHide();
@@ -62,6 +62,12 @@ body {
  overflow: hidden;
 }

+.main-screen.is-session-loading {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 /* ── Title-screen scenic background ──────────────────────────── */

 .scene-layer {