@energy8platform/shell 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energy8platform/shell",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Energy8 branded game shell — one logic core, pluggable html/pixi renderers behind a stable contract.",
   "type": "module",
   "main": "./dist/index.cjs.js",

package/src/core/ShellController.ts

@@ -6,14 +6,31 @@ import { createI18n, type I18n } from './i18n';
 import { KeyboardController, type KeyboardHost } from './keyboard';
 import { PACKAGE_VERSION } from './version';
 import type {
-  ShellConfig, ResolvedShellConfig, ShellState, ShellEvents, ShellMode,
-  AutoplayOptions, FreeSpinsState, BonusOption, ThemeConfig, ModalOptions, ReplayModalOptions,
+  ShellConfig,
+  ResolvedShellConfig,
+  ShellState,
+  ShellEvents,
+  ShellMode,
+  AutoplayOptions,
+  FreeSpinsState,
+  BonusReadout,
+  BonusOption,
+  ThemeConfig,
+  ModalOptions,
+  ReplayModalOptions,
 } from './types';
 import type {
-  ShellRenderer, ShellHost, ShellActions, OverlayHandle, OverlayRequest, ShellLayoutMode,
+  ShellRenderer,
+  ShellHost,
+  ShellActions,
+  OverlayHandle,
+  OverlayRequest,
+  ShellLayoutMode,
 } from './renderer';
 
-export interface CreateShellOptions extends ShellConfig { renderer: ShellRenderer; }
+export interface CreateShellOptions extends ShellConfig {
+  renderer: ShellRenderer;
+}
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 export function resolveConfig(config: ShellConfig): ResolvedShellConfig {
@@ -79,12 +96,21 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
   }
 
   // ── ShellHost ──────────────────────────────────────────────────────────────
-  t(text: string): string { return this.i18n.t(text); }
-  formatCurrency(n: number, win = false): string { return formatCurrency(n, this.config.currency, win); }
-  formatWin(value: number): string { return this.formatCurrency(value, true); }
+  t(text: string): string {
+    return this.i18n.t(text);
+  }
+  formatCurrency(n: number, win = false): string {
+    return formatCurrency(n, this.config.currency, win);
+  }
+  formatWin(value: number): string {
+    return this.formatCurrency(value, true);
+  }
   notifyResize(w: number, h: number): void {
     const layout: ShellLayoutMode = w !== 0 && h > w ? 'mobile' : 'wide';
-    if (layout !== this.layout) { this.layout = layout; this.renderer.setLayout(layout); }
+    if (layout !== this.layout) {
+      this.layout = layout;
+      this.renderer.setLayout(layout);
+    }
     this.renderer.renderBar();
   }
 
