@energy8platform/platform-core 0.26.1 → 0.27.0

package/src/shell/i18n.ts

@@ -1,56 +1,16 @@
 import { LOCALES } from './locales';
+import { SOCIAL_REPLACEMENTS } from '@energy8platform/game-sdk/social';
 
 // Social-casino language. English is the source (and, for now, the only) language; `socialize`
 // rewrites the restricted gambling vocabulary into social-safe phrasing while preserving case.
 //
-// Ordering matters: the longest / most specific phrases are listed first so they win over their
-// constituent words (e.g. "buy bonus" before "buy", "pay out" before "pay"). The JS alternation
-// tries entries left-to-right at each position, so a phrase earlier in this list takes priority.
-//
-// Conflicting duplicates in the source table are resolved to a single replacement here
-// (betting→playing, total bet→total play, paid out→won, pays out→win).
-const RULES: ReadonlyArray<readonly [string, string]> = [
-  ['be awarded to player’s accounts', 'appear in player’s accounts'],
-  ["be awarded to player's accounts", "appear in player's accounts"],
-  ['place your bets', 'come and play / join in the game'],
-  ['at the cost of', 'for'],
-  ['cost of', 'can be played for'],
-  ['win feature', 'play feature'],
-  ['total bet', 'total play'],
-  ['buy bonus', 'get bonus'],
-  ['bonus buy', 'bonus / feature'],
-  ['pay out', 'win / won'],
-  ['paid out', 'won'],
-  ['pays out', 'win'],
-  ['payout', 'win'], // single word; "pay out" (spaced) is handled above
-  ['paytable', 'win table'],
-  ['paylines', 'winlines'],
-  ['payline', 'winline'],
-  ['bet/s', 'play/s'],
-  ['betting', 'playing'],
-  ['rebet', 'respin'],
-  ['stake', 'play amount'],
-  ['payer', 'winner'],
-  ['bets', 'plays'],
-  ['pays', 'wins'],
-  ['paid', 'won'],
-  ['bought', 'instantly triggered'],
-  ['purchase', 'play'],
-  ['price', 'play'],
-  ['cost', 'play'], // standalone; the "cost of" / "at the cost of" phrases above win first
-  ['deposit', 'get coins'],
-  ['withdraw', 'redeem'],
-  ['currency', 'token'],
-  ['gamble', 'play'],
-  ['wager', 'play'],
-  ['credit', 'balance'],
-  ['money', 'coins'],
-  ['cash', 'coins'],
-  ['fund', 'balance'],
-  ['bet', 'play'],
-  ['pay', 'win'],
-  ['buy', 'play'],
-];
+// The dictionary is the SHARED, canonical list in `@energy8platform/game-sdk/social` — the DOM
+// shell, the Pixi shell and stake-bridge all consume it, so the vocabulary can't drift. We only
+// sort it here: the combined regex below matches the FIRST alternative that fits at a position, so
+// the longest / most specific phrases must come first (e.g. "buy bonus" before "buy").
+const RULES: ReadonlyArray<readonly [string, string]> = [...SOCIAL_REPLACEMENTS]
+  .sort((a, b) => b.from.length - a.from.length)
+  .map((r) => [r.from, r.to] as const);
 
 const MAP = new Map(RULES.map(([k, v]) => [k.toLowerCase(), v] as const));
 const escapeRe = (s: string): string => s.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');

package/src/shell/shell.css.ts

@@ -1,10 +1,11 @@
 import { SHELL_FONT_CSS } from './fonts';
