@energy8platform/platform-core 0.19.0 → 0.21.0

package/src/shell/GameShell.ts

@@ -0,0 +1,294 @@
+import { EventEmitter } from '../EventEmitter';
+import type {
+  AutoplayOptions,
+  BonusOption,
+  FreeSpinsState,
+  ModalOptions,
+  ReplayModalOptions,
+  ShellConfig,
+  ShellEvents,
+  ShellMode,
+  ShellState,
+  ThemeConfig,
+} from './types';
+import { createInitialState } from './state';
+import { buildThemeVars } from './theme';
+import { SHELL_CSS, SHELL_ROOT_ID } from './shell.css';
+import { renderBottomBar } from './components/BottomBar';
+import { openSettingsModal } from './components/Settings';
+import { openGameInfoModal } from './components/GameInfo';
+import { openBuyBonusOverlay } from './components/BuyBonus';
+import { openBetModal, openAutoplayModal } from './components/pickers';
+import { buildModal } from './components/Modal';
+import { buildReplayModal } from './components/ReplayModal';
+import { countUp } from './motion';
+import { formatCurrency } from './format';
+import { socialize } from './i18n';
+
+const REMOVE_FADE_MS = 300;
+
+export class GameShell extends EventEmitter<ShellEvents> {
+  readonly config: ShellConfig;
+  state: ShellState;
+  private root: HTMLElement;
+  private styleEl: HTMLStyleElement;
+  private barHost = document.createElement('div');
+  private modalHost = document.createElement('div');
+  private destroyed = false;
+  layout: 'wide' | 'mobile' = 'wide';
+  private ro: ResizeObserver | null = null;
+  private prevBalance = 0;
+  private prevWin = 0;
+  private moneyAnims: Array<() => void> = [];
+  private keysBound = false;
+
+  constructor(config: ShellConfig) {
+    super();
+    this.config = config;
+    this.state = createInitialState(config);
+
+    this.styleEl = document.createElement('style');
+    this.styleEl.textContent = SHELL_CSS;
+
+    this.root = document.createElement('div');
+    this.root.id = SHELL_ROOT_ID;
+    this.root.setAttribute('style', buildThemeVars(config.theme));
+
+    config.mount.append(this.styleEl, this.root);
+    this.barHost.className = 'ge-shell-barhost';
+    this.root.appendChild(this.barHost);
+    this.modalHost.className = 'ge-shell-modalhost';
+    this.root.appendChild(this.modalHost);
+    this.prevBalance = this.state.balance;
+    this.prevWin = this.state.win;
+    this.observeLayout();
+    if (typeof document !== 'undefined') {
+      document.addEventListener('keydown', this.handleKeyDown);
+      this.keysBound = true;
+    }
+    this.render();
+    // re-fit once the bundled webfont swaps in (text metrics change → row width changes)
+    if (typeof document !== 'undefined' && document.fonts) {
+      document.fonts.ready.then(() => { if (!this.destroyed) this.applyFitScale(); });
+    }
+  }
+
+  render(): void {
+    if (this.destroyed) return;
+    this.cancelMoneyAnims(); // stop in-flight count-ups before their nodes are torn down below
+    this.root.classList.toggle('ge-mobile', this.layout === 'mobile');
+    this.barHost.innerHTML = '';
+    this.barHost.appendChild(renderBottomBar(this));
+    this.animateMoney();
+    this.applyFitScale();
+  }
+
+  private cancelMoneyAnims(): void {
+    for (const cancel of this.moneyAnims) cancel();
+    this.moneyAnims = [];
+  }
+
+  /** Keep the WIN pill inline between the groups; float it above when it won't fit. */
+  /**
+   * Landscape bar fills the width when it fits. When it overflows, the WIN pill is
+   * lifted above the bar (unscaled, so it stays readable) and the remaining row is
+   * centred and scaled down to fit — keeping the controls as large as possible.
+   */
+  private applyFitScale(): void {
+    if (this.destroyed) return;
+    const host = this.barHost;
+    const bar = host.querySelector('.ge-shell-bottom') as HTMLElement | null;
+    if (!bar) return;
+    // reset to baseline (idempotent — the pill may have been lifted on a prior pass)
+    const pill = host.querySelector('.ge-winpill') as HTMLElement | null;
+    if (pill && pill.parentElement === host) {                // put a lifted pill back inline
+      const right = bar.querySelector('.ge-zone-right');
+      if (right) bar.insertBefore(pill, right); else bar.appendChild(pill);
+      pill.classList.remove('ge-up');
+    }
+    host.classList.remove('ge-fit');
+    host.style.transform = '';
+    if (this.layout === 'mobile') {
+      // shrink the whole stack to fit narrow phones (mobile-s, or large numbers in a row)
+      let need = 0;
+      for (const row of Array.from(bar.children) as HTMLElement[]) need = Math.max(need, row.scrollWidth);
+      const avail = bar.clientWidth;
+      if (need > avail + 1 && avail > 0) host.style.transform = `scale(${Math.max(0.7, avail / need).toFixed(4)})`;
+      return;
+    }
+    if (bar.scrollWidth <= bar.clientWidth + 1) return;       // bar fits inline → leave it
+    // overflow: lift the pill onto its own row above the bar (flex column → real 8px gap)
+    if (pill) { host.insertBefore(pill, bar); pill.classList.add('ge-up'); }
+    if (bar.scrollWidth <= bar.clientWidth + 1) return;       // bar now fits full-width, pill above
+    // still too wide → shrink the whole stack (pill + bar) to fit, anchored bottom-centre
+    host.classList.add('ge-fit');
+    const natural = bar.offsetWidth, avail = this.root.clientWidth - 12;
+    const s = natural > 0 && avail > 0 ? Math.min(1, avail / natural) : 1;
+    host.style.transform = `translateX(-50%) scale(${s.toFixed(4)})`;
+  }
+
+  /** Spacebar starts a spin — same path as the spin disc. Ignored while a spin is running,
+   *  while autoplay is active, outside base mode, when an overlay/modal is open, or when an
+   *  editable element is focused. `repeat` (held key) is ignored so it can't spam. */
+  private handleKeyDown = (e: KeyboardEvent): void => {
+    if (this.destroyed || e.code !== 'Space' || e.repeat) return;
+    const t = e.target as HTMLElement | null;
+    if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
+    if (this.modalHost.childElementCount > 0) return; // an overlay/modal is open
+    if (this.state.mode !== 'base' || this.state.busy || this.state.autoplay.active) return;
+    e.preventDefault();
+    this.emit('spin');
+  };
+
+  setLayout(layout: 'wide' | 'mobile'): void {
+    if (layout === this.layout) return;
+    this.layout = layout;
+    this.render();
+  }
+
+  /** Resolve a built-in shell string. English is the source; with `isSocial` it is run through
+   *  the social-casino word-swap. Game-supplied strings should NOT be passed through this. */
+  t(text: string): string { return this.config.isSocial ? socialize(text) : text; }
+
+  /** Toggle the social vocabulary at runtime (re-renders the bar; reopen overlays to refresh them). */
+  setSocial(isSocial: boolean): void { this.config.isSocial = isSocial; this.render(); }
+
+  /** Recolour the shell at runtime (e.g. switch dark/light scheme). */
+  setTheme(theme: ThemeConfig): void {
+    this.config.theme = theme;
+    this.root.setAttribute('style', buildThemeVars(theme));
+  }
+
+  private observeLayout(): void {
+    const RO = (globalThis as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
+    if (typeof RO !== 'function') return; // jsdom: stays 'wide'
+    this.ro = new RO((entries) => {
+      const rect = entries[0]?.contentRect;
+      const w = rect?.width ?? 0, h = rect?.height ?? 0;
+      // portrait → stacked mobile; landscape (incl. popouts) → one row, scaled to fit if it overflows
+      this.setLayout(w !== 0 && h > w ? 'mobile' : 'wide');
+      this.applyFitScale();
+      this.fitModals(); // re-scale open card modals when the popout resizes
+    });
+    this.ro.observe(this.root);
+  }
+
+  private animateMoney(): void {
+    const fmt = (n: number) => formatCurrency(n, this.config.currency);
+    const bal = this.barHost.querySelector('[data-ge="balance"]') as HTMLElement | null;
+    const win = this.barHost.querySelector('[data-ge="win"]') as HTMLElement | null;
+    if (bal && this.state.balance !== this.prevBalance) this.moneyAnims.push(animateReadout(bal, this.prevBalance, this.state.balance, fmt));
+    if (win && this.state.win !== this.prevWin) this.moneyAnims.push(animateReadout(win, this.prevWin, this.state.win, fmt));
+    this.prevBalance = this.state.balance;
+    this.prevWin = this.state.win;
+  }
+
+  setBalance(n: number): void { this.state.balance = n; this.render(); }
+  setWin(n: number): void { this.state.win = n; this.render(); }
+  setBet(n: number): void { this.state.bet = n; this.render(); }
+  setMode(mode: ShellMode): void { this.state.mode = mode; this.render(); }
+  setBusy(busy: boolean): void { this.state.busy = busy; this.render(); }
+  setAutoplay(a: AutoplayOptions): void { this.state.autoplay = a; this.render(); }
+  setTurbo(level: number): void { this.state.turbo = level; this.render(); }
+  setBuyBonusEnabled(enabled: boolean): void { this.state.buyBonusEnabled = enabled; this.render(); }
+  setFreeSpins(fs: FreeSpinsState): void { this.state.freeSpins = fs; this.render(); }
+
+  private showModal(el: HTMLElement): void {
+    this.modalHost.innerHTML = '';
+    this.modalHost.appendChild(el);
+    this.fitModals();
+  }
+
+  /** Uniformly scale every open centred card modal (`.ge-sheet`) down so it fits a short/narrow
+   *  popout — the same idea as the bar's fit-scale. Covers the pickers, generic + replay modals,
+   *  AND the buy-bonus confirm (which is hosted inside the overlay, not directly in modalHost).
+   *  Full-screen overlays handle their own responsiveness (scroll + vh-clamp). */
+  fitModals(): void {
+    if (this.destroyed) return;
+    this.modalHost.querySelectorAll('.ge-sheet').forEach((el) => this.fitSheet(el as HTMLElement));
+  }
+
+  /** Fraction of the frame a card modal may occupy; the rest is breathing-room margin. Keeps
+   *  modals from filling a small popout edge-to-edge (so even short pickers scale down there). */
+  private static readonly MODAL_FIT = 0.86;
+
+  private fitSheet(root: HTMLElement): void {
+    const card = root.querySelector('.ge-modal-card') as HTMLElement | null;
+    if (!card) return;
+    card.style.transform = ''; // reset before measuring the natural size
+    const availW = root.clientWidth, availH = root.clientHeight;
+    const w = card.offsetWidth, h = card.offsetHeight;
+    if (w <= 0 || h <= 0 || availW <= 0 || availH <= 0) return;
+    const fit = GameShell.MODAL_FIT;
+    const s = Math.min(1, (availW * fit) / w, (availH * fit) / h);
+    if (s < 0.999) card.style.transform = `scale(${s.toFixed(4)})`;
+  }
+
+  /** Activate a `feature` option (e.g. Ante): the bar shows the effective bet, tinted with
+   *  the feature accent, and BUY BONUS becomes DISABLE. */
+  activateFeature(bonus: BonusOption): void {
+    this.state.activeFeature = bonus;
+    this.emit('featureActivate', { id: bonus.id });
+    this.render();
+  }
+
+  /** Clear the active feature — reverts the bet readout and the BUY BONUS button. */
+  deactivateFeature(): void {
+    const prev = this.state.activeFeature;
+    if (!prev) return;
+    this.state.activeFeature = null;
+    this.emit('featureDeactivate', { id: prev.id });
+    this.render();
+  }
+
+  openMenu(): void { this.emit('menuOpen'); this.openSettings(); }
+  openSettings(): void { this.emit('settingsOpen'); this.showModal(openSettingsModal(this)); }
+  openInfo(): void { this.emit('infoOpen'); this.showModal(openGameInfoModal(this)); }
+  openBuyBonus(): void {
+    const overlay = openBuyBonusOverlay(this);
+    if (overlay) this.showModal(overlay);
+  }
+  /** Open a generic, externally-driven modal (title + body + optional action buttons).
+   *  Each action runs its `on` then closes; the ✕ shows when `availableClose` is true. */
+  openModal(opts: ModalOptions): void { this.showModal(buildModal(opts)); }
+  /** Open the non-dismissable replay summary modal (START REPLAY → onReplay → reopen). */
+  openReplay(opts: ReplayModalOptions): void {
+    if (this.destroyed) return;
+    this.showModal(buildReplayModal(this, opts));
+  }
+
+  /** Bet picker — list of available bets with an accent Confirm. */
+  openBetPicker(): void { this.showModal(openBetModal(this)); }
+  /** Autoplay picker — spin-count list; Confirm starts autoplay. */
+  openAutoplayPicker(): void { this.showModal(openAutoplayModal(this)); }
+
+  destroy(): Promise<void> {
+    if (this.destroyed) return Promise.resolve();
+    this.destroyed = true;
+    this.ro?.disconnect();
+    this.ro = null;
+    if (this.keysBound) { document.removeEventListener('keydown', this.handleKeyDown); this.keysBound = false; }
+    this.cancelMoneyAnims();
+    this.removeAllListeners();
+    this.root.classList.add('ge-shell-hidden');
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        this.root.remove();
+        this.styleEl.remove();
+        resolve();
+      }, REMOVE_FADE_MS);
+    });
+  }
+}
+
+/** Count-up the trailing text node of a .ge-rd readout (keeps its label span).
+ *  Returns the count-up canceler so the shell can stop it before the node is replaced. */
+function animateReadout(el: HTMLElement, from: number, to: number, fmt: (n: number) => string): () => void {
+  const textNode = el.lastChild;
+  if (!textNode || textNode.nodeType !== Node.TEXT_NODE) { el.textContent = fmt(to); return () => {}; }
+  const proxy = {
+    set textContent(v: string) { (textNode as Text).data = v; },
+    get textContent() { return (textNode as Text).data; },
+  } as unknown as HTMLElement;
+  return countUp(proxy, from, to, fmt);
+}