@@ -94,7 +120,9 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
       stepBet: (dir) => {
         const next = stepBet(this.state, dir);
         if (next === this.state.bet) return;
-        this.state.bet = next; this.emit('betChange', next); this.renderer.renderBar();
+        this.state.bet = next;
+        this.emit('betChange', next);
+        this.renderer.renderBar();
       },
       setBet: (n) => {
         if (n !== this.state.bet) {
@@ -105,7 +133,9 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
       },
       cycleTurbo: () => {
         const next = nextTurbo(this.state.turbo, this.config.features.turbo);
-        this.state.turbo = next; this.emit('turboChange', next); this.renderer.renderBar();
+        this.state.turbo = next;
+        this.emit('turboChange', next);
+        this.renderer.renderBar();
       },
       toggleAutoplay: () => {
         if (this.state.autoplay.active) a.stopAutoplay();
@@ -113,11 +143,13 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
       },
       startAutoplay: (remaining) => {
         this.state.autoplay = { active: true, remaining };
-        this.emit('autoplayStart', { active: true, remaining }); this.renderer.renderBar();
+        this.emit('autoplayStart', { active: true, remaining });
+        this.renderer.renderBar();
       },
       stopAutoplay: () => {
         this.state.autoplay = { active: false, remaining: 0 };
-        this.emit('autoplayStop'); this.renderer.renderBar();
+        this.emit('autoplayStop');
+        this.renderer.renderBar();
       },
       openMenu: () => this.openMenu(),
       openSettings: () => this.openSettings(),
@@ -138,12 +170,24 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this;
     const host: KeyboardHost = {
-      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(),
@@ -160,21 +204,51 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
     this.kbd.attach();
   }
 
-  private pullFocus = (): void => { try { (globalThis as { focus?: () => void }).focus?.(); } catch { /* cross-origin */ } };
+  private pullFocus = (): void => {
+    try {
+      (globalThis as { focus?: () => void }).focus?.();
+    } catch {
+      /* cross-origin */
+    }
+  };
 
   // ── overlay flow ─────────────────────────────────────────────────────────────
   private show(req: OverlayRequest): void {
     this.closeModal();
     this.overlay = this.renderer.openOverlay(req) ?? null;
   }
-  openMenu(): void { this.emit('menuOpen'); this.openSettings(); }
-  openSettings(): void { this.emit('settingsOpen'); this.show({ kind: 'settings' }); }
-  openInfo(): void { this.emit('infoOpen'); this.show({ kind: 'gameInfo' }); }
-  openBuyBonus(): void { if (this.config.onBonusBuy) { this.config.onBonusBuy(); return; } this.show({ kind: 'buyBonus' }); }
-  openBetPicker(): void { this.show({ kind: 'betPicker' }); }
-  openAutoplayPicker(): void { this.show({ kind: 'autoplayPicker' }); }
-  openReplay(opts: ReplayModalOptions): void { if (this.destroyed) return; this.show({ kind: 'replay', opts }); }
-  openModal(opts: ModalOptions): void { this.show({ kind: 'modal', opts }); }
+  openMenu(): void {
+    this.emit('menuOpen');
+    this.openSettings();
+  }
+  openSettings(): void {
+    this.emit('settingsOpen');
+    this.show({ kind: 'settings' });
+  }
+  openInfo(): void {
+    this.emit('infoOpen');
+    this.show({ kind: 'gameInfo' });
+  }
+  openBuyBonus(): void {
+    if (this.config.onBonusBuy) {
+      this.config.onBonusBuy();
+      return;
+    }
+    this.show({ kind: 'buyBonus' });
+  }
+  openBetPicker(): void {
+    this.show({ kind: 'betPicker' });
+  }
+  openAutoplayPicker(): void {
+    this.show({ kind: 'autoplayPicker' });
+  }
+  openReplay(opts: ReplayModalOptions): void {
+    if (this.destroyed) return;
+    this.show({ kind: 'replay', opts });
+  }
+  openModal(opts: ModalOptions): void {
+    this.show({ kind: 'modal', opts });
+  }
   /** Programmatically dismiss whatever overlay/modal is open. No-op when nothing is shown. */
   closeModal(): void {
     if (!this.overlay) return;
@@ -190,16 +264,22 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
     this.soundRefresh?.(on);
     this.renderer.refreshSoundIcon?.(on);
   }
-  setSoundRefresh(fn: ((on: boolean) => void) | null): void { this.soundRefresh = fn; }
+  setSoundRefresh(fn: ((on: boolean) => void) | null): void {
+    this.soundRefresh = fn;
+  }
 
   // ── features ─────────────────────────────────────────────────────────────────
   activateFeature(bonus: BonusOption): void {
-    this.state.activeFeature = bonus; this.emit('featureActivate', { id: bonus.id }); this.renderer.renderBar();
+    this.state.activeFeature = bonus;
+    this.emit('featureActivate', { id: bonus.id });
+    this.renderer.renderBar();
   }
   deactivateFeature(): void {
     const prev = this.state.activeFeature;
     if (!prev) return;
-    this.state.activeFeature = null; this.emit('featureDeactivate', { id: prev.id }); this.renderer.renderBar();
+    this.state.activeFeature = null;
+    this.emit('featureDeactivate', { id: prev.id });
+    this.renderer.renderBar();
   }
 
   // ── game-facing public API (mirrors GameShell/PixiGameShell) ───────────────────
@@ -207,19 +287,79 @@ export class ShellController extends EventEmitter<ShellEvents> implements ShellH
     this.renderer.renderBar();
     if (to !== from) this.renderer.animateMoney(field, from, to);
   }
