@open-slot-ui/pixi 0.8.1 → 0.8.3

package/dist/index.d.cts

@@ -735,6 +735,58 @@ declare function mountHud(app: Application, spec?: UISpec, opts?: HudOptions): B
  */
 declare function mountInfoMenu(app: Application, ui: OpenUI): () => void;
 
+/** A buy-feature card. */
+interface FeatureSpec {
+    id: string;
+    name: string;
+    variant: 'buy' | 'boost';
+    /** Price as a multiple of the current bet (× bet). */
+    cost: number;
+    /** Card image URL (or data URI). Optional — a neutral gradient is used when absent. */
+    image?: string;
+}
+/** Configurable behavior of the activatable bet-boost cards. */
+interface BuyFeatureOptions {
+    /** `'single'` → only one boost active at a time · `'multi'` → combine them. Default `'multi'`. */
+    activation?: 'single' | 'multi';
+    /** When any boost is active, disable the Buy buttons. Default `false`. */
+    activationBlocksBuy?: boolean;
+    /** Host hook for a confirmed Buy (the modal has just closed): deduct + start the feature. */
+    onBuy?: (id: string, cost: number) => void;
+    /** Host hook whenever the active-boost set changes (the modal stays open). */
+    onActivate?: (activeIds: string[], id: string, active: boolean) => void;
+    /** BASE bet source for pricing. Default reads ui.bet — pass this when ui.bet
+     *  displays a modified EFFECTIVE stake (boost active) instead of the base bet. */
+    getBet?: () => number;
+}
+/** Mount the buy-feature modal. Returns a leak-free teardown. */
+declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
+
+/** Minimal HUD surface the confirm needs — the translator + theme font. */
+interface ConfirmUI {
+    t(key: string, params?: Record<string, string | number>): string;
+    theme: {
+        type: {
+            family: string;
+        };
+    };
+}
+interface ConfirmOptions {
+    /** Heading (already resolved text, or an i18n key). Default `Buy Feature`. */
+    title?: string;
+    /** Body message (already resolved). */
+    message: string;
+    /** Confirm button label (resolved text or i18n key). Default `openui.confirm`. */
+    confirmLabel?: string;
+    /** Cancel button label. Default `openui.cancel`. */
+    cancelLabel?: string;
+}
+/**
+ * Show the universal confirm dialog. Resolves `true` on Confirm, `false` on Cancel / backdrop
+ * / Escape. Self-mounting + self-cleaning; layers above everything (z-index above the buy modal).
+ */
+declare function showConfirm(ui: ConfirmUI, opts: ConfirmOptions): Promise<boolean>;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -817,4 +869,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, type ConfirmOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm, svgSpinSkin };

package/dist/index.d.ts

@@ -735,6 +735,58 @@ declare function mountHud(app: Application, spec?: UISpec, opts?: HudOptions): B
  */
 declare function mountInfoMenu(app: Application, ui: OpenUI): () => void;
 
+/** A buy-feature card. */
+interface FeatureSpec {
+    id: string;
+    name: string;
+    variant: 'buy' | 'boost';
+    /** Price as a multiple of the current bet (× bet). */
+    cost: number;
+    /** Card image URL (or data URI). Optional — a neutral gradient is used when absent. */
+    image?: string;
+}
+/** Configurable behavior of the activatable bet-boost cards. */
+interface BuyFeatureOptions {
+    /** `'single'` → only one boost active at a time · `'multi'` → combine them. Default `'multi'`. */
+    activation?: 'single' | 'multi';
+    /** When any boost is active, disable the Buy buttons. Default `false`. */
+    activationBlocksBuy?: boolean;
+    /** Host hook for a confirmed Buy (the modal has just closed): deduct + start the feature. */
+    onBuy?: (id: string, cost: number) => void;
+    /** Host hook whenever the active-boost set changes (the modal stays open). */
+    onActivate?: (activeIds: string[], id: string, active: boolean) => void;
+    /** BASE bet source for pricing. Default reads ui.bet — pass this when ui.bet
+     *  displays a modified EFFECTIVE stake (boost active) instead of the base bet. */
+    getBet?: () => number;
+}
+/** Mount the buy-feature modal. Returns a leak-free teardown. */
+declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
+
+/** Minimal HUD surface the confirm needs — the translator + theme font. */
+interface ConfirmUI {
+    t(key: string, params?: Record<string, string | number>): string;
+    theme: {
+        type: {
+            family: string;
+        };
+    };
+}
+interface ConfirmOptions {
+    /** Heading (already resolved text, or an i18n key). Default `Buy Feature`. */
+    title?: string;
+    /** Body message (already resolved). */
+    message: string;
+    /** Confirm button label (resolved text or i18n key). Default `openui.confirm`. */
+    confirmLabel?: string;
+    /** Cancel button label. Default `openui.cancel`. */
+    cancelLabel?: string;
+}
+/**
+ * Show the universal confirm dialog. Resolves `true` on Confirm, `false` on Cancel / backdrop
+ * / Escape. Self-mounting + self-cleaning; layers above everything (z-index above the buy modal).
+ */
+declare function showConfirm(ui: ConfirmUI, opts: ConfirmOptions): Promise<boolean>;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -817,4 +869,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, type ConfirmOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm, svgSpinSkin };

