@energy8platform/shell 0.6.5 → 0.7.0

package/src/ui/html/primitives.ts

@@ -1,4 +1,5 @@
 import { icon } from './icons';
+import { placePopover, popoverWidth, POPOVER, type Rect } from '@/core/popover';
 
 /** Render a (possibly socialised) two-word label across two lines — the BUY BONUS badge.
  *  Shared so the bottom-bar button and the Game-info control legend break identically. */
@@ -83,3 +84,144 @@ export function createOverlay(opts: OverlayOpts): { root: HTMLDivElement; body:
   root.append(head, scroll);
   return { root, body, scroll };
 }
+
+export interface PopoverOpts {
+  ge: string;
+  /** The shell root — the popover is placed in its coordinate space and clamped to it. */
+  surface: HTMLElement;
+  /** The plate: the bar's own plaque (`.ge-bar-panel` wide / `.ge-m-controls` mobile). Drives the
+   *  card's x, y, maxH and above/below flip, so the card sits flush with the WHOLE bar rather than
+   *  with whichever control opened it. Falls back to `pointer` when it can't be resolved (no plaque
+   *  found), and to a centred, arrow-less card when neither resolves. A function is re-resolved on
+   *  EVERY `position()` call rather than captured once — a renderer that rebuilds its DOM on
+   *  resize/re-render (e.g. HtmlRenderer's `renderBar()`) replaces the element, so a captured
+   *  reference would go stale and silently fall back to a centred card. Pass a resolver whenever the
+   *  element can be rebuilt out from under the popover. */
+  plate: HTMLElement | null | (() => HTMLElement | null);
+  /** The control the arrow points at (the burger button). Defaults to `plate` when omitted — the
+   *  historical single-rect behaviour, kept so every caller that only ever had one rect (i.e. every
+   *  caller before `plate`/`pointer` were split) keeps behaving exactly as it did before. Same
+   *  re-resolve-per-call rule as `plate`. */
+  pointer?: HTMLElement | null | (() => HTMLElement | null);
+  /** An element that visually pops out ABOVE the plate's own box — e.g. the mobile SPIN/FS hero,
+   *  taller than the `.ge-m-controls` row and vertically centred, so it overflows the row's own top
+   *  edge. When present (and its measured top is above the plate's), the plate rect's TOP edge is
+   *  extended upward to match it — bottom edge untouched — so `placePopover` sees the row's true
+   *  visual extent on the side that matters, instead of a card whose bottom (only `gap` above the
+   *  plate's own top) can clip the popped-out control's arc. Omit/return null when nothing pops out
+   *  (e.g. the wide layout, whose plate already contains its content) — a no-op. Same
+   *  re-resolve-per-call rule as `plate`/`pointer`. */
+  plateOverflowTop?: HTMLElement | null | (() => HTMLElement | null);
+  /** The scale factor the bar currently applies to itself (HtmlRenderer.applyFitScale's `s`). The
+   *  card matches it so its typography/padding/row-heights scale in lockstep with the bar chrome.
+   *  Defaults to 1 (no scaling) when omitted. */
+  scale?: () => number;
+  onClose: () => void;
+}
+
+/** A light-dismiss popover: a transparent full-surface layer (closes on pointerdown) holding a
+ *  card with an arrow that points at `pointer`. Append rows to `body`; call `position()` after the
+ *  card is in the DOM and again on resize. */
+export function createPopover(opts: PopoverOpts): {
+  root: HTMLDivElement;
+  card: HTMLDivElement;
+  body: HTMLDivElement;
+  position(): void;
+} {
+  const root = document.createElement('div');
+  root.className = 'ge-pop-layer';
+  root.dataset.ge = opts.ge;
+  const card = document.createElement('div');
+  card.className = 'ge-pop';
+  card.dataset.ge = 'menu-card';
+  const body = document.createElement('div');
+  body.className = 'ge-pop-body';
+  const arrow = document.createElement('span');
+  arrow.className = 'ge-pop-arrow';
+  card.append(body, arrow);
+  root.appendChild(card);
+  // Clicks inside the card must not reach the dismiss layer.
+  card.addEventListener('pointerdown', (e) => e.stopPropagation());
+  root.addEventListener('pointerdown', opts.onClose);
+
+  const resolveEl = (v: HTMLElement | null | (() => HTMLElement | null) | undefined): HTMLElement | null =>
+    typeof v === 'function' ? v() : (v ?? null);
+
+  /** A rect in surface coordinates, or null when unresolved/fully zero-sized (a zero-HEIGHT rect —
+   *  e.g. a not-yet-laid-out anchor — is still considered valid, matching placePopover's own rule). */
+  const rectOf = (el: HTMLElement | null, surfaceRect: DOMRect): Rect | null => {
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 && r.height <= 0) return null;
+    return { x: r.left - surfaceRect.left, y: r.top - surfaceRect.top, w: r.width, h: r.height };
+  };
+
+  const position = (): void => {
+    const surfaceRect = opts.surface.getBoundingClientRect();
+    const surface = { w: surfaceRect.width || opts.surface.clientWidth, h: surfaceRect.height || opts.surface.clientHeight };
+    if (surface.w <= 0 || surface.h <= 0) return;
+    const s = opts.scale?.() ?? 1;
+
+    // 1. Clear a prior run's constraints (transform + width + max-height + left) before measuring —
+    // otherwise scrollWidth/offsetHeight report the already-scaled/clamped box (not the natural
+    // content size) on every call after the first, and the card can shrink to fit a
+    // narrower/shorter surface but never grow back when the surface widens/grows again. An uncleared
+    // max-height is the worse of the two: placePopover positions a card sized for the STALE clamped
+    // height, then the un-clamped natural height (restored below) springs back afterward — so the
+    // rendered card can overlap the plate or run off the surface edge until reopened. The transform
+    // doesn't affect layout either way, but clearing it keeps every pass measuring the same way.
+    // `left` matters too: `.ge-pop` is absolutely positioned inside an `inset:0` layer, so with the
+    // previous pass's `left` still applied, its shrink-to-fit width is bounded by (layerWidth − left)
+    // instead of the card's true natural width. Invisible at scale 1; a scale below 1 lays the card
+    // out at up to 1/s its on-screen width, so a stale left — only ever a few hundred px — can clip it.
+    card.style.transform = '';
+    card.style.width = '';
+    card.style.maxHeight = '';
+    card.style.left = '0px';
+    const naturalW = card.scrollWidth || POPOVER.minW;
+
+    // 2. Resolve the ON-SCREEN width from the natural (unscaled) width scaled up to screen units,
+    // then set the LOCAL style.width so the card renders at that resolved width once scaled — and
+    // re-measure the height at that width (wrapping may have changed it).
+    const resolvedW = popoverWidth(surface.w, naturalW * s);
+    card.style.width = `${resolvedW / s}px`;
+    const naturalH = card.offsetHeight || POPOVER.minH;
+
+    // 3. Resolve plate/pointer in surface coordinates and place using SCREEN-space size —
+    // placePopover works in surface pixels throughout, so both the anchor rects and `size` here are
+    // screen units even though the card's own layout (width/height above) is still LOCAL/unscaled.
+    const plateEl = resolveEl(opts.plate);
+    const pointerEl = resolveEl(opts.pointer);
+    let plate = rectOf(plateEl, surfaceRect) ?? rectOf(pointerEl, surfaceRect);
+    // Extend the plate's TOP edge upward to a popped-out hero's true top (e.g. the mobile SPIN/FS
+    // control, taller than its row) — bottom edge untouched. Both rects are already in the SAME
+    // surface-coordinate space (post any bar-scale transform), so this is a plain coordinate compare,
+    // no separate unit conversion needed.
+    const overflowEl = resolveEl(opts.plateOverflowTop);
+    if (plate) {
+      const overflowRect = rectOf(overflowEl, surfaceRect);
+      if (overflowRect && overflowRect.y < plate.y) {
+        plate = { ...plate, h: plate.h + (plate.y - overflowRect.y), y: overflowRect.y };
+      }
+    }
+    const pointer = rectOf(pointerEl, surfaceRect);
+    const p = placePopover(plate, surface, { w: resolvedW, h: naturalH * s }, pointer);
+
+    // 4. Apply. maxHeight and the arrow's offset are LOCAL (unscaled) too, since both live inside the
+    // scaled card; transform-origin:top left keeps left/top (screen units) as the card's visual
+    // top-left regardless of `s`, and — since a transform doesn't affect layout — the next
+    // measurement pass stays clean without needing any extra bookkeeping.
+    card.style.left = `${p.x}px`;
+    card.style.top = `${p.y}px`;
+    card.style.maxHeight = `${p.maxH / s}px`;
+    card.style.transformOrigin = 'top left';
+    card.style.transform = Math.abs(s - 1) > 0.001 ? `scale(${s})` : '';
+    card.classList.toggle('ge-pop-below', p.below);
+    if (p.arrowX < 0) arrow.style.display = 'none';
+    else {
+      arrow.style.display = '';
+      arrow.style.left = `${p.arrowX / s}px`;
+    }
+  };
+  return { root, card, body, position };
+}