package/src/shell/INTER-LICENSE.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/shell/colors.ts

@@ -0,0 +1,32 @@
+import type { BonusOption } from './types';
+
+/** The single brand accent (purple). The bar accent default (theme.ts) and the buy-a-bonus
+ *  card default both derive from this, so a rebrand only touches one constant. */
+export const BRAND_ACCENT = '#8b5cf6';
+
+/** Type-default accents for bonus options. A per-option `accentColor` overrides these. */
+export const ACCENT_BONUS = BRAND_ACCENT; // brand purple — buy a bonus round
+export const ACCENT_FEATURE = '#f0b429'; // gold — activate a base-game feature (e.g. Ante)
+
+/** The accent a card/button/bet-tint uses: explicit override, else the type default. */
+export function effectiveAccent(b: Pick<BonusOption, 'type' | 'accentColor'>): string {
+  return b.accentColor ?? (b.type === 'feature' ? ACCENT_FEATURE : ACCENT_BONUS);
+}
+
+/** Readable text colour for a solid accent button: dark on light accents, white on dark.
+ *  Only #rgb / #rrggbb are measured; anything else (named, var(), etc.) → white. */
+export function contrastText(accent: string): string {
+  const rgb = parseHex(accent);
+  if (!rgb) return '#ffffff';
+  // Relative luminance (sRGB, perceptual-ish). >0.6 → use dark ink.
+  const lum = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255;
+  return lum > 0.6 ? '#1a1205' : '#ffffff';
+}
+
+function parseHex(hex: string): [number, number, number] | null {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  let h = m[1];
+  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}

