@energy8platform/platform-core 0.20.0 → 0.21.0

package/src/shell/shell.css.ts

@@ -0,0 +1,371 @@
+import { SHELL_FONT_CSS } from './fonts';
+
+export const SHELL_ROOT_ID = '__ge-game-shell__';
+
+// Inter (bundled, base64) leads the stack so the shell renders identically on every
+// platform; the system fonts stay as graceful fallback if the webfont ever fails to load.
+export const SHELL_CSS = SHELL_FONT_CSS + `
+#${SHELL_ROOT_ID} {
+  position: absolute; inset: 0;
+  pointer-events: none; z-index: 9000;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--shell-fg);
+}
+#${SHELL_ROOT_ID} svg { display:block; }
+
+/* floating readouts (no panel) */
+#${SHELL_ROOT_ID} .ge-rd { font-weight:700; font-size:13px; line-height:1; white-space:nowrap;
+  text-shadow:0 1px 3px rgba(0,0,0,.65); font-variant-numeric:tabular-nums; }
+#${SHELL_ROOT_ID} .ge-rd .ge-lbl { display:block; color:var(--shell-muted); font-weight:600;
+  font-size:9px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; text-shadow:none; }
+
+/* icon buttons (borderless) */
+#${SHELL_ROOT_ID} .ge-iconbtn { pointer-events:auto; cursor:pointer; border:none; background:none;
+  padding:0; color:var(--shell-icon); width:40px; height:40px; display:flex; align-items:center;
+  justify-content:center; font-size:24px; position:relative; transition:transform .08s ease; }
+#${SHELL_ROOT_ID} .ge-iconbtn:active { transform:scale(.92); }
+#${SHELL_ROOT_ID} .ge-iconbtn[disabled] { opacity:.35; cursor:default; }
+#${SHELL_ROOT_ID} .ge-iconbtn.ge-active { color:var(--shell-icon-active); }
+
+/* SPIN — white disc by default, big glyph reaching for the rim; lights up accent on hover */
+#${SHELL_ROOT_ID} .ge-shell-spin { pointer-events:auto; cursor:pointer; border:3px solid #000; border-radius:50%;
+  width:86px; height:86px; background:var(--shell-spin); color:var(--shell-spin-fg); box-sizing:border-box; font-size:68px;
+  display:flex; align-items:center; justify-content:center;
+  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, color .12s ease; }
+#${SHELL_ROOT_ID} .ge-shell-spin:hover { background:var(--shell-accent); color:#fff;
+  box-shadow:0 0 0 3px var(--shell-accent), 0 0 18px 2px var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-shell-spin:active { transform:scale(.94); }
+/* disabled: dim via filter (stays opaque) so the plaque seam doesn't show through the disc */
+#${SHELL_ROOT_ID} .ge-shell-spin[disabled] { filter:grayscale(.4) brightness(.62); box-shadow:none; cursor:default; }
+/* spinning while a spin is in progress */
+#${SHELL_ROOT_ID} .ge-shell-spin.ge-spinning svg { transform-origin:50% 50%; animation:ge-spin-rot .8s linear infinite; }
+@keyframes ge-spin-rot { to { transform:rotate(360deg); } }
+/* autoplay running: STOP glyph + countdown stacked in the disc */
+#${SHELL_ROOT_ID} .ge-shell-spin.ge-stop { position:relative; }
+#${SHELL_ROOT_ID} .ge-spin-stop { display:flex; }            /* STOP glyph at the disc's full size, like SPIN */
+/* no entrance animation: the bar re-renders many times per spin, so any animation here
+   would replay each time and make the counter visibly jump. tabular-nums keeps it steady. */
+#${SHELL_ROOT_ID} .ge-spin-count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
+  font-size:22px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
+
+/* BUY BONUS — round accent badge, 2-line label, text pulses + accent glow on hover */
+#${SHELL_ROOT_ID} .ge-shell-buybonus { pointer-events:auto; cursor:pointer; box-sizing:border-box;
+  width:80px; height:80px; border-radius:50%; border:3px solid #000; background:var(--shell-buybonus);
+  color:#fff; font-weight:800; letter-spacing:.02em; font-size:13px; line-height:1.08; text-align:center;
+  display:flex; align-items:center; justify-content:center; transition:transform .08s ease, box-shadow .12s ease; }
+#${SHELL_ROOT_ID} .ge-shell-buybonus span { display:inline-block; will-change:transform; }
+#${SHELL_ROOT_ID} .ge-shell-buybonus:hover { box-shadow:0 0 0 3px var(--shell-accent), 0 0 16px 1px var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-shell-buybonus:hover span { animation:ge-bb-pulse .7s ease-in-out infinite; }
+#${SHELL_ROOT_ID} .ge-shell-buybonus:active { transform:scale(.96); }
+#${SHELL_ROOT_ID} .ge-shell-buybonus[disabled] { filter:grayscale(.5) brightness(.72); box-shadow:none; cursor:default; }
+#${SHELL_ROOT_ID} .ge-shell-buybonus[disabled] span { animation:none; }
+@keyframes ge-bb-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.16)} }
+
+/* host = bottom-anchored flex column: [win pill (on overflow)] above [the bar] */
+#${SHELL_ROOT_ID} .ge-shell-barhost { position:absolute; left:0; right:0; bottom:0; pointer-events:none;
+  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px;
+  transform-origin:bottom center; }
+/* bottom bar: transparent, two zones (wide default) */
+#${SHELL_ROOT_ID} .ge-shell-bottom { width:100%; box-sizing:border-box; pointer-events:none;
+  display:flex; align-items:center; justify-content:space-between; padding:0 18px 14px; gap:14px; }
+#${SHELL_ROOT_ID} .ge-zone { display:flex; align-items:center; gap:14px; pointer-events:none; }
+#${SHELL_ROOT_ID} .ge-zone > * { pointer-events:auto; }
+#${SHELL_ROOT_ID} .ge-betstep { display:flex; flex-direction:column; gap:2px; }
+/* auto stacked over turbo (far-right column, base/desktop) */
+#${SHELL_ROOT_ID} .ge-autoturbo { display:flex; flex-direction:column; gap:2px; }
+#${SHELL_ROOT_ID} .ge-autoturbo .ge-iconbtn { width:40px; height:30px; }
+
+/* mobile (portrait) — full-width stacked plaques: [balance · win] · [controls] · [− bet +] */
+#${SHELL_ROOT_ID}.ge-mobile .ge-shell-bottom { flex-direction:column; align-items:center; gap:14px; padding:8px 12px 8px; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-top { width:100%; height:46px; justify-content:space-between; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-controls { display:flex; align-items:center; justify-content:space-between;
+  width:100%; box-sizing:border-box; height:62px; border-radius:18px; padding:0 18px; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-controls .ge-iconbtn,
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-controls .ge-rd,
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-controls .ge-rd .ge-lbl { color:#fff; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-controls .ge-rd { text-shadow:none; text-align:center; }
+/* mobile: restore accent hover + autoplay glow (the white rule above out-specifies the base ones) */
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-controls .ge-iconbtn:hover,
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-controls .ge-iconbtn.ge-glow { color:var(--shell-accent); }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-bet { width:100%; height:46px; padding:0 18px; gap:8px; justify-content:space-between; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-shell-spin { width:84px; height:84px; font-size:66px; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-shell-buybonus { width:50px; height:50px; font-size:9px; border-width:2px; }
+/* landscape overflow — size the column to content, centre it; JS scales the whole stack to fit */
+#${SHELL_ROOT_ID} .ge-shell-barhost.ge-fit { left:50%; right:auto; width:max-content; max-width:none; }
+#${SHELL_ROOT_ID} .ge-shell-barhost.ge-fit .ge-shell-bottom { width:max-content; }
+
+/* full-screen overlays — header (title left, prominent X/back), scrolling body, vh-clamped for popout/mobile.
+   Frosted backdrop: the game shows through, blurred, behind a light dark tint (white-on-blur).
+   Same glass "plaque" language as the control bar; scheme-independent. */
+#${SHELL_ROOT_ID} .ge-shell-overlay { position:absolute; inset:0; z-index:50; pointer-events:auto;
+  background:rgba(12,17,28,.5); backdrop-filter:blur(20px) saturate(120%);
+  -webkit-backdrop-filter:blur(20px) saturate(120%);
+  display:flex; flex-direction:column; animation:ge-ov-in .16s ease-out; }
+/* SPIN/BUY BONUS use z-index:3 to overlap their plaques; lift the overlay clear above them */
+@keyframes ge-ov-in { from { opacity:0; } to { opacity:1; } }
+#${SHELL_ROOT_ID} .ge-ov-head { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 10px; }
+#${SHELL_ROOT_ID} .ge-ov-title { flex:1; margin:0; text-align:center; color:#fff; font-weight:800; letter-spacing:.04em;
+  text-transform:uppercase; font-size:clamp(13px,2.6vh,16px); }
+#${SHELL_ROOT_ID} .ge-ov-spacer { flex:0 0 auto; width:32px; }
+#${SHELL_ROOT_ID} .ge-ov-nav { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
+  width:32px; height:32px; border-radius:9px; cursor:pointer; color:#fff;
+  background:var(--shell-plaque-dark); border:none; font-size:18px;
+  transition:background .12s ease, color .12s ease; }
+#${SHELL_ROOT_ID} .ge-ov-nav:hover { background:var(--shell-plaque-glass); color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-ov-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
+#${SHELL_ROOT_ID} .ge-ov-body { max-width:800px; margin:0 auto; box-sizing:border-box;
+  padding:clamp(6px,2vh,16px) clamp(16px,4vw,24px) clamp(16px,4vh,28px); }
+
+/* full-width overlay rows — glass plaque, white-on-dark */
+#${SHELL_ROOT_ID} .ge-ov-row { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
+  padding:clamp(11px,2.2vh,15px) 16px; margin-bottom:10px; border:none;
+  border-radius:16px; background:var(--shell-plaque-glass); color:#fff; font-size:14px; font-weight:600; }
+#${SHELL_ROOT_ID} .ge-ov-row .ge-grow { flex:1; text-align:left; }
+#${SHELL_ROOT_ID} button.ge-ov-row { cursor:pointer; font-family:inherit; transition:background .12s ease, color .12s ease; }
+#${SHELL_ROOT_ID} button.ge-ov-row:hover { background:var(--shell-plaque-glass-hover); color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-ov-row.ge-col { flex-direction:column; align-items:stretch; gap:10px; }
+#${SHELL_ROOT_ID} .ge-ov-row .ge-row-head { display:flex; justify-content:space-between; align-items:center; }
+#${SHELL_ROOT_ID} .ge-ov-row .ge-row-head .ge-val { color:var(--shell-plaque-label); font-variant-numeric:tabular-nums; font-weight:700; }
+#${SHELL_ROOT_ID} .ge-slider { width:100%; accent-color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-toggle { flex:0 0 auto; width:42px; height:24px; border-radius:999px; background:var(--shell-plaque-line);
+  border:none; cursor:pointer; position:relative; }
+#${SHELL_ROOT_ID} .ge-toggle.ge-on { background:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-toggle i { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
+  background:#fff; transition:left .12s ease; }
+#${SHELL_ROOT_ID} .ge-toggle.ge-on i { left:20px; }
+/* sound on/off — speaker icon button (replaces the toggle) */
+#${SHELL_ROOT_ID} .ge-snd { pointer-events:auto; cursor:pointer; border:none; background:none; padding:0;
+  width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:24px;
+  color:#fff; transition:color .12s ease, transform .08s ease; }
+#${SHELL_ROOT_ID} .ge-snd:not(.ge-active) { color:var(--shell-plaque-label); }
+#${SHELL_ROOT_ID} .ge-snd:hover { color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-snd:active { transform:scale(.92); }
+
+/* game info — each section is its own glass plaque; body text sized for comfortable reading */
+#${SHELL_ROOT_ID} .ge-gi-sec { margin-bottom:12px; background:var(--shell-plaque-glass);
+  border-radius:16px; padding:16px 18px; }
+#${SHELL_ROOT_ID} .ge-gi-sec h3 { color:var(--shell-plaque-label); font-size:11px; letter-spacing:.14em;
+  text-transform:uppercase; margin:0 0 12px; }
+#${SHELL_ROOT_ID} .ge-gi-sec p { color:rgba(255,255,255,.88); font-size:15px; line-height:1.6; margin:0; }
+
+/* controls — two blocks (gameplay / menu & info), icon/name/description per control */
+#${SHELL_ROOT_ID} .ge-gi-ctl-block + .ge-gi-ctl-block { margin-top:16px; padding-top:4px; border-top:1px solid var(--shell-plaque-line); }
+#${SHELL_ROOT_ID} .ge-gi-ctl-block-h { color:var(--shell-plaque-label); font-size:11px; letter-spacing:.12em;
+  text-transform:uppercase; margin:8px 0 2px; font-weight:700; }
+#${SHELL_ROOT_ID} .ge-gi-ctl { display:flex; align-items:center; gap:14px; padding:9px 0; }
+#${SHELL_ROOT_ID} .ge-gi-ctl + .ge-gi-ctl { border-top:1px solid var(--shell-plaque-line); }
+#${SHELL_ROOT_ID} .ge-gi-ctl-ic { flex:0 0 auto; width:48px; height:48px; display:flex; align-items:center;
+  justify-content:center; font-size:26px; color:#fff; }
+/* bet shows both chevrons, stacked & smaller */
+#${SHELL_ROOT_ID} .ge-gi-ctl-ic--bet { flex-direction:column; font-size:18px; gap:0; }
+/* buy bonus draws the real control-bar badge, scaled down & non-interactive */
+#${SHELL_ROOT_ID} .ge-gi-ctl-ic .ge-shell-buybonus { width:46px; height:46px; font-size:8px; border-width:2px; pointer-events:none; }
+#${SHELL_ROOT_ID} .ge-gi-ctl-tx { display:flex; flex-direction:column; gap:2px; }
+#${SHELL_ROOT_ID} .ge-gi-ctl-tx b { color:#fff; font-size:15px; font-weight:700; }
+#${SHELL_ROOT_ID} .ge-gi-ctl-tx span { color:rgba(255,255,255,.7); font-size:13px; line-height:1.4; }
+
+/* paytable — cards: symbol image on top, name, then win tiers "<count> x<mult>" */
+#${SHELL_ROOT_ID} .ge-gi-pt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
+#${SHELL_ROOT_ID} .ge-gi-pt-card { display:flex; flex-direction:column; align-items:center; gap:8px;
+  background:var(--shell-plaque-dark); border-radius:14px; padding:14px 12px; }
+#${SHELL_ROOT_ID} .ge-gi-pt-sym { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
+#${SHELL_ROOT_ID} .ge-gi-pt-sym img { width:56px; height:56px; object-fit:contain; }
+#${SHELL_ROOT_ID} .ge-gi-pt-sym span { color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
+#${SHELL_ROOT_ID} .ge-gi-pt-wins { display:flex; flex-direction:column; align-items:stretch; gap:2px; width:100%; }
+#${SHELL_ROOT_ID} .ge-gi-pt-win { display:flex; justify-content:space-between; align-items:baseline; gap:14px;
+  font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
+#${SHELL_ROOT_ID} .ge-gi-pt-win i { color:var(--shell-plaque-label); font-style:normal; }
+#${SHELL_ROOT_ID} .ge-gi-pt-win b { color:var(--shell-accent); font-weight:700; }
+
+/* wins — accent-filled mini-grid(s); classic = one per line, cluster/anywhere = one, ways = two */
+#${SHELL_ROOT_ID} .ge-gi-pl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); gap:12px; }
+#${SHELL_ROOT_ID} .ge-gi-pl-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
+#${SHELL_ROOT_ID} .ge-gi-pl-svg { width:100%; height:auto; max-width:140px; }
+#${SHELL_ROOT_ID} .ge-gi-pl-cell { fill:var(--shell-plaque-line); }
+#${SHELL_ROOT_ID} .ge-gi-pl-on { fill:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-gi-pl-cap { color:#fff; font-size:13px; font-weight:700; }
+#${SHELL_ROOT_ID} .ge-gi-win-row { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
+#${SHELL_ROOT_ID} .ge-gi-win-row .ge-gi-pl-svg { flex:0 0 auto; width:140px; }
+#${SHELL_ROOT_ID} .ge-gi-win-desc { flex:1; min-width:160px; color:rgba(255,255,255,.78); font-size:14px; line-height:1.5; margin:0; }
+#${SHELL_ROOT_ID} .ge-gi-win-two { display:flex; gap:22px; flex-wrap:wrap; }
+#${SHELL_ROOT_ID} .ge-gi-win-col { display:flex; flex-direction:column; align-items:center; gap:6px; }
+#${SHELL_ROOT_ID} .ge-gi-win-col .ge-gi-pl-svg { width:140px; }
+#${SHELL_ROOT_ID} .ge-gi-win-tag { font-size:12px; font-weight:700; }
+#${SHELL_ROOT_ID} .ge-gi-win-ok { color:#4ade80; }
+#${SHELL_ROOT_ID} .ge-gi-win-no { color:#f87171; }
+#${SHELL_ROOT_ID} .ge-gi-win-badge { display:inline-block; margin-left:10px; padding:2px 8px; border-radius:999px;
+  font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--shell-accent);
+  background:var(--shell-plaque-dark); vertical-align:middle; }
+
+/* modes — comparison cards */
+#${SHELL_ROOT_ID} .ge-gi-modes { display:flex; flex-direction:column; }
+#${SHELL_ROOT_ID} .ge-gi-mode { padding:12px 0; }
+#${SHELL_ROOT_ID} .ge-gi-mode + .ge-gi-mode { border-top:1px solid var(--shell-plaque-line); }
+#${SHELL_ROOT_ID} .ge-gi-mode-top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; margin-bottom:6px; }
+#${SHELL_ROOT_ID} .ge-gi-mode-h { color:#fff; font-size:16px; font-weight:800; }
+#${SHELL_ROOT_ID} .ge-gi-mode-stats { display:flex; flex-wrap:wrap; gap:14px; }
+#${SHELL_ROOT_ID} .ge-gi-mode-st { display:flex; align-items:baseline; gap:5px; }
+#${SHELL_ROOT_ID} .ge-gi-mode-st span { color:var(--shell-plaque-label); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
+#${SHELL_ROOT_ID} .ge-gi-mode-st b { color:#fff; font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
+#${SHELL_ROOT_ID} .ge-gi-mode-desc { color:rgba(255,255,255,.78); font-size:14px; line-height:1.5; margin:0; }
+#${SHELL_ROOT_ID} .ge-gi-custom { color:rgba(255,255,255,.88); font-size:15px; line-height:1.6; }
+
+/* buy bonus cards — art-forward, centred, flat (no gradients); --card-acc/--card-ink per card.
+   order: title → thumb → description → (spacer) → volatility → price → full-bleed button. */
+/* wide: horizontal scrolling strip. Cards scale PROPORTIONALLY with the viewport — every
+   dimension is in em-units, so the single font-size knob shrinks the whole card uniformly
+   (like the control bar's fit-scale), keeping small popouts readable. mobile: vertical stack. */
+/* 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; }
+#${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-ov-body { padding:clamp(8px,3cqh,16px); }
+#${SHELL_ROOT_ID} .ge-bb-grid { display:flex; gap:14px; 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. */
+#${SHELL_ROOT_ID} .ge-bb-grid .ge-bonus-card { flex:0 0 18.5em; scroll-snap-align:start;
+  font-size:clamp(7px, 4cqh, 13px); }
+/* 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:13px; }
+#${SHELL_ROOT_ID} .ge-bonus-card { display:flex; flex-direction:column; border-radius:1.4em; overflow:hidden;
+  background:var(--shell-plaque-glass); border:1px solid var(--shell-plaque-line); color:#fff; text-align:center;
+  pointer-events:auto; cursor:pointer; transition:box-shadow .12s ease, background .12s ease; }
+#${SHELL_ROOT_ID} .ge-bonus-card:hover:not(.ge-bonus-off) {
+  box-shadow:0 0 0 1px var(--card-acc), 0 12px 34px -12px var(--card-acc); }
+#${SHELL_ROOT_ID} .ge-bonus-body { display:flex; flex-direction:column; align-items:center; flex:1; padding:1.25em 1.1em .9em; }
+#${SHELL_ROOT_ID} .ge-bonus-title { font-size:1.3em; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
+  color:var(--card-acc); margin-bottom:.75em; }
+#${SHELL_ROOT_ID} .ge-bonus-thumb { height:6.2em; display:flex; align-items:center; justify-content:center; margin-bottom:.7em; }
+#${SHELL_ROOT_ID} .ge-bonus-thumb img { max-height:100%; max-width:100%; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
+#${SHELL_ROOT_ID} .ge-bonus-thumb-ph { font-size:3.5em; color:var(--card-acc); opacity:.85; display:flex; }
+#${SHELL_ROOT_ID} .ge-bonus-desc { font-size:.96em; line-height:1.45; color:rgba(255,255,255,.82); }
+#${SHELL_ROOT_ID} .ge-bonus-spacer { flex:1; min-height:.7em; }
+#${SHELL_ROOT_ID} .ge-bonus-vol { display:flex; justify-content:center; align-items:center; gap:0;
+  font-size:2.1em; line-height:1; margin-bottom:.55em; }
+#${SHELL_ROOT_ID} .ge-bonus-vol-on, #${SHELL_ROOT_ID} .ge-bonus-vol-off { display:inline-flex; gap:0; }
+#${SHELL_ROOT_ID} .ge-bonus-vol-on { color:var(--card-acc); }
+#${SHELL_ROOT_ID} .ge-bonus-vol-off { color:rgba(255,255,255,.18); }
+#${SHELL_ROOT_ID} .ge-bonus-price { font-size:1.6em; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }
+#${SHELL_ROOT_ID} .ge-bonus-cta { width:100%; border:none; padding:1.15em; font-weight:800; font-size:1.05em;
+  letter-spacing:.05em; text-transform:uppercase; cursor:pointer; background:var(--card-acc); color:var(--card-ink);
+  transition:filter .12s ease; }
+#${SHELL_ROOT_ID} .ge-bonus-cta:hover:not([disabled]) { filter:brightness(1.06); }
+/* unaffordable / disabled */
+#${SHELL_ROOT_ID} .ge-bonus-card.ge-bonus-off { opacity:.62; cursor:default; }
+#${SHELL_ROOT_ID} .ge-bonus-off .ge-bonus-title { color:rgba(255,255,255,.6); }
+#${SHELL_ROOT_ID} .ge-bonus-off .ge-bonus-vol-on { color:rgba(255,255,255,.4); }
+#${SHELL_ROOT_ID} .ge-bonus-off .ge-bonus-cta { background:#8d939e; color:#3a3f47; cursor:default; }
+/* buy-bonus confirm — bonus preview inside the shared sheet card (see .ge-sheet-actions below) */
+#${SHELL_ROOT_ID} .ge-confirm-preview { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
+#${SHELL_ROOT_ID} .ge-confirm-preview .ge-bonus-thumb,
+#${SHELL_ROOT_ID} .ge-confirm-preview .ge-bonus-vol { margin:0; }
+/* effective-bet readout while a feature is active (value colour set inline to the feature accent) */
+#${SHELL_ROOT_ID} .ge-rd.ge-bet-feature { font-weight:800; }
+/* bet control — compact pill in a thin footer at the screen bottom (footer only as tall as the pill) */
+#${SHELL_ROOT_ID} .ge-bb-betbar { flex:0 0 auto; display:flex; justify-content:center; padding:4px; }
+#${SHELL_ROOT_ID} .ge-bb-betpill { display:inline-flex; align-items:center; gap:4px;
+  background:var(--shell-plaque-dark); border-radius:999px; padding:3px 5px; }
+#${SHELL_ROOT_ID} .ge-bb-betstep { pointer-events:auto; cursor:pointer; width:32px; height:32px; border:none; border-radius:50%;
+  background:none; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center;
+  transition:color .12s ease, transform .08s ease; }
+#${SHELL_ROOT_ID} .ge-bb-betstep:hover { color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-bb-betstep:active { transform:scale(.9); }
+#${SHELL_ROOT_ID} .ge-bb-betval { min-width:80px; text-align:center; padding:0 2px; }
+#${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; }
+
+/* ═══ base/wide plaque bar — grouped dark + glass panels (reference-style) ═══ */
+#${SHELL_ROOT_ID} .ge-zone-plaques { gap:0; }                     /* panels connect; buttons overlap */
+#${SHELL_ROOT_ID} .ge-pl { display:flex; align-items:center; height:56px; box-sizing:border-box;
+  border-radius:16px; padding:0 20px; gap:18px; }
+#${SHELL_ROOT_ID} .ge-pl-dark { background:var(--shell-plaque-dark); }
+#${SHELL_ROOT_ID} .ge-pl-glass { background:var(--shell-plaque-glass); }
+/* FS spins-counter plaque (wide) — sits between balance and bet, glass like balance */
+#${SHELL_ROOT_ID} .ge-fscount { justify-content:center; min-width:150px; }
+#${SHELL_ROOT_ID} .ge-pl .ge-rd { color:#fff; text-shadow:none; }
+#${SHELL_ROOT_ID} .ge-pl .ge-rd .ge-lbl { color:var(--shell-plaque-label); }
+#${SHELL_ROOT_ID} .ge-pl .ge-iconbtn { color:#fff; }
+/* LEFT: [menu] ⊐ coin ⊏ [balance] — coin overlaps both; balance fixed-wide so it doesn't jiggle */
+#${SHELL_ROOT_ID} .ge-pl-menu { border-radius:16px 0 0 16px; padding-right:20px; }
+#${SHELL_ROOT_ID} .ge-pl-bal { border-radius:0 16px 16px 0; padding-left:24px; min-width:240px; }
+#${SHELL_ROOT_ID} .ge-zone-plaques .ge-shell-buybonus { margin:0 -16px; position:relative; z-index:3; }
+/* RIGHT: [bet] · |divider| · [auto · SPIN · turbo] */
+#${SHELL_ROOT_ID} .ge-pl-bet { border-radius:16px 0 0 16px; justify-content:space-between;
+  width:210px; padding-right:8px; }   /* fixed: bet value never reflows the panel */
+#${SHELL_ROOT_ID} .ge-pl-divider { align-self:center; flex:0 0 auto; width:1px; height:30px;
+  background:var(--shell-plaque-line); }
+#${SHELL_ROOT_ID} .ge-spinwrap { display:flex; align-items:center; gap:10px; height:56px;
+  border-radius:0 16px 16px 0; padding:0 8px 0 14px; }
+#${SHELL_ROOT_ID} .ge-spinwrap .ge-iconbtn { color:#fff; }
+#${SHELL_ROOT_ID} .ge-spinwrap .ge-shell-spin { margin:0 -2px; position:relative; z-index:3; }
+/* tighter bet chevrons, parked next to autoplay */
+#${SHELL_ROOT_ID} .ge-pl-bet .ge-betstep { gap:0; }
+#${SHELL_ROOT_ID} .ge-pl-bet .ge-betstep .ge-iconbtn { height:24px; }
+/* accent hover highlight on every control */
+#${SHELL_ROOT_ID} .ge-pl .ge-iconbtn:hover, #${SHELL_ROOT_ID} .ge-spinwrap .ge-iconbtn:hover,
+#${SHELL_ROOT_ID} .ge-iconbtn:hover { color:var(--shell-accent); }
+/* turbo at rest (level 0) reads as dimmed — clearly off, but lighter than a true [disabled] control */
+#${SHELL_ROOT_ID} [data-ge="turbo"]:not(.ge-active) { opacity:.5; }
+#${SHELL_ROOT_ID} [data-ge="turbo"]:not(.ge-active):hover { opacity:1; }
+/* autoplay glow while running (beats the white .ge-spinwrap/.ge-pl colour rules) */
+#${SHELL_ROOT_ID} .ge-iconbtn.ge-glow { color:var(--shell-accent); filter:drop-shadow(0 0 6px var(--shell-accent)); }
+/* tappable stake readout opens the bet picker */
+#${SHELL_ROOT_ID} .ge-betbtn { pointer-events:auto; cursor:pointer; border-radius:8px; transition:color .12s ease; }
+#${SHELL_ROOT_ID} .ge-betbtn:hover { color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-betbtn.ge-disabled { pointer-events:none; }
+/* WIN — inline between the groups, same block height/shape as the other plaques (glass tone) */
+#${SHELL_ROOT_ID} .ge-winpill { flex:0 0 auto; align-self:center; display:flex; align-items:center;
+  justify-content:center; gap:8px; height:56px; box-sizing:border-box; padding:0 24px; border-radius:16px;
+  white-space:nowrap; pointer-events:none; background:var(--shell-plaque-glass); color:#fff;
+  font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; text-shadow:none; }
+#${SHELL_ROOT_ID} .ge-winpill .ge-lbl { display:inline; margin:0; color:rgba(255,255,255,.7);
+  font-size:10px; letter-spacing:.12em; }
+/* lifted above the bar on overflow — compact pill (flex child of the host, scaled with it) */
+#${SHELL_ROOT_ID} .ge-winpill.ge-up { height:auto; padding:6px 16px; border-radius:999px; }
+
+/* centred CARD modal — opaque card on a frosted backdrop, accent title heading at the top
+   (no ✕), content, full-bleed footer button(s). Shared by the buy-bonus confirm AND the
+   bet/autoplay pickers so every centred modal is the same type. Close via backdrop click. */
+#${SHELL_ROOT_ID} .ge-sheet { position:absolute; inset:0; z-index:60; pointer-events:auto; display:flex;
+  align-items:center; justify-content:center; padding:clamp(10px,4vh,24px); box-sizing:border-box;
+  background:rgba(12,17,28,.5); backdrop-filter:blur(var(--ge-sheet-blur,20px)) saturate(120%);
+  -webkit-backdrop-filter:blur(var(--ge-sheet-blur,20px)) saturate(120%); animation:ge-ov-in .16s ease-out; }
+/* GameShell.fitModal() scales the whole card down (transform) so it fits short popouts uniformly */
+#${SHELL_ROOT_ID} .ge-modal-card { width:100%; max-width:420px; box-sizing:border-box; overflow:hidden;
+  transform-origin:center center; background:var(--shell-plaque-solid); border-radius:20px; display:flex; flex-direction:column; }
+/* ✕ pinned to the overlay corner (the screen), not the card */
+#${SHELL_ROOT_ID} .ge-modal-close { position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px;
+  border:none; border-radius:50%; cursor:pointer; pointer-events:auto; background:var(--shell-plaque-dark); color:#fff;
+  display:flex; align-items:center; justify-content:center; font-size:20px; transition:background .12s ease, color .12s ease; }
+#${SHELL_ROOT_ID} .ge-modal-close:hover { background:var(--shell-plaque-glass); color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-modal-body { padding:18px; display:flex; flex-direction:column; gap:16px; }
+#${SHELL_ROOT_ID} .ge-modal-title { margin:0; text-align:center; color:var(--card-acc, var(--shell-accent));
+  font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:18px; }
+#${SHELL_ROOT_ID} .ge-modal-text { margin:0; text-align:center; color:rgba(255,255,255,.85); font-size:14px; line-height:1.5; }
+#${SHELL_ROOT_ID} .ge-sheet-grid { display:grid; gap:10px; }
+#${SHELL_ROOT_ID} .ge-chip { pointer-events:auto; cursor:pointer; border:1px solid var(--shell-plaque-line);
+  border-radius:12px; background:rgba(255,255,255,.04); color:#fff; font-size:15px; font-weight:700;
+  font-variant-numeric:tabular-nums; padding:12px 8px; transition:background .12s ease, border-color .12s ease; }
+#${SHELL_ROOT_ID} .ge-chip:hover { background:var(--shell-plaque-glass-hover); }
+#${SHELL_ROOT_ID} .ge-chip.ge-on { border-color:var(--shell-accent); background:var(--shell-accent); color:#fff; }
+/* full-bleed footer button(s), flush to the card's bottom edge (card clips the corners) */
+#${SHELL_ROOT_ID} .ge-modal-actions { display:flex; }
+#${SHELL_ROOT_ID} .ge-modal-actions > * { flex:1; }
+#${SHELL_ROOT_ID} .ge-modal-btn { width:100%; border:none; padding:16px; font-size:15px; font-weight:800;
+  letter-spacing:.04em; text-transform:uppercase; cursor:pointer; pointer-events:auto; transition:filter .12s ease; }
+#${SHELL_ROOT_ID} .ge-modal-btn:hover:not([disabled]) { filter:brightness(1.08); }
+#${SHELL_ROOT_ID} .ge-modal-btn--accent { background:var(--card-acc, var(--shell-accent)); color:#fff; }
+#${SHELL_ROOT_ID} .ge-modal-btn--ghost { background:var(--shell-plaque-glass-hover); color:#fff; }
+/* replay summary — label/value rows, accented total-win row */
+#${SHELL_ROOT_ID} .ge-replay-rows { display:flex; flex-direction:column; }
+#${SHELL_ROOT_ID} .ge-replay-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 2px; }
+#${SHELL_ROOT_ID} .ge-replay-row + .ge-replay-row { border-top:1px solid var(--shell-plaque-line); }
+#${SHELL_ROOT_ID} .ge-replay-row span { color:var(--shell-plaque-label); text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:700; }
+#${SHELL_ROOT_ID} .ge-replay-row b { color:#fff; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; }
+#${SHELL_ROOT_ID} .ge-replay-total span { color:#fff; font-size:12px; }
+#${SHELL_ROOT_ID} .ge-replay-total b { color:var(--shell-accent); font-size:19px; }
+
+#${SHELL_ROOT_ID}.ge-shell-hidden { opacity:0; pointer-events:none; transition:opacity .25s ease; }
+`;

