@energy8platform/platform-core 0.25.0 → 0.25.2

package/dist/index.esm.js

@@ -849,6 +849,10 @@ function createCSSPreloader(container, config) {
       50%      { opacity: 1; }
     }
   `;
+    // The absolute overlay needs a positioned ancestor. Only override a STATIC container, and
+    // remember the prior inline value so removeCSSPreloader can restore it (an inline `relative`
+    // left behind would beat the game's `#game { position: fixed; inset: 0 }` and collapse it).
+    const prevPosition = container.style.position;
     container.style.position = container.style.position || 'relative';
     container.appendChild(styleEl);
     container.appendChild(overlay);
@@ -859,6 +863,7 @@ function createCSSPreloader(container, config) {
         // We still record state so removeCSSPreloader works.
         state = {
             container,
+            prevPosition,
             overlay,
             styleEl,
             rectEl: null,
@@ -877,6 +882,7 @@ function createCSSPreloader(container, config) {
     }
     state = {
         container,
+        prevPosition,
         overlay,
         styleEl,
         rectEl,
@@ -955,7 +961,7 @@ function removeCSSPreloader(_container) {
         state.tapResolve = null;
     }
     state.removed = true;
-    const { overlay, styleEl } = state;
+    const { overlay, styleEl, container, prevPosition } = state;
     overlay.classList.add('ge-preloader-hidden');
     return new Promise((resolve) => {
         let settled = false;
@@ -965,6 +971,9 @@ function removeCSSPreloader(_container) {
             settled = true;
             overlay.remove();
             styleEl.remove();
+            // Restore the container's original inline position so the game's own layout
+            // (e.g. `#game { position: fixed; inset: 0 }`) is no longer defeated by our inline override.
+            container.style.position = prevPosition;
             state = null;
             resolve();
         };
@@ -1318,15 +1327,30 @@ const SHELL_CSS = SHELL_FONT_CSS + `
 /* the buy-bonus scroll area is a SIZE CONTAINER, so the cards' cqh units measure the overlay
    (the popout frame) and not the browser window — cards fit without any vertical scroll. */
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-scroll { container-type:size; }
+/* Popout / landscape: the horizontal card strip must be the ONLY scroll axis. The cqh-sized cards
+   are meant to fit the overlay height (no vertical scroll), but the old 7px font floor stopped them
+   shrinking on the tiniest popouts — so they spilled past the frame and the overlay grew a SECOND,
+   vertical scrollbar (scrollable in both directions). Two changes keep it single-axis:
+     1. the card font floor drops (below) so cards actually fit the frame height; and
+     2. vertical scrolling is locked off as a belt-and-braces guard, with the strip centred (the body
+        fills the frame and centres the grid) so any sub-pixel slack splits evenly instead of clipping
+        the price/CTA off the bottom.
+   This mirrors the pixi shell, which masks the cards and drag-scrolls on the X axis alone. (Centring
+   lives on the body, not the scroll box, so the grid keeps its width and its own X-scroll.) */
+#${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-scroll { overflow-y:hidden; }
+#${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-body {
+  min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
 /* buy-bonus uses the FULL overlay width (no 800px centre cap) so the card row isn't cropped at
    the sides; small horizontal padding keeps the cards off the screen edges. */
-#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-body { max-width:none; padding:clamp(8px,3cqh,16px) clamp(12px,3vw,28px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-body { max-width:none; padding:clamp(6px,2.5cqh,16px) clamp(12px,3vw,28px); }
 #${SHELL_ROOT_ID} .ge-bb-grid { display:flex; gap:14px; justify-content:safe center; overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
   scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
 /* the one knob that scales the whole card — cqh measures the overlay (popout frame), not the
-   browser window, so cards shrink to fit the real container height. */
+   browser window, so cards shrink to fit the real container height. The floor is deliberately tiny:
+   on a 400×225 popout the whole card (incl. the CTA) only fits below ~5px, and a fully visible,
+   single-axis-scrolling card beats a bigger one whose button is clipped or needs a 2nd scrollbar. */
 #${SHELL_ROOT_ID} .ge-bb-grid .ge-bonus-card { flex:0 0 18em; scroll-snap-align:start;
-  font-size:clamp(7px, 3.6cqh, 12px); }
+  font-size:clamp(4px, 3.4cqh, 12px); }
 /* mobile: vertical stack at a fixed, readable size — scroll the list, don't shrink the cards */
 #${SHELL_ROOT_ID}.ge-mobile .ge-bb-grid { display:flex; flex-direction:column; gap:14px; overflow:visible; }
 #${SHELL_ROOT_ID}.ge-mobile .ge-bb-grid .ge-bonus-card { flex:0 0 auto; font-size:12px; }
@@ -1379,6 +1403,24 @@ const SHELL_CSS = SHELL_FONT_CSS + `
 #${SHELL_ROOT_ID} .ge-bb-betval span { display:block; font-size:7px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
   color:var(--shell-plaque-label); }
 #${SHELL_ROOT_ID} .ge-bb-betval b { font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; }
+/* Popout S (short landscape): the header (title + ✕) and the bet footer are fixed-px and dwarf the
+   shrunk cards. Scale the buy-bonus chrome down with the FRAME height. Units are cqh (the overlay is a
+   size container below), NOT vh — vh tracks the browser window, which only equals the frame inside the
+   Stake iframe, so it wouldn't shrink in the demo's device-frame view. Coefficients hit the normal cap
+   by ~450px tall (Popout L) and shrink below that, to a readable floor at Popout S (225px). */
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] { container:ge-bb-frame / size; }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-head { padding:clamp(3px,1.33cqh,6px) 10px; }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-title { font-size:clamp(11px,3.5cqh,16px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-spacer { width:clamp(24px,7cqh,32px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-nav { width:clamp(24px,7cqh,32px); height:clamp(24px,7cqh,32px);
+  font-size:clamp(14px,4cqh,18px); border-radius:clamp(7px,2cqh,9px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betbar { padding:clamp(2px,.9cqh,4px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betpill { padding:clamp(2px,.67cqh,3px) clamp(4px,1.1cqh,5px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betstep { width:clamp(24px,7cqh,32px); height:clamp(24px,7cqh,32px);
+  font-size:clamp(15px,4.4cqh,20px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval { min-width:clamp(62px,17.5cqh,80px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval b { font-size:clamp(11px,3.1cqh,14px); }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval span { font-size:clamp(6px,1.55cqh,7px); }
 
 /* ═══ base/wide plaque bar — grouped dark + glass panels (reference-style) ═══ */
 #${SHELL_ROOT_ID} .ge-zone-plaques { gap:0; }                     /* panels connect; buttons overlap */
@@ -1952,7 +1994,7 @@ function openSettingsModal(shell) {
 
 // AUTO-GENERATED by scripts/gen-version.mjs — do not edit. Mirrors package.json "version".
 /** The @energy8platform/platform-core package version, stamped at build time. */
-const PACKAGE_VERSION = '0.25.0';
+const PACKAGE_VERSION = '0.25.2';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 function openGameInfoModal(shell) {
@@ -2607,7 +2649,7 @@ function buildReplayModal(shell, opts) {
     row('Base bet', fmt(bet));
     row('Cost multiplier', `${costMultiplier}×`);
     row('Total cost', fmt(bet * costMultiplier));
-    row('Payout multiplier', `${payoutMultiplier}×`);
+    row('Win multiplier', `${payoutMultiplier}×`);
     row('Total win', fmtWin(payoutMultiplier * bet), true);
     ui.body.appendChild(rows);
     const actions = document.createElement('div');
@@ -2692,6 +2734,7 @@ const RULES = [
     ['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'],
@@ -2846,20 +2889,29 @@ class GameShell extends EventEmitter {
             }
             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) {
+        // Scale the bar to the SCREEN, not the mode. Two independent limits, whichever bites harder:
+        //  • width  — the row mustn't exceed the frame (base's wide row hits this); and
+        //  • height — the bar mustn't eat more than BAR_MAX_FRACTION of a SHORT frame. Replay's narrow
+        //    row never overflows width, so without this it stayed full-size and ate ~47% of a Popout S
+        //    frame, overlapping the reels — while base (wide row) shrank to ~27%. Now every mode tracks
+        //    the frame size the same way.
+        // Lift the WIN pill onto its own line first when the full-width row overflows (controls stay big).
+        if (pill && bar.scrollWidth > bar.clientWidth + 1) {
             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
+        // Measure natural CONTENT size — `.ge-fit` makes the bar shrink-to-content (width:max-content).
         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)})`;
+        const availW = this.root.clientWidth - 12;
+        const availH = this.root.clientHeight * GameShell.BAR_MAX_FRACTION;
+        const naturalW = host.offsetWidth, naturalH = host.offsetHeight;
+        const s = Math.min(1, naturalW > 0 ? availW / naturalW : 1, naturalH > 0 ? availH / naturalH : 1);
+        if (s < 0.999) {
+            host.style.transform = `translateX(-50%) scale(${s.toFixed(4)})`;
+        }
+        else {
+            host.classList.remove('ge-fit'); // fits full-size → restore the normal full-width bar
+        }
     }
     /** Spacebar starts a spin — same path as the spin disc. Ignored when `features.spacebar` is
      *  false, while a spin is running, while autoplay is active, outside base mode, when an
@@ -2972,6 +3024,9 @@ class GameShell extends EventEmitter {
     /** 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). */
     static MODAL_FIT = 0.86;
+    /** Max fraction of the frame HEIGHT the bottom bar may occupy before it fit-scales down. Keeps the
+     *  bar a consistent, small slice on short popouts in EVERY mode (base ≈ this already via width). */
+    static BAR_MAX_FRACTION = 0.27;
     fitSheet(root) {
         const card = root.querySelector('.ge-modal-card');
         if (!card)