+import { SHELL_DIGIT_FONT_CSS } from './fonts-digits';
 
 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 + `
+export const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} {
   position: absolute; inset: 0;
   container-type: size;   /* query container → centred modals size in cq units (responsive on every screen) */
@@ -55,7 +56,9 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
   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); }
+/* the ticket glyph fills the badge (em-sized off the button's font-size, so it scales per context) */
+#${SHELL_ROOT_ID} .ge-shell-buybonus .ge-bb-tk { display:flex; font-size:3.5em; color:#0b0e16; }
+#${SHELL_ROOT_ID} .ge-shell-buybonus:hover { box-shadow:0 0 11px 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; }
@@ -66,9 +69,10 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
 #${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:4px;
   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 6px; gap:14px; }
+/* bottom bar: a row of [BUY BONUS (outside-left)] + [one continuous dark panel] (wide default).
+   Capped at 750px and centred (the barhost centres it) so it doesn't stretch edge-to-edge on wide screens. */
+#${SHELL_ROOT_ID} .ge-shell-bottom { width:100%; max-width:850px; box-sizing:border-box; pointer-events:none;
+  display:flex; align-items:center; justify-content:flex-start; padding:0 14px 8px; gap:10px; }
 #${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; }
@@ -76,11 +80,11 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
 #${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; }
+/* mobile (portrait) — two levels: [controls bar] over a small [balance · − bet + · win] info pill */
+#${SHELL_ROOT_ID}.ge-mobile .ge-shell-bottom { flex-direction:column; align-items:center; gap:10px; padding:8px 12px 8px; }
+/* level 1 — the dark controls bar (white icons, spin disc, buy badge) */
 #${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; }
+  width:100%; box-sizing:border-box; height:62px; border-radius:16px; padding:0 18px; background:var(--shell-bar); }
 #${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; }
@@ -88,8 +92,28 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
 /* 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; }
+/* level 2 — the small info pill. Readouts are smaller and each can shrink long numbers (see fitBet). */
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-info { display:flex; align-items:center; justify-content:space-between;
+  width:100%; box-sizing:border-box; height:40px; border-radius:12px; padding:0 14px; gap:10px;
+  background:var(--shell-plaque-glass); }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-info > .ge-rd { flex:1 1 0; min-width:0; overflow:hidden; color:#fff;
+  text-shadow:none; font-size:11px; transform-origin:left center; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-info > .ge-win { text-align:right; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-info > .ge-win .ge-rd-val { transform-origin:right center; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-info .ge-rd .ge-lbl { color:var(--shell-plaque-label); font-size:8px; margin-bottom:2px; }
+/* bet sits in the middle: − value + (compact), fixed so the numbers don't shove balance/win */
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-betgroup { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-betgroup .ge-iconbtn { width:26px; height:26px; color:#fff; font-size:18px; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-betgroup .ge-iconbtn:hover { color:var(--shell-accent); }
+/* fixed-width box (sized for up to ~€100,000) so +/- never resizes the bet or shifts balance/win;
+   bigger amounts shrink the number instead (fitBet) */
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-betgroup .ge-bet-value { flex:0 0 auto; width:76px; font-size:11px;
+  text-align:center; color:#fff; text-shadow:none; }
+#${SHELL_ROOT_ID}.ge-mobile .ge-m-betgroup .ge-bet-value .ge-rd-val { transform-origin:center; }
+/* SPIN — same as desktop: white disc, black icon + ring; hover tints the icon accent (no fill/ring) */
+#${SHELL_ROOT_ID}.ge-mobile .ge-shell-spin { width:84px; height:84px; font-size:66px; border-width:4px;
+  background:var(--shell-btn); color:var(--shell-btn-ink); }
+#${SHELL_ROOT_ID}.ge-mobile .ge-shell-spin:hover { background:var(--shell-btn); color:var(--shell-accent); box-shadow:none; }
 #${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; }
@@ -345,56 +369,82 @@ export const SHELL_CSS = SHELL_FONT_CSS + `
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval b { font-size:clamp(9px,2.5cqh,11px); }
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval span { font-size:clamp(5px,1.25cqh,6px); }
 