package/src/ui/html/shell.css.ts

@@ -172,7 +172,10 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
   border-radius:16px; background:var(--shell-plaque-glass); color:#fff; font-size:14px; font-weight:600; }
 #${SHELL_ROOT_ID} .ge-ov-row .ge-grow { flex:1; text-align:left; }
 #${SHELL_ROOT_ID} button.ge-ov-row { cursor:pointer; font-family:inherit; transition:background .12s ease, color .12s ease; }
-#${SHELL_ROOT_ID} button.ge-ov-row:hover { background:var(--shell-plaque-glass-hover); color:var(--shell-accent); }
+#${SHELL_ROOT_ID} button.ge-ov-row:hover:not([disabled]) { background:var(--shell-plaque-glass-hover); color:var(--shell-accent); }
+/* disabled rows — mirrors Pixi's box.alpha = 0.5 for all three row kinds. A <button> row carries
+   the native attribute directly; a toggle/range row is a <div> wrapper, so it gets .ge-disabled. */
+#${SHELL_ROOT_ID} .ge-ov-row[disabled], #${SHELL_ROOT_ID} .ge-ov-row.ge-disabled { opacity:.5; cursor:default; }
 #${SHELL_ROOT_ID} .ge-ov-row.ge-col { flex-direction:column; align-items:stretch; gap:10px; }
 #${SHELL_ROOT_ID} .ge-ov-row .ge-row-head { display:flex; justify-content:space-between; align-items:center; }
 #${SHELL_ROOT_ID} .ge-ov-row .ge-row-head .ge-val { color:var(--shell-plaque-label); font-variant-numeric:tabular-nums; font-weight:700; }
