@bongos/core 1.24.80 → 1.24.82

package/modules/hall-ui/public/money.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
   <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/project-settings.css?v=2026-11-02-outflow">
 </head>
@@ -80,10 +80,10 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-10-character"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>

package/modules/hall-ui/public/money.states.json

@@ -1,6 +1,7 @@
 {
   "_": "MONEY (task 1005047; once FLEET COSTS, task 1001949, ADR 0327) through modules/ui-design/kit/render.js. The page reads three authenticated routes — GET /project-account/outflow (payout.approve), GET /public/cost-summary and GET /provisioning/fleet/cost-ledger (provisioning.fleet.manage) — each section hidden until its own read answers. Against the kit's own stub every read fails, so the page shows its one 'Nothing to show yet' line, a state the floors must hold in. To look at the populated page run it against the hall-preview harness, whose fixtures answer all three (the ledger's two cloud hosts carry no recorded plan, the state live is in today):\n\n  node scripts/hall-preview/server.js --port 4620 --fixture-me\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/money.states.json --base-in http://localhost:4620 --base-out http://localhost:4620",
   "page": "/builders/money",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

package/modules/hall-ui/public/my-agents.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
   <!-- The oversight family's archetype: a titled row with facts and actions, the
        group head and the foot line (records/oversight-family.md). This page's
        repeated thing is that row at the desk's one-line density. -->
@@ -82,10 +82,10 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-10-character"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>

package/modules/hall-ui/public/my-agents.states.json

@@ -1,6 +1,7 @@
 {
   "_": "MY AGENTS (task 1004685, the living-city prototype) through modules/ui-design/kit/render.js. Every row is filled from GET /me and its prefs, so the floors run against the hall-preview harness, which serves those reads and records the pref writes (scripts/hall-preview/pref-writes.js):\n\n  node scripts/hall-preview/server.js --port 4614 --fixture-me --rank archon\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/my-agents.states.json --base-in http://builders.localhost:4614 --base-out http://builders.localhost:4614\n\nAgainst the kit's own stub the reads 404 and the page shows its sign-in line. The 'nobody' state is the same page as a builder who holds no seat (?as=nobody, a stand-in that can only take away, gov-positions.js).",
   "page": "/my-agents",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

package/modules/hall-ui/public/options-menu.js

@@ -66,7 +66,8 @@
         ] },
     ] },
     { head: 'Preferences', items: [
-      { id: 'preferences', label: 'Preferences', native: true, gate: 'signed', words: 'usage reports' },
+      { id: 'preferences', label: 'Preferences', native: true, gate: 'signed', words: 'usage reports view game classic mode sidebar',
+        anchors: [{ label: 'View: game or classic', anchor: 'view-scroll', words: 'game classic mode full screen sidebar' }] },
       { id: 'sound', label: 'Sound', native: true, gate: 'signed', words: 'sounds audio chime event volume mute' },
     ] },
     { head: 'The project', items: [

package/modules/hall-ui/public/primer.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
   <link rel="stylesheet" href="/builders/room.css">
   <link rel="stylesheet" href="/builders/primer.css?v=2026-07-02-shell1">
   <link rel="stylesheet" href="/builders/diagram-viewer.css?v=2026-11-04-reading-room">
@@ -111,10 +111,10 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-10-character"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>

package/modules/hall-ui/public/primer.states.json

@@ -1,6 +1,7 @@
 {
   "_": "The hall's primer through modules/ui-design/kit/render.js (task 1003306). Written with the reading-room re-skin so the room's failure state and its table of contents are MEASURED at 1440/390/320 in both modes, not just looked at.",
   "page": "/builders/primer",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

package/modules/hall-ui/public/profile.html

@@ -14,7 +14,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
   <!-- The PANEL archetype (task 1003308) before the page's own sheet. -->
   <link rel="stylesheet" href="/builders/panel.css">
   <link rel="stylesheet" href="/builders/hall-ask.css">
@@ -248,10 +248,10 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-10-character"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>

package/modules/hall-ui/public/profile.states.json

@@ -1,6 +1,7 @@
 {
   "_": "The hall's PROFILE page through modules/ui-design/kit/render.js (task 1003308; four screens behind the section rail since task 1003489 — overview, works, activity, connections). The identity band, the charts, the works ledger and the activity ledgers only exist once a profile has LOADED, so the floors run against the hall-preview harness (see settings.states.json for the two commands; pass --base-in/--base-out at it). One rail key renders at a time, so each key is its own state. `out` is a real state here rather than a redirect: a signed-out visitor with no ?id= gets the empty state, not a bounce — under the harness's --fixture-me the /me read still answers, so `out` renders the own profile there and the empty state only under the kit's own stub.",
   "page": "/profile",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

package/modules/hall-ui/public/project-settings.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
   <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/project-settings.css?v=2026-11-02-outflow">
 </head>
@@ -75,10 +75,10 @@
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-10-character"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>

package/modules/hall-ui/public/roster.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
   <!-- task 1003441: the identity cell (avatar, name, login). It was shared with
        the cross-project /people page until task 1003444 deleted it. -->
   <link rel="stylesheet" href="/builders/roster.css">
@@ -57,10 +57,10 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-10-character"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>

package/modules/hall-ui/public/roster.states.json

@@ -1,6 +1,7 @@
 {
   "_": "Builders — this project's OWN roster, ranked by credits earned (task 1003441, goal 1000075). Was the #leaderboard hash view on index.html; /#leaderboard now redirects here. Deliberately UNGATED, because its one data source (GET /leaderboard) is deliberately unauthenticated and mirrors the public status surface — so unlike a gated page's states file the `out` state below renders the real page rather than a seal. Populated look: the hall-preview harness (scripts/hall-preview/fixtures/public__leaderboard.json, since task 1004437 the list the page reads: fifteen builders with avatars, ranks, karma, tokens and each one's roles, including an artist and an ideator with no AI sessions).",
   "page": "/builders/roster",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

package/modules/hall-ui/public/settings-view.js

@@ -0,0 +1,75 @@
+// modules/hall-ui/public/settings-view.js — Options → Preferences → View: game or
+// classic (task 1005200; owner, 2026-11-11). The one place the view is switched after
+// sign-in. The two never mix: classic is the hall with its sidebar, game is the city
+// full screen with only the game's places (shell-game.js).
+//
+// The account holds the choice (GET/PATCH /api/bongos/me/hall-view, builder-settings
+// hall-view-prefs.js), so it follows the builder to any browser. This panel saves it
+// there first and only then switches the page, so a failed save never leaves the page
+// in one view and the account in the other.
+//
+// Own file on the settings-usage-reports.js precedent: it shares nothing with the rest
+// of the page.
+
+(() => {
+  'use strict';
+
+  const PATH = '/api/bongos/me/hall-view';
+  const { $ } = window.OTB;
+  const toast = (msg) => window.OTB.toast(msg);
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const game = () => window.OTBShellGame;
+
+  const CHOICES = [
+    { value: 'game', label: 'Game', desc: 'The project city, full screen. Only the game’s places: the city, the skies and the atlas.' },
+    { value: 'classic', label: 'Classic', desc: 'The hall with its sidebar and every page.' },
+  ];
+
+  function render(view) {
+    const wrap = $('#view-rows');
+    if (!wrap) return;
+    wrap.innerHTML =
+      '<fieldset class="pgroup" id="view-group">' +
+      '<legend class="prow__label">How you see the project</legend>' +
+      CHOICES.map((c) => {
+        const id = `view-${c.value}`;
+        return (
+          `<label class="prow prow--pick" for="${id}">` +
+          `<input class="pradio" type="radio" name="hall-view" id="${id}" value="${c.value}"${view === c.value ? ' checked' : ''}>` +
+          '<span class="prow__main">' +
+          `<span class="prow__label">${c.label}</span>` +
+          `<span class="prow__desc">${c.desc}</span>` +
+          '</span></label>'
+        );
+      }).join('') +
+      '</fieldset>';
+  }
+
+  async function save(view) {
+    const status = $('#view-status');
+    if (status) status.textContent = 'Saving…';
+    const res = await api.request('PATCH', PATH, { body: { view } });
+    if (!res.ok) {
+      render(game() && game().on() ? 'game' : 'classic');
+      if (status) status.textContent = 'Could not save. Try again.';
+      toast('Could not switch the view. Try again.');
+      return;
+    }
+    const msg = view === 'game' ? 'Saved. You are in the game view.' : 'Saved. You are in the classic view.';
+    if (status) status.textContent = msg;
+    if (game()) game().set(view === 'game', { local: true });
+  }
+
+  function setup() {
+    const section = $('#view-scroll');
+    if (!section || !game()) return;
+    render(game().on() ? 'game' : 'classic');
+    section.hidden = false;
+    $('#view-rows').addEventListener('change', (e) => {
+      if (e.target && e.target.name === 'hall-view') save(e.target.value);
+    });
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', setup);
+  else setup();
+})();

package/modules/hall-ui/public/settings.html

@@ -11,7 +11,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-10-options">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
   <!-- The PANEL archetype (task 1003308): the row, the switch, the field, the
        chip control and the family's voices, shared with profile and pair.
        settings.css then holds only what this page
@@ -287,6 +287,18 @@
                  on the same routes. They live on My agents only now; this line is where
                  they were. Old deep links (#interaction, #wandering, #rendering, …) are
                  sent there by settings-moved.js. -->
+            <!-- VIEW — game or classic (task 1005200): the one place the view is switched
+                 after sign-in. Kept on the account (GET/PATCH /me/hall-view); drawn by
+                 settings-view.js. -->
+            <section class="scroll" id="view-scroll" aria-labelledby="view-h" data-group="preferences" hidden>
+              <h2 id="view-h" class="scroll__h">View</h2>
+              <p class="scroll__lede">
+                Game or classic, never both. You also choose each time you sign in.
+              </p>
+              <div class="sound-rows" id="view-rows"></div>
+              <p class="settings-status" id="view-status" role="status" aria-live="polite"></p>
+            </section>
+
             <section class="scroll" id="agents-moved-preferences" aria-labelledby="agents-moved-preferences-h" data-group="preferences">
               <h2 id="agents-moved-preferences-h" class="scroll__h">Your agents</h2>
               <p class="scroll__lede">
@@ -405,10 +417,10 @@
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page scripts run. -->
 <script src="/builders/dom-utils.js?v=2026-11-05-numbers"></script>
-<script src="/builders/shell-game.js?v=2026-11-10-options"></script>
+<script src="/builders/shell-game.js?v=2026-11-11-view2"></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor"></script>
-<script src="/builders/shell.js?v=2026-11-10-character"></script>
+<script src="/builders/shell.js?v=2026-11-11-view2"></script>
 <script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
@@ -420,7 +432,7 @@
 <!-- task 1005044: the old deep links to the agent settings that moved to My agents -->
 <script src="/builders/settings-moved.js?v=2026-11-03-moved"></script>
 <!-- task 1005144: the ONE options menu — the rail, its search, and the screens it opens in a frame. -->
-<script src="/builders/options-menu.js?v=2026-11-10-options"></script>
+<script src="/builders/options-menu.js?v=2026-11-11-view2"></script>
 <script src="/builders/settings.js?v=2026-11-10-options"></script>
 <!-- task 1003341: the Active sessions panel. Its own file rather than more of
      settings.js, which sits close to the 1500-line size ratchet. -->
@@ -437,6 +449,7 @@
 <script src="/builders/runner-button.js"></script>
 <script src="/builders/settings-autobongos.js?v=2026-11-09-run-button"></script>
 <!-- task 1003793: Settings → Module install reports. Own file on the same precedent. -->
+<script src="/builders/settings-view.js?v=2026-11-11-view"></script>
 <script src="/builders/settings-usage-reports.js?v=2026-10-08-usage-reports"></script>
 </body>
 </html>

package/modules/hall-ui/public/settings.states.json

@@ -1,6 +1,7 @@
 {
   "_": "The hall's SETTINGS page through modules/ui-design/kit/render.js (task 1003308). Every panel on it is a form the page script fills from a dozen /me/* reads, so the floors run against the hall-preview harness rather than the kit's own stub:\n\n  node scripts/hall-preview/server.js --port 4621 --fixture-me\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/settings.states.json --base-in http://builders.localhost:4621 --base-out http://builders.localhost:4621\n\nOne group renders at a time behind the section rail, so each rail group is its own state. There is no `out` state on purpose: settings.js answers a 401 by navigating to the sign-in flow, and a state whose page navigates away measures the destination, not this page (the not-signed-in gate panel is the non-401 failure render, pinned statically in tests/hall_settings_world.mjs).",
   "page": "/settings",
+  "modes": ["dark"],
   "_storage": "The hall asks a first-visit question (the session mode picker, craft-mode.js) over every page; seeding \"already asked\" renders the page a returning builder sees (task 1005080).",
   "storage": { "session": { "hall-craft-asked": "1" } },
   "surface": "hall-ui",

package/modules/hall-ui/public/shell-game.css

@@ -1,65 +1,120 @@
-/* shell-game.css — the game's start screen and load screen (task 1005143; shell-game.js start()).
-   Both stand over the welcome's painting, darkened by the hall's scrim. The menu and the load
-   screen are each a card of the hall's own tokens, so they follow the hall's theme and the city
-   drawn in the load card sits on its own ground. Colours, sizes, corners and spacing are tokens;
-   nothing here is typed in. Rules: modules/hall-ui/records/start-screen.md. */
+/* shell-game.css — the game's start screen and load screen (task 1005143; shell-game.js start()),
+   in the Helm look (task 1005192, ADR 0402). Both stand over the welcome's painting. The start
+   screen is one full-height night panel on the left, closed left and right by an ice hairline:
+   the mark and the project's name in the name voice, the five choices as full-width rows, one
+   line at the foot. The load screen is the same panel language, centred: the week in the name
+   voice, one segment per week, the city, the tip. Colours, sizes, corners, spacing and the
+   panel's own measures are the hall tier's tokens (style.css); nothing here is typed in, and
+   there is no breakpoint: the panel is as wide as a phone and stands off the edge on a desk
+   (--helm-inset). Rules: modules/hall-ui/records/start-screen.md. */
 html.gs-open { overflow: hidden; }
 .gs {
   position: fixed; inset: 0; z-index: var(--ds-z-modal, 160); overflow: auto;
-  display: flex; align-items: center; justify-content: center;
-  padding: var(--ds-space-lg) var(--ds-space-gutter-narrow);
-  background: var(--bg); color: var(--ink); font-family: var(--font-body);
-  transition: opacity .5s var(--ds-ease);
+  display: flex; align-items: stretch; justify-content: flex-start;
+  padding: 0 0 0 var(--helm-inset);
+  background: var(--bg); color: var(--ink-soft); font-family: var(--font-body);
+  transition: opacity var(--ds-dur-slower) var(--ds-ease);
 }
 .gs--leaving { opacity: 0; pointer-events: none; }
+.gs--load { align-items: center; justify-content: center; padding: var(--ds-space-lg) var(--ds-space-gutter-narrow); }
 
-/* the still: the painting, covering the screen, under the scrim so a card reads on any part of it */
+/* the still: the painting, covering the screen. The start screen leaves it bare (the panel is
+   its own ground); the load screen lays the scrim over it so the centred panel reads anywhere. */
 .gs__art { position: absolute; inset: 0; }
-.gs__art::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
+.gs--load .gs__art::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
 .gs__img { width: 100%; height: 100%; object-fit: cover; display: block; }
 
-/* the two cards */
+/* the two panels: night over the art, an ice hairline left and right, no corner, no shadow */
 .gs__menu, .gs__load {
-  position: relative; width: 100%; box-sizing: border-box; padding: var(--ds-space-md);
-  background: var(--bg-card); border-radius: var(--ds-radius-panel); box-shadow: var(--ds-shadow-pop);
+  position: relative; box-sizing: border-box;
+  background: var(--night-glass);
+  border: 0 solid var(--rule); border-left-width: var(--line-strong); border-right-width: var(--line-strong);
 }
 .gs__menu[hidden], .gs__load[hidden] { display: none; }
 
-/* the start screen: the project's name over five choices, one column */
-.gs__menu { max-width: 24rem; }
+/* the start screen: the mark and the name, the five choices, one line at the foot */
+.gs__menu {
+  width: min(100%, var(--helm-panel-w)); min-height: 100%; flex: none;
+  display: flex; flex-direction: column; justify-content: space-between; gap: var(--ds-space-lg);
+  padding: var(--ds-space-xl) 0 var(--ds-space-lg);
+}
+.gs__top { display: flex; flex-direction: column; gap: var(--ds-space-xl); }
+.gs__head { display: flex; flex-direction: column; gap: var(--ds-space-md); padding: 0 var(--ds-space-lg); }
+.gs__mark { display: block; width: var(--helm-mark); height: var(--helm-mark); object-fit: contain; --mark-ink: var(--ink); }
 .gs__title {
-  margin: var(--ds-space-xs) 0 var(--ds-space-md); text-align: center; text-wrap: balance;
-  font-family: var(--font-display); font-size: var(--ds-text-title); font-weight: 700; line-height: 1.1;
+  margin: 0; overflow-wrap: anywhere;
+  font-family: var(--name-face); font-size: var(--ds-text-headline); font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-wide); text-transform: var(--name-case); line-height: 1.15;
+  color: var(--ink); text-shadow: var(--name-glow);
 }
-.gs__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-xs); }
+.gs__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
 .gs__items[hidden] { display: none; }
-.gs__items--extras { margin-top: var(--ds-space-sm); flex-direction: row; flex-wrap: wrap; justify-content: center; }
 .gs__item {
-  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
-  width: 100%; min-height: 48px; padding: var(--ds-space-xs) var(--ds-space-md);
-  background: transparent; color: inherit; border: 1px solid var(--rule);
-  border-radius: var(--ds-radius-pill); font: inherit; font-size: var(--ds-text-xl); font-weight: 600;
+  display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;
+  width: 100%; min-height: var(--helm-row); padding: var(--ds-space-hair) var(--ds-space-lg);
+  background: transparent; color: var(--ink); border: 0; border-bottom: var(--line) solid var(--rule-soft);
+  font-family: var(--name-face); font-size: var(--ds-text-5xl); font-weight: 400;
+  letter-spacing: var(--name-space); text-transform: var(--name-case); text-align: left;
   text-decoration: none; cursor: pointer;
-  transition: background-color .15s var(--ds-ease), border-color .15s var(--ds-ease);
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.gs__items > li:last-child > .gs__item { border-bottom-color: transparent; }
+.gs__item:hover { background: var(--glass); color: var(--ink); text-decoration: none; }
+/* the ring sits inside the row: the focus colour on the edge, a band of the night inside it, so
+   one of the two reads on the accent bar as well as on the panel */
+.gs__item:focus-visible { outline: 0; border-radius: var(--press-radius); box-shadow: var(--press-focus); }
+/* Start is the one thing lit: the accent bar under its dark ink, with the key that takes it */
+.gs__item[data-gs="start"] {
+  background: var(--accent); color: var(--accent-on); border-bottom-color: transparent;
+  font-weight: var(--name-weight-lit); box-shadow: var(--accent-glow);
+}
+.gs__item[data-gs="start"]:hover { background: var(--accent-lift); color: var(--accent-on); }
+.gs__item[data-gs="start"]:focus-visible { box-shadow: var(--press-focus), var(--accent-glow); }
+.gs__item[data-gs="start"]::after {
+  content: "Enter"; padding: 0 var(--ds-space-hair);
+  border: var(--line-strong) solid currentColor;
+  font-size: var(--ds-text-md); letter-spacing: var(--label-space);
+}
+/* Extras: three quieter rows, stepped in under the menu */
+.gs__items--extras { border-top: var(--line) solid var(--rule-soft); }
+.gs__item--extra {
+  min-height: var(--ds-space-xl); padding-left: var(--ds-space-xl);
+  font-size: var(--ds-text-xl); letter-spacing: var(--name-space-tight); color: var(--ink-soft);
 }
-.gs__item:hover { background: var(--bg); border-color: var(--ink-soft); text-decoration: none; }
-.gs__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
-/* Start is the one filled choice, as the hall's primary pill is */
-.gs__item[data-gs="start"] { background: var(--accent); color: var(--accent-on); border-color: transparent; }
-.gs__item[data-gs="start"]:hover { background: var(--accent-lift); border-color: transparent; }
-.gs__item--extra { width: auto; min-height: 40px; font-size: var(--ds-text-md); font-weight: 500; }
-.gs__note { margin: var(--ds-space-md) 0 0; text-align: center; font-size: var(--ds-text-md); color: var(--ink-soft); }
+/* the foot: one line said to you, over the strong hairline */
+.gs__foot { padding: var(--ds-space-md) var(--ds-space-lg) 0; border-top: var(--line-strong) solid var(--rule); }
+.gs__line, .gs__note { margin: 0; font-size: var(--ds-text-lg); line-height: 1.5; text-wrap: pretty; color: var(--ink-soft); }
+.gs__note { margin-top: var(--ds-space-xs); color: var(--ink); }
+/* the view chooser in front of the menu (task 1005200): Game or Classic as two rows in the
+   panel's own voice, each with one line saying what it is; the view chosen last time is lit
+   with the accent on its edge and says so */
+.gs__ask { margin: 0; padding: 0 var(--ds-space-lg) var(--ds-space-sm); font-size: var(--ds-text-lg); color: var(--ink-soft); }
+.gs__ask[hidden] { display: none; }
+.gs__item--view { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--ds-space-hair); padding-top: var(--ds-space-sm); padding-bottom: var(--ds-space-sm); }
+.gs__item--last { box-shadow: inset var(--line-strong) 0 0 var(--accent); }
+.gs__view { display: inline-flex; align-items: baseline; gap: var(--ds-space-sm); }
+.gs__sub { font-family: var(--font-body); font-size: var(--ds-text-md); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
+.gs__last { font-family: var(--font-body); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: uppercase; color: var(--accent); }
 .gs__note[hidden] { display: none; }
 
-/* the load screen: the city building up, the week it is showing, and the tip under it */
-.gs__load { max-width: 44rem; display: flex; flex-direction: column; gap: var(--ds-space-sm); text-align: center; }
-.gs__city { display: block; width: 100%; height: auto; max-height: 56vh; }
-.gs__city[hidden], .gs__when[hidden] { display: none; }
-.gs__when { margin: 0; font-size: var(--ds-text-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
-.gs__tip { margin: 0; font-size: var(--ds-text-lg); line-height: 1.45; text-wrap: pretty; }
+/* the load screen: the week it is showing, a segment per week, the city, and the tip under it */
+.gs__load {
+  width: 100%; max-width: 44rem; padding: var(--ds-space-lg) var(--ds-space-md);
+  display: flex; flex-direction: column; gap: var(--ds-space-sm);
+}
+.gs__city { display: block; width: 100%; height: auto; max-height: 52vh; }
+.gs__city[hidden], .gs__when[hidden], .gs__segs[hidden] { display: none; }
+.gs__when {
+  margin: 0; color: var(--ink); font-variant-numeric: tabular-nums;
+  font-family: var(--name-face); font-size: var(--ds-text-xl); font-weight: var(--name-weight);
+  letter-spacing: var(--name-space); text-transform: var(--name-case);
+}
+.gs__tip {
+  margin: 0; padding-top: var(--ds-space-sm); border-top: var(--line) solid var(--rule-soft);
+  font-size: var(--ds-text-lg); line-height: 1.5; text-wrap: pretty; color: var(--ink-soft);
+}
 .gs__tip b {
-  display: inline-block; margin-right: var(--ds-space-xs); padding: 0 var(--ds-space-xs);
-  border: 1px solid var(--rule); border-radius: var(--ds-radius-pill);
-  font-size: var(--ds-text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
-  color: var(--ink-soft); vertical-align: middle;
+  display: block; margin-bottom: var(--ds-space-hair);
+  font-family: var(--name-face); font-size: var(--label-size); font-weight: var(--name-weight);
+  letter-spacing: var(--label-space); text-transform: var(--name-case); color: var(--ink);
 }