@open-slot-ui/pixi 0.0.1

package/dist/index.js

@@ -0,0 +1,3954 @@
+import { Container, Graphics, Text, Circle, Sprite, Rectangle, Ticker, BlurFilter, Texture } from 'pixi.js';
+import { resolvePlacement, displayDigits, valueFitMaxWidth, formatAmount, EventLog, composeMenu, buildBlocks, buttonBlocks, createUI, buildPanel } from '@open-slot-ui/core';
+
+// src/OpenUIPixi.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;
+}
+
+// src/views/SpinView.ts
+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 c = ui.theme.color;
+    const ring = new Graphics().circle(0, 0, 64).fill({ color: c.surface }).stroke({ width: 6, color: c.accent });
+    this.fsCount = new Text({ text: "0", style: { fontFamily: ui.theme.type.family, fontSize: 44, fill: c.text, fontWeight: "800" } });
+    this.fsCount.anchor.set(0.5);
+    this.fsCount.y = -8;
+    this.fsLabel = new Text({ text: ui.t("openui.freeSpins"), style: { fontFamily: ui.theme.type.family, fontSize: 18, fill: c.accent, fontWeight: "800", letterSpacing: 2 } });
+    this.fsLabel.anchor.set(0.5);
+    this.fsLabel.y = 26;
+    this.fsFace.addChild(ring, this.fsCount, this.fsLabel);
+    this.fsFace.visible = false;
+    this.art.addChild(this.fsFace);
+    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.updateFreeSpins()),
+      this.ui.locale.subscribe(() => {
+        if (!this.destroyed) this.fsLabel.text = this.ui.t("openui.freeSpins");
+      })
+    );
+    this.skin.update(this.spin.current);
+    this.updateFreeSpins();
+    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;
+  /** Swap the spin face: free-spins counter when `freeSpins > 0`, else the skin. */
+  updateFreeSpins() {
+    const n = this.spin.freeSpins.get();
+    const fs = n > 0;
+    this.fsCount.text = String(n);
+    this.fsFace.visible = fs;
+    this.skin.view.visible = !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.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.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();
+  }
+};
+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 });
+  }
+};
+
+// src/views/ValueDisplayView.ts
+var DIGIT_W = 26;
+var DIGIT_H = 46;
+var FONT_SIZE = 40;
+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();
+      })
+    );
+  }
+  vd;
+  ticker;
+  fitGsap;
+  counter;
+  caption;
+  side() {
+    const a = this.vd.layout.anchor;
+    return a.includes("left") ? "left" : a.includes("right") ? "right" : "center";
+  }
+  build() {
+    const theme = this.ui.theme;
+    const side = this.side();
+    if (this.vd.label) {
+      this.caption = new Text({
+        text: this.ui.t(this.vd.label).toUpperCase(),
+        style: { fontFamily: theme.type.family, fontSize: 13, fill: theme.color.text, fontWeight: "700", letterSpacing: 2 }
+      });
+      this.caption.alpha = 0.55;
+      this.caption.anchor.set(side === "left" ? 0 : side === "right" ? 1 : 0.5, 1);
+      this.caption.y = -DIGIT_H / 2 - 3;
+      this.addChild(this.caption);
+    }
+    const cur = this.vd.currency.get();
+    this.buildCounter(displayDigits(this.vd.get(), this.vd.digits, cur.decimals), this.vd.minorUnits);
+  }
+  /** (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({
+      style: { fontFamily: theme.type.family, fontSize: FONT_SIZE, fill: theme.color.text, fontWeight: "700" },
+      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 = symbolMode ? affix : ` ${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 {
+      this.counter.x = side === "left" ? 0 : side === "right" ? -this.counter.width : -this.counter.width / 2;
+    }
+    this.addChild(this.counter);
+  }
+  rebuild() {
+    this.counter?.destroy();
+    this.caption?.destroy();
+    this.counter = void 0;
+    this.caption = void 0;
+    this.removeChildren();
+    this.build();
+  }
+  dispose() {
+    this.counter?.destroy();
+    super.dispose();
+  }
+};
+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.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);
+      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("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.btn.state.subscribe(() => {
+        this.redraw();
+        this.updateInteractive();
+      }),
+      this.btn.onTransition((t) => this.play(t)),
+      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();
+  sprite;
+  labelText;
+  tween;
+  shape;
+  radius;
+  pillHeight;
+  glyph;
+  iconTarget;
+  mono;
+  /** 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);
+  }
+  onOver = () => {
+    if (isDesktop() && this.btn.current === "idle") this.btn.setState("hover");
+  };
+  onOut = () => {
+    if (this.btn.current === "hover") this.btn.setState("idle");
+  };
+  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";
+  }
+  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.mono ? "#ffffff" : t.color.surface;
+    const lineC = this.mono ? "#0a0a0a" : t.color.accent;
+    const ink = this.mono ? disabled ? "#9aa0a6" : "#0a0a0a" : disabled ? t.color.textDim : t.color.text;
+    if (this.shape === "circle") {
+      const r = this.radius;
+      g.circle(0, 0, r).fill({ color: fillC, alpha: this.mono && disabled ? 0.6 : 1 });
+      g.circle(0, 0, r).stroke({ width: this.mono ? 5 : 4, color: lineC });
+      if (this.glyph === "menu") {
+        for (const dy of [-8, 0, 8]) g.moveTo(-13, dy).lineTo(13, dy).stroke({ width: 4, color: ink });
+      } else if (this.glyph === "close") {
+        g.moveTo(-10, -10).lineTo(10, 10).moveTo(10, -10).lineTo(-10, 10).stroke({ width: 4, color: ink });
+      } else if (this.glyph === "speaker" || this.glyph === "speaker-mute") {
+        g.poly([-12, -4, -6, -4, 1, -11, 1, 11, -6, 4, -12, 4]).fill({ color: ink });
+        if (this.glyph === "speaker") {
+          g.moveTo(6, -6).lineTo(11, 0).lineTo(6, 6).stroke({ width: 2.5, color: ink });
+          g.moveTo(11, -9).lineTo(17, 0).lineTo(11, 9).stroke({ width: 2.5, color: ink });
+        } else {
+          g.moveTo(7, -6).lineTo(17, 6).moveTo(17, -6).lineTo(7, 6).stroke({ width: 2.5, color: ink });
+        }
+      } else if (this.glyph === "fullscreen") {
+        const a = 13, b = 6;
+        g.moveTo(-a, -a + b).lineTo(-a, -a).lineTo(-a + b, -a).moveTo(a - b, -a).lineTo(a, -a).lineTo(a, -a + b).moveTo(-a, a - b).lineTo(-a, a).lineTo(-a + b, a).moveTo(a - b, a).lineTo(a, a).lineTo(a, a - b).stroke({ width: 3, color: ink });
+      } else if (this.glyph === "fullscreen-exit") {
+        const c = 4, d = 12;
+        g.moveTo(-d, -c).lineTo(-c, -c).lineTo(-c, -d).moveTo(d, -c).lineTo(c, -c).lineTo(c, -d).moveTo(-d, c).lineTo(-c, c).lineTo(-c, d).moveTo(d, c).lineTo(c, c).lineTo(c, d).stroke({ width: 3, 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.pips);
+    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();
+  pips = 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 });
+    }
+    this.pips.clear();
+    const steps = this.turbo.modeCount - 1;
+    if (steps >= 2) {
+      const baseR = this.sprite ? this.target / 2 : this.radius;
+      const gap = 16;
+      const total = (steps - 1) * gap;
+      const y = baseR + 14;
+      for (let s = 0; s < steps; s++) {
+        const x = -total / 2 + s * gap;
+        const on = s < i;
+        this.pips.circle(x, y, 5).fill({ color: on ? th.color.accent : th.color.surface, alpha: disabled ? 0.5 : 1 }).stroke({ width: 2, color: 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 = st === "active";
+    if (st === "active") this.countText.text = this.fmt(this.auto.count.get());
+    if (st === "active") {
+      if (this.sprite) this.sprite.visible = false;
+      const r = this.sprite ? this.target / 2 : this.radius;
+      this.bg.clear();
+      this.bg.roundRect(-r, -r, 2 * r, 2 * r, r * 0.35).fill({ color: this.ui.theme.color.accent }).stroke({ width: 4, color: this.ui.theme.color.accentText });
+      return;
+    }
+    if (this.sprite) {
+      this.sprite.visible = true;
+      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 {
+      const th = this.ui.theme;
+      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(0, 0, W, this.sheetH + 40).fill({ color: DARK });
+    this.handle.clear().rect(W / 2 - 30 * k, 13 * k, 60 * k, 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";
+}
+
+// src/views/blockColumn.ts
+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 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);
+        }
+      }
+    }
+  };
+  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;
+}
+
+// src/views/MenuView.ts
+var MARGIN = 16;
+var HEADER_H = 60;
+var INSET = 22;
+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;
+    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: ui.theme.color.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;
+  vpW = 0;
+  vpH = 0;
+  scrollY = 0;
+  contentH = 0;
+  dragging = false;
+  lastY = 0;
+  wheelHandler;
+  buildClose() {
+    const t = this.ui.theme;
+    const r = 22;
+    const bg = new Graphics().circle(0, 0, r).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.textDim });
+    const x = new Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: t.color.text });
+    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.ui, 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);
+    const t = this.ui.theme;
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.62 });
+    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, t.radius.card).fill({ color: t.color.surface }).stroke({ width: 2, color: t.color.accent });
+    this.headerBar.clear().roundRect(cx, cy, cardW, HEADER_H, t.radius.card).fill({ color: t.color.surfaceAlt }).moveTo(cx + INSET, cy + HEADER_H).lineTo(cx + cardW - INSET, cy + HEADER_H).stroke({ width: 1, color: t.color.textDim, alpha: 0.3 });
+    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;
+    const fill = opts.mono ? "#ffffff" : t.color.text;
+    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()));
+    if (this.ro.kind === "duration") {
+      this.tick = (tk) => this.ro.tick(tk.deltaMS / 1e3);
+      this.ticker.add(this.tick);
+    }
+    this.render();
+  }
+  ro;
+  ticker;
+  caption;
+  valueText;
+  tick;
+  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 = text;
+  }
+  dispose() {
+    if (this.tick) this.ticker.remove(this.tick);
+    super.dispose();
+  }
+};
+var INSET2 = 24;
+var BTN_H = 50;
+var BTN_GAP = 12;
+var ROW_GAP = 16;
+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;
+    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;
+  buildClose() {
+    const t = this.ui.theme;
+    const r = 18;
+    const bg = new Graphics().circle(0, 0, r).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.textDim });
+    const x = new Graphics().moveTo(-6, -6).lineTo(6, 6).moveTo(6, -6).lineTo(-6, 6).stroke({ width: 3, color: t.color.text });
+    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;
+    const t = this.ui.theme;
+    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.ui, 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.62 });
+    this.backdrop.hitArea = new Rectangle(0, 0, W, H);
+    this.card.clear().roundRect(cx, cy, cardW, cardH, t.radius.card).fill({ color: t.color.surface }).stroke({ width: 2, color: t.color.accent });
+    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 - 20, cy + 20);
+  }
+  /** 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" ? t.color.accentText : t.color.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) {
+    const t = this.ui.theme;
+    bg.clear();
+    if (variant === "primary") {
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: t.color.accent });
+    } else {
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.accent });
+    }
+  }
+  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();
+  }
+};
+var BAR_H = 26;
+var StatusBarView = class _StatusBarView extends Container {
+  constructor(controls, ui, ticker, side) {
+    super();
+    this.ui = ui;
+    this.side = side;
+    this.zIndex = 300;
+    this.addChild(this.bg);
+    for (const c of controls) {
+      const view = new ReadoutView(c, ui, ticker, { inline: true, mono: true });
+      this.addChild(view);
+      this.items.push({ id: c.id, view });
+    }
+    this.disposers.push(
+      this.ui.on("visibilityChanged", ({ id }) => {
+        if (this.items.some((it) => it.id === id)) this.relayout();
+      })
+    );
+  }
+  ui;
+  side;
+  bg = new Graphics();
+  items = [];
+  screen;
+  disposers = [];
+  /** The strip's pixel height for the current screen (used for the HUD margin too). */
+  static heightFor(screen) {
+    const scale = Math.max(0.7, Math.min(1.4, screen.scale));
+    return Math.round(BAR_H * scale);
+  }
+  applyLayout(screen) {
+    this.screen = screen;
+    this.relayout();
+  }
+  relayout() {
+    const s = this.screen;
+    if (!s) return;
+    const W = s.width;
+    const H = s.height;
+    const scale = Math.max(0.7, Math.min(1.4, s.scale));
+    const barH = _StatusBarView.heightFor(s);
+    const y = this.side === "top" ? 0 : H - barH;
+    this.position.set(0, 0);
+    const visible = this.items.filter((it) => !this.ui.hidden.has(it.id));
+    for (const it of this.items) it.view.visible = !this.ui.hidden.has(it.id);
+    this.bg.clear();
+    this.visible = visible.length > 0;
+    if (!visible.length) return;
+    const edgeY = this.side === "top" ? barH - 1 : y;
+    this.bg.rect(0, y, W, barH).fill({ color: 789776, alpha: 0.92 }).rect(0, edgeY, W, 1).fill({ color: 16777215, alpha: 0.18 });
+    const n = visible.length;
+    const cy = y + barH / 2;
+    const pad = 18 * scale;
+    const usableW = Math.max(160, W - pad * 2);
+    visible.forEach((it, i) => {
+      it.view.position.set(pad + usableW * ((i + 0.5) / n), cy);
+      it.view.scale.set(scale);
+    });
+  }
+  dispose() {
+    for (const it of this.items) it.view.dispose();
+    this.items.length = 0;
+    for (const d of this.disposers) d();
+    this.disposers.length = 0;
+    if (!this.destroyed) this.destroy({ children: true });
+  }
+};
+
+// src/OpenUIPixi.ts
+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();
+  /** 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,
+      mono: true
+      // b&w like the turbo button (used on the drawn glyph path)
+    });
+    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: 88
+    });
+    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: 88,
+      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: 44, iconTexture: ic.bonus, iconTarget: 110 });
+    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 muteView = new ButtonView(this.ui.muteButton, this.ui, ticker, { shape: "circle", radius: 22, glyph: "speaker", iconTarget: 44, mono: true });
+    const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 22, glyph: "fullscreen", iconTarget: 44, mono: true });
+    muteView.zIndex = 65;
+    fullscreenView.zIndex = 65;
+    const statusBarSide = this.opts.statusBar;
+    const rtpView = statusBarSide ? void 0 : new ReadoutView(this.ui.rtp, this.ui, ticker);
+    const netView = statusBarSide ? void 0 : new ReadoutView(this.ui.netPosition, this.ui, ticker);
+    const timerView = statusBarSide ? void 0 : new ReadoutView(this.ui.sessionTimer, this.ui, ticker);
+    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.betPlus.id, betPlusView],
+      [this.ui.betMinus.id, betMinusView],
+      [this.ui.muteButton.id, muteView],
+      [this.ui.fullscreenButton.id, fullscreenView]
+    ];
+    if (rtpView) entries.push([this.ui.rtp.id, rtpView]);
+    if (netView) entries.push([this.ui.netPosition.id, netView]);
+    if (timerView) 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);
+    if (statusBarSide) {
+      const bar = new StatusBarView([this.ui.netPosition, this.ui.rtp, this.ui.sessionTimer], this.ui, ticker, statusBarSide);
+      this.root.addChild(bar);
+      this.overlays.push(bar);
+    }
+    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 });
+        const top = statusBarSide === "top" ? StatusBarView.heightFor(s) + 28 : 40;
+        replayBadge.position.set(s.width / 2, top);
+      },
+      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();
+      })
+    );
+    if (ic.settingsIdle && ic.settingsActive) {
+      const idle = ic.settingsIdle;
+      const active = ic.settingsActive;
+      this.disposers.push(
+        this.ui.settingsPanel.state.subscribe(() => {
+          settingsView.setIconTexture(this.ui.settingsPanel.isOpen ? active : idle);
+        })
+      );
+    } else {
+      this.disposers.push(
+        this.ui.settingsPanel.state.subscribe(() => {
+          settingsView.setGlyph(this.ui.settingsPanel.isOpen ? "close" : "menu");
+        })
+      );
+    }
+    const applyLayout = () => {
+      const screen = this.ui.screen.get();
+      const barH = statusBarSide ? StatusBarView.heightFor(screen) : 0;
+      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";
+        if (barH) {
+          if (statusBarSide === "top" && anchor.startsWith("top")) v.y += barH;
+          else if (statusBarSide === "bottom" && anchor.startsWith("bottom")) v.y -= barH;
+        }
+        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._eventLog = new EventLog(this.ui.bus);
+    if (this.opts.expose ?? true) this.expose();
+  }
+  /**
+   * 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 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 RISE = 26;
+var STAGGER = 38;
+var SLIDER_PIVOT_X = 130;
+var SLIDER_PIVOT_Y = 27;
+var PopoverView = class extends ControlView {
+  constructor(panel, parts, ui, ticker, art = {}) {
+    super(panel, ui);
+    this.panel = panel;
+    this.ticker = ticker;
+    this.rules = new ButtonView(parts.rules, ui, ticker, { shape: "pill", height: 50, iconTexture: art.rulesTexture, iconTarget: 50 });
+    this.music = new SliderView(parts.music, ui, art.musicTrack);
+    this.sfx = new SliderView(parts.sfx, ui, art.soundTrack);
+    this.music.pivot.set(SLIDER_PIVOT_X, SLIDER_PIVOT_Y);
+    this.sfx.pivot.set(SLIDER_PIVOT_X, SLIDER_PIVOT_Y);
+    this.items = [
+      { view: this.sfx, tx: -130, ty: -80, prog: 0 },
+      { view: this.music, tx: -130, ty: -80 * 2, prog: 0 },
+      { view: this.rules, tx: -132, ty: -80 * 3, prog: 0 }
+    ];
+    for (const it of this.items) {
+      it.view.position.set(it.tx, it.ty);
+      it.view.scale.set(0);
+      it.view.alpha = 0;
+      it.view.visible = false;
+      this.addChild(it.view);
+    }
+    this.tick = (t) => this.update(t.deltaMS);
+    this.applyState();
+    this.disposers.push(this.panel.state.subscribe(() => this.applyState()));
+  }
+  panel;
+  ticker;
+  music;
+  sfx;
+  rules;
+  items;
+  phase = 0;
+  running = false;
+  tick;
+  applyState() {
+    this.phase = 0;
+    const open = this.panel.isOpen;
+    this.eventMode = open ? "auto" : "none";
+    if (open) for (const it of this.items) it.view.visible = true;
+    if (!this.running) {
+      this.running = true;
+      this.ticker.add(this.tick);
+    }
+  }
+  update(dt) {
+    this.phase += Math.min(dt, 40);
+    const open = this.panel.isOpen;
+    const finalTarget = open ? 1 : 0;
+    let settled = true;
+    for (let i = 0; i < this.items.length; i++) {
+      const it = this.items[i];
+      const target = open && this.phase > i * STAGGER ? 1 : 0;
+      it.prog += (target - it.prog) * Math.min(1, dt / (open ? 50 : 80));
+      const s = it.prog;
+      it.view.scale.set(s);
+      it.view.alpha = Math.min(1, s * 1.5);
+      it.view.position.set(it.tx, it.ty + (1 - s) * RISE);
+      it.view.visible = s > 0.01;
+      if (Math.abs(it.prog - finalTarget) > 0.01) settled = false;
+    }
+    if (settled) {
+      this.running = false;
+      this.ticker.remove(this.tick);
+    }
+  }
+  dispose() {
+    if (this.running) {
+      this.ticker.remove(this.tick);
+      this.running = false;
+    }
+    this.music.dispose();
+    this.sfx.dispose();
+    this.rules.dispose();
+    super.dispose();
+  }
+};
+var INK = 1382172;
+var CARD = 16777215;
+var HEADER_BG = 2106411;
+var PAD2 = 16;
+var HEADER_H2 = 56;
+var MAX_W = 600;
+var PanelView = class extends ControlView {
+  constructor(panel, closeBtn, ui, ticker, opts = {}) {
+    super(panel, ui);
+    this.panel = panel;
+    this.opts = opts;
+    this.zIndex = 100;
+    this.backdrop.eventMode = "static";
+    this.backdrop.on("pointertap", () => this.panel.closePanel());
+    this.title = new Text({
+      text: panel.title ?? "",
+      style: { fontFamily: ui.theme.type.family, fontSize: 22, fill: 16777215, fontWeight: "800", letterSpacing: 1 }
+    });
+    this.title.anchor.set(0.5);
+    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.close = new ButtonView(closeBtn, ui, ticker, { iconTexture: opts.closeTexture, iconTarget: 44, glyph: "close", radius: 24 });
+    this.addChild(this.backdrop, this.card, this.viewport, this.maskG, this.catcher, this.headerBg, this.title, this.close);
+    this.applyOpen(this.panel.isOpen);
+    this.disposers.push(this.panel.state.subscribe(() => this.applyOpen(this.panel.isOpen)));
+  }
+  panel;
+  opts;
+  backdrop = new Graphics();
+  card = new Graphics();
+  headerBg = new Graphics();
+  title;
+  viewport = new Container();
+  maskG = new Graphics();
+  catcher = new Graphics();
+  close;
+  content;
+  builtWidth = -1;
+  scrollY = 0;
+  contentH = 0;
+  viewportH = 0;
+  dragging = false;
+  lastY = 0;
+  wheelHandler;
+  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.6 });
+    this.backdrop.hitArea = new Rectangle(0, 0, W, H);
+    const cardW = Math.min(W - PAD2 * 2, MAX_W);
+    const cx = (W - cardW) / 2;
+    const hy = PAD2;
+    this.headerBg.clear().roundRect(cx, hy, cardW, HEADER_H2, HEADER_H2 / 2).fill({ color: HEADER_BG });
+    this.title.position.set(W / 2, hy + HEADER_H2 / 2);
+    this.close.position.set(cx + cardW - HEADER_H2 / 2, hy + HEADER_H2 / 2);
+    const cardY = hy + HEADER_H2 + 12;
+    const cardH = H - cardY - PAD2;
+    this.card.clear().roundRect(cx, cardY, cardW, cardH, 22).fill({ color: CARD });
+    const inset = 20;
+    const vpX = cx + inset;
+    const vpY = cardY + inset;
+    const vpW = cardW - inset * 2;
+    const vpH = cardH - inset * 2;
+    this.viewport.position.set(vpX, vpY);
+    this.viewportH = vpH;
+    this.maskG.clear().rect(vpX, vpY, vpW, vpH).fill({ color: 16777215 });
+    this.catcher.clear().rect(vpX, vpY, vpW, vpH).fill({ color: 16777215, alpha: 1e-4 });
+    if (Math.abs(vpW - this.builtWidth) > 1) {
+      this.content?.destroy({ children: true });
+      this.content = this.opts.content?.(this.ui.theme, vpW) ?? this.fallback(vpW);
+      this.viewport.addChild(this.content);
+      this.builtWidth = vpW;
+    }
+    if (this.content) this.content.x = 0;
+    this.contentH = this.content?.height ?? 0;
+    this.clampScroll();
+  }
+  fallback(width) {
+    const c = new Container();
+    const t = new Text({ text: "No content provided.", style: { fontFamily: this.ui.theme.type.family, fontSize: 18, fill: INK, wordWrap: true, wordWrapWidth: width } });
+    c.addChild(t);
+    return c;
+  }
+  onDown = (e) => {
+    this.dragging = true;
+    this.lastY = e.global.y;
+  };
+  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.viewportH - this.contentH);
+    this.scrollY = Math.max(min, Math.min(0, this.scrollY));
+    if (this.content) this.content.y = this.scrollY;
+  }
+  applyOpen(open) {
+    this.visible = open;
+    this.eventMode = open ? "static" : "none";
+    this.alpha = open ? 1 : 0;
+    if (open) {
+      this.scrollY = 0;
+      this.clampScroll();
+      if (!this.wheelHandler) {
+        this.wheelHandler = (e) => {
+          this.scrollY -= e.deltaY;
+          this.clampScroll();
+        };
+        window.addEventListener("wheel", this.wheelHandler, { passive: true });
+      }
+    } else if (this.wheelHandler) {
+      window.removeEventListener("wheel", this.wheelHandler);
+      this.wheelHandler = void 0;
+    }
+  }
+  dispose() {
+    if (this.wheelHandler) window.removeEventListener("wheel", this.wheelHandler);
+    this.close.dispose();
+    super.dispose();
+  }
+};
+var PanelBodyView = class extends ControlView {
+  constructor(panelControl, controls, blocks, ui, ticker, opts = {}) {
+    super(panelControl, ui);
+    this.panelControl = panelControl;
+    this.controls = controls;
+    this.blocks = blocks;
+    this.ticker = ticker;
+    this.opts = opts;
+    this.bodyW = opts.width ?? 360;
+    this.addChild(this.backdrop, this.card, this.content);
+    this.rebuild();
+    this.applyVisibility();
+    this.disposers.push(
+      this.panelControl.state.subscribe(() => this.applyVisibility()),
+      this.ui.locale.subscribe(() => {
+        if (!this.destroyed) this.rebuild();
+      })
+    );
+    if (this.panelControl.variant === "modal") {
+      this.backdrop.eventMode = "static";
+      this.backdrop.on("pointertap", () => this.panelControl.closePanel());
+    }
+  }
+  panelControl;
+  controls;
+  blocks;
+  ticker;
+  opts;
+  backdrop = new Graphics();
+  card = new Graphics();
+  content = new Container();
+  childViews = [];
+  bodyW;
+  rebuild() {
+    for (const v of this.childViews) v.dispose();
+    this.childViews.length = 0;
+    for (const child of this.content.removeChildren()) child.destroy();
+    const col = buildBlockColumn(this.blocks, this.controls, this.ui, this.ticker, this.bodyW, { controlSkins: this.opts.controlSkins });
+    this.childViews = col.views;
+    this.content.addChild(...col.content.removeChildren());
+    this.content.position.set(0, -col.height / 2);
+    this.drawChrome(this.bodyW, col.height);
+  }
+  drawChrome(width, height) {
+    const t = this.ui.theme;
+    this.card.clear().roundRect(-width / 2, -height / 2, width, height, t.radius.card).fill({ color: t.color.surface }).stroke({ width: 3, color: t.color.accent });
+    this.backdrop.clear();
+    if (this.panelControl.variant === "modal") {
+      this.backdrop.rect(-3e3, -3e3, 6e3, 6e3).fill({ color: 0, alpha: 0.6 });
+    }
+  }
+  applyVisibility() {
+    const open = this.panelControl.isOpen;
+    this.visible = open;
+    this.eventMode = open ? "auto" : "none";
+  }
+  dispose() {
+    for (const v of this.childViews) v.dispose();
+    this.childViews.length = 0;
+    super.dispose();
+  }
+};
+function mountHud(app, spec = {}, opts = {}) {
+  const { hooks, ...pixiOpts } = opts;
+  const ui = createUI(spec, hooks);
+  const locales = spec.locale ? Array.from(/* @__PURE__ */ new Set([spec.locale.locale, ...Object.keys(spec.locale.messages)])) : [];
+  const menu = pixiOpts.menu === false ? false : composeMenu(spec.menu, { locales, localeSelectId: spec.localeSelectId, rulesFallback: spec.rules });
+  if (menu && spec.game && (spec.game.name || spec.game.version)) {
+    menu.push({ kind: "legal", id: "openui-game-info", text: [spec.game.name, spec.game.version ? `v${spec.game.version}` : ""].filter(Boolean).join("  \xB7  ") });
+  }
+  const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu, statusBar: pixiOpts.statusBar ?? spec.statusBar });
+  pixi.mount(app);
+  const extra = [];
+  if (spec.panels?.length) {
+    for (const ps of spec.panels) {
+      const built = buildPanel(ps, ui.bus);
+      ui.register(built.panel);
+      for (const c of built.controls) ui.register(c);
+      const view = new PanelBodyView(built.panel, built.controls, built.blocks, ui, app.ticker, {
+        controlSkins: pixiOpts.controlSkins
+      });
+      pixi.root.addChild(view);
+      view.applyLayout(ui.screen.get());
+      extra.push(view);
+    }
+  }
+  const offRelayout = ui.screen.subscribe(() => {
+    const s = ui.screen.get();
+    for (const v of extra) v.applyLayout(s);
+  });
+  const teardown = () => {
+    offRelayout();
+    for (const v of extra) v.dispose();
+    extra.length = 0;
+    pixi.unmount();
+    ui.dispose();
+  };
+  function on(type, fn) {
+    return ui.on(type, fn);
+  }
+  return {
+    ui,
+    pixi,
+    on,
+    setBalance: (n) => ui.balance.set(n),
+    setBet: (n) => ui.bet.set(n),
+    setCurrency: (c) => {
+      ui.balance.setCurrency(c);
+      ui.bet.setCurrency(c);
+      ui.netPosition.setCurrency(c);
+    },
+    applyJurisdiction: (j) => ui.applyJurisdiction(j),
+    reportRound: (win, bet) => ui.reportRound(win, bet),
+    setRtp: (p) => ui.rtp.set(p),
+    setMuted: (m) => ui.setMuted(m),
+    showNotice: (blocks, actions) => ui.showNotice(blocks, actions),
+    showError: (message, opts2) => ui.showError(message, opts2),
+    showRgsError: (code, opts2) => ui.showRgsError(code, opts2),
+    showFatal: (message, opts2) => ui.showFatal(message, opts2),
+    hideNotice: () => ui.hideNotice(),
+    setSocial: (on2, coin) => ui.setSocial(on2, coin),
+    setFreeSpins: (n) => ui.spin.setFreeSpins(n),
+    setReplay: (on2) => ui.setReplay(on2),
+    confirmBuy: (o) => {
+      if (ui.isDisabled("buyFeature")) return;
+      ui.showNotice(
+        [
+          { kind: "heading", id: "buy-title", text: o.title ?? "openui.buyFeature.title" },
+          { kind: "callout", id: "buy-body", tone: "bonus", text: o.message ?? "openui.buyFeature.message" }
+        ],
+        [
+          { label: o.cancelLabel ?? "openui.cancel", variant: "secondary" },
+          { label: o.confirmLabel ?? "openui.confirm", variant: "primary", onSelect: o.onConfirm }
+        ]
+      );
+    },
+    showControls: () => pixi.setControlsVisible(true),
+    hideControls: () => pixi.setControlsVisible(false),
+    setControlsVisible: (v) => pixi.setControlsVisible(v),
+    snapshot: () => ui.snapshot(),
+    events: pixi.eventLog,
+    inputLocked: ui.locked,
+    lockInput: () => ui.lock(),
+    unlockInput: () => ui.unlock(),
+    unmount: teardown,
+    dispose: teardown
+  };
+}
+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, PanelBodyView, PanelView, PopoverView, ReadoutView, SelectView, SliderView, SpinView, StatusBarView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map