-/* ═══ 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/replay left blocks — Free Spins counter (compact) + Total Win, standalone glass plaques
-   sitting just right of the balance pill */
-#${SHELL_ROOT_ID} .ge-pl-fs, #${SHELL_ROOT_ID} .ge-pl-totalwin { margin-left:8px; }
-#${SHELL_ROOT_ID} .ge-pl-fs { padding:0 16px; }
-#${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:200px; }
-#${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 */
+/* ═══ desktop control bar — one continuous dark panel; white-disc buttons; BUY BONUS outside-left ═══ */
+/* the dark surface fills the row width (BUY BONUS sits outside, to its left) */
+#${SHELL_ROOT_ID} .ge-bar-panel { flex:1 1 auto; min-width:0; box-sizing:border-box; display:flex;
+  align-items:center; justify-content:space-between; gap:10px; height:68px; padding:0 14px;
+  border-radius:12px; background:var(--shell-bar); }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-zone-left, #${SHELL_ROOT_ID} .ge-bar-panel .ge-zone-right { gap:12px; min-width:0; }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-rd { color:#fff; text-shadow:none; }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-rd .ge-lbl { color:var(--shell-plaque-label); }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-balance { min-width:142px; }  /* fixed-wide so the digits don't reflow the row */
+
+/* white-disc buttons: black icon + black ring; hover tints just the ICON accent (no outer ring) */
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-iconbtn { width:38px; height:38px; border-radius:50%; border:2px solid #000;
+  background:var(--shell-btn); color:var(--shell-btn-ink); font-size:19px; }
+/* hover + active/engaged tint the icon AND the ring accent (menu/steppers have no border, so unaffected) */
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-iconbtn:hover { background:var(--shell-btn); color:var(--shell-accent); border-color:var(--shell-accent); }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-iconbtn.ge-active,
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-iconbtn.ge-glow { color:var(--shell-accent); border-color:var(--shell-accent); }
+/* autoplay glyph reads small in its disc — enlarge it */
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-iconbtn[data-ge="autoplay"] { font-size:25px; }
+/* MENU stays a plain (borderless) icon — just larger; no white disc */
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-iconbtn[data-ge="menu"] { background:none; border:none;
+  width:auto; height:auto; color:#fff; font-size:30px; }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-iconbtn[data-ge="menu"]:hover { background:none; color:var(--shell-accent); }
+/* turbo at rest reads 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)); }
+
+/* BET group — value + tight stacked chevrons, parked close to the divider (no extra air) */
+#${SHELL_ROOT_ID} .ge-betgroup { display:flex; align-items:center; gap:8px; }
+/* the value box is a FIXED width (sized to hold up to ~€100,000) so changing the stake never shifts
+   the steppers/divider/SPIN; bigger amounts shrink the value span instead — see fitBet(). */
+#${SHELL_ROOT_ID} .ge-betgroup .ge-bet-value { flex:0 0 auto; width:90px; border-radius:0; }
+/* every readout's value is an inline-block span so it can be measured & transform-scaled to fit;
+   numerals render in OswaldNum (the digit-only subset), text glyphs fall back to Inter */
+#${SHELL_ROOT_ID} .ge-rd-val { display:inline-block; white-space:nowrap; transform-origin:left center;
+  font-family:'OswaldNum','Inter',sans-serif; font-size:1.15em; }
+#${SHELL_ROOT_ID} .ge-spin-count { font-family:'OswaldNum','Inter',sans-serif; }
+#${SHELL_ROOT_ID} .ge-betgroup .ge-betstep { gap:2px; }
+/* the +/- stay plain icons (no white disc), just bolder/bigger than the default */
+#${SHELL_ROOT_ID} .ge-betgroup .ge-betstep .ge-iconbtn { background:none; border:none; width:30px; height:22px;
+  color:#fff; font-size:22px; }
+#${SHELL_ROOT_ID} .ge-betgroup .ge-betstep .ge-iconbtn:hover { background:none; color: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; }
+
+/* divider — short, with air above & below (not full bar height) */
+#${SHELL_ROOT_ID} .ge-pl-divider { align-self:center; flex:0 0 auto; width:1px; height:22px;
+  background:var(--shell-plaque-line); }
+
+/* SPIN + auto/turbo cluster — SPIN is the hero white disc: larger than the bar so it pops above/below */
+#${SHELL_ROOT_ID} .ge-spinwrap { display:flex; align-items:center; gap:8px; }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-shell-spin { width:84px; height:84px; font-size:65px; border-width:4px;
+  background:var(--shell-btn); color:var(--shell-btn-ink); position:relative; z-index:3; }
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-shell-spin:hover { background:var(--shell-btn); color:var(--shell-accent); box-shadow:none; }
+
+/* FS hero — replaces SPIN in free spins: same white/black-ring hero, but a rounded rectangle showing
+   the spins counter. Pops above/below the bar like SPIN (height matches the disc). */
+#${SHELL_ROOT_ID} .ge-fs-hero { pointer-events:auto; box-sizing:border-box; height:84px; min-width:96px;
+  padding:0 18px; border:4px solid #000; border-radius:20px; background:var(--shell-btn); color:var(--shell-btn-ink);
+  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
+  position:relative; z-index:3; }
+/* the label wraps to ≤2 lines so long localizations ("Бесплатные вращения") fit the narrow hero */
+#${SHELL_ROOT_ID} .ge-fs-hero .ge-fs-lbl { font-weight:700; font-size:9px; line-height:1.1; letter-spacing:.08em;
+  text-transform:uppercase; color:#454c5a; text-align:center; max-width:11ch; }
+#${SHELL_ROOT_ID} .ge-fs-hero .ge-fs-num { font-family:'OswaldNum','Inter',sans-serif; font-weight:700;
+  font-size:30px; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
+
+/* BUY BONUS — floats outside-left of the bar; keeps its accent disc + hover ring (the one exception).
+   relative/z-index so it stacks predictably under the full-screen overlays (see overlay-stacking test). */
+#${SHELL_ROOT_ID} .ge-shell-bottom > .ge-shell-buybonus { flex:0 0 auto; width:62px; height:62px;
+  font-size:11px; border-width:3px; position:relative; z-index:3; }
+
+/* WIN — a plain readout (same as balance/bet), grouped on the left with the other info */
+#${SHELL_ROOT_ID} .ge-bar-panel .ge-win { pointer-events:none; }
 
 /* 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

package/src/shell/theme.ts

@@ -44,6 +44,11 @@ export function buildThemeVars(theme: ThemeConfig = {}): string {
     `--shell-plaque-dark: rgba(6,9,15,.86)`,
     `--shell-plaque-glass: rgba(30,36,48,.70)`,
     `--shell-plaque-glass-hover: rgba(40,48,64,.86)`,
+    // The desktop control bar is one continuous, slightly-darker surface (vs the lighter plaque
+    // panels). Buttons sitting on it are white discs with black icons (see .ge-bar-panel CSS).
+    `--shell-bar: rgba(6,9,15,.86)`,
+    `--shell-btn: #f4f6fb`,
+    `--shell-btn-ink: #0b0e16`,
     // Opaque surface for centred modals (confirm, bet/autoplay pickers) so they read solid,
     // not see-through, over the frosted backdrop.
     `--shell-plaque-solid: #1a2030`,

package/src/shell/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED by scripts/gen-version.mjs — do not edit. Mirrors package.json "version".
 /** The @energy8platform/platform-core package version, stamped at build time. */
-export const PACKAGE_VERSION = '0.26.1';
+export const PACKAGE_VERSION = '0.27.0';