@oddsmith/ui 0.0.0 → 1.0.0

package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.js

@@ -0,0 +1,287 @@
+import { LitElement as f, html as t, nothing as i } from "lit";
+import { keyed as $ } from "lit/directives/keyed.js";
+import { repeat as g } from "lit/directives/repeat.js";
+import { property as h, state as v } from "lit/decorators.js";
+import { Component as I } from "../../../../shared/lib/lit/component.js";
+import { scss as b } from "../../../../shared/lib/lit/scss.js";
+import { OS_LEADERBOARD_CASINO_MARQUEE as y } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as T } from "../../theme/styles.js";
+import { renderPlayerName as C } from "../../theme/vip-mark.js";
+import { iconService as u } from "../../services/icon.service.js";
+import { winIcon as R } from "./components/win-icons.js";
+import { parseMarqueeItem as m, formatWinAmount as o } from "./marquee-item.js";
+import { ACTIVE_MARQUEE_VARIANT as q, isMarqueeVariant as A } from "./marquee-variants.js";
+import S from "./marquee-section.html.js";
+import x from "./marquee-section.scss.js";
+var M = Object.defineProperty, V = Object.getOwnPropertyDescriptor, c = (e, s, r, a) => {
+  for (var n = a > 1 ? void 0 : a ? V(s, r) : s, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (n = (a ? l(s, r, n) : l(n)) || n);
+  return a && n && M(s, r, n), n;
+};
+let p = class extends f {
+  constructor() {
+    super(...arguments), this.variant = q, this.hudIndex = 0, this.feedRows = [], this.feedCursor = 0, this.feedKey = 0;
+  }
+  get speedSec() {
+    return this.section?.speedSec ?? 30;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.syncVariantAttribute(), this.startVariantTimers();
+  }
+  updated(e) {
+    (e.has("variant") || e.has("section")) && (this.syncVariantAttribute(), this.stopVariantTimers(), this.startVariantTimers());
+  }
+  disconnectedCallback() {
+    this.stopVariantTimers(), super.disconnectedCallback();
+  }
+  syncVariantAttribute() {
+    const e = A(this.variant) ? this.variant : "classic";
+    this.dataset.variant = e;
+  }
+  parsedWins() {
+    return (this.section?.items ?? []).map(
+      (e, s) => m(e, s)
+    );
+  }
+  startVariantTimers() {
+    if (this.variant === "hud" && (this.hudIndex = 0, this.hudTimer = setInterval(() => {
+      const e = this.section?.items?.length ?? 0;
+      e > 1 && (this.hudIndex = (this.hudIndex + 1) % e);
+    }, 3e3)), this.variant === "feed") {
+      this.feedRows = [], this.feedCursor = 0, this.feedKey = 0;
+      for (let e = 0; e < 4; e += 1) this.pushFeedRow(!1);
+      this.feedTimer = setInterval(() => this.pushFeedRow(!0), 2600);
+    }
+  }
+  stopVariantTimers() {
+    this.hudTimer && clearInterval(this.hudTimer), this.feedTimer && clearInterval(this.feedTimer), this.hudTimer = void 0, this.feedTimer = void 0;
+  }
+  pushFeedRow(e) {
+    const s = this.parsedWins();
+    if (!s.length) return;
+    const r = s[this.feedCursor % s.length];
+    this.feedCursor += 1;
+    const a = { ...r, key: this.feedKey++ };
+    this.feedRows = e ? [a, ...this.feedRows].slice(0, 4) : [a, ...this.feedRows];
+  }
+  formatAmount(e) {
+    return o(e.amount ?? null, e.currency ?? "USD");
+  }
+  renderSeparator() {
+    return t`<span class="sep" aria-hidden="true">·</span>`;
+  }
+  renderItemIcon(e) {
+    if (e.gameId) {
+      const s = u.resolveGameIconName(e.gameId, 0), r = u.get(s).url;
+      return t`<img src=${r} alt=${e.game} />`;
+    }
+    return R(e.icon);
+  }
+  /** Uses shared VIP badge styles from theme (v0 outline tag). */
+  renderMarqueeUser(e, s) {
+    return C(e, { vip: s });
+  }
+  renderClassicItem(e, s) {
+    const r = m(e, s), a = this.formatAmount(e);
+    return t`
+      <span class="item">
+        <span class="icon">${this.renderItemIcon(r)}</span>
+        <span class="txt">
+          ${this.renderMarqueeUser(r.user, r.vip)}
+          <span class="verb">won</span>
+          ${e.amount != null ? t`<span class="amt">${a}</span>` : i}
+          ${r.game ? t`
+                <span class="tail">
+                  <span class="on">on</span>
+                  <span class="game">${r.game}</span>
+                </span>
+              ` : i}
+        </span>
+      </span>
+    `;
+  }
+  renderClassicGroup(e) {
+    return t`
+      <span class="group" aria-hidden="true">
+        ${e.map(
+      (s, r) => t`
+            ${this.renderClassicItem(s, r)}${this.renderSeparator()}
+          `
+    )}
+      </span>
+    `;
+  }
+  renderTrack() {
+    const e = this.section?.items ?? [];
+    return t`${this.renderClassicGroup(e)}${this.renderClassicGroup(e)}`;
+  }
+  renderHudLabel() {
+    return i;
+  }
+  renderTickerWin(e) {
+    const s = o(e.amount, e.currency);
+    return t`
+      <span class="win ${e.big ? "big" : ""}">
+        <span class="chip">${this.renderItemIcon(e)}</span>
+        <span class="txt">
+          ${this.renderMarqueeUser(e.user, e.vip)}
+          <span class="verb">won</span>
+          ${s ? t`<span class="amt">${s}</span>` : i}
+          ${e.game ? t`
+                <span class="tail">
+                  <span class="on">on</span>
+                  <span class="game">${e.game}</span>
+                </span>
+              ` : i}
+        </span>
+      </span>
+      ${this.renderSeparator()}
+    `;
+  }
+  renderTicker() {
+    const e = this.parsedWins(), s = t`<div class="group">
+      ${e.map((r) => this.renderTickerWin(r))}
+    </div>`;
+    return t`
+      <div
+        class="marquee"
+        style="--speed: ${this.speedSec}s"
+        role="region"
+        aria-label="Recent winners"
+      >
+        <div class="track">${s}${s}</div>
+      </div>
+    `;
+  }
+  renderHudStreamGroup(e) {
+    return t`<div class="group">
+      ${e.map(
+      (s) => t`
+          <span class="win ${s.vip ? "vip" : ""}">
+            ${this.renderItemIcon(s)}${this.renderMarqueeUser(s.user, s.vip)}<span class="amt">${o(s.amount, s.currency)}</span
+            ><span class="sep-inline">/</span><span class="game">${s.game}</span>
+          </span>
+        `
+    )}
+    </div>`;
+  }
+  renderHud() {
+    const e = this.parsedWins();
+    if (!e.length) return i;
+    const s = e[this.hudIndex] ?? e[0], r = this.renderHudStreamGroup(e);
+    return t`
+      <div
+        class="marquee"
+        style="--speed: ${this.speedSec}s"
+        role="region"
+        aria-label="Recent winners"
+      >
+        <div class="hero">
+          <span class="badge">Latest win</span>
+          <span class="chip">${this.renderItemIcon(s)}</span>
+          ${$(
+      this.hudIndex,
+      t`<span class="info">
+              <span class="who">${this.renderMarqueeUser(s.user, s.vip)}</span>
+              <span class="val">${o(s.amount, s.currency)}</span>
+            </span>`
+    )}
+        </div>
+        <div class="stream">
+          <div class="track">${r}${r}</div>
+        </div>
+      </div>
+    `;
+  }
+  renderBeltGroup(e) {
+    return t`<div class="group">
+      ${e.map(
+      (s) => t`
+          <span class="pill ${s.big ? "big" : ""} ${s.vip ? "vip" : ""}">
+            <span class="chip">${this.renderItemIcon(s)}</span>
+            ${this.renderMarqueeUser(s.user, s.vip)}
+            <span class="game">${s.game}</span>
+            <span class="amt">+${o(s.amount, s.currency)}</span>
+          </span>
+        `
+    )}
+    </div>`;
+  }
+  renderBelt() {
+    const e = this.parsedWins(), s = e, r = [...e].reverse(), a = this.renderBeltGroup(s), n = this.renderBeltGroup(r);
+    return t`
+      <div
+        class="marquee"
+        style="--speed: ${this.speedSec}s"
+        role="region"
+        aria-label="Recent winners"
+      >
+        <div class="lane lane-a">${a}${a}</div>
+        <div class="lane lane-b">${n}${n}</div>
+      </div>
+    `;
+  }
+  renderFeed() {
+    return t`
+      <div class="marquee feed-panel" role="region" aria-label="Recent winners">
+        <div class="head">
+          <span class="live"><i></i> Live wins</span>
+          <small>updating in real time</small>
+        </div>
+        <div class="list">
+          ${g(
+      this.feedRows,
+      (e) => e.key,
+      (e) => t`
+              <div class="row ${e.big ? "big" : ""} ${e.vip ? "vip" : ""}">
+                <span class="chip">${this.renderItemIcon(e)}</span>
+                <span class="meta">
+                  ${this.renderMarqueeUser(e.user, e.vip)}
+                  <span class="game-line">on ${e.game}</span>
+                </span>
+                <span class="amt"
+                  >+${o(e.amount, e.currency)}</span
+                >
+              </div>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    if (!(this.section?.items ?? []).length) return i;
+    switch (this.variant) {
+      case "ticker":
+        return this.renderTicker();
+      case "hud":
+        return this.renderHud();
+      case "belt":
+        return this.renderBelt();
+      case "feed":
+        return this.renderFeed();
+      default:
+        return S(this);
+    }
+  }
+};
+p.styles = [T, b(x)];
+c([
+  h({ attribute: !1 })
+], p.prototype, "section", 2);
+c([
+  h({ attribute: "variant" })
+], p.prototype, "variant", 2);
+c([
+  v()
+], p.prototype, "hudIndex", 2);
+c([
+  v()
+], p.prototype, "feedRows", 2);
+p = c([
+  I({ selector: y })
+], p);
+export {
+  p as OsLeaderboardCasinoMarquee
+};
+//# sourceMappingURL=marquee-section.js.map

package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-section.ts"],"sourcesContent":["import { LitElement, html, nothing, type TemplateResult } from 'lit';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { OS_LEADERBOARD_CASINO_MARQUEE } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport { renderPlayerName } from '@os-leaderboard-casino/theme/vip-mark.js';\nimport type {\n  OsLeaderboardCasinoMarqueeItem,\n  OsLeaderboardCasinoMarqueeSection,\n} from '@os-leaderboard-casino/types/sections.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { winIcon } from './components/win-icons.js';\nimport {\n  formatWinAmount,\n  parseMarqueeItem,\n  type ParsedMarqueeWin,\n} from './marquee-item.js';\nimport {\n  ACTIVE_MARQUEE_VARIANT,\n  isMarqueeVariant,\n  type MarqueeVariant,\n} from './marquee-variants.js';\nimport type { MarqueeSectionHost } from './marquee-section.host.js';\nimport renderTemplate from './marquee-section.html?lit-html';\nimport styles from './marquee-section.scss?inline';\n\ninterface FeedRow extends ParsedMarqueeWin {\n  key: number;\n}\n\n/** Infinitely-scrolling winners ticker — v0 variant ports + classic fallback. */\n@Component({ selector: OS_LEADERBOARD_CASINO_MARQUEE })\nexport class OsLeaderboardCasinoMarquee\n  extends LitElement\n  implements MarqueeSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoMarqueeSection;\n\n  @property({ attribute: 'variant' })\n  variant: MarqueeVariant = ACTIVE_MARQUEE_VARIANT;\n\n  @state()\n  private hudIndex = 0;\n\n  @state()\n  private feedRows: FeedRow[] = [];\n\n  private hudTimer?: ReturnType<typeof setInterval>;\n  private feedTimer?: ReturnType<typeof setInterval>;\n  private feedCursor = 0;\n  private feedKey = 0;\n\n  get speedSec(): number {\n    return this.section?.speedSec ?? 30;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.syncVariantAttribute();\n    this.startVariantTimers();\n  }\n\n  updated(changed: Map<string, unknown>): void {\n    if (changed.has('variant') || changed.has('section')) {\n      this.syncVariantAttribute();\n      this.stopVariantTimers();\n      this.startVariantTimers();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.stopVariantTimers();\n    super.disconnectedCallback();\n  }\n\n  private syncVariantAttribute(): void {\n    const next = isMarqueeVariant(this.variant) ? this.variant : 'classic';\n    this.dataset.variant = next;\n  }\n\n  private parsedWins(): ParsedMarqueeWin[] {\n    return (this.section?.items ?? []).map((item, index) =>\n      parseMarqueeItem(item, index),\n    );\n  }\n\n  private startVariantTimers(): void {\n    if (this.variant === 'hud') {\n      this.hudIndex = 0;\n      this.hudTimer = setInterval(() => {\n        const count = this.section?.items?.length ?? 0;\n        if (count > 1) this.hudIndex = (this.hudIndex + 1) % count;\n      }, 3000);\n    }\n\n    if (this.variant === 'feed') {\n      this.feedRows = [];\n      this.feedCursor = 0;\n      this.feedKey = 0;\n      for (let i = 0; i < 4; i += 1) this.pushFeedRow(false);\n      this.feedTimer = setInterval(() => this.pushFeedRow(true), 2600);\n    }\n  }\n\n  private stopVariantTimers(): void {\n    if (this.hudTimer) clearInterval(this.hudTimer);\n    if (this.feedTimer) clearInterval(this.feedTimer);\n    this.hudTimer = undefined;\n    this.feedTimer = undefined;\n  }\n\n  private pushFeedRow(trim: boolean): void {\n    const wins = this.parsedWins();\n    if (!wins.length) return;\n    const win = wins[this.feedCursor % wins.length];\n    this.feedCursor += 1;\n    const row: FeedRow = { ...win, key: this.feedKey++ };\n    this.feedRows = trim\n      ? [row, ...this.feedRows].slice(0, 4)\n      : [row, ...this.feedRows];\n  }\n\n  private formatAmount(item: OsLeaderboardCasinoMarqueeItem): string {\n    return formatWinAmount(item.amount ?? null, item.currency ?? 'USD');\n  }\n\n  private renderSeparator() {\n    return html`<span class=\"sep\" aria-hidden=\"true\">·</span>`;\n  }\n\n  private renderItemIcon(win: ParsedMarqueeWin) {\n    if (win.gameId) {\n      const iconName = iconService.resolveGameIconName(win.gameId, 0);\n      const url = iconService.get(iconName).url!;\n      return html`<img src=${url} alt=${win.game} />`;\n    }\n    return winIcon(win.icon);\n  }\n\n  /** Uses shared VIP badge styles from theme (v0 outline tag). */\n  private renderMarqueeUser(user: string, vip?: boolean) {\n    return renderPlayerName(user, { vip });\n  }\n\n  private renderClassicItem(item: OsLeaderboardCasinoMarqueeItem, index: number) {\n    const win = parseMarqueeItem(item, index);\n    const amount = this.formatAmount(item);\n    return html`\n      <span class=\"item\">\n        <span class=\"icon\">${this.renderItemIcon(win)}</span>\n        <span class=\"txt\">\n          ${this.renderMarqueeUser(win.user, win.vip)}\n          <span class=\"verb\">won</span>\n          ${item.amount != null\n            ? html`<span class=\"amt\">${amount}</span>`\n            : nothing}\n          ${win.game\n            ? html`\n                <span class=\"tail\">\n                  <span class=\"on\">on</span>\n                  <span class=\"game\">${win.game}</span>\n                </span>\n              `\n            : nothing}\n        </span>\n      </span>\n    `;\n  }\n\n  private renderClassicGroup(items: OsLeaderboardCasinoMarqueeItem[]) {\n    return html`\n      <span class=\"group\" aria-hidden=\"true\">\n        ${items.map(\n          (item, index) => html`\n            ${this.renderClassicItem(item, index)}${this.renderSeparator()}\n          `,\n        )}\n      </span>\n    `;\n  }\n\n  renderTrack(): TemplateResult {\n    const items = this.section?.items ?? [];\n    return html`${this.renderClassicGroup(items)}${this.renderClassicGroup(items)}`;\n  }\n\n  renderHudLabel(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  private renderTickerWin(win: ParsedMarqueeWin) {\n    const amount = formatWinAmount(win.amount, win.currency);\n    return html`\n      <span class=\"win ${win.big ? 'big' : ''}\">\n        <span class=\"chip\">${this.renderItemIcon(win)}</span>\n        <span class=\"txt\">\n          ${this.renderMarqueeUser(win.user, win.vip)}\n          <span class=\"verb\">won</span>\n          ${amount ? html`<span class=\"amt\">${amount}</span>` : nothing}\n          ${win.game\n            ? html`\n                <span class=\"tail\">\n                  <span class=\"on\">on</span>\n                  <span class=\"game\">${win.game}</span>\n                </span>\n              `\n            : nothing}\n        </span>\n      </span>\n      ${this.renderSeparator()}\n    `;\n  }\n\n  private renderTicker() {\n    const wins = this.parsedWins();\n    const group = html`<div class=\"group\">\n      ${wins.map((win) => this.renderTickerWin(win))}\n    </div>`;\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"track\">${group}${group}</div>\n      </div>\n    `;\n  }\n\n  private renderHudStreamGroup(wins: ParsedMarqueeWin[]) {\n    return html`<div class=\"group\">\n      ${wins.map(\n        (win) => html`\n          <span class=\"win ${win.vip ? 'vip' : ''}\">\n            ${this.renderItemIcon(win)}${this.renderMarqueeUser(win.user, win.vip)}<span class=\"amt\">${formatWinAmount(win.amount, win.currency)}</span\n            ><span class=\"sep-inline\">/</span><span class=\"game\">${win.game}</span>\n          </span>\n        `,\n      )}\n    </div>`;\n  }\n\n  private renderHud() {\n    const wins = this.parsedWins();\n    if (!wins.length) return nothing;\n    const hero = wins[this.hudIndex] ?? wins[0];\n    const group = this.renderHudStreamGroup(wins);\n\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"hero\">\n          <span class=\"badge\">Latest win</span>\n          <span class=\"chip\">${this.renderItemIcon(hero)}</span>\n          ${keyed(\n            this.hudIndex,\n            html`<span class=\"info\">\n              <span class=\"who\">${this.renderMarqueeUser(hero.user, hero.vip)}</span>\n              <span class=\"val\">${formatWinAmount(hero.amount, hero.currency)}</span>\n            </span>`,\n          )}\n        </div>\n        <div class=\"stream\">\n          <div class=\"track\">${group}${group}</div>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderBeltGroup(wins: ParsedMarqueeWin[]) {\n    return html`<div class=\"group\">\n      ${wins.map(\n        (win) => html`\n          <span class=\"pill ${win.big ? 'big' : ''} ${win.vip ? 'vip' : ''}\">\n            <span class=\"chip\">${this.renderItemIcon(win)}</span>\n            ${this.renderMarqueeUser(win.user, win.vip)}\n            <span class=\"game\">${win.game}</span>\n            <span class=\"amt\">+${formatWinAmount(win.amount, win.currency)}</span>\n          </span>\n        `,\n      )}\n    </div>`;\n  }\n\n  private renderBelt() {\n    const wins = this.parsedWins();\n    const top = wins;\n    const bottom = [...wins].reverse();\n    const topGroup = this.renderBeltGroup(top);\n    const bottomGroup = this.renderBeltGroup(bottom);\n\n    return html`\n      <div\n        class=\"marquee\"\n        style=\"--speed: ${this.speedSec}s\"\n        role=\"region\"\n        aria-label=\"Recent winners\"\n      >\n        <div class=\"lane lane-a\">${topGroup}${topGroup}</div>\n        <div class=\"lane lane-b\">${bottomGroup}${bottomGroup}</div>\n      </div>\n    `;\n  }\n\n  private renderFeed() {\n    return html`\n      <div class=\"marquee feed-panel\" role=\"region\" aria-label=\"Recent winners\">\n        <div class=\"head\">\n          <span class=\"live\"><i></i> Live wins</span>\n          <small>updating in real time</small>\n        </div>\n        <div class=\"list\">\n          ${repeat(\n            this.feedRows,\n            (row) => row.key,\n            (row) => html`\n              <div class=\"row ${row.big ? 'big' : ''} ${row.vip ? 'vip' : ''}\">\n                <span class=\"chip\">${this.renderItemIcon(row)}</span>\n                <span class=\"meta\">\n                  ${this.renderMarqueeUser(row.user, row.vip)}\n                  <span class=\"game-line\">on ${row.game}</span>\n                </span>\n                <span class=\"amt\"\n                  >+${formatWinAmount(row.amount, row.currency)}</span\n                >\n              </div>\n            `,\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  render() {\n    const items = this.section?.items ?? [];\n    if (!items.length) return nothing;\n\n    switch (this.variant) {\n      case 'ticker':\n        return this.renderTicker();\n      case 'hud':\n        return this.renderHud();\n      case 'belt':\n        return this.renderBelt();\n      case 'feed':\n        return this.renderFeed();\n      default:\n        return renderTemplate(this);\n    }\n  }\n}\n"],"names":["OsLeaderboardCasinoMarquee","LitElement","ACTIVE_MARQUEE_VARIANT","changed","next","isMarqueeVariant","item","index","parseMarqueeItem","count","i","trim","wins","win","row","formatWinAmount","html","iconName","iconService","url","winIcon","user","vip","renderPlayerName","amount","nothing","items","group","hero","keyed","top","bottom","topGroup","bottomGroup","repeat","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","state","Component","OS_LEADERBOARD_CASINO_MARQUEE"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmCO,IAAMA,IAAN,cACGC,EAEV;AAAA,EAHO,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,UAA0BC,GAG1B,KAAQ,WAAW,GAGnB,KAAQ,WAAsB,CAAA,GAI9B,KAAQ,aAAa,GACrB,KAAQ,UAAU;AAAA,EAAA;AAAA,EAElB,IAAI,WAAmB;AACrB,WAAO,KAAK,SAAS,YAAY;AAAA,EACnC;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,qBAAA,GACL,KAAK,mBAAA;AAAA,EACP;AAAA,EAEA,QAAQC,GAAqC;AAC3C,KAAIA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,SAAS,OACjD,KAAK,qBAAA,GACL,KAAK,kBAAA,GACL,KAAK,mBAAA;AAAA,EAET;AAAA,EAEA,uBAA6B;AAC3B,SAAK,kBAAA,GACL,MAAM,qBAAA;AAAA,EACR;AAAA,EAEQ,uBAA6B;AACnC,UAAMC,IAAOC,EAAiB,KAAK,OAAO,IAAI,KAAK,UAAU;AAC7D,SAAK,QAAQ,UAAUD;AAAA,EACzB;AAAA,EAEQ,aAAiC;AACvC,YAAQ,KAAK,SAAS,SAAS,CAAA,GAAI;AAAA,MAAI,CAACE,GAAMC,MAC5CC,EAAiBF,GAAMC,CAAK;AAAA,IAAA;AAAA,EAEhC;AAAA,EAEQ,qBAA2B;AASjC,QARI,KAAK,YAAY,UACnB,KAAK,WAAW,GAChB,KAAK,WAAW,YAAY,MAAM;AAChC,YAAME,IAAQ,KAAK,SAAS,OAAO,UAAU;AAC7C,MAAIA,IAAQ,MAAG,KAAK,YAAY,KAAK,WAAW,KAAKA;AAAA,IACvD,GAAG,GAAI,IAGL,KAAK,YAAY,QAAQ;AAC3B,WAAK,WAAW,CAAA,GAChB,KAAK,aAAa,GAClB,KAAK,UAAU;AACf,eAASC,IAAI,GAAGA,IAAI,GAAGA,KAAK,EAAG,MAAK,YAAY,EAAK;AACrD,WAAK,YAAY,YAAY,MAAM,KAAK,YAAY,EAAI,GAAG,IAAI;AAAA,IACjE;AAAA,EACF;AAAA,EAEQ,oBAA0B;AAChC,IAAI,KAAK,YAAU,cAAc,KAAK,QAAQ,GAC1C,KAAK,aAAW,cAAc,KAAK,SAAS,GAChD,KAAK,WAAW,QAChB,KAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,YAAYC,GAAqB;AACvC,UAAMC,IAAO,KAAK,WAAA;AAClB,QAAI,CAACA,EAAK,OAAQ;AAClB,UAAMC,IAAMD,EAAK,KAAK,aAAaA,EAAK,MAAM;AAC9C,SAAK,cAAc;AACnB,UAAME,IAAe,EAAE,GAAGD,GAAK,KAAK,KAAK,UAAA;AACzC,SAAK,WAAWF,IACZ,CAACG,GAAK,GAAG,KAAK,QAAQ,EAAE,MAAM,GAAG,CAAC,IAClC,CAACA,GAAK,GAAG,KAAK,QAAQ;AAAA,EAC5B;AAAA,EAEQ,aAAaR,GAA8C;AACjE,WAAOS,EAAgBT,EAAK,UAAU,MAAMA,EAAK,YAAY,KAAK;AAAA,EACpE;AAAA,EAEQ,kBAAkB;AACxB,WAAOU;AAAA,EACT;AAAA,EAEQ,eAAeH,GAAuB;AAC5C,QAAIA,EAAI,QAAQ;AACd,YAAMI,IAAWC,EAAY,oBAAoBL,EAAI,QAAQ,CAAC,GACxDM,IAAMD,EAAY,IAAID,CAAQ,EAAE;AACtC,aAAOD,aAAgBG,CAAG,QAAQN,EAAI,IAAI;AAAA,IAC5C;AACA,WAAOO,EAAQP,EAAI,IAAI;AAAA,EACzB;AAAA;AAAA,EAGQ,kBAAkBQ,GAAcC,GAAe;AACrD,WAAOC,EAAiBF,GAAM,EAAE,KAAAC,GAAK;AAAA,EACvC;AAAA,EAEQ,kBAAkBhB,GAAsCC,GAAe;AAC7E,UAAMM,IAAML,EAAiBF,GAAMC,CAAK,GAClCiB,IAAS,KAAK,aAAalB,CAAI;AACrC,WAAOU;AAAA;AAAA,6BAEkB,KAAK,eAAeH,CAAG,CAAC;AAAA;AAAA,YAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA;AAAA,YAEzCP,EAAK,UAAU,OACbU,sBAAyBQ,CAAM,YAC/BC,CAAO;AAAA,YACTZ,EAAI,OACFG;AAAA;AAAA;AAAA,uCAGyBH,EAAI,IAAI;AAAA;AAAA,kBAGjCY,CAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AAAA,EAEQ,mBAAmBC,GAAyC;AAClE,WAAOV;AAAA;AAAA,UAEDU,EAAM;AAAA,MACN,CAACpB,GAAMC,MAAUS;AAAA,cACb,KAAK,kBAAkBV,GAAMC,CAAK,CAAC,GAAG,KAAK,iBAAiB;AAAA;AAAA,IAAA,CAEjE;AAAA;AAAA;AAAA,EAGP;AAAA,EAEA,cAA8B;AAC5B,UAAMmB,IAAQ,KAAK,SAAS,SAAS,CAAA;AACrC,WAAOV,IAAO,KAAK,mBAAmBU,CAAK,CAAC,GAAG,KAAK,mBAAmBA,CAAK,CAAC;AAAA,EAC/E;AAAA,EAEA,iBAAkD;AAChD,WAAOD;AAAA,EACT;AAAA,EAEQ,gBAAgBZ,GAAuB;AAC7C,UAAMW,IAAST,EAAgBF,EAAI,QAAQA,EAAI,QAAQ;AACvD,WAAOG;AAAA,yBACcH,EAAI,MAAM,QAAQ,EAAE;AAAA,6BAChB,KAAK,eAAeA,CAAG,CAAC;AAAA;AAAA,YAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA;AAAA,YAEzCW,IAASR,sBAAyBQ,CAAM,YAAYC,CAAO;AAAA,YAC3DZ,EAAI,OACFG;AAAA;AAAA;AAAA,uCAGyBH,EAAI,IAAI;AAAA;AAAA,kBAGjCY,CAAO;AAAA;AAAA;AAAA,QAGb,KAAK,iBAAiB;AAAA;AAAA,EAE5B;AAAA,EAEQ,eAAe;AACrB,UAAMb,IAAO,KAAK,WAAA,GACZe,IAAQX;AAAA,QACVJ,EAAK,IAAI,CAACC,MAAQ,KAAK,gBAAgBA,CAAG,CAAC,CAAC;AAAA;AAEhD,WAAOG;AAAA;AAAA;AAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,6BAIVW,CAAK,GAAGA,CAAK;AAAA;AAAA;AAAA,EAGxC;AAAA,EAEQ,qBAAqBf,GAA0B;AACrD,WAAOI;AAAA,QACHJ,EAAK;AAAA,MACL,CAACC,MAAQG;AAAA,6BACYH,EAAI,MAAM,QAAQ,EAAE;AAAA,cACnC,KAAK,eAAeA,CAAG,CAAC,GAAG,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC,qBAAqBE,EAAgBF,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA,mEAC7EA,EAAI,IAAI;AAAA;AAAA;AAAA,IAAA,CAGpE;AAAA;AAAA,EAEL;AAAA,EAEQ,YAAY;AAClB,UAAMD,IAAO,KAAK,WAAA;AAClB,QAAI,CAACA,EAAK,OAAQ,QAAOa;AACzB,UAAMG,IAAOhB,EAAK,KAAK,QAAQ,KAAKA,EAAK,CAAC,GACpCe,IAAQ,KAAK,qBAAqBf,CAAI;AAE5C,WAAOI;AAAA;AAAA;AAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAMR,KAAK,eAAeY,CAAI,CAAC;AAAA,YAC5CC;AAAA,MACA,KAAK;AAAA,MACLb;AAAA,kCACsB,KAAK,kBAAkBY,EAAK,MAAMA,EAAK,GAAG,CAAC;AAAA,kCAC3Cb,EAAgBa,EAAK,QAAQA,EAAK,QAAQ,CAAC;AAAA;AAAA,IAAA,CAElE;AAAA;AAAA;AAAA,+BAGoBD,CAAK,GAAGA,CAAK;AAAA;AAAA;AAAA;AAAA,EAI1C;AAAA,EAEQ,gBAAgBf,GAA0B;AAChD,WAAOI;AAAA,QACHJ,EAAK;AAAA,MACL,CAACC,MAAQG;AAAA,8BACaH,EAAI,MAAM,QAAQ,EAAE,IAAIA,EAAI,MAAM,QAAQ,EAAE;AAAA,iCACzC,KAAK,eAAeA,CAAG,CAAC;AAAA,cAC3C,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA,iCACtBA,EAAI,IAAI;AAAA,iCACRE,EAAgBF,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA;AAAA;AAAA,IAAA,CAGnE;AAAA;AAAA,EAEL;AAAA,EAEQ,aAAa;AACnB,UAAMD,IAAO,KAAK,WAAA,GACZkB,IAAMlB,GACNmB,IAAS,CAAC,GAAGnB,CAAI,EAAE,QAAA,GACnBoB,IAAW,KAAK,gBAAgBF,CAAG,GACnCG,IAAc,KAAK,gBAAgBF,CAAM;AAE/C,WAAOf;AAAA;AAAA;AAAA,0BAGe,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,mCAIJgB,CAAQ,GAAGA,CAAQ;AAAA,mCACnBC,CAAW,GAAGA,CAAW;AAAA;AAAA;AAAA,EAG1D;AAAA,EAEQ,aAAa;AACnB,WAAOjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOCkB;AAAA,MACA,KAAK;AAAA,MACL,CAACpB,MAAQA,EAAI;AAAA,MACb,CAACA,MAAQE;AAAA,gCACWF,EAAI,MAAM,QAAQ,EAAE,IAAIA,EAAI,MAAM,QAAQ,EAAE;AAAA,qCACvC,KAAK,eAAeA,CAAG,CAAC;AAAA;AAAA,oBAEzC,KAAK,kBAAkBA,EAAI,MAAMA,EAAI,GAAG,CAAC;AAAA,+CACdA,EAAI,IAAI;AAAA;AAAA;AAAA,sBAGjCC,EAAgBD,EAAI,QAAQA,EAAI,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,IAAA,CAIpD;AAAA;AAAA;AAAA;AAAA,EAIT;AAAA,EAEA,SAAS;AAEP,QAAI,EADU,KAAK,SAAS,SAAS,CAAA,GAC1B,OAAQ,QAAOW;AAE1B,YAAQ,KAAK,SAAA;AAAA,MACX,KAAK;AACH,eAAO,KAAK,aAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,UAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,WAAA;AAAA,MACd,KAAK;AACH,eAAO,KAAK,WAAA;AAAA,MACd;AACE,eAAOU,EAAe,IAAI;AAAA,IAAA;AAAA,EAEhC;AACF;AAtUanC,EAIJ,SAAS,CAACoC,GAA0BC,EAAKC,CAAM,CAAC;AAGvDC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GANnBxC,EAOX,WAAA,WAAA,CAAA;AAGAuC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,UAAA,CAAW;AAAA,GATvBxC,EAUX,WAAA,WAAA,CAAA;AAGQuC,EAAA;AAAA,EADPE,EAAA;AAAM,GAZIzC,EAaH,WAAA,YAAA,CAAA;AAGAuC,EAAA;AAAA,EADPE,EAAA;AAAM,GAfIzC,EAgBH,WAAA,YAAA,CAAA;AAhBGA,IAANuC,EAAA;AAAA,EADNG,EAAU,EAAE,UAAUC,EAAA,CAA+B;AAAA,GACzC3C,CAAA;"}

package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.scss.js

@@ -0,0 +1,5 @@
+const a = '@charset "UTF-8";:host{display:block;width:100%}.marquee{position:relative;overflow:hidden}:host([data-variant=classic]) .marquee,:host(:not([data-variant])) .marquee{border-radius:var(--radius-sm);border:1px solid var(--panel-border);background:var(--panel-bg);box-shadow:var(--panel-shadow)}:host([data-variant=classic]) .marquee:before,:host([data-variant=classic]) .marquee:after,:host(:not([data-variant])) .marquee:before,:host(:not([data-variant])) .marquee:after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}:host([data-variant=classic]) .marquee:before,:host(:not([data-variant])) .marquee:before{left:0;background:linear-gradient(90deg,var(--panel-fade-start),transparent)}:host([data-variant=classic]) .marquee:after,:host(:not([data-variant])) .marquee:after{right:0;background:linear-gradient(-90deg,var(--panel-fade-end),transparent)}:host([data-variant=classic]) .track,:host(:not([data-variant])) .track{display:flex;width:max-content;animation:scroll var(--speed, 30s) linear infinite}:host([data-variant=classic]) .group,:host(:not([data-variant])) .group{display:flex;align-items:center}:host([data-variant=classic]) .item,:host(:not([data-variant])) .item{display:inline-flex;align-items:center;gap:7px;padding:8px 0;white-space:nowrap;font-size:12px;color:var(--text-dim)}:host([data-variant=classic]) .item .txt,:host(:not([data-variant])) .item .txt{display:inline-flex;align-items:center;gap:.35em;line-height:1}:host([data-variant=classic]) .item .amt,:host(:not([data-variant])) .item .amt{font-family:var(--font-mono);font-weight:800;color:var(--gold-strong);text-shadow:0 0 12px var(--gold-glow)}:host([data-variant=classic]) .item .tail,:host(:not([data-variant])) .item .tail{display:inline-flex;align-items:center;gap:.35em}:host([data-variant=classic]) .item .icon img,:host(:not([data-variant])) .item .icon img{width:16px;height:16px;object-fit:contain;border-radius:3px;vertical-align:middle}:host([data-variant=classic]) .sep,:host(:not([data-variant])) .sep{margin:0 18px;font-size:10px;line-height:1;color:var(--text-faint);opacity:.5}:host([data-variant=ticker]) .marquee{border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--panel-bg);padding:10px 0;box-shadow:inset 0 1px #ffffff0d,var(--panel-shadow)}:host([data-variant=ticker]) .marquee:before,:host([data-variant=ticker]) .marquee:after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}:host([data-variant=ticker]) .marquee:before{left:0;background:linear-gradient(90deg,var(--panel-fade-start),transparent)}:host([data-variant=ticker]) .marquee:after{right:0;background:linear-gradient(-90deg,var(--panel-fade-end),transparent)}:host([data-variant=ticker]) .track{display:flex;align-items:center;width:max-content;animation:scroll var(--speed, 38s) linear infinite}:host([data-variant=ticker]) .group{display:flex;flex-shrink:0;align-items:center}:host([data-variant=ticker]) .win{display:inline-flex;align-items:center;gap:8px;padding:0 18px;white-space:nowrap}:host([data-variant=ticker]) .win .chip{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:var(--green);background:color-mix(in srgb,var(--green) 16%,transparent);flex-shrink:0}:host([data-variant=ticker]) .win.big .chip{color:var(--gold-strong);background:color-mix(in srgb,var(--gold) 18%,transparent)}:host([data-variant=ticker]) .win .chip svg{width:15px;height:15px}:host([data-variant=ticker]) .win .chip img{width:15px;height:15px;object-fit:contain;border-radius:3px}:host([data-variant=ticker]) .txt{display:inline-flex;align-items:center;gap:.35em;line-height:1;font-size:13px;color:var(--text)}:host([data-variant=ticker]) .txt .verb,:host([data-variant=ticker]) .txt .on{color:var(--text-dim)}:host([data-variant=ticker]) .txt .tail{display:inline-flex;align-items:center;gap:.35em}:host([data-variant=ticker]) .txt .player-name .name{font-weight:700}:host([data-variant=ticker]) .txt .game{color:var(--text-faint)}:host([data-variant=ticker]) .amt{font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--green)}:host([data-variant=ticker]) .win.big .amt{color:var(--gold-strong)}:host([data-variant=ticker]) .win.big .player-name:not(.is-vip) .name{color:var(--gold-strong)}:host([data-variant=ticker]) .sep{flex-shrink:0;align-self:center;margin:0 14px;font-size:10px;line-height:1;color:var(--text-faint);opacity:.5;user-select:none}:host([data-variant=hud]) .marquee{display:flex;align-items:stretch;gap:0;background:var(--panel-bg);border:1px solid color-mix(in srgb,var(--violet) 35%,var(--panel-border));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:var(--panel-shadow),inset 0 0 30px color-mix(in srgb,var(--violet) 8%,transparent)}:host([data-variant=hud]) .hero{display:flex;align-items:center;gap:14px;padding:16px 22px;flex-shrink:0;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,transparent),transparent);border-right:1px solid color-mix(in srgb,var(--violet) 25%,transparent);position:relative}:host([data-variant=hud]) .hero .badge{position:absolute;top:8px;left:22px;font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--violet) 80%,white)}:host([data-variant=hud]) .hero .chip{display:grid;place-items:center;width:40px;height:40px;color:var(--gold-strong);margin-top:10px}:host([data-variant=hud]) .hero .chip svg{width:32px;height:32px}:host([data-variant=hud]) .hero .chip img{width:32px;height:32px;object-fit:contain;border-radius:4px}:host([data-variant=hud]) .hero .info{display:flex;flex-direction:column;margin-top:12px;animation:flip .5s ease}:host([data-variant=hud]) .hero .who{font-size:13px;color:var(--text);font-weight:700}:host([data-variant=hud]) .hero .val{font-family:var(--font-mono);font-weight:800;font-size:22px;color:var(--gold-strong);line-height:1}:host([data-variant=hud]) .stream{position:relative;overflow:hidden;flex:1;display:flex;align-items:center}:host([data-variant=hud]) .stream:after{content:"";position:absolute;right:0;top:0;bottom:0;width:60px;background:linear-gradient(270deg,var(--panel-bg),transparent)}:host([data-variant=hud]) .track{display:flex;width:max-content;animation:scroll var(--speed, 32s) linear infinite}:host([data-variant=hud]) .group{display:flex;flex-shrink:0}:host([data-variant=hud]) .win{display:inline-flex;align-items:center;gap:8px;padding:0 18px;white-space:nowrap;font-size:13px;color:var(--text-faint)}:host([data-variant=hud]) .win svg{width:15px;height:15px;color:color-mix(in srgb,var(--violet) 75%,white)}:host([data-variant=hud]) .win .name,:host([data-variant=hud]) .win .player-name .name{color:var(--text)}:host([data-variant=hud]) .win .amt{font-family:var(--font-mono);font-weight:700;color:var(--gold-strong)}:host([data-variant=hud]) .win .sep{color:color-mix(in srgb,var(--violet) 50%,transparent)}:host([data-variant=belt]) .marquee{display:flex;flex-direction:column;gap:10px;padding:16px 0;border:1px solid var(--panel-border);border-radius:18px;background:linear-gradient(180deg,var(--panel-bg),var(--bg));box-shadow:var(--panel-shadow)}:host([data-variant=belt]) .marquee:before,:host([data-variant=belt]) .marquee:after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}:host([data-variant=belt]) .marquee:before{left:0;background:linear-gradient(90deg,var(--panel-bg),transparent)}:host([data-variant=belt]) .marquee:after{right:0;background:linear-gradient(270deg,var(--panel-bg),transparent)}:host([data-variant=belt]) .lane{display:flex;width:max-content}:host([data-variant=belt]) .lane-a{animation:scroll var(--speed, 40s) linear infinite}:host([data-variant=belt]) .lane-b{animation:scroll-reverse var(--speed, 40s) linear infinite}:host([data-variant=belt]) .group{display:flex;flex-shrink:0;gap:10px;padding-right:10px}:host([data-variant=belt]) .pill{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;white-space:nowrap;background:#ffffff0a;border:1px solid var(--panel-border)}:host([data-variant=belt]) .pill.big{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}:host([data-variant=belt]) .pill .chip{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;color:#46d18a;background:color-mix(in srgb,#46d18a 16%,transparent);flex-shrink:0}:host([data-variant=belt]) .pill.big .chip{color:var(--gold-strong);background:color-mix(in srgb,var(--gold) 20%,transparent)}:host([data-variant=belt]) .pill .chip svg{width:15px;height:15px}:host([data-variant=belt]) .pill .chip img{width:15px;height:15px;object-fit:contain;border-radius:3px}:host([data-variant=belt]) .pill .player-name .name{font-size:13px;font-weight:700;color:var(--text)}:host([data-variant=belt]) .pill .game{font-size:12px;color:var(--text-faint)}:host([data-variant=belt]) .pill .amt{font-family:var(--font-mono);font-weight:700;font-size:13px;color:#46d18a}:host([data-variant=belt]) .pill.big .amt{color:var(--gold-strong)}:host([data-variant=feed]) .feed-panel{border:1px solid var(--panel-border);border-radius:18px;background:linear-gradient(180deg,var(--panel-bg),var(--bg));padding:14px;box-shadow:var(--panel-shadow)}:host([data-variant=feed]) .head{display:flex;align-items:center;gap:8px;padding:2px 6px 12px}:host([data-variant=feed]) .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#46d18a;text-transform:uppercase}:host([data-variant=feed]) .live i{width:7px;height:7px;border-radius:50%;background:#46d18a;box-shadow:0 0 color-mix(in srgb,#46d18a 70%,transparent);animation:pulse 1.6s infinite}:host([data-variant=feed]) .head small{color:var(--text-faint);font-size:12px}:host([data-variant=feed]) .list{display:flex;flex-direction:column;gap:8px;overflow:hidden}:host([data-variant=feed]) .row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#ffffff08;border:1px solid var(--panel-border);animation:drop .5s cubic-bezier(.22,1,.36,1)}:host([data-variant=feed]) .row.big{background:color-mix(in srgb,var(--gold) 12%,transparent);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}:host([data-variant=feed]) .row .chip{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex-shrink:0;color:#46d18a;background:color-mix(in srgb,#46d18a 16%,transparent)}:host([data-variant=feed]) .row.big .chip{color:var(--gold-strong);background:color-mix(in srgb,var(--gold) 20%,transparent)}:host([data-variant=feed]) .row .chip svg{width:20px;height:20px}:host([data-variant=feed]) .row .chip img{width:20px;height:20px;object-fit:contain;border-radius:4px}:host([data-variant=feed]) .meta{display:flex;flex-direction:column;min-width:0}:host([data-variant=feed]) .meta .player-name .name{font-size:14px;color:var(--text)}:host([data-variant=feed]) .meta .game-line{font-size:12px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([data-variant=feed]) .amt{margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:15px;color:#46d18a}:host([data-variant=feed]) .row.big .amt{color:var(--gold-strong)}.marquee:hover .track,.marquee:hover .lane{animation-play-state:paused}@keyframes scroll{to{transform:translate(-50%)}}@keyframes scroll-reverse{0%{transform:translate(-50%)}to{transform:translate(0)}}@keyframes flip{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes drop{0%{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{to{box-shadow:0 0 0 7px transparent}}@media(prefers-reduced-motion:reduce){.track,.lane{animation:none!important}:host([data-variant=hud]) .hero .info,:host([data-variant=feed]) .row,:host([data-variant=feed]) .live i{animation:none}}';
+export {
+  a as default
+};
+//# sourceMappingURL=marquee-section.scss.js.map

package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-section.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee-section.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-variants.js

@@ -0,0 +1,16 @@
+const t = [
+  "classic",
+  "ticker",
+  "feed",
+  "hud",
+  "belt"
+], c = "ticker";
+function i(e) {
+  return t.includes(e);
+}
+export {
+  c as ACTIVE_MARQUEE_VARIANT,
+  t as MARQUEE_VARIANTS,
+  i as isMarqueeVariant
+};
+//# sourceMappingURL=marquee-variants.js.map

package/dist/components/os-leaderboard-casino/sections/marquee-section/marquee-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee-variants.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/marquee-section/marquee-variants.ts"],"sourcesContent":["/** Visual treatments for the winners ticker (v0 + legacy). */\nexport const MARQUEE_VARIANTS = [\n  'classic',\n  'ticker',\n  'feed',\n  'hud',\n  'belt',\n] as const;\n\nexport type MarqueeVariant = (typeof MARQUEE_VARIANTS)[number];\n\n/** Active variant — v0 seamless ticker from `v0-components/marquee-section`. */\nexport const ACTIVE_MARQUEE_VARIANT: MarqueeVariant = 'ticker';\n\nexport function isMarqueeVariant(value: string): value is MarqueeVariant {\n  return (MARQUEE_VARIANTS as readonly string[]).includes(value);\n}\n"],"names":["MARQUEE_VARIANTS","ACTIVE_MARQUEE_VARIANT","isMarqueeVariant","value"],"mappings":"AACO,MAAMA,IAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKaC,IAAyC;AAE/C,SAASC,EAAiBC,GAAwC;AACvE,SAAQH,EAAuC,SAASG,CAAK;AAC/D;"}

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.html.js

@@ -0,0 +1,18 @@
+import { html as i } from "lit";
+function t(e) {
+  return i`<section>
+  <div class="section-header">
+    <h2 class="section-title">${e.sectionTitle}</h2>
+    <span class="strategy" ?hidden=${!e.showStrategy}>${e.strategyLabel}</span>
+  </div>
+
+  <div class="podium">${e.renderPodium()}</div>
+
+  <div class="list" ?hidden=${!e.hasTierList}>${e.renderTierList()}</div>
+</section>
+`;
+}
+export {
+  t as default
+};
+//# sourceMappingURL=prize-section.html.js.map

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prize-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/prize-section/prize-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section>\n  <div class=\"section-header\">\n    <h2 class=\"section-title\">${host.sectionTitle}</h2>\n    <span class=\"strategy\" ?hidden=${!host.showStrategy}>${host.strategyLabel}</span>\n  </div>\n\n  <div class=\"podium\">${host.renderPodium()}</div>\n\n  <div class=\"list\" ?hidden=${!host.hasTierList}>${host.renderTierList()}</div>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA,gCAEuBD,EAAK,YAAY;AAAA,qCACZ,CAACA,EAAK,YAAY,IAAIA,EAAK,aAAa;AAAA;AAAA;AAAA,wBAGrDA,EAAK,cAAc;AAAA;AAAA,8BAEb,CAACA,EAAK,WAAW,IAAIA,EAAK,eAAc,CAAE;AAAA;AAAA;AAGxE;"}

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.js