-  setBalance(n: number): void { const from = this.prevBalance; this.state.balance = n; this.prevBalance = n; this.money('balance', from, n); }
-  setWin(n: number): void { const from = this.prevWin; this.state.win = n; this.prevWin = n; this.money('win', from, n); }
-  setBet(n: number): void { this.state.bet = n; this.renderer.renderBar(); }
-  setMode(mode: ShellMode): void { if (mode === 'replay') this.state.replay = true; this.state.mode = mode; this.renderer.renderBar(); }
-  setBusy(busy: boolean): void { this.state.busy = busy; this.renderer.renderBar(); this.kbd?.notifyBusyChanged(busy); }
-  setAutoplay(a: AutoplayOptions): void { this.state.autoplay = a; this.renderer.renderBar(); }
-  setTurbo(level: number): void { this.state.turbo = level; this.renderer.renderBar(); }
-  setBuyBonusEnabled(enabled: boolean): void { this.state.buyBonusEnabled = enabled; this.renderer.renderBar(); }
-  setFreeSpins(fs: FreeSpinsState): void { this.state.freeSpins = fs; this.renderer.renderBar(); }
-  setTheme(theme: ThemeConfig): void { this.config.theme = theme; this.tokens = resolveTheme(theme); this.renderer.applyTheme(this.tokens); this.renderer.renderBar(); }
-  setLanguage(lang: string): void { this.config.language = lang; this.i18n = createI18n({ language: lang, isSocial: this.config.isSocial }); this.renderer.renderBar(); }
-  setSocial(isSocial: boolean): void { this.config.isSocial = isSocial; this.i18n = createI18n({ language: this.config.language, isSocial }); this.renderer.renderBar(); }
-  setLayout(layout: ShellLayoutMode): void { if (layout === this.layout) return; this.layout = layout; this.renderer.setLayout(layout); this.renderer.renderBar(); }
+  setBalance(n: number): void {
+    const from = this.prevBalance;
+    this.state.balance = n;
+    this.prevBalance = n;
+    this.money('balance', from, n);
+  }
+  setWin(n: number): void {
+    const from = this.prevWin;
+    this.state.win = n;
+    this.prevWin = n;
+    this.money('win', from, n);
+  }
+  setBet(n: number): void {
+    this.state.bet = n;
+    this.renderer.renderBar();
+  }
+  setMode(mode: ShellMode): void {
+    if (mode === 'replay') this.state.replay = true;
+    this.state.mode = mode;
+    this.renderer.renderBar();
+  }
+  setBusy(busy: boolean): void {
+    this.state.busy = busy;
+    this.renderer.renderBar();
+    this.kbd?.notifyBusyChanged(busy);
+  }
+  setAutoplay(a: AutoplayOptions): void {
+    this.state.autoplay = a;
+    this.renderer.renderBar();
+  }
+  setTurbo(level: number): void {
+    this.state.turbo = level;
+    this.renderer.renderBar();
+  }
+  setBuyBonusEnabled(enabled: boolean): void {
+    this.state.buyBonusEnabled = enabled;
+    this.renderer.renderBar();
+  }
+  setFreeSpins(fs: FreeSpinsState): void {
+    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: BonusReadout): void {
+    this.state.bonus = { label: b.label, value: b.value };
+    this.state.freeSpins = { ...this.state.freeSpins, totalWin: b.totalWin };
+    this.renderer.renderBar();
+  }
+  setTheme(theme: ThemeConfig): void {
+    this.config.theme = theme;
+    this.tokens = resolveTheme(theme);
+    this.renderer.applyTheme(this.tokens);
+    this.renderer.renderBar();
+  }
+  setLanguage(lang: string): void {
+    this.config.language = lang;
+    this.i18n = createI18n({ language: lang, isSocial: this.config.isSocial });
+    this.renderer.renderBar();
+  }
+  setSocial(isSocial: boolean): void {
+    this.config.isSocial = isSocial;
+    this.i18n = createI18n({ language: this.config.language, isSocial });
+    this.renderer.renderBar();
+  }
+  setLayout(layout: ShellLayoutMode): void {
+    if (layout === this.layout) return;
+    this.layout = layout;
+    this.renderer.setLayout(layout);
+    this.renderer.renderBar();
+  }
 
   destroy(): Promise<void> {
     if (this.destroyed) return Promise.resolve();

package/src/core/state.ts

@@ -13,6 +13,7 @@ export function createInitialState(config: ShellConfig): ShellState {
     turbo: 0,
     buyBonusEnabled: true,
     freeSpins: { current: 0, total: 0, totalWin: 0 },
+    bonus: null,
     activeFeature: null,
   };
 }

