@open-slot-ui/pixi 0.10.0 → 0.11.1

package/dist/index.d.cts

@@ -740,7 +740,9 @@ interface FeatureSpec {
     id: string;
     name: string;
     variant: 'buy' | 'boost';
-    /** Price as a multiple of the current bet (× bet). */
+    /** Cost as a multiple of the base bet. For `buy` this is the FULL stake multiple
+     *  (deducted = cost × bet); for `boost` it is the SURCHARGE over the base bet, so the
+     *  full per-spin cost shown/deducted is (1 + cost) × bet. */
     cost: number;
     /** Card image URL (or data URI). Optional — a neutral gradient is used when absent. */
     image?: string;

package/dist/index.d.ts

@@ -740,7 +740,9 @@ interface FeatureSpec {
     id: string;
     name: string;
     variant: 'buy' | 'boost';
-    /** Price as a multiple of the current bet (× bet). */
+    /** Cost as a multiple of the base bet. For `buy` this is the FULL stake multiple
+     *  (deducted = cost × bet); for `boost` it is the SURCHARGE over the base bet, so the
+     *  full per-spin cost shown/deducted is (1 + cost) × bet. */
     cost: number;
     /** Card image URL (or data URI). Optional — a neutral gradient is used when absent. */
     image?: string;

package/dist/index.js

@@ -1,7 +1,7 @@
 import { ControlView, ButtonView, SliderView, buildBlockColumn, OpenUIPixi } from './chunk-Z7X5JH7H.js';
 export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, svgSpinSkin } from './chunk-Z7X5JH7H.js';
 import { Text, Graphics, Container, Rectangle } from 'pixi.js';
-import { LOCALE_LABELS, createUI, composeMenu, buildPanel, modeStatsItems, formatAmountPrecise, factsVars, auditRules } from '@open-slot-ui/core';
+import { INFO_MENU_VARS, escapeHtml, LOCALE_LABELS, renderBlocksHtml, INFO_MENU_CSS, createUI, composeMenu, buildPanel, formatAmountPrecise, factsVars, renderRulesAuditHtml, auditRules } from '@open-slot-ui/core';
 
 var RISE = 26;
 var STAGGER = 38;
@@ -278,101 +278,16 @@ var PanelBodyView = class extends ControlView {
     super.dispose();
   }
 };