@@ -183,6 +186,7 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} .ge-toggle i { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
   background:#fff; transition:left .12s ease; }
 #${SHELL_ROOT_ID} .ge-toggle.ge-on i { left:20px; }
+#${SHELL_ROOT_ID} .ge-toggle:disabled { cursor:default; }
 /* sound on/off — speaker icon button (replaces the toggle) */
 #${SHELL_ROOT_ID} .ge-snd { pointer-events:auto; cursor:pointer; border:none; background:none; padding:0;
   width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:24px;
@@ -191,6 +195,22 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} .ge-snd:hover { color:var(--shell-accent); }
 #${SHELL_ROOT_ID} .ge-snd:active { transform:scale(.92); }
 
+/* bar menu popover — light dismiss (no dim, no blur), card anchored to the burger */
+#${SHELL_ROOT_ID} .ge-pop-layer { position:absolute; inset:0; z-index:55; pointer-events:auto; }
+#${SHELL_ROOT_ID} .ge-pop { position:absolute; box-sizing:border-box; display:flex; flex-direction:column;
+  padding:8px; border-radius:18px; background:var(--shell-plaque-dark);
+  box-shadow:0 14px 38px rgba(0,0,0,.5); backdrop-filter:blur(12px) saturate(120%);
+  -webkit-backdrop-filter:blur(12px) saturate(120%); animation:ge-ov-in .12s ease-out; }
+#${SHELL_ROOT_ID} .ge-pop-body { overflow-y:auto; overflow-x:hidden; min-height:0; }
+#${SHELL_ROOT_ID} .ge-pop .ge-ov-row { padding:10px 12px; margin-bottom:6px; font-size:13px; }
+#${SHELL_ROOT_ID} .ge-pop .ge-ov-row:last-child { margin-bottom:0; }
+#${SHELL_ROOT_ID} .ge-pop-sep { height:1px; margin:6px 4px; background:var(--shell-plaque-line); opacity:.5; }
+#${SHELL_ROOT_ID} .ge-pop-arrow { position:absolute; bottom:-7px; width:14px; height:14px; margin-left:-7px;
+  background:var(--shell-plaque-dark); transform:rotate(45deg); border-radius:3px; }
+#${SHELL_ROOT_ID} .ge-pop.ge-pop-below .ge-pop-arrow { bottom:auto; top:-7px; }
+#${SHELL_ROOT_ID} .ge-pop .ge-mi-icon { flex:0 0 auto; width:20px; font-size:20px; display:flex; }
+#${SHELL_ROOT_ID} .ge-pop .ge-mi-chev { flex:0 0 auto; width:16px; font-size:16px; color:var(--shell-muted); display:flex; }
+
 /* game info — each section is its own glass plaque; body text sized for comfortable reading */
 #${SHELL_ROOT_ID} .ge-gi-sec { margin-bottom:12px; background:var(--shell-plaque-glass);
   border-radius:16px; padding:16px 18px; }

package/src/ui/pixi/PixiRenderer.ts

@@ -6,6 +6,7 @@ import {
   RenderTexture,
   Sprite,
   type Application,
+  type Text,
   type Ticker,
 } from 'pixi.js';
 import type { ShellRenderer, ShellHost, OverlayRequest, OverlayHandle } from '@/core/renderer';
@@ -14,7 +15,7 @@ import type { PixiComponentContext, ShellLayer, LayerHandle } from './context';
 import { installShellFont, whenFontReady } from './text';
 import { countUpText, tween } from './motion-pixi';
 import { BottomBar } from './components/BottomBar';