package/src/shell/state.ts

@@ -0,0 +1,30 @@
+import type { ShellConfig, ShellState } from './types';
+
+export function createInitialState(config: ShellConfig): ShellState {
+  return {
+    mode: config.mode,
+    balance: config.balance,
+    win: config.win,
+    bet: config.currentBet ?? config.defaultBet,
+    availableBets: [...config.availableBets],
+    busy: false,
+    autoplay: { active: false, remaining: 0 },
+    turbo: 0,
+    buyBonusEnabled: true,
+    freeSpins: { current: 0, total: 0, totalWin: 0, lastWin: 0 },
+    activeFeature: null,
+  };
+}
+
+/** Step bet up/down within availableBets, clamped at the ends. */
+export function stepBet(state: ShellState, direction: 1 | -1): number {
+  const idx = state.availableBets.indexOf(state.bet);
+  const next = Math.max(0, Math.min(state.availableBets.length - 1, idx + direction));
+  return state.availableBets[next];
+}
+
+/** Cycle turbo level 0..maxLevels (wraps back to 0). */
+export function nextTurbo(current: number, maxLevels: number): number {
+  if (maxLevels <= 0) return 0;
+  return current >= maxLevels ? 0 : current + 1;
+}

package/src/shell/theme.ts

@@ -0,0 +1,56 @@
+import type { ThemeConfig } from './types';
+import { BRAND_ACCENT } from './colors';
+
+const DEFAULT_ACCENT = BRAND_ACCENT; // brand purple — BUY BONUS + active states (single source: colors.ts)
+
+// Neutral palettes for each scheme. Everything the shell paints reads from these
+// tokens, so a single `scheme` flip recolours bar, icons, overlays and toggles.
+const PALETTE = {
+  dark: {
+    fg: '#f3f5fa', muted: '#9aa3b6', icon: '#c7cedb', iconActive: '#ffffff',
+    surface: '#0c111c', hairline: 'rgba(255,255,255,.07)',
+    veil: 'rgba(255,255,255,.05)', veilStrong: 'rgba(255,255,255,.1)', track: 'rgba(255,255,255,.16)',
+    soft: '#dfe4ee', spin: '#f4f6fb', spinFg: '#141a28',
+  },
+  light: {
+    fg: '#15202e', muted: '#5a6678', icon: '#3c4658', iconActive: '#0b1220',
+    surface: '#eef1f7', hairline: 'rgba(15,23,42,.12)',
+    veil: 'rgba(15,23,42,.05)', veilStrong: 'rgba(15,23,42,.09)', track: 'rgba(15,23,42,.22)',
+    soft: '#3a4453', spin: '#1c2434', spinFg: '#f3f6fb',
+  },
+} as const;
+
+/** CSS custom-property block for the shell root. `scheme` picks the palette;
+ *  only accent and buyBonus are additionally game-overridable. */
+export function buildThemeVars(theme: ThemeConfig = {}): string {
+  const p = PALETTE[theme.scheme === 'light' ? 'light' : 'dark'];
+  return [
+    `--shell-fg: ${p.fg}`,
+    `--shell-muted: ${p.muted}`,
+    `--shell-icon: ${p.icon}`,
+    `--shell-icon-active: ${p.iconActive}`,
+    `--shell-surface: ${p.surface}`,
+    `--shell-hairline: ${p.hairline}`,
+    `--shell-veil: ${p.veil}`,
+    `--shell-veil-strong: ${p.veilStrong}`,
+    `--shell-track: ${p.track}`,
+    `--shell-soft: ${p.soft}`,
+    `--shell-spin: ${p.spin}`,
+    `--shell-spin-fg: ${p.spinFg}`,
+    `--shell-radius: 12px`,
+    // Plaque tokens — the grouped dark/glass panel language shared by the control bar
+    // AND the overlays. Scheme-independent (always dark, white-on-dark) so bar + overlays
+    // stay visually identical regardless of the dark/light `scheme`.
+    `--shell-plaque-dark: rgba(6,9,15,.76)`,
+    `--shell-plaque-glass: rgba(30,36,48,.5)`,
+    `--shell-plaque-glass-hover: rgba(40,48,64,.62)`,
+    // Opaque surface for centred modals (confirm, bet/autoplay pickers) so they read solid,
+    // not see-through, over the frosted backdrop.
+    `--shell-plaque-solid: #1a2030`,
+    `--shell-plaque-line: rgba(255,255,255,.22)`,
+    `--shell-plaque-label: rgba(255,255,255,.6)`,
+    `--shell-accent: ${theme.accent ?? DEFAULT_ACCENT}`,
+    // buy-bonus tint follows the accent by default; only overridden when set explicitly
+    `--shell-buybonus: ${theme.buyBonusColor ?? theme.accent ?? DEFAULT_ACCENT}`,
+  ].join('; ') + ';';
+}