package/dist/index.js

@@ -562,10 +562,67 @@ var OHM_CSS = `
 .ohm-group { margin: 8px 0; }
 `;
 
+// src/confirmModal.ts
+var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function showConfirm(ui, opts) {
+  return new Promise((resolve) => {
+    const host2 = document.createElement("div");
+    host2.className = "osc-confirm";
+    host2.style.setProperty("--font", ui.theme.type.family);
+    const title = ui.t(opts.title ?? "Buy Feature");
+    const yes = ui.t(opts.confirmLabel ?? "openui.confirm");
+    const no = ui.t(opts.cancelLabel ?? "openui.cancel");
+    host2.innerHTML = `
+      <div class="osc-confirm-backdrop" data-no></div>
+      <div class="osc-confirm-card" role="dialog" aria-modal="true">
+        ${title ? `<h3 class="osc-confirm-title">${esc2(title)}</h3>` : ""}
+        <p class="osc-confirm-msg">${esc2(opts.message)}</p>
+        <div class="osc-confirm-row">
+          <button class="osc-confirm-btn osc-confirm-no" data-no>${esc2(no)}</button>
+          <button class="osc-confirm-btn osc-confirm-yes" data-yes>${esc2(yes)}</button>
+        </div>
+      </div>`;
+    const style = document.createElement("style");
+    style.textContent = CONFIRM_CSS;
+    host2.appendChild(style);
+    document.body.appendChild(host2);
+    let settled = false;
+    const close = (val) => {
+      if (settled) return;
+      settled = true;
+      window.removeEventListener("keydown", onKey);
+      host2.remove();
+      resolve(val);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") close(false);
+      else if (e.key === "Enter") close(true);
+    };
+    host2.querySelectorAll("[data-no]").forEach((b) => b.addEventListener("click", () => close(false)));
+    host2.querySelector("[data-yes]")?.addEventListener("click", () => close(true));
+    window.addEventListener("keydown", onKey);
+  });
+}
+var CONFIRM_CSS = `
+.osc-confirm { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; font-family: var(--font); }
+.osc-confirm *, .osc-confirm *::before, .osc-confirm *::after { box-sizing: border-box; }
+.osc-confirm-backdrop { position: absolute; inset: 0; background: rgba(8,6,4,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
+.osc-confirm-card { position: relative; width: min(90vw, 420px); background: #ffffff; color: #181b20; border: 3px solid #000; border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; }
+.osc-confirm-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: .3px; }
+.osc-confirm-msg { margin: 0 0 22px; font-size: 19px; font-weight: 700; line-height: 1.4; }
+.osc-confirm-row { display: flex; gap: 14px; }
+.osc-confirm-btn { flex: 1; padding: 14px 10px; border-radius: 12px; border: 3px solid #000; font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: transform .1s, background .12s; }
+.osc-confirm-btn:active { transform: scale(.96); }
+.osc-confirm-no { background: #ffffff; color: #181b20; }
+.osc-confirm-no:hover { background: #eef1f6; }
+.osc-confirm-yes { background: #d99000; color: #1a1200; }
+.osc-confirm-yes:hover { filter: brightness(1.05); }
+`;
+
 // src/mountHud.ts
 function showReplayModal(ui, info, buttonKey, onSelect) {
   const cur = info.currency ?? ui.balance.currency.get();
-  const money = (n) => formatAmount(n, cur);
+  const money2 = (n) => formatAmount(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -573,10 +630,10 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
         kind: "stat-grid",
         id: "openui-replay-g",
         items: [
-          { label: "openui.replay.baseBet", value: money(info.baseBet) },
+          { label: "openui.replay.baseBet", value: money2(info.baseBet) },
           { label: "openui.replay.costMultiplier", value: `${info.costMultiplier}\xD7` },
           { label: "openui.replay.payoutMultiplier", value: `${info.payoutMultiplier}\xD7` },
-          { label: "openui.replay.amount", value: money(info.amount) }
+          { label: "openui.replay.amount", value: money2(info.amount) }
         ]
       }
     ],