-import { openSettings } from './components/Settings';
+import { openMenu } from './components/Menu';
 import { openGameInfo } from './components/GameInfo';
 import { openBuyBonus } from './components/BuyBonus';
 import { openBetPicker, openAutoplayPicker } from './components/pickers';
@@ -95,6 +96,15 @@ export class PixiRenderer implements ShellRenderer {
     this.bar = new BottomBar(this.ctx);
     this.barLayer.addChild(this.bar);
     this.bar.applyFit();
+    // renderBar() runs on every resize AND on ~20 other state changes (bet/win/turbo/mode/…), any of
+    // which can change the bar's own fitScale()/menuPlate() (e.g. a WIN pill appearing mid-autoplay
+    // retriggers the wide layout's overflow-tightening branch). Only onResize used to reposition the
+    // open layer, so a live bar-content change while the menu was open left it at the stale
+    // scale/position until the next resize. Every ShellLayer's resize() only re-reads current
+    // geometry and re-fits/re-centres itself — none of them call back into renderBar() (verified:
+    // Popover, CardModal, Overlay, BuyBonusOverlay) — so this cannot recurse; `currentLayer` is
+    // `null` whenever nothing is open, so this cannot throw either.
+    this.currentLayer?.resize?.(this.screenW, this.screenH);
   }
 
   setLayout(): void {
@@ -109,16 +119,17 @@ export class PixiRenderer implements ShellRenderer {
 
   /** Count a money readout from→to on the freshly-rendered bar's value Text node. Mirrors
    *  PixiGameShell.animateMoney (which counted on the just-built bar's value Texts). */
-  animateMoney(field: 'balance' | 'win', from: number, to: number): void {
+  animateMoney(field: 'balance' | 'win', from: number, to: number, durationMs?: number): void {
     if (!this.bar) return;
+    // countUpText defaults durationMs to 450 — pass it only when the caller overrode it.
+    const count = (text: Text, fmt: (n: number) => string) =>
+      durationMs == null
+        ? countUpText(this.ticker, text, from, to, fmt)
+        : countUpText(this.ticker, text, from, to, fmt, durationMs);
     if (field === 'balance' && this.bar.balanceValue) {
-      this.moneyAnims.push(
-        countUpText(this.ticker, this.bar.balanceValue, from, to, (n) => this.ctx.fmt(n)),
-      );
+      this.moneyAnims.push(count(this.bar.balanceValue, (n) => this.ctx.fmt(n)));
     } else if (field === 'win' && this.bar.winValue) {
-      this.moneyAnims.push(
-        countUpText(this.ticker, this.bar.winValue, from, to, (n) => this.ctx.fmtWin(n)),
-      );
+      this.moneyAnims.push(count(this.bar.winValue, (n) => this.ctx.fmtWin(n)));
     }
   }
 
@@ -130,8 +141,18 @@ export class PixiRenderer implements ShellRenderer {
   openOverlay(req: OverlayRequest): OverlayHandle | void {
     let layer: ShellLayer | null = null;
     switch (req.kind) {
-      case 'settings':
-        layer = openSettings(this.ctx);
+      case 'menu':
+        // Getters, not `this.bar` by value: renderBar() destroys/rebuilds the bar on every resize
+        // and ~20 other state changes, in the same resize handler that then repositions this popover
+        // — see Menu.ts's openMenu doc comment for why this must stay lazy. menuAnchor (the burger)
+        // is the arrow's pointer; menuPlate (the plaque) drives placement; fitScale is the same
+        // factor BottomBar applies to its own content via `inner.scale`.
+        layer = openMenu(
+          this.ctx,
+          () => this.bar?.menuAnchor() ?? null,
+          () => this.bar?.menuPlate() ?? null,
+          () => this.bar?.fitScale() ?? 1,
+        );
         break;
       case 'gameInfo':
         layer = openGameInfo(this.ctx);
@@ -153,7 +174,7 @@ export class PixiRenderer implements ShellRenderer {
         break;
     }
     if (!layer) return;
-    this.pushLayer(layer);
+    this.pushLayer(layer, { backdrop: req.kind !== 'menu' });
     const built = layer;
     return {
       onKey: built.onKey ? built.onKey.bind(built) : undefined,
@@ -165,11 +186,6 @@ export class PixiRenderer implements ShellRenderer {
     this.closeLayer();
   }
 
-  refreshSoundIcon(_on: boolean): void {
-    // No-op: the open Settings overlay registers its icon updater via host.setSoundRefresh, which
-    // the controller's setSound path drives. The renderer has nothing extra to refresh.
-  }
-
   /** Fade out (≈250ms, like GameShell's REMOVE_FADE_MS) then tear down; resolves when removed. */
   destroy(): Promise<void> {
     if (this.destroyed) return Promise.resolve();
@@ -193,9 +209,11 @@ export class PixiRenderer implements ShellRenderer {
   }
 
   // ── layer stack ────────────────────────────────────────────────────────────
-  pushLayer(node: ShellLayer): LayerHandle {
+  pushLayer(node: ShellLayer, opts?: { backdrop?: boolean }): LayerHandle {
     this.clearLayer();
-    this.makeBackdrop(); // frosted snapshot of the scene behind (the DOM's backdrop-filter:blur)
+    // Light-dismiss layers (the menu popover) opt out with `{ backdrop: false }` — no frosted
+    // snapshot, the game stays visible behind them. Every other caller is unaffected (defaults on).
+    if (opts?.backdrop !== false) this.makeBackdrop(); // frosted snapshot (the DOM's backdrop-filter:blur)
     this.currentLayer = node;
     this.modalLayer.addChild(node);
     this.fitModals();
@@ -322,6 +340,7 @@ export class PixiRenderer implements ShellRenderer {
       get tokens() { return host.tokens; },
       get layout() { return host.layout; },
       get soundOn() { return host.soundOn; },
+      get menu() { return host.menu; },
       get actions() { return host.actions; },
       openReplay: (opts) => host.openReplay(opts),
       t: (s) => host.t(s),
@@ -329,17 +348,18 @@ export class PixiRenderer implements ShellRenderer {
       emit: host.emit.bind(host),
       notifyResize: (w, h) => host.notifyResize(w, h),
       setSound: (on) => host.setSound(on),
-      setSoundRefresh: (fn) => host.setSoundRefresh(fn),
       getVolume: (key) => host.getVolume(key),
       setVolume: (key, v) => host.setVolume(key, v),
-      setVolumeRefresh: (fn) => host.setVolumeRefresh(fn),
+      getMenuValue: (id) => host.getMenuValue(id),
+      setMenuValue: (id, v) => host.setMenuValue(id, v),
+      setMenuRefresh: (fn) => host.setMenuRefresh(fn),
       // — Pixi-specific surface —
       get ticker() { return self.app.ticker; },
       get canvas() { return self.app.canvas as HTMLCanvasElement | undefined; },
       get screenW() { return self.app.screen.width; },
       get screenH() { return self.app.screen.height; },
       render: () => self.renderBar(),
-      pushLayer: (node) => self.pushLayer(node),
+      pushLayer: (node, opts) => self.pushLayer(node, opts),
       // Route component-initiated closes through the controller (not straight to self.closeLayer) so
       // it clears its OverlayHandle. Otherwise the handle goes stale: hasOpenLayer() stays true and
       // keydowns keep routing to onKey on a destroyed overlay → write to a torn-down ScrollBox.

package/src/ui/pixi/components/BottomBar.ts

@@ -1,5 +1,6 @@
 import { Container, Graphics, Text } from 'pixi.js';
 import type { PixiComponentContext } from '../context';
+import type { Rect } from '@/core/popover';
 import { effectiveAccent } from '@/core/colors';
 import { BUY_BONUS_ART, BUY_BONUS_SOCIAL_ART, BUY_BONUS_DISABLED_ART } from '../../buy-bonus-art';
 import { FlexBox } from '../primitives/flex';
@@ -118,6 +119,11 @@ export class BottomBar extends Container {
   private spin?: SpinDisc;
   private autoBtn?: IconButton;
   private turboBtn?: IconButton;
+  private menuBtn?: IconButton;
+  /** The menu's PLATE, in LOCAL coordinates relative to `inner` — the continuous dark panel (wide)
+   *  or the controls row (mobile). Set at the point `applyFit()`/`applyFitMobile()` compute it;
+   *  `menuPlate()` converts it to screen space lazily (see that method's doc comment for why). */
+  private plateRect: Rect | null = null;
 
   constructor(host: PixiComponentContext) {
     super();
@@ -127,6 +133,57 @@ export class BottomBar extends Container {
     else this.buildWide();
   }
 
+  /** Screen-space rect of the burger — the menu popover's POINTER (the arrow's target only; see
+   *  `menuPlate` for what drives placement). `measureSize()` (the button's own nominal box, e.g.
+   *  36×36) rather than the built-in `getSize()` (the glyph's ink bounds only) so a burger whose icon
+   *  doesn't fill its box still reports its true hit-box size; multiplied by `inner.scale` — `getSize`
+   *  /`measureSize` only reflect the node's OWN scale (always 1 here), not the ancestor `inner.scale`
+   *  the bar's whole fit-scale lives on, so the UNMULTIPLIED width/height would silently overstate the
+   *  burger's true on-screen footprint on a scaled-down bar and skew the arrow off-centre. */
+  menuAnchor(): Rect | null {
+    if (!this.menuBtn || this.menuBtn.destroyed) return null;
+    const p = this.menuBtn.getGlobalPosition();
+    const s = this.inner.scale.x;
+    const size = this.menuBtn.measureSize();
+    return { x: p.x, y: p.y, w: size.w * s, h: size.h * s };
+  }
+
+  /** Screen-space rect of the menu's PLATE — the continuous dark panel (wide) or the controls row
+   *  (mobile), NOT the burger itself and NOT (mobile) the info pill below it. Drives the popover's
+   *  x/y/maxH/below; the burger (`menuAnchor`) drives only the arrow. Resolved lazily on every call,
+   *  like `menuAnchor` — `PixiRenderer.renderBar()` destroys and rebuilds this BottomBar on every
+   *  resize and ~20 other state changes, so a value captured once would go stale. `plateRect` is
+   *  local to `inner`; `getGlobalPosition` + `inner.scale` convert it to screen space (`outer*` on the
+   *  mobile FlexBox and the wide panel's own drawn rect are both LOCAL sizes, unaffected by `inner`'s
+   *  ancestor scale, same reasoning as `menuAnchor` above). */
+  menuPlate(): Rect | null {
+    // Pixi v8's Container.destroy() nulls `_position`/`_scale`, so `inner.scale.x` /
+    // `inner.getGlobalPosition()` on a destroyed bar throws — guard for symmetry with menuAnchor()
+    // above, which already returns null once its button is destroyed. Not reachable today
+    // (PixiRenderer.renderBar() destroys and reassigns `this.bar` synchronously, in the same call),
+    // but the asymmetry is a trap for a future caller that holds a reference across a render.
+    if (this.destroyed) return null;
+    if (!this.plateRect) return null;
+    const s = this.inner.scale.x;
+    const origin = this.inner.getGlobalPosition();
+    return {
+      x: origin.x + this.plateRect.x * s,
+      y: origin.y + this.plateRect.y * s,
+      w: this.plateRect.w * s,
+      h: this.plateRect.h * s,
+    };
+  }
+
+  /** The scale factor the bar currently applies to itself (`inner.scale`) — shared with the menu
+   *  popover so its typography/padding/row-heights scale in lockstep with the bar's own chrome,
+   *  instead of ignoring the viewport like a fixed-local-size card would. */
+  fitScale(): number {
+    // Same destroyed guard as menuPlate()/menuAnchor() above, and the same neutral fallback a
+    // scale factor should have (1 = no scaling) rather than throwing.
+    if (this.destroyed) return 1;
+    return this.inner.scale.x;
+  }
+
   // ── wide / landscape ──────────────────────────────────────────────────────
   private buildWide(): void {
     const { state, tokens } = this.host;
@@ -139,15 +196,14 @@ export class BottomBar extends Container {
 
     // LEFT info group: menu · balance · (Total win) · (Win)
     const left = new FlexBox({ direction: 'row', align: 'center', gap: ZONE_GAP });
-    left.add(
-      new IconButton('menu', {
-        size: 36,
-        glyph: 30,
-        color: '#ffffff',
-        hover: tokens.accent,
-        onTap: () => this.host.actions.openMenu(),
-      }),
-    );
+    this.menuBtn = new IconButton('menu', {
+      size: 36,
+      glyph: 30,
+      color: '#ffffff',
+      hover: tokens.accent,
+      onTap: () => this.host.actions.openMenu(),
+    });
+    left.add(this.menuBtn);
     if (!state.replay) {
       const bal = readout(this.host, 'Balance', this.host.fmt(state.balance));
       this.balanceValue = bal.valueText;
@@ -340,6 +396,7 @@ export class BottomBar extends Container {
       hover: tokens.accent,
       onTap: () => this.host.actions.openMenu(),
     });
+    this.menuBtn = menu;
     // autoplay is a base-mode control only — hidden in free spins / replay (matches the DOM bar)
     if (isBase && config.features.autoplay) {
       this.autoBtn = new IconButton('autoplay', {
@@ -574,6 +631,8 @@ export class BottomBar extends Container {
     this.panelBg.clear();
     roundedPath(this.panelBg, panelX, SPIN_POP, panelRight - panelX, BAR_H, [12, 12, 12, 12]);
     this.panelBg.fill(tokens.bar);
+    // The menu's plate — the whole continuous dark panel, local to `inner` (see menuPlate()).
+    this.plateRect = { x: panelX, y: SPIN_POP, w: panelRight - panelX, h: BAR_H };
 
     if (this.buy) this.buy.position.set(OUTER_PAD, panelCenterY - BUY_W / 2);
     left.position.set(panelX + PANEL_PAD, panelCenterY - left.outerHeight / 2);
@@ -613,6 +672,18 @@ export class BottomBar extends Container {
     // SPIN hero), inflating the controls row so it overlaps the info row below it.
     controls.setLayoutSize(rowW, M_CTRL_H);
     info.setLayoutSize(rowW, M_INFO_H);
+    // The menu's plate — the controls row (NOT the info pill below it), local to `inner`. Read from
+    // `controls.outerWidth/outerHeight` (its own nominal box), NOT the FlexBox's own bounds (which
+    // would include the SPIN/FS hero popping out both above AND below it — see menuPlate()'s doc
+    // comment) — but the TOP edge is deliberately extended upward by `pop`, the same hero pop-out
+    // amount reserved as `topPad` above, so the plate the popover math sees is the row's true visual
+    // extent on the side that matters: without this, the card's bottom (only `gap` above the plate's
+    // top) can clip the top ~(pop-gap)px of the hero's arc, since 62px M_CTRL_H is 11px shorter than
+    // the 84px hero. The BOTTOM edge is left alone — the hero's symmetric under-pop is a separate,
+    // unrelated concern (the info pill sits right below with its own small gap) and extending it too
+    // would perturb the `below`-placement branch (spaceBelow) for no benefit. A no-op when `pop` is 0
+    // (no hero shown — e.g. replay without free spins).
+    this.plateRect = { x: 0, y: topPad - pop, w: controls.outerWidth, h: controls.outerHeight + pop };
     const s = rowW > 0 ? Math.max(0.4, Math.min(1, avail / rowW)) : 1;
 
     this.inner.scale.set(s);

package/src/ui/pixi/components/GameInfo.ts

@@ -29,7 +29,7 @@ export function openGameInfo(host: PixiComponentContext): ShellLayer {
     onClose: () => host.closeLayer(),
     onBack: () => {
       host.closeLayer();
-      host.actions.openSettings();
+      host.actions.openMenu();
     },
     build: (w) => buildBody(host, w),
   });

package/src/ui/pixi/components/Menu.ts

@@ -0,0 +1,167 @@
+import { Container, Graphics, Text } from 'pixi.js';
+import { resolveMenu, type MenuRow } from '@/core/menu';
+import type { Rect } from '@/core/popover';
+import type { PixiComponentContext, ShellLayer } from '../context';
+import { Popover } from '../primitives/popover';
+import { FlexBox } from '../primitives/flex';
+import { Slider, Spacer, Toggle } from '../primitives/controls';
+import { makeText } from '../text';
+import { makeIcon } from '../pixi-icon';
+import { attachHover } from '../primitives/widgets';
+
+/** The bar menu as a Pixi popover. Same rows, same order as the DOM — both come from resolveMenu.
+ *
+ *  `getAnchor` (the burger — the arrow's POINTER), `getPlate` (the bar's plaque — drives placement)
+ *  and `getScale` (the bar's own fit-scale) are all FUNCTIONS, resolved lazily on every reposition —
+ *  never a captured `BottomBar` instance. `PixiRenderer.renderBar()` destroys and rebuilds the
+ *  BottomBar on every resize AND on ~20 other state changes, in the SAME resize handler that then
+ *  repositions this popover. A captured instance would already be destroyed by the time `resize()`
+ *  next runs, so `menuAnchor()`/`menuPlate()` on it would return `null` and the card would silently
+ *  recentre with its arrow hidden — the exact bug the DOM renderer shipped and fixed the same way
+ *  (see `html/Menu.ts`'s plate/pointer callbacks). Passing getters means every call reads whichever
+ *  bar is CURRENT. `getPlate`/`getScale` are optional so every pre-existing caller (which only ever
+ *  passed `getAnchor`) keeps behaving exactly as it did before the plate/pointer/scale split. */
+export function openMenu(
+  host: PixiComponentContext,
+  getAnchor?: () => Rect | null,
+  getPlate?: () => Rect | null,
+  getScale?: () => number,
+): ShellLayer {
+  const updaters: Record<string, (v: boolean | number) => void> = {};
+  const layer = new Popover(host, {
+    tag: 'menu',
+    plate: () => getPlate?.() ?? null,
+    pointer: () => getAnchor?.() ?? null,
+    scale: () => getScale?.() ?? 1,
+    onClose: () => host.closeLayer(),
+    build: (width) => {
+      const col = new FlexBox({ direction: 'column', align: 'stretch', gap: 6 });
+      for (const row of resolveMenu(host)) col.add(buildRow(host, row, width, updaters));
+      return col;
+    },
+  });
+  host.setMenuRefresh((id, v) => updaters[id]?.(v));
+  return layer;
+}
+
+function label(text: string): Text {
+  return makeText(text, { size: 13, weight: '600', color: '#ffffff' }) as Text;
+}
+
+function rowBox(host: PixiComponentContext, name: string, column = false): FlexBox {
+  const box = new FlexBox({
+    direction: column ? 'column' : 'row',
+    align: column ? 'stretch' : 'center',
+    gap: column ? 8 : 10,
+    padding: { top: 10, bottom: 10, left: 12, right: 12 },
+    minHeight: column ? undefined : 44,
+    background: { fill: host.tokens.plaqueGlass, radius: 14 },
+  });
+  box.label = name;
+  return box;
+}
+
+function buildRow(
+  host: PixiComponentContext,
+  row: MenuRow,
+  width: number,
+  updaters: Record<string, (v: boolean | number) => void>,
+): Container {
+  if (row.kind === 'separator') {
+    const sep = new Container();
+    sep.label = 'menu-sep';
+    const line = new Graphics().rect(4, 6, width - 8, 1).fill(host.tokens.plaqueLine);
+    line.alpha = 0.5;
+    sep.addChild(line);
+    return sep;
+  }
+  if (row.kind === 'button') {
+    const box = rowBox(host, `menu-row-${row.id}`);
+    if (row.icon) box.add(makeIcon(row.icon, 20, '#ffffff'));
+    const text = label(row.label);
+    box.add(text);
+    box.add(new Spacer(), { grow: 1 });
+    if (row.chevron) box.add(makeIcon('chevronRight', 16, host.tokens.muted));
+    if (!row.disabled) {
+      box.setInteractive(true);
+      box.on('pointertap', () => {
+        host.closeLayer();
+        row.select();
+      });
+      attachHover(
+        box,
+        () => { box.setBgFill(host.tokens.plaqueGlassHover); text.style.fill = host.tokens.accent; },
+        () => { box.setBgFill(host.tokens.plaqueGlass); text.style.fill = '#ffffff'; },
+      );
+    } else {
+      box.alpha = 0.5;
+    }
+    return box;
+  }
+  if (row.kind === 'toggle') {
+    const box = rowBox(host, `menu-row-${row.id}`);
+    const glyph = row.icon(row.get());
+    const iconNode = glyph ? makeIcon(glyph, 20, '#ffffff') : null;
+    if (iconNode) box.add(iconNode);
+    box.add(label(row.label));
+    box.add(new Spacer(), { grow: 1 });
+    // Disabled: neutralise the write-through at the source (a no-op onChange) rather than relying
+    // solely on eventMode — Toggle wires its own pointertap listener unconditionally in its
+    // constructor, so a stray direct emit must still be harmless, not just unreachable by real hits.
+    const toggle = new Toggle(
+      row.get(),
+      row.disabled ? () => {} : (v) => row.set(v),
+      host.tokens.accent,
+      host.tokens.plaqueLine,
+    );
+    box.add(toggle);
+    updaters[row.id] = (v) => {
+      const on = v === true;
+      toggle.setValue(on);
+      const next = row.icon(on);
+      if (iconNode && next) iconNode.setIcon(next);
+    };
+    if (row.disabled) {
+      box.alpha = 0.5;
+      toggle.eventMode = 'none'; // dimmed + inert — mirrors the button branch's disabled treatment
+    }
+    return box;
+  }
+  const box = rowBox(host, `menu-row-${row.id}`, true);
+  const head = new FlexBox({ direction: 'row', align: 'center' });
+  const value = makeText(row.format(row.get()), { size: 12, weight: '700', color: host.tokens.plaqueLabel });
+  head.add(label(row.label));
+  head.add(new Spacer(), { grow: 1 });
+  head.add(value);
+  // Slider works in 0..1; map to the row's declared bounds, snapping to the MIN-anchored lattice
+  // (min + k·step). Snapping to a bare multiple of step instead (Math.round(raw/step)*step) drifts
+  // off `min` whenever min isn't itself a multiple of step — the common case, since the default step
+  // is (max-min)/20: e.g. min:1,max:10 gives step 0.45, and the bare-multiple formula would emit 0.9
+  // at the far left, BELOW the declared min. Clamp guards any float overshoot past either end.
+  const toUnit = (v: number): number => (row.max === row.min ? 0 : (v - row.min) / (row.max - row.min));
+  const fromUnit = (u: number): number => {
+    const raw = row.min + u * (row.max - row.min);
+    const snapped = row.min + Math.round((raw - row.min) / row.step) * row.step;
+    return Math.max(row.min, Math.min(row.max, snapped));
+  };
+  // Disabled: same reasoning as the toggle branch above — a no-op onInput, not just eventMode.
+  const slider = new Slider(host, toUnit(row.get()), row.disabled ? () => {} : (u) => {
+    const v = fromUnit(u);
+    value.text = row.format(v);
+    head.layout(); // the readout's text just changed width (e.g. "5%" → "100%") — reposition it
+    row.set(v);
+  });
+  updaters[row.id] = (v) => {
+    const n = Number(v);
+    value.text = row.format(n);
+    head.layout();
+    slider.setValue(toUnit(n));
+  };
+  box.add(head);
+  box.add(slider);
+  if (row.disabled) {
+    box.alpha = 0.5;
+    slider.eventMode = 'none';
+  }
+  return box;
+}