package/src/shell/types.ts

@@ -0,0 +1,191 @@
+export type ShellMode = 'base' | 'freeSpins' | 'replay';
+
+export interface CurrencyConfig {
+  symbol: string;
+  position: 'left' | 'right';
+  /** Maximum fraction digits (default 2). The value is rounded to this precision. */
+  decimals?: number;
+  /** Minimum fraction digits (defaults to `decimals`). Trailing zeros are trimmed down to
+   *  this many places, so small wins keep their significant digits (e.g. 0.0673) while round
+   *  amounts stay compact (e.g. 0.30). */
+  minDecimals?: number;
+  separator?: { thousands?: string; decimal?: string };
+}
+
+export interface BonusOption {
+  id: string;
+  /** 'bonus' buys into a bonus round, 'feature' toggles a base-game modifier (e.g. Ante).
+   *  Drives the card/button label and accent. Defaults to 'bonus'. */
+  type?: 'feature' | 'bonus';
+  title: string;
+  description: string;
+  /** Transparent art image shown at the top of the card (no background plate). */
+  thumbnail?: string;
+  volatility?: 1 | 2 | 3 | 4 | 5;
+  /** Card price = priceMultiplier × current bet, rendered in the shell currency. */
+  priceMultiplier: number;
+  /** Per-option accent override. Falls back to the type default (bonus → purple, feature → gold). */
+  accentColor?: string;
+}
+
+export interface ThemeConfig {
+  /** Palette scheme: 'dark' (default) for dark games, 'light' for light backgrounds. */
+  scheme?: 'dark' | 'light';
+  accent?: string;
+  buyBonusColor?: string;
+}
+
+/** One paytable entry: a symbol (text/image) and its win tiers, rendered "<count> x<multiplier>". */
+export interface PaytableRow {
+  symbol: { text?: string; image?: string };
+  wins: Array<{ count?: string; multiplier: number }>;
+}
+
+/** One payline over a cols×rows grid: the row index (0 = top) the line takes in each column. */
+export interface PaylineDef {
+  /** length must equal grid.cols; each value in 0..rows-1 */
+  pattern: number[];
+  label?: string;
+}
+
+/** A single grid cell, 0-based, row 0 = top. */
+export type CellRef = [col: number, row: number];
+
+/** How a game pays — drives the GameInfo win-section illustration. One section = one kind.
+ *  `example`/`winExample`/`loseExample` are optional; omit them for an auto-drawn illustration
+ *  sized to `grid`. */
+export type WinSection = {
+  type: 'wins';
+  title?: string;
+  order?: number;
+  grid: { cols: number; rows: number };
+  /** Optional prose shown alongside the illustration. */
+  description?: string;
+} & (
+  | { kind: 'classic'; lines: Array<number[] | PaylineDef> }
+  | { kind: 'cluster'; minCount: number; example?: CellRef[] }
+  | { kind: 'anywhere'; minCount: number; example?: CellRef[] }
+  | { kind: 'ways'; winExample?: CellRef[]; loseExample?: CellRef[] }
+);
+
+/** A playable mode / bonus-buy option, shown for comparison (informational only). */
+export interface GameMode {
+  title: string;
+  price?: string;
+  rtp?: number;
+  maxWin?: string;
+  description?: string;
+}
+
+/** A preset game-info section. `order` overrides placement; by default `modes` comes
+ *  first, `controls` second, and the rest follow in declaration order. */
+export type GameInfoSection =
+  | { type: 'modes'; title?: string; order?: number; modes: GameMode[] }
+  | { type: 'controls'; title?: string; order?: number }
+  | { type: 'paytable'; title?: string; order?: number; rows: PaytableRow[] }
+  | WinSection
+  | { type: 'custom'; title?: string; order?: number; node?: HTMLElement; html?: string };
+
+export interface GameInfoContent {
+  sections?: GameInfoSection[];
+}
+
+export interface ShellFeatures {
+  turbo: 0 | 1 | 2 | 3;
+  autoplay: boolean;
+  buyBonus: BonusOption[] | false;
+}
+
+export interface AutoplayOptions {
+  active: boolean;
+  remaining: number;
+}
+
+export interface FreeSpinsState {
+  current: number;
+  total: number;
+  totalWin: number;
+  lastWin: number;
+}
+
+/** One footer button of a generic modal. Clicking it runs `on` (if any), then closes the modal. */
+export interface ModalAction {
+  title: string;
+  /** Button fill colour (any CSS colour). Omit for a neutral/secondary button. */
+  color?: string;
+  on?: () => void;
+}
+
+/** Options for `shell.openReplay()` — a non-dismissable replay summary modal.
+ *  `bonusId` is matched against `features.buyBonus` to label the mode and read the cost
+ *  multiplier. There is no ✕ and the backdrop never closes it; the only action is START
+ *  REPLAY, which closes the modal, runs `onReplay`, then reopens it. */
+export interface ReplayModalOptions {
+  bonusId: string;
+  /** Base bet the replay was recorded at. */
+  bet: number;
+  payoutMultiplier: number;
+  /** Runs after the modal closes; the modal reopens once it resolves (immediately for sync). */
+  onReplay: () => void | Promise<void>;
+}
+
+/** Options for `shell.openModal()` — a generic, externally-triggered card modal. */
+export interface ModalOptions {
+  /** Show the ✕ in the overlay's top-right corner. */
+  availableClose: boolean;
+  title: string;
+  body: string;
+  /** Footer buttons; each closes the modal (after running its `on`). */
+  actions?: ModalAction[];
+  /** Backdrop blur in px (defaults to the shell's standard blur). */
+  blurLevel?: number;
+}
+
+export interface ShellConfig {
+  mount: HTMLElement;
+  theme?: ThemeConfig;
+  gameInfo: GameInfoContent;
+  language: string;
+  /** When true, all built-in shell text is shown in the social-casino vocabulary (derived from
+   *  English via word-swap rules), regardless of `language`. Game-supplied content is untouched. */
+  isSocial?: boolean;
+  currency: CurrencyConfig;
+  availableBets: number[];
+  defaultBet: number;
+  currentBet: number | null;
+  balance: number;
+  win: number;
+  mode: ShellMode;
+  features: ShellFeatures;
+}
+
+export interface ShellState {
+  mode: ShellMode;
+  balance: number;
+  win: number;
+  bet: number;
+  availableBets: number[];
+  busy: boolean;
+  autoplay: AutoplayOptions;
+  turbo: number;
+  buyBonusEnabled: boolean;
+  freeSpins: FreeSpinsState;
+  /** The currently activated `feature` option (e.g. Ante), or null. Drives the
+   *  effective-bet readout tint and the BUY BONUS → DISABLE toggle on the bar. */
+  activeFeature: BonusOption | null;
+}
+
+export interface ShellEvents {
+  spin: void;
+  betChange: number;
+  autoplayStart: AutoplayOptions;
+  autoplayStop: void;
+  turboChange: number;
+  buyBonusSelect: { id: string };
+  featureActivate: { id: string };
+  featureDeactivate: { id: string };
+  menuOpen: void;
+  settingsOpen: void;
+  infoOpen: void;
+  settingChange: { key: string; value: unknown };
+}