@@ -680,17 +737,15 @@ function mountHud(app, spec = {}, opts = {}) {
         o.onConfirm();
         return;
       }
-      const message = o.message ?? (o.name ? ui.t("openui.buyFeature.confirm", { name: ui.t(o.name), price: o.price ?? "" }) : "openui.buyFeature.message");
-      ui.showNotice(
-        [
-          { kind: "heading", id: "buy-title", text: o.title ?? "openui.buyFeature.title" },
-          { kind: "text", id: "buy-body", text: message }
-        ],
-        [
-          { label: o.cancelLabel ?? "openui.cancel", variant: "secondary" },
-          { label: o.confirmLabel ?? "openui.confirm", variant: "primary", onSelect: o.onConfirm }
-        ]
-      );
+      const message = o.message ?? (o.name ? ui.t("openui.buyFeature.confirm", { name: ui.t(o.name), price: o.price ?? "" }) : ui.t("openui.buyFeature.message"));
+      void showConfirm(ui, {
+        title: o.title ?? "openui.buyFeature.title",
+        message,
+        confirmLabel: o.confirmLabel,
+        cancelLabel: o.cancelLabel
+      }).then((ok) => {
+        if (ok) o.onConfirm();
+      });
     },
     showControls: () => pixi.setControlsVisible(true),
     hideControls: () => pixi.setControlsVisible(false),
@@ -704,10 +759,199 @@ function mountHud(app, spec = {}, opts = {}) {
     dispose: teardown
   };
 }
