@energy8platform/shell 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energy8platform/shell",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Energy8 branded game shell — one logic core, pluggable html/pixi renderers behind a stable contract.",
   "type": "module",
   "main": "./dist/index.cjs.js",
@@ -40,6 +40,9 @@
     "test:watch": "vitest",
     "prepublishOnly": "npm run build"
   },
+  "dependencies": {
+    "@energy8platform/game-sdk": "^2.9.0"
+  },
   "peerDependencies": {
     "pixi.js": "^8.16.0"
   },

package/src/core/i18n.ts

@@ -1,77 +1,16 @@
+import { applySocialReplacements } from '@energy8platform/game-sdk/social';
 import { LOCALES } from './locales';
 
 // Social-casino language. English is the source (and, for now, the only) language; `socialize`
 // rewrites the restricted gambling vocabulary into social-safe phrasing while preserving case.
 //
-// Ordering matters: the longest / most specific phrases are listed first so they win over their
-// constituent words (e.g. "buy bonus" before "buy", "pay out" before "pay"). The JS alternation
-// tries entries left-to-right at each position, so a phrase earlier in this list takes priority.
-//
-// Conflicting duplicates in the source table are resolved to a single replacement here
-// (betting→playing, total bet→total play, paid out→won, pays out→win).
-const RULES: ReadonlyArray<readonly [string, string]> = [
-  ['be awarded to player’s accounts', 'appear in player’s accounts'],
-  ["be awarded to player's accounts", "appear in player's accounts"],
-  ['place your bets', 'come and play / join in the game'],
-  ['at the cost of', 'for'],
-  ['cost of', 'can be played for'],
-  ['win feature', 'play feature'],
-  ['total bet', 'total play'],
-  ['buy bonus', 'get bonus'],
-  ['bonus buy', 'bonus / feature'],
-  ['pay out', 'win / won'],
-  ['paid out', 'won'],
-  ['pays out', 'win'],
-  ['payout', 'win'], // single word; "pay out" (spaced) is handled above
-  ['paytable', 'win table'],
-  ['paylines', 'winlines'],
-  ['payline', 'winline'],
-  ['bet/s', 'play/s'],
-  ['betting', 'playing'],
-  ['rebet', 'respin'],
-  ['stake', 'play amount'],
-  ['payer', 'winner'],
-  ['bets', 'plays'],
-  ['pays', 'wins'],
-  ['paid', 'won'],
-  ['bought', 'instantly triggered'],
-  ['purchase', 'play'],
-  ['price', 'play'],
-  ['cost', 'play'], // standalone; the "cost of" / "at the cost of" phrases above win first
-  ['deposit', 'get coins'],
-  ['withdraw', 'redeem'],
-  ['currency', 'token'],
-  ['gamble', 'play'],
-  ['wager', 'play'],
-  ['credit', 'balance'],
-  ['money', 'coins'],
-  ['cash', 'coins'],
-  ['fund', 'balance'],
-  ['bet', 'play'],
-  ['pay', 'win'],
-  ['buy', 'play'],
-];
-
-const MAP = new Map(RULES.map(([k, v]) => [k.toLowerCase(), v] as const));
-const escapeRe = (s: string): string => s.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
-// Letter-bounded so we only swap whole words/phrases (e.g. "pay" inside "Autoplay" is left alone).
-const PATTERN = new RegExp(`(?<![A-Za-z])(?:${RULES.map(([k]) => escapeRe(k)).join('|')})(?![A-Za-z])`, 'gi');
-
-/** Carry the matched text's capitalisation onto the replacement: ALL CAPS → upper, Capitalised
- *  (first letter) → capitalise the replacement's first letter, otherwise lower-case as written. */
-function applyCase(match: string, repl: string): string {
-  const letters = match.replace(/[^A-Za-z]/g, '');
-  if (letters && letters === letters.toUpperCase()) return repl.toUpperCase();
-  if (/^[^A-Za-z]*[A-Z]/.test(match)) return repl.charAt(0).toUpperCase() + repl.slice(1);
-  return repl;
-}
+// The replacement dictionary is NOT kept here — it lives in the platform-wide canonical module
+// `@energy8platform/game-sdk/social`, the same table the game canvas and the Stake bridge use, so
+// the chrome never drifts from the games. Modelled as the `en-social` pseudo-locale in createI18n.
 
 /** Rewrite restricted gambling terms in `text` to social-safe phrasing, preserving case. */
 export function socialize(text: string): string {
-  return text.replace(PATTERN, (m) => {
-    const repl = MAP.get(m.toLowerCase());
-    return repl == null ? m : applyCase(m, repl);
-  });
+  return applySocialReplacements(text);
 }
 
 export type Lang = 'de'|'en'|'es'|'fi'|'fr'|'hi'|'id'|'ja'|'ko'|'pl'|'pt'|'ru'|'tr'|'vi'|'zh'|'da';