package/src/core/types.ts

@@ -1,4 +1,8 @@
-export type ShellMode = 'base' | 'freeSpins' | 'replay';
+/** `freeSpins` and `bonus` are the SAME bar layout (host-driven hero + Total Win); `freeSpins` is
+ *  kept as a back-compat alias for the common case (its readout is derived current/total), while
+ *  `bonus` pairs with `setBonus()` to show a game-supplied label + value (adventure, hold-and-spin,
+ *  respins — anything that isn't a plain free-spins counter). */
+export type ShellMode = 'base' | 'bonus' | 'freeSpins' | 'replay';
 
 export interface CurrencyConfig {
   symbol: string;
@@ -162,6 +166,20 @@ export interface FreeSpinsState {
   totalWin: number;
 }
 
+/** A game-supplied bonus readout for the bar hero, set via `setBonus()`. Generalizes the
+ *  free-spins counter: the shell renders `label` (localized via the shell translator, so a game
+ *  i18n entry for it is honoured) + `value` (a pre-formatted string, shown verbatim — "2 / 10",
+ *  "3", "×5", "7 coins") + the Total Win accumulator. The shell stays free of any per-game bonus
+ *  concept — the label/value semantics live in the game/host. */
+export interface BonusReadout {
+  /** Bar label, e.g. 'Free spins' | 'Adventure' | 'Hold & Spin'. Run through the shell translator. */
+  label: string;
+  /** Pre-formatted counter value shown verbatim (NOT translated). */
+  value: string;
+  /** Cumulative bonus win for the Total Win readout. */
+  totalWin: number;
+}
+
 /** One footer button of a generic modal. Clicking it runs `on` (if any), then closes the modal. */
 export interface ModalAction {
   title: string;
@@ -229,9 +247,24 @@ export interface ShellConfig {
 }
 
 /** ShellConfig after the controller applies defaults (version, isSocial, replay, theme). No mount. */
-export type ResolvedShellConfig = Required<Pick<ShellConfig,
-  'language' | 'currency' | 'availableBets' | 'defaultBet' | 'balance' | 'win' | 'mode' | 'features' | 'gameInfo' | 'version' | 'isSocial' | 'replay'>>
-  & Pick<ShellConfig, 'currentBet' | 'theme' | 'onBonusBuy'>;
+export type ResolvedShellConfig = Required<
+  Pick<
+    ShellConfig,
+    | 'language'
+    | 'currency'
+    | 'availableBets'
+    | 'defaultBet'
+    | 'balance'
+    | 'win'
+    | 'mode'
+    | 'features'
+    | 'gameInfo'
+    | 'version'
+    | 'isSocial'
+    | 'replay'
+  >
+> &
+  Pick<ShellConfig, 'currentBet' | 'theme' | 'onBonusBuy'>;
 
 export interface ShellState {
   mode: ShellMode;
@@ -248,6 +281,9 @@ export interface ShellState {
   turbo: number;
   buyBonusEnabled: boolean;
   freeSpins: FreeSpinsState;
+  /** Game-supplied bonus label + value override (from `setBonus()`). When null the bar derives the
+   *  readout from `freeSpins` (label 'Free spins', value current/total) — the back-compat default. */
+  bonus: { label: string; value: string } | null;
   /** The currently activated `feature` option (e.g. Ante), or null. Drives the
    *  effective-bet readout tint and the BUY BONUS → DISABLE toggle on the bar. */
   activeFeature: BonusOption | null;

package/src/core/version.ts

@@ -1,3 +1,3 @@
 // 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. */
-export const PACKAGE_VERSION = '0.4.1';
+export const PACKAGE_VERSION = '0.5.0';

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

@@ -9,8 +9,12 @@ function readout(ge: string, label: string, value: string): HTMLElement {
   el.className = `ge-rd ge-${ge}`;
   // The value lives in its own inline-block span (.ge-rd-val) so it can be measured & shrunk to fit
   // (see fitReadouts) independently of the label, and so the count-up animates just the number.
-  const lbl = document.createElement('span'); lbl.className = 'ge-lbl'; lbl.textContent = label;
-  const val = document.createElement('span'); val.className = 'ge-rd-val'; val.textContent = value;
+  const lbl = document.createElement('span');
+  lbl.className = 'ge-lbl';
+  lbl.textContent = label;
+  const val = document.createElement('span');
+  val.className = 'ge-rd-val';
+  val.textContent = value;
   el.append(lbl, val);
   return el;
 }
@@ -25,12 +29,19 @@ function turboBtn(host: ShellHost, level: number): HTMLButtonElement {
 }
 
 /** A borderless icon button. */
-function iconBtn(ge: string, name: IconName, onClick: () => void, active = false): HTMLButtonElement {
+function iconBtn(
+  ge: string,
+  name: IconName,
+  onClick: () => void,
+  active = false,
+): HTMLButtonElement {
   const b = document.createElement('button');
   b.className = `ge-iconbtn${active ? ' ge-active' : ''}`;
   b.dataset.ge = ge;
   b.innerHTML = icon(name);
-  b.addEventListener('click', () => { if (!b.disabled) onClick(); });
+  b.addEventListener('click', () => {
+    if (!b.disabled) onClick();
+  });
   return b;
 }
 
@@ -49,16 +60,14 @@ export function renderBottomBar(host: ShellHost): HTMLElement {
   // All three modes share the base plaque layout. FS/replay hide the controls that don't apply
   // and add Free Spins + Total Win blocks on the left; the per-spin WIN uses the base pill.
   const isBase = state.mode === 'base';
-  const isFS = state.mode === 'freeSpins';
+  const isFS = state.mode === 'freeSpins' || state.mode === 'bonus';
   // FS always shows the spins counter + accumulated Total Win (even €0); a replay shows them
   // only when it's a free-spins replay (freeSpins.total > 0).
   const showFsBlocks = isFS || (state.mode === 'replay' && state.freeSpins.total > 0);
 
   // Replay is a read-only historical round — there's no real balance to show, so hide it. Keyed on
   // the sticky `replay` flag (not `mode`) so it stays hidden through a replay's free-spins phase.
-  const balance = state.replay
-    ? null
-    : readout('balance', host.t('Balance'), fmt(state.balance));
+  const balance = state.replay ? null : readout('balance', host.t('Balance'), fmt(state.balance));
   // With a feature active (e.g. Ante) the BET readout shows the effective stake, tinted with
   // the feature accent; the base state.bet is unchanged and returns once the feature is off.
   const feature = state.activeFeature;
@@ -75,27 +84,35 @@ export function renderBottomBar(host: ShellHost): HTMLElement {
   const turbo = config.features.turbo > 0 ? turboBtn(host, state.turbo) : null;
 
   // interactive controls — base mode only
-  let betDown: HTMLElement | null = null, betUp: HTMLElement | null = null;
-  let spin: HTMLElement | null = null, auto: HTMLElement | null = null, buy: HTMLElement | null = null;
+  let betDown: HTMLElement | null = null,
+    betUp: HTMLElement | null = null;
+  let spin: HTMLElement | null = null,
+    auto: HTMLElement | null = null,
+    buy: HTMLElement | null = null;
   if (isBase) {
     betDown = iconBtn('bet-down', 'minus', () => host.actions.stepBet(-1));
     betUp = iconBtn('bet-up', 'plus', () => host.actions.stepBet(1));
-    betValue.classList.add('ge-betbtn');                       // tap the stake → bet picker
-    betValue.addEventListener('click', () => { if (!betLocked(host)) host.actions.openBetPicker(); });
+    betValue.classList.add('ge-betbtn'); // tap the stake → bet picker
+    betValue.addEventListener('click', () => {
+      if (!betLocked(host)) host.actions.openBetPicker();
+    });
     spin = spinButton(host);
     auto = config.features.autoplay ? autoButton(host) : null;
-    buy = (config.features.buyBonus !== false || config.onBonusBuy) ? buyBtn(host) : null;
+    buy = config.features.buyBonus !== false || config.onBonusBuy ? buyBtn(host) : null;
   }
 
   const winEl = state.win > 0 ? readout('win', host.t('Win'), fmtWin(state.win)) : null;
   // FS/replay left blocks: spins counter + accumulated Total Win (shown even at €0).
   // current = number → "current / total"; current = null/undefined → just the (game-driven) total.
   const fs = state.freeSpins;
-  const fsText = fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`;
+  const fsText =
+    state.bonus?.value ?? (fs.current == null ? `${fs.total}` : `${fs.current} / ${fs.total}`);
   // In FS the spins counter takes the SPIN slot as a rectangular hero plaque (same white/black-ring
   // style as the SPIN disc); Total Win stays an inline readout.
-  const fsHero = showFsBlocks ? fsHeroPlaque(host, fsText) : null;
-  const fsTotalWin = showFsBlocks ? readout('fs-totalwin', host.t('Total win'), fmtWin(fs.totalWin)) : null;
+  const fsHero = showFsBlocks ? fsHeroPlaque(host, fsText, state.bonus?.label) : null;
+  const fsTotalWin = showFsBlocks
+    ? readout('fs-totalwin', host.t('Total win'), fmtWin(fs.totalWin))
+    : null;
   // The hero in the centre/spin position: SPIN in base, the FS counter in free spins, nothing else.
   const hero = isBase ? spin : fsHero;
 
@@ -117,12 +134,16 @@ export function renderBottomBar(host: ShellHost): HTMLElement {
     // RIGHT (the controls): [bet (+ step)] · |divider| · [auto · SPIN-or-FS · turbo]
     const betKids: HTMLElement[] = [betValue];
     if (betUp && betDown) {
-      const step = document.createElement('div'); step.className = 'ge-betstep'; step.append(betUp, betDown);
+      const step = document.createElement('div');
+      step.className = 'ge-betstep';
+      step.append(betUp, betDown);
       betKids.push(step);
     }
     const betGroup = plaque('ge-betgroup', betKids);
-    const divider = document.createElement('div'); divider.className = 'ge-pl-divider';
-    const spinWrap = document.createElement('div'); spinWrap.className = 'ge-spinwrap';
+    const divider = document.createElement('div');
+    divider.className = 'ge-pl-divider';
+    const spinWrap = document.createElement('div');
+    spinWrap.className = 'ge-spinwrap';
     spinWrap.append(...compact([auto, hero, turbo]));
     const right = zone('ge-zone-right', betGroup, divider, spinWrap);
 
@@ -138,11 +159,16 @@ export function renderBottomBar(host: ShellHost): HTMLElement {
 
 /** Free-spins hero plaque — takes the SPIN slot in FS: same white disc/black-ring language as SPIN,
  *  but a rounded RECTANGLE showing the spins counter ("3 / 10"). */
-function fsHeroPlaque(host: ShellHost, text: string): HTMLElement {
+function fsHeroPlaque(host: ShellHost, text: string, label?: string): HTMLElement {
   const el = document.createElement('div');
-  el.className = 'ge-fs-hero'; el.dataset.ge = 'fs-counter';
-  const lbl = document.createElement('span'); lbl.className = 'ge-fs-lbl'; lbl.textContent = host.t('Free spins');
-  const num = document.createElement('span'); num.className = 'ge-fs-num'; num.textContent = text;
+  el.className = 'ge-fs-hero';
+  el.dataset.ge = 'fs-counter';
+  const lbl = document.createElement('span');
+  lbl.className = 'ge-fs-lbl';
+  lbl.textContent = host.t(label ?? 'Free spins');
+  const num = document.createElement('span');
+  num.className = 'ge-fs-num';
+  num.textContent = text;
   el.append(lbl, num);
   return el;
 }
@@ -160,24 +186,32 @@ function plaque(cls: string, children: HTMLElement[]): HTMLElement {
   d.append(...children);
   return d;
 }
-function compact(items: (HTMLElement | null)[]): HTMLElement[] { return items.filter((x): x is HTMLElement => x !== null); }
+function compact(items: (HTMLElement | null)[]): HTMLElement[] {
+  return items.filter((x): x is HTMLElement => x !== null);
+}
 
 function buyBtn(host: ShellHost): HTMLButtonElement {
   const buy = document.createElement('button');
-  buy.className = 'ge-shell-buybonus'; buy.dataset.ge = 'buybonus';
+  buy.className = 'ge-shell-buybonus';
+  buy.dataset.ge = 'buybonus';
   const feature = host.state.activeFeature;
   if (feature) {
     // A feature is active → this button turns into DISABLE (tinted with the feature accent).
     const accent = effectiveAccent(feature);
     buy.classList.add('ge-disable');
     buy.innerHTML = `<span>${host.t('DISABLE')}</span>`;
-    buy.style.background = accent; buy.style.color = contrastText(accent);
-    buy.addEventListener('click', () => { if (!buy.disabled) host.actions.deactivateFeature(); });
+    buy.style.background = accent;
+    buy.style.color = contrastText(accent);
+    buy.addEventListener('click', () => {
+      if (!buy.disabled) host.actions.deactivateFeature();
+    });
   } else {
     // Ticket icon (no text); keep the label for screen readers.
     buy.setAttribute('aria-label', host.t('BUY BONUS'));
     buy.innerHTML = `<span class="ge-bb-tk">${icon('ticket')}</span>`;
-    buy.addEventListener('click', () => { if (!buy.disabled) host.actions.openBuyBonus(); });
+    buy.addEventListener('click', () => {
+      if (!buy.disabled) host.actions.openBuyBonus();
+    });
   }
   return buy;
 }
@@ -190,17 +224,22 @@ function betLocked(host: ShellHost): boolean {
 function spinButton(host: ShellHost): HTMLButtonElement {
   const { state } = host;
   const sp = document.createElement('button');
-  sp.className = 'ge-shell-spin'; sp.dataset.ge = 'spin';
+  sp.className = 'ge-shell-spin';
+  sp.dataset.ge = 'spin';
   if (state.autoplay.active) {
     sp.classList.add('ge-stop');
     const rem = state.autoplay.remaining;
     const label = Number.isFinite(rem) ? String(rem) : '∞';
     sp.innerHTML = `<span class="ge-spin-stop">${icon('stop')}</span><span class="ge-spin-count">${label}</span>`;
-    sp.addEventListener('click', () => { if (!sp.disabled) host.actions.stopAutoplay(); });
+    sp.addEventListener('click', () => {
+      if (!sp.disabled) host.actions.stopAutoplay();
+    });
   } else {
     sp.innerHTML = icon('spin');
     if (state.busy) sp.classList.add('ge-spinning');
-    sp.addEventListener('click', () => { if (!sp.disabled) host.actions.spin(); });
+    sp.addEventListener('click', () => {
+      if (!sp.disabled) host.actions.spin();
+    });
   }
   return sp;
 }
@@ -230,7 +269,7 @@ function applyBusy(host: ShellHost, bar: HTMLElement): void {
   const i = host.state.availableBets.indexOf(host.state.bet);
   disable('bet-up', lockBet || i >= host.state.availableBets.length - 1);
   disable('bet-down', lockBet || i <= 0);
-  disable('spin', busy && !auto);     // keep the STOP disc clickable through autoplay
+  disable('spin', busy && !auto); // keep the STOP disc clickable through autoplay
   disable('autoplay', busy && !auto); // keep autoplay (stop) clickable through autoplay
   const betVal = bar.querySelector('[data-ge="bet-value"]') as HTMLElement | null;
   if (betVal) betVal.classList.toggle('ge-disabled', lockBet);