+function money(amount, cur) {
+  return formatAmount(amount, cur);
+}
+var esc3 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+function mountBuyFeatureModal(_app, hud, features, opts = {}) {
+  const ui = hud.ui;
+  const tr = (k) => ui.t(k);
+  const list = features.slice(0, 4);
+  const boosts = /* @__PURE__ */ new Set();
+  const activation = opts.activation ?? "multi";
+  const blocksBuy = opts.activationBlocksBuy ?? false;
+  const disposers = [];
+  const host2 = document.createElement("div");
+  host2.className = "bfm-root";
+  const vars = {
+    "--accent": "#d99000",
+    "--accent-text": "#1a1200",
+    "--surface": "#ffffff",
+    "--surface-alt": "#eef1f6",
+    "--text": "#181b20",
+    "--text-dim": "#5b6472",
+    "--font": ui.theme.type.family
+  };
+  for (const [k, v] of Object.entries(vars)) host2.style.setProperty(k, v);
+  host2.innerHTML = `
+    <div class="bfm-backdrop" data-close></div>
+    <button class="bfm-x" data-close aria-label="Close">\u2715</button>
+    <div class="bfm-panel" role="dialog" aria-modal="true">
+      <div class="bfm-fit" id="bfm-fit">
+        <h2 class="bfm-title" data-t="Buy Feature">${esc3(tr("Buy Feature"))}</h2>
+        <div class="bfm-bet">
+          <button class="bfm-step" id="bfm-minus" aria-label="Decrease">\u2212</button>
+          <div class="bfm-betbox"><span class="bfm-betlabel" data-t="Bet">${esc3(tr("Bet"))}</span><b id="bfm-betval">\u2014</b></div>
+          <button class="bfm-step" id="bfm-plus" aria-label="Increase">+</button>
+        </div>
+        <div class="bfm-cards" id="bfm-cards"></div>
+      </div>
+    </div>`;
+  const style = document.createElement("style");
+  style.textContent = BFM_CSS;
+  host2.appendChild(style);
+  document.body.appendChild(host2);
+  const $ = (sel) => host2.querySelector(sel);
+  const panel = $(".bfm-panel");
+  const fitEl = $("#bfm-fit");
+  const cardsEl = $("#bfm-cards");
+  const betValEl = $("#bfm-betval");
+  const askConfirm = (name, price, onYes) => {
+    const message = ui.t("openui.buyFeature.confirm", { name: ui.t(name), price });
+    void showConfirm(ui, { title: "Buy Feature", message }).then((ok) => {
+      if (ok) onYes();
+    });
+  };
+  const layout = () => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const cols = vh <= 540 || vw >= 900 ? Math.min(4, list.length) : Math.min(2, list.length);
+    cardsEl.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+    const fitW = Math.min(vw * 0.96, cols >= 4 ? 1180 : cols === 1 ? 380 : 760);
+    fitEl.style.width = `${fitW}px`;
+    fitEl.style.transform = "none";
+    const natH = fitEl.offsetHeight;
+    const s = Math.min(1, vh * 0.95 / natH);
+    fitEl.style.transform = `translateX(-50%) scale(${s})`;
+    panel.style.width = `${Math.ceil(fitW * s)}px`;
+    panel.style.height = `${Math.ceil(natH * s)}px`;
+  };
+  const renderCards = () => {
+    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+    const cur = ui.bet.currency.get();
+    cardsEl.innerHTML = list.map((f) => {
+      const active = boosts.has(f.id);
+      const buyBlocked = f.variant === "buy" && blocksBuy && boosts.size > 0;
+      const price = f.variant === "buy" ? money(f.cost * bet, cur) : `+${money(f.cost * bet, cur)}`;
+      const label = f.variant === "buy" ? tr("Buy") : active ? tr("Activated") : tr("Activate");
+      const cls = `bfm-action bfm-action--${f.variant}${active ? " is-active" : ""}${buyBlocked ? " is-blocked" : ""}`;
+      const img = f.image ? ` style="background-image:url('${f.image}')"` : "";
+      return `
+        <div class="bfm-cell">
+          <div class="bfm-card">
+            <div class="bfm-cardimg"${img}></div>
+            <div class="bfm-strip"></div>
+            <div class="bfm-cardbody">
+              <span class="bfm-name">${esc3(tr(f.name))}</span>
+              <b class="bfm-price">${esc3(price)}</b>
+            </div>
+          </div>
+          <button class="${cls}" data-id="${f.id}" data-variant="${f.variant}"${buyBlocked ? " disabled" : ""}>${esc3(label)}</button>
+        </div>`;
+    }).join("");
+    betValEl.textContent = money(bet, cur);
+    cardsEl.querySelectorAll(".bfm-action").forEach((b) => {
+      b.addEventListener("click", () => onAction(b.dataset.id, b.dataset.variant));
+    });
+    layout();
+  };
+  const onAction = (id, variant) => {
+    const f = list.find((x) => x.id === id);
+    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+    const cur = ui.bet.currency.get();
+    if (variant === "boost") {
+      const wasActive = boosts.has(id);
+      const commit = () => {
+        if (activation === "single") boosts.clear();
+        if (wasActive) boosts.delete(id);
+        else boosts.add(id);
+        ui.bus.emit("cardActivated", { id });
+        renderCards();
+        opts.onActivate?.([...boosts], id, boosts.has(id));
+      };
+      if (wasActive) {
+        commit();
+        return;
+      }
+      const total = 1 + (f?.cost ?? 0);
+      askConfirm(f?.name ?? id, money(total * bet, cur), commit);
+    } else {
+      if (blocksBuy && boosts.size > 0) return;
+      const cost = (f?.cost ?? 0) * bet;
+      askConfirm(f?.name ?? id, money(cost, cur), () => {
+        ui.bus.emit("cardActivated", { id });
+        close();
+        opts.onBuy?.(id, cost);
+      });
+    }
+  };
+  $("#bfm-minus").addEventListener("click", () => ui.betStepper.dec());
+  $("#bfm-plus").addEventListener("click", () => ui.betStepper.inc());
+  disposers.push(ui.bet.value.subscribe(() => renderCards()));
+  const open = () => {
+    renderCards();
+    host2.classList.add("open");
+  };
+  const close = () => host2.classList.remove("open");
+  host2.querySelectorAll("[data-close]").forEach((b) => b.addEventListener("click", close));
+  disposers.push(ui.on("buttonActivated", ({ id }) => {
+    if (id === "bonus") open();
+  }));
+  const onResize = () => {
+    if (host2.classList.contains("open")) layout();
+  };
+  window.addEventListener("resize", onResize);
+  disposers.push(
+    ui.locale.subscribe(() => {
+      host2.querySelectorAll("[data-t]").forEach((n) => n.textContent = tr(n.dataset.t));
+      renderCards();
+    })
+  );
+  renderCards();
+  return () => {
+    window.removeEventListener("resize", onResize);
+    for (const d of disposers.splice(0)) d();
+    host2.remove();
+  };
+}
+var BFM_CSS = `
+.bfm-root { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; font-family: var(--font); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
+.bfm-root.open { opacity: 1; pointer-events: auto; }
+.bfm-backdrop { position: absolute; inset: 0; background: rgba(8,6,4,0); backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); transition: background .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease; }
+.bfm-root.open .bfm-backdrop { background: rgba(8,6,4,.5); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
+.bfm-x { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(18,14,10,.82); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); z-index: 2; transition: transform .12s, background .12s; }
+.bfm-x:hover { transform: scale(1.08); background: rgba(18,14,10,.95); }
+.bfm-root *, .bfm-root *::before, .bfm-root *::after { box-sizing: border-box; }
+.bfm-panel { position: relative; transform: translateY(8px) scale(.985); transition: transform .18s ease; }
+.bfm-root.open .bfm-panel { transform: none; }
+.bfm-fit { position: absolute; top: 0; left: 50%; transform: translateX(-50%); transform-origin: top center; }
+.bfm-title { margin: 0 0 14px; text-align: center; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
+.bfm-bet { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 24px; }
+.bfm-betbox { min-width: 200px; padding: 10px 22px; border-radius: 12px; background: var(--surface); border: 3px solid #000; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
+.bfm-betlabel { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
+.bfm-betbox b { font-size: 24px; color: var(--text); }
+.bfm-step { flex: none; width: 54px; height: 54px; border-radius: 999px; border: 3px solid #000; background: var(--surface); color: var(--text); font-size: 28px; font-weight: 800; cursor: pointer; display: grid; place-items: center; line-height: 1; transition: transform .1s, background .12s; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
+.bfm-step:hover { background: var(--surface-alt); }
+.bfm-step:active { transform: scale(.92); }
+.bfm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
+.bfm-cell { display: flex; flex-direction: column; min-width: 0; }
+.bfm-card { background: var(--surface); border: 4px solid #000; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
+.bfm-cardimg { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--surface-alt); background-image: linear-gradient(135deg, #e7ebf2, #cfd6e2); }
+.bfm-strip { height: 8px; background: linear-gradient(90deg, #f0a500, #ffd166, #f0a500); }
+.bfm-cardbody { padding: 12px 14px 16px; text-align: center; }
+.bfm-name { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bfm-price { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--text); }
+.bfm-action { display: block; width: 100%; margin-top: 12px; padding: 14px 10px; border-radius: 12px; border: 4px solid #000; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: transform .1s, background .12s, color .12s; box-shadow: 0 5px 14px rgba(0,0,0,.35); white-space: nowrap; }
+.bfm-action:hover { background: var(--surface-alt); }
+.bfm-action:active { transform: scale(.96); }
+.bfm-action.is-active { background: var(--accent); color: var(--accent-text); border-color: #000; }
+.bfm-action.is-blocked, .bfm-action:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
+.bfm-action.is-blocked:hover, .bfm-action:disabled:hover { background: var(--surface); }
+`;
 
 // src/bootError.ts
 var host = null;