@@ -87,6 +26,8 @@ export interface I18nOptions { language: string; isSocial?: boolean; messages?:
 export interface I18n { readonly lang: Lang; t(src: string): string; }
 
 export function createI18n(opts: I18nOptions): I18n {
+  // Social is the `en-social` pseudo-locale: it rewrites the English source. Non-English locales are
+  // authored social-safe already, so `socialize` only runs on the English source string.
   const lang = normalizeLang(opts.language);
   const t = (src: string): string => {
     if (lang === 'en') return opts.isSocial ? socialize(src) : src;

package/src/core/locales.ts

@@ -5,7 +5,7 @@
 
 import type { Lang } from './i18n';
 
-export const LOCALES: Partial<Record<Lang, Record<string, string>>> = {
+const BASE_LOCALES: Partial<Record<Lang, Record<string, string>>> = {
   da: {
     DISCLAIMER: 'Ansvarsfraskrivelse',
     Activate: 'Aktivér',
@@ -862,3 +862,129 @@ export const LOCALES: Partial<Record<Lang, Record<string, string>>> = {
     'Winning shapes': '赢利图形',
   },
 };
+
+// ── Legal disclaimer body (Stake canonical lines) ──────────────────────────────────────────────
+// Kept in a separate block (grouped per language, not interleaved) because these are long legal
+// sentences, MACHINE-TRANSLATED and pending native QA. The keys are the exact English source lines
+// the Stake bridge emits (see @energy8platform/stake-bridge `buildDisclaimer`). The copyright/brand
+// line ("TM and © {year} Stake Engine.") is deliberately omitted — it renders verbatim.
+const D = {
+  L1: 'Malfunction voids all wins and plays.',
+  L2: 'A consistent internet connection is required. In the event of a disconnection, reload the game to finish any uncompleted rounds.',
+  L3: 'The expected return is calculated over many plays.',
+  L4: 'The game display is not representative of any physical device and is for illustrative purposes only.',
+  L5: 'Winnings are settled according to the amount received from the Remote Game Server and not from events within the web browser.',
+} as const;
+
+const DISCLAIMER_LOCALES: Partial<Record<Lang, Record<string, string>>> = {
+  da: {
+    [D.L1]: 'Fejlfunktion annullerer alle gevinster og spil.',
+    [D.L2]: 'En stabil internetforbindelse er påkrævet. I tilfælde af en afbrydelse skal du genindlæse spillet for at afslutte eventuelle uafsluttede runder.',
+    [D.L3]: 'Det forventede afkast beregnes over mange spil.',
+    [D.L4]: 'Spillets visning svarer ikke til nogen fysisk enhed og er kun til illustrative formål.',
+    [D.L5]: 'Gevinster afregnes i henhold til det beløb, der modtages fra Remote Game Server, og ikke ud fra hændelser i webbrowseren.',
+  },
+  de: {
+    [D.L1]: 'Eine Fehlfunktion macht alle Gewinne und Spiele ungültig.',
+    [D.L2]: 'Eine stabile Internetverbindung ist erforderlich. Im Falle einer Unterbrechung lade das Spiel neu, um nicht abgeschlossene Runden zu beenden.',
+    [D.L3]: 'Der erwartete Ertrag wird über viele Spiele berechnet.',
+    [D.L4]: 'Die Spieldarstellung entspricht keinem physischen Gerät und dient nur zur Veranschaulichung.',
+    [D.L5]: 'Gewinne werden gemäß dem vom Remote Game Server erhaltenen Betrag abgerechnet und nicht anhand von Ereignissen im Webbrowser.',
+  },
+  es: {
+    [D.L1]: 'Un fallo anula todas las ganancias y jugadas.',
+    [D.L2]: 'Se requiere una conexión a internet estable. En caso de desconexión, vuelve a cargar el juego para terminar las rondas no completadas.',
+    [D.L3]: 'El retorno esperado se calcula a lo largo de muchas jugadas.',
+    [D.L4]: 'La visualización del juego no representa ningún dispositivo físico y tiene fines meramente ilustrativos.',
+    [D.L5]: 'Las ganancias se liquidan según el importe recibido del Remote Game Server y no según los eventos ocurridos en el navegador web.',
+  },
+  fi: {
+    [D.L1]: 'Toimintahäiriö mitätöi kaikki voitot ja pelit.',
+    [D.L2]: 'Vakaa internetyhteys vaaditaan. Jos yhteys katkeaa, lataa peli uudelleen suorittaaksesi keskeneräiset kierrokset loppuun.',
+    [D.L3]: 'Odotettu palautus lasketaan monen pelin perusteella.',
+    [D.L4]: 'Pelin näkymä ei vastaa mitään fyysistä laitetta ja on tarkoitettu vain havainnollistamiseen.',
+    [D.L5]: 'Voitot maksetaan Remote Game Serverin ilmoittaman summan mukaan, ei verkkoselaimen tapahtumien perusteella.',
+  },
+  fr: {
+    [D.L1]: 'Un dysfonctionnement annule tous les gains et les parties.',
+    [D.L2]: 'Une connexion internet stable est requise. En cas de déconnexion, rechargez le jeu pour terminer les tours non achevés.',
+    [D.L3]: 'Le retour attendu est calculé sur de nombreuses parties.',
+    [D.L4]: "L'affichage du jeu ne représente aucun appareil physique et sert uniquement à des fins d'illustration.",
+    [D.L5]: 'Les gains sont réglés en fonction du montant reçu du Remote Game Server et non des événements survenus dans le navigateur web.',
+  },
+  hi: {
+    [D.L1]: 'खराबी सभी जीत और खेलों को रद्द कर देती है।',
+    [D.L2]: 'एक स्थिर इंटरनेट कनेक्शन आवश्यक है। कनेक्शन टूटने की स्थिति में, अधूरे राउंड पूरे करने के लिए गेम को फिर से लोड करें।',
+    [D.L3]: 'अपेक्षित रिटर्न की गणना कई खेलों पर की जाती है।',
+    [D.L4]: 'गेम का प्रदर्शन किसी भौतिक उपकरण का प्रतिनिधित्व नहीं करता और केवल उदाहरण के उद्देश्य से है।',
+    [D.L5]: 'जीत का निपटान Remote Game Server से प्राप्त राशि के अनुसार किया जाता है, न कि वेब ब्राउज़र के भीतर की घटनाओं के आधार पर।',
+  },
+  id: {
+    [D.L1]: 'Malfungsi membatalkan semua kemenangan dan permainan.',
+    [D.L2]: 'Koneksi internet yang stabil diperlukan. Jika terjadi pemutusan koneksi, muat ulang permainan untuk menyelesaikan ronde yang belum selesai.',
+    [D.L3]: 'Perkiraan pengembalian dihitung dari banyak permainan.',
+    [D.L4]: 'Tampilan permainan tidak mewakili perangkat fisik mana pun dan hanya untuk tujuan ilustrasi.',
+    [D.L5]: 'Kemenangan diselesaikan sesuai dengan jumlah yang diterima dari Remote Game Server dan bukan dari peristiwa di dalam peramban web.',
+  },
+  ja: {
+    [D.L1]: '誤作動が発生した場合、すべての勝利とプレイは無効となります。',
+    [D.L2]: '安定したインターネット接続が必要です。接続が切断された場合は、ゲームを再読み込みして未完了のラウンドを終了してください。',
+    [D.L3]: '期待される還元率は多数のプレイにわたって計算されます。',
+    [D.L4]: 'ゲームの表示は物理的な機器を表すものではなく、あくまで説明のためのものです。',
+    [D.L5]: '賞金はウェブブラウザ内のイベントではなく、Remote Game Server から受信した金額に基づいて確定されます。',
+  },
+  ko: {
+    [D.L1]: '오작동이 발생하면 모든 당첨과 플레이가 무효가 됩니다.',
+    [D.L2]: '안정적인 인터넷 연결이 필요합니다. 연결이 끊긴 경우 게임을 새로 고침하여 완료되지 않은 라운드를 마치십시오.',
+    [D.L3]: '예상 환급률은 여러 번의 플레이에 걸쳐 계산됩니다.',
+    [D.L4]: '게임 화면은 실제 기기를 나타내지 않으며 설명을 위한 용도로만 제공됩니다.',
+    [D.L5]: '당첨금은 웹 브라우저 내의 이벤트가 아니라 Remote Game Server에서 수신한 금액에 따라 정산됩니다.',
+  },
+  pl: {
+    [D.L1]: 'Awaria unieważnia wszystkie wygrane i gry.',
+    [D.L2]: 'Wymagane jest stabilne połączenie internetowe. W przypadku rozłączenia załaduj grę ponownie, aby dokończyć niezakończone rundy.',
+    [D.L3]: 'Oczekiwany zwrot jest obliczany na przestrzeni wielu gier.',
+    [D.L4]: 'Wyświetlanie gry nie odzwierciedla żadnego fizycznego urządzenia i służy wyłącznie celom ilustracyjnym.',
+    [D.L5]: 'Wygrane są rozliczane zgodnie z kwotą otrzymaną z Remote Game Server, a nie na podstawie zdarzeń w przeglądarce internetowej.',
+  },
+  pt: {
+    [D.L1]: 'Uma falha anula todos os ganhos e jogadas.',
+    [D.L2]: 'É necessária uma ligação à internet estável. Em caso de desconexão, recarregue o jogo para concluir as rondas não terminadas.',
+    [D.L3]: 'O retorno esperado é calculado ao longo de muitas jogadas.',
+    [D.L4]: 'A apresentação do jogo não representa nenhum dispositivo físico e destina-se apenas a fins ilustrativos.',
+    [D.L5]: 'Os ganhos são liquidados de acordo com o valor recebido do Remote Game Server e não com base em eventos ocorridos no navegador web.',
+  },
+  ru: {
+    [D.L1]: 'Сбой аннулирует все выигрыши и игры.',
+    [D.L2]: 'Требуется стабильное интернет-соединение. В случае разрыва соединения перезагрузите игру, чтобы завершить незаконченные раунды.',
+    [D.L3]: 'Ожидаемый возврат рассчитывается на основе множества игр.',
+    [D.L4]: 'Отображение игры не соответствует какому-либо физическому устройству и приводится исключительно в иллюстративных целях.',
+    [D.L5]: 'Выигрыши начисляются в соответствии с суммой, полученной от Remote Game Server, а не на основе событий в веб-браузере.',
+  },
+  tr: {
+    [D.L1]: 'Arıza, tüm kazançları ve oyunları geçersiz kılar.',
+    [D.L2]: 'Kararlı bir internet bağlantısı gereklidir. Bağlantının kesilmesi durumunda, tamamlanmamış turları bitirmek için oyunu yeniden yükleyin.',
+    [D.L3]: 'Beklenen getiri, çok sayıda oyun üzerinden hesaplanır.',
+    [D.L4]: 'Oyun görüntüsü herhangi bir fiziksel cihazı temsil etmez ve yalnızca açıklama amaçlıdır.',
+    [D.L5]: "Kazançlar, web tarayıcısındaki olaylara göre değil, Remote Game Server'dan alınan tutara göre ödenir.",
+  },
+  vi: {
+    [D.L1]: 'Sự cố sẽ hủy bỏ mọi phần thắng và lượt chơi.',
+    [D.L2]: 'Cần có kết nối internet ổn định. Trong trường hợp mất kết nối, hãy tải lại trò chơi để hoàn tất các vòng chưa hoàn thành.',
+    [D.L3]: 'Lợi nhuận kỳ vọng được tính trên nhiều lượt chơi.',
+    [D.L4]: 'Hiển thị của trò chơi không đại diện cho bất kỳ thiết bị vật lý nào và chỉ nhằm mục đích minh họa.',
+    [D.L5]: 'Phần thắng được thanh toán theo số tiền nhận được từ Remote Game Server chứ không dựa trên các sự kiện trong trình duyệt web.',
+  },
+  zh: {
+    [D.L1]: '故障将使所有奖金和游戏无效。',
+    [D.L2]: '需要稳定的网络连接。如果连接中断，请重新加载游戏以完成未结束的回合。',
+    [D.L3]: '预期回报是根据多次游戏计算得出的。',
+    [D.L4]: '游戏显示并不代表任何实体设备，仅供说明之用。',
+    [D.L5]: '奖金根据从 Remote Game Server 收到的金额结算，而非依据网页浏览器内的事件。',
+  },
+};
+
+/** Merge the base UI catalog with the separately-authored disclaimer lines, per language. */
+export const LOCALES: Partial<Record<Lang, Record<string, string>>> = Object.fromEntries(
+  (Object.keys(BASE_LOCALES) as Lang[]).map((l) => [l, { ...BASE_LOCALES[l], ...DISCLAIMER_LOCALES[l] }]),
+);

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.2.1';
+export const PACKAGE_VERSION = '0.3.0';

package/src/ui/html/shell.css.ts

@@ -397,6 +397,17 @@ export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval { min-width:clamp(50px,14cqh,66px); }
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval b { font-size:clamp(9px,2.5cqh,11px); }
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval span { font-size:clamp(5px,1.25cqh,6px); }
+/* Popout S (very short landscape, e.g. 400×225): the height-fit shrank the cards' descriptions to an
+   unreadable ~4px floor with nothing to scroll. Below a ~340px frame height, drop the shrink-to-fit and
+   switch the (non-mobile) buy-bonus to a READABLE vertical stack that scrolls vertically — like mobile.
+   Query the overlay's ge-bb-frame size container so it tracks the popout frame, not the browser window. */
+@container ge-bb-frame (max-height: 340px) {
+  #${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-scroll { overflow-y:auto; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-body { justify-content:flex-start; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) .ge-bb-grid { flex-direction:column; align-items:center; overflow:visible; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) .ge-bb-grid .ge-bonus-card {
+    flex:0 0 auto; width:18em; font-size:min(12px, calc(84cqw / 18)); }
+}
 
 /* ═══ desktop control bar — one continuous dark panel; white-disc buttons; BUY BONUS outside-left ═══ */
 /* the dark surface fills the row width (BUY BONUS sits outside, to its left) */

package/src/ui/pixi/components/BuyBonus.ts

@@ -10,6 +10,11 @@ import { clamp } from '../primitives/overlay';
 import { attachHover } from '../primitives/widgets';
 import { roundedPath } from '../primitives/flex';
 
+/** Below this frame height (px), a wide/landscape popout (e.g. Popout S 400×225) stacks its cards
+ *  vertically and scrolls — like mobile — so descriptions stay readable instead of shrinking to a
+ *  ~4px floor. Wide + taller frames (Popout L and up) keep the centred horizontal row. */
+const SHORT_STACK_H = 340;
+
 /** Buy-bonus overlay — art-forward cards (one per option), a live bet footer, and a confirm modal.
  *  Returns null when there are no bonus options. */
 export function openBuyBonus(host: PixiComponentContext): ShellLayer | null {
@@ -46,6 +51,8 @@ class BuyBonusOverlay extends Container implements ShellLayer {
   private cardEntries: CardEntry[] = [];
   /** Keyboard focus index into the affordable subset of cardEntries. -1 = none. */
   private focusIndex = -1;
+  /** true when cards are stacked vertically (mobile, or a short landscape popout). */
+  private stack = false;
   // Drag-scroll state. The drag is handled on the (unmasked) overlay, not the masked strip — a mask
   // prunes pointer events outside its band, stalling globalpointermove mid-drag so later cards never
   // scroll into reach. The overlay sees the whole screen, so the scroll runs the full range.
@@ -155,7 +162,10 @@ class BuyBonusOverlay extends Container implements ShellLayer {
 
   private buildCards(): void {
     this.strip.removeChildren().forEach((c) => c.destroy({ children: true }));
-    const mobile = this.host.layout === 'mobile';
+    // Stack (readable vertical list + scroll) on mobile OR on a short landscape popout; a shrink-to-fit
+    // horizontal row on wide + tall frames. See SHORT_STACK_H.
+    const stack = this.host.layout === 'mobile' || this.h <= SHORT_STACK_H;
+    this.stack = stack;
     const top = this.headerH + 6;
     const areaH = this.h - top - this.footerH - 6;
     const gap = 14;
@@ -166,13 +176,13 @@ class BuyBonusOverlay extends Container implements ShellLayer {
     // N cards (+ gaps + 24px side margins) fit the frame width. min() of the two = the binding fit.
     // Floor 4 is a last-resort so a 400×225 popout still shows the CTA (then X-drag scrolls the slack).
     const emH = 3.4 * (areaH / 100);
-    const emW = mobile
+    const emW = stack
       ? (this.w - 48) / 18 // vertical stack: a single card spans the width
       : (this.w - 48 - (n - 1) * gap) / (18 * n); // row: N cards + gaps fit the frame width
-    const em = mobile ? Math.min(12, emW) : clamp(4, Math.min(emH, emW), 12);
+    const em = stack ? Math.min(12, emW) : clamp(4, Math.min(emH, emW), 12);
     const cardW = Math.min(18 * em, this.w - 48);
 
-    const cards = this.bonuses.map((b) => this.buildCard(b, cardW, em, mobile, areaH));
+    const cards = this.bonuses.map((b) => this.buildCard(b, cardW, em, stack, areaH));
     const cardH = Math.max(...cards.map((c) => c.height));
     for (const c of cards) c.setHeight(cardH);
 
@@ -193,7 +203,7 @@ class BuyBonusOverlay extends Container implements ShellLayer {
     }
 
     this.stripMask.clear();
-    if (mobile) {
+    if (stack) {
       // vertical stack — scroll vertically if it overflows (simple drag)
       let y = 0;
       const colX = (this.w - cardW) / 2;
@@ -220,7 +230,7 @@ class BuyBonusOverlay extends Container implements ShellLayer {
   }
 
   // ── one card ──────────────────────────────────────────────────────────────
-  private buildCard(bonus: BonusOption, cardW: number, em: number, mobile: boolean, areaH: number): CardView {
+  private buildCard(bonus: BonusOption, cardW: number, em: number, stack: boolean, areaH: number): CardView {
     const accent = effectiveAccent(bonus);
     const ink = contrastText(accent);
     const price = bonus.priceMultiplier * this.host.state.bet;
@@ -255,7 +265,7 @@ class BuyBonusOverlay extends Container implements ShellLayer {
       ctaLabel: this.host.t(bonus.type === 'feature' ? 'Activate' : 'Buy'),
       onSelect: select,
     });
-    void mobile;
+    void stack;
     void areaH;
     return card;
   }
@@ -435,7 +445,8 @@ class BuyBonusOverlay extends Container implements ShellLayer {
    *  Browse phase: arrows move focus; +/- step bet; Enter/Space opens confirm; Escape closes.
    *  Confirm phase: Enter/Space buys/activates; Escape returns to browse. */
   onKey(e: KeyboardEvent): boolean {
-    const mobile = this.host.layout === 'mobile';
+    // Vertical stack (mobile / short popout) → Up/Down navigate; horizontal row → Left/Right.
+    const stack = this.stack;
 
     if (this.confirm && this.confirmBonus) {
       // ── Confirm phase ──
@@ -467,8 +478,8 @@ class BuyBonusOverlay extends Container implements ShellLayer {
     if (bet !== null) { this.stepBetBy(bet); return true; }
 
     // Determine navigation direction from key code + layout
-    const fwdKey = e.code === 'ArrowRight' || (mobile && e.code === 'ArrowDown');
-    const bwdKey = e.code === 'ArrowLeft' || (mobile && e.code === 'ArrowUp');
+    const fwdKey = e.code === 'ArrowRight' || (stack && e.code === 'ArrowDown');
+    const bwdKey = e.code === 'ArrowLeft' || (stack && e.code === 'ArrowUp');
 
     if (fwdKey) {
       if (last < 0) return true;