package/src/shell/components/BottomBar.ts

@@ -0,0 +1,217 @@
+import type { GameShell } from '../GameShell';
+import { formatCurrency } from '../format';
+import { stepBet, nextTurbo } from '../state';
+import { effectiveAccent, contrastText } from '../colors';
+import { icon, type IconName } from './icons';
+import { twoLine } from './primitives';
+
+/** A floating labelled money readout (balance/win/bet). */
+function readout(ge: string, label: string, value: string): HTMLElement {
+  const el = document.createElement('div');
+  el.dataset.ge = ge;
+  el.className = `ge-rd ge-${ge}`;
+  el.innerHTML = `<span class="ge-lbl">${label}</span>`;
+  el.append(document.createTextNode(value));
+  return el;
+}
+
+// Resting icon is turbo1 (1 line, grey via .ge-iconbtn); engaging turbo adds the
+// .ge-active class which paints it white. Higher levels add more speed lines.
+// level: 0 → turbo1 (grey), 1 → turbo1 (white), 2 → turbo2, 3 → turbo3.
+function turboIcon(level: number): IconName {
+  return (['turbo1', 'turbo1', 'turbo2', 'turbo3'] as const)[Math.max(0, Math.min(3, level))];
+}
+
+/** A borderless icon button. */
+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(); });
+  return b;
+}
+
+export function renderBottomBar(shell: GameShell): HTMLElement {
+  const { state, config } = shell;
+  const fmt = (n: number) => formatCurrency(n, config.currency);
+  const mobile = shell.layout === 'mobile';
+  const bar = document.createElement('div');
+  bar.className = 'ge-shell-bottom';
+  bar.dataset.geMode = state.mode;
+
+  // menu icon button (always)
+  const menu = iconBtn('menu', 'menu', () => shell.openMenu());
+
+  // All three modes share the base plaque layout. FS/replay hide the controls that
+  // don't apply; FS puts the spins counter in the centre pill (where WIN normally is).
+  const isBase = state.mode === 'base';
+  const isFS = state.mode === 'freeSpins';
+
+  const balance = readout('balance', shell.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;
+  const betShown = feature ? state.bet * feature.priceMultiplier : state.bet;
+  const betValue = readout('bet-value', shell.t('Bet'), fmt(betShown));
+  if (feature) { betValue.classList.add('ge-bet-feature'); betValue.style.color = effectiveAccent(feature); }
+  const turbo = config.features.turbo > 0
+    ? iconBtn('turbo', turboIcon(state.turbo), () => onTurbo(shell), state.turbo > 0) : 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;
+  if (isBase) {
+    betDown = iconBtn('bet-down', 'minus', () => onBet(shell, -1));
+    betUp = iconBtn('bet-up', 'plus', () => onBet(shell, 1));
+    betValue.classList.add('ge-betbtn');                       // tap the stake → bet picker
+    betValue.addEventListener('click', () => { if (!betLocked(shell)) shell.openBetPicker(); });
+    spin = spinButton(shell);
+    auto = config.features.autoplay ? autoButton(shell) : null;
+    buy = config.features.buyBonus !== false ? buyBtn(shell) : null;
+  }
+
+  const winEl = state.win > 0 ? readout('win', shell.t('Win'), fmt(state.win)) : null;
+  // FS readouts — the spins counter plus the accumulated/last win for the round.
+  const fsCounter = isFS ? readout('fs-counter', shell.t('Free spins'), `${state.freeSpins.current} / ${state.freeSpins.total}`) : null;
+  const fsTotalWin = isFS ? readout('fs-totalwin', shell.t('Total win'), fmt(state.freeSpins.totalWin)) : null;
+  const fsLastWin = isFS ? readout('fs-lastwin', shell.t('Last win'), fmt(state.freeSpins.lastWin)) : null;
+
+  if (mobile) {
+    // rows: [balance · win/(FS last+total)] · [menu · auto · (spin | FS counter) · turbo · buy] · [− bet +]
+    bar.appendChild(plaque('ge-m-top ge-pl ge-pl-glass', compact([balance, winEl, fsLastWin, fsTotalWin])));
+    const center = isBase ? spin : fsCounter;
+    bar.appendChild(plaque('ge-m-controls ge-pl-dark', compact([menu, auto, center, turbo, buy])));
+    bar.appendChild(plaque('ge-m-bet ge-pl ge-pl-dark', compact([betDown, betValue, betUp])));
+  } else {
+    // LEFT: [menu] ⊐ BUY BONUS coin ⊏ [balance]
+    const menuPlaque = plaque('ge-pl ge-pl-dark ge-pl-menu', [menu]);
+    const balPlaque = plaque('ge-pl ge-pl-glass ge-pl-bal', [balance]);
+    const left = zone('ge-zone-left ge-zone-plaques', ...compact([menuPlaque, buy, balPlaque]));
+
+    // RIGHT: [bet (+ step)] · |divider| · [auto · SPIN · turbo]
+    const betKids: HTMLElement[] = [betValue];
+    if (betUp && betDown) {
+      const step = document.createElement('div'); step.className = 'ge-betstep'; step.append(betUp, betDown);
+      betKids.push(step);
+    }
+    const betPlaque = plaque('ge-pl ge-pl-dark ge-pl-bet', betKids);
+    const divider = document.createElement('div'); divider.className = 'ge-pl-divider';
+    const spinWrap = document.createElement('div'); spinWrap.className = 'ge-spinwrap ge-pl-dark';
+    spinWrap.append(...compact([auto, spin, turbo]));
+    const right = zone('ge-zone-right ge-zone-plaques', betPlaque, divider, spinWrap);
+
+    // MIDDLE: FS → last win · counter · total win plaque; base/replay → WIN pill (lifts on overflow)
+    let middle: HTMLElement | null = null;
+    if (isFS) middle = plaque('ge-pl ge-pl-glass ge-fscount', compact([fsLastWin, fsCounter, fsTotalWin]));
+    else if (winEl) { winEl.classList.add('ge-winpill'); middle = winEl; }
+    bar.append(...compact([left, middle, right]));
+  }
+
+  applyBusy(shell, bar);
+  return bar;
+}
+
+function zone(cls: string, ...children: HTMLElement[]): HTMLElement {
+  const z = document.createElement('div');
+  z.className = `ge-zone ${cls}`;
+  z.append(...children);
+  return z;
+}
+/** A rounded background panel ("plaque") grouping a set of controls. */
+function plaque(cls: string, children: HTMLElement[]): HTMLElement {
+  const d = document.createElement('div');
+  d.className = cls;
+  d.append(...children);
+  return d;
+}
+function compact(items: (HTMLElement | null)[]): HTMLElement[] { return items.filter((x): x is HTMLElement => x !== null); }
+
+function buyBtn(shell: GameShell): HTMLButtonElement {
+  const buy = document.createElement('button');
+  buy.className = 'ge-shell-buybonus'; buy.dataset.ge = 'buybonus';
+  const feature = shell.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>${shell.t('DISABLE')}</span>`;
+    buy.style.background = accent; buy.style.color = contrastText(accent);
+    buy.addEventListener('click', () => { if (!buy.disabled) shell.deactivateFeature(); });
+  } else {
+    buy.innerHTML = `<span>${twoLine(shell.t('BUY BONUS'))}</span>`;
+    buy.addEventListener('click', () => { if (!buy.disabled) shell.openBuyBonus(); });
+  }
+  return buy;
+}
+
+function onBet(shell: GameShell, dir: 1 | -1): void {
+  if (shell.state.busy) return;
+  const next = stepBet(shell.state, dir);
+  if (next !== shell.state.bet) { shell.state.bet = next; shell.emit('betChange', next); shell.render(); }
+}
+function onTurbo(shell: GameShell): void {
+  const next = nextTurbo(shell.state.turbo, shell.config.features.turbo);
+  shell.state.turbo = next; shell.emit('turboChange', next); shell.render();
+}
+function betLocked(shell: GameShell): boolean {
+  return shell.state.busy || shell.state.autoplay.active;
+}
+
+/** SPIN disc — rotates while busy; becomes a STOP + countdown while autoplay runs. */
+function spinButton(shell: GameShell): HTMLButtonElement {
+  const { state } = shell;
+  const sp = document.createElement('button');
+  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) stopAutoplay(shell); });
+  } else {
+    sp.innerHTML = icon('spin');
+    if (state.busy) sp.classList.add('ge-spinning');
+    sp.addEventListener('click', () => { if (!sp.disabled) shell.emit('spin'); });
+  }
+  return sp;
+}
+
+/** Autoplay icon button — opens the count picker; glows accent while running. */
+function autoButton(shell: GameShell): HTMLButtonElement {
+  const active = shell.state.autoplay.active;
+  const b = iconBtn('autoplay', 'autoplay', () => onAutoplay(shell), active);
+  if (active) b.classList.add('ge-glow');
+  return b;
+}
+
+function onAutoplay(shell: GameShell): void {
+  if (shell.state.autoplay.active) stopAutoplay(shell);
+  else shell.openAutoplayPicker();
+}
+function stopAutoplay(shell: GameShell): void {
+  shell.state.autoplay = { active: false, remaining: 0 };
+  shell.emit('autoplayStop');
+  shell.render();
+}
+
+function applyBusy(shell: GameShell, bar: HTMLElement): void {
+  const { busy } = shell.state;
+  const auto = shell.state.autoplay.active;
+  const lockBet = busy || auto;
+  const disable = (ge: string, off: boolean) => {
+    const el = bar.querySelector(`[data-ge="${ge}"]`) as HTMLButtonElement | null;
+    if (el) el.disabled = off;
+  };
+  // also disable the stepper that's already at the end of the bet range
+  const i = shell.state.availableBets.indexOf(shell.state.bet);
+  disable('bet-up', lockBet || i >= shell.state.availableBets.length - 1);
+  disable('bet-down', lockBet || i <= 0);
+  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);
+  const buy = bar.querySelector('[data-ge="buybonus"]') as HTMLButtonElement | null;
+  // disabled for the whole autoplay run (not just per-spin busy) so it doesn't flicker/pulse
+  if (buy) buy.disabled = busy || auto || !shell.state.buyBonusEnabled;
+}