-var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-var rich = (s) => esc(s).replace(/\*\*(.+?)\*\*/g, "<b>$1</b>");
-function statGridHtml(items, tr) {
-  const rows = items.map((it) => `<div><dt>${esc(tr(it.label))}</dt><dd>${esc(tr(it.value))}</dd></div>`).join("");
-  return `<dl class="ohm-stats">${rows}</dl>`;
-}
-function renderBlocks(blocks, tr, facts) {
-  const out = [];
-  for (const b of blocks) {
-    switch (b.kind) {
-      case "text":
-        out.push(`<p>${rich(tr(b.text))}</p>`);
-        break;
-      case "heading":
-        out.push(`<div class="ohm-sec"><span>${esc(tr(b.text))}</span></div>`);
-        break;
-      case "subheading":
-        out.push(`<h4 class="ohm-subh">${esc(tr(b.text))}</h4>`);
-        break;
-      case "legal":
-        out.push(`<p class="ohm-legal">${rich(tr(b.text))}</p>`);
-        break;
-      case "divider":
-        out.push('<hr class="ohm-hr">');
-        break;
-      case "image":
-        out.push(`<img class="ohm-feature" alt="${esc(tr(b.alt ?? ""))}" src="${b.src}" loading="lazy">`);
-        break;
-      case "media": {
-        const img = `<img alt="${esc(tr(b.alt ?? ""))}" src="${b.src}" loading="lazy">`;
-        const body = `<div class="ohm-media-body">${b.title ? `<h4>${esc(tr(b.title))}</h4>` : ""}<p>${rich(tr(b.text))}</p></div>`;
-        out.push(`<div class="ohm-media ohm-media--${b.side ?? "left"}">${img}${body}</div>`);
-        break;
-      }
-      case "cards": {
-        const cards = b.items.map((it) => `<div class="ohm-fcard">${it.icon ? `<img src="${it.icon}" alt="" loading="lazy">` : ""}<h5>${esc(tr(it.title))}</h5>${it.text ? `<p>${rich(tr(it.text))}</p>` : ""}</div>`).join("");
-        out.push(`<div class="ohm-cards">${cards}</div>`);
-        break;
-      }
-      case "paytable":
-        out.push(`<div class="ohm-grid">${renderPaytable(b.rows, tr)}</div>`);
-        break;
-      case "table": {
-        const head = b.columns?.length ? `<thead><tr>${b.columns.map((c) => `<th>${esc(tr(c))}</th>`).join("")}</tr></thead>` : "";
-        const body = b.rows.map((r) => `<tr>${r.map((c) => `<td>${esc(tr(c))}</td>`).join("")}</tr>`).join("");
-        out.push(`<table class="ohm-table">${head}<tbody>${body}</tbody></table>`);
-        break;
-      }
-      case "stat-grid":
-        out.push(statGridHtml(b.items, tr));
-        break;
-      // The AUTO per-mode RTP / Max-win grid — rendered straight from the declared
-      // game facts (+ any host extras), so the table can never drift from the config.
-      // `modeStatsItems` localizes the label PARTS itself ("Max win" · the mode name),
-      // so the grid renderer gets identity-tr — no double translation.
-      case "mode-stats": {
-        const extras = (b.extras ?? []).map((e) => ({ label: tr(e.label), value: tr(e.value) }));
-        out.push(statGridHtml([...modeStatsItems(facts, tr), ...extras], (s) => s));
-        break;
-      }
-      case "steps": {
-        const items = b.items.map((s) => `<li>${rich(tr(s))}</li>`).join("");
-        out.push(b.ordered ? `<ol class="ohm-steps">${items}</ol>` : `<ul class="ohm-steps">${items}</ul>`);
-        break;
-      }
-      case "callout":
-        out.push(`<div class="ohm-callout ohm-callout--${b.tone ?? "info"}">${b.title ? `<b>${esc(tr(b.title))}</b>` : ""}<p>${rich(tr(b.text))}</p></div>`);
-        break;
-      case "group":
-        out.push(`<div class="ohm-group">${b.title ? `<h4 class="ohm-subh">${esc(tr(b.title))}</h4>` : ""}${renderBlocks(b.children, tr)}</div>`);
-        break;
-    }
-  }
-  return out.join("\n");
-}
-function renderPaytable(rows, tr) {
-  return rows.map((r) => {
-    const icon = r.icon ? `<img class="ohm-symimg" src="${r.icon}" alt="" loading="lazy">` : `<span class="ohm-emoji">${esc(tr(r.symbol ?? ""))}</span>`;
-    const lines = r.payouts.split("\n").map((line) => {
-      const i = line.indexOf(":");
-      return i >= 0 ? `<div><b>${esc(line.slice(0, i))}</b><span>${esc(line.slice(i + 1))}</span></div>` : `<div><span>${esc(line)}</span></div>`;
-    }).join("");
-    return `<div class="ohm-sym">${icon}<div class="ohm-pay">${lines}</div></div>`;
-  }).join("");
-}
 function renderSettingBlock(b, tr) {
-  const hint = "hint" in b && b.hint ? `<div class="ohm-hint">${esc(tr(b.hint))}</div>` : "";
-  const label = "label" in b && b.label ? esc(tr(b.label)) : "";
+  const hint = "hint" in b && b.hint ? `<div class="ohm-hint">${escapeHtml(tr(b.hint))}</div>` : "";
+  const label = "label" in b && b.label ? escapeHtml(tr(b.label)) : "";
   switch (b.kind) {
     case "toggle":
       return `<div class="ohm-setting"><label class="ohm-row ohm-check"><span>${label}</span><span class="ohm-ctl"><input data-set="${b.id}" type="checkbox"${b.on ? " checked" : ""}></span></label>${hint}</div>`;
     case "slider":
       return `<div class="ohm-setting"><label class="ohm-row"><span>${label}</span><input data-set="${b.id}" type="range" min="0" max="1" step="0.01" value="${b.initial ?? 1}"></label>${hint}</div>`;
     case "select": {
-      const opts = b.options.map((o, i) => `<option value="${esc(o.value)}"${i === (b.index ?? 0) ? " selected" : ""}>${esc(tr(o.label))}</option>`).join("");
+      const opts = b.options.map((o, i) => `<option value="${escapeHtml(o.value)}"${i === (b.index ?? 0) ? " selected" : ""}>${escapeHtml(tr(o.label))}</option>`).join("");
       return `<div class="ohm-setting"><label class="ohm-row"><span>${label}</span><select data-set="${b.id}">${opts}</select></label>${hint}</div>`;
     }
     default:
@@ -385,25 +300,16 @@ function mountInfoMenu(app, ui) {
   const disposers = [];
   const host2 = document.createElement("div");
   host2.className = "ohm-root";
-  const vars = {
-    "--accent": "#d99000",
-    "--accent-text": "#1a1200",
-    "--surface": "#ffffff",
-    "--surface-alt": "#eef1f6",
-    "--text": "#181b20",
-    "--text-dim": "#5b6472",
-    "--card-radius": "8px",
-    "--font": ui.theme.type.family
-  };
+  const vars = { ...INFO_MENU_VARS, "--font": ui.theme.type.family };
   for (const [k, v] of Object.entries(vars)) host2.style.setProperty(k, v);
   const locales = ui.spec?.locale ? Array.from(/* @__PURE__ */ new Set([ui.spec.locale.locale, ...Object.keys(ui.spec.locale.messages)])) : [];
-  const langRow = locales.length > 1 ? `<div class="ohm-setting"><label class="ohm-row"><span>${tr("Language")}</span><select id="ohm-lang">${locales.map((c) => `<option value="${c}"${c === ui.locale.get() ? " selected" : ""}>${esc(LOCALE_LABELS[c] ?? c)}</option>`).join("")}</select></label></div>` : "";
+  const langRow = locales.length > 1 ? `<div class="ohm-setting"><label class="ohm-row"><span>${tr("Language")}</span><select id="ohm-lang">${locales.map((c) => `<option value="${c}"${c === ui.locale.get() ? " selected" : ""}>${escapeHtml(LOCALE_LABELS[c] ?? c)}</option>`).join("")}</select></label></div>` : "";
   const turbo = ui.turbo;
   const cap = (m) => m.charAt(0).toUpperCase() + m.slice(1);
-  const turboCtl = turbo.modeCount <= 2 ? `<span class="ohm-ctl"><input id="ohm-turbo" type="checkbox"></span>` : `<span class="ohm-ctl"><div class="ohm-segmented" id="ohm-turbo-seg">${turbo.modes.map((m, i) => `<button class="ohm-seg" data-i="${i}">${esc(tr(cap(m)))}</button>`).join("")}</div></span>`;
+  const turboCtl = turbo.modeCount <= 2 ? `<span class="ohm-ctl"><input id="ohm-turbo" type="checkbox"></span>` : `<span class="ohm-ctl"><div class="ohm-segmented" id="ohm-turbo-seg">${turbo.modes.map((m, i) => `<button class="ohm-seg" data-i="${i}">${escapeHtml(tr(cap(m)))}</button>`).join("")}</div></span>`;
   const customSettings = (menu.settings ?? []).map((b) => renderSettingBlock(b, tr)).join("");
   const soundMode = menu.sound ?? "sliders";
-  const volRow = (id, label, hint, val) => `<div class="ohm-setting"><label class="ohm-row"><span>${esc(tr(label))}</span><input class="ohm-slider" data-vol="${id}" type="range" min="0" max="1" step="0.01" value="${val}"></label><div class="ohm-hint">${esc(tr(hint))}</div></div>`;
+  const volRow = (id, label, hint, val) => `<div class="ohm-setting"><label class="ohm-row"><span>${escapeHtml(tr(label))}</span><input class="ohm-slider" data-vol="${id}" type="range" min="0" max="1" step="0.01" value="${val}"></label><div class="ohm-hint">${escapeHtml(tr(hint))}</div></div>`;
   const soundSliders = soundMode === "master" ? volRow("master", "Volume", "Adjust the overall game volume.", ui.sfxSlider.value.get()) : soundMode === "sliders" ? volRow("music", "Music", "Adjust the background music volume.", ui.musicSlider.value.get()) + volRow("sfx", "Effects", "Adjust the sound-effects volume.", ui.sfxSlider.value.get()) : "";
   const rulesTr = () => {
     const vars2 = factsVars(ui.facts.get(), { "game.name": ui.gameInfo.name ?? "", "game.version": ui.gameInfo.version ?? "" });
@@ -411,25 +317,16 @@ function mountInfoMenu(app, ui) {
   };
   const auditCardHtml = (trr) => {
     if (!menu.rules?.length) return "";
-    const issues = auditRules(ui.facts.get(), menu.rules, { resolve: trr });
-    if (!issues.length) return "";
-    const req = issues.filter((i) => i.level === "required");
-    const rec = issues.filter((i) => i.level === "recommended");
-    const list = (items) => `<ul>${items.map((i) => `<li>${esc(tr(i.message))}</li>`).join("")}</ul>`;
-    return `<div class="ohm-audit" role="alert">
-      <div class="ohm-audit-title">\u26A0 ${esc(tr("openui.rulesAudit.title"))}</div>
-      ${req.length ? `<div class="ohm-audit-sub">${esc(tr("openui.rulesAudit.required"))}</div>${list(req)}` : ""}
-      ${rec.length ? `<div class="ohm-audit-sub ohm-audit-sub--rec">${esc(tr("openui.rulesAudit.recommended"))}</div><div class="ohm-audit-rec">${list(rec)}</div>` : ""}
-    </div>`;
+    return renderRulesAuditHtml(auditRules(ui.facts.get(), menu.rules, { resolve: trr }), tr);
   };
   const rulesInnerHtml = () => {
     if (!menu.rules) return "";
     const trr = rulesTr();
-    return auditCardHtml(trr) + renderBlocks(menu.rules, trr, ui.facts.get());
+    return auditCardHtml(trr) + renderBlocksHtml(menu.rules, trr, ui.facts.get());
   };
-  const paytableHtml = menu.paytable ? renderBlocks(menu.paytable, tr, ui.facts.get()) : "";
+  const paytableHtml = menu.paytable ? renderBlocksHtml(menu.paytable, tr, ui.facts.get()) : "";
   const rulesHtml = rulesInnerHtml();
-  const banner = menu.banner ? `<img class="ohm-logo" alt="" src="${menu.banner.src}"${menu.banner.width ? ` width="${menu.banner.width}"` : ""}${menu.banner.height ? ` height="${menu.banner.height}"` : ""}>` : ui.gameInfo.name ? `<h1 class="ohm-logo-text">${esc(ui.gameInfo.name)}</h1>` : "";
+  const banner = menu.banner ? `<img class="ohm-logo" alt="" src="${menu.banner.src}"${menu.banner.width ? ` width="${menu.banner.width}"` : ""}${menu.banner.height ? ` height="${menu.banner.height}"` : ""}>` : ui.gameInfo.name ? `<h1 class="ohm-logo-text">${escapeHtml(ui.gameInfo.name)}</h1>` : "";
   host2.innerHTML = `
     <div class="ohm-backdrop" data-close></div>
     <button class="ohm-x" data-close aria-label="Close">\u2715</button>
@@ -447,7 +344,7 @@ function mountInfoMenu(app, ui) {
       </div>
     </div>`;
   const style = document.createElement("style");
-  style.textContent = OHM_CSS;
+  style.textContent = INFO_MENU_CSS;
   host2.appendChild(style);
   document.body.appendChild(host2);
   const $ = (sel) => host2.querySelector(sel);
@@ -537,91 +434,6 @@ function mountInfoMenu(app, ui) {
     host2.remove();
   };
 }
-var OHM_CSS = `
-.ohm-root { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; font-family: var(--font); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
-.ohm-root.open { opacity: 1; pointer-events: auto; }
-.ohm-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; }
-.ohm-root.open .ohm-backdrop { background: rgba(8,6,4,.34); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
-.ohm-card { position: relative; width: min(92%, 1100px); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1.5px solid #000; border-radius: var(--card-radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; transform: translateY(8px) scale(.99); transition: transform .18s ease; }
-.ohm-root.open .ohm-card { transform: none; }
-.ohm-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; }
-.ohm-x:hover { transform: scale(1.08); background: rgba(18,14,10,.95); }
-.ohm-body { padding: 24px 26px 26px; overflow-y: scroll; }
-.ohm-body::-webkit-scrollbar { width: 18px; }
-.ohm-body::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
-.ohm-body::-webkit-scrollbar-thumb { background-color: #111; border: 6px solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 44px; }
-.ohm-body::-webkit-scrollbar-thumb:hover { background-color: #000; }
-.ohm-logo { display: block; margin: 6px auto 18px; max-width: 64%; height: auto; }
-.ohm-logo-text { margin: 6px 0 18px; text-align: center; font-size: 30px; font-weight: 900; letter-spacing: 1px; color: var(--text); }
-.ohm-sec { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; color: var(--text); font-weight: 800; letter-spacing: 1px; }
-.ohm-sec::before, .ohm-sec::after { content: ""; flex: 1; height: 2px; background: color-mix(in srgb, var(--text) 80%, transparent); border-radius: 2px; }
-.ohm-root *, .ohm-root *::before, .ohm-root *::after { box-sizing: border-box; }
-.ohm-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; font-weight: 700; }
-.ohm-setting { margin: 14px 0; }
-.ohm-setting .ohm-row { margin: 0; }
-.ohm-hint { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
-.ohm-row > span:first-child { flex: none; min-width: 110px; }
-.ohm-row input[type=range] { flex: 1; min-width: 0; max-width: min(440px, 60dvw); accent-color: var(--accent); height: 6px; }
-.ohm-row select { flex: 1; min-width: 0; max-width: min(440px, 60dvw); padding: 11px 14px; border-radius: 4px; border: 2px solid var(--accent); background: var(--surface-alt); color: var(--text); font-weight: 700; font-size: 15px; cursor: pointer; }
-.ohm-row select option { background: var(--surface); color: var(--text); font-weight: 600; }
-.ohm-row select option:checked { background: var(--accent); color: var(--accent-text); }
-.ohm-ctl { flex: 1; min-width: 0; max-width: min(440px, 60dvw); display: flex; align-items: center; justify-content: flex-end; }
-.ohm-check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 50px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--text-dim) 38%, transparent); position: relative; cursor: pointer; transition: background .15s; flex: none; }
-.ohm-check input[type=checkbox]:checked { background: var(--accent); }
-.ohm-check input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
-.ohm-check input[type=checkbox]:checked::before { left: 25px; }
-.ohm-segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-alt); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); }
-.ohm-seg { border: 0; background: transparent; color: var(--text-dim); font-weight: 700; font-size: 14px; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s; }
-.ohm-seg.active { background: var(--accent); color: var(--accent-text); }
-.ohm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
-.ohm-sym { display: flex; align-items: center; gap: 16px; padding: 6px 4px; }
-.ohm-emoji { font-size: 48px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
-.ohm-symimg { width: 56px; height: 56px; object-fit: contain; flex: none; }
-.ohm-pay { font-size: 13px; line-height: 1.6; }
-.ohm-pay div { display: flex; gap: 6px; }
-.ohm-pay b { min-width: 42px; }
-.ohm-pay span { color: var(--accent); font-weight: 700; }
-.ohm-body p { color: var(--text-dim); line-height: 1.6; }
-.ohm-body p b { color: var(--text); }
-.ohm-feature { display: block; width: 100%; height: auto; margin: 10px 0; }
-.ohm-stats { margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
-.ohm-stats > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 20%, transparent); }
-.ohm-stats dt { color: var(--text-dim); margin: 0; } .ohm-stats dd { margin: 0; font-weight: 700; }
-.ohm-audit { margin: 12px 0 18px; padding: 14px 16px; border-radius: 12px; border: 2px solid #d03131; background: color-mix(in srgb, #d03131 8%, transparent); }
-.ohm-audit-title { font-weight: 900; letter-spacing: .5px; color: #b31d1d; }
-.ohm-audit-sub { margin-top: 8px; font-size: 13px; font-weight: 800; color: #b31d1d; }
-.ohm-audit-sub--rec { color: #b07d09; }
-.ohm-audit ul { margin: 6px 0 0; padding-left: 20px; color: var(--text); font-size: 13.5px; line-height: 1.55; }
-.ohm-audit li { margin: 3px 0; }
-.ohm-audit-rec ul { color: var(--text-dim); }
-.ohm-callout { margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
-.ohm-callout b { color: var(--accent); } .ohm-callout p { margin: 4px 0 0; color: var(--text); }
-.ohm-callout--warning { border-left-color: #e0a106; background: color-mix(in srgb, #e0a106 10%, transparent); }
-.ohm-callout--warning b { color: #b07d09; }
-.ohm-subh { margin: 22px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: .5px; color: var(--text); }
-.ohm-legal { font-size: 12px; line-height: 1.6; color: var(--text-dim); opacity: .85; }
-.ohm-hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); margin: 18px 0; }
-.ohm-media { display: flex; align-items: center; gap: 18px; margin: 14px 0; }
-.ohm-media--right { flex-direction: row-reverse; }
-.ohm-media > img { width: 40%; max-width: 320px; height: auto; flex: none; }
-.ohm-media-body { flex: 1; }
-.ohm-media-body h4 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
-.ohm-media-body p { margin: 0; }
-.ohm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
-.ohm-fcard { padding: 8px 6px; text-align: center; }
-.ohm-fcard img { display: block; width: 48px; height: 48px; margin: 0 auto 8px; }
-.ohm-fcard h5 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
-.ohm-fcard p { margin: 0; font-size: 12px; line-height: 1.5; }
-.ohm-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
-.ohm-table th { text-align: left; padding: 8px 10px; font-weight: 800; color: var(--text); border-bottom: 2px solid color-mix(in srgb, var(--text-dim) 35%, transparent); }
-.ohm-table td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 18%, transparent); }
-.ohm-table td:first-child { color: var(--text); font-weight: 700; }
-.ohm-table td:not(:first-child) { color: var(--accent); font-weight: 700; }
-.ohm-steps { margin: 12px 0; padding-left: 22px; color: var(--text-dim); line-height: 1.7; }
-.ohm-steps li { margin: 5px 0; }
-.ohm-steps b { color: var(--text); }
-.ohm-group { margin: 8px 0; }
-`;
 
 // src/confirmModal.ts
 var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -877,7 +689,7 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
   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);
+    const cols = vw >= 720 && (vw >= 900 || vh <= 540) ? 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`;
@@ -894,7 +706,8 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
     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 perSpin = (f.variant === "buy" ? f.cost : 1 + f.cost) * bet;
+      const price = money(perSpin, 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}')"` : "";