@energy8platform/shell 0.4.1 → 0.6.0

package/dist/pixi.esm.js

@@ -64,9 +64,19 @@ function createInitialState(config) {
         turbo: 0,
         buyBonusEnabled: true,
         freeSpins: { current: 0, total: 0, totalWin: 0 },
+        bonus: null,
         activeFeature: null,
+        volumes: {
+            master: clampVolume(config.volumes?.master),
+            music: clampVolume(config.volumes?.music),
+            sfx: clampVolume(config.volumes?.sfx),
+        },
     };
 }
+/** Clamp a configured volume to 0..1, defaulting to full (1) when unset/invalid. */
+function clampVolume(v) {
+    return typeof v === 'number' && Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1;
+}
 /** Step bet up/down within availableBets, clamped at the ends. */
 function stepBet(state, direction) {
     const idx = state.availableBets.indexOf(state.bet);
@@ -1437,7 +1447,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.4.1';
+const PACKAGE_VERSION = '0.6.0';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -1454,6 +1464,7 @@ function resolveConfig(config) {
         features: config.features,
         theme: config.theme,
         onBonusBuy: config.onBonusBuy,
+        volumes: config.volumes,
         version: config.version ?? '1.0.0',
         isSocial: config.isSocial ?? false,
         replay: config.replay ?? config.mode === 'replay',
@@ -1475,6 +1486,7 @@ class ShellController extends EventEmitter {
     kbd;
     overlay = null;
     soundRefresh = null;
+    volumeRefresh = null;
     prevBalance;
     prevWin;
     destroyed = false;
@@ -1498,9 +1510,15 @@ class ShellController extends EventEmitter {
         this.renderer.renderBar();
     }
     // ── ShellHost ──────────────────────────────────────────────────────────────
-    t(text) { return this.i18n.t(text); }
-    formatCurrency(n, win = false) { return formatCurrency(n, this.config.currency, win); }
-    formatWin(value) { return this.formatCurrency(value, true); }
+    t(text) {
+        return this.i18n.t(text);
+    }
+    formatCurrency(n, win = false) {
+        return formatCurrency(n, this.config.currency, win);
+    }
+    formatWin(value) {
+        return this.formatCurrency(value, true);
+    }
     notifyResize(w, h) {
         const layout = w !== 0 && h > w ? 'mobile' : 'wide';
         if (layout !== this.layout) {
@@ -1567,12 +1585,24 @@ class ShellController extends EventEmitter {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const self = this;
         const host = {
-            get state() { return self.state; },
-            get hotkeysEnabled() { return self.config.features.hotkeys !== false; },
-            get spacebarEnabled() { return self.config.features.spacebar !== false; },
-            get turboLevels() { return self.config.features.turbo; },
-            get autoplayEnabled() { return self.config.features.autoplay != null; },
-            get buyBonusEnabled() { return self.config.features.buyBonus !== false; },
+            get state() {
+                return self.state;
+            },
+            get hotkeysEnabled() {
+                return self.config.features.hotkeys !== false;
+            },
+            get spacebarEnabled() {
+                return self.config.features.spacebar !== false;
+            },
+            get turboLevels() {
+                return self.config.features.turbo;
+            },
+            get autoplayEnabled() {
+                return self.config.features.autoplay != null;
+            },
+            get buyBonusEnabled() {
+                return self.config.features.buyBonus !== false;
+            },
             hasOpenLayer: () => self.overlay !== null,
             routeToLayer: (e) => self.overlay?.onKey?.(e) ?? false,
             spin: () => self.actions.spin(),
@@ -1588,33 +1618,59 @@ class ShellController extends EventEmitter {
         this.kbd = new KeyboardController(host);
         this.kbd.attach();
     }
-    pullFocus = () => { try {
-        globalThis.focus?.();
-    }
-    catch { /* cross-origin */ } };
+    pullFocus = () => {
+        try {
+            globalThis.focus?.();
+        }
+        catch {
+            /* cross-origin */
+        }
+    };
     // ── overlay flow ─────────────────────────────────────────────────────────────
     show(req) {
         this.closeModal();
         this.overlay = this.renderer.openOverlay(req) ?? null;
     }
-    openMenu() { this.emit('menuOpen'); this.openSettings(); }
-    openSettings() { this.emit('settingsOpen'); this.show({ kind: 'settings' }); }
-    openInfo() { this.emit('infoOpen'); this.show({ kind: 'gameInfo' }); }
-    openBuyBonus() { if (this.config.onBonusBuy) {
-        this.config.onBonusBuy();
-        return;
-    } this.show({ kind: 'buyBonus' }); }
-    openBetPicker() { this.show({ kind: 'betPicker' }); }
-    openAutoplayPicker() { this.show({ kind: 'autoplayPicker' }); }
-    openReplay(opts) { if (this.destroyed)
-        return; this.show({ kind: 'replay', opts }); }
-    openModal(opts) { this.show({ kind: 'modal', opts }); }
+    openMenu() {
+        this.emit('menuOpen');
+        this.openSettings();
+    }
+    openSettings() {
+        this.emit('settingsOpen');
+        this.show({ kind: 'settings' });
+    }
+    openInfo() {
+        this.emit('infoOpen');
+        this.show({ kind: 'gameInfo' });
+    }
+    openBuyBonus() {
+        if (this.config.onBonusBuy) {
+            this.config.onBonusBuy();
+            return;
+        }
+        this.show({ kind: 'buyBonus' });
+    }
+    openBetPicker() {
+        this.show({ kind: 'betPicker' });
+    }
+    openAutoplayPicker() {
+        this.show({ kind: 'autoplayPicker' });
+    }
+    openReplay(opts) {
+        if (this.destroyed)
+            return;
+        this.show({ kind: 'replay', opts });
+    }
+    openModal(opts) {
+        this.show({ kind: 'modal', opts });
+    }
     /** Programmatically dismiss whatever overlay/modal is open. No-op when nothing is shown. */
     closeModal() {
         if (!this.overlay)
             return;
         this.overlay = null;
         this.soundRefresh = null;
+        this.volumeRefresh = null;
         this.renderer.closeOverlay();
     }
     // ── sound ──────────────────────────────────────────────────────────────────
@@ -1624,7 +1680,25 @@ class ShellController extends EventEmitter {
         this.soundRefresh?.(on);
         this.renderer.refreshSoundIcon?.(on);
     }
-    setSoundRefresh(fn) { this.soundRefresh = fn; }
+    setSoundRefresh(fn) {
+        this.soundRefresh = fn;
+    }
+    // ── 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. */
+    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;
+    }
     // ── features ─────────────────────────────────────────────────────────────────
     activateFeature(bonus) {
         this.state.activeFeature = bonus;
@@ -1645,21 +1719,81 @@ class ShellController extends EventEmitter {
         if (to !== from)
             this.renderer.animateMoney(field, from, to);
     }
-    setBalance(n) { const from = this.prevBalance; this.state.balance = n; this.prevBalance = n; this.money('balance', from, n); }
-    setWin(n) { const from = this.prevWin; this.state.win = n; this.prevWin = n; this.money('win', from, n); }
-    setBet(n) { this.state.bet = n; this.renderer.renderBar(); }
-    setMode(mode) { if (mode === 'replay')
-        this.state.replay = true; this.state.mode = mode; this.renderer.renderBar(); }
-    setBusy(busy) { this.state.busy = busy; this.renderer.renderBar(); this.kbd?.notifyBusyChanged(busy); }
-    setAutoplay(a) { this.state.autoplay = a; this.renderer.renderBar(); }
-    setTurbo(level) { this.state.turbo = level; this.renderer.renderBar(); }
-    setBuyBonusEnabled(enabled) { this.state.buyBonusEnabled = enabled; this.renderer.renderBar(); }
-    setFreeSpins(fs) { this.state.freeSpins = fs; this.renderer.renderBar(); }
-    setTheme(theme) { this.config.theme = theme; this.tokens = resolveTheme(theme); this.renderer.applyTheme(this.tokens); this.renderer.renderBar(); }
-    setLanguage(lang) { this.config.language = lang; this.i18n = createI18n({ language: lang, isSocial: this.config.isSocial }); this.renderer.renderBar(); }
-    setSocial(isSocial) { this.config.isSocial = isSocial; this.i18n = createI18n({ language: this.config.language, isSocial }); this.renderer.renderBar(); }
-    setLayout(layout) { if (layout === this.layout)
-        return; this.layout = layout; this.renderer.setLayout(layout); this.renderer.renderBar(); }
+    setBalance(n) {
+        const from = this.prevBalance;
+        this.state.balance = n;
+        this.prevBalance = n;
+        this.money('balance', from, n);
+    }
+    setWin(n) {
+        const from = this.prevWin;
+        this.state.win = n;
+        this.prevWin = n;
+        this.money('win', from, n);
+    }
+    setBet(n) {
+        this.state.bet = n;
+        this.renderer.renderBar();
+    }
+    setMode(mode) {
+        if (mode === 'replay')
+            this.state.replay = true;
+        this.state.mode = mode;
+        this.renderer.renderBar();
+    }
+    setBusy(busy) {
+        this.state.busy = busy;
+        this.renderer.renderBar();
+        this.kbd?.notifyBusyChanged(busy);
+    }
+    setAutoplay(a) {
+        this.state.autoplay = a;
+        this.renderer.renderBar();
+    }
+    setTurbo(level) {
+        this.state.turbo = level;
+        this.renderer.renderBar();
+    }
+    setBuyBonusEnabled(enabled) {
+        this.state.buyBonusEnabled = enabled;
+        this.renderer.renderBar();
+    }
+    setFreeSpins(fs) {
+        this.state.freeSpins = fs;
+        this.state.bonus = null;
+        this.renderer.renderBar();
+    }
+    /** Generic bonus readout (adventure / hold-and-spin / respins). Sets a game-supplied label+value
+     *  override for the bar hero and folds `totalWin` into the shared accumulator. Pairs with
+     *  `setMode('bonus')`. `setFreeSpins()` clears the override back to the derived current/total. */
+    setBonus(b) {
+        this.state.bonus = { label: b.label, value: b.value };
+        this.state.freeSpins = { ...this.state.freeSpins, totalWin: b.totalWin };
+        this.renderer.renderBar();
+    }
+    setTheme(theme) {
+        this.config.theme = theme;
+        this.tokens = resolveTheme(theme);
+        this.renderer.applyTheme(this.tokens);
+        this.renderer.renderBar();
+    }
+    setLanguage(lang) {
+        this.config.language = lang;
+        this.i18n = createI18n({ language: lang, isSocial: this.config.isSocial });
+        this.renderer.renderBar();
+    }
+    setSocial(isSocial) {
+        this.config.isSocial = isSocial;
+        this.i18n = createI18n({ language: this.config.language, isSocial });
+        this.renderer.renderBar();
+    }
+    setLayout(layout) {
+        if (layout === this.layout)
+            return;
+        this.layout = layout;
+        this.renderer.setLayout(layout);
+        this.renderer.renderBar();
+    }
     destroy() {
         if (this.destroyed)
             return Promise.resolve();
@@ -2922,8 +3056,12 @@ class TurboButton extends Container {
         this.accent = accent;
         this._paint(false);
     }
-    measureSize() { return { w: this.box, h: this.box }; }
-    setLayoutSize() { }
+    measureSize() {
+        return { w: this.box, h: this.box };
+    }
+    setLayoutSize() {
+        /* fixed */
+    }
 }
 /** A readout in the bar (white Oswald value, plaque-label caption, no shadow). */
 function readout(host, label, value, opts = {}) {
@@ -2971,13 +3109,19 @@ class BottomBar extends Container {
     buildWide() {
         const { state, tokens } = this.host;
         const isBase = state.mode === 'base';
-        const isFS = state.mode === 'freeSpins';
+        const isFS = state.mode === 'freeSpins' || state.mode === 'bonus';
         const showFsBlocks = isFS || (state.mode === 'replay' && state.freeSpins.total > 0);
         // BUY BONUS — floats outside-left of the panel (base only)
-        this.buy = isBase ? this.buildBuy(BUY_W, 13, 3) ?? undefined : undefined;
+        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', { size: 36, glyph: 30, color: '#ffffff', hover: tokens.accent, onTap: () => this.host.actions.openMenu() }));
+        left.add(new IconButton('menu', {
+            size: 36,
+            glyph: 30,
+            color: '#ffffff',
+            hover: tokens.accent,
+            onTap: () => this.host.actions.openMenu(),
+        }));
         if (!state.replay) {
             const bal = readout(this.host, 'Balance', this.host.fmt(state.balance));
             this.balanceValue = bal.valueText;
@@ -3016,16 +3160,30 @@ class BottomBar extends Container {
         if (isBase) {
             bet.eventMode = 'static';
             bet.cursor = 'pointer';
-            bet.on('pointertap', () => { if (!this.betLocked())
-                this.host.actions.openBetPicker(); });
+            bet.on('pointertap', () => {
+                if (!this.betLocked())
+                    this.host.actions.openBetPicker();
+            });
         }
         const betGroup = new FlexBox({ direction: 'row', align: 'center', gap: 8 });
         betGroup.add(bet);
         if (isBase) {
             // plain (borderless) +/- icons, bolder — stacked
             const step = new FlexBox({ direction: 'column', align: 'center', gap: 2 });
-            this.betUp = new IconButton('plus', { size: 24, glyph: 22, color: '#ffffff', hover: tokens.accent, onTap: () => this.onBet(1) });
-            this.betDown = new IconButton('minus', { size: 24, glyph: 22, color: '#ffffff', hover: tokens.accent, onTap: () => this.onBet(-1) });
+            this.betUp = new IconButton('plus', {
+                size: 24,
+                glyph: 22,
+                color: '#ffffff',
+                hover: tokens.accent,
+                onTap: () => this.onBet(1),
+            });
+            this.betDown = new IconButton('minus', {
+                size: 24,
+                glyph: 22,
+                color: '#ffffff',
+                hover: tokens.accent,
+                onTap: () => this.onBet(-1),
+            });
             step.add(this.betUp);
             step.add(this.betDown);
             betGroup.add(step);
@@ -3033,15 +3191,28 @@ class BottomBar extends Container {
         const spinWrap = new FlexBox({ direction: 'row', align: 'center', gap: 8 });
         if (isBase && config.features.autoplay) {
             this.autoBtn = new IconButton('autoplay', {
-                size: DISC, glyph: 25, disc: tokens.btn, color: tokens.btnInk, hover: tokens.accent, activeColor: tokens.accent,
-                active: state.autoplay.active, onTap: () => this.onAutoplay(),
+                size: DISC,
+                glyph: 25,
+                disc: tokens.btn,
+                color: tokens.btnInk,
+                hover: tokens.accent,
+                activeColor: tokens.accent,
+                active: state.autoplay.active,
+                onTap: () => this.onAutoplay(),
             });
             if (state.autoplay.active)
                 this.autoBtn.setGlow(true);
             spinWrap.add(this.autoBtn);
         }
         if (isBase) {
-            this.spin = new SpinDisc({ size: SPIN, glyph: 65, tokens, ticker: this.host.ticker, onSpin: () => this.host.actions.spin(), onStop: () => this.stopAutoplay() });
+            this.spin = new SpinDisc({
+                size: SPIN,
+                glyph: 65,
+                tokens,
+                ticker: this.host.ticker,
+                onSpin: () => this.host.actions.spin(),
+                onStop: () => this.stopAutoplay(),
+            });
             if (state.autoplay.active)
                 this.spin.setAutoplay(true, state.autoplay.remaining);
             if (state.busy)
@@ -3050,13 +3221,23 @@ class BottomBar extends Container {
         }
         else if (showFsBlocks) {
             const fs = state.freeSpins;
-            const fsText = fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`;
-            spinWrap.add(new FsHero({ label: this.host.t('Free spins'), value: fsText, tokens, height: SPIN }));
+            const fsText = state.bonus?.value ?? (fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`);
+            spinWrap.add(new FsHero({
+                label: this.host.t(state.bonus?.label ?? 'Free spins'),
+                value: fsText,
+                tokens,
+                height: SPIN,
+            }));
         }
         if (config.features.turbo > 0) {
             this.turboBtn = new TurboButton({
-                size: DISC, glyph: 19, discFill: tokens.btn, discBorder: 2, accent: tokens.accent,
-                level: state.turbo, onTap: () => this.onTurbo(),
+                size: DISC,
+                glyph: 19,
+                discFill: tokens.btn,
+                discBorder: 2,
+                accent: tokens.accent,
+                level: state.turbo,
+                onTap: () => this.onTurbo(),
             });
             spinWrap.add(this.turboBtn);
         }
@@ -3074,21 +3255,49 @@ class BottomBar extends Container {
         const feature = state.activeFeature;
         if (feature) {
             const accent = effectiveAccent(feature);
-            return new BuyBonusBadge({ size, fontSize, border, bg: accent, fg: contrastText(accent), label: this.host.t('DISABLE'), tokens, ticker: this.host.ticker, onTap: () => this.host.actions.deactivateFeature() });
+            return new BuyBonusBadge({
+                size,
+                fontSize,
+                border,
+                bg: accent,
+                fg: contrastText(accent),
+                label: this.host.t('DISABLE'),
+                tokens,
+                ticker: this.host.ticker,
+                onTap: () => this.host.actions.deactivateFeature(),
+            });
         }
-        return new BuyBonusBadge({ size, border, bg: tokens.accent, icon: 'ticket', iconSize: size * 0.55, iconColor: tokens.btnInk, label: '', tokens, ticker: this.host.ticker, onTap: () => this.host.actions.openBuyBonus() });
+        return new BuyBonusBadge({
+            size,
+            border,
+            bg: tokens.accent,
+            icon: 'ticket',
+            iconSize: size * 0.55,
+            iconColor: tokens.btnInk,
+            label: '',
+            tokens,
+            ticker: this.host.ticker,
+            onTap: () => this.host.actions.openBuyBonus(),
+        });
     }
     // ── mobile / portrait ─────────────────────────────────────────────────────
     buildMobile() {
         const { state, config, tokens } = this.host;
         const isBase = state.mode === 'base';
-        const isFS = state.mode === 'freeSpins';
+        const isFS = state.mode === 'freeSpins' || state.mode === 'bonus';
         const showFsBlocks = isFS || (state.mode === 'replay' && state.freeSpins.total > 0);
         const W = this.host.screenW - 2 * M_SIDE;
         // hero (centre): SPIN in base, FS counter in free spins
         let hero;
         if (isBase) {
-            this.spin = new SpinDisc({ size: SPIN, glyph: 65, tokens, ticker: this.host.ticker, onSpin: () => this.host.actions.spin(), onStop: () => this.stopAutoplay() });
+            this.spin = new SpinDisc({
+                size: SPIN,
+                glyph: 65,
+                tokens,
+                ticker: this.host.ticker,
+                onSpin: () => this.host.actions.spin(),
+                onStop: () => this.stopAutoplay(),
+            });
             if (state.autoplay.active)
                 this.spin.setAutoplay(true, state.autoplay.remaining);
             if (state.busy)
@@ -3097,25 +3306,58 @@ class BottomBar extends Container {
         }
         else if (showFsBlocks) {
             const fs = state.freeSpins;
-            const fsText = fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`;
-            hero = new FsHero({ label: this.host.t('Free spins'), value: fsText, tokens, height: SPIN });
+            const fsText = state.bonus?.value ?? (fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`);
+            hero = new FsHero({
+                label: this.host.t(state.bonus?.label ?? 'Free spins'),
+                value: fsText,
+                tokens,
+                height: SPIN,
+            });
         }
-        const menu = new IconButton('menu', { size: 40, glyph: 26, color: '#ffffff', hover: tokens.accent, onTap: () => this.host.actions.openMenu() });
+        const menu = new IconButton('menu', {
+            size: 40,
+            glyph: 26,
+            color: '#ffffff',
+            hover: tokens.accent,
+            onTap: () => this.host.actions.openMenu(),
+        });
         // 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', { size: 40, glyph: 26, color: '#ffffff', hover: tokens.accent, activeColor: tokens.accent, active: state.autoplay.active, onTap: () => this.onAutoplay() });
+            this.autoBtn = new IconButton('autoplay', {
+                size: 40,
+                glyph: 26,
+                color: '#ffffff',
+                hover: tokens.accent,
+                activeColor: tokens.accent,
+                active: state.autoplay.active,
+                onTap: () => this.onAutoplay(),
+            });
             if (state.autoplay.active)
                 this.autoBtn.setGlow(true);
         }
         if (config.features.turbo > 0) {
             this.turboBtn = new TurboButton({
-                size: 40, glyph: 22, discFill: tokens.btn, discBorder: 2, accent: tokens.accent,
-                level: state.turbo, onTap: () => this.onTurbo(),
+                size: 40,
+                glyph: 22,
+                discFill: tokens.btn,
+                discBorder: 2,
+                accent: tokens.accent,
+                level: state.turbo,
+                onTap: () => this.onTurbo(),
             });
         }
-        const buy = isBase ? this.buildBuy(M_BUY, 9, 2) ?? undefined : undefined;
+        const buy = isBase ? (this.buildBuy(M_BUY, 9, 2) ?? undefined) : undefined;
         // level 1 — controls bar (dark)
-        const controls = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between', gap: 0, width: W, height: M_CTRL_H, padding: { left: 18, right: 18 }, background: { fill: tokens.bar, radius: 16 } });
+        const controls = new FlexBox({
+            direction: 'row',
+            align: 'center',
+            justify: 'space-between',
+            gap: 0,
+            width: W,
+            height: M_CTRL_H,
+            padding: { left: 18, right: 18 },
+            background: { fill: tokens.bar, radius: 16 },
+        });
         if (isBase && hero) {
             const SIDE = 12;
             const lz = new FlexBox({ direction: 'row', align: 'center', gap: SIDE, justify: 'start' });
@@ -3151,7 +3393,12 @@ class BottomBar extends Container {
                 const heroW = hero ? (heroSized.measureSize?.().w ?? hero.getLocalBounds().width) : 0;
                 const fixed = ICON /* menu */ + (this.autoBtn ? ICON : 0) + heroW + (this.turboBtn ? ICON : 0);
                 const twSlot = Math.max(60, W - 2 * PAD - fixed - GAPS);
-                controls.add(readout(this.host, 'Total win', this.host.fmtWin(state.freeSpins.totalWin), { color: '#ffffff', muted: '#ffffff', align: 'center', maxWidth: twSlot }));
+                controls.add(readout(this.host, 'Total win', this.host.fmtWin(state.freeSpins.totalWin), {
+                    color: '#ffffff',
+                    muted: '#ffffff',
+                    align: 'center',
+                    maxWidth: twSlot,
+                }));
             }
             if (this.turboBtn)
                 controls.add(this.turboBtn);
@@ -3162,36 +3409,76 @@ class BottomBar extends Container {
         const feature = state.activeFeature;
         const betShown = feature ? state.bet * feature.priceMultiplier : state.bet;
         if (isBase) {
-            this.betDown = new IconButton('minus', { size: 26, glyph: 18, color: '#ffffff', hover: tokens.accent, onTap: () => this.onBet(-1) });
+            this.betDown = new IconButton('minus', {
+                size: 26,
+                glyph: 18,
+                color: '#ffffff',
+                hover: tokens.accent,
+                onTap: () => this.onBet(-1),
+            });
             betGroup.add(this.betDown);
         }
-        const bet = new Readout({ label: this.host.t('Bet'), value: this.host.fmt(betShown), muted: feature ? effectiveAccent(feature) : tokens.plaqueLabel, fg: feature ? effectiveAccent(feature) : '#ffffff', valueSize: 11, align: 'center', fixedWidth: 76, shadow: false });
+        const bet = new Readout({
+            label: this.host.t('Bet'),
+            value: this.host.fmt(betShown),
+            muted: feature ? effectiveAccent(feature) : tokens.plaqueLabel,
+            fg: feature ? effectiveAccent(feature) : '#ffffff',
+            valueSize: 11,
+            align: 'center',
+            fixedWidth: 76,
+            shadow: false,
+        });
         this.betReadout = bet;
         if (isBase) {
             bet.eventMode = 'static';
             bet.cursor = 'pointer';
-            bet.on('pointertap', () => { if (!this.betLocked())
-                this.host.actions.openBetPicker(); });
+            bet.on('pointertap', () => {
+                if (!this.betLocked())
+                    this.host.actions.openBetPicker();
+            });
         }
         betGroup.add(bet);
         if (isBase) {
-            this.betUp = new IconButton('plus', { size: 26, glyph: 18, color: '#ffffff', hover: tokens.accent, onTap: () => this.onBet(1) });
+            this.betUp = new IconButton('plus', {
+                size: 26,
+                glyph: 18,
+                color: '#ffffff',
+                hover: tokens.accent,
+                onTap: () => this.onBet(1),
+            });
             betGroup.add(this.betUp);
         }
         betGroup.layout();
         const innerW = W - 28; // pad 14 each side
         const slot = Math.max(40, (innerW - betGroup.outerWidth - 20) / 2);
-        const info = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between', width: W, height: M_INFO_H, padding: { left: 14, right: 14 }, gap: 10, background: { fill: tokens.plaqueGlass, radius: 12 } });
+        const info = new FlexBox({
+            direction: 'row',
+            align: 'center',
+            justify: 'space-between',
+            width: W,
+            height: M_INFO_H,
+            padding: { left: 14, right: 14 },
+            gap: 10,
+            background: { fill: tokens.plaqueGlass, radius: 12 },
+        });
         // replay is a read-only historical round — no real balance to show (sticky `replay`, so it stays
         // hidden through a replay's free-spins phase too); matches the DOM bar.
         if (!state.replay) {
-            const bal = readout(this.host, 'Balance', this.host.fmt(state.balance), { valueSize: 11, align: 'left', fixedWidth: slot });
+            const bal = readout(this.host, 'Balance', this.host.fmt(state.balance), {
+                valueSize: 11,
+                align: 'left',
+                fixedWidth: slot,
+            });
             this.balanceValue = bal.valueText;
             info.add(bal);
         }
         info.add(betGroup);
         // WIN always present (no jiggle on win↔0)
-        const win = readout(this.host, 'Win', this.host.fmtWin(state.win), { valueSize: 11, align: 'right', fixedWidth: slot });
+        const win = readout(this.host, 'Win', this.host.fmtWin(state.win), {
+            valueSize: 11,
+            align: 'right',
+            fixedWidth: slot,
+        });
         this.winValue = win.valueText;
         info.add(win);
         info.layout();
@@ -3282,7 +3569,7 @@ class BottomBar extends Container {
         left.position.set(panelX + PANEL_PAD, panelCenterY - left.outerHeight / 2);
         right.position.set(panelRight - PANEL_PAD - right.outerWidth, panelCenterY - right.outerHeight / 2);
         this.inner.scale.set(s);
-        this.inner.position.set((W - barW * s) / 2, (H - WIDE_PAD_BOTTOM) - SPIN * s);
+        this.inner.position.set((W - barW * s) / 2, H - WIDE_PAD_BOTTOM - SPIN * s);
         this.measureFootprint();
     }
     applyFitMobile() {
@@ -3688,6 +3975,12 @@ class Slider extends Container {
         this.thumb.circle(cx, cy, r).fill('#ffffff');
         this.hitArea = new Rectangle(0, 0, this.w, h);
     }
+    /** Programmatically move the thumb (0..1) without firing onInput — for live updates driven by
+     *  `host.setVolume()` while the overlay is open. */
+    setValue(v) {
+        this._value = Math.max(0, Math.min(1, v));
+        this.draw();
+    }
     setLayoutSize(w) {
         if (w != null)
             this.w = w;
@@ -3776,10 +4069,13 @@ function buildBody$1(host, width) {
         speaker.active = on;
     });
     col.add(glassRow(host, [textNode(host, host.t('Sound')), new Spacer(), speaker]));
-    // Volume sliders
-    col.add(sliderRow(host, width, 'master', host.t('Master volume')));
-    col.add(sliderRow(host, width, 'music', host.t('Music')));
-    col.add(sliderRow(host, width, 'sfx', host.t('SFX')));
+    // 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'));
@@ -3823,7 +4119,7 @@ function glassRow(host, children, opts = {}) {
     return row;
 }
 /** A column row: head (label + live % value) over a draggable slider. */
-function sliderRow(host, bodyWidth, key, label) {
+function sliderRow(host, bodyWidth, key, label, updaters) {
     const row = new FlexBox({
         direction: 'column',
         align: 'stretch',
@@ -3832,14 +4128,19 @@ function sliderRow(host, bodyWidth, key, label) {
         background: { fill: host.tokens.plaqueGlass, radius: 16 },
     });
     const head = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between' });
-    const valueText = makeText('100%', { size: 13, weight: '700', color: host.tokens.plaqueLabel });
+    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, 1, (v) => {
+    const slider = new Slider(host, initial, (v) => {
         valueText.text = `${Math.round(v * 100)}%`;
-        host.emit('settingChange', { key, value: v });
+        host.setVolume(key, v);
     });
+    updaters[key] = (v) => {
+        valueText.text = `${Math.round(v * 100)}%`;
+        slider.setValue(v);
+    };
     row.add(head);
     row.add(slider);
     return row;
@@ -5869,6 +6170,9 @@ class PixiRenderer {
             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),
             // — Pixi-specific surface —
             get ticker() { return self.app.ticker; },
             get canvas() { return self.app.canvas; },