@@ -0,0 +1,134 @@
+import { LitElement as f, html as o, nothing as a } from "lit";
+import { property as P } from "lit/decorators.js";
+import { Component as p } from "../../../../shared/lib/lit/component.js";
+import { scss as v } from "../../../../shared/lib/lit/scss.js";
+import { DEFAULT_PRIZE_TITLE as b } from "../../constants/defaults.js";
+import { OS_LEADERBOARD_CASINO_PRIZE as $ } from "../../constants/tags.js";
+import { osLeaderboardCasinoTheme as g } from "../../theme/styles.js";
+import { labelText as d } from "../../types/data.js";
+import { iconService as u } from "../../services/icon.service.js";
+import { OS_LEADERBOARD_CASINO_PRIZE_CLICK as k } from "../../types/events.js";
+import S from "./prize-section.html.js";
+import _ from "./prize-section.scss.js";
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (r, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? z(t, e) : t, n = r.length - 1, c; n >= 0; n--)
+    (c = r[n]) && (s = (i ? c(t, e, s) : c(s)) || s);
+  return i && s && y(t, e, s), s;
+};
+function F(r) {
+  return r.rankFrom === r.rankTo ? `#${r.rankFrom}` : `#${r.rankFrom}–${r.rankTo}`;
+}
+function m(r, t) {
+  return r.find(
+    (e) => e.rankFrom === t && e.rankTo === t
+  );
+}
+function C(r) {
+  return r.filter(
+    (t) => !(t.rankFrom === t.rankTo && t.rankFrom >= 1 && t.rankFrom <= 3)
+  );
+}
+let l = class extends f {
+  constructor() {
+    super(...arguments), this.restPrizes = [];
+  }
+  get sectionTitle() {
+    return this.section?.title ?? b;
+  }
+  get showStrategy() {
+    return !!this.section?.allocationStrategy;
+  }
+  get strategyLabel() {
+    return this.section?.allocationStrategy === "SPLIT_PRIZE" ? "Split Prize" : "Best Prize";
+  }
+  get hasTierList() {
+    return this.restPrizes.length > 0;
+  }
+  willUpdate() {
+    const r = this.section?.prizePackage?.prizes ?? [];
+    this.firstPrize = m(r, 1), this.secondPrize = m(r, 2), this.thirdPrize = m(r, 3), this.restPrizes = C(r).sort(
+      (t, e) => t.rankFrom - e.rankFrom
+    );
+  }
+  onPrizeClick(r) {
+    this.dispatchEvent(
+      new CustomEvent(k, {
+        detail: { prize: r },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  formatValue(r) {
+    if (r.value == null) return "";
+    try {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: r.currency ?? "USD",
+        maximumFractionDigits: 0
+      }).format(r.value);
+    } catch {
+      return `${r.value} ${r.currency ?? ""}`.trim();
+    }
+  }
+  renderPodiumSlot(r, t) {
+    const e = {
+      first: "gold",
+      second: "silver",
+      third: "bronze"
+    }, i = { first: 1, second: 2, third: 3 }, s = {
+      first: "Champion",
+      second: "2nd place",
+      third: "3rd place"
+    }, n = t === "first" ? 68 : 52;
+    return o`
+      <button class="slot ${t}" @click=${() => this.onPrizeClick(r)}>
+        <div class="coin">
+          <os-leaderboard-casino-medal-coin
+            variant=${e[t]}
+            rank=${i[t]}
+            size=${n}
+          ></os-leaderboard-casino-medal-coin>
+        </div>
+        <div class="place">${s[t]}</div>
+        <div class="name">${d(r.label)}</div>
+        <div class="value">${this.formatValue(r)}</div>
+      </button>
+    `;
+  }
+  renderPodium() {
+    return o`
+      ${this.secondPrize ? this.renderPodiumSlot(this.secondPrize, "second") : a}
+      ${this.firstPrize ? this.renderPodiumSlot(this.firstPrize, "first") : a}
+      ${this.thirdPrize ? this.renderPodiumSlot(this.thirdPrize, "third") : a}
+    `;
+  }
+  renderTierList() {
+    return o`${this.restPrizes.map(
+      (r) => o`
+        <button class="tier" @click=${() => this.onPrizeClick(r)}>
+          <span class="icon">${u.get(u.resolvePrizeIconName(r.label)).svg()}</span>
+          <span class="info">
+            <span class="name">${d(r.label)}</span>
+            <span class="range">Rank ${F(r)}</span>
+          </span>
+          <span class="value">${this.formatValue(r)}</span>
+        </button>
+      `
+    )}`;
+  }
+  render() {
+    return (this.section?.prizePackage?.prizes ?? []).length ? S(this) : a;
+  }
+};
+l.styles = [g, v(_)];
+h([
+  P({ attribute: !1 })
+], l.prototype, "section", 2);
+l = h([
+  p({ selector: $ })
+], l);
+export {
+  l as OsLeaderboardCasinoPrize
+};
+//# sourceMappingURL=prize-section.js.map

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prize-section.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/prize-section/prize-section.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Component } from '@oddsmith/lib/lit/component.js';\nimport { scss } from '@oddsmith/lib/lit/scss.js';\nimport { DEFAULT_PRIZE_TITLE } from '@os-leaderboard-casino/constants/defaults.js';\nimport { OS_LEADERBOARD_CASINO_PRIZE } from '@os-leaderboard-casino/constants/tags.js';\nimport { osLeaderboardCasinoTheme } from '@os-leaderboard-casino/theme/index.js';\nimport {\n  labelText,\n  type QuizPrize,\n} from '@os-leaderboard-casino/types/data.js';\nimport { iconService } from '@os-leaderboard-casino/services/icon.service.js';\nimport { OS_LEADERBOARD_CASINO_PRIZE_CLICK } from '@os-leaderboard-casino/types/events.js';\nimport type { OsLeaderboardCasinoPrizeSection } from '@os-leaderboard-casino/types/sections.js';\nimport type { PrizeSectionHost } from './prize-section.host.js';\nimport './components/medal-coin/medal-coin.js';\nimport renderTemplate from './prize-section.html?lit-html';\nimport styles from './prize-section.scss?inline';\n\nfunction rankRange(prize: QuizPrize): string {\n  return prize.rankFrom === prize.rankTo\n    ? `#${prize.rankFrom}`\n    : `#${prize.rankFrom}–${prize.rankTo}`;\n}\n\nfunction podiumPrizeForRank(\n  prizes: QuizPrize[],\n  rank: 1 | 2 | 3,\n): QuizPrize | undefined {\n  return prizes.find(\n    (prize) => prize.rankFrom === rank && prize.rankTo === rank,\n  );\n}\n\nfunction tierPrizesFrom(prizes: QuizPrize[]): QuizPrize[] {\n  return prizes.filter(\n    (prize) =>\n      !(\n        prize.rankFrom === prize.rankTo &&\n        prize.rankFrom >= 1 &&\n        prize.rankFrom <= 3\n      ),\n  );\n}\n\n/** Top-3 metallic podium showcase + remaining prize tiers. */\n@Component({ selector: OS_LEADERBOARD_CASINO_PRIZE })\nexport class OsLeaderboardCasinoPrize\n  extends LitElement\n  implements PrizeSectionHost\n{\n  static styles = [osLeaderboardCasinoTheme, scss(styles)];\n\n  @property({ attribute: false })\n  section!: OsLeaderboardCasinoPrizeSection;\n\n  private restPrizes: QuizPrize[] = [];\n  private secondPrize?: QuizPrize;\n  private firstPrize?: QuizPrize;\n  private thirdPrize?: QuizPrize;\n\n  get sectionTitle(): string {\n    return this.section?.title ?? DEFAULT_PRIZE_TITLE;\n  }\n\n  get showStrategy(): boolean {\n    return Boolean(this.section?.allocationStrategy);\n  }\n\n  get strategyLabel(): string {\n    return this.section?.allocationStrategy === 'SPLIT_PRIZE'\n      ? 'Split Prize'\n      : 'Best Prize';\n  }\n\n  get hasTierList(): boolean {\n    return this.restPrizes.length > 0;\n  }\n\n  willUpdate() {\n    const prizes = this.section?.prizePackage?.prizes ?? [];\n    this.firstPrize = podiumPrizeForRank(prizes, 1);\n    this.secondPrize = podiumPrizeForRank(prizes, 2);\n    this.thirdPrize = podiumPrizeForRank(prizes, 3);\n    this.restPrizes = tierPrizesFrom(prizes).sort(\n      (left, right) => left.rankFrom - right.rankFrom,\n    );\n  }\n\n  private onPrizeClick(prize: QuizPrize) {\n    this.dispatchEvent(\n      new CustomEvent(OS_LEADERBOARD_CASINO_PRIZE_CLICK, {\n        detail: { prize },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private formatValue(prize: QuizPrize): string {\n    if (prize.value == null) return '';\n    try {\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: prize.currency ?? 'USD',\n        maximumFractionDigits: 0,\n      }).format(prize.value);\n    } catch {\n      return `${prize.value} ${prize.currency ?? ''}`.trim();\n    }\n  }\n\n  private renderPodiumSlot(\n    prize: QuizPrize,\n    place: 'first' | 'second' | 'third',\n  ) {\n    const variants = {\n      first: 'gold',\n      second: 'silver',\n      third: 'bronze',\n    } as const;\n    const ranks = { first: 1, second: 2, third: 3 };\n    const labels = {\n      first: 'Champion',\n      second: '2nd place',\n      third: '3rd place',\n    };\n    const coinSize = place === 'first' ? 68 : 52;\n    return html`\n      <button class=\"slot ${place}\" @click=${() => this.onPrizeClick(prize)}>\n        <div class=\"coin\">\n          <os-leaderboard-casino-medal-coin\n            variant=${variants[place]}\n            rank=${ranks[place]}\n            size=${coinSize}\n          ></os-leaderboard-casino-medal-coin>\n        </div>\n        <div class=\"place\">${labels[place]}</div>\n        <div class=\"name\">${labelText(prize.label)}</div>\n        <div class=\"value\">${this.formatValue(prize)}</div>\n      </button>\n    `;\n  }\n\n  renderPodium() {\n    return html`\n      ${this.secondPrize\n        ? this.renderPodiumSlot(this.secondPrize, 'second')\n        : nothing}\n      ${this.firstPrize\n        ? this.renderPodiumSlot(this.firstPrize, 'first')\n        : nothing}\n      ${this.thirdPrize\n        ? this.renderPodiumSlot(this.thirdPrize, 'third')\n        : nothing}\n    `;\n  }\n\n  renderTierList() {\n    return html`${this.restPrizes.map(\n      (prize) => html`\n        <button class=\"tier\" @click=${() => this.onPrizeClick(prize)}>\n          <span class=\"icon\">${iconService.get(iconService.resolvePrizeIconName(prize.label)).svg()}</span>\n          <span class=\"info\">\n            <span class=\"name\">${labelText(prize.label)}</span>\n            <span class=\"range\">Rank ${rankRange(prize)}</span>\n          </span>\n          <span class=\"value\">${this.formatValue(prize)}</span>\n        </button>\n      `,\n    )}`;\n  }\n\n  render() {\n    const prizes = this.section?.prizePackage?.prizes ?? [];\n    if (!prizes.length) return nothing;\n    return renderTemplate(this);\n  }\n}\n"],"names":["rankRange","prize","podiumPrizeForRank","prizes","rank","tierPrizesFrom","OsLeaderboardCasinoPrize","LitElement","DEFAULT_PRIZE_TITLE","left","right","OS_LEADERBOARD_CASINO_PRIZE_CLICK","place","variants","ranks","labels","coinSize","html","labelText","nothing","iconService","renderTemplate","osLeaderboardCasinoTheme","scss","styles","__decorateClass","property","Component","OS_LEADERBOARD_CASINO_PRIZE"],"mappings":"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"}

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.scss.js

@@ -0,0 +1,5 @@
+const o = '@charset "UTF-8";:host{display:block;width:100%}.strategy{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--violet-soft);border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);color:#c9adff}.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}.slot{position:relative;overflow:hidden;border-radius:var(--radius-sm);padding:16px 12px 14px;text-align:center;border:1px solid var(--panel-border);background:var(--panel-bg);box-shadow:var(--panel-shadow);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.slot:hover{transform:translateY(-3px)}.slot.first{order:2;padding-top:22px;padding-bottom:20px;border-color:var(--panel-border);background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 60%),var(--panel-bg);box-shadow:var(--panel-shadow)}.slot.second{order:1;border-color:var(--panel-border);background:var(--panel-bg)}.slot.third{order:3;border-color:var(--panel-border);background:var(--panel-bg)}.coin{display:flex;justify-content:center;min-height:52px}.slot.first .coin{min-height:68px}.place{margin-top:7px;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}.slot.first .place{color:var(--gold)}.slot.second .place{color:var(--silver)}.slot.third .place{color:var(--bronze)}.slot .name{margin-top:5px;font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot .value{margin-top:6px;font-family:var(--font-mono);font-size:16px;font-weight:800;color:var(--gold-strong)}.slot.first .value{font-size:20px;text-shadow:0 0 18px var(--gold-glow)}.list{display:flex;flex-direction:column;gap:7px;margin-top:10px}.tier{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-family:var(--font-body);padding:11px 14px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-sm);box-shadow:var(--panel-shadow);transition:border-color var(--transition-fast)}.tier:hover{border-color:var(--hairline-gold)}.tier .icon{flex:none;display:grid;place-items:center;line-height:0}.tier .icon svg{width:28px;height:28px}.tier .info{flex:1;min-width:0}.tier .name{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tier .range{margin-top:1px;font-size:11px;color:var(--text-dim)}.tier .value{flex:none;font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--gold)}@media(max-width:480px){.slot .value{font-size:13.5px}.slot.first .value{font-size:16px}}';
+export {
+  o as default
+};
+//# sourceMappingURL=prize-section.scss.js.map

package/dist/components/os-leaderboard-casino/sections/prize-section/prize-section.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prize-section.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.html.js

@@ -0,0 +1,34 @@
+import { html as a } from "lit";
+function t(e) {
+  return a`<section class="strip">
+  <os-leaderboard-casino-stat-rail
+    accent="participants"
+    icon="users"
+    segment="${e.participantsSegment}"
+    value="${e.participantsLabel}"
+    label="Participants"
+  ></os-leaderboard-casino-stat-rail>
+  <os-leaderboard-casino-stat-rail
+    ?hidden=${!e.showPrizes}
+    accent="prizes"
+    icon="gift"
+    segment="${e.prizesSegment}"
+    value="${e.prizesLabel}"
+    label="Prize Tiers"
+  ></os-leaderboard-casino-stat-rail>
+  <os-leaderboard-casino-stat-rail
+    ?hidden=${!e.showBiggestWin}
+    accent="biggestWin"
+    icon="trophy"
+    segment="${e.biggestWinSegment}"
+    value="${e.biggestWinLabel}"
+    label="Biggest Win"
+    compact
+  ></os-leaderboard-casino-stat-rail>
+</section>
+`;
+}
+export {
+  t as default
+};
+//# sourceMappingURL=stats-section.html.js.map

package/dist/components/os-leaderboard-casino/sections/stats-section/stats-section.html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-section.html.js","sources":["../../../../../src/components/os-leaderboard-casino/sections/stats-section/stats-section.html?lit-html"],"sourcesContent":["\nimport { html } from 'lit';\n\nexport default function render(host) {\n  return html`<section class=\"strip\">\n  <os-leaderboard-casino-stat-rail\n    accent=\"participants\"\n    icon=\"users\"\n    segment=\"${host.participantsSegment}\"\n    value=\"${host.participantsLabel}\"\n    label=\"Participants\"\n  ></os-leaderboard-casino-stat-rail>\n  <os-leaderboard-casino-stat-rail\n    ?hidden=${!host.showPrizes}\n    accent=\"prizes\"\n    icon=\"gift\"\n    segment=\"${host.prizesSegment}\"\n    value=\"${host.prizesLabel}\"\n    label=\"Prize Tiers\"\n  ></os-leaderboard-casino-stat-rail>\n  <os-leaderboard-casino-stat-rail\n    ?hidden=${!host.showBiggestWin}\n    accent=\"biggestWin\"\n    icon=\"trophy\"\n    segment=\"${host.biggestWinSegment}\"\n    value=\"${host.biggestWinLabel}\"\n    label=\"Biggest Win\"\n    compact\n  ></os-leaderboard-casino-stat-rail>\n</section>\n`;\n}\n"],"names":["render","host","html"],"mappings":";AAGe,SAASA,EAAOC,GAAM;AACnC,SAAOC;AAAA;AAAA;AAAA;AAAA,eAIMD,EAAK,mBAAmB;AAAA,aAC1BA,EAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,cAIrB,CAACA,EAAK,UAAU;AAAA;AAAA;AAAA,eAGfA,EAAK,aAAa;AAAA,aACpBA,EAAK,WAAW;AAAA;AAAA;AAAA;AAAA,cAIf,CAACA,EAAK,cAAc;AAAA;AAAA;AAAA,eAGnBA,EAAK,iBAAiB;AAAA,aACxBA,EAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAMjC;"}