@open-slot-ui/pixi 0.4.2 → 0.5.1

package/dist/chunk-PYXZIGXG.js

@@ -0,0 +1,3733 @@
+import { Container, Graphics, Text, Circle, Sprite, Rectangle, Ticker, BlurFilter, Texture } from 'pixi.js';
+import { resolvePlacement, displayDigits, valueFitMaxWidth, formatAmount, EventLog, composeMenu, buildBlocks, buttonBlocks } from '@open-slot-ui/core';
+
+// src/views/ControlView.ts
+var ControlView = class extends Container {
+  constructor(control, ui) {
+    super();
+    this.control = control;
+    this.ui = ui;
+    this.control.viewInspect = () => ({ bounds: this.computeRect(), animating: this.animating });
+  }
+  control;
+  ui;
+  animating = false;
+  disposers = [];
+  /** Position + fit-scale from the control's layout spec against the screen. */
+  applyLayout(screen) {
+    const p = resolvePlacement(this.control.layout, screen);
+    this.position.set(p.x, p.y);
+    this.scale.set(p.scale);
+    this.rotation = p.rotation;
+  }
+  computeRect() {
+    if (this.destroyed) return null;
+    const b = this.getBounds();
+    return { x: b.minX, y: b.minY, width: b.maxX - b.minX, height: b.maxY - b.minY };
+  }
+  dispose() {
+    for (const d of this.disposers) d();
+    this.disposers.length = 0;
+    this.control.viewInspect = void 0;
+    if (!this.destroyed) this.destroy({ children: true });
+  }
+};
+var Tweener = class {
+  constructor(ticker) {
+    this.ticker = ticker;
+  }
+  ticker;
+  frames = /* @__PURE__ */ new Set();
+  loopResolve = null;
+  stop() {
+    for (const fn of this.frames) this.ticker.remove(fn);
+    this.frames.clear();
+    if (this.loopResolve) {
+      const resolve = this.loopResolve;
+      this.loopResolve = null;
+      resolve();
+    }
+  }
+  run(target, transition, _theme) {
+    this.stop();
+    target.scale.set(1);
+    target.rotation = 0;
+    target.alpha = 1;
+    if (!transition) return Promise.resolve();
+    return this.exec(target, transition);
+  }
+  add(fn) {
+    this.frames.add(fn);
+    this.ticker.add(fn);
+  }
+  done(fn) {
+    this.ticker.remove(fn);
+    this.frames.delete(fn);
+  }
+  exec(target, t) {
+    switch (t.kind) {
+      case "squish":
+      case "pulse":
+        return this.scaleYoyo(target, t.scale, t.ms);
+      case "fade":
+        return this.fadeTo(target, t.alpha, t.ms);
+      case "turn":
+        return this.turn(target, t.rps);
+      case "sequence":
+        return this.runSequence(target, t.steps);
+      case "parallel":
+        return Promise.all(t.steps.map((s) => this.exec(target, s))).then(() => void 0);
+      default:
+        return Promise.resolve();
+    }
+  }
+  scaleYoyo(target, peak, ms) {
+    return new Promise((resolve) => {
+      let elapsed = 0;
+      const half = Math.max(ms / 2, 1);
+      const fn = (ticker) => {
+        elapsed += ticker.deltaMS;
+        const k = elapsed < half ? elapsed / half : 1 - (elapsed - half) / half;
+        const s = 1 + (peak - 1) * Math.min(Math.max(k, 0), 1);
+        target.scale.set(s);
+        if (elapsed >= ms) {
+          target.scale.set(1);
+          this.done(fn);
+          resolve();
+        }
+      };
+      this.add(fn);
+    });
+  }
+  fadeTo(target, alpha, ms) {
+    return new Promise((resolve) => {
+      let elapsed = 0;
+      const from = target.alpha;
+      const dur = Math.max(ms, 1);
+      const fn = (ticker) => {
+        elapsed += ticker.deltaMS;
+        const k = Math.min(elapsed / dur, 1);
+        target.alpha = from + (alpha - from) * k;
+        if (k >= 1) {
+          this.done(fn);
+          resolve();
+        }
+      };
+      this.add(fn);
+    });
+  }
+  /** Continuous rotation; the promise resolves when `stop()` is next called. */
+  turn(target, rps) {
+    return new Promise((resolve) => {
+      this.loopResolve = resolve;
+      const fn = (ticker) => {
+        target.rotation += rps * Math.PI * 2 * (ticker.deltaMS / 1e3);
+      };
+      this.add(fn);
+    });
+  }
+  async runSequence(target, steps) {
+    for (const step of steps) await this.exec(target, step);
+  }
+};
+function drawSpin(g, theme, state) {
+  g.clear();
+  const r = 64;
+  const ring = state === "disabled" ? theme.color.disabled : theme.color.accent;
+  const glyph = state === "disabled" ? theme.color.textDim : theme.color.text;
+  g.circle(0, 0, r).fill({ color: theme.color.surface });
+  g.circle(0, 0, r).stroke({ width: 6, color: ring, alpha: 1 });
+  const s = 20;
+  g.moveTo(-s * 0.5, -s).lineTo(s, 0).lineTo(-s * 0.5, s).closePath().fill({ color: glyph });
+}
+var defaultSpinSkin = (theme) => {
+  const g = new Graphics();
+  const view = new Container();
+  view.addChild(g);
+  return {
+    view,
+    update: (state) => drawSpin(g, theme, state),
+    destroy: () => view.destroy({ children: true })
+  };
+};
+
+// src/util.ts
+function isDesktop() {
+  if (typeof window === "undefined") return true;
+  const noTouch = !("ontouchstart" in window);
+  const noPoints = (navigator.maxTouchPoints ?? 0) === 0;
+  return noTouch && noPoints;
+}
+var SpinView = class extends ControlView {
+  constructor(spin, ui, ticker, skinOrOpts = defaultSpinSkin) {
+    super(spin, ui);
+    this.spin = spin;
+    this.tween = new Tweener(ticker);
+    const opts = typeof skinOrOpts === "function" ? { skin: skinOrOpts } : skinOrOpts;
+    const skinFactory = opts.skin ?? defaultSpinSkin;
+    this.holdDelayMs = opts.holdDelayMs ?? 260;
+    this.skin = skinFactory(ui.theme);
+    this.art.addChild(this.skin.view);
+    const fsRing = new Graphics().circle(0, 0, 98).fill({ color: 16777215 }).circle(0, 0, 94).stroke({ width: 8, color: 657930 });
+    this.fsCount = new Text({ text: "0", style: { fontFamily: ui.theme.type.family, fontSize: 60, fill: 657930, fontWeight: "900" } });
+    this.fsCount.anchor.set(0.5);
+    this.fsCount.y = -14;
+    this.fsLabel = new Text({ text: ui.t("openui.freeSpins"), style: { fontFamily: ui.theme.type.family, fontSize: 24, fill: 657930, fontWeight: "900", letterSpacing: 3 } });
+    this.fsLabel.anchor.set(0.5);
+    this.fsLabel.y = 34;
+    this.fsFace.addChild(fsRing, this.fsCount, this.fsLabel);
+    this.fsFace.visible = false;
+    this.art.addChild(this.fsFace);
+    const stopRing = new Graphics().circle(0, 0, 96).fill({ color: 16777215 }).stroke({ width: 7, color: 657930 });
+    this.stopLabel = new Text({ text: ui.t("openui.stop") === "openui.stop" ? "STOP" : ui.t("openui.stop"), style: { fontFamily: ui.theme.type.family, fontSize: 26, fill: 657930, fontWeight: "900", letterSpacing: 3 } });
+    this.stopLabel.anchor.set(0.5);
+    this.stopLabel.y = -38;
+    this.stopCount = new Text({ text: "0", style: { fontFamily: ui.theme.type.family, fontSize: 64, fill: 657930, fontWeight: "900" } });
+    this.stopCount.anchor.set(0.5);
+    this.stopCount.y = 16;
+    this.stopFace.addChild(stopRing, this.stopLabel, this.stopCount);
+    this.stopFace.visible = false;
+    this.art.addChild(this.stopFace);
+    this.addChild(this.art);
+    this.hitArea = new Circle(0, 0, 118);
+    this.eventMode = "static";
+    this.cursor = "pointer";
+    this.on("pointerover", this.onOver);
+    this.on("pointerout", this.onOut);
+    this.on("pointerdown", this.onDown);
+    this.on("pointerup", this.onUp);
+    this.on("pointerupoutside", this.onUpOutside);
+    this.disposers.push(
+      this.spin.state.subscribe(() => {
+        this.skin.update(this.spin.current);
+        this.updateInteractive();
+      }),
+      // re-dim if slam-stop is toggled at runtime (e.g. applyJurisdiction)
+      this.spin.allowSlamStop.subscribe(() => this.updateInteractive()),
+      this.spin.onTransition((t) => this.play(t)),
+      // free-spins face: switch between the normal skin and the "N FS" counter
+      this.spin.freeSpins.subscribe(() => this.updateFaces()),
+      // autoplay: while active the spin button becomes the STOP-count button
+      this.ui.autoplay.state.subscribe(() => {
+        this.updateFaces();
+        this.updateInteractive();
+      }),
+      this.ui.autoplay.count.subscribe(() => this.updateFaces()),
+      this.ui.locale.subscribe(() => {
+        if (!this.destroyed) this.fsLabel.text = this.ui.t("openui.freeSpins");
+      })
+    );
+    this.skin.update(this.spin.current);
+    this.updateFaces();
+    this.updateInteractive();
+  }
+  spin;
+  art = new Container();
+  skin;
+  tween;
+  holdDelayMs;
+  holdTimer;
+  holding = false;
+  /** Free-spins face — a ring + remaining count + "FS"; shown when `spin.freeSpins > 0`. */
+  fsFace = new Container();
+  fsCount;
+  fsLabel;
+  /** Autoplay STOP face — a "STOP" label over the remaining count (or ∞); shown while
+   *  autoplay is active. Tapping the spin button then STOPS autoplay. */
+  stopFace = new Container();
+  stopCount;
+  stopLabel;
+  /** Pick the spin face: autoplay STOP-count (top priority) → free-spins counter →
+   *  the normal skin. */
+  updateFaces() {
+    const auto = this.ui.autoplay.isActive;
+    const n = this.spin.freeSpins.get();
+    const fs = n > 0 && !auto;
+    if (auto) {
+      const c = this.ui.autoplay.count.get();
+      this.stopCount.text = c === Infinity ? "\u221E" : String(c);
+    }
+    if (fs) this.fsCount.text = String(n);
+    this.stopFace.visible = auto;
+    this.fsFace.visible = fs;
+    this.skin.view.visible = !auto && !fs;
+  }
+  onOver = () => {
+    if (isDesktop() && this.spin.current === "idle") this.spin.setState("hover");
+  };
+  onOut = () => {
+    if (this.spin.current === "hover") this.spin.setState("idle");
+  };
+  onDown = () => {
+    if (!this.spin.interactable) return;
+    this.spin.setState("pressed");
+    if (this.spin.holdToSpin) {
+      this.holdTimer = setTimeout(() => {
+        this.holdTimer = void 0;
+        if (this.spin.current !== "pressed") return;
+        if (this.spin.holdBegin()) {
+          this.holding = true;
+          if (typeof window !== "undefined") {
+            window.addEventListener("pointerup", this.endHoldGlobal);
+            window.addEventListener("pointercancel", this.endHoldGlobal);
+          }
+        }
+      }, this.holdDelayMs);
+    }
+  };
+  onUp = () => {
+    if (this.holding) return this.endHold();
+    this.clearHoldTimer();
+    if (this.ui.autoplay.isActive) {
+      this.ui.autoplay.stop();
+      return;
+    }
+    if (this.spin.current === "pressed") {
+      this.spin.setState("idle");
+      this.spin.activate();
+    }
+  };
+  onUpOutside = () => {
+    if (this.holding) return this.endHold();
+    this.clearHoldTimer();
+    if (this.spin.current === "pressed") this.spin.setState("idle");
+  };
+  endHoldGlobal = () => this.endHold();
+  clearHoldTimer() {
+    if (this.holdTimer != null) {
+      clearTimeout(this.holdTimer);
+      this.holdTimer = void 0;
+    }
+  }
+  endHold() {
+    if (!this.holding) return;
+    this.holding = false;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("pointerup", this.endHoldGlobal);
+      window.removeEventListener("pointercancel", this.endHoldGlobal);
+    }
+    this.spin.holdEnd();
+    if (this.spin.current === "pressed") this.spin.setState("idle");
+  }
+  updateInteractive() {
+    const ok = this.spin.interactable || this.ui.autoplay.isActive;
+    this.eventMode = ok ? "static" : "none";
+    this.cursor = ok ? "pointer" : "default";
+    const inSpin = this.spin.current === "spinning" || this.spin.current === "auto" || this.spin.current === "stop";
+    this.art.alpha = !this.spin.allowSlamStop.get() && inSpin ? 0.45 : 1;
+  }
+  play(t) {
+    this.animating = true;
+    void this.tween.run(this.art, t, this.ui.theme).then(() => {
+      this.animating = false;
+    });
+  }
+  dispose() {
+    this.clearHoldTimer();
+    this.endHold();
+    this.tween.stop();
+    this.skin.destroy();
+    super.dispose();
+  }
+};
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var CELLS_PER_STRIP = 20;
+var Strip = class {
+  container;
+  cells;
+  renderer;
+  digitHeight;
+  dirtyLow = 1;
+  dirtyHigh = 0;
+  constructor(renderer, digitHeight) {
+    this.container = new Container();
+    this.renderer = renderer;
+    this.digitHeight = digitHeight;
+    this.cells = new Array(CELLS_PER_STRIP);
+    for (let i = 0; i < CELLS_PER_STRIP; i++) {
+      const cell = renderer.createCell(i % 10);
+      cell.y = i * digitHeight;
+      this.cells[i] = cell;
+      this.container.addChild(cell);
+    }
+  }
+  paintFillers(fromIdx, toIdx) {
+    const cells = this.cells;
+    if (this.dirtyHigh >= this.dirtyLow) {
+      for (let i = this.dirtyLow; i <= this.dirtyHigh; i++) {
+        this.renderer.setDigit(cells[i], i % 10);
+      }
+    }
+    const lo = fromIdx < toIdx ? fromIdx : toIdx;
+    const hi = fromIdx < toIdx ? toIdx : fromIdx;
+    const fillStart = lo + 1;
+    const fillEnd = hi - 1;
+    if (fillEnd < fillStart) {
+      this.dirtyLow = 1;
+      this.dirtyHigh = 0;
+      return;
+    }
+    for (let i = fillStart; i <= fillEnd; i++) {
+      this.renderer.setFiller(cells[i], i % 10);
+    }
+    this.dirtyLow = fillStart;
+    this.dirtyHigh = fillEnd;
+  }
+  clearFillers() {
+    if (this.dirtyHigh < this.dirtyLow) return;
+    const cells = this.cells;
+    for (let i = this.dirtyLow; i <= this.dirtyHigh; i++) {
+      this.renderer.setDigit(cells[i], i % 10);
+    }
+    this.dirtyLow = 1;
+    this.dirtyHigh = 0;
+  }
+  setY(y) {
+    this.container.y = y;
+  }
+  yForIndex(index) {
+    return -index * this.digitHeight;
+  }
+  destroy() {
+    const cells = this.cells;
+    if (this.renderer.destroyCell) {
+      for (let i = 0; i < CELLS_PER_STRIP; i++) {
+        this.renderer.destroyCell(cells[i]);
+      }
+    }
+    this.container.destroy({ children: true });
+  }
+};
+var DigitColumn = class {
+  container;
+  strip;
+  mask;
+  digitWidth;
+  digitHeight;
+  currentIndex = 0;
+  positionTweenIndex = -1;
+  alphaTweenIndex = -1;
+  constructor(renderer, digitWidth, digitHeight) {
+    this.digitWidth = digitWidth;
+    this.digitHeight = digitHeight;
+    this.container = new Container();
+    this.strip = new Strip(renderer, digitHeight);
+    this.container.addChild(this.strip.container);
+    this.mask = new Graphics();
+    this.mask.rect(0, 0, digitWidth, digitHeight).fill({ color: 16777215 });
+    this.container.addChild(this.mask);
+    this.strip.container.mask = this.mask;
+    this.setDigit(0);
+  }
+  setDigit(digit) {
+    const idx = (digit % 10 + 10) % 10;
+    this.currentIndex = idx;
+    this.strip.setY(this.strip.yForIndex(idx));
+    this.strip.clearFillers();
+  }
+  get currentDigit() {
+    return this.currentIndex % 10;
+  }
+  paintFillers(fromIdx, toIdx) {
+    this.strip.paintFillers(fromIdx, toIdx);
+  }
+  getStripY() {
+    return this.strip.container.y;
+  }
+  setStripY(y) {
+    this.strip.setY(y);
+  }
+  commitIndex(index) {
+    this.currentIndex = (index % 10 + 10) % 10;
+    this.strip.setY(this.strip.yForIndex(this.currentIndex));
+    this.strip.clearFillers();
+  }
+  destroy() {
+    this.mask.destroy();
+    this.strip.destroy();
+    this.container.destroy({ children: true });
+  }
+};
+function getSeparatorAfter(digits, every, decimals = 0) {
+  if (!every || every < 1 || digits < 2) return [];
+  const out = [];
+  for (let i = 0; i < digits - 1; i++) {
+    const placeFromRight = digits - 1 - i;
+    const integerPlace = placeFromRight - decimals;
+    if (integerPlace > 0 && integerPlace % every === 0) out.push(i);
+  }
+  return out;
+}
+function getDecimalSeparatorAfter(digits, decimals) {
+  if (decimals <= 0 || decimals >= digits) return -1;
+  return digits - decimals - 1;
+}
+function placeColumns(digits, digitWidth, separatorAfterColumns, separatorWidth) {
+  const columnX = new Array(digits);
+  const separatorX = [];
+  let x = 0;
+  let sepIdx = 0;
+  for (let i = 0; i < digits; i++) {
+    columnX[i] = x;
+    x += digitWidth;
+    if (sepIdx < separatorAfterColumns.length && separatorAfterColumns[sepIdx] === i) {
+      separatorX.push(x);
+      x += separatorWidth;
+      sepIdx++;
+    }
+  }
+  return { columnX, separatorX, totalWidth: x };
+}
+function digitAtPlace(value, place) {
+  return Math.floor(Math.abs(value) / Math.pow(10, place)) % 10;
+}
+function leadingZeroCount(value, digits, decimals = 0) {
+  const integerDigits = digits - decimals;
+  if (integerDigits <= 0) return 0;
+  const integerValue = Math.floor(Math.abs(value) / Math.pow(10, decimals));
+  if (integerValue <= 0) return integerDigits - 1;
+  let count = 0;
+  for (let i = integerDigits - 1; i > 0; i--) {
+    if (Math.floor(integerValue / Math.pow(10, i)) % 10 === 0) count++;
+    else break;
+  }
+  return count;
+}
+function computeSteps(oldDigit, newDigit, direction) {
+  return direction === "down" ? (oldDigit - newDigit + 10) % 10 || 10 : (newDigit - oldDigit + 10) % 10 || 10;
+}
+function computeDuration(distance, placeFromRight, motion) {
+  const raw = motion.msPerStep * distance + motion.placeDurationBump * placeFromRight;
+  if (raw < motion.minMs) return motion.minMs;
+  if (raw > motion.maxMs) return motion.maxMs;
+  return raw;
+}
+function resolveTargetIndex(fromIdx, newDigit, direction) {
+  if (direction === "up") {
+    let norm2 = fromIdx;
+    while (norm2 >= 10) norm2 -= 10;
+    while (norm2 < 0) norm2 += 10;
+    const toIdx2 = newDigit > norm2 ? newDigit : newDigit + 10;
+    return { normalizedFromIdx: norm2, toIdx: toIdx2 };
+  }
+  let norm = fromIdx;
+  while (norm < 10) norm += 10;
+  while (norm >= 20) norm -= 10;
+  const toIdx = newDigit + 10 < norm ? newDigit + 10 : newDigit;
+  return { normalizedFromIdx: norm, toIdx };
+}
+function resolveDirection(hint, oldValue, newValue) {
+  if (hint === "up") return "up";
+  if (hint === "down") return "down";
+  return newValue >= oldValue ? "up" : "down";
+}
+function createInactiveTween() {
+  return {
+    active: false,
+    startTime: 0,
+    delay: 0,
+    duration: 0,
+    startValue: 0,
+    targetValue: 0,
+    currentValue: 0,
+    ease: (t) => t,
+    rollId: 0
+  };
+}
+var NOOP_COMPLETE = () => void 0;
+var Scheduler = class {
+  ticker;
+  tweens;
+  onApply;
+  onTweenComplete;
+  activeCount = 0;
+  attached = false;
+  constructor(ticker, tweenCount, onApply, onTweenComplete = NOOP_COMPLETE) {
+    this.ticker = ticker;
+    this.onApply = onApply;
+    this.onTweenComplete = onTweenComplete;
+    this.tweens = new Array(tweenCount);
+    for (let i = 0; i < tweenCount; i++) this.tweens[i] = createInactiveTween();
+  }
+  get(index) {
+    return this.tweens[index];
+  }
+  get tweenCount() {
+    return this.tweens.length;
+  }
+  get activeTweenCount() {
+    return this.activeCount;
+  }
+  get hasActive() {
+    return this.activeCount > 0;
+  }
+  start(index, now = performance.now()) {
+    const t = this.tweens[index];
+    if (!t.active) {
+      t.active = true;
+      this.activeCount++;
+    }
+    t.startTime = now;
+    if (!this.attached) {
+      this.ticker.add(this.tick);
+      this.attached = true;
+    }
+  }
+  stop(index) {
+    const t = this.tweens[index];
+    if (!t.active) return;
+    t.active = false;
+    this.activeCount--;
+    if (this.activeCount === 0) this.detach();
+  }
+  finish(index) {
+    const t = this.tweens[index];
+    if (!t.active) return;
+    const final = t.startValue + (t.targetValue - t.startValue) * t.ease(1);
+    t.currentValue = final;
+    t.active = false;
+    this.activeCount--;
+    this.onApply(index, final);
+    this.onTweenComplete(index);
+    if (this.activeCount === 0) this.detach();
+  }
+  finishAll() {
+    const tweens = this.tweens;
+    for (let i = 0, n = tweens.length; i < n; i++) {
+      if (tweens[i].active) this.finish(i);
+    }
+  }
+  destroy() {
+    this.detach();
+    this.activeCount = 0;
+  }
+  step(now = performance.now()) {
+    this.tickImpl(now);
+  }
+  detach() {
+    if (this.attached) {
+      this.ticker.remove(this.tick);
+      this.attached = false;
+    }
+  }
+  tick = () => {
+    if (this.activeCount === 0) {
+      this.detach();
+      return;
+    }
+    this.tickImpl(performance.now());
+  };
+  tickImpl(now) {
+    const tweens = this.tweens;
+    for (let i = 0, n = tweens.length; i < n; i++) {
+      const t = tweens[i];
+      if (!t.active) continue;
+      const elapsed = now - t.startTime - t.delay;
+      if (elapsed < 0) {
+        t.currentValue = t.startValue;
+        this.onApply(i, t.currentValue);
+        continue;
+      }
+      if (elapsed >= t.duration) {
+        const final = t.startValue + (t.targetValue - t.startValue) * t.ease(1);
+        t.currentValue = final;
+        t.active = false;
+        this.activeCount--;
+        this.onApply(i, final);
+        this.onTweenComplete(i);
+      } else {
+        const p = t.ease(elapsed / t.duration);
+        t.currentValue = t.startValue + (t.targetValue - t.startValue) * p;
+        this.onApply(i, t.currentValue);
+      }
+    }
+  }
+};
+var ease_exports = {};
+__export(ease_exports, {
+  cubicOut: () => cubicOut,
+  defaultEase: () => defaultEase,
+  expoOut: () => expoOut,
+  linear: () => linear,
+  quadOut: () => quadOut,
+  quartOut: () => quartOut,
+  quintOut: () => quintOut,
+  sineInOut: () => sineInOut,
+  slotRoll: () => slotRoll
+});
+var linear = (t) => t;
+var quadOut = (t) => 1 - (1 - t) * (1 - t);
+var cubicOut = (t) => 1 - Math.pow(1 - t, 3);
+var quartOut = (t) => 1 - Math.pow(1 - t, 4);
+var quintOut = (t) => 1 - Math.pow(1 - t, 5);
+var expoOut = (t) => t >= 1 ? 1 : 1 - Math.pow(2, -10 * t);
+var sineInOut = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
+var slotRoll = (t) => 1 - Math.pow(1 - t, 4.5);
+var defaultEase = slotRoll;
+var DEFAULTS = {
+  motion: {
+    msPerStep: 35,
+    staggerMs: 28,
+    placeDurationBump: 25,
+    minMs: 280,
+    maxMs: 620
+  },
+  leadingZeros: {
+    mode: "show",
+    alpha: 0.35,
+    tweenMs: 150
+  },
+  blur: {
+    enabled: false,
+    peak: 8
+  },
+  separatorEvery: 3
+};
+var pulseSin = (t) => Math.sin(Math.PI * t);
+var Counter = class extends Container {
+  digits;
+  digitWidth;
+  digitHeight;
+  cellRenderer;
+  motion;
+  leadingZeros;
+  blurOpt;
+  tickerRef;
+  columns;
+  separators;
+  sepAfterCol;
+  sepAlwaysVisible;
+  digitRow;
+  blurFilter;
+  maxValue;
+  decimals;
+  columnXLocal;
+  fullWidth;
+  fitOpt;
+  ALPHA_BASE;
+  BLUR_INDEX;
+  value;
+  scheduler;
+  prefixContainer = null;
+  suffixContainer = null;
+  currentRollId = 0;
+  activeRollCount = 0;
+  pendingResolve = null;
+  pendingOnComplete = null;
+  _rollStartPayload = { from: 0, to: 0, direction: "up" };
+  _rollEndPayload = { value: 0 };
+  _digitSettlePayload = { column: 0, digit: 0 };
+  constructor(options) {
+    super();
+    if (options.digits < 1) throw new Error("Counter: digits must be >= 1");
+    this.digits = options.digits;
+    this.digitWidth = options.digitWidth;
+    this.digitHeight = options.digitHeight;
+    this.cellRenderer = options.cellRenderer;
+    this.tickerRef = options.ticker ?? Ticker.shared;
+    this.decimals = options.decimals ?? 0;
+    if (this.decimals < 0) throw new Error("Counter: decimals must be >= 0");
+    if (this.decimals >= this.digits) {
+      throw new Error("Counter: decimals must be less than digits");
+    }
+    this.maxValue = Math.pow(10, this.digits) - 1;
+    this.value = this.clampValue(options.initialValue ?? 0);
+    this.motion = {
+      msPerStep: options.motion?.msPerStep ?? DEFAULTS.motion.msPerStep,
+      staggerMs: options.motion?.staggerMs ?? DEFAULTS.motion.staggerMs,
+      placeDurationBump: options.motion?.placeDurationBump ?? DEFAULTS.motion.placeDurationBump,
+      minMs: options.motion?.minMs ?? DEFAULTS.motion.minMs,
+      maxMs: options.motion?.maxMs ?? DEFAULTS.motion.maxMs,
+      ease: options.motion?.ease ?? defaultEase
+    };
+    this.leadingZeros = {
+      mode: options.leadingZeros?.mode ?? DEFAULTS.leadingZeros.mode,
+      alpha: options.leadingZeros?.alpha ?? DEFAULTS.leadingZeros.alpha,
+      tweenMs: options.leadingZeros?.tweenMs ?? DEFAULTS.leadingZeros.tweenMs
+    };
+    this.blurOpt = {
+      enabled: options.blur?.enabled ?? DEFAULTS.blur.enabled,
+      peak: options.blur?.peak ?? DEFAULTS.blur.peak
+    };
+    this.ALPHA_BASE = this.digits;
+    this.BLUR_INDEX = 2 * this.digits;
+    if (options.prefix) {
+      this.prefixContainer = this.coerceContainer(options.prefix);
+      this.addChild(this.prefixContainer);
+    }
+    this.digitRow = new Container();
+    this.addChild(this.digitRow);
+    this.columns = new Array(this.digits);
+    for (let i = 0; i < this.digits; i++) {
+      const col = new DigitColumn(this.cellRenderer, this.digitWidth, this.digitHeight);
+      col.positionTweenIndex = i;
+      col.alphaTweenIndex = this.ALPHA_BASE + i;
+      this.columns[i] = col;
+      this.digitRow.addChild(col.container);
+    }
+    const sepChar = options.separator?.char;
+    const sepEvery = options.separator?.every ?? DEFAULTS.separatorEvery;
+    const decimalChar = options.decimalChar ?? ".";
+    const thousandsCols = sepChar ? getSeparatorAfter(this.digits, sepEvery, this.decimals) : [];
+    const decimalCol = getDecimalSeparatorAfter(this.digits, this.decimals);
+    const sepCols = [];
+    const sepChars = [];
+    const sepAlwaysVisible = [];
+    let ti = 0;
+    for (let col = 0; col < this.digits - 1; col++) {
+      if (ti < thousandsCols.length && thousandsCols[ti] === col) {
+        sepCols.push(col);
+        sepChars.push(sepChar);
+        sepAlwaysVisible.push(false);
+        ti++;
+      }
+      if (col === decimalCol) {
+        sepCols.push(col);
+        sepChars.push(decimalChar);
+        sepAlwaysVisible.push(true);
+      }
+    }
+    this.separators = new Array(sepCols.length);
+    this.sepAfterCol = new Array(this.digits).fill(-1);
+    this.sepAlwaysVisible = sepAlwaysVisible;
+    let sepWidth = 0;
+    if (sepCols.length > 0 && this.cellRenderer.createSeparator) {
+      for (let i = 0; i < sepCols.length; i++) {
+        const sep = this.cellRenderer.createSeparator(sepChars[i]);
+        this.separators[i] = sep;
+        this.digitRow.addChild(sep);
+        this.sepAfterCol[sepCols[i]] = i;
+        if (sep.width > sepWidth) sepWidth = sep.width;
+      }
+    }
+    const layout = placeColumns(this.digits, this.digitWidth, sepCols, sepWidth);
+    this.columnXLocal = layout.columnX.slice();
+    for (let i = 0; i < this.digits; i++) {
+      this.columns[i].container.x = layout.columnX[i];
+    }
+    for (let i = 0; i < this.separators.length; i++) {
+      this.separators[i].x = layout.separatorX[i];
+    }
+    if (this.prefixContainer) {
+      const prefixWidth = this.prefixContainer.width;
+      this.digitRow.x = prefixWidth;
+    }
+    let suffixWidth = 0;
+    if (options.suffix) {
+      this.suffixContainer = this.coerceContainer(options.suffix);
+      this.suffixContainer.x = this.digitRow.x + layout.totalWidth;
+      this.addChild(this.suffixContainer);
+      suffixWidth = this.suffixContainer.width;
+    }
+    this.fullWidth = this.digitRow.x + layout.totalWidth + suffixWidth;
+    if (options.fit) {
+      this.fitOpt = {
+        maxWidth: options.fit.maxWidth,
+        minScale: options.fit.minScale ?? 0.4,
+        duration: options.fit.duration ?? 0.3,
+        ease: options.fit.ease ?? "power2.out",
+        anchor: options.fit.anchor ?? "left",
+        gsap: options.fit.gsap
+      };
+      this.pivot.x = this.fitOpt.anchor === "right" ? this.fullWidth : this.fitOpt.anchor === "center" ? this.fullWidth / 2 : 0;
+      const initialScale = this.computeFitScale(this.value);
+      this.scale.set(initialScale);
+    } else {
+      this.fitOpt = null;
+    }
+    if (this.blurOpt.enabled) {
+      this.blurFilter = new BlurFilter({ strength: 0, quality: 2 });
+      this.blurFilter.strengthX = 0;
+      this.digitRow.filters = [this.blurFilter];
+    } else {
+      this.blurFilter = null;
+    }
+    this.scheduler = new Scheduler(
+      this.tickerRef,
+      2 * this.digits + 1,
+      this.onApply,
+      this.onTweenComplete
+    );
+    this.applyValueInstant(this.value);
+  }
+  getValue() {
+    return this.value;
+  }
+  isAnimating() {
+    return this.scheduler.hasActive;
+  }
+  setValue(value, opts = {}) {
+    const target = this.clampValue(value);
+    const oldValue = this.value;
+    if (opts.instant) {
+      this.resolvePending();
+      this.scheduler.finishAll();
+      this.value = target;
+      this.applyValueInstant(target);
+      this.applyFit(target, false);
+      opts.onComplete?.();
+      return Promise.resolve();
+    }
+    if (target === oldValue && !this.scheduler.hasActive) {
+      opts.onComplete?.();
+      return Promise.resolve();
+    }
+    this.applyFit(target, true);
+    this.resolvePending();
+    this.value = target;
+    const direction = resolveDirection(opts.direction, oldValue, target);
+    const now = performance.now();
+    const rollId = ++this.currentRollId;
+    this.activeRollCount = 0;
+    this.finishStaleTweens(target, rollId);
+    const changingCount = this.startColumnTweens(oldValue, target, direction, opts.duration, now, rollId);
+    if (changingCount === 0) {
+      this.startBlurTween(0, now, rollId);
+      this.startLeadingZeroTweens(target, now, rollId);
+      opts.onComplete?.();
+      return Promise.resolve();
+    }
+    this.activeRollCount = changingCount;
+    let longestEnd = 0;
+    for (let col = 0; col < this.digits; col++) {
+      const t = this.scheduler.get(col);
+      if (t.active && t.rollId === rollId) {
+        const end = t.delay + t.duration;
+        if (end > longestEnd) longestEnd = end;
+      }
+    }
+    this.startBlurTween(longestEnd, now, rollId);
+    this.startLeadingZeroTweens(target, now, rollId);
+    this._rollStartPayload.from = oldValue;
+    this._rollStartPayload.to = target;
+    this._rollStartPayload.direction = direction;
+    this.emit("rollstart", this._rollStartPayload);
+    return new Promise((resolve) => {
+      this.pendingResolve = resolve;
+      this.pendingOnComplete = opts.onComplete ?? null;
+    });
+  }
+  /**
+   * Skip the in-flight animation straight to its current target value.
+   *
+   * - Every active position tween jumps to its target Y (the column shows the
+   *   target digit, sharp).
+   * - Leading-zero alpha tweens jump to their target alpha (dim / hidden / full).
+   * - The blur tween snaps to 0 (no residual blur).
+   * - `digitsettle` fires for each settling column, then `rollend` fires once.
+   * - The pending `setValue` Promise resolves.
+   *
+   * Use it to fast-forward when the player has impatiently queued another input:
+   *
+   * ```ts
+   * function onBetClick() {
+   *   counter.cancel();            // snap any in-flight roll to its end
+   *   counter.setValue(balance);   // start a fresh roll from there
+   * }
+   * ```
+   *
+   * If no roll is in flight, this is a cheap no-op. Safe to call on every input.
+   */
+  cancel() {
+    this.scheduler.finishAll();
+    this.resolvePending();
+  }
+  destroy(options) {
+    this.scheduler.destroy();
+    this.resolvePending();
+    if (this.fitOpt) this.fitOpt.gsap.killTweensOf(this.scale);
+    for (let i = 0; i < this.columns.length; i++) this.columns[i].destroy();
+    if (this.blurFilter) this.blurFilter.destroy();
+    super.destroy(options);
+  }
+  computeFitScale(value) {
+    if (!this.fitOpt) return 1;
+    const visibleWidth = this.computeVisibleWidth(value);
+    if (visibleWidth <= 0) return 1;
+    const raw = this.fitOpt.maxWidth / visibleWidth;
+    if (raw >= 1) return 1;
+    return Math.max(this.fitOpt.minScale, raw);
+  }
+  computeVisibleWidth(value) {
+    if (this.leadingZeros.mode !== "hide") return this.fullWidth;
+    const dimCount = leadingZeroCount(value, this.digits, this.decimals);
+    if (dimCount >= this.digits) return 0;
+    const leftEdge = this.columnXLocal[dimCount] + this.digitRow.x;
+    return this.fullWidth - leftEdge;
+  }
+  applyFit(value, animated) {
+    if (!this.fitOpt) return;
+    const target = this.computeFitScale(value);
+    const gsap = this.fitOpt.gsap;
+    gsap.killTweensOf(this.scale);
+    if (!animated || this.scale.x === target && this.scale.y === target) {
+      this.scale.set(target);
+      return;
+    }
+    gsap.to(this.scale, {
+      x: target,
+      y: target,
+      duration: this.fitOpt.duration,
+      ease: this.fitOpt.ease
+    });
+  }
+  clampValue(value) {
+    const i = Math.floor(value);
+    if (i < 0) return 0;
+    if (i > this.maxValue) return this.maxValue;
+    return i;
+  }
+  coerceContainer(value) {
+    if (typeof value !== "string") return value;
+    if (this.cellRenderer.createSeparator) return this.cellRenderer.createSeparator(value);
+    return new Container();
+  }
+  applyValueInstant(value) {
+    for (let col = 0; col < this.digits; col++) {
+      const placeFromRight = this.digits - 1 - col;
+      const digit = digitAtPlace(value, placeFromRight);
+      this.columns[col].setDigit(digit);
+    }
+    this.applyLeadingZerosInstant(value);
+  }
+  applyLeadingZerosInstant(value) {
+    const dimCount = this.leadingZeros.mode === "show" ? 0 : leadingZeroCount(value, this.digits, this.decimals);
+    const dimAlpha = this.leadingZeros.mode === "hide" ? 0 : this.leadingZeros.alpha;
+    for (let col = 0; col < this.digits; col++) {
+      const wantAlpha = col < dimCount ? dimAlpha : 1;
+      this.columns[col].container.alpha = wantAlpha;
+      const sepIdx = this.sepAfterCol[col];
+      if (sepIdx >= 0 && !this.sepAlwaysVisible[sepIdx]) {
+        this.separators[sepIdx].alpha = wantAlpha;
+      }
+    }
+  }
+  finishStaleTweens(target, _rollId) {
+    for (let col = 0; col < this.digits; col++) {
+      const t = this.scheduler.get(col);
+      if (!t.active) continue;
+      const placeFromRight = this.digits - 1 - col;
+      const newDigit = digitAtPlace(target, placeFromRight);
+      const targetIdx = Math.round(-t.targetValue / this.digitHeight);
+      const targetDigit = (targetIdx % 10 + 10) % 10;
+      if (newDigit === targetDigit) {
+        this.scheduler.finish(col);
+      }
+    }
+  }
+  startColumnTweens(oldValue, target, direction, durationOverride, now, rollId) {
+    let changingCount = 0;
+    for (let col = 0; col < this.digits; col++) {
+      const placeFromRight = this.digits - 1 - col;
+      const oldDigit = digitAtPlace(oldValue, placeFromRight);
+      const newDigit = digitAtPlace(target, placeFromRight);
+      if (oldDigit === newDigit) continue;
+      const column = this.columns[col];
+      const rawFromIdx = -column.getStripY() / this.digitHeight;
+      const { normalizedFromIdx, toIdx } = resolveTargetIndex(rawFromIdx, newDigit, direction);
+      const distance = Math.abs(toIdx - normalizedFromIdx);
+      const integerSteps = computeSteps(oldDigit, newDigit, direction);
+      const distanceForDuration = distance > 0 ? distance : integerSteps;
+      const duration = durationOverride ?? computeDuration(distanceForDuration, placeFromRight, this.motion);
+      const delay = changingCount * this.motion.staggerMs;
+      const fromY = -normalizedFromIdx * this.digitHeight;
+      const targetY = -toIdx * this.digitHeight;
+      column.setStripY(fromY);
+      column.paintFillers(Math.floor(normalizedFromIdx), toIdx);
+      const t = this.scheduler.get(col);
+      t.startValue = fromY;
+      t.targetValue = targetY;
+      t.duration = duration;
+      t.delay = delay;
+      t.ease = this.motion.ease;
+      t.rollId = rollId;
+      this.scheduler.start(col, now);
+      changingCount++;
+    }
+    return changingCount;
+  }
+  startBlurTween(longestEnd, now, rollId) {
+    if (!this.blurFilter) return;
+    const t = this.scheduler.get(this.BLUR_INDEX);
+    if (longestEnd <= 0) {
+      this.blurFilter.strengthY = 0;
+      if (t.active) this.scheduler.finish(this.BLUR_INDEX);
+      return;
+    }
+    t.startValue = 0;
+    t.targetValue = 1;
+    t.duration = longestEnd;
+    t.delay = 0;
+    t.ease = pulseSin;
+    t.rollId = rollId;
+    this.scheduler.start(this.BLUR_INDEX, now);
+  }
+  startLeadingZeroTweens(target, now, rollId) {
+    if (this.leadingZeros.mode === "show") return;
+    const dimCount = leadingZeroCount(target, this.digits, this.decimals);
+    const dimAlpha = this.leadingZeros.mode === "hide" ? 0 : this.leadingZeros.alpha;
+    for (let col = 0; col < this.digits; col++) {
+      const wantAlpha = col < dimCount ? dimAlpha : 1;
+      const column = this.columns[col];
+      const currentAlpha = column.container.alpha;
+      if (Math.abs(currentAlpha - wantAlpha) < 1e-3) continue;
+      const t = this.scheduler.get(this.ALPHA_BASE + col);
+      t.startValue = currentAlpha;
+      t.targetValue = wantAlpha;
+      t.duration = this.leadingZeros.tweenMs;
+      t.delay = 0;
+      t.ease = linear;
+      t.rollId = rollId;
+      this.scheduler.start(this.ALPHA_BASE + col, now);
+    }
+  }
+  onApply = (idx, value) => {
+    if (idx < this.digits) {
+      this.columns[idx].setStripY(value);
+      return;
+    }
+    if (idx < this.BLUR_INDEX) {
+      const colIdx = idx - this.digits;
+      this.columns[colIdx].container.alpha = value;
+      const sepIdx = this.sepAfterCol[colIdx];
+      if (sepIdx >= 0 && !this.sepAlwaysVisible[sepIdx]) {
+        this.separators[sepIdx].alpha = value;
+      }
+      return;
+    }
+    if (this.blurFilter) this.blurFilter.strengthY = value * this.blurOpt.peak;
+  };
+  onTweenComplete = (idx) => {
+    if (idx >= this.digits) return;
+    const t = this.scheduler.get(idx);
+    const finalIdx = Math.round(-t.targetValue / this.digitHeight);
+    const column = this.columns[idx];
+    column.commitIndex(finalIdx);
+    this._digitSettlePayload.column = idx;
+    this._digitSettlePayload.digit = column.currentDigit;
+    this.emit("digitsettle", this._digitSettlePayload);
+    if (t.rollId !== this.currentRollId) return;
+    if (this.activeRollCount === 0) return;
+    this.activeRollCount--;
+    if (this.activeRollCount === 0) {
+      this._rollEndPayload.value = this.value;
+      this.emit("rollend", this._rollEndPayload);
+      this.resolvePending();
+    }
+  };
+  resolvePending() {
+    const resolve = this.pendingResolve;
+    const onComplete = this.pendingOnComplete;
+    this.pendingResolve = null;
+    this.pendingOnComplete = null;
+    if (resolve) resolve();
+    if (onComplete) onComplete();
+  }
+};
+
+// src/renderers/TextCellRenderer.ts
+var TextCellRenderer = class {
+  constructor(o) {
+    this.o = o;
+  }
+  o;
+  createCell(digit) {
+    const cell = new Container();
+    const t = new Text({ text: String(digit), style: this.o.style });
+    t.anchor.set(0.5, 0.5);
+    t.x = this.o.digitWidth / 2;
+    t.y = this.o.digitHeight / 2;
+    cell.addChild(t);
+    return cell;
+  }
+  setDigit(cell, digit) {
+    const t = cell.children[0];
+    const next = String(digit);
+    if (t.text !== next) t.text = next;
+  }
+  setFiller(cell, digit) {
+    const t = cell.children[0];
+    const next = this.o.fillerChar ?? String(digit);
+    if (t.text !== next) t.text = next;
+  }
+  createSeparator(char) {
+    const cell = new Container();
+    const t = new Text({ text: char, style: this.o.style });
+    t.anchor.set(0.5, 0.5);
+    cell.addChild(t);
+    t.y = this.o.digitHeight / 2;
+    t.x = t.width / 2;
+    return cell;
+  }
+  destroyCell(cell) {
+    cell.destroy({ children: true });
+  }
+};
+var DIGIT_W = 39;
+var DIGIT_H = 68;
+var FONT_SIZE = 48;
+var FIT_BUDGET_COLS = 9;
+var ValueDisplayView = class extends ControlView {
+  constructor(vd, ui, ticker, fitGsap) {
+    super(vd, ui);
+    this.vd = vd;
+    this.ticker = ticker;
+    this.fitGsap = fitGsap;
+    this.build();
+    this.disposers.push(
+      this.vd.value.subscribe(() => {
+        if (this.destroyed) return;
+        const cur = this.vd.currency.get();
+        const needed = displayDigits(this.vd.get(), this.vd.digits, cur.decimals);
+        if (this.counter && needed !== this.counter.digits) {
+          const from = needed > this.counter.digits ? this.counter.getValue() : this.vd.minorUnits;
+          this.buildCounter(needed, from);
+        }
+        void this.counter?.setValue(this.vd.minorUnits);
+      }),
+      this.vd.currency.subscribe(() => {
+        if (!this.destroyed) this.rebuild();
+      }),
+      // re-translate the caption on language switch (guard a post-dispose emit)
+      this.ui.locale.subscribe(() => {
+        if (!this.destroyed) this.rebuild();
+      }),
+      // accent emphasis (e.g. a bet display showing the boosted effective stake):
+      // rebuild the odometer with the accent fill at the same width
+      this.vd.emphasized.subscribe(() => {
+        if (!this.destroyed && this.counter) this.buildCounter(this.counter.digits, this.vd.minorUnits);
+      })
+    );
+  }
+  vd;
+  ticker;
+  fitGsap;
+  counter;
+  caption;
+  captionPill;
+  side() {
+    const a = this.vd.layout.anchor;
+    return a.includes("left") ? "left" : a.includes("right") ? "right" : "center";
+  }
+  build() {
+    const theme = this.ui.theme;
+    if (this.vd.label) {
+      this.caption = new Text({
+        // Figma: the label is NOT uppercased — "Баланс" / "Ставка" as authored.
+        text: this.ui.t(this.vd.label),
+        style: { fontFamily: theme.type.family, fontSize: 28, fill: 16777215, fontWeight: "900", letterSpacing: 0 }
+      });
+      this.caption.anchor.set(0.5, 0.5);
+      this.captionPill = new Graphics();
+      this.addChild(this.captionPill, this.caption);
+      this.sizeCaptionPill();
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        void document.fonts.ready.then(() => {
+          if (!this.destroyed && this.caption) this.sizeCaptionPill();
+        });
+      }
+    }
+    const cur = this.vd.currency.get();
+    this.buildCounter(displayDigits(this.vd.get(), this.vd.digits, cur.decimals), this.vd.minorUnits);
+  }
+  /** Size the caption pill to the caption's current measured width + padding and centre
+   *  the text in it, anchored to the value's side. Re-runnable (fonts-ready / relayout). */
+  sizeCaptionPill() {
+    if (!this.caption || !this.captionPill) return;
+    const side = this.side();
+    const padX = 24;
+    const padY = 8;
+    const pillW = Math.ceil(this.caption.width) + padX * 2;
+    const pillH = Math.ceil(this.caption.height) + padY * 2;
+    const pillX = side === "left" ? 0 : side === "right" ? -pillW : -pillW / 2;
+    const pillY = -DIGIT_H / 2 - pillH - 14;
+    this.captionPill.clear().roundRect(pillX, pillY, pillW, pillH, 12).fill({ color: 0 });
+    this.caption.position.set(pillX + pillW / 2, pillY + pillH / 2);
+  }
+  /** (Re)create the rolling counter sized to `total` columns, starting at `fromMinor`. */
+  buildCounter(total, fromMinor) {
+    this.counter?.destroy();
+    const theme = this.ui.theme;
+    const cur = this.vd.currency.get();
+    const side = this.side();
+    const renderer = new TextCellRenderer({
+      // Figma "default" readout: Montserrat Black, white, with a bold BLACK OUTLINE
+      // plus a soft drop shadow (0px 4px, 25% black) under it.
+      style: {
+        fontFamily: theme.type.family,
+        fontSize: FONT_SIZE,
+        // Emphasis (ValueDisplay.setEmphasis) renders the value in the theme
+        // accent — "this number is modified" (boosted effective stake, etc.).
+        fill: this.vd.emphasized.get() ? theme.color.accent : 16777215,
+        fontWeight: "900",
+        stroke: { color: 0, width: 8, join: "round" },
+        dropShadow: { color: 0, alpha: 0.25, blur: 2, distance: 4, angle: Math.PI / 2 }
+      },
+      digitWidth: DIGIT_W,
+      digitHeight: DIGIT_H
+      // no fillerChar → rolling cells show real digits (crisp, no blur, no blank flicker)
+    });
+    const opts = {
+      digits: total,
+      decimals: cur.decimals,
+      decimalChar: cur.decimalChar ?? ".",
+      separator: { char: cur.separator ?? ",", every: 3 },
+      cellRenderer: renderer,
+      digitWidth: DIGIT_W,
+      digitHeight: DIGIT_H,
+      initialValue: fromMinor,
+      // Tight sizing means the value fills its columns — leading-zero hide only ever
+      // trims a digit or two after a grow, never a permanent reserve gap.
+      leadingZeros: { mode: "hide" },
+      blur: { enabled: false },
+      ticker: this.ticker
+    };
+    const symbolMode = cur.display === "symbol" && !!cur.symbol;
+    const affix = symbolMode ? cur.symbol : cur.code;
+    if ((cur.position ?? "suffix") === "prefix") opts.prefix = symbolMode ? affix : `${affix} `;
+    else opts.suffix = ` ${affix}`;
+    if (this.fitGsap) {
+      opts.fit = {
+        gsap: this.fitGsap,
+        maxWidth: valueFitMaxWidth(Math.max(this.vd.digits, FIT_BUDGET_COLS), DIGIT_W),
+        minScale: 0.5,
+        anchor: side
+        // left→0 · right→fullWidth · center→fullWidth/2
+      };
+    }
+    this.counter = new Counter(opts);
+    this.counter.y = -DIGIT_H / 2;
+    if (this.fitGsap) {
+      this.counter.x = 0;
+    } else {
+      const budget = valueFitMaxWidth(Math.max(this.vd.digits, FIT_BUDGET_COLS), DIGIT_W);
+      const natural = this.counter.width;
+      const k = natural > budget ? Math.max(0.5, budget / natural) : 1;
+      this.counter.scale.set(k);
+      this.counter.y = -DIGIT_H * k / 2;
+      const w = natural * k;
+      this.counter.x = side === "left" ? 0 : side === "right" ? -w : -w / 2;
+    }
+    this.addChild(this.counter);
+  }
+  rebuild() {
+    this.counter?.destroy();
+    this.caption?.destroy();
+    this.captionPill?.destroy();
+    this.counter = void 0;
+    this.caption = void 0;
+    this.captionPill = void 0;
+    this.removeChildren();
+    this.build();
+  }
+  dispose() {
+    this.counter?.destroy();
+    super.dispose();
+  }
+};
+var GLYPH_SVG = {
+  speaker: '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M13.6745 5.01252C13.9316 4.84399 14.2647 4.8292 14.5397 4.97456C14.8146 5.1199 14.9868 5.40142 14.9872 5.706L15.0007 16.8107C15.0011 17.1153 14.8296 17.3934 14.555 17.5333C14.2804 17.6731 13.9472 17.6517 13.6897 17.4781L10.4454 15.2905L8.61605 15.2722C6.76074 15.2537 5.25495 13.7655 5.25266 11.9484L5.25073 10.3739C5.2486 8.55679 6.75081 7.09863 8.6061 7.11714L10.4355 7.13539L13.6745 5.01252Z" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"/><path d="M16.1933 9.375C16.6252 10.4652 16.6015 11.654 16.1257 12.75" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/></svg>',
+  "speaker-mute": '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M13.6745 5.01252C13.9316 4.84399 14.2647 4.8292 14.5397 4.97456C14.8146 5.1199 14.9868 5.40142 14.9872 5.706L15.0007 16.8107C15.0011 17.1153 14.8296 17.3934 14.555 17.5333C14.2804 17.6731 13.9472 17.6517 13.6897 17.4781L10.4454 15.2905L8.61605 15.2722C6.76074 15.2537 5.25495 13.7655 5.25266 11.9484L5.25073 10.3739C5.2486 8.55679 6.75081 7.09863 8.6061 7.11714L10.4355 7.13539L13.6745 5.01252Z" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"/><path d="M15.5 8.5L19.5 13.5M19.5 8.5L15.5 13.5" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>',
+  fullscreen: '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M7.875 18H7.5C5.84315 18 4.5 16.6569 4.5 15V14.25M7.875 4.5H7.5C5.84315 4.5 4.5 5.84315 4.5 7.5V8.25M14.25 4.5H15C16.6569 4.5 18 5.84315 18 7.5V8.25M14.25 18H15C16.6569 18 18 16.6569 18 15V14.25" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  "fullscreen-exit": '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 8.25H5.25C6.9 8.25 8.25 6.9 8.25 5.25V4.5M14.25 4.5V5.25C14.25 6.9 15.6 8.25 17.25 8.25H18M18 14.25H17.25C15.6 14.25 14.25 15.6 14.25 17.25V18M8.25 18V17.25C8.25 15.6 6.9 14.25 5.25 14.25H4.5" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+};
+var ButtonView = class extends ControlView {
+  constructor(btn, ui, ticker, opts = {}) {
+    super(btn, ui);
+    this.btn = btn;
+    this.tween = new Tweener(ticker);
+    this.shape = opts.shape ?? "circle";
+    this.radius = opts.radius ?? 40;
+    this.pillHeight = opts.height ?? 56;
+    this.glyph = opts.glyph ?? "none";
+    this.iconTarget = opts.iconTarget ?? 84;
+    this.mono = opts.mono ?? false;
+    this.dark = opts.dark ?? false;
+    this.addChild(this.art);
+    if (opts.iconTexture) {
+      this.sprite = new Sprite(opts.iconTexture);
+      this.sprite.anchor.set(0.5);
+      this.fitSprite();
+      this.art.addChild(this.sprite);
+    } else {
+      this.art.addChild(this.bg, this.glyphG);
+      if (btn.label) {
+        this.labelText = new Text({
+          text: ui.t(btn.label),
+          style: { fontFamily: ui.theme.type.family, fontSize: 22, fill: ui.theme.color.text, fontWeight: "700" }
+        });
+        this.labelText.anchor.set(0.5);
+        this.art.addChild(this.labelText);
+      }
+    }
+    this.eventMode = "static";
+    this.cursor = "pointer";
+    this.on("pointerdown", this.onDown);
+    this.on("pointerup", this.onUp);
+    this.on("pointerupoutside", this.onUpOutside);
+    this.disposers.push(
+      this.btn.state.subscribe(() => {
+        this.redraw();
+        this.updateInteractive();
+      }),
+      this.btn.onTransition((t) => this.play(t)),
+      // The host input lock gates `interactable` without a state change, so react to
+      // it directly: a locked/disabled button dims to a semi-transparent state.
+      this.ui.locked.subscribe(() => {
+        this.redraw();
+        this.updateInteractive();
+      }),
+      this.ui.locale.subscribe(() => {
+        if (this.destroyed) return;
+        if (this.labelText && this.btn.label) {
+          this.labelText.text = this.ui.t(this.btn.label);
+          this.updateHit();
+        }
+      })
+    );
+    this.redraw();
+    this.updateHit();
+    this.updateInteractive();
+  }
+  btn;
+  art = new Container();
+  bg = new Graphics();
+  glyphG = new Graphics();
+  sprite;
+  labelText;
+  tween;
+  shape;
+  radius;
+  pillHeight;
+  glyph;
+  iconTarget;
+  mono;
+  dark;
+  /** Swap the displayed art (e.g. ☰ → ✕). */
+  setIconTexture(tex) {
+    if (!this.sprite) return;
+    this.sprite.texture = tex;
+    this.fitSprite();
+    this.updateHit();
+  }
+  /** Swap the placeholder glyph (e.g. speaker ↔ speaker-mute, fullscreen ↔ exit). */
+  setGlyph(glyph) {
+    if (this.glyph === glyph) return;
+    this.glyph = glyph;
+    this.redraw();
+    this.updateHit();
+  }
+  fitSprite() {
+    if (!this.sprite) return;
+    this.sprite.scale.set(1);
+    this.sprite.scale.set(this.iconTarget / this.sprite.height);
+  }
+  onDown = () => {
+    if (this.btn.interactable) this.btn.setState("pressed");
+  };
+  onUp = () => {
+    if (this.btn.current === "pressed") {
+      this.btn.setState("idle");
+      this.btn.activate();
+    }
+  };
+  onUpOutside = () => {
+    if (this.btn.current === "pressed") this.btn.setState("idle");
+  };
+  updateHit() {
+    if (this.sprite) {
+      const w = this.sprite.width;
+      const h = this.sprite.height;
+      this.hitArea = new Rectangle(-w / 2, -h / 2, w, h);
+    } else if (this.shape === "circle") {
+      this.hitArea = new Circle(0, 0, this.radius + 6);
+    } else {
+      const w = this.labelText ? this.labelText.width + 48 : 120;
+      this.hitArea = new Rectangle(-w / 2, -this.pillHeight / 2, w, this.pillHeight);
+    }
+  }
+  updateInteractive() {
+    const ok = this.btn.interactable;
+    this.eventMode = ok ? "static" : "none";
+    this.cursor = ok ? "pointer" : "default";
+    this.alpha = ok ? 1 : 0.4;
+  }
+  redraw() {
+    if (this.sprite) {
+      this.sprite.alpha = this.btn.current === "disabled" ? 0.5 : 1;
+      return;
+    }
+    const t = this.ui.theme;
+    const g = this.bg;
+    g.clear();
+    const disabled = this.btn.current === "disabled";
+    const fillC = this.dark ? "#0a0a0a" : this.mono ? "#ffffff" : t.color.surface;
+    const lineC = this.mono ? "#0a0a0a" : t.color.accent;
+    const ink = this.dark ? "#ffffff" : this.mono ? disabled ? "#9aa0a6" : "#0a0a0a" : disabled ? t.color.textDim : t.color.text;
+    this.glyphG.clear();
+    this.glyphG.visible = false;
+    if (this.shape === "circle") {
+      const r = this.radius;
+      if (this.mono) {
+        g.circle(0, r * 0.16, r).fill({ color: 0, alpha: disabled ? 0.08 : 0.18 });
+        g.circle(0, 0, r * 0.98).fill({ color: "#ffffff", alpha: disabled ? 0.6 : 1 });
+        g.circle(0, 0, r * 0.925).stroke({ width: r * 0.15, color: "#0a0a0a", alpha: disabled ? 0.5 : 1 });
+      } else if (this.dark) {
+        g.circle(0, r * 0.16, r).fill({ color: 0, alpha: 0.18 });
+        g.circle(0, 0, r).fill({ color: "#0a0a0a" });
+      } else {
+        g.circle(0, 0, r).fill({ color: fillC }).circle(0, 0, r).stroke({ width: 4, color: lineC });
+      }
+      const svg = GLYPH_SVG[this.glyph];
+      if (svg) {
+        const s = r / 15;
+        this.glyphG.svg(svg);
+        this.glyphG.scale.set(s);
+        this.glyphG.position.set(-11.25 * s, -11.25 * s);
+        this.glyphG.alpha = disabled ? 0.5 : 1;
+        this.glyphG.visible = true;
+      } else if (this.glyph === "menu") {
+        const barW = this.dark ? 6 : 4;
+        const spread = this.dark ? 9 : 8;
+        for (const dy of [-spread, 0, spread]) g.moveTo(-14, dy).lineTo(14, dy).stroke({ width: barW, color: ink, cap: "round" });
+      } else if (this.glyph === "close") {
+        g.moveTo(-10, -10).lineTo(10, 10).moveTo(10, -10).lineTo(-10, 10).stroke({ width: 4, color: ink });
+      }
+    } else {
+      const w = this.labelText ? this.labelText.width + 48 : 120;
+      const h = this.pillHeight;
+      g.roundRect(-w / 2, -h / 2, w, h, h / 2).fill({ color: t.color.surfaceAlt }).stroke({ width: 3, color: t.color.accent });
+    }
+    if (this.labelText) this.labelText.style.fill = ink;
+  }
+  play(t) {
+    this.animating = true;
+    void this.tween.run(this.art, t, this.ui.theme).then(() => {
+      this.animating = false;
+    });
+  }
+  dispose() {
+    this.tween.stop();
+    super.dispose();
+  }
+};
+var TurboView = class extends ControlView {
+  constructor(turbo, ui, ticker, opts = {}) {
+    super(turbo, ui);
+    this.turbo = turbo;
+    this.tween = new Tweener(ticker);
+    this.modeTex = opts.modeTextures?.length ? opts.modeTextures : void 0;
+    this.offTex = opts.offTexture;
+    this.onTex = opts.onTexture;
+    this.target = opts.target ?? 84;
+    this.radius = opts.radius ?? 40;
+    const hasArt = this.modeTex || this.offTex || this.onTex;
+    if (hasArt) {
+      this.sprite = new Sprite(this.texFor());
+      this.sprite.anchor.set(0.5);
+      this.art.addChild(this.sprite);
+    } else {
+      this.art.addChild(this.bg);
+    }
+    this.addChild(this.art);
+    this.eventMode = "static";
+    this.cursor = "pointer";
+    this.hitArea = new Circle(0, 0, (this.sprite ? this.target / 2 : this.radius) + 8);
+    this.on("pointerup", this.onUp);
+    this.disposers.push(
+      this.turbo.state.subscribe(() => this.redraw()),
+      this.turbo.index.subscribe(() => this.redraw()),
+      this.turbo.onTransition((t) => this.play(t))
+    );
+    this.redraw();
+  }
+  turbo;
+  art = new Container();
+  bg = new Graphics();
+  sprite;
+  tween;
+  modeTex;
+  offTex;
+  onTex;
+  target;
+  radius;
+  onUp = () => {
+    this.turbo.cycle();
+  };
+  texFor() {
+    const i = this.turbo.index.get();
+    if (this.modeTex) return this.modeTex[Math.min(i, this.modeTex.length - 1)] ?? this.modeTex[0];
+    return i > 0 ? this.onTex ?? this.offTex : this.offTex ?? this.onTex;
+  }
+  fit() {
+    if (!this.sprite) return;
+    this.sprite.scale.set(1);
+    this.sprite.scale.set(this.target / this.sprite.height);
+  }
+  redraw() {
+    const th = this.ui.theme;
+    const i = this.turbo.index.get();
+    const disabled = this.turbo.current === "disabled";
+    if (this.sprite) {
+      const tex = this.texFor();
+      if (tex) this.sprite.texture = tex;
+      this.fit();
+      this.sprite.alpha = disabled ? 0.5 : 1;
+    } else {
+      const lit = i > 0;
+      const r = this.radius;
+      this.bg.clear();
+      this.bg.circle(0, 0, r).fill({ color: lit ? th.color.accent : th.color.surface, alpha: lit ? Math.min(1, 0.55 + i * 0.25) : 1 }).stroke({ width: 4, color: th.color.accent });
+      this.bg.poly([-6, -r * 0.42, 8, -4, 0, -4, 7, r * 0.42, -9, 2, 0, 2]).fill({ color: lit ? th.color.accentText : th.color.accent, alpha: disabled ? 0.5 : 1 });
+    }
+  }
+  play(t) {
+    this.animating = true;
+    void this.tween.run(this.art, t, this.ui.theme).then(() => {
+      this.animating = false;
+    });
+  }
+  dispose() {
+    this.tween.stop();
+    super.dispose();
+  }
+};
+var DEG = Math.PI / 180;
+var AutoplayView = class extends ControlView {
+  constructor(auto, ui, ticker, opts = {}) {
+    super(auto, ui);
+    this.auto = auto;
+    this.ticker = ticker;
+    this.idleTex = opts.idleTexture;
+    this.activeTex = opts.activeTexture;
+    this.target = opts.target ?? 88;
+    this.radius = opts.radius ?? 44;
+    this.useRadial = opts.picker === "radial";
+    this.art.addChild(this.bg);
+    if (this.idleTex || this.activeTex) {
+      this.sprite = new Sprite(this.idleTex ?? this.activeTex);
+      this.sprite.anchor.set(0.5);
+      this.fit();
+      this.art.addChild(this.sprite);
+    }
+    this.countText = new Text({ text: "", style: { fontFamily: ui.theme.type.family, fontSize: 26, fill: ui.theme.color.accentText, fontWeight: "800" } });
+    this.countText.anchor.set(0.5);
+    this.addChild(this.chipLayer, this.art, this.countText);
+    this.eventMode = "static";
+    this.cursor = "pointer";
+    this.hitArea = new Circle(0, 0, (this.sprite ? this.target / 2 : this.radius) + 8);
+    this.on("pointerup", () => this.auto.press());
+    if (this.useRadial) this.buildChips(opts);
+    this.tick = (t) => this.update(t.deltaMS);
+    this.disposers.push(
+      this.auto.state.subscribe(() => this.onState()),
+      this.auto.count.subscribe(() => this.drawButton())
+    );
+    this.drawButton();
+  }
+  auto;
+  ticker;
+  art = new Container();
+  // the rotating button
+  bg = new Graphics();
+  sprite;
+  countText;
+  chipLayer = new Container();
+  // chips stay upright (don't rotate)
+  chips = [];
+  idleTex;
+  activeTex;
+  target;
+  radius;
+  rot = 0;
+  rotTarget = 0;
+  phase = 0;
+  // ms since last state change (drives the stagger)
+  running = false;
+  useRadial;
+  tick;
+  fit() {
+    if (!this.sprite) return;
+    this.sprite.scale.set(1);
+    this.sprite.scale.set(this.target / this.sprite.height);
+  }
+  fmt(n) {
+    return n === Infinity ? "\u221E" : String(n);
+  }
+  buildChips(opts) {
+    const cx = opts.arcCenter?.x ?? 0;
+    const cy = opts.arcCenter?.y ?? 0;
+    const R = opts.arcRadius ?? (Math.hypot(cx, cy) || 220);
+    const start = Math.atan2(-cy, -cx);
+    const step = (opts.arcStepDeg ?? 24) * DEG * (opts.arcDir ?? 1);
+    const th = this.ui.theme;
+    const CR = 34;
+    this.auto.options.forEach((opt, i) => {
+      const ang = start + (i + 1) * step;
+      const node = new Container();
+      node.addChild(new Graphics().circle(0, 0, CR).fill({ color: 16777215 }).stroke({ width: 4, color: 0 }));
+      const t = new Text({ text: this.fmt(opt), style: { fontFamily: th.type.family, fontSize: 25, fill: 1382172, fontWeight: "800" } });
+      t.anchor.set(0.5);
+      node.addChild(t);
+      node.position.set(cx + R * Math.cos(ang), cy + R * Math.sin(ang));
+      node.scale.set(0);
+      node.visible = false;
+      node.eventMode = "static";
+      node.cursor = "pointer";
+      node.hitArea = new Circle(0, 0, CR + 4);
+      node.on("pointerup", (e) => {
+        e.stopPropagation();
+        this.auto.pick(opt);
+      });
+      this.chipLayer.addChild(node);
+      this.chips.push({ node, scale: 0 });
+    });
+  }
+  onState() {
+    this.rotTarget = this.useRadial && this.auto.current === "picking" ? -60 * DEG : 0;
+    this.phase = 0;
+    this.drawButton();
+    if (!this.running) {
+      this.running = true;
+      this.ticker.add(this.tick);
+    }
+  }
+  update(dt) {
+    this.phase += Math.min(dt, 40);
+    this.rot += (this.rotTarget - this.rot) * Math.min(1, dt / 110);
+    this.art.rotation = this.rot;
+    const opening = this.auto.current === "picking";
+    const n = this.chips.length;
+    let settled = Math.abs(this.rot - this.rotTarget) < 3e-3;
+    for (let i = 0; i < n; i++) {
+      const chip = this.chips[i];
+      let target;
+      let ease;
+      if (opening) {
+        target = this.phase > i * 70 ? 1 : 0;
+        ease = Math.min(1, dt / 95);
+      } else {
+        target = this.phase > (n - 1 - i) * 36 ? 0 : 1;
+        ease = Math.min(1, dt / 42);
+      }
+      chip.scale += (target - chip.scale) * ease;
+      chip.node.scale.set(chip.scale);
+      chip.node.visible = chip.scale > 0.01;
+      if (Math.abs(chip.scale - (opening ? 1 : 0)) > 0.01) settled = false;
+    }
+    if (settled) {
+      this.running = false;
+      this.ticker.remove(this.tick);
+    }
+  }
+  drawButton() {
+    const st = this.auto.current;
+    this.countText.visible = false;
+    const th = this.ui.theme;
+    const active = st === "active";
+    this.eventMode = active ? "none" : "static";
+    this.cursor = active ? "default" : "pointer";
+    if (active) {
+      this.bg.clear();
+      if (this.sprite) {
+        this.sprite.visible = true;
+        this.sprite.tint = th.color.accent;
+        this.sprite.alpha = 0.9;
+      } else {
+        this.bg.circle(0, 0, this.radius).fill({ color: th.color.accent }).stroke({ width: 4, color: th.color.accentText });
+      }
+      return;
+    }
+    if (this.sprite) {
+      this.sprite.visible = true;
+      this.sprite.tint = 16777215;
+      this.bg.clear();
+      const tex = this.idleTex ?? this.activeTex;
+      if (tex) this.sprite.texture = tex;
+      this.fit();
+      this.sprite.alpha = st === "disabled" ? 0.5 : 1;
+    } else {
+      this.bg.clear();
+      this.bg.circle(0, 0, this.radius).fill({ color: th.color.surface }).stroke({ width: 4, color: th.color.accent });
+    }
+  }
+  dispose() {
+    if (this.running) {
+      this.ticker.remove(this.tick);
+      this.running = false;
+    }
+    super.dispose();
+  }
+};
+var WHITE = 16777215;
+var BLACK = 657930;
+var DARK = 789776;
+var CHIP = 2303532;
+var DIM = 10133670;
+var AutoplayDrawerView = class extends Container {
+  constructor(auto, ui, ticker) {
+    super();
+    this.auto = auto;
+    this.ui = ui;
+    this.ticker = ticker;
+    this.zIndex = 200;
+    this.visible = false;
+    this.eventMode = "none";
+    const fam = ui.theme.type.family;
+    this.backdrop.eventMode = "static";
+    this.backdrop.cursor = "pointer";
+    this.backdrop.on("pointertap", () => this.auto.cancelPicker());
+    this.title = new Text({ text: ui.t("Autoplay"), style: { fontFamily: fam, fontSize: 30, fill: WHITE, fontWeight: "800", letterSpacing: 1 } });
+    this.title.anchor.set(0.5, 0);
+    this.startLabel = new Text({ text: ui.t("Start"), style: { fontFamily: fam, fontSize: 26, fill: BLACK, fontWeight: "800", letterSpacing: 1 } });
+    this.startLabel.anchor.set(0.5);
+    this.startBtn.eventMode = "static";
+    this.startBtn.cursor = "pointer";
+    this.startBtn.on("pointertap", () => this.start());
+    this.startBtn.addChild(this.startBg, this.startLabel);
+    this.sheet.addChild(this.sheetBg, this.handle, this.title);
+    this.addGroup("count", this.auto.options);
+    if (this.auto.lossLimitOptions.length) this.addGroup("loss", this.auto.lossLimitOptions, "Stop on loss");
+    if (this.auto.winLimitOptions.length) this.addGroup("win", this.auto.winLimitOptions, "Stop on single win");
+    this.sheet.addChild(this.startBtn);
+    this.addChild(this.backdrop, this.sheet);
+    this.tick = (t) => this.update(t.deltaMS);
+    this.disposers.push(this.auto.state.subscribe(() => this.onState()));
+    this.disposers.push(
+      this.ui.locale.subscribe(() => {
+        if (this.destroyed) return;
+        this.title.text = this.ui.t("Autoplay");
+        this.startLabel.text = this.ui.t("Start");
+        for (const g of this.groups) if (g.heading) g.heading.text = this.ui.t(headingKey(g.kind));
+      })
+    );
+  }
+  auto;
+  ui;
+  ticker;
+  backdrop = new Graphics();
+  sheet = new Container();
+  sheetBg = new Graphics();
+  handle = new Graphics();
+  title;
+  startBtn = new Container();
+  startBg = new Graphics();
+  startLabel;
+  groups = [];
+  screen;
+  prog = 0;
+  // 0 hidden → 1 fully shown
+  running = false;
+  sheetH = 300;
+  kk = 1;
+  // active layout scale (base scale shrunk to fit the viewport height)
+  disposers = [];
+  tick;
+  addGroup(kind, values, headingText) {
+    const fam = this.ui.theme.type.family;
+    const group = { kind, chips: [], selected: 0 };
+    if (headingText) {
+      group.heading = new Text({ text: this.ui.t(headingText), style: { fontFamily: fam, fontSize: 16, fill: DIM, fontWeight: "700", letterSpacing: 0.5 } });
+      group.heading.anchor.set(0.5, 0.5);
+      this.sheet.addChild(group.heading);
+    }
+    values.forEach((value) => {
+      const node = new Container();
+      const bg = new Graphics();
+      const label = new Text({ text: chipText(kind, value), style: { fontFamily: fam, fontSize: 24, fill: WHITE, fontWeight: "800" } });
+      label.anchor.set(0.5);
+      node.eventMode = "static";
+      node.cursor = "pointer";
+      const idx = group.chips.length;
+      node.on("pointertap", () => this.select(group, idx));
+      node.addChild(bg, label);
+      this.sheet.addChild(node);
+      group.chips.push({ node, bg, label, value });
+    });
+    group.selected = defaultSelected(kind, values);
+    this.groups.push(group);
+  }
+  applyLayout(screen) {
+    this.screen = screen;
+    this.position.set(0, 0);
+    this.scale.set(1);
+    this.relayout();
+  }
+  /** Base scale from the screen's shorter edge (before fit-to-height). */
+  baseK() {
+    const s = this.screen;
+    if (!s) return 1;
+    return Math.max(0.78, Math.min(1.3, Math.min(s.width, s.height) / 1e3));
+  }
+  relayout() {
+    const s = this.screen;
+    if (!s) return;
+    let k = this.baseK();
+    let h = this.layoutAt(k);
+    for (let pass = 0; pass < 4 && h > s.height; pass++) {
+      k = Math.max(0.35, k * (s.height / h) * 0.97);
+      h = this.layoutAt(k);
+    }
+    this.render2();
+  }
+  /** Lay the sheet out at scale `k`; returns the full slide height (sheetH + 40). */
+  layoutAt(k) {
+    const s = this.screen;
+    if (!s) return 0;
+    this.kk = k;
+    const W = s.width;
+    const H = s.height;
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 1 });
+    this.backdrop.hitArea = new Rectangle(0, 0, W, H);
+    this.title.style.fontSize = 30 * k;
+    this.title.position.set(W / 2, 22 * k);
+    const cw = 86 * k;
+    const ch = 64 * k;
+    const gap = 14 * k;
+    const maxRowW = W - 48 * k;
+    let y = 22 * k + 30 * k + 20 * k;
+    for (const g of this.groups) {
+      if (g.heading) {
+        g.heading.style.fontSize = 16 * k;
+        g.heading.position.set(W / 2, y + 10 * k);
+        y += 30 * k;
+      }
+      const n = g.chips.length;
+      const perRow = Math.max(1, Math.min(n, Math.floor((maxRowW + gap) / (cw + gap))));
+      const rows = Math.ceil(n / perRow);
+      g.chips.forEach((chip, i) => {
+        const row = Math.floor(i / perRow);
+        const inRow = i % perRow;
+        const countThisRow = Math.min(perRow, n - row * perRow);
+        const rowW = countThisRow * cw + (countThisRow - 1) * gap;
+        const x = (W - rowW) / 2 + inRow * (cw + gap) + cw / 2;
+        const cy = y + row * (ch + gap) + ch / 2;
+        chip.node.position.set(x, cy);
+        chip.label.style.fontSize = 24 * k;
+        chip.node.hitArea = new Rectangle(-cw / 2, -ch / 2, cw, ch);
+      });
+      this.drawGroup(g);
+      y += rows * (ch + gap) + 12 * k;
+    }
+    const startW = Math.min(W - 48 * k, 320 * k);
+    const startH = 58 * k;
+    const startY = y + 4 * k + startH / 2;
+    this.startBg.clear().rect(-startW / 2, -startH / 2, startW, startH).fill({ color: WHITE });
+    this.startLabel.style.fontSize = 24 * k;
+    this.startBtn.position.set(W / 2, startY);
+    this.startBtn.hitArea = new Rectangle(-startW / 2, -startH / 2, startW, startH);
+    this.sheetH = startY + startH / 2 + 20 * k;
+    this.sheetBg.clear().rect(-1, 0, W + 2, this.sheetH + 40 + 600).fill({ color: DARK });
+    this.handle.clear().roundRect(W / 2 - 30 * k, 13 * k, 60 * k, 5 * k, 2.5 * k).fill({ color: DIM });
+    return this.sheetH + 40;
+  }
+  drawGroup(g) {
+    const k = this.kk;
+    const cw = 86 * k;
+    const ch = 64 * k;
+    g.chips.forEach((chip, idx) => {
+      const on = idx === g.selected;
+      chip.bg.clear().rect(-cw / 2, -ch / 2, cw, ch).fill({ color: on ? WHITE : CHIP });
+      chip.label.style.fill = on ? BLACK : WHITE;
+    });
+  }
+  select(group, i) {
+    group.selected = i;
+    this.drawGroup(group);
+  }
+  valueOf(kind) {
+    const g = this.groups.find((x) => x.kind === kind);
+    return g?.chips[g.selected]?.value;
+  }
+  start() {
+    const count = this.valueOf("count") ?? this.auto.options[0] ?? 1;
+    this.auto.pick(count, {
+      lossLimit: this.valueOf("loss") ?? Infinity,
+      singleWinLimit: this.valueOf("win") ?? Infinity
+    });
+  }
+  onState() {
+    if (this.auto.current === "picking") this.visible = true;
+    if (!this.running) {
+      this.running = true;
+      this.ticker.add(this.tick);
+    }
+  }
+  update(dt) {
+    const target = this.auto.current === "picking" ? 1 : 0;
+    this.prog += (target - this.prog) * Math.min(1, dt / 140);
+    if (Math.abs(this.prog - target) < 4e-3) {
+      this.prog = target;
+      this.running = false;
+      this.ticker.remove(this.tick);
+    }
+    this.render2();
+  }
+  render2() {
+    const s = this.screen;
+    if (!s) return;
+    const SH = this.sheetH + 40;
+    this.sheet.position.set(0, s.height - SH * this.prog);
+    this.backdrop.alpha = 0.62 * this.prog;
+    const shown = this.prog > 0.01;
+    this.visible = shown;
+    this.eventMode = shown ? "auto" : "none";
+    this.backdrop.eventMode = shown ? "static" : "none";
+  }
+  dispose() {
+    if (this.running) {
+      this.ticker.remove(this.tick);
+      this.running = false;
+    }
+    for (const d of this.disposers) d();
+    this.disposers.length = 0;
+    if (!this.destroyed) this.destroy({ children: true });
+  }
+};
+function chipText(kind, value) {
+  if (value === Infinity) return "\u221E";
+  return kind === "count" ? String(value) : `${value}\xD7`;
+}
+function defaultSelected(kind, values) {
+  if (kind === "count") {
+    const i = values.findIndex((v) => v !== Infinity);
+    return i >= 0 ? i : 0;
+  }
+  const inf = values.indexOf(Infinity);
+  return inf >= 0 ? inf : 0;
+}
+function headingKey(kind) {
+  return kind === "loss" ? "Stop on loss" : kind === "win" ? "Stop on single win" : "Autoplay";
+}
+var VB_W = 290;
+var VB_H = 60;
+var GROOVE_X0 = 63;
+var GROOVE_X1 = 263;
+var HANDLE_Y = 30;
+var HANDLE_R = 12;
+var DISPLAY_W = 260;
+var S = DISPLAY_W / VB_W;
+var SliderView = class extends ControlView {
+  constructor(slider, ui, trackTexture) {
+    super(slider, ui);
+    this.slider = slider;
+    this.hasTexture = !!trackTexture;
+    const cy = HANDLE_Y * S;
+    const x0 = GROOVE_X0 * S;
+    const x1 = GROOVE_X1 * S;
+    const trackH = 8 * S;
+    if (trackTexture) {
+      const track = new Sprite(trackTexture);
+      track.width = VB_W * S;
+      track.height = VB_H * S;
+      this.addChild(track);
+    } else {
+      const t = ui.theme;
+      const track = new Graphics().roundRect(x0 - trackH / 2, cy - trackH / 2, x1 - x0 + trackH, trackH, trackH / 2).fill({ color: t.color.surfaceAlt }).roundRect(x0 - trackH / 2, cy - trackH / 2, x1 - x0 + trackH, trackH, trackH / 2).stroke({ width: 1, color: t.color.textDim, alpha: 0.35 });
+      this.addChild(track);
+    }
+    this.addChild(this.handle);
+    this.eventMode = "static";
+    this.cursor = "pointer";
+    this.hitArea = new Rectangle(0, 0, VB_W * S, VB_H * S);
+    this.on("pointerdown", this.onDown);
+    this.on("globalpointermove", this.onMove);
+    this.on("pointerup", this.onUp);
+    this.on("pointerupoutside", this.onUp);
+    this.disposers.push(this.slider.value.subscribe(() => this.redraw()));
+    this.redraw();
+  }
+  slider;
+  handle = new Graphics();
+  hasTexture;
+  dragging = false;
+  redraw() {
+    const cy = HANDLE_Y * S;
+    const x0 = GROOVE_X0 * S;
+    const x1 = GROOVE_X1 * S;
+    const x = x0 + this.slider.value.get() * (x1 - x0);
+    if (this.hasTexture) {
+      this.handle.clear().circle(x, cy, HANDLE_R * S).fill({ color: 16777215 }).stroke({ width: 4 * S, color: 0 });
+      return;
+    }
+    const t = this.ui.theme;
+    const trackH = 8 * S;
+    const knobR = 11 * S;
+    this.handle.clear().roundRect(x0 - trackH / 2, cy - trackH / 2, x - x0 + trackH, trackH, trackH / 2).fill({ color: t.color.accent }).circle(x, cy, knobR).fill({ color: 16777215 }).circle(x, cy, knobR).stroke({ width: 3, color: t.color.accent });
+  }
+  valueFromEvent(e) {
+    const svgX = this.toLocal(e.global).x / S;
+    return Math.min(1, Math.max(0, (svgX - GROOVE_X0) / (GROOVE_X1 - GROOVE_X0)));
+  }
+  onDown = (e) => {
+    this.dragging = true;
+    this.slider.beginDrag();
+    this.slider.setNormalized(this.valueFromEvent(e));
+  };
+  onMove = (e) => {
+    if (this.dragging) this.slider.setNormalized(this.valueFromEvent(e));
+  };
+  onUp = () => {
+    if (this.dragging) {
+      this.dragging = false;
+      this.slider.endDrag();
+    }
+  };
+};
+var ToggleView = class extends ControlView {
+  constructor(toggle, ui, ticker, opts = {}) {
+    super(toggle, ui);
+    this.toggle = toggle;
+    this.tween = new Tweener(ticker);
+    this.offTex = opts.offTexture;
+    this.onTex = opts.onTexture;
+    this.target = opts.target ?? 84;
+    this.radius = opts.radius ?? 40;
+    if (this.offTex || this.onTex) {
+      this.sprite = new Sprite(this.texFor());
+      this.sprite.anchor.set(0.5);
+      this.fit();
+      this.art.addChild(this.sprite);
+    } else {
+      this.art.addChild(this.bg);
+    }
+    this.addChild(this.art);
+    this.eventMode = "static";
+    this.cursor = "pointer";
+    this.hitArea = this.sprite ? new Circle(0, 0, this.target / 2 + 8) : new Rectangle(-35, -23, 70, 46);
+    this.on("pointerup", this.onUp);
+    this.disposers.push(
+      this.toggle.state.subscribe(() => this.redraw()),
+      this.toggle.onTransition((t) => this.play(t))
+    );
+    this.redraw();
+  }
+  toggle;
+  art = new Container();
+  bg = new Graphics();
+  sprite;
+  tween;
+  offTex;
+  onTex;
+  target;
+  radius;
+  onUp = () => {
+    this.toggle.toggle();
+  };
+  texFor() {
+    return this.toggle.isOn ? this.onTex ?? this.offTex : this.offTex ?? this.onTex;
+  }
+  fit() {
+    if (!this.sprite) return;
+    this.sprite.scale.set(1);
+    this.sprite.scale.set(this.target / this.sprite.height);
+  }
+  redraw() {
+    if (this.sprite) {
+      const tex = this.texFor();
+      if (tex) this.sprite.texture = tex;
+      this.fit();
+      this.sprite.alpha = this.toggle.current === "disabled" ? 0.5 : 1;
+      return;
+    }
+    const th = this.ui.theme;
+    const on = this.toggle.isOn;
+    const w = 54;
+    const h = 30;
+    const r = h / 2;
+    const knobX = on ? w / 2 - r : -12;
+    this.bg.clear().roundRect(-w / 2, -h / 2, w, h, r).fill({ color: on ? th.color.accent : th.color.surfaceAlt }).roundRect(-w / 2, -h / 2, w, h, r).stroke({ width: 2, color: on ? th.color.accent : th.color.textDim, alpha: on ? 1 : 0.6 }).circle(knobX, 0, r - 4).fill({ color: 16777215 });
+  }
+  play(t) {
+    this.animating = true;
+    void this.tween.run(this.art, t, this.ui.theme).then(() => {
+      this.animating = false;
+    });
+  }
+  dispose() {
+    this.tween.stop();
+    super.dispose();
+  }
+};
+var SelectView = class extends ControlView {
+  constructor(select, ui, ticker, opts = {}) {
+    super(select, ui);
+    this.select = select;
+    this.tween = new Tweener(ticker);
+    this.w = opts.width ?? 240;
+    this.h = opts.height ?? 56;
+    this.dropdownLayer = opts.dropdownLayer;
+    const t = ui.theme;
+    this.captionText = new Text({ text: select.caption ?? "", style: { fontFamily: t.type.family, fontSize: 16, fill: t.color.textDim, fontWeight: "600" } });
+    this.captionText.anchor.set(0, 0.5);
+    this.valueText = new Text({ text: select.optionLabel, style: { fontFamily: t.type.family, fontSize: 20, fill: t.color.text, fontWeight: "700" } });
+    this.valueText.anchor.set(1, 0.5);
+    this.art.addChild(this.bg, this.captionText, this.valueText, this.chevron);
+    this.addChild(this.art);
+    this.eventMode = "static";
+    this.cursor = "pointer";
+    this.hitArea = new Rectangle(-this.w / 2, -this.h / 2, this.w, this.h);
+    this.on("pointerup", this.onUp);
+    this.disposers.push(
+      this.select.index.subscribe(() => this.redraw()),
+      this.select.state.subscribe(() => {
+        this.redraw();
+        this.syncDropdown();
+      }),
+      this.select.onTransition((tr) => this.play(tr)),
+      this.ui.locale.subscribe(() => {
+        if (!this.destroyed) this.redraw();
+      })
+    );
+    this.redraw();
+  }
+  select;
+  art = new Container();
+  bg = new Graphics();
+  chevron = new Graphics();
+  captionText;
+  valueText;
+  tween;
+  w;
+  h;
+  dropdownLayer;
+  dropdown;
+  onUp = () => {
+    if (!this.select.interactable) return;
+    if (this.dropdownLayer) this.select.isOpen ? this.select.closeList() : this.select.openList();
+    else this.select.cycle();
+  };
+  syncDropdown() {
+    if (!this.dropdownLayer) return;
+    if (this.select.isOpen) this.showDropdown();
+    else this.hideDropdown();
+  }
+  showDropdown() {
+    this.hideDropdown();
+    const layer = this.dropdownLayer;
+    if (!layer) return;
+    const t = this.ui.theme;
+    const w = Math.max(this.w, 220);
+    const rowH = 46;
+    const opts = this.select.options;
+    const listH = opts.length * rowH + 8;
+    const panel = new Container();
+    panel.zIndex = 1;
+    const backdrop = new Graphics().rect(-6e3, -6e3, 12e3, 12e3).fill({ color: 0, alpha: 1e-3 });
+    backdrop.eventMode = "static";
+    backdrop.on("pointertap", () => this.select.closeList());
+    panel.addChild(backdrop);
+    const list = new Container();
+    list.addChild(new Graphics().roundRect(-w / 2, 0, w, listH, 14).fill({ color: t.color.surface }).stroke({ width: 2, color: t.color.accent }));
+    opts.forEach((o, i) => {
+      const selected = i === this.select.index.get();
+      const cy = 4 + i * rowH + rowH / 2;
+      const row = new Container();
+      if (selected) row.addChild(new Graphics().roundRect(-w / 2 + 5, 4 + i * rowH, w - 10, rowH, 9).fill({ color: t.color.accent }));
+      const label = new Text({ text: this.ui.t(o.label), style: { fontFamily: t.type.family, fontSize: 18, fill: selected ? t.color.accentText : t.color.text, fontWeight: "700" } });
+      label.anchor.set(0, 0.5);
+      label.position.set(-w / 2 + 20, cy);
+      row.addChild(label);
+      row.eventMode = "static";
+      row.cursor = "pointer";
+      row.hitArea = new Rectangle(-w / 2, 4 + i * rowH, w, rowH);
+      row.on("pointertap", (e) => {
+        e.stopPropagation();
+        this.select.choose(o.value);
+      });
+      list.addChild(row);
+    });
+    panel.addChild(list);
+    const g = this.toGlobal({ x: 0, y: this.h / 2 + 6 });
+    const screenH = typeof window !== "undefined" ? window.innerHeight : 1080;
+    const py = listH > screenH - 16 ? 8 : Math.min(g.y, screenH - 8 - listH);
+    list.position.set(g.x, Math.max(8, py));
+    layer.addChild(panel);
+    this.dropdown = panel;
+  }
+  hideDropdown() {
+    if (this.dropdown && !this.dropdown.destroyed) this.dropdown.destroy({ children: true });
+    this.dropdown = void 0;
+  }
+  redraw() {
+    const t = this.ui.theme;
+    const disabled = this.select.current === "disabled";
+    const open = this.select.isOpen;
+    const w = this.w;
+    const h = this.h;
+    const edge = disabled ? t.color.disabled : t.color.accent;
+    this.bg.clear().roundRect(-w / 2, -h / 2, w, h, h / 2).fill({ color: t.color.surfaceAlt }).stroke({ width: 3, color: edge });
+    this.captionText.text = this.ui.t(this.select.caption ?? "");
+    this.captionText.position.set(-w / 2 + 18, 0);
+    this.captionText.style.fill = t.color.textDim;
+    this.valueText.text = this.ui.t(this.select.optionLabel);
+    this.valueText.position.set(w / 2 - 32, 0);
+    this.valueText.style.fill = disabled ? t.color.textDim : t.color.text;
+    const cx = w / 2 - 16;
+    const dir = open ? -1 : 1;
+    this.chevron.clear().moveTo(cx - 5, -4 * dir).lineTo(cx, 4 * dir).lineTo(cx + 5, -4 * dir).stroke({ width: 3, color: edge, cap: "round", join: "round" });
+    this.art.alpha = disabled ? 0.6 : 1;
+  }
+  play(tr) {
+    this.animating = true;
+    void this.tween.run(this.art, tr, this.ui.theme).then(() => {
+      this.animating = false;
+    });
+  }
+  dispose() {
+    this.hideDropdown();
+    this.tween.stop();
+    super.dispose();
+  }
+};
+var StepperView = class extends ControlView {
+  constructor(stepper, ui, _ticker) {
+    super(stepper, ui);
+    this.stepper = stepper;
+    const t = ui.theme;
+    if (stepper.label) {
+      this.captionText = new Text({
+        text: ui.t(stepper.label),
+        style: { fontFamily: t.type.family, fontSize: 14, fill: t.color.textDim, fontWeight: "600" }
+      });
+      this.captionText.anchor.set(0.5);
+      this.captionText.position.set(0, -22);
+      this.addChild(this.captionText);
+    }
+    this.valueText = new Text({
+      text: "",
+      style: { fontFamily: t.type.family, fontSize: 20, fill: t.color.text, fontWeight: "700" }
+    });
+    this.valueText.anchor.set(0.5);
+    this.valueText.position.set(0, this.captionText ? 6 : 0);
+    this.minus.position.set(-64, this.valueText.y);
+    this.plus.position.set(64, this.valueText.y);
+    this.minus.hitArea = new Circle(0, 0, 20);
+    this.plus.hitArea = new Circle(0, 0, 20);
+    this.minus.on("pointerup", () => this.stepper.dec());
+    this.plus.on("pointerup", () => this.stepper.inc());
+    this.addChild(this.minus, this.valueText, this.plus);
+    this.disposers.push(
+      this.stepper.index.subscribe(() => this.redraw()),
+      this.ui.locale.subscribe(() => {
+        if (!this.destroyed) this.redraw();
+      })
+    );
+    this.redraw();
+  }
+  stepper;
+  minus = new Graphics();
+  plus = new Graphics();
+  valueText;
+  captionText;
+  fmt(v) {
+    return Number.isInteger(v) ? String(v) : v.toFixed(2);
+  }
+  redraw() {
+    const t = this.ui.theme;
+    if (this.captionText) this.captionText.text = this.ui.t(this.stepper.label ?? "");
+    this.valueText.text = this.fmt(this.stepper.value);
+    drawStepButton(this.minus, "minus", this.stepper.canDec, t);
+    drawStepButton(this.plus, "plus", this.stepper.canInc, t);
+  }
+};
+function drawStepButton(g, kind, enabled, t) {
+  const col = enabled ? t.color.accent : t.color.disabled;
+  g.clear();
+  g.circle(0, 0, 18).fill({ color: t.color.surfaceAlt }).stroke({ width: 3, color: col });
+  g.moveTo(-7, 0).lineTo(7, 0).stroke({ width: 3, color: col, cap: "round" });
+  if (kind === "plus") g.moveTo(0, -7).lineTo(0, 7).stroke({ width: 3, color: col, cap: "round" });
+  g.alpha = enabled ? 1 : 0.5;
+  g.eventMode = enabled ? "static" : "none";
+  g.cursor = enabled ? "pointer" : "default";
+}
+var ROW_H = 72;
+var PAD = 28;
+var GAP = 16;
+function buildBlockColumn(blocks, controls, ui, ticker, bodyW, opts = {}) {
+  const t = ui.theme;
+  const tr = (s) => ui.t(s);
+  const innerW = bodyW - PAD * 2;
+  const byId = new Map(controls.map((c) => [c.id, c]));
+  const content = new Container();
+  const views = [];
+  let y = PAD;
+  const placeFixed = (node, h) => {
+    node.position.set(0, y + h / 2);
+    content.addChild(node);
+    y += h;
+  };
+  const placeAuto = (node, gap = GAP) => {
+    const h = node.height || 1;
+    node.position.set(0, y + h / 2);
+    content.addChild(node);
+    y += h + gap;
+  };
+  const heading = (s, size = 18) => {
+    const wrap = new Container();
+    const txt = new Text({
+      text: tr(s),
+      style: { fontFamily: t.type.family, fontSize: size, fill: t.color.text, fontWeight: "800", letterSpacing: 1 }
+    });
+    txt.anchor.set(0.5);
+    txt.position.set(0, 0);
+    const half = Math.min(txt.width / 2, innerW / 2 - 24);
+    const gap = 16;
+    wrap.addChild(
+      new Graphics().moveTo(-innerW / 2, 0).lineTo(-half - gap, 0).stroke({ width: 2, color: t.color.text, alpha: 0.85 }),
+      new Graphics().moveTo(half + gap, 0).lineTo(innerW / 2, 0).stroke({ width: 2, color: t.color.text, alpha: 0.85 }),
+      txt
+    );
+    return wrap;
+  };
+  const body = (s) => richParagraphNode(s, ui, innerW, { fontFamily: t.type.family, fontSize: 15, fill: t.color.textDim, lineHeight: 22 });
+  const subheading = (s) => {
+    const wrap = new Container();
+    const txt = new Text({ text: tr(s), style: { fontFamily: t.type.family, fontSize: 15, fill: t.color.text, fontWeight: "800", letterSpacing: 0.5 } });
+    txt.anchor.set(0, 0.5);
+    txt.position.set(-innerW / 2, 0);
+    wrap.addChild(txt);
+    return wrap;
+  };
+  const legal = (s) => richParagraphNode(s, ui, innerW, { fontFamily: t.type.family, fontSize: 12, fill: t.color.textDim, lineHeight: 17 });
+  const caption = (s) => {
+    const wrap = new Container();
+    const txt = new Text({ text: s, style: { fontFamily: t.type.family, fontSize: 15, fill: t.color.text, fontWeight: "700" } });
+    txt.anchor.set(0.5);
+    wrap.addChild(txt);
+    return wrap;
+  };
+  const hintNode = (s) => {
+    const wrap = new Container();
+    const txt = new Text({
+      text: s,
+      style: { fontFamily: t.type.family, fontSize: 12.5, fill: t.color.textDim, align: "center", wordWrap: true, wordWrapWidth: innerW * 0.86, lineHeight: 17 }
+    });
+    txt.anchor.set(0.5);
+    wrap.addChild(txt);
+    return wrap;
+  };
+  const makeView = (b, control) => {
+    const skin = opts.controlSkins?.[b.id];
+    if (skin) return skin(control, ui, ticker);
+    switch (b.kind) {
+      case "slider":
+        return new SliderView(control, ui);
+      case "toggle":
+        return new ToggleView(control, ui, ticker, { radius: 22 });
+      case "button":
+        return new ButtonView(control, ui, ticker, { shape: "pill", height: 48 });
+      case "select":
+        return new SelectView(control, ui, ticker, { width: 320, dropdownLayer: opts.dropdownLayer });
+      case "stepper":
+        return new StepperView(control, ui, ticker);
+      case "value":
+        return new ValueDisplayView(control, ui, ticker);
+      default:
+        console.warn(`[open-ui] block column: no view for kind "${b.kind}" (id="${b.id}") \u2014 skipped`);
+        return null;
+    }
+  };
+  const walk = (bs) => {
+    for (const b of bs) {
+      switch (b.kind) {
+        case "group":
+          if (b.title) placeAuto(heading(b.title, 14), 10);
+          walk(b.children);
+          break;
+        case "heading":
+          placeAuto(heading(b.text), 12);
+          break;
+        case "subheading":
+          placeAuto(subheading(b.text), 8);
+          break;
+        case "text":
+          placeAuto(body(tr(b.text)));
+          break;
+        case "legal":
+          placeAuto(legal(tr(b.text)));
+          break;
+        case "divider":
+          placeAuto(dividerNode(innerW, ui), 10);
+          break;
+        case "callout":
+          placeAuto(calloutNode(b, ui, innerW));
+          break;
+        case "stat-grid":
+          placeAuto(statGridNode(b, ui, innerW));
+          break;
+        case "steps":
+          placeAuto(body(b.items.map((s, i) => `${b.ordered ? `${i + 1}.` : "\u2022"}  ${tr(s)}`).join("\n")));
+          break;
+        case "table":
+          placeAuto(tableNode(b, ui, innerW));
+          break;
+        case "cards":
+          placeAuto(cardsNode(b, ui, innerW));
+          break;
+        case "paytable":
+          placeAuto(paytableNode(b, ui, innerW));
+          break;
+        case "media":
+          placeAuto(mediaNode(b, ui, innerW));
+          break;
+        case "image": {
+          let iw = b.width || 64;
+          let ih = b.height || 64;
+          if (iw > innerW) {
+            ih = Math.round(ih * innerW / iw);
+            iw = innerW;
+          }
+          placeAuto(imageBoxNode(b.src, iw, ih, ui));
+          break;
+        }
+        default: {
+          const control = byId.get(b.id);
+          if (!control) break;
+          if ((b.kind === "slider" || b.kind === "toggle") && b.label) placeAuto(caption(tr(b.label)), 6);
+          const view = makeView(b, control);
+          if (!view) break;
+          views.push(view);
+          const wrap = new Container();
+          if (b.kind === "slider") view.position.set(-130, -27);
+          wrap.addChild(view);
+          placeFixed(wrap, ROW_H);
+          const hint = b.hint;
+          if (hint) placeAuto(hintNode(tr(hint)), 12);
+        }
+      }
+    }
+  };
+  walk(blocks);
+  return { content, views, height: y + PAD, innerW };
+}
+function richParagraphNode(s, ui, width, style) {
+  const t = ui.theme;
+  const c = new Container();
+  const lineH = typeof style.lineHeight === "number" ? style.lineHeight : 22;
+  const dim = style.fill;
+  const runs = [];
+  const re = /\*\*(.+?)\*\*/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(s)) !== null) {
+    if (m.index > last) runs.push({ text: s.slice(last, m.index), bold: false });
+    runs.push({ text: m[1], bold: true });
+    last = re.lastIndex;
+  }
+  if (last < s.length) runs.push({ text: s.slice(last), bold: false });
+  let x = 0;
+  let line = 0;
+  const x0 = -width / 2;
+  for (const run of runs) {
+    for (const w of run.text.split(/(\n|\s+)/).filter((p) => p.length)) {
+      if (w === "\n") {
+        x = 0;
+        line += 1;
+        continue;
+      }
+      const isSpace = /^\s+$/.test(w);
+      if (isSpace && x === 0) continue;
+      const txt = new Text({ text: w, style: { ...style, fontWeight: run.bold ? "800" : style.fontWeight ?? "400", fill: run.bold ? t.color.text : dim } });
+      txt.anchor.set(0, 0);
+      if (!isSpace && x > 0 && x + txt.width > width) {
+        x = 0;
+        line += 1;
+      }
+      txt.position.set(x0 + x, line * lineH);
+      c.addChild(txt);
+      x += txt.width;
+    }
+  }
+  const totalH = (line + 1) * lineH;
+  for (const ch of c.children) ch.y -= totalH / 2;
+  return c;
+}
+function calloutNode(b, ui, innerW) {
+  const t = ui.theme;
+  const tone = b.tone === "warning" ? "#ffb020" : t.color.accent;
+  const c = new Container();
+  const padX = 16;
+  const padY = 12;
+  const textW = innerW - padX * 2 - 4;
+  const title = b.title ? new Text({ text: ui.t(b.title), style: { fontFamily: t.type.family, fontSize: 14, fill: tone, fontWeight: "800", letterSpacing: 0.3 } }) : null;
+  title?.anchor.set(0, 0);
+  const bodyNode = richParagraphNode(ui.t(b.text), ui, textW, { fontFamily: t.type.family, fontSize: 14, fill: t.color.text, lineHeight: 20 });
+  const bodyH = bodyNode.height;
+  const titleH = title ? title.height + 6 : 0;
+  const h = padY * 2 + titleH + bodyH;
+  const x = -innerW / 2;
+  const bg = new Graphics().roundRect(x, -h / 2, innerW, h, 10).fill({ color: tone, alpha: 0.08 }).roundRect(x, -h / 2, innerW, h, 10).stroke({ width: 1.5, color: tone, alpha: 0.5 }).roundRect(x, -h / 2, 4, h, 2).fill({ color: tone });
+  c.addChild(bg);
+  if (title) {
+    title.position.set(x + padX, -h / 2 + padY);
+    c.addChild(title);
+  }
+  bodyNode.position.set(x + padX + textW / 2, -h / 2 + padY + titleH + bodyH / 2);
+  c.addChild(bodyNode);
+  return c;
+}
+function statGridNode(b, ui, innerW) {
+  const t = ui.theme;
+  const c = new Container();
+  const rowH = 30;
+  const totalH = Math.max(b.items.length * rowH, rowH);
+  b.items.forEach((it, i) => {
+    const cy = -totalH / 2 + rowH / 2 + i * rowH;
+    if (i > 0) {
+      c.addChild(new Graphics().moveTo(-innerW / 2, cy - rowH / 2).lineTo(innerW / 2, cy - rowH / 2).stroke({ width: 1, color: t.color.textDim, alpha: 0.18 }));
+    }
+    const label = new Text({ text: ui.t(it.label), style: { fontFamily: t.type.family, fontSize: 14, fill: t.color.textDim } });
+    label.anchor.set(0, 0.5);
+    label.position.set(-innerW / 2, cy);
+    const value = new Text({ text: ui.t(it.value), style: { fontFamily: t.type.family, fontSize: 14, fill: t.color.text, fontWeight: "700" } });
+    value.anchor.set(1, 0.5);
+    value.position.set(innerW / 2, cy);
+    c.addChild(label, value);
+  });
+  return c;
+}
+function dividerNode(innerW, ui) {
+  const c = new Container();
+  c.addChild(new Graphics().rect(-innerW / 2, -0.5, innerW, 1).fill({ color: ui.theme.color.textDim, alpha: 0.3 }));
+  return c;
+}
+function tableNode(b, ui, innerW) {
+  const t = ui.theme;
+  const c = new Container();
+  const head = b.columns && b.columns.length ? [b.columns] : [];
+  const allRows = [...head, ...b.rows];
+  const cols = Math.max(1, b.columns?.length ?? b.rows[0]?.length ?? 1);
+  const colW = innerW / cols;
+  const rowH = 30;
+  const totalH = Math.max(allRows.length * rowH, rowH);
+  const left = -innerW / 2;
+  allRows.forEach((row, ri) => {
+    const cy = -totalH / 2 + rowH / 2 + ri * rowH;
+    const isHeader = head.length > 0 && ri === 0;
+    if (ri > 0) {
+      c.addChild(new Graphics().moveTo(left, cy - rowH / 2).lineTo(innerW / 2, cy - rowH / 2).stroke({ width: 1, color: t.color.textDim, alpha: 0.18 }));
+    }
+    for (let ci = 0; ci < cols; ci++) {
+      const raw = row[ci] ?? "";
+      const cx = left + ci * colW + 8;
+      const fill = isHeader ? t.color.text : ci === 0 ? t.color.text : t.color.accent;
+      const weight = isHeader ? "800" : ci === 0 ? "700" : "700";
+      const txt = new Text({ text: ui.t(raw), style: { fontFamily: t.type.family, fontSize: 13, fill, fontWeight: weight } });
+      txt.anchor.set(0, 0.5);
+      txt.position.set(cx, cy);
+      c.addChild(txt);
+    }
+  });
+  return c;
+}
+function cardsNode(b, ui, innerW) {
+  const t = ui.theme;
+  const c = new Container();
+  const n = b.items.length || 1;
+  const gap = 12;
+  const cols = Math.max(1, Math.min(n, Math.floor((innerW + gap) / (150 + gap))));
+  const cardW = (innerW - gap * (cols - 1)) / cols;
+  const rows = Math.ceil(n / cols);
+  const cardH = 132;
+  const totalH = rows * cardH + (rows - 1) * gap;
+  b.items.forEach((it, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const cardX = -innerW / 2 + col * (cardW + gap);
+    const cardY = -totalH / 2 + row * (cardH + gap);
+    const card = new Container();
+    card.addChild(
+      new Graphics().roundRect(0, 0, cardW, cardH, 12).fill({ color: t.color.surfaceAlt, alpha: 0.6 }).roundRect(0, 0, cardW, cardH, 12).stroke({ width: 1, color: t.color.textDim, alpha: 0.15 })
+    );
+    if (it.icon) {
+      const icon = imageBoxNode(it.icon, 44, 44, ui);
+      icon.position.set(cardW / 2, 34);
+      card.addChild(icon);
+    }
+    const title = new Text({ text: ui.t(it.title), style: { fontFamily: t.type.family, fontSize: 14, fill: t.color.text, fontWeight: "800" } });
+    title.anchor.set(0.5, 0);
+    title.position.set(cardW / 2, it.icon ? 64 : 14);
+    card.addChild(title);
+    if (it.text) {
+      const para = richParagraphNode(ui.t(it.text), ui, cardW - 20, { fontFamily: t.type.family, fontSize: 12, fill: t.color.textDim, lineHeight: 16 });
+      para.position.set(cardW / 2, (it.icon ? 96 : 46) + para.height / 2);
+      card.addChild(para);
+    }
+    card.position.set(cardX, cardY);
+    c.addChild(card);
+  });
+  return c;
+}
+function mediaNode(b, ui, innerW) {
+  const t = ui.theme;
+  const c = new Container();
+  const imgW = Math.min(b.width ?? 200, Math.round(innerW * 0.4));
+  const imgH = b.width && b.height ? Math.round(imgW * b.height / b.width) : Math.round(imgW * 0.62);
+  const gap = 18;
+  const textW = innerW - imgW - gap;
+  const side = b.side ?? "left";
+  const imgX = side === "left" ? -innerW / 2 + imgW / 2 : innerW / 2 - imgW / 2;
+  const textCx = side === "left" ? -innerW / 2 + imgW + gap + textW / 2 : -innerW / 2 + textW / 2;
+  const title = b.title ? new Text({ text: ui.t(b.title), style: { fontFamily: t.type.family, fontSize: 15, fill: t.color.text, fontWeight: "800" } }) : null;
+  title?.anchor.set(0, 0);
+  const para = richParagraphNode(ui.t(b.text), ui, textW, { fontFamily: t.type.family, fontSize: 14, fill: t.color.textDim, lineHeight: 19 });
+  const titleH = title ? title.height + 8 : 0;
+  const textH = titleH + para.height;
+  const h = Math.max(imgH, textH);
+  const img = imageBoxNode(b.src, imgW, imgH, ui);
+  img.position.set(imgX, 0);
+  c.addChild(img);
+  if (title) {
+    title.position.set(textCx - textW / 2, -textH / 2);
+    c.addChild(title);
+  }
+  para.position.set(textCx, -textH / 2 + titleH + para.height / 2);
+  c.addChild(para);
+  c.addChild(new Graphics().rect(-innerW / 2, -h / 2, 1, h).fill({ color: 16777215, alpha: 0 }));
+  return c;
+}
+function imageBoxNode(src, w, h, ui) {
+  const t = ui.theme;
+  const box = new Container();
+  const placeholder = new Graphics().rect(-w / 2, -h / 2, w, h).fill({ color: t.color.surfaceAlt, alpha: 0.5 });
+  box.addChild(placeholder);
+  if (typeof Image !== "undefined") {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      if (box.destroyed) return;
+      try {
+        const sp = new Sprite(Texture.from(img));
+        sp.anchor.set(0.5);
+        sp.width = w;
+        sp.height = h;
+        box.addChild(sp);
+        placeholder.visible = false;
+      } catch {
+      }
+    };
+    img.onerror = () => {
+    };
+    img.src = src;
+  }
+  return box;
+}
+function paytableNode(b, ui, innerW) {
+  const want = Math.max(1, b.columns ?? 1);
+  const fit = Math.max(1, Math.floor(innerW / 170));
+  const cols = Math.max(1, Math.min(want, fit, b.rows.length || 1));
+  return cols <= 1 ? paytableList(b, ui, innerW) : paytableGrid(b, ui, innerW, cols);
+}
+function paytableList(b, ui, innerW) {
+  const t = ui.theme;
+  const c = new Container();
+  const rowH = 44;
+  const totalH = Math.max(b.rows.length * rowH, rowH);
+  const hasIcons = b.rows.some((r) => r.icon);
+  const left = -innerW / 2;
+  const symbolX = left + (hasIcons ? 48 : 4);
+  b.rows.forEach((r, i) => {
+    const cy = -totalH / 2 + rowH / 2 + i * rowH;
+    if (i > 0) {
+      c.addChild(new Graphics().moveTo(left, cy - rowH / 2).lineTo(innerW / 2, cy - rowH / 2).stroke({ width: 1, color: t.color.textDim, alpha: 0.15 }));
+    }
+    if (r.icon) {
+      const icon = imageBoxNode(r.icon, 36, 36, ui);
+      icon.position.set(left + 22, cy);
+      c.addChild(icon);
+    }
+    const sym = new Text({ text: ui.t(r.symbol ?? ""), style: { fontFamily: t.type.family, fontSize: 15, fill: t.color.text, fontWeight: "700" } });
+    sym.anchor.set(0, 0.5);
+    sym.position.set(symbolX, cy);
+    const pay = new Text({ text: r.payouts, style: { fontFamily: t.type.family, fontSize: 14, fill: t.color.accent, fontWeight: "700" } });
+    pay.anchor.set(1, 0.5);
+    pay.position.set(innerW / 2, cy);
+    c.addChild(sym, pay);
+  });
+  return c;
+}
+function paytableGrid(b, ui, innerW, cols) {
+  const c = new Container();
+  const cellW = innerW / cols;
+  const gridRows = Math.ceil(b.rows.length / cols);
+  const lineH = 17;
+  const maxLines = b.rows.reduce((m, r) => Math.max(m, (r.payouts || "").split("\n").length), 1);
+  const cellH = Math.max(48, 14 + maxLines * lineH);
+  const totalH = gridRows * cellH;
+  b.rows.forEach((r, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const cell = paytableCell(r, ui, cellW, lineH);
+    cell.position.set(-innerW / 2 + col * cellW + cellW / 2, -totalH / 2 + row * cellH + cellH / 2);
+    c.addChild(cell);
+  });
+  return c;
+}
+function paytableCell(r, ui, cellW, lineH) {
+  const t = ui.theme;
+  const cell = new Container();
+  const lx = -cellW / 2 + 10;
+  let leftW = 0;
+  if (r.icon) {
+    const icon = imageBoxNode(r.icon, 40, 40, ui);
+    icon.position.set(lx + 20, 0);
+    cell.addChild(icon);
+    leftW = 52;
+  } else if (r.symbol) {
+    const sym = new Text({ text: ui.t(r.symbol), style: { fontFamily: t.type.family, fontSize: 14, fontWeight: "800", fill: t.color.text } });
+    sym.anchor.set(0, 0.5);
+    sym.position.set(lx, 0);
+    cell.addChild(sym);
+    leftW = sym.width + 14;
+  }
+  const lines = (r.payouts || "").split("\n");
+  const blockH = lines.length * lineH;
+  const px = lx + leftW;
+  lines.forEach((ln, j) => {
+    const ly = -blockH / 2 + lineH / 2 + j * lineH;
+    const ci = ln.indexOf(":");
+    if (ci >= 0) {
+      const label = new Text({ text: ln.slice(0, ci + 1), style: { fontFamily: t.type.family, fontSize: 13, fontWeight: "800", fill: t.color.text } });
+      label.anchor.set(0, 0.5);
+      label.position.set(px, ly);
+      const val = new Text({ text: ln.slice(ci + 1), style: { fontFamily: t.type.family, fontSize: 13, fontWeight: "700", fill: t.color.accent } });
+      val.anchor.set(0, 0.5);
+      val.position.set(px + label.width + 4, ly);
+      cell.addChild(label, val);
+    } else {
+      const txt = new Text({ text: ln, style: { fontFamily: t.type.family, fontSize: 13, fontWeight: "700", fill: t.color.accent } });
+      txt.anchor.set(0, 0.5);
+      txt.position.set(px, ly);
+      cell.addChild(txt);
+    }
+  });
+  return cell;
+}
+var MARGIN = 16;
+var HEADER_H = 60;
+var INSET = 22;
+var LIGHT = {
+  surface: "#ffffff",
+  surfaceAlt: "#eef1f6",
+  text: "#181b20",
+  textDim: "#5b6472",
+  border: "#000000",
+  accent: "#d99000"
+};
+var MenuView = class extends ControlView {
+  constructor(panel, controls, blocks, ui, ticker, opts = {}) {
+    super(panel, ui);
+    this.panel = panel;
+    this.controls = controls;
+    this.blocks = blocks;
+    this.ticker = ticker;
+    this.opts = opts;
+    this.zIndex = 120;
+    this.titleKey = opts.title ?? "Menu";
+    this.maxWidth = opts.maxWidth ?? 1600;
+    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT.surface, surfaceAlt: LIGHT.surfaceAlt, text: LIGHT.text, textDim: LIGHT.textDim, accent: LIGHT.accent } };
+    this.lightUi = new Proxy(ui, { get: (t, p) => p === "theme" ? lightTheme : Reflect.get(t, p) });
+    this.backdrop.eventMode = "static";
+    this.backdrop.on("pointertap", () => this.panel.closePanel());
+    this.title = new Text({ text: ui.t(this.titleKey), style: { fontFamily: ui.theme.type.family, fontSize: 24, fill: LIGHT.text, fontWeight: "800", letterSpacing: 1 } });
+    this.title.anchor.set(0, 0.5);
+    this.buildClose();
+    this.viewport.addChild(this.catcher, this.content);
+    this.viewport.mask = this.maskG;
+    this.catcher.eventMode = "static";
+    this.catcher.on("pointerdown", this.onDown);
+    this.catcher.on("globalpointermove", this.onMove);
+    this.catcher.on("pointerup", this.onUp);
+    this.catcher.on("pointerupoutside", this.onUp);
+    this.addChild(this.backdrop, this.card, this.viewport, this.maskG, this.headerBar, this.title, this.closeBtn, this.dropdownLayer);
+    this.rebuildContent();
+    this.applyOpen(this.panel.isOpen);
+    this.disposers.push(
+      this.panel.state.subscribe(() => this.applyOpen(this.panel.isOpen)),
+      this.ui.locale.subscribe(() => {
+        if (this.destroyed) return;
+        this.title.text = this.ui.t(this.titleKey);
+        this.rebuildContent();
+      })
+    );
+  }
+  panel;
+  controls;
+  blocks;
+  ticker;
+  opts;
+  backdrop = new Graphics();
+  card = new Graphics();
+  headerBar = new Graphics();
+  title;
+  closeBtn = new Container();
+  viewport = new Container();
+  maskG = new Graphics();
+  catcher = new Graphics();
+  content = new Container();
+  /** Unclipped layer above the scroll mask for open select dropdowns. */
+  dropdownLayer = new Container();
+  childViews = [];
+  titleKey;
+  maxWidth;
+  /** `ui` proxy with a light theme — feeds the shared block renderer dark-on-white. */
+  lightUi;
+  vpW = 0;
+  vpH = 0;
+  scrollY = 0;
+  contentH = 0;
+  dragging = false;
+  lastY = 0;
+  wheelHandler;
+  buildClose() {
+    const r = 22;
+    const bg = new Graphics().circle(0, 0, r).fill({ color: LIGHT.border });
+    const x = new Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
+    this.closeBtn.addChild(bg, x);
+    this.closeBtn.eventMode = "static";
+    this.closeBtn.cursor = "pointer";
+    this.closeBtn.hitArea = new Rectangle(-r, -r, r * 2, r * 2);
+    this.closeBtn.on("pointertap", () => this.panel.closePanel());
+  }
+  rebuildContent() {
+    for (const v of this.childViews) v.dispose();
+    this.childViews.length = 0;
+    for (const child of this.content.removeChildren()) child.destroy();
+    const bodyW = this.vpW > 0 ? this.vpW : Math.min(this.maxWidth - INSET * 2, 520);
+    const col = buildBlockColumn(this.blocks, this.controls, this.lightUi, this.ticker, bodyW, { controlSkins: this.opts.controlSkins, dropdownLayer: this.dropdownLayer });
+    this.childViews = col.views;
+    this.content.addChild(...col.content.removeChildren());
+    this.content.x = bodyW / 2;
+    this.contentH = col.height;
+    this.clampScroll();
+  }
+  applyLayout(screen) {
+    const W = screen.width;
+    const H = screen.height;
+    this.position.set(0, 0);
+    this.scale.set(1);
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
+    this.backdrop.hitArea = new Rectangle(0, 0, W, H);
+    const marginX = Math.max(MARGIN, Math.round(W * 0.05));
+    const cardW = Math.min(W - marginX * 2, this.maxWidth);
+    const cardH = H - MARGIN * 2;
+    const cx = (W - cardW) / 2;
+    const cy = MARGIN;
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
+    this.headerBar.clear().roundRect(cx, cy, cardW, HEADER_H, 14).fill({ color: LIGHT.surfaceAlt }).moveTo(cx + INSET, cy + HEADER_H).lineTo(cx + cardW - INSET, cy + HEADER_H).stroke({ width: 1, color: LIGHT.textDim, alpha: 0.4 });
+    this.title.position.set(cx + INSET, cy + HEADER_H / 2);
+    this.closeBtn.position.set(cx + cardW - INSET - 8, cy + HEADER_H / 2);
+    const vpX = cx + INSET;
+    const vpY = cy + HEADER_H + INSET;
+    const newVpW = cardW - INSET * 2;
+    this.vpW = newVpW;
+    this.vpH = cardH - HEADER_H - INSET * 2;
+    this.viewport.position.set(vpX, vpY);
+    this.maskG.clear().rect(vpX, vpY, this.vpW, this.vpH).fill({ color: 16777215 });
+    this.catcher.clear().rect(0, 0, this.vpW, this.vpH).fill({ color: 16777215, alpha: 1e-4 });
+    this.catcher.hitArea = new Rectangle(0, 0, this.vpW, this.vpH);
+    this.rebuildContent();
+    this.clampScroll();
+  }
+  /** Close any open select dropdown (so scrolling/closing doesn't strand it). */
+  closeSelects() {
+    for (const c of this.controls) {
+      const sc = c;
+      if (sc.isOpen && typeof sc.closeList === "function") sc.closeList();
+    }
+  }
+  onDown = (e) => {
+    this.dragging = true;
+    this.lastY = e.global.y;
+    this.closeSelects();
+  };
+  onMove = (e) => {
+    if (!this.dragging) return;
+    this.scrollY += e.global.y - this.lastY;
+    this.lastY = e.global.y;
+    this.clampScroll();
+  };
+  onUp = () => {
+    this.dragging = false;
+  };
+  clampScroll() {
+    const min = Math.min(0, this.vpH - this.contentH);
+    this.scrollY = Math.max(min, Math.min(0, this.scrollY));
+    this.content.y = this.scrollY;
+  }
+  applyOpen(open) {
+    this.visible = open;
+    this.eventMode = open ? "static" : "none";
+    if (open) {
+      this.scrollY = 0;
+      this.clampScroll();
+      if (!this.wheelHandler && typeof window !== "undefined") {
+        this.wheelHandler = (e) => {
+          this.closeSelects();
+          this.scrollY -= e.deltaY;
+          this.clampScroll();
+        };
+        window.addEventListener("wheel", this.wheelHandler, { passive: true });
+      }
+    } else {
+      this.closeSelects();
+      if (this.wheelHandler && typeof window !== "undefined") {
+        window.removeEventListener("wheel", this.wheelHandler);
+        this.wheelHandler = void 0;
+      }
+    }
+  }
+  dispose() {
+    if (this.wheelHandler && typeof window !== "undefined") window.removeEventListener("wheel", this.wheelHandler);
+    for (const v of this.childViews) v.dispose();
+    this.childViews.length = 0;
+    super.dispose();
+  }
+};
+var CAP_DY = -20;
+function fmtDuration(totalSec) {
+  const s = Math.max(0, Math.floor(totalSec));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = String(s % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+var ReadoutView = class extends ControlView {
+  constructor(ro, ui, ticker, opts = {}) {
+    super(ro, ui);
+    this.ro = ro;
+    this.ticker = ticker;
+    const t = ui.theme;
+    const inline = opts.inline ?? false;
+    this.prefix = opts.prefix ?? false;
+    const fill = opts.fill ?? (opts.mono ? "#ffffff" : t.color.text);
+    this.baseFill = this.prefix ? opts.fill ?? "#ffffff" : fill;
+    this.accentFill = t.color.accent;
+    if (this.prefix) {
+      this.valueText = new Text({
+        text: "",
+        style: {
+          fontFamily: t.type.family,
+          fontSize: 18,
+          fill: opts.fill ?? "#ffffff",
+          fontWeight: "600",
+          dropShadow: { color: 0, alpha: 0.7, blur: 4, distance: 0, angle: 0 }
+        }
+      });
+      this.valueText.alpha = opts.fill ? 1 : 0.92;
+      this.valueText.anchor.set(0, 0);
+      this.addChild(this.valueText);
+      this.disposers.push(
+        this.ro.value.subscribe(() => this.render()),
+        this.ui.locale.subscribe(() => {
+          if (!this.destroyed) this.render();
+        }),
+        this.ro.emphasized.subscribe(() => this.applyEmphasis())
+      );
+      if (this.ro.currency) this.disposers.push(this.ro.currency.subscribe(() => this.render()));
+      if (this.ro.kind === "duration") {
+        this.tick = (tk) => this.ro.tick(tk.deltaMS / 1e3);
+        this.ticker.add(this.tick);
+      }
+      this.applyEmphasis();
+      this.render();
+      return;
+    }
+    if (ro.label) {
+      this.caption = new Text({
+        text: ui.t(ro.label).toUpperCase(),
+        style: { fontFamily: t.type.family, fontSize: 12, fill, fontWeight: "700", letterSpacing: inline ? 0.8 : 2 }
+      });
+      this.caption.alpha = inline ? 0.65 : 0.55;
+      if (inline) {
+        this.caption.anchor.set(1, 0.5);
+        this.caption.position.set(-7, 0);
+      } else {
+        this.caption.anchor.set(0.5, 1);
+        this.caption.y = CAP_DY;
+      }
+      this.addChild(this.caption);
+    }
+    this.valueText = new Text({ text: "", style: { fontFamily: t.type.family, fontSize: inline ? 20 : 26, fill, fontWeight: "800" } });
+    if (inline) {
+      this.valueText.anchor.set(0, 0.5);
+      this.valueText.position.set(this.caption ? 7 : 0, 0);
+    } else {
+      this.valueText.anchor.set(0.5, 0.5);
+    }
+    this.addChild(this.valueText);
+    this.disposers.push(
+      this.ro.value.subscribe(() => this.render()),
+      this.ui.locale.subscribe(() => {
+        if (this.destroyed) return;
+        if (this.caption && this.ro.label) this.caption.text = this.ui.t(this.ro.label).toUpperCase();
+      })
+    );
+    if (this.ro.currency) this.disposers.push(this.ro.currency.subscribe(() => this.render()));
+    this.disposers.push(this.ro.emphasized.subscribe(() => this.applyEmphasis()));
+    if (this.ro.kind === "duration") {
+      this.tick = (tk) => this.ro.tick(tk.deltaMS / 1e3);
+      this.ticker.add(this.tick);
+    }
+    this.applyEmphasis();
+    this.render();
+  }
+  ro;
+  ticker;
+  caption;
+  valueText;
+  tick;
+  prefix;
+  /** Normal + accent value colours for the `emphasized` (modified) tint. */
+  baseFill;
+  accentFill;
+  /** Tint the value in the theme accent while the readout is emphasized (modified). */
+  applyEmphasis() {
+    if (this.destroyed) return;
+    this.valueText.style.fill = this.ro.emphasized.get() ? this.accentFill : this.baseFill;
+  }
+  render() {
+    const v = this.ro.value.get();
+    let text;
+    switch (this.ro.kind) {
+      case "currency":
+        text = this.ro.currency ? formatAmount(v, this.ro.currency.get(), { signed: this.ro.signed }) : String(v);
+        break;
+      case "percent":
+        text = `${v.toFixed(this.ro.decimals)}%`;
+        break;
+      case "duration":
+        text = fmtDuration(v);
+        break;
+      default:
+        text = String(v);
+    }
+    this.valueText.text = this.prefix && this.ro.label ? `${this.ui.t(this.ro.label)}: ${text}` : text;
+  }
+  dispose() {
+    if (this.tick) this.ticker.remove(this.tick);
+    super.dispose();
+  }
+};
+var INSET2 = 24;
+var BTN_H = 52;
+var BTN_GAP = 14;
+var ROW_GAP = 16;
+var LIGHT2 = {
+  surface: "#ffffff",
+  surfaceAlt: "#eef1f6",
+  text: "#181b20",
+  textDim: "#5b6472",
+  border: "#000000",
+  primary: "#0a0a0a",
+  primaryText: "#ffffff"
+};
+var DialogView = class extends ControlView {
+  constructor(panel, blocks, actions, ui, ticker, opts = {}) {
+    super(panel, ui);
+    this.panel = panel;
+    this.blocks = blocks;
+    this.actions = actions;
+    this.ticker = ticker;
+    this.opts = opts;
+    this.zIndex = 130;
+    this.maxWidth = opts.maxWidth ?? 520;
+    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT2.surface, surfaceAlt: LIGHT2.surfaceAlt, text: LIGHT2.text, textDim: LIGHT2.textDim } };
+    this.lightUi = new Proxy(ui, { get: (t, p) => p === "theme" ? lightTheme : Reflect.get(t, p) });
+    this.backdrop.eventMode = "static";
+    this.backdrop.on("pointertap", () => {
+      if (!this.ui.noticeBlocking.get()) this.panel.closePanel();
+    });
+    this.buildClose();
+    this.content.mask = this.maskG;
+    this.addChild(this.backdrop, this.card, this.content, this.maskG, this.buttons, this.closeBtn);
+    this.applyOpen(this.panel.isOpen);
+    this.disposers.push(
+      this.panel.state.subscribe(() => this.applyOpen(this.panel.isOpen)),
+      // hide the ✕ when the open notice is blocking (re-renders on toggle)
+      this.ui.noticeBlocking.subscribe(() => {
+        this.closeBtn.visible = !this.ui.noticeBlocking.get();
+      }),
+      this.blocks.subscribe(() => {
+        if (!this.destroyed) this.relayout();
+      }),
+      this.actions.subscribe(() => {
+        if (!this.destroyed) this.relayout();
+      }),
+      this.ui.locale.subscribe(() => {
+        if (!this.destroyed) this.relayout();
+      })
+    );
+  }
+  panel;
+  blocks;
+  actions;
+  ticker;
+  opts;
+  backdrop = new Graphics();
+  card = new Graphics();
+  closeBtn = new Container();
+  content = new Container();
+  maskG = new Graphics();
+  buttons = new Container();
+  childViews = [];
+  screen;
+  maxWidth;
+  /** `ui` proxy with a light theme — so the shared block renderer draws dark-on-white
+   *  content inside the white modal card (Figma "default" dialog look). */
+  lightUi;
+  buildClose() {
+    const r = 22;
+    const bg = new Graphics().circle(0, 0, r).fill({ color: LIGHT2.primary });
+    const x = new Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
+    this.closeBtn.addChild(bg, x);
+    this.closeBtn.eventMode = "static";
+    this.closeBtn.cursor = "pointer";
+    this.closeBtn.hitArea = new Rectangle(-r, -r, r * 2, r * 2);
+    this.closeBtn.on("pointertap", () => this.panel.closePanel());
+  }
+  applyLayout(screen) {
+    this.screen = screen;
+    this.position.set(0, 0);
+    this.scale.set(1);
+    this.relayout();
+  }
+  relayout() {
+    const s = this.screen;
+    if (!s) return;
+    if (!this.panel.isOpen) return;
+    const W = s.width;
+    const H = s.height;
+    for (const v of this.childViews) v.dispose();
+    this.childViews.length = 0;
+    for (const ch of this.content.removeChildren()) ch.destroy();
+    const cardW = Math.min(W - 48, this.maxWidth);
+    const innerW = cardW - INSET2 * 2;
+    const col = buildBlockColumn(this.blocks.get(), [], this.lightUi, this.ticker, innerW, { controlSkins: this.opts.controlSkins });
+    this.childViews = col.views;
+    const kids = col.content.removeChildren();
+    if (kids.length) this.content.addChild(...kids);
+    const contentH = col.height;
+    const buttonsH = this.buildButtons(innerW);
+    const wantH = contentH + (buttonsH ? ROW_GAP + buttonsH + INSET2 : INSET2);
+    const cardH = Math.min(H - 48, wantH);
+    const cx = (W - cardW) / 2;
+    const cy = (H - cardH) / 2;
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
+    this.backdrop.hitArea = new Rectangle(0, 0, W, H);
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT2.surface }).stroke({ width: 2.5, color: LIGHT2.border });
+    const bodyH = cardH - (buttonsH ? ROW_GAP + buttonsH + INSET2 : INSET2);
+    this.content.x = cx + cardW / 2;
+    this.content.y = cy;
+    this.maskG.clear().rect(cx, cy, cardW, Math.max(0, bodyH)).fill({ color: 16777215 });
+    this.buttons.position.set(cx + cardW / 2, cy + cardH - INSET2 / 2 - buttonsH / 2);
+    this.closeBtn.position.set(cx + cardW - 8, cy + 8);
+  }
+  /** Build the footer buttons from `noticeActions` into a centered row (shrunk to
+   *  fit if needed). Returns the row height (0 when there are no actions). */
+  buildButtons(innerW) {
+    for (const b of this.buttons.removeChildren()) b.destroy();
+    const acts = this.ui.noticeActions.get();
+    if (!acts.length) return 0;
+    const made = acts.map((a, i) => this.makeButton(a, a.variant ?? (i === 0 ? "primary" : "secondary"), innerW));
+    let total = made.reduce((sum, m) => sum + m.width, 0) + BTN_GAP * (made.length - 1);
+    if (total > innerW) {
+      const scale = innerW / total;
+      for (const m of made) {
+        m.width *= scale;
+        this.drawButton(m.bg, m.variant, m.width);
+        m.node.hitArea = new Rectangle(-m.width / 2, -BTN_H / 2, m.width, BTN_H);
+      }
+      total = made.reduce((sum, m) => sum + m.width, 0) + BTN_GAP * (made.length - 1);
+    }
+    let x = -total / 2;
+    for (const m of made) {
+      m.node.position.set(x + m.width / 2, 0);
+      x += m.width + BTN_GAP;
+      this.buttons.addChild(m.node);
+    }
+    return BTN_H;
+  }
+  makeButton(action, variant, innerW) {
+    const t = this.ui.theme;
+    const node = new Container();
+    const bg = new Graphics();
+    const label = new Text({
+      text: this.ui.t(action.label),
+      style: { fontFamily: t.type.family, fontSize: 18, fontWeight: "800", fill: variant === "primary" ? LIGHT2.primaryText : LIGHT2.text, letterSpacing: 0.5 }
+    });
+    label.anchor.set(0.5);
+    node.addChild(bg, label);
+    const width = Math.min(innerW, Math.max(140, label.width + 56));
+    this.drawButton(bg, variant, width);
+    node.eventMode = "static";
+    node.cursor = "pointer";
+    node.hitArea = new Rectangle(-width / 2, -BTN_H / 2, width, BTN_H);
+    node.on("pointertap", () => {
+      action.onSelect?.();
+      if (action.emit) this.ui.bus.emit("buttonActivated", { id: action.emit });
+      if (!action.keepOpen) this.panel.closePanel();
+    });
+    return { node, bg, width, variant };
+  }
+  drawButton(bg, variant, width) {
+    bg.clear();
+    if (variant === "primary") {
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT2.primary });
+    } else {
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT2.surface }).stroke({ width: 2.5, color: LIGHT2.border });
+    }
+  }
+  applyOpen(open) {
+    this.visible = open;
+    this.eventMode = open ? "static" : "none";
+    this.closeBtn.visible = !this.ui.noticeBlocking.get();
+    if (open) this.relayout();
+  }
+  dispose() {
+    for (const v of this.childViews) v.dispose();
+    this.childViews.length = 0;
+    super.dispose();
+  }
+};
+function easeInOutCubic(p) {
+  return p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
+}
+var OpenUIPixi = class {
+  constructor(ui, opts = {}) {
+    this.ui = ui;
+    this.opts = opts;
+  }
+  ui;
+  opts;
+  root = new Container();
+  views = [];
+  /** Full-screen overlays (e.g. the autoplay drawer) that own their own layout. */
+  overlays = [];
+  disposers = [];
+  _eventLog;
+  /** Show/hide slide: each interactive view slides toward its anchored edge (bottom
+   *  controls down, top up — behind the status-bar plaque). Views stay direct children
+   *  of `root` (introspection bounds unchanged); only their y moves, and the
+   *  ref-counted input lock makes them non-interactive while moving/hidden. */
+  slideProg = 0;
+  // 0 = shown · 1 = fully hidden (set per `intro` on mount)
+  slideTarget = 1;
+  slideHeld = false;
+  lastScreenH = 1080;
+  appTicker;
+  slideTickFn;
+  slideBaseY = /* @__PURE__ */ new Map();
+  slideSign = /* @__PURE__ */ new Map();
+  /** Buy-feature ⇄ total-win swap: only one shows at a time (see `setupBonusSwap`). */
+  bonusView;
+  totalWinView;
+  fadeFns = /* @__PURE__ */ new Map();
+  /** The bus event log backing `window.__OPENUI__.events` (available after mount). */
+  get eventLog() {
+    return this._eventLog;
+  }
+  mount(app) {
+    const { stage, renderer, ticker } = app;
+    this.appTicker = ticker;
+    stage.sortableChildren = true;
+    this.root.zIndex = 1e4;
+    this.root.sortableChildren = true;
+    stage.addChild(this.root);
+    const ic = this.opts.icons ?? {};
+    const spinView = new SpinView(this.ui.spin, this.ui, ticker, this.opts.spinSkin);
+    const balanceView = new ValueDisplayView(this.ui.balance, this.ui, ticker, this.opts.gsap);
+    const betView = new ValueDisplayView(this.ui.bet, this.ui, ticker, this.opts.gsap);
+    const settingsView = new ButtonView(this.ui.settingsButton, this.ui, ticker, {
+      shape: "circle",
+      radius: 40,
+      glyph: "menu",
+      iconTexture: ic.settingsIdle,
+      iconTarget: 88,
+      dark: true
+      // Figma ☰: solid black circle, white bars, no ring
+    });
+    settingsView.zIndex = 5;
+    const menuView = this.opts.menu === false ? void 0 : this.buildMenu(ticker);
+    const turboView = new TurboView(this.ui.turbo, this.ui, ticker, {
+      offTexture: ic.turboOff,
+      onTexture: ic.turboOn,
+      modeTextures: ic.turboModes,
+      target: 79
+    });
+    const spinOff = this.ui.spin.layout.offset ?? [0, 0];
+    const autoOff = this.ui.autoplay.layout.offset ?? [0, 0];
+    const picker = this.opts.autoplayPicker ?? "drawer";
+    const autoplayView = new AutoplayView(this.ui.autoplay, this.ui, ticker, {
+      idleTexture: ic.autoIdle,
+      activeTexture: ic.autoActive,
+      target: 73,
+      picker,
+      arcCenter: { x: spinOff[0] - autoOff[0], y: spinOff[1] - autoOff[1] },
+      arcStepDeg: 22
+    });
+    autoplayView.zIndex = 20;
+    const bonusView = new ButtonView(this.ui.bonusButton, this.ui, ticker, { shape: "circle", radius: 60, iconTexture: ic.bonus, iconTarget: 130 });
+    const betPlusView = new ButtonView(this.ui.betPlus, this.ui, ticker, { shape: "circle", radius: 30, iconTexture: ic.betPlus, iconTarget: 64 });
+    const betMinusView = new ButtonView(this.ui.betMinus, this.ui, ticker, { shape: "circle", radius: 30, iconTexture: ic.betMinus, iconTarget: 64 });
+    const totalWinView = new ValueDisplayView(this.ui.totalWin, this.ui, ticker, this.opts.gsap);
+    this.bonusView = bonusView;
+    this.totalWinView = totalWinView;
+    const muteView = new ButtonView(this.ui.muteButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "speaker", iconTarget: 60, mono: true });
+    const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "fullscreen", iconTarget: 60, mono: true });
+    muteView.zIndex = 65;
+    fullscreenView.zIndex = 65;
+    const roOpts = { prefix: true, fill: this.opts.readoutColor };
+    const rtpView = new ReadoutView(this.ui.rtp, this.ui, ticker, roOpts);
+    const netView = new ReadoutView(this.ui.netPosition, this.ui, ticker, roOpts);
+    const timerView = new ReadoutView(this.ui.sessionTimer, this.ui, ticker, roOpts);
+    const entries = [
+      [this.ui.spin.id, spinView],
+      [this.ui.balance.id, balanceView],
+      [this.ui.bet.id, betView],
+      [this.ui.settingsButton.id, settingsView],
+      [this.ui.turbo.id, turboView],
+      [this.ui.autoplay.id, autoplayView],
+      [this.ui.bonusButton.id, bonusView],
+      [this.ui.totalWin.id, totalWinView],
+      [this.ui.betPlus.id, betPlusView],
+      [this.ui.betMinus.id, betMinusView],
+      [this.ui.muteButton.id, muteView],
+      [this.ui.fullscreenButton.id, fullscreenView]
+    ];
+    entries.push([this.ui.rtp.id, rtpView]);
+    entries.push([this.ui.netPosition.id, netView]);
+    entries.push([this.ui.sessionTimer.id, timerView]);
+    const viewById = /* @__PURE__ */ new Map();
+    const idByView = /* @__PURE__ */ new Map();
+    for (const [id, view] of entries) {
+      view.visible = !this.ui.hidden.has(id);
+      this.root.addChild(view);
+      this.views.push(view);
+      viewById.set(id, view);
+      idByView.set(view, id);
+    }
+    this.disposers.push(
+      this.ui.on("visibilityChanged", ({ id, hidden }) => {
+        const v = viewById.get(id);
+        if (v) v.visible = !hidden;
+      })
+    );
+    this.disposers.push(this.ui.muted.subscribe((m) => muteView.setGlyph(m ? "speaker-mute" : "speaker")));
+    if (typeof document !== "undefined") {
+      this.disposers.push(
+        this.ui.bus.on("buttonActivated", ({ id }) => {
+          if (id !== "fullscreen") return;
+          const el = app.canvas.parentElement ?? document.documentElement;
+          if (document.fullscreenElement) void document.exitFullscreen?.();
+          else void el.requestFullscreen?.();
+        })
+      );
+      const onFsChange = () => fullscreenView.setGlyph(document.fullscreenElement ? "fullscreen-exit" : "fullscreen");
+      document.addEventListener("fullscreenchange", onFsChange);
+      this.disposers.push(() => document.removeEventListener("fullscreenchange", onFsChange));
+    }
+    if (typeof window !== "undefined") {
+      let keyHeld = false;
+      const onKeyDown = (e) => {
+        if (e.code !== "Space" && e.key !== "Enter") return;
+        if (!this.ui.spin.allowKeyboard.get() || e.repeat || keyHeld) return;
+        keyHeld = true;
+        e.preventDefault();
+        if (this.ui.spin.interactable) this.ui.spin.activate();
+      };
+      const onKeyUp = (e) => {
+        if (e.code === "Space" || e.key === "Enter") keyHeld = false;
+      };
+      window.addEventListener("keydown", onKeyDown);
+      window.addEventListener("keyup", onKeyUp);
+      this.disposers.push(() => {
+        window.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("keyup", onKeyUp);
+      });
+    }
+    if (menuView) {
+      this.root.addChild(menuView);
+      this.overlays.push(menuView);
+    }
+    if (picker === "drawer") {
+      const drawer = new AutoplayDrawerView(this.ui.autoplay, this.ui, ticker);
+      this.root.addChild(drawer);
+      this.overlays.push(drawer);
+    }
+    const dialog = new DialogView(this.ui.noticePanel, this.ui.noticeBlocks, this.ui.noticeActions, this.ui, ticker, { controlSkins: this.opts.controlSkins });
+    this.root.addChild(dialog);
+    this.overlays.push(dialog);
+    const replayBadge = new Container();
+    const replayBg = new Graphics();
+    const replayText = new Text({ text: this.ui.t("openui.replay").toUpperCase(), style: { fontFamily: this.ui.theme.type.family, fontSize: 16, fontWeight: "800", fill: 16777215, letterSpacing: 2 } });
+    replayText.anchor.set(0.5);
+    replayBadge.addChild(replayBg, replayText);
+    replayBadge.zIndex = 310;
+    replayBadge.visible = this.ui.replay.get();
+    this.root.addChild(replayBadge);
+    this.overlays.push({
+      applyLayout: (s) => {
+        const w = replayText.width + 36;
+        const h = 32;
+        replayBg.clear().roundRect(-w / 2, -h / 2, w, h, h / 2).fill({ color: 789776 }).stroke({ width: 2, color: 16777215 });
+        replayBadge.position.set(s.width / 2, 40);
+      },
+      dispose: () => {
+        if (!replayBadge.destroyed) replayBadge.destroy({ children: true });
+      }
+    });
+    this.disposers.push(
+      this.ui.replay.subscribe((v) => {
+        replayBadge.visible = v;
+      }),
+      this.ui.locale.subscribe(() => {
+        if (!replayBadge.destroyed) replayText.text = this.ui.t("openui.replay").toUpperCase();
+      })
+    );
+    const applyLayout = () => {
+      const screen = this.ui.screen.get();
+      this.slideBaseY.clear();
+      this.slideSign.clear();
+      for (const v of this.views) {
+        v.applyLayout(screen);
+        const anchor = this.ui.control(idByView.get(v) ?? "")?.layout.anchor ?? "bottom-center";
+        this.slideBaseY.set(v, v.y);
+        this.slideSign.set(v, anchor.startsWith("top") ? -1 : 1);
+      }
+      this.lastScreenH = screen.height;
+      this.applySlide();
+      for (const o of this.overlays) o.applyLayout(screen);
+    };
+    const onResize = () => {
+      this.ui.setScreen(app.screen.width, app.screen.height);
+    };
+    renderer.on("resize", onResize);
+    const unsubScreen = this.ui.screen.subscribe(applyLayout);
+    onResize();
+    applyLayout();
+    const intro = this.opts.intro ?? "shown";
+    if (intro === "shown") {
+      this.slideProg = 0;
+      this.applySlide();
+    } else {
+      this.slideProg = 1;
+      this.applySlide();
+      this.ui.lock();
+      this.slideHeld = true;
+      if (intro === "slide-in") this.setControlsVisible(true);
+    }
+    this.disposers.push(() => renderer.off("resize", onResize), unsubScreen);
+    this.setupBonusSwap();
+    this._eventLog = new EventLog(this.ui.bus);
+    if (this.opts.expose ?? true) this.expose();
+  }
+  /**
+   * Wire the buy-feature ⇄ total-win swap. In base play the buy button shows (unless
+   * hidden by config/jurisdiction); once the spin button enters free-spins mode
+   * (`setFreeSpins(n > 0)` — you "can't buy" mid-bonus) the buy button fades out and
+   * the localized total-win counter fades in over the same slot, then back on exit.
+   */
+  setupBonusSwap() {
+    const bonus = this.bonusView;
+    const tw = this.totalWinView;
+    if (!bonus || !tw) return;
+    const apply = (inBonus, animate) => {
+      const bonusShouldShow = !inBonus && !this.ui.hidden.has(this.ui.bonusButton.id);
+      if (animate) {
+        if (inBonus) {
+          tw.visible = true;
+          tw.alpha = 0;
+          this.fadeTo(tw, 1, 220);
+          this.fadeTo(bonus, 0, 160, () => bonus.visible = false);
+        } else {
+          if (bonusShouldShow) {
+            bonus.visible = true;
+            bonus.alpha = 0;
+            this.fadeTo(bonus, this.ui.bonusButton.interactable ? 1 : 0.4, 220);
+          }
+          this.fadeTo(tw, 0, 160, () => tw.visible = false);
+        }
+      } else {
+        this.stopFade(bonus);
+        this.stopFade(tw);
+        bonus.visible = bonusShouldShow;
+        bonus.alpha = this.ui.bonusButton.interactable ? 1 : 0.4;
+        tw.visible = inBonus;
+        tw.alpha = inBonus ? 1 : 0;
+      }
+    };
+    apply(this.ui.spin.freeSpins.get() > 0, false);
+    this.disposers.push(this.ui.spin.freeSpins.subscribe((n) => apply(n > 0, true)));
+  }
+  /** Fade a view's alpha to `to` over `ms` (wall-clock paced); cancels any prior fade
+   *  on the same view. `onDone` runs once when it settles. */
+  fadeTo(view, to, ms, onDone) {
+    this.stopFade(view);
+    const t = this.appTicker;
+    const from = view.alpha;
+    if (!t || from === to) {
+      view.alpha = to;
+      onDone?.();
+      return;
+    }
+    const startMs = typeof performance !== "undefined" ? performance.now() : 0;
+    const fn = () => {
+      const nowMs = typeof performance !== "undefined" ? performance.now() : startMs + ms;
+      const k = Math.min(1, (nowMs - startMs) / Math.max(ms, 1));
+      view.alpha = from + (to - from) * k;
+      if (k >= 1) {
+        view.alpha = to;
+        this.stopFade(view);
+        onDone?.();
+      }
+    };
+    this.fadeFns.set(view, fn);
+    t.add(fn);
+  }
+  /** Cancel an in-flight fade on `view` (if any). */
+  stopFade(view) {
+    const fn = this.fadeFns.get(view);
+    if (fn) {
+      this.appTicker?.remove(fn);
+      this.fadeFns.delete(view);
+    }
+  }
+  /**
+   * Build the unified scrollable MENU bound to the ☰ panel. Composed `menu` blocks
+   * are given by `mountHud`; absent → a default Settings-only menu. Built-in ids
+   * ('music'/'sfx') are reused, not shadowed (P10); button blocks wire `closePanel`.
+   */
+  buildMenu(ticker) {
+    const menu = this.opts.menu && this.opts.menu.length ? this.opts.menu : composeMenu(void 0, {});
+    const controls = buildBlocks(menu, this.ui.bus, void 0, (id) => this.ui.control(id));
+    for (const c of controls) if (!this.ui.control(c.id)) this.ui.register(c);
+    const buttons = buttonBlocks(menu);
+    this.disposers.push(
+      this.ui.bus.on("buttonActivated", ({ id }) => {
+        const b = buttons.find((x) => x.id === id);
+        if (b?.action === "closePanel") this.ui.settingsPanel.closePanel();
+      })
+    );
+    return new MenuView(this.ui.settingsPanel, controls, menu, this.ui, ticker, {
+      controlSkins: this.opts.controlSkins,
+      title: this.opts.menuTitle
+    });
+  }
+  /**
+   * Slide the whole interactive HUD in (`true`) or out (`false`): bottom-anchored
+   * controls travel down, top-anchored travel up (behind the status-bar plaque).
+   * Pure translation (no scaling); controls are non-interactive while moving/hidden.
+   */
+  setControlsVisible(visible) {
+    const target = visible ? 0 : 1;
+    this.slideTarget = target;
+    if (!this.slideHeld) {
+      this.ui.lock();
+      this.slideHeld = true;
+    }
+    const settle = () => {
+      if (this.slideProg === 0 && this.slideHeld) {
+        this.ui.unlock();
+        this.slideHeld = false;
+      }
+    };
+    if (!this.appTicker) {
+      this.slideProg = target;
+      this.applySlide();
+      settle();
+      return;
+    }
+    const from = this.slideProg;
+    const startMs = typeof performance !== "undefined" ? performance.now() : 0;
+    if (this.slideTickFn) this.appTicker.remove(this.slideTickFn);
+    const tick = () => {
+      const nowMs = typeof performance !== "undefined" ? performance.now() : startMs + 360;
+      const k = Math.min(1, (nowMs - startMs) / 360);
+      this.slideProg = from + (target - from) * k;
+      if (k >= 1) {
+        this.slideProg = target;
+        this.appTicker?.remove(tick);
+        this.slideTickFn = void 0;
+        settle();
+      }
+      this.applySlide();
+    };
+    this.slideTickFn = tick;
+    this.appTicker.add(tick);
+  }
+  /** Apply the current slide progress: translate each interactive view toward its
+   *  anchored edge (pure translation — no scaling). */
+  applySlide() {
+    const off = easeInOutCubic(this.slideProg) * this.lastScreenH;
+    for (const [view, baseY] of this.slideBaseY) {
+      view.y = baseY + (this.slideSign.get(view) ?? 1) * off;
+    }
+  }
+  unmount() {
+    if (this.slideTickFn && this.appTicker) this.appTicker.remove(this.slideTickFn);
+    this.slideTickFn = void 0;
+    for (const fn of this.fadeFns.values()) this.appTicker?.remove(fn);
+    this.fadeFns.clear();
+    for (const v of this.views) v.dispose();
+    this.views.length = 0;
+    for (const o of this.overlays) o.dispose();
+    this.overlays.length = 0;
+    this._eventLog?.dispose();
+    this._eventLog = void 0;
+    for (const d of this.disposers) d();
+    this.disposers.length = 0;
+    if (!this.root.destroyed) this.root.destroy({ children: true });
+    if (typeof window !== "undefined") {
+      delete window.__OPENUI__;
+    }
+  }
+  expose() {
+    if (typeof window === "undefined") return;
+    window.__OPENUI__ = {
+      snapshot: () => this.ui.snapshot(),
+      getState: (id) => this.ui.control(id)?.current ?? null,
+      isInteractable: (id) => this.ui.control(id)?.interactable ?? false,
+      isAnimating: (id) => this.ui.control(id)?.inspect().animating ?? false,
+      bounds: (id) => this.ui.snapshot().find((s) => s.id === id)?.bounds ?? null,
+      events: (since) => this._eventLog?.since(since) ?? [],
+      controlsReady: () => this.slideProg < 1e-3
+    };
+  }
+};
+var ANCHOR_X = 100 / 203;
+var ANCHOR_Y = 100 / 213;
+var TARGET_DIAMETER = 220;
+function makeSprite(texture) {
+  const s = new Sprite(texture);
+  s.anchor.set(ANCHOR_X, ANCHOR_Y);
+  s.scale.set(TARGET_DIAMETER / 200);
+  return s;
+}
+function svgSpinSkin(textures) {
+  const view = new Container();
+  const def = makeSprite(textures.default);
+  const auto = makeSprite(textures.auto);
+  auto.visible = false;
+  view.addChild(def, auto);
+  return {
+    view,
+    update(state) {
+      const isAuto = state === "auto";
+      def.visible = !isAuto;
+      auto.visible = isAuto;
+    },
+    destroy() {
+      view.destroy({ children: true });
+    }
+  };
+}
+
+export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, svgSpinSkin };
+//# sourceMappingURL=chunk-PYXZIGXG.js.map
+//# sourceMappingURL=chunk-PYXZIGXG.js.map