@energy8platform/shell 0.4.0 → 0.5.0

package/dist/pixi.esm.js

@@ -64,6 +64,7 @@ function createInitialState(config) {
         turbo: 0,
         buyBonusEnabled: true,
         freeSpins: { current: 0, total: 0, totalWin: 0 },
+        bonus: null,
         activeFeature: null,
     };
 }
@@ -1437,7 +1438,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.0';
+const PACKAGE_VERSION = '0.5.0';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -1498,9 +1499,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 +1574,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,27 +1607,52 @@ 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)
@@ -1624,7 +1668,9 @@ class ShellController extends EventEmitter {
         this.soundRefresh?.(on);
         this.renderer.refreshSoundIcon?.(on);
     }
-    setSoundRefresh(fn) { this.soundRefresh = fn; }
+    setSoundRefresh(fn) {
+        this.soundRefresh = fn;
+    }
     // ── features ─────────────────────────────────────────────────────────────────
     activateFeature(bonus) {
         this.state.activeFeature = bonus;
@@ -1645,21 +1691,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 +3028,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 +3081,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 +3132,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 +3163,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 +3193,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 +3227,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 +3278,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 +3365,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 +3381,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 +3541,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() {
@@ -4079,28 +4338,69 @@ function sectionHotkeys(host, title, width) {
     visible.forEach((r, i) => {
         if (i > 0)
             sec.add(hairline$1(host, inner));
-        sec.add(hkRow(host, r));
+        sec.add(hkRow(host, r, inner));
     });
     return sec;
 }
-/** Render a single hotkey row: keycap chip(s) on the left, action name on the right. */
+/** Render a single hotkey row: keycap chip(s) on the left, action name on the right. The row is
+ *  constrained to `inner` (chips left, label right). On narrow widths the chip combos stack onto
+ *  their own lines and the label wraps within the leftover width, so nothing clips past the plaque
+ *  — the Pixi analogue of the HTML `.ge-gi-hk-chips { flex:0 1 auto; flex-wrap }` + label wrap. */
 function hkRow(host, r, inner) {
-    const row = new FlexBox({ direction: 'row', align: 'center', gap: 14, padding: { top: 8, bottom: 8 } });
-    // Build chips container
-    const chipsCol = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+    const GAP = 14;
+    const LABEL_MIN = 92; // reserve at least this much for the action label before wrapping the chips
     const chipKeys = buildChipKeys(r);
+    // Lay the chips on one line and measure. If that leaves too little room for the label, stack the
+    // combos (split at the '/') onto their own lines so the chips give up horizontal width.
+    let chips = chipLine(host, chipKeys);
+    let chipsW = chips.measureSize().w;
+    if (chipsW > inner - GAP - LABEL_MIN) {
+        chips = chipCombos(host, chipKeys);
+        chipsW = chips.measureSize().w;
+    }
+    // The label takes the leftover width and WRAPS within it (never clips); right-aligned to sit
+    // against the plaque edge like the DOM `.ge-gi-hk-tx`.
+    const labelW = Math.max(LABEL_MIN, inner - chipsW - GAP);
+    const nameText = makeText(host.t(r.name), { size: 15, weight: '700', color: '#ffffff', wrapWidth: labelW, align: 'right' });
+    const row = new FlexBox({ direction: 'row', align: 'center', justify: 'space-between', gap: GAP, padding: { top: 8, bottom: 8 }, width: inner });
+    row.add(chips);
+    row.add(nameText);
+    return row;
+}
+/** Chips on a single row, with '/' separators between the combos (as flattened by buildChipKeys). */
+function chipLine(host, chipKeys) {
+    const line = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+    for (const key of chipKeys) {
+        if (key === '/')
+            line.add(makeText('/', { size: 12, weight: '500', color: host.tokens.plaqueLabel }));
+        else
+            line.add(keycap(host, key));
+    }
+    return line;
+}
+/** Chips stacked as combos — split at the '/' separators, one combo per line (drops the inline
+ *  '/', which reads as a line break once the combos are stacked). */
+function chipCombos(host, chipKeys) {
+    const col = new FlexBox({ direction: 'column', align: 'start', gap: 4 });
+    let line = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+    let filled = false;
+    const flush = () => {
+        if (!filled)
+            return;
+        col.add(line);
+        line = new FlexBox({ direction: 'row', align: 'center', gap: 4 });
+        filled = false;
+    };
     for (const key of chipKeys) {
         if (key === '/') {
-            chipsCol.add(makeText('/', { size: 12, weight: '500', color: host.tokens.plaqueLabel }));
-        }
-        else {
-            chipsCol.add(keycap(host, key));
+            flush();
+            continue;
         }
+        line.add(keycap(host, key));
+        filled = true;
     }
-    const nameText = makeText(host.t(r.name), { size: 15, weight: '700', color: '#ffffff' });
-    row.add(chipsCol);
-    row.add(nameText);
-    return row;
+    flush();
+    return col;
 }
 /** Flatten a row's chip list into display tokens — for bet rows, produce: Shift ↑ / Shift = style. */
 function buildChipKeys(r) {
@@ -5266,8 +5566,27 @@ class PickerModal extends CardModal {
     }
 }
 /** A centred picker (chips grid + accent Confirm) on the shared card modal. */
+/** A ScrollBox that reports a fixed box to the FlexBox layout — so a capped, scrolling grid slots
+ *  into the card body like any other sized child (measured/positioned by its viewport, not its
+ *  full content bounds). */
+class SizedScrollBox extends ScrollBox {
+    boxW;
+    boxH;
+    constructor(boxW, boxH, canvas) {
+        super(canvas);
+        this.boxW = boxW;
+        this.boxH = boxH;
+        this.setViewport(boxW, boxH);
+    }
+    measureSize() {
+        return { w: this.boxW, h: this.boxH };
+    }
+    setLayoutSize() {
+        /* fixed viewport — ignore layout-imposed sizing */
+    }
+}
 function buildSheet(host, opts) {
-    const columns = typeof opts.columns === 'number'
+    const maxColumns = typeof opts.columns === 'number'
         ? opts.columns
         : host.layout === 'mobile' ? opts.columns.mobile : opts.columns.wide;
     let selected = opts.selected;
@@ -5319,27 +5638,51 @@ function buildSheet(host, opts) {
     const em = modal.emSize;
     const gap = 0.65 * em;
     const innerW = modal.cardWidth - 2.4 * em;
+    // Build the chips first (at natural width) so autoFit can measure the widest label.
+    for (let i = 0; i < opts.choices.length; i++) {
+        const c = opts.choices[i];
+        const chipIndex = i;
+        chips.push(new Chip(host, c.id, c.label, chipIndex === focusIndex, em, (id) => {
+            const idx = opts.choices.findIndex((ch) => ch.id === id);
+            if (idx >= 0)
+                setHighlight(idx);
+        }));
+    }
+    // Column count: with autoFit, drop below the max until the widest label fits. Short labels
+    // (a normal currency) exceed the max and clamp back to it — so the compact 6-wide layout is
+    // preserved and only wide currencies reflow to fewer columns.
+    let columns = maxColumns;
+    if (opts.autoFit) {
+        const widest = chips.reduce((m, ch) => Math.max(m, ch.measureSize().w), 0);
+        const fitCols = Math.floor((innerW + gap) / (widest + gap));
+        columns = Math.max(1, Math.min(maxColumns, fitCols));
+    }
     const colW = (innerW - gap * (columns - 1)) / columns;
     const grid = new FlexBox({ direction: 'column', align: 'start', gap });
-    for (let i = 0; i < opts.choices.length; i += columns) {
-        const rowChoices = opts.choices.slice(i, i + columns);
+    for (let i = 0; i < chips.length; i += columns) {
         const row = new FlexBox({ direction: 'row', align: 'center', gap });
-        for (let j = 0; j < rowChoices.length; j++) {
-            const c = rowChoices[j];
-            const chipIndex = i + j;
-            const chip = new Chip(host, c.id, c.label, chipIndex === focusIndex, em, (id) => {
-                const idx = opts.choices.findIndex((ch) => ch.id === id);
-                if (idx >= 0)
-                    setHighlight(idx);
-            });
+        for (let j = 0; j < columns && i + j < chips.length; j++) {
+            const chip = chips[i + j];
             chip.setLayoutSize(colW, undefined);
-            chips.push(chip);
             row.add(chip);
         }
-        row.layout();
         grid.add(row);
     }
-    modal.body.add(grid);
+    // Cap the grid height and scroll when the ladder overflows — the Pixi analogue of the HTML
+    // shell's `max-height:min(50vh,28em); overflow-y:auto`. (Mask hit-testing clips to the viewport
+    // but still lets clicks through to chips inside it — verified against pixi.js 8.16's
+    // EventBoundary.) When it fits, drop the scroll box entirely so nothing is masked needlessly.
+    const gridH = grid.measureSize().h;
+    const maxGridH = Math.min(host.screenH * 0.5, 28 * em);
+    if (opts.autoFit && gridH > maxGridH) {
+        const scroll = new SizedScrollBox(innerW, maxGridH, host.canvas);
+        scroll.content.addChild(grid);
+        scroll.refresh();
+        modal.body.add(scroll);
+    }
+    else {
+        modal.body.add(grid);
+    }
     modal.setActions([
         {
             label: opts.confirmLabel,
@@ -5356,6 +5699,7 @@ function openBetPicker(host) {
         tag: 'bet-modal',
         title: host.t('Bet'),
         columns: { wide: 6, mobile: 3 },
+        autoFit: true, // reflow columns + scroll when a wide currency makes the labels grow
         maxEm: 44, // wider card to fit 6 chips/row
         confirmLabel: host.t('Confirm'),
         choices: host.state.availableBets.map((b) => ({ id: String(b), label: host.fmt(b) })),