@energy8platform/shell 0.6.6 → 0.7.1

package/dist/pixi.cjs.js

@@ -53,6 +53,240 @@ class EventEmitter {
     }
 }
 
+// AUTO-GENERATED from ../../icons.svg by scripts/gen-icons-from-svg.mjs — do not edit by hand.
+// Sharp monochrome icon set: each glyph is a 24×24 viewBox fragment using currentColor
+// (hollow shapes use fill-rule="evenodd"). Coordinates are baked into the 24×24 space (no
+// <g transform>), so the same fragment renders identically in the DOM <svg> and in Pixi's
+// GraphicsContext.svg. To change an icon: edit icons.svg, then run
+// `node scripts/gen-icons-from-svg.mjs`.
+// The single glyph-name union, shared by core (menu items) and both renderers.
+const ICON_NAMES = [
+    'spin',
+    'turbo1',
+    'autoplay',
+    'stop',
+    'menu',
+    'minus',
+    'plus',
+    'gift',
+    'info',
+    'soundOn',
+    'soundOff',
+    'close',
+    'back',
+    'chevronRight',
+    'ticket',
+    'turbo2',
+    'turboOff',
+    'chevronUp',
+    'chevronDown',
+];
+
+const PRESET_IDS = ['sound', 'music', 'sfx', 'gameInfo'];
+function isPresetId(id) {
+    return PRESET_IDS.includes(id);
+}
+/** The rows shown when `ShellConfig.menu` is omitted — today's Settings content, minus master. */
+const DEFAULT_MENU = [
+    { id: 'sound' },
+    { id: 'music' },
+    { id: 'sfx' },
+    { type: 'separator' },
+    { id: 'gameInfo' },
+];
+const isSeparator = (i) => i.type === 'separator';
+/** Range bounds with defaults: 0..1 like a volume slider, step = a twentieth of the span. */
+function rangeBounds(item) {
+    const min = item.min ?? 0;
+    const max = item.max ?? 1;
+    const derivedStep = (max - min) / 20;
+    // A declared `step` must be a genuinely positive number. `??` alone doesn't catch this: an
+    // explicit 0 (or a negative value) is not null/undefined, so it would sail through unchanged —
+    // and a renderer's position math divides by it (Pixi's fromUnit: `(raw-min)/step`), turning the
+    // slider's value into NaN, which then reaches `state.menu` and the `settingChange` payload.
+    const step = item.step != null && item.step > 0 ? item.step : derivedStep;
+    return { min, max, step };
+}
+/** Initial values for CUSTOM items (presets keep their own homes). Values already in `prev` win, so
+ *  a later `setMenu()` with the same ids does not reset what the player has changed. */
+function seedMenuValues(items, prev = {}) {
+    const out = {};
+    for (const item of items) {
+        if (isSeparator(item))
+            continue;
+        const type = item.type;
+        if (!type || isPresetId(item.id))
+            continue;
+        // A previous value only carries over when its runtime type still matches this item's kind.
+        // Without this guard, reconfiguring the same id from a toggle to a range (or back) would seed
+        // a boolean into a slider's position math (or a stale number into a checkbox) — a legitimate
+        // reconfiguration, not a config error, so it falls through to the item's own default instead
+        // of warning.
+        const prevValue = prev[item.id];
+        if (type === 'toggle') {
+            out[item.id] = typeof prevValue === 'boolean' ? prevValue : (item.value ?? false);
+        }
+        else if (type === 'range') {
+            const r = item;
+            out[item.id] = typeof prevValue === 'number' ? prevValue : (r.value ?? rangeBounds(r).min);
+        }
+    }
+    return out;
+}
+const percent = (v) => `${Math.round(v * 100)}%`;
+function safeIcon(name) {
+    return name && ICON_NAMES.includes(name) ? name : undefined;
+}
+/** Every drop/collision warning goes through here so the message style stays uniform. */
+function warn(message) {
+    console.warn(`[shell] ${message}`);
+}
+/** Expand the configured list into render-ready rows. A config mistake — an unknown preset id, an
+ *  unrecognized custom `type`, or an invalid range span — is dropped with one warning rather than
+ *  silently misbehaving: a typo must be visible, not silently invisible. A custom id that collides
+ *  with a reserved preset id also warns, but keeps its row (see `custom()`). */
+function resolveMenu(host) {
+    const rows = [];
+    for (const item of host.menu) {
+        if (isSeparator(item)) {
+            rows.push({ kind: 'separator' });
+            continue;
+        }
+        const type = item.type;
+        if (!type) {
+            const row = preset(host, item);
+            if (row)
+                rows.push(row);
+            else
+                warn(`unknown menu preset id "${item.id}" — item skipped`);
+            continue;
+        }
+        const row = custom(host, item, type);
+        if (row)
+            rows.push(row);
+    }
+    return rows;
+}
+function preset(host, item) {
+    const disabled = item.disabled ?? false;
+    const label = host.t(item.label ?? DEFAULT_LABELS[item.id] ?? item.id);
+    switch (item.id) {
+        case 'sound':
+            return {
+                kind: 'toggle',
+                id: 'sound',
+                label,
+                disabled,
+                icon: (v) => safeIcon(item.icon) ?? (v ? 'soundOn' : 'soundOff'),
+                get: () => host.getMenuValue('sound') !== false,
+                set: (v) => host.setMenuValue('sound', v),
+            };
+        case 'music':
+        case 'sfx': {
+            const id = item.id;
+            return {
+                kind: 'range',
+                id,
+                label,
+                icon: safeIcon(item.icon),
+                disabled,
+                min: 0,
+                max: 1,
+                step: 0.05,
+                get: () => Number(host.getMenuValue(id) ?? 1),
+                set: (v) => host.setMenuValue(id, v),
+                format: percent,
+            };
+        }
+        case 'gameInfo':
+            return {
+                kind: 'button',
+                id: 'gameInfo',
+                label,
+                icon: safeIcon(item.icon) ?? 'info',
+                disabled,
+                chevron: true,
+                select: () => host.actions.openInfo(),
+            };
+        default:
+            return null;
+    }
+}
+const DEFAULT_LABELS = {
+    sound: 'Sound',
+    music: 'Music',
+    sfx: 'SFX',
+    gameInfo: 'Game info',
+};
+function custom(host, item, type) {
+    // Same store, different semantics: the real preset's get() and a custom row's get() disagree
+    // (see the preset cases below vs. the toggle case here). Routing does not change — Task 4's
+    // ShellHost is what actually owns the value — this warning just makes the clash visible.
+    if (isPresetId(item.id)) {
+        warn(`menu item id "${item.id}" collides with a built-in preset id — preset ids are reserved`);
+    }
+    const disabled = item.disabled ?? false;
+    const label = host.t(item.label ?? item.id);
+    const icon = safeIcon(item.icon);
+    if (type === 'toggle') {
+        const it = item;
+        return {
+            kind: 'toggle',
+            id: it.id,
+            label,
+            disabled,
+            icon: () => icon,
+            get: () => host.getMenuValue(it.id) === true,
+            set: (v) => {
+                host.setMenuValue(it.id, v);
+                it.onChange?.(v);
+            },
+        };
+    }
+    if (type === 'range') {
+        const it = item;
+        const { min, max, step } = rangeBounds(it);
+        if (max <= min) {
+            // A renderer's position math ((value - min) / (max - min)) turns this into Infinity/NaN —
+            // drop the row instead, exactly like an unknown preset id.
+            warn(`menu item "${it.id}" has invalid range bounds (min ${min}, max ${max}) — item skipped`);
+            return null;
+        }
+        return {
+            kind: 'range',
+            id: it.id,
+            label,
+            icon,
+            disabled,
+            min,
+            max,
+            step,
+            get: () => Number(host.getMenuValue(it.id) ?? min),
+            set: (v) => {
+                host.setMenuValue(it.id, v);
+                it.onChange?.(v);
+            },
+            format: it.format ?? (min === 0 && max === 1 ? percent : (v) => String(v)),
+        };
+    }
+    if (type === 'button') {
+        const it = item;
+        return {
+            kind: 'button',
+            id: it.id,
+            label,
+            icon,
+            disabled,
+            chevron: it.chevron ?? false,
+            select: () => it.onSelect?.(),
+        };
+    }
+    // Neither toggle, range, nor button — a typo'd `type` used to fall through to an unconditional
+    // button row with no onSelect. Drop it visibly instead.
+    warn(`menu item "${item.id}" has unknown type "${type}" — item skipped`);
+    return null;
+}
+
 function createInitialState(config) {
     return {
         mode: config.mode,
@@ -69,10 +303,10 @@ function createInitialState(config) {
         bonus: null,
         activeFeature: null,
         volumes: {
-            master: clampVolume(config.volumes?.master),
             music: clampVolume(config.volumes?.music),
             sfx: clampVolume(config.volumes?.sfx),
         },
+        menu: seedMenuValues(config.menu ?? DEFAULT_MENU),
     };
 }
 /** Clamp a configured volume to 0..1, defaulting to full (1) when unset/invalid. */
@@ -170,15 +404,19 @@ function resolveTheme(theme = {}) {
  *  trailing zeros are trimmed down to (but never past) `minDecimals`, so small wins keep their
  *  significant digits. Balance / bet / prices stay fixed at `minDecimals`.
  *
+ *  Separators default to the platform convention — `.` decimal, `,` thousands (`€1,234.50`).
+ *  A comma decimal is NOT safe as a default: players read "2,50" as 250 and believe they were
+ *  paid far more than they were. Games that need another convention pass `currency.separator`.
+ *
  *  Example with `maxDecimals: 4, minDecimals: 2`:
- *    fixed    → 0.0673 → 0,07     0.3 → 0,30
- *    variable → 0.0673 → 0,0673   0.067 → 0,067   0.3 → 0,30   0 → 0,00
+ *    fixed    → 0.0673 → 0.07     0.3 → 0.30
+ *    variable → 0.0673 → 0.0673   0.067 → 0.067   0.3 → 0.30   0 → 0.00
  */
 function formatCurrency(value, currency, variableDecimals = false) {
     const maxDecimals = currency.maxDecimals ?? 2;
     const minDecimals = Math.max(0, Math.min(maxDecimals, currency.minDecimals ?? maxDecimals));
-    const thousands = currency.separator?.thousands ?? '.';
-    const decimal = currency.separator?.decimal ?? ',';
+    const thousands = currency.separator?.thousands ?? ',';
+    const decimal = currency.separator?.decimal ?? '.';
     const safe = Number.isFinite(value) ? value : 0;
     // fixed callers round at minDecimals; variable callers round at maxDecimals then trim back down.
     const places = variableDecimals ? maxDecimals : minDecimals;
@@ -1456,7 +1694,7 @@ class KeyboardController {
 
 // AUTO-GENERATED by scripts/gen-version.mjs — do not edit. Mirrors package.json "version".
 /** The @energy8platform/shell package version, stamped into the game-info footer. */
-const PACKAGE_VERSION = '0.6.6';
+const PACKAGE_VERSION = '0.7.1';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -1474,6 +1712,7 @@ function resolveConfig(config) {
         theme: config.theme,
         onBonusBuy: config.onBonusBuy,
         volumes: config.volumes,
+        menu: config.menu,
         version: config.version ?? '1.0.0',
         isSocial: config.isSocial ?? false,
         replay: config.replay ?? config.mode === 'replay',
@@ -1494,8 +1733,9 @@ class ShellController extends EventEmitter {
     i18n;
     kbd;
     overlay = null;
-    soundRefresh = null;
-    volumeRefresh = null;
+    menuItems;
+    menuRefresh = null;
+    overlayKind = null;
     prevBalance;
     prevWin;
     destroyed = false;
@@ -1506,6 +1746,7 @@ class ShellController extends EventEmitter {
         this.config = resolveConfig(config);
         this.i18n = createI18n({ language: this.config.language, isSocial: this.config.isSocial });
         this.state = createInitialState(this.config);
+        this.menuItems = this.config.menu ?? DEFAULT_MENU;
         this.tokens = resolveTheme(this.config.theme);
         this.prevBalance = this.state.balance;
         this.prevWin = this.state.win;
@@ -1639,14 +1880,21 @@ class ShellController extends EventEmitter {
     show(req) {
         this.closeModal();
         this.overlay = this.renderer.openOverlay(req) ?? null;
+        this.overlayKind = this.overlay ? req.kind : null;
     }
+    /** Open the bar menu. Called again while it is open, it closes it — the burger toggles. */
     openMenu() {
+        if (this.overlayKind === 'menu') {
+            this.closeModal();
+            return;
+        }
         this.emit('menuOpen');
-        this.openSettings();
+        this.show({ kind: 'menu' });
     }
+    /** @deprecated The Settings overlay is gone — this opens the bar menu. */
     openSettings() {
         this.emit('settingsOpen');
-        this.show({ kind: 'settings' });
+        this.openMenu();
     }
     openInfo() {
         this.emit('infoOpen');
@@ -1678,35 +1926,72 @@ class ShellController extends EventEmitter {
         if (!this.overlay)
             return;
         this.overlay = null;
-        this.soundRefresh = null;
-        this.volumeRefresh = null;
+        this.overlayKind = null;
+        this.menuRefresh = null;
         this.renderer.closeOverlay();
     }
     // ── sound ──────────────────────────────────────────────────────────────────
     setSound(on) {
         this.soundOn = on;
         this.emit('settingChange', { key: 'sound', value: on });
-        this.soundRefresh?.(on);
-        this.renderer.refreshSoundIcon?.(on);
-    }
-    setSoundRefresh(fn) {
-        this.soundRefresh = fn;
+        this.menuRefresh?.('sound', on);
     }
     // ── volume ─────────────────────────────────────────────────────────────────
     getVolume(key) {
         return this.state.volumes[key];
     }
     /** Set a volume slider (0..1). Shared by the slider control (drag) and game code (public API):
-     *  clamps, stores so a reopened Settings overlay reflects it, emits `settingChange`, and
-     *  live-updates the slider if the overlay is currently open. */
+     *  clamps, stores so a reopened menu popover reflects it, emits `settingChange`, and
+     *  live-updates the slider if the menu is currently open. */
     setVolume(key, value) {
         const v = Math.max(0, Math.min(1, value));
         this.state.volumes[key] = v;
         this.emit('settingChange', { key, value: v });
-        this.volumeRefresh?.(key, v);
-    }
-    setVolumeRefresh(fn) {
-        this.volumeRefresh = fn;
+        this.menuRefresh?.(key, v);
+    }
+    // ── menu ───────────────────────────────────────────────────────────────────
+    get menu() {
+        return this.menuItems;
+    }
+    /** Replace the item list. Values of ids already in state are kept; new ids are seeded. */
+    setMenu(items) {
+        this.menuItems = items;
+        this.state.menu = seedMenuValues(items, this.state.menu);
+        if (this.overlayKind === 'menu')
+            this.show({ kind: 'menu' });
+    }
+    getMenuValue(id) {
+        if (id === 'sound')
+            return this.soundOn;
+        if (id === 'music' || id === 'sfx')
+            return this.state.volumes[id];
+        return this.state.menu[id];
+    }
+    /** Set a menu value. Presets route to their own homes so there is never a second copy. */
+    setMenuValue(id, value) {
+        if (id === 'sound') {
+            this.setSound(value !== false);
+            return;
+        }
+        if (id === 'music' || id === 'sfx') {
+            this.setVolume(id, Number(value));
+            return;
+        }
+        const next = typeof value === 'number' ? this.clampRange(id, value) : value;
+        this.state.menu[id] = next;
+        this.emit('settingChange', { key: id, value: next });
+        this.menuRefresh?.(id, next);
+    }
+    setMenuRefresh(fn) {
+        this.menuRefresh = fn;
+    }
+    /** Clamp to the declared bounds of a custom `range` item (a non-range id passes through). */
+    clampRange(id, value) {
+        const item = this.menuItems.find((i) => i.id === id);
+        if (!item || item.type !== 'range')
+            return value;
+        const { min, max } = rangeBounds(item);
+        return Math.max(min, Math.min(max, value));
     }
     // ── features ─────────────────────────────────────────────────────────────────
     activateFeature(bonus) {
@@ -1816,6 +2101,11 @@ class ShellController extends EventEmitter {
         if (this.destroyed)
             return Promise.resolve();
         this.destroyed = true;
+        // With the menu (or any overlay) open at teardown, `menuRefresh` / `overlay` / `overlayKind`
+        // would otherwise survive the renderer's destroy — so a later setVolume()/setSound() call
+        // invokes a stale row updater against already-destroyed Pixi Graphics (or a detached DOM node)
+        // and throws. Run BEFORE the renderer teardown below, while it can still close cleanly.
+        this.closeModal();
         if (typeof document !== 'undefined') {
             this.kbd?.detach();
             document.removeEventListener('pointerdown', this.pullFocus, true);
@@ -1825,6 +2115,64 @@ class ShellController extends EventEmitter {
     }
 }
 
+/** Geometry for the bar-menu popover. Pure math over rectangles so the DOM and Pixi renderers
+ *  place it identically — the renderers only supply measured sizes and apply the result. */
+const POPOVER = {
+    /** Keep-out from the surface edges. */
+    margin: 8,
+    /** Space between the anchor and the card. */
+    gap: 8,
+    /** Minimum distance from the arrow tip to either rounded corner. */
+    arrowInset: 14,
+    /** A card shorter than this does not fit — flip to the other side instead. */
+    minH: 120,
+    minW: 220,
+    maxW: 320,
+};
+const clamp$1 = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+/** Card width: content width clamped to [minW, maxW] and never wider than the surface. */
+function popoverWidth(surfaceW, contentW) {
+    const hi = Math.min(POPOVER.maxW, surfaceW - POPOVER.margin * 2);
+    return Math.max(0, clamp$1(contentW, Math.min(POPOVER.minW, hi), hi));
+}
+/** Place the card above the `anchor` (below if it does not fit), left-aligned to it and clamped
+ *  inside the surface. `anchor === null` (no bar / hidden shell) centres it, arrow off.
+ *
+ *  `anchor` drives PLACEMENT (x, y, maxH, below) — normally the bar's whole plaque ("plate"), so the
+ *  card sits flush with the bar as a whole rather than with whichever control opened it. `pointer` is
+ *  the (optional) rect the ARROW points at — normally the burger button, which can sit anywhere
+ *  inside the plate. Defaults to `anchor` when omitted, so every caller that only ever had one rect
+ *  (i.e. every caller before `pointer` existed) keeps behaving exactly as it did before. */
+function placePopover(anchor, surface, size, pointer = null) {
+    const { margin, gap, arrowInset, minH } = POPOVER;
+    if (!anchor) {
+        const maxH = Math.max(0, surface.h - margin * 2);
+        const h = Math.min(size.h, maxH);
+        const rawY = (surface.h - h) / 2;
+        const y = clamp$1(rawY, margin, Math.max(margin, surface.h - h - margin));
+        return {
+            x: Math.max(margin, (surface.w - size.w) / 2),
+            y,
+            maxH,
+            arrowX: -1,
+            below: false,
+        };
+    }
+    const spaceAbove = anchor.y - gap - margin;
+    const spaceBelow = surface.h - (anchor.y + anchor.h) - gap - margin;
+    // Prefer above; flip only when the card would be squeezed below its usable minimum AND there is
+    // genuinely more room on the other side.
+    const below = spaceAbove < Math.min(size.h, minH) && spaceBelow > spaceAbove;
+    const maxH = Math.max(0, below ? spaceBelow : spaceAbove);
+    const h = Math.min(size.h, maxH);
+    const x = clamp$1(anchor.x, margin, Math.max(margin, surface.w - size.w - margin));
+    const rawY = below ? anchor.y + anchor.h + gap : anchor.y - gap - h;
+    const y = clamp$1(rawY, margin, Math.max(margin, surface.h - h - margin));
+    const arrowAnchor = pointer ?? anchor;
+    const arrowX = clamp$1(arrowAnchor.x + arrowAnchor.w / 2 - x, arrowInset, Math.max(arrowInset, size.w - arrowInset));
+    return { x, y, maxH, arrowX, below };
+}
+
 const NO_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
 /** Create a shell with an explicit renderer instance (custom or a built-in HtmlRenderer/PixiRenderer).
  *  Built-in renderers also have the createGameShell/createPixiShell sugar in /html and /pixi.
@@ -2294,25 +2642,25 @@ function roundedPath(g, x, y, w, h, [tl, tr, br, bl]) {
 // GraphicsContext.svg. To change an icon: edit icons.svg, then run
 // `node scripts/gen-icons-from-svg.mjs`.
 const SVGS = {
-    spin: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.57 8.41C13.3 8.31 13.51 7.09 13.59 6.65C13.61 6.56 13.55 6.48 13.46 6.48C12.32 6.45 5.74 6.61 4.16 14.85C4.15 14.9 4 15.16 3.8 14.91C3.27 14.23 2.43 12.08 3.46 9.16C6.01 1.92 13 3.07 13.79 3.23C13.83 3.23 13.86 3.2 13.86 3.17C13.85 2.86 13.82 1.68 14.17 1.64C14.51 1.6 19.04 5.61 18.96 5.95C18.86 6.36 13.83 8.51 13.57 8.41Z"/><path d="M10.43 15.59C10.7 15.69 10.49 16.91 10.41 17.35C10.39 17.44 10.45 17.52 10.54 17.52C11.68 17.55 18.26 17.39 19.84 9.15C19.85 9.1 20 8.84 20.2 9.09C20.73 9.77 21.57 11.92 20.54 14.85C17.99 22.08 11 20.93 10.21 20.77C10.17 20.77 10.13 20.8 10.14 20.83C10.15 21.14 10.18 22.32 9.83 22.36C9.49 22.4 4.96 18.39 5.04 18.05C5.14 17.64 10.17 15.49 10.43 15.59Z"/></g>`,
-    turbo1: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62Z"/></g>`,
-    autoplay: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.97 12.41C20.22 11.94 20.95 11.88 20.97 12.47C21.14 16.4 18.71 19.92 14.44 20.97C8.59 22.4 5.29 18.55 5.28 18.52C5.2 18.33 4.41 19.77 4.19 19.59C3.81 19.28 3.78 14.9 3.9 14.78C4.01 14.67 8.39 14.95 8.48 15.31C8.58 15.64 7.2 16.1 7.4 16.38C9.14 18.67 15.82 20.29 19.97 12.41Z"/><path d="M9.3 15.36L9.3 8.67C9.3 8.32 9.97 7.74 10.58 8.14C15.83 11.56 16 11.46 16.01 12.04C16.02 12.61 15.12 12.98 10.63 15.91C10.32 16.11 9.29 15.72 9.29 15.36Z"/><path d="M4.03 11.59C3.78 12.06 3.05 12.12 3.03 11.53C2.86 7.6 5.29 4.08 9.56 3.03C15.41 1.6 18.71 5.45 18.72 5.48C18.8 5.67 19.59 4.23 19.81 4.41C20.19 4.72 20.22 9.1 20.1 9.22C19.99 9.33 15.61 9.05 15.52 8.69C15.42 8.36 16.8 7.9 16.6 7.62C14.86 5.33 8.18 3.71 4.03 11.59Z"/></g>`,
+    spin: `<g fill="currentColor" fill-rule="evenodd"><path d="M13.57 8.41C13.3 8.31 13.51 7.09 13.59 6.65C13.61 6.56 13.55 6.48 13.46 6.48C12.32 6.45 5.74 6.61 4.16 14.85C4.15 14.9 4 15.16 3.8 14.91C3.27 14.23 2.43 12.08 3.46 9.16C6.01 1.92 13 3.07 13.79 3.23C13.83 3.23 13.86 3.2 13.86 3.17C13.85 2.86 13.82 1.68 14.17 1.64C14.51 1.6 19.04 5.61 18.96 5.95C18.86 6.36 13.83 8.51 13.57 8.41L13.57 8.41Z"/><path d="M10.43 15.59C10.7 15.69 10.49 16.91 10.41 17.35C10.39 17.44 10.45 17.52 10.54 17.52C11.68 17.55 18.26 17.39 19.84 9.15C19.85 9.1 20 8.84 20.2 9.09C20.73 9.77 21.57 11.92 20.54 14.85C17.99 22.08 11 20.93 10.21 20.77C10.17 20.77 10.13 20.8 10.14 20.83C10.15 21.14 10.18 22.32 9.83 22.36C9.49 22.4 4.96 18.39 5.04 18.05C5.14 17.64 10.17 15.49 10.43 15.59L10.43 15.59L10.43 15.59Z"/></g>`,
+    turbo1: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62L17.81 2.62Z"/></g>`,
+    autoplay: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.97 12.41C20.22 11.94 20.95 11.88 20.97 12.47C21.14 16.4 18.71 19.92 14.44 20.97C8.59 22.4 5.29 18.55 5.28 18.52C5.2 18.33 4.41 19.77 4.19 19.59C3.81 19.28 3.78 14.9 3.9 14.78C4.01 14.67 8.39 14.95 8.48 15.31C8.58 15.64 7.2 16.1 7.4 16.38C9.14 18.67 15.82 20.29 19.97 12.41L19.97 12.41Z"/><path d="M9.3 15.36L9.3 8.67C9.3 8.32 9.97 7.74 10.58 8.14C15.83 11.56 16 11.46 16.01 12.04C16.02 12.61 15.12 12.98 10.63 15.91C10.32 16.11 9.29 15.72 9.29 15.36L9.3 15.36Z"/><path d="M4.03 11.59C3.78 12.06 3.05 12.12 3.03 11.53C2.86 7.6 5.29 4.08 9.56 3.03C15.41 1.6 18.71 5.45 18.72 5.48C18.8 5.67 19.59 4.23 19.81 4.41C20.19 4.72 20.22 9.1 20.1 9.22C19.99 9.33 15.61 9.05 15.52 8.69C15.42 8.36 16.8 7.9 16.6 7.62C14.86 5.33 8.18 3.71 4.03 11.59L4.03 11.59Z"/></g>`,
     stop: `<g fill="currentColor" fill-rule="evenodd"><rect x="1.6" y="1.6" width="20.8" height="20.8" rx="2.9"/></g>`,
     menu: `<g fill="currentColor" fill-rule="evenodd"><rect x="1.61" y="3.81" width="20.79" height="4.47" rx="2.23"/><rect x="1.6" y="9.77" width="20.79" height="4.46" rx="2.23"/><rect x="1.6" y="15.72" width="20.79" height="4.47" rx="2.23"/></g>`,
     minus: `<g fill="currentColor" fill-rule="evenodd"><rect x="1.6" y="9.86" width="20.8" height="4.28" rx="2.11"/></g>`,
-    plus: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.72 14.37L13.84 14.37L13.84 20.33C13.84 21.48 12.89 22.4 11.74 22.36C10.61 22.36 9.7 21.45 9.7 20.33L9.7 14.37L3.67 14.37C2.52 14.37 1.6 13.42 1.63 12.27C1.63 11.15 2.55 10.23 3.67 10.23L9.7 10.23L9.7 4.28C9.71 1.61 13.83 1.6 13.84 4.28L13.84 10.23L19.72 10.23C22.39 10.24 22.4 14.36 19.72 14.37Z"/></g>`,
+    plus: `<g fill="currentColor" fill-rule="evenodd"><path d="M19.72 14.37L13.84 14.37L13.84 20.33C13.84 21.48 12.89 22.4 11.74 22.36C10.61 22.36 9.7 21.45 9.7 20.33L9.7 14.37L3.67 14.37C2.52 14.37 1.6 13.42 1.63 12.27C1.63 11.15 2.55 10.23 3.67 10.23L9.7 10.23L9.7 4.28C9.71 1.61 13.83 1.6 13.84 4.28L13.84 10.23L19.72 10.23C22.39 10.24 22.4 14.36 19.72 14.37L19.72 14.37Z"/></g>`,
     gift: `<rect x="4" y="9" width="16" height="11" rx="2" fill="currentColor"/><path d="M9 9c-1.35 -0.31 -2.18 -1.65 -1.87 -3s1.65 -2.18 3 -1.87c0.93 0.22 1.65 0.94 1.87 1.87c0.31 -1.35 1.65 -2.18 3 -1.87c1.35 0.31 2.18 1.65 1.87 3c-0.22 0.93 -0.94 1.65 -1.87 1.87h-6Z" fill="currentColor"/><rect x="11" y="9" width="2" height="11" fill="rgba(0,0,0,.35)"/>`,
-    info: `<g fill="currentColor" fill-rule="evenodd"><circle cx="11.98" cy="4.27" r="2.67"/><path d="M16.05 21.09L16.05 21.54C16.05 22.02 15.67 22.4 15.19 22.4L8.89 22.4C8.42 22.4 8.04 22.02 8.04 21.54L8.04 20.98C8.04 20.5 8.42 20.12 8.89 20.12L8.89 20.12C9.13 20.12 9.32 19.93 9.32 19.7L9.32 11.59C9.32 11.29 9.08 11.05 8.8 11.05C8.33 11.05 7.95 10.67 7.95 10.19L7.95 9.18C7.95 8.7 8.33 8.32 8.8 8.32L9.32 8.32C9.32 8.32 13.8 8.32 13.8 8.32C14.27 8.32 14.65 8.71 14.65 9.18L14.65 19.7C14.65 19.93 14.84 20.12 15.07 20.12L15.07 20.12C15.61 20.12 16.05 20.56 16.05 21.09Z"/></g>`,
-    soundOn: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 15.04L1.6 9.18C1.6 8.75 1.95 8.4 2.38 8.4L5.03 8.4C5.21 8.4 5.39 8.36 5.56 8.28L11.6 5.26C12.12 5 12.73 5.38 12.73 5.96L12.73 18.27C12.73 18.85 12.12 19.22 11.6 18.96L5.56 15.94C5.39 15.86 5.22 15.82 5.03 15.82L2.38 15.82C1.95 15.82 1.6 15.47 1.6 15.04Z"/><path d="M16.01 12.11C16.04 12.36 15.67 14.7 14.7 15.23C13.92 15.42 13.54 14.77 13.86 14.1C14.89 12.56 14.88 11.66 13.86 10.13C13.54 9.46 13.92 8.8 14.7 8.99C15.67 9.53 16.06 11.81 16.01 12.11Z"/><path d="M19.15 12.12C19.2 12.51 18.6 16.4 17.3 17.05C16.32 17.54 15.99 16.87 16.42 15.81C17.8 13.4 17.59 9.93 16.42 8.41C15.73 7.5 16.34 6.58 17.26 7.18C18.74 8.15 19.21 11.64 19.15 12.12Z"/><path d="M22.4 12.16C22.16 15.18 21 17.95 19.71 18.82C18.73 19.48 18.22 18.42 18.93 17.32C20.96 14.17 21.92 9.95 18.9 6.29C18.13 5.35 19.35 4.52 20.11 5.48C21.43 7.14 22.33 9.14 22.4 12.16Z"/></g>`,
+    info: `<g fill="currentColor" fill-rule="evenodd"><circle cx="11.98" cy="4.27" r="2.67"/><path d="M16.05 21.09L16.05 21.54C16.05 22.02 15.67 22.4 15.19 22.4L8.89 22.4C8.42 22.4 8.04 22.02 8.04 21.54L8.04 20.98C8.04 20.5 8.42 20.12 8.89 20.12L8.89 20.12C9.13 20.12 9.32 19.93 9.32 19.7L9.32 11.59C9.32 11.29 9.08 11.05 8.8 11.05C8.33 11.05 7.95 10.67 7.95 10.19L7.95 9.18C7.95 8.7 8.33 8.32 8.8 8.32L13.8 8.32C14.27 8.32 14.65 8.71 14.65 9.18L14.65 19.7C14.65 19.93 14.84 20.12 15.07 20.12L15.07 20.12C15.61 20.12 16.05 20.56 16.05 21.09L16.05 21.09Z"/></g>`,
+    soundOn: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 15.04L1.6 9.18C1.6 8.75 1.95 8.4 2.38 8.4L5.03 8.4C5.21 8.4 5.39 8.36 5.56 8.28L11.6 5.26C12.12 5 12.73 5.38 12.73 5.96L12.73 18.27C12.73 18.85 12.12 19.22 11.6 18.96L5.56 15.94C5.39 15.86 5.22 15.82 5.03 15.82L2.38 15.82C1.95 15.82 1.6 15.47 1.6 15.04L1.6 15.04Z"/><path d="M16.01 12.11C16.04 12.36 15.67 14.7 14.7 15.23C13.92 15.42 13.54 14.77 13.86 14.1C14.89 12.56 14.88 11.66 13.86 10.13C13.54 9.46 13.92 8.8 14.7 8.99C15.67 9.53 16.06 11.81 16.01 12.11Z"/><path d="M19.15 12.12C19.2 12.51 18.6 16.4 17.3 17.05C16.32 17.54 15.99 16.87 16.42 15.81C17.8 13.4 17.59 9.93 16.42 8.41C15.73 7.5 16.34 6.58 17.26 7.18C18.74 8.15 19.21 11.64 19.15 12.12L19.15 12.12Z"/><path d="M22.4 12.16C22.16 15.18 21 17.95 19.71 18.82C18.73 19.48 18.22 18.42 18.93 17.32C20.96 14.17 21.92 9.95 18.9 6.29C18.13 5.35 19.35 4.52 20.11 5.48C21.43 7.14 22.33 9.14 22.4 12.16L22.4 12.16Z"/></g>`,
     soundOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M1.6 14.77L1.6 9.23C1.6 8.82 1.93 8.49 2.34 8.49L4.85 8.49C5.02 8.49 5.19 8.45 5.34 8.38L11.06 5.52C11.55 5.27 12.12 5.63 12.12 6.18L12.12 17.82C12.12 18.37 11.55 18.73 11.06 18.48L5.34 15.62C5.19 15.55 5.02 15.51 4.85 15.51L2.34 15.51C1.93 15.51 1.6 15.18 1.6 14.77Z"/><path d="M21.95 16.53C21.5 16.98 20.78 16.98 20.33 16.53L17.79 13.99L15.25 16.54C14.8 16.99 14.07 16.99 13.62 16.54C13.17 16.09 13.17 15.36 13.62 14.92L16.17 12.37L13.63 9.83C13.18 9.38 13.18 8.65 13.63 8.21C13.85 7.98 14.14 7.87 14.44 7.87C14.73 7.87 15.02 7.98 15.25 8.21L17.79 10.75L20.33 8.21C20.77 7.76 21.5 7.76 21.95 8.21C22.17 8.44 22.28 8.73 22.28 9.02C22.28 9.32 22.17 9.61 21.95 9.83L19.41 12.37L21.95 14.91C22.4 15.36 22.4 16.08 21.95 16.53Z"/></g>`,
-    close: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.39 21.37C20.38 22.38 18.74 22.38 17.73 21.37L12.01 15.64L6.27 21.38C5.26 22.39 3.62 22.39 2.61 21.38C1.6 20.38 1.6 18.74 2.61 17.73L8.35 11.99L2.62 6.25C1.61 5.24 1.61 3.61 2.62 2.6C3.12 2.09 3.79 1.84 4.45 1.84C5.11 1.84 5.77 2.09 6.28 2.6L12.01 8.33L17.72 2.62C18.73 1.61 20.37 1.61 21.38 2.62C21.89 3.12 22.14 3.78 22.14 4.44C22.14 5.11 21.89 5.77 21.38 6.27L15.67 11.99L21.39 17.71C22.4 18.72 22.4 20.36 21.39 21.37Z"/></g>`,
-    back: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.49 2.32L17.49 2.32C18.2 3.03 18.2 4.19 17.49 4.9L11.68 10.71C10.97 11.42 10.97 12.58 11.68 13.29L17.49 19.1C18.21 19.81 18.21 20.97 17.49 21.69L17.49 21.69C16.78 22.4 15.62 22.4 14.91 21.69L7.8 14.58L7.8 14.58C7.8 14.58 6.51 13.29 6.51 13.29C5.79 12.58 5.79 11.42 6.51 10.71L14.9 2.31C15.62 1.6 16.77 1.6 17.49 2.31Z"/></g>`,
-    chevronRight: `<g fill="currentColor" fill-rule="evenodd"><path d="M6.51 21.68L6.51 21.68C5.8 20.97 5.8 19.81 6.51 19.1L12.32 13.29C13.03 12.58 13.03 11.42 12.32 10.71L6.51 4.9C5.79 4.19 5.79 3.03 6.51 2.31L6.51 2.31C7.22 1.6 8.38 1.6 9.09 2.31L16.2 9.42L16.2 9.42C16.2 9.42 17.49 10.71 17.49 10.71C18.21 11.42 18.21 12.58 17.49 13.29L9.1 21.69C8.38 22.4 7.23 22.4 6.51 21.69Z"/></g>`,
+    close: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.39 21.37C20.38 22.38 18.74 22.38 17.73 21.37L12.01 15.64L6.27 21.38C5.26 22.39 3.62 22.39 2.61 21.38C1.6 20.38 1.6 18.74 2.61 17.73L8.35 11.99L2.62 6.25C1.61 5.24 1.61 3.61 2.62 2.6C3.12 2.09 3.79 1.84 4.45 1.84C5.11 1.84 5.77 2.09 6.28 2.6L12.01 8.33L17.72 2.62C18.73 1.61 20.37 1.61 21.38 2.62C21.89 3.12 22.14 3.78 22.14 4.44C22.14 5.11 21.89 5.77 21.38 6.27L15.67 11.99L21.39 17.71C22.4 18.72 22.4 20.36 21.39 21.37L21.39 21.37Z"/></g>`,
+    back: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.49 2.32L17.49 2.32C18.2 3.03 18.2 4.19 17.49 4.9L11.68 10.71C10.97 11.42 10.97 12.58 11.68 13.29L17.49 19.1C18.21 19.81 18.21 20.97 17.49 21.69L17.49 21.69C16.78 22.4 15.62 22.4 14.91 21.69L7.8 14.58L7.8 14.58L6.51 13.29C5.79 12.58 5.79 11.42 6.51 10.71L14.9 2.31C15.62 1.6 16.77 1.6 17.49 2.31L17.49 2.31Z"/></g>`,
+    chevronRight: `<g fill="currentColor" fill-rule="evenodd"><path d="M6.51 21.68L6.51 21.68C5.8 20.97 5.8 19.81 6.51 19.1L12.32 13.29C13.03 12.58 13.03 11.42 12.32 10.71L6.51 4.9C5.79 4.19 5.79 3.03 6.51 2.31L6.51 2.31C7.22 1.6 8.38 1.6 9.09 2.31L16.2 9.42L16.2 9.42L17.49 10.71C18.21 11.42 18.21 12.58 17.49 13.29L9.1 21.69C8.38 22.4 7.23 22.4 6.51 21.69L6.51 21.69Z"/></g>`,
     ticket: `<path d="M1.72 9.48L19.64 4.67L20.28 7.07C19.19 7.8 18.82 9 19.11 10.09C19.41 11.19 20.33 12.04 21.64 12.13L22.28 14.52L4.36 19.32L3.72 16.93C4.81 16.2 5.18 15 4.89 13.91C4.59 12.81 3.67 11.96 2.36 11.87L1.72 9.48Z" fill="none" stroke="currentColor" stroke-width="1.84" stroke-linejoin="miter"/><path d="M12.57 7.17L9.75 13.26L11.92 12.4L11.84 16.74L14.85 10.06L12.38 11.1Z" fill="currentColor"/>`,
-    turbo2: `<g fill="currentColor" fill-rule="evenodd"><path d="M8.24 8.81L3.92 7.68C3.88 7.67 3.88 7.61 3.92 7.61L9.66 6.45C9.8 6.43 9.89 6.56 9.83 6.68L8.86 8.35C8.67 8.73 8.33 8.83 8.24 8.81Z"/><path d="M20.58 3.04L17.34 8.38C17.09 8.8 17.39 9.33 17.87 9.33L21.57 9.33C22.12 9.33 22.4 9.99 22.02 10.39L11.24 21.73C11.12 21.86 10.95 21.93 10.77 21.92L10.77 21.92C10.34 21.92 10.04 21.47 10.2 21.07L13.04 13.82C13.21 13.41 12.9 12.96 12.45 12.97L8.46 13.01C7.98 13.01 7.67 12.5 7.9 12.08L13.2 2.4C13.31 2.2 13.52 2.07 13.75 2.07L20.05 2.09C20.54 2.1 20.84 2.63 20.58 3.04Z"/><path d="M5.96 12.68L1.64 11.54C1.6 11.54 1.6 11.47 1.64 11.47L7.38 10.31C7.52 10.3 7.61 10.42 7.55 10.55L6.58 12.22C6.39 12.59 6.05 12.69 5.96 12.68Z"/><path d="M9.67 16.66L5.35 15.53C5.31 15.52 5.31 15.46 5.35 15.46L11.09 14.3C11.22 14.28 11.32 14.41 11.26 14.53L10.29 16.2C10.1 16.58 9.76 16.68 9.67 16.66Z"/></g>`,
-    turboOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62Z"/></g>`,
-    chevronUp: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.68 17.49L21.68 17.49C20.97 18.2 19.81 18.2 19.1 17.49L13.29 11.68C12.58 10.97 11.42 10.97 10.71 11.68L4.9 17.49C4.19 18.21 3.03 18.21 2.31 17.49L2.31 17.49C1.6 16.78 1.6 15.62 2.31 14.91L9.42 7.8L9.42 7.8C9.42 7.8 10.71 6.51 10.71 6.51C11.42 5.79 12.58 5.79 13.29 6.51L21.69 14.9C22.4 15.62 22.4 16.77 21.69 17.49Z"/></g>`,
-    chevronDown: `<g fill="currentColor" fill-rule="evenodd"><path d="M2.32 6.51L2.32 6.51C3.03 5.8 4.19 5.8 4.9 6.51L10.71 12.32C11.42 13.03 12.58 13.03 13.29 12.32L19.1 6.51C19.82 5.79 20.97 5.79 21.69 6.51L21.69 6.51C22.4 7.22 22.4 8.38 21.69 9.09L14.58 16.19L14.58 16.2C14.58 16.2 13.29 17.49 13.29 17.49C12.58 18.21 11.42 18.21 10.71 17.49L2.31 9.1C1.6 8.38 1.6 7.23 2.31 6.51Z"/></g>`,
+    turbo2: `<g fill="currentColor" fill-rule="evenodd"><path d="M8.24 8.81L3.92 7.68C3.88 7.67 3.88 7.61 3.92 7.61L9.66 6.45C9.8 6.43 9.89 6.56 9.83 6.68L8.86 8.35C8.67 8.73 8.33 8.83 8.24 8.81L8.24 8.81Z"/><path d="M20.58 3.04L17.34 8.38C17.09 8.8 17.39 9.33 17.87 9.33L21.57 9.33C22.12 9.33 22.4 9.99 22.02 10.39L11.24 21.73C11.12 21.86 10.95 21.93 10.77 21.92L10.77 21.92C10.34 21.92 10.04 21.47 10.2 21.07L13.04 13.82C13.21 13.41 12.9 12.96 12.45 12.97L8.46 13.01C7.98 13.01 7.67 12.5 7.9 12.08L13.2 2.4C13.31 2.2 13.52 2.07 13.75 2.07L20.05 2.09C20.54 2.1 20.84 2.63 20.58 3.04L20.58 3.04Z"/><path d="M5.96 12.68L1.64 11.54C1.6 11.54 1.6 11.47 1.64 11.47L7.38 10.31C7.51 10.3 7.61 10.42 7.55 10.55L6.58 12.22C6.39 12.59 6.05 12.69 5.96 12.68L5.96 12.68Z"/><path d="M9.67 16.66L5.35 15.53C5.31 15.52 5.31 15.46 5.35 15.46L11.09 14.3C11.22 14.28 11.32 14.41 11.26 14.53L10.29 16.2C10.1 16.58 9.76 16.68 9.67 16.66L9.67 16.66Z"/></g>`,
+    turboOff: `<g fill="currentColor" fill-rule="evenodd"><path d="M17.81 2.62L14.41 8.21C14.15 8.64 14.46 9.2 14.97 9.2L18.84 9.21C19.42 9.21 19.72 9.9 19.32 10.31L8.02 22.19C7.89 22.33 7.72 22.4 7.53 22.4L7.53 22.4C7.08 22.39 6.77 21.93 6.93 21.5L9.91 13.91C10.08 13.48 9.76 13.01 9.29 13.01L5.11 13.06C4.61 13.06 4.28 12.53 4.53 12.09L10.07 1.94C10.19 1.73 10.41 1.6 10.65 1.6L17.26 1.62C17.77 1.62 18.08 2.18 17.81 2.62L17.81 2.62Z"/></g>`,
+    chevronUp: `<g fill="currentColor" fill-rule="evenodd"><path d="M21.68 17.49L21.68 17.49C20.97 18.2 19.81 18.2 19.1 17.49L13.29 11.68C12.58 10.97 11.42 10.97 10.71 11.68L4.9 17.49C4.19 18.21 3.03 18.21 2.31 17.49L2.31 17.49C1.6 16.78 1.6 15.62 2.31 14.91L9.42 7.8L9.42 7.8L10.71 6.51C11.42 5.79 12.58 5.79 13.29 6.51L21.69 14.9C22.4 15.62 22.4 16.77 21.69 17.49L21.69 17.49Z"/></g>`,
+    chevronDown: `<g fill="currentColor" fill-rule="evenodd"><path d="M2.32 6.51L2.32 6.51C3.03 5.8 4.19 5.8 4.9 6.51L10.71 12.32C11.42 13.03 12.58 13.03 13.29 12.32L19.1 6.51C19.82 5.79 20.97 5.79 21.69 6.51L21.69 6.51C22.4 7.22 22.4 8.38 21.69 9.09L14.58 16.19L14.58 16.2L13.29 17.49C12.58 18.21 11.42 18.21 10.71 17.49L2.31 9.1C1.6 8.38 1.6 7.23 2.31 6.51L2.32 6.51L2.32 6.51Z"/></g>`,
 };
 /** A standalone, parseable SVG document with `currentColor` resolved to `color`.
  *  Used by the Pixi renderer to build vector geometry via GraphicsContext.svg(). */
@@ -2348,10 +2696,10 @@ class IconView extends pixi_js.Container {
     gfx;
     _size;
     _color;
-    iconName;
+    _iconName;
     constructor(name, size, color = '#ffffff') {
         super();
-        this.iconName = name;
+        this._iconName = name;
         this._size = size;
         this._color = color;
         this.gfx = new pixi_js.Graphics(context(name, color));
@@ -2367,11 +2715,22 @@ class IconView extends pixi_js.Container {
     get size() {
         return this._size;
     }
+    get iconName() {
+        return this._iconName;
+    }
     setColor(color) {
         if (color === this._color)
             return;
         this._color = color;
-        this.gfx.context = context(this.iconName, color);
+        this.gfx.context = context(this._iconName, color);
+    }
+    /** Swap the glyph in place (e.g. the menu's sound row flips soundOn/soundOff on toggle) — same
+     *  cached-context rebuild as setColor, keyed on the new name instead of a new colour. */
+    setIcon(name) {
+        if (name === this._iconName)
+            return;
+        this._iconName = name;
+        this.gfx.context = context(name, this._color);
     }
     setSize(size) {
         if (size === this._size)
@@ -3103,6 +3462,11 @@ class BottomBar extends pixi_js.Container {
     spin;
     autoBtn;
     turboBtn;
+    menuBtn;
+    /** 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). */
+    plateRect = null;
     constructor(host) {
         super();
         this.host = host;
@@ -3112,6 +3476,58 @@ class BottomBar extends pixi_js.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() {
+        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() {
+        // 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() {
+        // 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 ──────────────────────────────────────────────────────
     buildWide() {
         const { state, tokens } = this.host;
@@ -3122,13 +3538,14 @@ class BottomBar extends pixi_js.Container {
         this.buy = isBase ? (this.buildBuy(BUY_W, 13, 3) ?? undefined) : undefined;
         // LEFT info group: menu · balance · (Total win) · (Win)
         const left = new FlexBox({ direction: 'row', align: 'center', gap: ZONE_GAP });
-        left.add(new IconButton('menu', {
+        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;
@@ -3317,6 +3734,7 @@ class BottomBar extends pixi_js.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', {
@@ -3552,6 +3970,8 @@ class BottomBar extends pixi_js.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);
@@ -3584,6 +4004,18 @@ class BottomBar extends pixi_js.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);
         this.inner.position.set((W - rowW * s) / 2, H - localBottom * s - M_PAD_BOTTOM);
@@ -3614,7 +4046,8 @@ class ScrollBox extends pixi_js.Container {
         this.canvas = canvas;
         this.addChild(this.content);
         // maskG is added to the scene only while scrolling (see refresh) — a leftover unused mask
-        // graphic renders as a white rect, and a masked container blocks pointer events to its children.
+        // graphic renders as a white rect. (Masking does NOT gate pointer events to the content, despite
+        // what an earlier version of this comment claimed — see the correction in refresh() below.)
         this.eventMode = 'static';
         this.on('pointerdown', this.onDown);
         this.on('globalpointermove', this.onMove);
@@ -3648,10 +4081,13 @@ class ScrollBox extends pixi_js.Container {
         const b = this.content.getLocalBounds();
         const contentH = b.height + b.y; // content laid out from y≈0 downward
         this.maxScroll = Math.max(0, contentH - this.viewH);
-        // Only clip + grab pointer/drag when the content actually overflows: a masked container blocks
-        // pointer events to its children in Pixi v8, so when it fits we leave it unmasked and passive →
-        // interactive controls (settings sliders/buttons) work. Tall scrolling content (game info) that
-        // does get masked has no interactive children, so nothing is lost there.
+        // Only clip + grab pointer/drag when the content actually overflows. (An earlier version of this
+        // comment claimed a masked container blocks pointer events to its children in Pixi v8 — that's
+        // false: EventBoundary's hitPruneFn only prunes a point OUTSIDE the mask/hitArea, so interactive
+        // children stay reachable anywhere inside the visible viewport; see tests/pixi/bet-picker-fit.test.ts
+        // and tests/pixi/menu.test.ts, which hit-test an overflowing, masked list on purpose to prove it.
+        // We still only mask + grab the pointer when scrollable, since an unmasked, passive box is
+        // simpler and cheaper when there's nothing to clip or drag.)
         const scrollable = this.maxScroll > 0;
         if (scrollable) {
             this.addChild(this.maskG);
@@ -3711,152 +4147,135 @@ class ScrollBox extends pixi_js.Container {
     }
 }
 
-function clamp(min, pref, max) {
-    return Math.max(min, Math.min(max, pref));
-}
-/** Small rounded icon nav button — the overlay header back/close and row chevrons.
- *  `.ge-ov-nav`: 32×32, radius 9, plaque-dark bg, white icon, hover → glass bg + accent icon. */
-function navButton(host, iconName, onTap, size = 32) {
-    const root = new pixi_js.Container();
-    const bg = new pixi_js.Graphics();
-    const draw = (hover) => {
-        bg.clear();
-        bg.roundRect(0, 0, size, size, 9);
-        bg.fill(hover ? host.tokens.plaqueGlass : host.tokens.plaqueDark);
-    };
-    draw(false);
-    const gs = Math.round(size * 0.5625); // glyph tracks the box (default 32 → 18, unchanged)
-    const glyph = makeIcon(iconName, gs, '#ffffff');
-    glyph.position.set((size - gs) / 2, (size - gs) / 2);
-    root.addChild(bg, glyph);
-    root.eventMode = 'static';
-    root.cursor = 'pointer';
-    root.hitArea = new pixi_js.Rectangle(0, 0, size, size);
-    attachHover(root, () => {
-        draw(true);
-        glyph.setColor(host.tokens.accent);
-    }, () => {
-        draw(false);
-        glyph.setColor('#ffffff');
-    });
-    attachPress(root, 0.92, onTap);
-    return root;
-}
-/** Full-screen overlay: frosted dark veil, fixed header (title + back/close), scrolling body.
- *  The body is rebuilt on resize so it reflows like the CSS overlay. */
-class Overlay extends pixi_js.Container {
+/** Light-dismiss popover: a transparent full-screen hit rect + a rounded card with an arrow.
+ *  No veil, no frosted snapshot — the game stays visible and unblurred behind it. */
+class Popover extends pixi_js.Container {
     tag;
+    dismissLayer = new pixi_js.Graphics();
+    card = new pixi_js.Container();
+    bg = new pixi_js.Graphics();
+    arrow = new pixi_js.Graphics();
+    scroll;
     host;
     opts;
-    veil = new pixi_js.Graphics();
-    header = new pixi_js.Container();
-    scroll;
-    titleNode = new pixi_js.Container();
-    nav = new pixi_js.Container();
-    w = 0;
-    h = 0;
-    headerH = 44;
-    /** Expose the scroll box for keyboard/test access. */
-    get scrollContent() { return this.scroll; }
+    _cardX = 0;
+    _cardY = 0;
+    _cardW = 0;
+    _arrowX = -1;
     constructor(host, opts) {
         super();
         this.host = host;
         this.opts = opts;
         this.tag = opts.tag;
         this.scroll = new ScrollBox(host.canvas);
-        this.addChild(this.veil, this.scroll, this.header);
-        this.veil.eventMode = 'static'; // swallow clicks to the game behind
+        this.card.addChild(this.bg, this.arrow, this.scroll);
+        this.addChild(this.dismissLayer, this.card);
+        this.dismissLayer.eventMode = 'static';
+        this.dismissLayer.on('pointertap', () => this.opts.onClose());
+        // Taps on the card must not fall through to the dismiss layer.
+        this.card.eventMode = 'static';
+        // `e` itself is undefined when a caller (or test) emits the event with no payload, so guard the
+        // property access, not just the call.
+        this.card.on('pointertap', (e) => e?.stopPropagation?.());
         this.resize(host.screenW, host.screenH);
     }
+    get cardX() { return this._cardX; }
+    get cardY() { return this._cardY; }
+    get cardWidth() { return this._cardW; }
+    get arrowX() { return this._arrowX; }
+    get arrowVisible() { return this.arrow.visible; }
     resize(w, h) {
-        this.w = w;
-        this.h = h;
-        const vh = h / 100;
-        this.headerH = clamp(40, 6.4 * vh, 52);
-        // veil
-        this.veil.clear();
-        this.veil.rect(0, 0, w, h);
-        this.veil.fill(this.host.tokens.backdrop);
-        this.veil.hitArea = new pixi_js.Rectangle(0, 0, w, h);
-        this.buildHeader();
-        this.layoutBody();
-    }
-    buildHeader() {
-        this.header.removeChildren().forEach((c) => c.destroy({ children: true }));
-        const pad = 10;
-        // back or spacer (left), centred title, close (right)
-        const left = this.opts.onBack
-            ? navButton(this.host, 'back', () => this.opts.onBack())
-            : new pixi_js.Container();
-        const close = navButton(this.host, 'close', () => this.opts.onClose());
-        const titleSize = clamp(13, 2.6 * (this.h / 100), 16);
-        const title = makeText(this.opts.title, {
-            size: titleSize,
-            weight: '800',
-            color: '#ffffff',
-            letterSpacing: titleSize * 0.04,
-            upper: true,
-            align: 'center',
-        });
-        title.anchor.set(0.5);
-        title.position.set(this.w / 2, this.headerH / 2 + pad / 2);
-        left.position.set(pad, (this.headerH - 32) / 2 + pad / 2);
-        close.position.set(this.w - 32 - pad, (this.headerH - 32) / 2 + pad / 2);
-        this.header.addChild(title, left, close);
-    }
-    layoutBody() {
-        const top = this.headerH + 6;
-        const sidePad = clamp(16, 4 * (this.w / 100), 24);
-        const vPad = clamp(6, 2 * (this.h / 100), 16);
-        const bodyW = Math.min(800, this.w - sidePad * 2);
-        this.scroll.position.set(0, top);
-        this.scroll.setViewport(this.w, this.h - top);
-        this.scroll.content.removeChildren().forEach((c) => c.destroy({ children: true }));
-        const content = this.opts.build(bodyW);
+        this.dismissLayer.clear();
+        this.dismissLayer.rect(0, 0, w, h).fill({ color: 0x000000, alpha: 0 });
+        this.dismissLayer.hitArea = new pixi_js.Rectangle(0, 0, w, h);
+        const s = this.opts.scale?.() ?? 1;
+        const pad = 8;
+        // Width is content-driven (spec: clamped to [220, min(320, surfaceWidth-16)]), so the real
+        // content has to be measured before we know the final width to lay it out at. Probe-build once
+        // at the SMALLEST allowed inner width purely to measure natural size, then throw that copy away
+        // and build the kept one at the resolved final width. Measured in LOCAL (unscaled) units, like
+        // every other Pixi size in this file — `s` only converts to screen units where placement needs
+        // it (the card carries the scale as a single transform, same as the DOM's card).
+        //
+        // The probe deliberately measures at the MINIMUM, not the maximum: a decorative row (the menu's
+        // separator) draws its divider line at exactly the width `build()` is called with — it has no
+        // content-driven size of its own, unlike every real row, which ignores that parameter and sizes
+        // from its icon/label/control regardless. Probing at the maximum would make that separator line
+        // alone measure near-maximum and dominate `naturalWidth`, pegging the card at ~maxW for every
+        // menu that has a separator — which the default menu always does. Probing at the minimum cannot
+        // distort the result the other way: content narrower than the probe still clamps to minW either
+        // way (nothing above changes), and content wider than the probe always wins the max() the layout
+        // takes over row widths, so real content still drives growth past minW correctly.
+        const probeW = POPOVER.minW - pad * 2;
+        const probe = this.opts.build(probeW);
+        const measured = probe instanceof FlexBox ? probe.measureSize().w : probe.getSize().width;
+        probe.destroy({ children: true });
+        // Resolve the ON-SCREEN width (screen units, clamped against the surface), then convert back to
+        // LOCAL for the actual content layout — mirrors the DOM's naturalW·s → resolvedW → style.width÷s.
+        const screenW = popoverWidth(w, (measured + pad * 2) * s);
+        const localW = s > 0 ? screenW / s : screenW;
+        const content = this.opts.build(localW - pad * 2);
         if (content instanceof FlexBox)
-            content.setLayoutSize(bodyW, undefined);
-        content.position.set((this.w - bodyW) / 2, vPad);
+            content.setLayoutSize(localW - pad * 2, undefined);
+        const contentH = content.getSize().height; // local units
+        // The plate falls back to the pointer when it can't be resolved (no distinct plaque), and to the
+        // centred/arrow-less layout when neither resolves — placePopover itself already defaults the
+        // ARROW to `pointer ?? plate`, so passing the pointer through unconditionally is enough there.
+        // A DEGENERATE (fully zero-sized) plate counts as unresolved too, matching the DOM renderer's
+        // rectOf(): `??` only falls through on null/undefined, so a real-but-{w:0,h:0} rect (e.g. read
+        // before the bar's first layout pass) would otherwise silently win over a perfectly good pointer.
+        const pointerRect = this.opts.pointer?.() ?? null;
+        const rawPlate = this.opts.plate();
+        const plateRect = rawPlate && !(rawPlate.w <= 0 && rawPlate.h <= 0) ? rawPlate : pointerRect;
+        const p = placePopover(plateRect, { w, h }, { w: screenW, h: (contentH + pad * 2) * s }, pointerRect);
+        const maxHLocal = s > 0 ? p.maxH / s : p.maxH;
+        const cardH = Math.min(contentH + pad * 2, maxHLocal); // local units
+        this.scroll.content.removeChildren().forEach((c) => c.destroy({ children: true }));
+        this.scroll.position.set(pad, pad);
+        this.scroll.setViewport(localW - pad * 2, cardH - pad * 2);
         this.scroll.content.addChild(content);
         this.scroll.refresh();
-    }
-    /** Handle keyboard navigation while this overlay is the top layer. */
+        this.bg.clear();
+        this.bg.roundRect(0, 0, localW, cardH, 18);
+        this.bg.fill(this.host.tokens.plaqueDark);
+        // Arrow: a 14×7 triangle (local units — it lives inside the scaled card) on the edge that faces
+        // the plate.
+        this.arrow.clear();
+        this.arrow.visible = p.arrowX >= 0;
+        if (this.arrow.visible) {
+            const arrowXLocal = s > 0 ? p.arrowX / s : p.arrowX;
+            const edge = p.below ? 0 : cardH; // the card edge the arrow sits on
+            const tip = p.below ? -7 : cardH + 7; // the tip, pointing at the pointer (or the plate)
+            this.arrow.moveTo(arrowXLocal - 7, edge);
+            this.arrow.lineTo(arrowXLocal + 7, edge);
+            this.arrow.lineTo(arrowXLocal, tip);
+            this.arrow.fill(this.host.tokens.plaqueDark);
+        }
+        // The card carries the scale as ONE transform around its own (0,0) local origin — equivalent to
+        // the DOM's transform-origin:top left — so `p.x`/`p.y` (screen units) remain its visual top-left
+        // regardless of `s`, and every local size above (background rect, scroll viewport, arrow) scales
+        // with it automatically.
+        this.card.scale.set(s);
+        this.card.position.set(p.x, p.y);
+        this._cardX = p.x;
+        this._cardY = p.y;
+        this._cardW = screenW;
+        this._arrowX = p.arrowX;
+    }
+    /** Arrow keys scroll a long list; everything else (Escape included) goes to the controller. */
     onKey(e) {
-        const viewH = this.h - (this.headerH + 6); // body viewport height
-        const lineStep = 60;
-        const pageStep = Math.floor(viewH * 0.9);
-        switch (e.code) {
-            case 'ArrowDown':
-                this.scroll.scrollBy(lineStep);
-                return true;
-            case 'ArrowUp':
-                this.scroll.scrollBy(-lineStep);
-                return true;
-            case 'PageDown':
-                this.scroll.scrollBy(pageStep);
-                return true;
-            case 'PageUp':
-                this.scroll.scrollBy(-pageStep);
-                return true;
-            case 'Space':
-                if (e.shiftKey) {
-                    this.scroll.scrollBy(-pageStep);
-                }
-                else {
-                    this.scroll.scrollBy(pageStep);
-                }
-                return true;
-            case 'Home':
-                this.scroll.scrollBy(-999999);
-                return true;
-            case 'End':
-                this.scroll.scrollBy(999999);
-                return true;
-            default:
-                return false;
+        if (e.code === 'ArrowDown') {
+            this.scroll.scrollBy(40);
+            return true;
         }
+        if (e.code === 'ArrowUp') {
+            this.scroll.scrollBy(-40);
+            return true;
+        }
+        return false;
     }
     fit() {
-        /* overlays scroll; no card fit needed */
+        this.resize(this.host.screenW, this.host.screenH);
     }
     onRemove() {
         this.scroll.destroy({ children: true });
@@ -3982,6 +4401,49 @@ class Slider extends pixi_js.Container {
         return { w: this.w, h: 24 };
     }
 }
+/** Pill switch — the Pixi twin of the DOM `.ge-toggle`. 42×24, knob 20, accent when on. */
+class Toggle extends pixi_js.Container {
+    track = new pixi_js.Graphics();
+    knob = new pixi_js.Graphics();
+    _value;
+    onChange;
+    accent;
+    offFill;
+    constructor(value, onChange, accent = '#8b5cf6', off = 'rgba(255,255,255,.22)') {
+        super();
+        this._value = value;
+        this.onChange = onChange;
+        this.accent = accent;
+        this.offFill = off;
+        this.addChild(this.track, this.knob);
+        this.eventMode = 'static';
+        this.cursor = 'pointer';
+        this.hitArea = new pixi_js.Rectangle(0, 0, 42, 24);
+        this.on('pointertap', () => this.onChange(!this._value));
+        this.paint();
+    }
+    get value() {
+        return this._value;
+    }
+    setValue(v) {
+        this._value = v;
+        this.paint();
+    }
+    paint() {
+        this.track.clear();
+        this.track.roundRect(0, 0, 42, 24, 12);
+        this.track.fill(this._value ? this.accent : this.offFill);
+        this.knob.clear();
+        this.knob.circle(this._value ? 30 : 12, 12, 10);
+        this.knob.fill('#ffffff');
+    }
+    measureSize() {
+        return { w: 42, h: 24 };
+    }
+    setLayoutSize() {
+        /* fixed size */
+    }
+}
 /** Picker chip — `.ge-chip`. Selected = accent bg + accent border. */
 class Chip extends pixi_js.Container {
     id;
@@ -4030,112 +4492,297 @@ class Chip extends pixi_js.Container {
     }
 }
 
-/** Settings overlay — sound on/off, volume sliders, and a Game info link. */
-function openSettings(host) {
-    return new Overlay(host, {
-        tag: 'settings',
-        title: host.t('Settings'),
+/** 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. */
+function openMenu(host, getAnchor, getPlate, getScale) {
+    const updaters = {};
+    const layer = new Popover(host, {
+        tag: 'menu',
+        plate: () => getPlate?.() ?? null,
+        pointer: () => getAnchor?.() ?? null,
+        scale: () => getScale?.() ?? 1,
         onClose: () => host.closeLayer(),
-        build: (w) => buildBody$1(host, w),
+        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) {
+    return makeText(text, { size: 13, weight: '600', color: '#ffffff' });
 }
-function buildBody$1(host, width) {
-    const col = new FlexBox({ direction: 'column', align: 'stretch', gap: 10 });
-    // Sound on/off — backed by the shell's shared `soundOn` state so this toggle and the Shift+M
-    // hotkey stay in sync; `setSound` emits `settingChange({ key: 'sound' })` and refreshes the icon.
-    const soundOn0 = host.soundOn ?? true;
-    const speaker = new IconButton(soundOn0 ? 'soundOn' : 'soundOff', {
-        size: 36,
-        glyph: 24,
-        color: host.tokens.plaqueLabel,
-        hover: host.tokens.accent,
-        activeColor: '#ffffff',
-        active: soundOn0,
-        onTap: () => host.setSound?.(!(host.soundOn ?? true)),
+function rowBox(host, name, column = false) {
+    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 },
     });
-    // Live-update the speaker when sound changes from here OR via Shift+M (shell clears on close).
-    host.setSoundRefresh?.((on) => {
-        if (speaker.destroyed)
-            return; // overlay torn down but refresher not yet cleared (push-over edge)
-        speaker.setIcon(on ? 'soundOn' : 'soundOff');
-        speaker.active = on;
+    box.label = name;
+    return box;
+}
+function buildRow(host, row, width, updaters) {
+    if (row.kind === 'separator') {
+        const sep = new pixi_js.Container();
+        sep.label = 'menu-sep';
+        const line = new pixi_js.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) => (row.max === row.min ? 0 : (v - row.min) / (row.max - row.min));
+    const fromUnit = (u) => {
+        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);
     });
-    col.add(glassRow(host, [textNode(host, host.t('Sound')), new Spacer(), speaker]));
-    // Volume sliders — positions read from the shell's stored volumes (stateful across opens); the
-    // registered refreshers let `host.setVolume()` from game code move the thumbs live.
-    const updaters = {};
-    col.add(sliderRow(host, width, 'master', host.t('Master volume'), updaters));
-    col.add(sliderRow(host, width, 'music', host.t('Music'), updaters));
-    col.add(sliderRow(host, width, 'sfx', host.t('SFX'), updaters));
-    host.setVolumeRefresh?.((key, v) => updaters[key]?.(v));
-    // Game info link
-    const infoIcon = makeIcon('info', 22, '#ffffff');
-    const infoLabel = textNode(host, host.t('Game info'));
-    const chevron = makeIcon('chevronRight', 20, host.tokens.muted);
-    const infoRow = glassRow(host, [infoIcon, infoLabel, new Spacer(), chevron], { button: true, onTap: () => host.actions.openInfo() });
-    col.add(infoRow);
-    return col;
+    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;
 }
-function textNode(host, text) {
-    return makeText(text, { size: 14, weight: '600', color: '#ffffff' });
+
+function clamp(min, pref, max) {
+    return Math.max(min, Math.min(max, pref));
 }
-/** A full-width glass row holding the given children (label/controls), align-centred. */
-function glassRow(host, children, opts = {}) {
-    const row = new FlexBox({
-        direction: 'row',
-        align: 'center',
-        gap: 12,
-        // .ge-ov-row { padding: clamp(11px,2.2vh,15px) 16px } — 15 at desktop; minHeight matches the
-        // DOM row's effective height (driven by the tallest child's line box, not just the em box).
-        padding: { top: 15, bottom: 15, left: 16, right: 16 },
-        minHeight: 60,
-        background: { fill: host.tokens.plaqueGlass, radius: 16 },
+/** Small rounded icon nav button — the overlay header back/close and row chevrons.
+ *  `.ge-ov-nav`: 32×32, radius 9, plaque-dark bg, white icon, hover → glass bg + accent icon. */
+function navButton(host, iconName, onTap, size = 32) {
+    const root = new pixi_js.Container();
+    const bg = new pixi_js.Graphics();
+    const draw = (hover) => {
+        bg.clear();
+        bg.roundRect(0, 0, size, size, 9);
+        bg.fill(hover ? host.tokens.plaqueGlass : host.tokens.plaqueDark);
+    };
+    draw(false);
+    const gs = Math.round(size * 0.5625); // glyph tracks the box (default 32 → 18, unchanged)
+    const glyph = makeIcon(iconName, gs, '#ffffff');
+    glyph.position.set((size - gs) / 2, (size - gs) / 2);
+    root.addChild(bg, glyph);
+    root.eventMode = 'static';
+    root.cursor = 'pointer';
+    root.hitArea = new pixi_js.Rectangle(0, 0, size, size);
+    attachHover(root, () => {
+        draw(true);
+        glyph.setColor(host.tokens.accent);
+    }, () => {
+        draw(false);
+        glyph.setColor('#ffffff');
     });
-    for (const c of children)
-        row.add(c, c instanceof Spacer ? { grow: 1 } : {});
-    if (opts.button) {
-        row.setInteractive(true); // full-box hit area — hover + tap across the whole row, not just the icon/label
-        if (opts.onTap)
-            row.on('pointertap', opts.onTap);
-        // hover: brighter glass + accent text (DOM button.ge-ov-row:hover)
-        const texts = children.filter((c) => c instanceof pixi_js.Text);
-        const orig = texts.map((t) => t.style.fill);
-        attachHover(row, () => {
-            row.setBgFill(host.tokens.plaqueGlassHover);
-            texts.forEach((t) => (t.style.fill = host.tokens.accent));
-        }, () => {
-            row.setBgFill(host.tokens.plaqueGlass);
-            texts.forEach((t, i) => (t.style.fill = orig[i]));
+    attachPress(root, 0.92, onTap);
+    return root;
+}
+/** Full-screen overlay: frosted dark veil, fixed header (title + back/close), scrolling body.
+ *  The body is rebuilt on resize so it reflows like the CSS overlay. */
+class Overlay extends pixi_js.Container {
+    tag;
+    host;
+    opts;
+    veil = new pixi_js.Graphics();
+    header = new pixi_js.Container();
+    scroll;
+    titleNode = new pixi_js.Container();
+    nav = new pixi_js.Container();
+    w = 0;
+    h = 0;
+    headerH = 44;
+    /** Expose the scroll box for keyboard/test access. */
+    get scrollContent() { return this.scroll; }
+    constructor(host, opts) {
+        super();
+        this.host = host;
+        this.opts = opts;
+        this.tag = opts.tag;
+        this.scroll = new ScrollBox(host.canvas);
+        this.addChild(this.veil, this.scroll, this.header);
+        this.veil.eventMode = 'static'; // swallow clicks to the game behind
+        this.resize(host.screenW, host.screenH);
+    }
+    resize(w, h) {
+        this.w = w;
+        this.h = h;
+        const vh = h / 100;
+        this.headerH = clamp(40, 6.4 * vh, 52);
+        // veil
+        this.veil.clear();
+        this.veil.rect(0, 0, w, h);
+        this.veil.fill(this.host.tokens.backdrop);
+        this.veil.hitArea = new pixi_js.Rectangle(0, 0, w, h);
+        this.buildHeader();
+        this.layoutBody();
+    }
+    buildHeader() {
+        this.header.removeChildren().forEach((c) => c.destroy({ children: true }));
+        const pad = 10;
+        // back or spacer (left), centred title, close (right)
+        const left = this.opts.onBack
+            ? navButton(this.host, 'back', () => this.opts.onBack())
+            : new pixi_js.Container();
+        const close = navButton(this.host, 'close', () => this.opts.onClose());
+        const titleSize = clamp(13, 2.6 * (this.h / 100), 16);
+        const title = makeText(this.opts.title, {
+            size: titleSize,
+            weight: '800',
+            color: '#ffffff',
+            letterSpacing: titleSize * 0.04,
+            upper: true,
+            align: 'center',
         });
+        title.anchor.set(0.5);
+        title.position.set(this.w / 2, this.headerH / 2 + pad / 2);
+        left.position.set(pad, (this.headerH - 32) / 2 + pad / 2);
+        close.position.set(this.w - 32 - pad, (this.headerH - 32) / 2 + pad / 2);
+        this.header.addChild(title, left, close);
+    }
+    layoutBody() {
+        const top = this.headerH + 6;
+        const sidePad = clamp(16, 4 * (this.w / 100), 24);
+        const vPad = clamp(6, 2 * (this.h / 100), 16);
+        const bodyW = Math.min(800, this.w - sidePad * 2);
+        this.scroll.position.set(0, top);
+        this.scroll.setViewport(this.w, this.h - top);
+        this.scroll.content.removeChildren().forEach((c) => c.destroy({ children: true }));
+        const content = this.opts.build(bodyW);
+        if (content instanceof FlexBox)
+            content.setLayoutSize(bodyW, undefined);
+        content.position.set((this.w - bodyW) / 2, vPad);
+        this.scroll.content.addChild(content);
+        this.scroll.refresh();
+    }
+    /** Handle keyboard navigation while this overlay is the top layer. */
+    onKey(e) {
+        const viewH = this.h - (this.headerH + 6); // body viewport height
+        const lineStep = 60;
+        const pageStep = Math.floor(viewH * 0.9);
+        switch (e.code) {
+            case 'ArrowDown':
+                this.scroll.scrollBy(lineStep);
+                return true;
+            case 'ArrowUp':
+                this.scroll.scrollBy(-lineStep);
+                return true;
+            case 'PageDown':
+                this.scroll.scrollBy(pageStep);
+                return true;
+            case 'PageUp':
+                this.scroll.scrollBy(-pageStep);
+                return true;
+            case 'Space':
+                if (e.shiftKey) {
+                    this.scroll.scrollBy(-pageStep);
+                }
+                else {
+                    this.scroll.scrollBy(pageStep);
+                }
+                return true;
+            case 'Home':
+                this.scroll.scrollBy(-999999);
+                return true;
+            case 'End':
+                this.scroll.scrollBy(999999);
+                return true;
+            default:
+                return false;
+        }
+    }
+    fit() {
+        /* overlays scroll; no card fit needed */
+    }
+    onRemove() {
+        this.scroll.destroy({ children: true });
     }
-    return row;
-}
-/** A column row: head (label + live % value) over a draggable slider. */
-function sliderRow(host, bodyWidth, key, label, updaters) {
-    const row = new FlexBox({
-        direction: 'column',
-        align: 'stretch',
-        gap: 10,
-        padding: { top: 15, bottom: 15, left: 16, right: 16 },
-        background: { fill: host.tokens.plaqueGlass, radius: 16 },
-    });
-    const head = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between' });
-    const initial = host.getVolume(key);
-    const valueText = makeText(`${Math.round(initial * 100)}%`, { size: 13, weight: '700', color: host.tokens.plaqueLabel });
-    head.add(makeText(label, { size: 14, weight: '600', color: '#ffffff' }));
-    head.add(new Spacer(), { grow: 1 });
-    head.add(valueText);
-    const slider = new Slider(host, initial, (v) => {
-        valueText.text = `${Math.round(v * 100)}%`;
-        host.setVolume(key, v);
-    });
-    updaters[key] = (v) => {
-        valueText.text = `${Math.round(v * 100)}%`;
-        slider.setValue(v);
-    };
-    row.add(head);
-    row.add(slider);
-    return row;
 }
 
 /** Default order key for the auto-injected hotkeys section: just after `controls` (-1). */
@@ -4148,7 +4795,7 @@ function openGameInfo(host) {
         onClose: () => host.closeLayer(),
         onBack: () => {
             host.closeLayer();
-            host.actions.openSettings();
+            host.actions.openMenu();
         },
         build: (w) => buildBody(host, w),
     });
@@ -5955,6 +6602,15 @@ class PixiRenderer {
         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() {
         this.renderBar();
@@ -5988,8 +6644,13 @@ class PixiRenderer {
     openOverlay(req) {
         let layer = 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);
@@ -6012,7 +6673,7 @@ class PixiRenderer {
         }
         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,
@@ -6022,10 +6683,6 @@ class PixiRenderer {
     closeOverlay() {
         this.closeLayer();
     }
-    refreshSoundIcon(_on) {
-        // 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() {
         if (this.destroyed)
@@ -6049,9 +6706,12 @@ class PixiRenderer {
         });
     }
     // ── layer stack ────────────────────────────────────────────────────────────
-    pushLayer(node) {
+    pushLayer(node, opts) {
         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();
@@ -6173,6 +6833,7 @@ class PixiRenderer {
             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),
@@ -6180,17 +6841,18 @@ class PixiRenderer {
             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; },
             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.
@@ -6225,16 +6887,24 @@ function removePixiShell() {
 }
 
 exports.DEFAULT_ACCENT = DEFAULT_ACCENT;
+exports.DEFAULT_MENU = DEFAULT_MENU;
 exports.PACKAGE_VERSION = PACKAGE_VERSION;
+exports.POPOVER = POPOVER;
 exports.PixiRenderer = PixiRenderer;
 exports.SCHEMES = SCHEMES;
 exports.ShellController = ShellController;
 exports.createI18n = createI18n;
 exports.createPixiShell = createPixiShell;
 exports.createShell = createShell;
+exports.isPresetId = isPresetId;
 exports.normalizeLang = normalizeLang;
+exports.placePopover = placePopover;
+exports.popoverWidth = popoverWidth;
+exports.rangeBounds = rangeBounds;
 exports.removePixiShell = removePixiShell;
 exports.resolveConfig = resolveConfig;
+exports.resolveMenu = resolveMenu;
 exports.resolveTheme = resolveTheme;
+exports.seedMenuValues = seedMenuValues;
 exports.socialize = socialize;
 //# sourceMappingURL=pixi.cjs.js.map