-var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var esc4 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 function showBootError(opts = {}) {
   const title = opts.title ?? "Connection lost";
   const message = opts.message ?? "The game could not reach the game server. Please reload to reconnect and continue.";
@@ -721,10 +965,10 @@ function showBootError(opts = {}) {
       <div class="openui-be-icon" aria-hidden="true">
         <svg viewBox="0 0 48 48" width="48" height="48"><path d="M24 4 3 42h42L24 4Z" fill="none" stroke="#ffc935" stroke-width="3" stroke-linejoin="round"/><rect x="22" y="18" width="4" height="12" rx="2" fill="#ffc935"/><circle cx="24" cy="35" r="2.4" fill="#ffc935"/></svg>
       </div>
-      <h1 class="openui-be-title">${esc2(title)}</h1>
-      <p class="openui-be-msg">${esc2(message)}</p>
-      ${opts.detail ? `<p class="openui-be-detail">${esc2(opts.detail)}</p>` : ""}
-      ${showReload ? `<button class="openui-be-reload" type="button">${esc2(opts.reloadLabel ?? "Reload")}</button>` : ""}
+      <h1 class="openui-be-title">${esc4(title)}</h1>
+      <p class="openui-be-msg">${esc4(message)}</p>
+      ${opts.detail ? `<p class="openui-be-detail">${esc4(opts.detail)}</p>` : ""}
+      ${showReload ? `<button class="openui-be-reload" type="button">${esc4(opts.reloadLabel ?? "Reload")}</button>` : ""}
     </div>
     <style>
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
@@ -752,6 +996,6 @@ function hideBootError() {
   host = null;
 }
 
-export { PanelBodyView, PanelView, PopoverView, hideBootError, mountHud, mountInfoMenu, showBootError };
+export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map