@oddsmith/ui 0.0.0

package/docs/components.bundle.js

@@ -0,0 +1,1669 @@
+const We = "sf-leaderboard-default", Ye = { base: { 1: "#161a26", 2: "#12151f", 3: "#0a0c14", 4: "#060810" }, primary: { 1: "#00d4ff", 2: "#00e5ff", 3: "linear-gradient(135deg, #00d4ff 0%, #00e5ff 100%)" }, semantic: { success: "#00d26a", warning: "#ffa502", error: "#ff4757", informative: "#2388fb" }, neutral: "#f0f0f5", surface: { divider: "rgba(42, 47, 66, 0.55)", muted: "#808090", successBright: "#15bf81" } }, Ge = { primary: "'Inter', system-ui, -apple-system, sans-serif", secondary: "'Inter', system-ui, -apple-system, sans-serif", mono: "'JetBrains Mono', monospace" }, qe = { first: { tableIcon: "#ffd700", podiumSlot: "#ffd700", podiumNumber: "#ffd700" }, second: { tableIcon: "#c0c0c0", podiumSlot: "#c0c0c0", podiumNumber: "#c0c0c0" }, third: { tableIcon: "#cd7f32", podiumSlot: "#cd7f32", podiumNumber: "#cd7f32" } }, Ke = { columns: { rank: { enabled: !1 }, player: { enabled: !1 }, games: { enabled: !1 }, winRate: { enabled: !1 }, streak: { enabled: !1 }, winnings: { enabled: !1 } } }, Qe = {
+  id: We,
+  palette: Ye,
+  typography: Ge,
+  placement: qe,
+  table: Ke
+}, Je = Qe;
+function Ze(t) {
+  const e = t.trim().replace(/^#/, "");
+  if (!/^[0-9a-fA-F]{3,8}$/.test(e))
+    return null;
+  let r, i, a;
+  if (e.length === 3)
+    r = parseInt(e[0] + e[0], 16), i = parseInt(e[1] + e[1], 16), a = parseInt(e[2] + e[2], 16);
+  else if (e.length === 6)
+    r = parseInt(e.slice(0, 2), 16), i = parseInt(e.slice(2, 4), 16), a = parseInt(e.slice(4, 6), 16);
+  else
+    return null;
+  return `${r}, ${i}, ${a}`;
+}
+const Xe = [
+  "rank",
+  "player",
+  "games",
+  "winRate",
+  "streak",
+  "winnings"
+];
+function N(t, e, r) {
+  if (!r || r.includes("gradient"))
+    return;
+  const i = Ze(r);
+  i && (t[`${e}-rgb`] = i);
+}
+function et(t) {
+  const { palette: e, typography: r, placement: i, table: a } = t, n = {};
+  for (const c of ["1", "2", "3", "4"])
+    n[`--color-base-${c}`] = e.base[c];
+  for (const c of ["1", "2", "3"])
+    n[`--color-primary-${c}`] = e.primary[c];
+  n["--color-success"] = e.semantic.success, n["--color-warning"] = e.semantic.warning, n["--color-error"] = e.semantic.error, e.semantic.informative && (n["--color-informative"] = e.semantic.informative), n["--color-neutral"] = e.neutral, n["--color-surface-divider"] = e.surface.divider, n["--color-surface-muted"] = e.surface.muted, e.surface.successBright && (n["--color-surface-success-bright"] = e.surface.successBright), n["--font-primary"] = r.primary, n["--font-secondary"] = r.secondary, r.mono && (n["--font-mono"] = r.mono);
+  const s = [
+    ["first", i.first],
+    ["second", i.second],
+    ["third", i.third]
+  ];
+  for (const [c, l] of s)
+    n[`--place-${c}-table-icon`] = l.tableIcon, n[`--place-${c}-podium-slot`] = l.podiumSlot, n[`--place-${c}-podium-number`] = l.podiumNumber, N(n, `--place-${c}-table-icon`, l.tableIcon);
+  N(n, "--color-primary-1", e.primary[1]), N(n, "--color-success", e.semantic.success), N(n, "--color-warning", e.semantic.warning), N(n, "--color-error", e.semantic.error);
+  for (const c of Xe) {
+    const l = a.columns[c];
+    if (!l?.enabled)
+      continue;
+    const h = c.replace(/[A-Z]/g, (g) => `-${g.toLowerCase()}`);
+    l.color && (n[`--table-col-${h}-color`] = l.color), l.fontSize && (n[`--table-col-${h}-font-size`] = l.fontSize);
+  }
+  return n;
+}
+const tt = "data-sf-theme";
+function rt(t, e = document.documentElement) {
+  const r = et(t);
+  e.setAttribute(tt, t.id);
+  for (const [i, a] of Object.entries(r))
+    e.style.setProperty(i, a);
+}
+const X = globalThis, pe = X.ShadowRoot && (X.ShadyCSS === void 0 || X.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Oe = /* @__PURE__ */ Symbol(), ye = /* @__PURE__ */ new WeakMap();
+let at = class {
+  constructor(e, r, i) {
+    if (this._$cssResult$ = !0, i !== Oe) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = e, this.t = r;
+  }
+  get styleSheet() {
+    let e = this.o;
+    const r = this.t;
+    if (pe && e === void 0) {
+      const i = r !== void 0 && r.length === 1;
+      i && (e = ye.get(r)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && ye.set(r, e));
+    }
+    return e;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const Te = (t) => new at(typeof t == "string" ? t : t + "", void 0, Oe), it = (t, e) => {
+  if (pe) t.adoptedStyleSheets = e.map((r) => r instanceof CSSStyleSheet ? r : r.styleSheet);
+  else for (const r of e) {
+    const i = document.createElement("style"), a = X.litNonce;
+    a !== void 0 && i.setAttribute("nonce", a), i.textContent = r.cssText, t.appendChild(i);
+  }
+}, $e = pe ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
+  let r = "";
+  for (const i of e.cssRules) r += i.cssText;
+  return Te(r);
+})(t) : t;
+const { is: nt, defineProperty: st, getOwnPropertyDescriptor: ot, getOwnPropertyNames: lt, getOwnPropertySymbols: ct, getPrototypeOf: dt } = Object, k = globalThis, _e = k.trustedTypes, pt = _e ? _e.emptyScript : "", mt = k.reactiveElementPolyfillSupport, I = (t, e) => t, ee = { toAttribute(t, e) {
+  switch (e) {
+    case Boolean:
+      t = t ? pt : null;
+      break;
+    case Object:
+    case Array:
+      t = t == null ? t : JSON.stringify(t);
+  }
+  return t;
+}, fromAttribute(t, e) {
+  let r = t;
+  switch (e) {
+    case Boolean:
+      r = t !== null;
+      break;
+    case Number:
+      r = t === null ? null : Number(t);
+      break;
+    case Object:
+    case Array:
+      try {
+        r = JSON.parse(t);
+      } catch {
+        r = null;
+      }
+  }
+  return r;
+} }, me = (t, e) => !nt(t, e), ke = { attribute: !0, type: String, converter: ee, reflect: !1, useDefault: !1, hasChanged: me };
+Symbol.metadata ?? (Symbol.metadata = /* @__PURE__ */ Symbol("metadata")), k.litPropertyMetadata ?? (k.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+let O = class extends HTMLElement {
+  static addInitializer(e) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(e);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(e, r = ke) {
+    if (r.state && (r.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((r = Object.create(r)).wrapped = !0), this.elementProperties.set(e, r), !r.noAccessor) {
+      const i = /* @__PURE__ */ Symbol(), a = this.getPropertyDescriptor(e, i, r);
+      a !== void 0 && st(this.prototype, e, a);
+    }
+  }
+  static getPropertyDescriptor(e, r, i) {
+    const { get: a, set: n } = ot(this.prototype, e) ?? { get() {
+      return this[r];
+    }, set(s) {
+      this[r] = s;
+    } };
+    return { get: a, set(s) {
+      const c = a?.call(this);
+      n?.call(this, s), this.requestUpdate(e, c, i);
+    }, configurable: !0, enumerable: !0 };
+  }
+  static getPropertyOptions(e) {
+    return this.elementProperties.get(e) ?? ke;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(I("elementProperties"))) return;
+    const e = dt(this);
+    e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(I("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(I("properties"))) {
+      const r = this.properties, i = [...lt(r), ...ct(r)];
+      for (const a of i) this.createProperty(a, r[a]);
+    }
+    const e = this[Symbol.metadata];
+    if (e !== null) {
+      const r = litPropertyMetadata.get(e);
+      if (r !== void 0) for (const [i, a] of r) this.elementProperties.set(i, a);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [r, i] of this.elementProperties) {
+      const a = this._$Eu(r, i);
+      a !== void 0 && this._$Eh.set(a, r);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(e) {
+    const r = [];
+    if (Array.isArray(e)) {
+      const i = new Set(e.flat(1 / 0).reverse());
+      for (const a of i) r.unshift($e(a));
+    } else e !== void 0 && r.push($e(e));
+    return r;
+  }
+  static _$Eu(e, r) {
+    const i = r.attribute;
+    return i === !1 ? void 0 : typeof i == "string" ? i : typeof e == "string" ? e.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((e) => e(this));
+  }
+  addController(e) {
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
+  }
+  removeController(e) {
+    this._$EO?.delete(e);
+  }
+  _$E_() {
+    const e = /* @__PURE__ */ new Map(), r = this.constructor.elementProperties;
+    for (const i of r.keys()) this.hasOwnProperty(i) && (e.set(i, this[i]), delete this[i]);
+    e.size > 0 && (this._$Ep = e);
+  }
+  createRenderRoot() {
+    const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return it(e, this.constructor.elementStyles), e;
+  }
+  connectedCallback() {
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), this._$EO?.forEach((e) => e.hostConnected?.());
+  }
+  enableUpdating(e) {
+  }
+  disconnectedCallback() {
+    this._$EO?.forEach((e) => e.hostDisconnected?.());
+  }
+  attributeChangedCallback(e, r, i) {
+    this._$AK(e, i);
+  }
+  _$ET(e, r) {
+    const i = this.constructor.elementProperties.get(e), a = this.constructor._$Eu(e, i);
+    if (a !== void 0 && i.reflect === !0) {
+      const n = (i.converter?.toAttribute !== void 0 ? i.converter : ee).toAttribute(r, i.type);
+      this._$Em = e, n == null ? this.removeAttribute(a) : this.setAttribute(a, n), this._$Em = null;
+    }
+  }
+  _$AK(e, r) {
+    const i = this.constructor, a = i._$Eh.get(e);
+    if (a !== void 0 && this._$Em !== a) {
+      const n = i.getPropertyOptions(a), s = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : ee;
+      this._$Em = a;
+      const c = s.fromAttribute(r, n.type);
+      this[a] = c ?? this._$Ej?.get(a) ?? c, this._$Em = null;
+    }
+  }
+  requestUpdate(e, r, i, a = !1, n) {
+    if (e !== void 0) {
+      const s = this.constructor;
+      if (a === !1 && (n = this[e]), i ?? (i = s.getPropertyOptions(e)), !((i.hasChanged ?? me)(n, r) || i.useDefault && i.reflect && n === this._$Ej?.get(e) && !this.hasAttribute(s._$Eu(e, i)))) return;
+      this.C(e, r, i);
+    }
+    this.isUpdatePending === !1 && (this._$ES = this._$EP());
+  }
+  C(e, r, { useDefault: i, reflect: a, wrapped: n }, s) {
+    i && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, s ?? r ?? this[e]), n !== !0 || s !== void 0) || (this._$AL.has(e) || (this.hasUpdated || i || (r = void 0), this._$AL.set(e, r)), a === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
+  }
+  async _$EP() {
+    this.isUpdatePending = !0;
+    try {
+      await this._$ES;
+    } catch (r) {
+      Promise.reject(r);
+    }
+    const e = this.scheduleUpdate();
+    return e != null && await e, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [a, n] of this._$Ep) this[a] = n;
+        this._$Ep = void 0;
+      }
+      const i = this.constructor.elementProperties;
+      if (i.size > 0) for (const [a, n] of i) {
+        const { wrapped: s } = n, c = this[a];
+        s !== !0 || this._$AL.has(a) || c === void 0 || this.C(a, void 0, n, c);
+      }
+    }
+    let e = !1;
+    const r = this._$AL;
+    try {
+      e = this.shouldUpdate(r), e ? (this.willUpdate(r), this._$EO?.forEach((i) => i.hostUpdate?.()), this.update(r)) : this._$EM();
+    } catch (i) {
+      throw e = !1, this._$EM(), i;
+    }
+    e && this._$AE(r);
+  }
+  willUpdate(e) {
+  }
+  _$AE(e) {
+    this._$EO?.forEach((r) => r.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(e) {
+    return !0;
+  }
+  update(e) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach((r) => this._$ET(r, this[r]))), this._$EM();
+  }
+  updated(e) {
+  }
+  firstUpdated(e) {
+  }
+};
+O.elementStyles = [], O.shadowRootOptions = { mode: "open" }, O[I("elementProperties")] = /* @__PURE__ */ new Map(), O[I("finalized")] = /* @__PURE__ */ new Map(), mt?.({ ReactiveElement: O }), (k.reactiveElementVersions ?? (k.reactiveElementVersions = [])).push("2.1.2");
+const M = globalThis, Ae = (t) => t, te = M.trustedTypes, Ee = te ? te.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, De = "$lit$", _ = `lit$${Math.random().toFixed(9).slice(2)}$`, Le = "?" + _, ht = `<${Le}>`, z = document, H = () => z.createComment(""), V = (t) => t === null || typeof t != "object" && typeof t != "function", he = Array.isArray, gt = (t) => he(t) || typeof t?.[Symbol.iterator] == "function", de = `[ 	
+\f\r]`, U = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Se = /-->/g, Pe = />/g, S = RegExp(`>|${de}(?:([^\\s"'>=/]+)(${de}*=${de}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), ze = /'/g, Ce = /"/g, je = /^(?:script|style|textarea|title)$/i, ut = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), o = ut(1), T = /* @__PURE__ */ Symbol.for("lit-noChange"), d = /* @__PURE__ */ Symbol.for("lit-nothing"), Re = /* @__PURE__ */ new WeakMap(), P = z.createTreeWalker(z, 129);
+function Be(t, e) {
+  if (!he(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return Ee !== void 0 ? Ee.createHTML(e) : e;
+}
+const ft = (t, e) => {
+  const r = t.length - 1, i = [];
+  let a, n = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", s = U;
+  for (let c = 0; c < r; c++) {
+    const l = t[c];
+    let h, g, m = -1, w = 0;
+    for (; w < l.length && (s.lastIndex = w, g = s.exec(l), g !== null); ) w = s.lastIndex, s === U ? g[1] === "!--" ? s = Se : g[1] !== void 0 ? s = Pe : g[2] !== void 0 ? (je.test(g[2]) && (a = RegExp("</" + g[2], "g")), s = S) : g[3] !== void 0 && (s = S) : s === S ? g[0] === ">" ? (s = a ?? U, m = -1) : g[1] === void 0 ? m = -2 : (m = s.lastIndex - g[2].length, h = g[1], s = g[3] === void 0 ? S : g[3] === '"' ? Ce : ze) : s === Ce || s === ze ? s = S : s === Se || s === Pe ? s = U : (s = S, a = void 0);
+    const $ = s === S && t[c + 1].startsWith("/>") ? " " : "";
+    n += s === U ? l + ht : m >= 0 ? (i.push(h), l.slice(0, m) + De + l.slice(m) + _ + $) : l + _ + (m === -2 ? c : $);
+  }
+  return [Be(t, n + (t[r] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+};
+class W {
+  constructor({ strings: e, _$litType$: r }, i) {
+    let a;
+    this.parts = [];
+    let n = 0, s = 0;
+    const c = e.length - 1, l = this.parts, [h, g] = ft(e, r);
+    if (this.el = W.createElement(h, i), P.currentNode = this.el.content, r === 2 || r === 3) {
+      const m = this.el.content.firstChild;
+      m.replaceWith(...m.childNodes);
+    }
+    for (; (a = P.nextNode()) !== null && l.length < c; ) {
+      if (a.nodeType === 1) {
+        if (a.hasAttributes()) for (const m of a.getAttributeNames()) if (m.endsWith(De)) {
+          const w = g[s++], $ = a.getAttribute(m).split(_), Z = /([.?@])?(.*)/.exec(w);
+          l.push({ type: 1, index: n, name: Z[2], strings: $, ctor: Z[1] === "." ? bt : Z[1] === "?" ? xt : Z[1] === "@" ? wt : le }), a.removeAttribute(m);
+        } else m.startsWith(_) && (l.push({ type: 6, index: n }), a.removeAttribute(m));
+        if (je.test(a.tagName)) {
+          const m = a.textContent.split(_), w = m.length - 1;
+          if (w > 0) {
+            a.textContent = te ? te.emptyScript : "";
+            for (let $ = 0; $ < w; $++) a.append(m[$], H()), P.nextNode(), l.push({ type: 2, index: ++n });
+            a.append(m[w], H());
+          }
+        }
+      } else if (a.nodeType === 8) if (a.data === Le) l.push({ type: 2, index: n });
+      else {
+        let m = -1;
+        for (; (m = a.data.indexOf(_, m + 1)) !== -1; ) l.push({ type: 7, index: n }), m += _.length - 1;
+      }
+      n++;
+    }
+  }
+  static createElement(e, r) {
+    const i = z.createElement("template");
+    return i.innerHTML = e, i;
+  }
+}
+function D(t, e, r = t, i) {
+  if (e === T) return e;
+  let a = i !== void 0 ? r._$Co?.[i] : r._$Cl;
+  const n = V(e) ? void 0 : e._$litDirective$;
+  return a?.constructor !== n && (a?._$AO?.(!1), n === void 0 ? a = void 0 : (a = new n(t), a._$AT(t, r, i)), i !== void 0 ? (r._$Co ?? (r._$Co = []))[i] = a : r._$Cl = a), a !== void 0 && (e = D(t, a._$AS(t, e.values), a, i)), e;
+}
+class vt {
+  constructor(e, r) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = r;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(e) {
+    const { el: { content: r }, parts: i } = this._$AD, a = (e?.creationScope ?? z).importNode(r, !0);
+    P.currentNode = a;
+    let n = P.nextNode(), s = 0, c = 0, l = i[0];
+    for (; l !== void 0; ) {
+      if (s === l.index) {
+        let h;
+        l.type === 2 ? h = new q(n, n.nextSibling, this, e) : l.type === 1 ? h = new l.ctor(n, l.name, l.strings, this, e) : l.type === 6 && (h = new yt(n, this, e)), this._$AV.push(h), l = i[++c];
+      }
+      s !== l?.index && (n = P.nextNode(), s++);
+    }
+    return P.currentNode = z, a;
+  }
+  p(e) {
+    let r = 0;
+    for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(e, i, r), r += i.strings.length - 2) : i._$AI(e[r])), r++;
+  }
+}
+class q {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(e, r, i, a) {
+    this.type = 2, this._$AH = d, this._$AN = void 0, this._$AA = e, this._$AB = r, this._$AM = i, this.options = a, this._$Cv = a?.isConnected ?? !0;
+  }
+  get parentNode() {
+    let e = this._$AA.parentNode;
+    const r = this._$AM;
+    return r !== void 0 && e?.nodeType === 11 && (e = r.parentNode), e;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(e, r = this) {
+    e = D(this, e, r), V(e) ? e === d || e == null || e === "" ? (this._$AH !== d && this._$AR(), this._$AH = d) : e !== this._$AH && e !== T && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : gt(e) ? this.k(e) : this._(e);
+  }
+  O(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
+  }
+  T(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
+  }
+  _(e) {
+    this._$AH !== d && V(this._$AH) ? this._$AA.nextSibling.data = e : this.T(z.createTextNode(e)), this._$AH = e;
+  }
+  $(e) {
+    const { values: r, _$litType$: i } = e, a = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = W.createElement(Be(i.h, i.h[0]), this.options)), i);
+    if (this._$AH?._$AD === a) this._$AH.p(r);
+    else {
+      const n = new vt(a, this), s = n.u(this.options);
+      n.p(r), this.T(s), this._$AH = n;
+    }
+  }
+  _$AC(e) {
+    let r = Re.get(e.strings);
+    return r === void 0 && Re.set(e.strings, r = new W(e)), r;
+  }
+  k(e) {
+    he(this._$AH) || (this._$AH = [], this._$AR());
+    const r = this._$AH;
+    let i, a = 0;
+    for (const n of e) a === r.length ? r.push(i = new q(this.O(H()), this.O(H()), this, this.options)) : i = r[a], i._$AI(n), a++;
+    a < r.length && (this._$AR(i && i._$AB.nextSibling, a), r.length = a);
+  }
+  _$AR(e = this._$AA.nextSibling, r) {
+    for (this._$AP?.(!1, !0, r); e !== this._$AB; ) {
+      const i = Ae(e).nextSibling;
+      Ae(e).remove(), e = i;
+    }
+  }
+  setConnected(e) {
+    this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
+  }
+}
+class le {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(e, r, i, a, n) {
+    this.type = 1, this._$AH = d, this._$AN = void 0, this.element = e, this.name = r, this._$AM = a, this.options = n, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = d;
+  }
+  _$AI(e, r = this, i, a) {
+    const n = this.strings;
+    let s = !1;
+    if (n === void 0) e = D(this, e, r, 0), s = !V(e) || e !== this._$AH && e !== T, s && (this._$AH = e);
+    else {
+      const c = e;
+      let l, h;
+      for (e = n[0], l = 0; l < n.length - 1; l++) h = D(this, c[i + l], r, l), h === T && (h = this._$AH[l]), s || (s = !V(h) || h !== this._$AH[l]), h === d ? e = d : e !== d && (e += (h ?? "") + n[l + 1]), this._$AH[l] = h;
+    }
+    s && !a && this.j(e);
+  }
+  j(e) {
+    e === d ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}
+class bt extends le {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === d ? void 0 : e;
+  }
+}
+class xt extends le {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    this.element.toggleAttribute(this.name, !!e && e !== d);
+  }
+}
+class wt extends le {
+  constructor(e, r, i, a, n) {
+    super(e, r, i, a, n), this.type = 5;
+  }
+  _$AI(e, r = this) {
+    if ((e = D(this, e, r, 0) ?? d) === T) return;
+    const i = this._$AH, a = e === d && i !== d || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, n = e !== d && (i === d || a);
+    a && this.element.removeEventListener(this.name, this, i), n && this.element.addEventListener(this.name, this, e), this._$AH = e;
+  }
+  handleEvent(e) {
+    typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
+  }
+}
+class yt {
+  constructor(e, r, i) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = r, this.options = i;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e) {
+    D(this, e);
+  }
+}
+const $t = M.litHtmlPolyfillSupport;
+$t?.(W, q), (M.litHtmlVersions ?? (M.litHtmlVersions = [])).push("3.3.3");
+const _t = (t, e, r) => {
+  const i = r?.renderBefore ?? e;
+  let a = i._$litPart$;
+  if (a === void 0) {
+    const n = r?.renderBefore ?? null;
+    i._$litPart$ = a = new q(e.insertBefore(H(), n), n, void 0, r ?? {});
+  }
+  return a._$AI(t), a;
+};
+const F = globalThis;
+class u extends O {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var r;
+    const e = super.createRenderRoot();
+    return (r = this.renderOptions).renderBefore ?? (r.renderBefore = e.firstChild), e;
+  }
+  update(e) {
+    const r = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = _t(r, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(!0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(!1);
+  }
+  render() {
+    return T;
+  }
+}
+u._$litElement$ = !0, u.finalized = !0, F.litElementHydrateSupport?.({ LitElement: u });
+const kt = F.litElementPolyfillSupport;
+kt?.({ LitElement: u });
+(F.litElementVersions ?? (F.litElementVersions = [])).push("4.2.2");
+const At = { attribute: !0, type: String, converter: ee, reflect: !1, hasChanged: me }, Et = (t = At, e, r) => {
+  const { kind: i, metadata: a } = r;
+  let n = globalThis.litPropertyMetadata.get(a);
+  if (n === void 0 && globalThis.litPropertyMetadata.set(a, n = /* @__PURE__ */ new Map()), i === "setter" && ((t = Object.create(t)).wrapped = !0), n.set(r.name, t), i === "accessor") {
+    const { name: s } = r;
+    return { set(c) {
+      const l = e.get.call(this);
+      e.set.call(this, c), this.requestUpdate(s, l, t, !0, c);
+    }, init(c) {
+      return c !== void 0 && this.C(s, void 0, t, c), c;
+    } };
+  }
+  if (i === "setter") {
+    const { name: s } = r;
+    return function(c) {
+      const l = this[s];
+      e.call(this, c), this.requestUpdate(s, l, t, !0, c);
+    };
+  }
+  throw Error("Unsupported decorator location: " + i);
+};
+function p(t) {
+  return (e, r) => typeof r == "object" ? Et(t, e, r) : ((i, a, n) => {
+    const s = a.hasOwnProperty(n);
+    return a.constructor.createProperty(n, i), s ? Object.getOwnPropertyDescriptor(a, n) : void 0;
+  })(t, e, r);
+}
+function v(t) {
+  return (e) => (customElements.get(t) || customElements.define(t, e), e);
+}
+function f(t) {
+  return Te(t);
+}
+const St = "sf-leaderboard", Pt = "sf-leaderboard-stat-card", zt = "sf-leaderboard-filters", Ct = "sf-leaderboard-table", Rt = "sf-leaderboard-podium", Ot = "sf-leaderboard-rank-badge", Tt = "sf-leaderboard-player-avatar", Dt = "sf-leaderboard-player-stats-card", Lt = "sf-leaderboard-header-section", jt = "sf-leaderboard-stats-section", Bt = "sf-leaderboard-ranking-section", Nt = "sf-leaderboard-table-section", Ut = "sf-leaderboard-footer-section", It = "Leaderboard", Mt = "Real-time rankings", K = "week", Q = "all", Ft = "Your Position", Ht = "You're in the top 5% of players!", Vt = 42, Wt = [
+  { label: "Today", value: "today" },
+  { label: "This Week", value: "week" },
+  { label: "This Month", value: "month" },
+  { label: "All Time", value: "all" }
+], Yt = [
+  { label: "All Games", value: "all" },
+  { label: "Poker", value: "poker" },
+  { label: "Blackjack", value: "blackjack" },
+  { label: "Roulette", value: "roulette" },
+  { label: "Slots", value: "slots" }
+], Gt = [
+  {
+    label: "Total Players",
+    value: "12,847",
+    icon: "👥",
+    trendValue: 12.5,
+    trendPositive: !0
+  },
+  {
+    label: "Total Wagered",
+    value: "$84.2M",
+    icon: "💰",
+    trendValue: 8.3,
+    trendPositive: !0
+  },
+  {
+    label: "Active Games",
+    value: "1,247",
+    icon: "🎮",
+    trendValue: 3.2,
+    trendPositive: !0
+  },
+  {
+    label: "Biggest Win",
+    value: "$125K",
+    icon: "⚡",
+    trendValue: 45.8,
+    trendPositive: !0
+  }
+], R = {
+  header: {
+    title: It,
+    subtitle: Mt,
+    icon: "🏆",
+    showLive: !0,
+    backButton: { label: "Back" },
+    isRefreshing: !1
+  },
+  stats: { items: Gt },
+  ranking: {
+    podium: { title: "Top Champions", badge: "Elite", players: [] },
+    playerStats: {
+      title: Ft,
+      rank: Vt,
+      message: Ht
+    }
+  },
+  table: {
+    title: "All Rankings",
+    subtitle: "Showing 0 players",
+    players: [],
+    filters: {
+      searchQuery: "",
+      timeframe: K,
+      category: Q
+    }
+  },
+  footer: {
+    text: "Rankings update every 30 seconds • Last updated: Just now"
+  }
+};
+function qt(t = {}) {
+  return {
+    ...R,
+    ...t,
+    header: "header" in t ? t.header : R.header,
+    stats: t.stats ?? R.stats,
+    ranking: t.ranking ?? R.ranking,
+    table: t.table ?? R.table,
+    footer: t.footer ?? R.footer
+  };
+}
+function Kt(t) {
+  return !!(t?.podium ?? t?.playerStats);
+}
+const ge = "timeframe-change", ue = "category-change", fe = "search-change", ve = "player-select", Qt = "refresh", Jt = '@charset "UTF-8";:host{--background: var(--color-base-1, #0a0c14);--foreground: var(--color-neutral, #f0f0f5);--card: var(--color-base-2, #00114f);--card-foreground: var(--color-neutral, #f0f0f5);--primary: var(--color-primary-1, #00d4ff);--primary-rgb: var(--color-primary-1-rgb, 0, 212, 255);--primary-foreground: var(--color-base-3, #000c35);--secondary: var(--color-base-2, #00114f);--secondary-foreground: var(--color-neutral, #f0f0f5);--muted: var(--color-base-2, #00114f);--muted-foreground: var(--color-surface-muted, #808090);--accent: var(--color-primary-2, #00e5ff);--accent-foreground: var(--color-base-3, #000c35);--destructive: var(--color-error, #ff4757);--destructive-rgb: var(--color-error-rgb, 255, 71, 87);--border: var(--color-base-2, #00114f);--border-subtle: var(--color-surface-divider, rgba(42, 47, 66, .55));--success: var(--color-success, #00d26a);--success-rgb: var(--color-success-rgb, 0, 210, 106);--warning: var(--color-warning, #ffa502);--warning-rgb: var(--color-warning-rgb, 255, 165, 2);--informative: var(--color-informative, #2388fb);--gold: var(--place-first-table-icon, #ffd700);--gold-rgb: var(--place-first-table-icon-rgb, 255, 215, 0);--silver: var(--place-second-table-icon, #c0c0c0);--silver-rgb: var(--place-second-table-icon-rgb, 192, 192, 192);--bronze: var(--place-third-table-icon, #cd7f32);--bronze-rgb: var(--place-third-table-icon-rgb, 205, 127, 50);--radius: 12px;--radius-sm: 8px;--radius-lg: 16px;--font-sans: var(--font-primary, "Inter", system-ui, sans-serif);--transition-fast: .2s ease;--transition-base: .3s ease;--surface-gradient: linear-gradient(145deg, var(--color-base-2, #00114f) 0%, var(--color-base-1, #0a0c14) 100%);--surface-border-color: color-mix(in srgb, var(--color-primary-1, #00d4ff) 18%, transparent);--surface-border-hover: color-mix(in srgb, var(--color-primary-1, #00d4ff) 35%, transparent);--surface-radius: var(--radius-lg);--surface-padding: clamp(12px, 2vw, 18px);--surface-shadow: 0 4px 24px rgba(0, 0, 0, .25);--surface-shadow-hover: 0 0 24px color-mix(in srgb, var(--color-primary-1, #00d4ff) 12%, transparent);--inset-bg: color-mix(in srgb, var(--color-neutral, #f0f0f5) 3%, transparent);--inset-border: color-mix(in srgb, var(--color-neutral, #f0f0f5) 8%, transparent);--inset-radius: var(--radius-sm);--inset-hover-bg: color-mix(in srgb, var(--color-primary-1, #00d4ff) 6%, transparent);--inset-hover-border: color-mix(in srgb, var(--color-primary-1, #00d4ff) 22%, transparent);--accent-soft: color-mix(in srgb, var(--color-primary-1, #00d4ff) 10%, transparent);--accent-soft-strong: color-mix(in srgb, var(--color-primary-1, #00d4ff) 18%, transparent);--accent-border: color-mix(in srgb, var(--color-primary-1, #00d4ff) 28%, transparent);--accent-glow: color-mix(in srgb, var(--color-primary-1, #00d4ff) 45%, transparent);--accent-gradient: var(--color-primary-3, linear-gradient(256deg, #ffeec2 0%, #ffc431 100%));--accent-text-glow: 0 0 16px color-mix(in srgb, var(--color-primary-1, #00d4ff) 55%, transparent), 0 0 32px color-mix(in srgb, var(--color-primary-1, #00d4ff) 28%, transparent);--medal-gold-bg: color-mix(in srgb, var(--place-first-table-icon, #ffd700) 22%, transparent);--medal-gold-border: color-mix(in srgb, var(--place-first-table-icon, #ffd700) 50%, transparent);--medal-silver-bg: color-mix(in srgb, var(--place-second-table-icon, #c0c0c0) 18%, transparent);--medal-silver-border: color-mix(in srgb, var(--place-second-table-icon, #c0c0c0) 40%, transparent);--medal-bronze-bg: color-mix(in srgb, var(--place-third-table-icon, #cd7f32) 18%, transparent);--medal-bronze-border: color-mix(in srgb, var(--place-third-table-icon, #cd7f32) 40%, transparent);--medal-gold-gradient: linear-gradient(135deg, var(--place-first-table-icon, #ffd700) 0%, var(--color-primary-1, #00d4ff) 100%);--medal-silver-gradient: linear-gradient(135deg, var(--place-second-table-icon, #c0c0c0) 0%, var(--color-base-2, #00114f) 100%);--medal-bronze-gradient: linear-gradient(135deg, var(--place-third-table-icon, #cd7f32) 0%, var(--color-base-3, #000c35) 100%);--medal-avatar-fg: var(--color-base-3, #000c35);--medal-gold-glow: color-mix(in srgb, var(--place-first-table-icon, #ffd700) 60%, transparent);--medal-silver-glow: color-mix(in srgb, var(--place-second-table-icon, #c0c0c0) 50%, transparent);--medal-bronze-glow: color-mix(in srgb, var(--place-third-table-icon, #cd7f32) 50%, transparent);--badge-success-bg: color-mix(in srgb, var(--color-success, #00d26a) 20%, transparent);--badge-success-border: color-mix(in srgb, var(--color-success, #00d26a) 35%, transparent);--badge-warning-bg: color-mix(in srgb, var(--color-warning, #ffa502) 20%, transparent);--badge-warning-border: color-mix(in srgb, var(--color-warning, #ffa502) 35%, transparent);--badge-accent-bg: var(--accent-soft);--badge-accent-border: var(--accent-border);font-family:var(--font-sans);color:var(--foreground)}*{box-sizing:border-box}.card{position:relative;overflow:hidden;box-sizing:border-box;background:var(--surface-gradient);border:1px solid var(--surface-border-color);border-radius:var(--surface-radius);box-shadow:var(--surface-shadow);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.card:hover{border-color:var(--surface-border-hover);box-shadow:var(--surface-shadow-hover)}.stat-item,.avatar-section,.percentile-badge{background:var(--inset-bg);border:1px solid var(--inset-border);border-radius:var(--inset-radius)}.stat-item:hover{background:var(--inset-hover-bg);border-color:var(--inset-hover-border)}', b = f(Jt);
+function Zt(t) {
+  return o`<div class="app">
+  ${t.renderHeader()}
+  <main class="main">
+    ${t.renderStats()}
+    ${t.renderRanking()}
+    ${t.renderTable()}
+    ${t.renderFooter()}
+  </main>
+</div>
+`;
+}
+const Xt = ":host{display:block;width:100%;min-height:100vh;background:var(--background)}.app{width:100%;min-height:100vh;min-height:100dvh;padding:clamp(12px,3vw,16px) clamp(12px,4vw,40px) clamp(16px,4vw,40px);box-sizing:border-box;background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);background-size:50px 50px;animation:grid-move 20s linear infinite}@keyframes grid-move{0%{background-position:0 0}to{background-position:50px 50px}}.main{width:100%;box-sizing:border-box;margin-top:clamp(1.25rem,4vw,2.5rem)}", er = ':host{display:block;width:100%}.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--background) 82%,transparent);padding:12px 0;border-bottom:1px solid var(--border)}.header-content{width:100%;display:flex;align-items:center;justify-content:space-between}.logo-section{display:flex;align-items:center;gap:.75rem}.logo-icon{width:40px;height:40px;border-radius:var(--radius);background:var(--accent-soft);border:1px solid var(--surface-border-color);display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:var(--surface-shadow-hover)}.logo-text h1{font-size:1.25rem;font-weight:700;margin:0;text-shadow:var(--accent-text-glow)}.logo-text p{font-size:.75rem;color:var(--muted-foreground);margin:0}.header-actions{display:flex;align-items:center;gap:.75rem}.live-badge{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:9999px;border:1px solid rgba(var(--success-rgb),.35);background:rgba(var(--success-rgb),.08);font-size:.75rem;font-weight:500;color:var(--success)}.live-dot{position:relative;width:8px;height:8px;background:var(--success);border-radius:50%}.live-dot:before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--success);animation:ping 1.5s ease-out infinite}@keyframes ping{0%{transform:scale(1);opacity:1}to{transform:scale(2.5);opacity:0}}.back-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--surface-border-color);background:var(--surface-gradient);color:var(--foreground);font-size:.875rem;font-family:inherit;cursor:pointer;box-shadow:var(--surface-shadow);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.back-btn:hover{border-color:var(--surface-border-hover);box-shadow:var(--surface-shadow-hover)}.back-btn .icon{transition:transform .3s ease}.back-btn.refreshing .icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:639px){.header-content{flex-wrap:wrap;gap:.75rem}.logo-section{flex:1 1 100%;justify-content:center;align-items:center;gap:.5rem}.logo-icon{width:clamp(32px,9vw,40px);height:clamp(32px,9vw,40px);font-size:clamp(1rem,4vw,1.25rem)}.logo-text{text-align:center}.logo-text h1{text-align:center;font-size:clamp(1rem,4.5vw,1.25rem)}.logo-text p{display:none}.header-actions{width:100%;justify-content:space-between}.back-btn{padding:.5rem .75rem;font-size:.8125rem}}@media(max-width:380px){.live-badge{font-size:.6875rem;padding:.3rem .6rem}}';
+var tr = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, be = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? rr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && tr(e, r, a), a;
+};
+let Y = class extends u {
+  onBackClick() {
+    const t = this.refreshContext;
+    this.dispatchEvent(
+      new CustomEvent(Qt, {
+        detail: {
+          timeframe: t?.timeframe ?? K,
+          category: t?.category ?? Q
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    if (!this.section) return d;
+    const t = this.section.backButton != null, e = this.section.backButton?.label ?? "Back";
+    return o`
+      <header class="header">
+        <div class="header-content">
+          <div class="logo-section">
+            ${this.section.icon ? o`<div class="logo-icon">${this.section.icon}</div>` : d}
+            <div class="logo-text">
+              <h1>${this.section.title}</h1>
+              ${this.section.subtitle ? o`<p>${this.section.subtitle}</p>` : d}
+            </div>
+          </div>
+
+          <div class="header-actions">
+            ${this.section.showLive ? o`
+                  <div class="live-badge">
+                    <span class="live-dot"></span>
+                    Live
+                  </div>
+                ` : d}
+            ${t ? o`
+                  <button
+                    type="button"
+                    class="back-btn ${this.section.isRefreshing ? "refreshing" : ""}"
+                    @click=${this.onBackClick}
+                  >
+                    <span class="icon" aria-hidden="true">←</span>
+                    ${e}
+                  </button>
+                ` : d}
+          </div>
+        </div>
+      </header>
+    `;
+  }
+};
+Y.styles = [b, f(er)];
+be([
+  p({ attribute: !1 })
+], Y.prototype, "section", 2);
+be([
+  p({ attribute: !1 })
+], Y.prototype, "refreshContext", 2);
+Y = be([
+  v(Lt)
+], Y);
+function ar(t) {
+  return o`<div class="card">
+  <div class="glow"></div>
+  <div class="content">
+    <div class="header">
+      <span class="label">${t.label}</span>
+      <div class="icon-wrapper">${t.icon}</div>
+    </div>
+    <div class="body">
+      <p class="value">${t.value}</p>
+      ${t.renderTrend()}
+    </div>
+  </div>
+</div>
+`;
+}
+const ir = '@charset "UTF-8";:host{display:block;min-width:0;max-width:100%}.card{padding:clamp(.75rem,2.5vw,1rem);min-width:0;max-width:100%}.glow{position:absolute;top:0;right:0;width:96px;height:96px;background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);transform:translate(50%,-50%);pointer-events:none}.content{position:relative}.header{display:flex;align-items:center;justify-content:space-between}.label{font-size:.875rem;color:var(--muted-foreground)}.icon-wrapper{width:32px;height:32px;border-radius:var(--inset-radius);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:1rem}.body{margin-top:.5rem}.value{font-size:1.5rem;font-weight:700;font-family:var(--font-mono)}.trend{font-size:.75rem;font-weight:500;margin-top:.25rem}.trend.positive{color:var(--success)}.trend.negative{color:var(--destructive)}@media(max-width:639px){:host{display:flex;height:100%;min-height:0}.card{display:flex;flex:1;width:100%;min-height:100%;align-items:center;justify-content:center;padding:clamp(.45rem,2.8vw,.65rem)}.glow{width:clamp(40px,22vw,64px);height:clamp(40px,22vw,64px)}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:clamp(.2rem,1.2vw,.35rem)}.header{flex-direction:column;align-items:center;justify-content:center;gap:.25rem;text-align:center}.label{font-size:clamp(.6rem,2.6vw,.7rem);line-height:1.2}.icon-wrapper{width:clamp(22px,7.5vw,28px);height:clamp(22px,7.5vw,28px);font-size:clamp(.7rem,3.2vw,.85rem);flex-shrink:0}.body{margin-top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;gap:.1rem}.value{margin:0;font-size:clamp(.9rem,5.5vw,1.15rem);line-height:1.15;word-break:break-word}.trend{font-size:clamp(.58rem,2.4vw,.65rem);margin-top:0;margin-bottom:0}}@media(max-width:576px){.card{padding:clamp(.65rem,3.2vw,.85rem);min-height:clamp(5.5rem,26vw,6.75rem)}.glow{width:clamp(48px,20vw,72px);height:clamp(48px,20vw,72px)}.content{gap:clamp(.35rem,2vw,.5rem)}.header{gap:clamp(.3rem,1.6vw,.4rem)}.icon-wrapper{order:-1;width:clamp(30px,8.5vw,36px);height:clamp(30px,8.5vw,36px);font-size:clamp(.95rem,4vw,1.1rem)}.label{order:0;font-size:clamp(.65rem,2.8vw,.75rem);line-height:1.25;letter-spacing:.02em;max-width:100%}.body{gap:clamp(.15rem,1.2vw,.25rem)}.value{font-size:clamp(1rem,5.2vw,1.2rem);line-height:1.2}.trend{font-size:clamp(.625rem,2.6vw,.7rem);line-height:1.3}}@media(max-width:380px){.card{padding:clamp(.55rem,2.8vw,.7rem);min-height:5rem}.value{font-size:clamp(.9rem,4.8vw,1.05rem)}}';
+var nr = Object.defineProperty, sr = Object.getOwnPropertyDescriptor, j = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? sr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && nr(e, r, a), a;
+};
+let A = class extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.icon = "", this.trendPositive = !0;
+  }
+  renderTrend() {
+    return this.trendValue === void 0 ? o`` : o`
+      <p class="trend ${this.trendPositive ? "positive" : "negative"}">
+        ${this.trendPositive ? "+" : ""}${this.trendValue}% from last week
+      </p>
+    `;
+  }
+  render() {
+    return ar(this);
+  }
+};
+A.styles = [b, f(ir)];
+j([
+  p({ type: String })
+], A.prototype, "label", 2);
+j([
+  p({ type: String })
+], A.prototype, "value", 2);
+j([
+  p({ type: String })
+], A.prototype, "icon", 2);
+j([
+  p({ type: Number })
+], A.prototype, "trendValue", 2);
+j([
+  p({ type: Boolean })
+], A.prototype, "trendPositive", 2);
+A = j([
+  v(Pt)
+], A);
+const or = ".section{margin-bottom:clamp(1.5rem,5vw,3rem);min-width:0}.section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.section-title{font-size:1.125rem;font-weight:700;margin:0}.elite-badge{font-size:.65rem;padding:.2rem .5rem;border-radius:var(--radius-sm);background:var(--medal-gold-bg);border:1px solid var(--medal-gold-border);color:var(--gold);font-weight:600;letter-spacing:.04em;text-transform:uppercase}@media(max-width:639px){.section-title{font-size:1rem}}:host{display:block;width:100%}.stats-section .stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.625rem,2vw,1rem);width:100%;min-width:0;align-items:stretch}@media(min-width:640px)and (max-width:1079px){.stats-section .stats-grid{gap:.875rem;grid-auto-rows:1fr}}@media(min-width:1080px){.stats-section .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:1rem}}@media(max-width:639px){.stats-section .stats-grid{gap:clamp(.35rem,2.5vw,.5rem);grid-auto-rows:1fr;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:576px){.stats-section .stats-grid{gap:clamp(.5rem,2.8vw,.75rem)}}";
+var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, Ne = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? cr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && lr(e, r, a), a;
+};
+let re = class extends u {
+  render() {
+    return this.section?.items?.length ? o`
+      <section class="section stats-section">
+        ${this.section.title ? o`
+              <div class="section-header">
+                <h2 class="section-title">${this.section.title}</h2>
+              </div>
+            ` : d}
+        <div class="stats-grid">
+          ${this.section.items.map(
+      (t) => o`
+              <sf-leaderboard-stat-card
+                label=${t.label}
+                value=${t.value}
+                icon=${t.icon}
+                .trendValue=${t.trendValue}
+                ?trendPositive=${t.trendPositive ?? !0}
+              ></sf-leaderboard-stat-card>
+            `
+    )}
+        </div>
+      </section>
+    ` : d;
+  }
+};
+re.styles = [b, f(or)];
+Ne([
+  p({ attribute: !1 })
+], re.prototype, "section", 2);
+re = Ne([
+  v(jt)
+], re);
+function xe(t) {
+  return t >= 1e6 ? `$${(t / 1e6).toFixed(2)}M` : t >= 1e3 ? `$${(t / 1e3).toFixed(1)}K` : `$${t.toFixed(2)}`;
+}
+function Ue(t) {
+  return t.slice(0, 2).toUpperCase();
+}
+function dr(t) {
+  return t.streak >= 5 ? "🔥" : t.rank === 1 ? "👑" : "✌️";
+}
+function pr(t) {
+  return {
+    rank: t.rank,
+    initials: Ue(t.username),
+    username: t.username,
+    earnings: xe(t.totalWinnings),
+    winRate: `${t.winRate}% WR`,
+    badgeEmoji: dr(t)
+  };
+}
+function mr(t) {
+  return t.map(pr);
+}
+function hr(t) {
+  return o`<div class="card">
+  <div class="ambient-glow glow-gold"></div>
+  <div class="card-content">
+    <div class="podium-container">
+      <div class="player-column second">
+        <div class="avatar-wrapper">
+          <div class="avatar-ring silver"></div>
+          <div class="avatar silver">${t.second.initials}</div>
+          <span class="badge-emoji">${t.second.badgeEmoji}</span>
+        </div>
+        <div class="player-name">${t.second.username}</div>
+        <div class="player-earnings silver">${t.second.earnings}</div>
+        <div class="player-winrate">${t.second.winRate}</div>
+        <div class="podium-block second">
+          <span class="podium-number silver">2</span>
+        </div>
+      </div>
+
+      <div class="player-column first">
+        <div class="sparkles">
+          <span class="sparkle">✦</span>
+          <span class="sparkle">✦</span>
+          <span class="sparkle">✦</span>
+        </div>
+        <div class="avatar-wrapper">
+          <div class="avatar-ring gold"></div>
+          <div class="avatar gold">${t.first.initials}</div>
+          <span class="badge-emoji fire">${t.first.badgeEmoji}</span>
+        </div>
+        <div class="player-name">${t.first.username}</div>
+        <div class="player-earnings gold">${t.first.earnings}</div>
+        <div class="player-winrate">${t.first.winRate}</div>
+        <div class="podium-block first">
+          <span class="podium-number gold">1</span>
+        </div>
+      </div>
+
+      <div class="player-column third">
+        <div class="avatar-wrapper">
+          <div class="avatar-ring bronze"></div>
+          <div class="avatar bronze">${t.third.initials}</div>
+          <span class="badge-emoji">${t.third.badgeEmoji}</span>
+        </div>
+        <div class="player-name">${t.third.username}</div>
+        <div class="player-earnings bronze">${t.third.earnings}</div>
+        <div class="player-winrate">${t.third.winRate}</div>
+        <div class="podium-block third">
+          <span class="podium-number bronze">3</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+}
+const gr = ':host{display:flex;width:100%;height:100%;min-height:0}.card{padding:var(--surface-padding) clamp(14px,2vw,24px) var(--surface-padding);width:100%;max-width:100%;min-width:0;height:100%;flex:1;display:flex;flex-direction:column}.card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(var(--primary-rgb),.04),transparent,rgba(var(--gold-rgb),.04),transparent);animation:rotate 12s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}.card-content{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;padding-top:clamp(28px,12%,52px)}.podium-container{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;gap:clamp(6px,1.5vw,14px)}.player-column{flex:1;max-width:clamp(88px,14vw,160px);min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:0}.player-column.first{order:2;max-width:clamp(96px,16vw,180px)}.player-column.second{order:1}.player-column.third{order:3}.avatar-wrapper,.player-name,.player-earnings,.player-winrate,.sparkles{flex-shrink:0}.sparkles{position:relative;height:clamp(14px,3vh,22px);width:clamp(40px,8vw,56px);margin-bottom:clamp(2px,.5vh,4px);flex-shrink:0}.sparkle{position:absolute;font-size:clamp(10px,1.8vw,14px);animation:sparkle 1.5s ease-in-out infinite}.sparkle:nth-child(1){left:10px;top:5px;animation-delay:0s}.sparkle:nth-child(2){left:25px;top:0;animation-delay:.3s}.sparkle:nth-child(3){left:40px;top:8px;animation-delay:.6s}@keyframes sparkle{0%,to{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.4;transform:scale(1.3) rotate(180deg)}}.avatar-wrapper{position:relative;margin-bottom:clamp(4px,.8vh,8px)}.avatar{width:clamp(40px,7vw,56px);height:clamp(40px,7vw,56px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2.5vw,18px);font-weight:700;position:relative;z-index:2;transition:transform .3s ease}.player-column.first .avatar{width:clamp(44px,8vw,64px);height:clamp(44px,8vw,64px);font-size:clamp(15px,2.8vw,22px)}.avatar:hover{transform:scale(1.08)}.avatar.gold{background:var(--medal-gold-gradient);color:var(--medal-avatar-fg);box-shadow:0 0 30px var(--medal-gold-glow)}.avatar.silver{background:var(--medal-silver-gradient);color:var(--medal-avatar-fg);box-shadow:0 0 20px var(--medal-silver-glow)}.avatar.bronze{background:var(--medal-bronze-gradient);color:var(--medal-avatar-fg);box-shadow:0 0 20px var(--medal-bronze-glow)}.avatar-ring{position:absolute;inset:-5px;border-radius:50%;border:2px solid;animation:ring-pulse 2.5s ease-in-out infinite}.avatar-ring.gold{border-color:var(--medal-gold-border)}.avatar-ring.silver{border-color:var(--medal-silver-border)}.avatar-ring.bronze{border-color:var(--medal-bronze-border)}@keyframes ring-pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:.2}}.badge-emoji{position:absolute;bottom:-3px;right:-3px;font-size:clamp(12px,2vw,16px);z-index:3;animation:badge-bounce 2s ease-in-out infinite}.badge-emoji.fire{animation:fire-pulse .6s ease-in-out infinite alternate}@keyframes badge-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes fire-pulse{0%{transform:scale(1)}to{transform:scale(1.2)}}.player-name{font-size:clamp(10px,1.6vw,13px);font-weight:700;color:var(--foreground);margin-bottom:2px;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-earnings{font-size:clamp(11px,1.8vw,15px);font-weight:700;margin-bottom:2px;text-align:center;line-height:1.2}.player-earnings.gold{color:var(--gold);text-shadow:0 0 15px rgba(var(--gold-rgb),.5)}.player-earnings.silver{color:var(--silver)}.player-earnings.bronze{color:var(--bronze)}.player-winrate{font-size:clamp(9px,1.4vw,11px);color:var(--muted-foreground);margin-bottom:clamp(4px,.8vh,8px);text-align:center;line-height:1.2}.podium-block{flex:0 0 auto;width:100%;display:flex;align-items:center;justify-content:center;border-radius:12px 12px 0 0;position:relative;overflow:hidden;transition:transform .3s ease}.podium-block.first{height:50%;min-height:clamp(80px,12vh,190px)}.podium-block.second{height:36%;min-height:clamp(58px,9vh,140px)}.podium-block.third{height:26%;min-height:clamp(42px,7vh,105px)}.podium-block:hover{transform:translateY(-3px)}.podium-block:before{content:"";position:absolute;inset:0;opacity:.1;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%)}.podium-block.first{background:var(--place-first-podium-slot, #ffd700);border:2px solid color-mix(in srgb,var(--place-first-podium-slot, #ffd700) 55%,transparent);border-bottom:none;box-shadow:0 0 32px color-mix(in srgb,var(--place-first-podium-slot, #ffd700) 15%,transparent)}.podium-block.second{background:var(--place-second-podium-slot, #c0c0c0);border:2px solid color-mix(in srgb,var(--place-second-podium-slot, #c0c0c0) 45%,transparent);border-bottom:none;box-shadow:0 0 24px color-mix(in srgb,var(--place-second-podium-slot, #c0c0c0) 12%,transparent)}.podium-block.third{background:var(--place-third-podium-slot, #cd7f32);border:2px solid color-mix(in srgb,var(--place-third-podium-slot, #cd7f32) 45%,transparent);border-bottom:none;box-shadow:0 0 24px color-mix(in srgb,var(--place-third-podium-slot, #cd7f32) 12%,transparent)}.podium-number{font-size:clamp(28px,6vw,48px);font-weight:800;opacity:.4;letter-spacing:-2px;line-height:1}.player-column.first .podium-number{font-size:clamp(32px,7vw,56px)}.podium-number.gold{color:var(--place-first-podium-number, #ffd700)}.podium-number.silver{color:var(--place-second-podium-number, #c0c0c0)}.podium-number.bronze{color:var(--place-third-podium-number, #cd7f32)}.ambient-glow{position:absolute;width:clamp(120px,40%,200px);height:clamp(120px,40%,200px);border-radius:50%;filter:blur(60px);opacity:.15;pointer-events:none;z-index:0}.glow-gold{background:var(--gold);top:8%;left:50%;transform:translate(-50%);animation:glow-pulse 4s ease-in-out infinite}@keyframes glow-pulse{0%,to{opacity:.15}50%{opacity:.25}}@media(min-width:1024px){.card-content{padding-top:clamp(32px,14%,56px)}.podium-block.first{height:54%;min-height:clamp(92px,13vh,210px)}.podium-block.second{height:38%;min-height:clamp(66px,10vh,155px)}.podium-block.third{height:28%;min-height:clamp(48px,8vh,118px)}.podium-number{font-size:clamp(36px,5vw,52px)}.player-column.first .podium-number{font-size:clamp(42px,6vw,64px)}}@media(min-width:1280px){.podium-container{gap:clamp(10px,1.5vw,20px)}.player-column{max-width:clamp(100px,12vw,180px)}.player-column.first{max-width:clamp(110px,14vw,200px)}.podium-block.first{height:56%;min-height:clamp(100px,14vh,230px)}.podium-block.second{height:40%;min-height:clamp(72px,11vh,168px)}.podium-block.third{height:30%;min-height:clamp(52px,8vh,128px)}.podium-number{font-size:clamp(40px,4.5vw,60px)}.player-column.first .podium-number{font-size:clamp(48px,5.5vw,72px)}}@media(max-width:1023px){.podium-block.first{min-height:clamp(64px,10vh,120px)}.podium-block.second{min-height:clamp(48px,8vh,95px)}.podium-block.third{min-height:clamp(36px,6vh,75px)}.player-column{max-width:clamp(72px,22vw,120px)}.player-column.first{max-width:clamp(80px,24vw,140px)}}@media(max-width:639px){.card{border-radius:18px;padding:clamp(8px,2vw,12px) clamp(10px,3vw,16px)}.card-content{padding-top:clamp(18px,8%,32px)}.podium-container{gap:clamp(4px,1.5vw,8px)}.player-column{max-width:clamp(64px,28vw,100px)}.player-column.first{max-width:clamp(72px,30vw,110px)}.podium-block.first{height:48%;min-height:clamp(56px,12dvh,100px)}.podium-block.second{height:34%;min-height:clamp(42px,9dvh,80px)}.podium-block.third{height:24%;min-height:clamp(32px,7dvh,65px)}.podium-number{font-size:clamp(22px,6vw,36px)}.player-column.first .podium-number{font-size:clamp(26px,7vw,42px)}.avatar{width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);font-size:clamp(12px,3vw,14px)}.player-column.first .avatar{width:clamp(38px,10vw,48px);height:clamp(38px,10vw,48px)}.player-name{font-size:clamp(9px,2.4vw,11px)}.player-earnings{font-size:clamp(10px,2.6vw,12px)}}@media(max-width:380px){.player-column{max-width:30vw}.player-column.first{max-width:34vw}.sparkle:nth-child(2){left:18px}.sparkle:nth-child(3){left:30px}}';
+var ur = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, Ie = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? fr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && ur(e, r, a), a;
+};
+let ae = class extends u {
+  constructor() {
+    super(...arguments), this.players = [];
+  }
+  entryByRank(t) {
+    return mr(this.players).find((e) => e.rank === t);
+  }
+  get first() {
+    return this.entryByRank(1);
+  }
+  get second() {
+    return this.entryByRank(2);
+  }
+  get third() {
+    return this.entryByRank(3);
+  }
+  get hasPodium() {
+    return this.players.length >= 3 && this.entryByRank(1) !== void 0 && this.entryByRank(2) !== void 0 && this.entryByRank(3) !== void 0;
+  }
+  render() {
+    return this.hasPodium ? hr(this) : o``;
+  }
+};
+ae.styles = [b, f(gr)];
+Ie([
+  p({ type: Array })
+], ae.prototype, "players", 2);
+ae = Ie([
+  v(Rt)
+], ae);
+function vr(t) {
+  return o`<div class="card">
+  <div class="card-content">
+    <div class="card-top">
+      <div class="rank-section">
+        <div class="rank-container">
+          <div class="rank-glow"></div>
+          <div class="rank-ring"></div>
+          <div class="rank-ring rank-ring-2"></div>
+          <span class="rank-number">#${t.rank}</span>
+        </div>
+        <p class="percentile-badge">
+          <span class="percentile-icon" aria-hidden="true">🏆</span>
+          <span class="percentile-text"
+            >Top ${t.percentile}% of players</span
+          >
+        </p>
+      </div>
+
+      <div class="avatar-section">
+        <div class="avatar">${t.initials}</div>
+        <div class="avatar-info">
+          <div class="avatar-name">${t.username}</div>
+          <div class="avatar-earnings">${t.earnings}</div>
+        </div>
+        <div class="level-badge">LVL ${t.level}</div>
+      </div>
+    </div>
+
+    <div class="stats-grid">
+      <div class="stat-item">
+        <div class="stat-main">
+          <span class="stat-value highlight">${t.winRate}%</span>
+          <span class="stat-label">Win Rate</span>
+        </div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-main">
+          <span class="stat-value">${t.gamesPlayed.toLocaleString()}</span>
+          <span class="stat-label">Games Played</span>
+        </div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-main">
+          <span class="stat-value streak">
+            <span class="fire-icon">🔥</span> ${t.winStreak}
+          </span>
+          <span class="stat-label">Win Streak</span>
+        </div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-main">
+          <span class="stat-value">⭐ 4.8</span>
+          <span class="stat-label">Rating</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+}
+const br = '@charset "UTF-8";:host{display:flex;width:100%;height:100%;min-height:0}.card{padding:var(--surface-padding);width:100%;max-width:100%;height:100%;flex:1;display:flex;flex-direction:column}.card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(var(--primary-rgb),.04),transparent,rgba(var(--primary-rgb),.03),transparent);animation:rotate 8s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}.card-content{position:relative;z-index:1;flex:1;min-height:0;height:100%;display:flex;flex-direction:column;gap:clamp(6px,1.1vh,10px);overflow:hidden}.card-top{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,10px);flex-shrink:0}.rank-section{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(8px,1.5vw,12px);flex-shrink:0;width:100%}.rank-container{position:relative;display:flex;align-items:center;justify-content:center;grid-row:1/-1;width:clamp(60px,11vw,76px);height:clamp(60px,11vw,76px);flex-shrink:0}.rank-glow{position:absolute;width:100%;height:100%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}.rank-ring{position:absolute;width:86%;height:86%;border:2px solid var(--accent-border);border-radius:50%;animation:ring-pulse 3s ease-in-out infinite}.rank-ring-2{width:72%;height:72%;animation-delay:.5s}@keyframes ring-pulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.6}}.rank-number{font-size:clamp(24px,4.8vw,34px);font-weight:800;color:var(--primary);text-shadow:var(--accent-text-glow);z-index:2;line-height:1;animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:var(--accent-text-glow)}to{text-shadow:0 0 24px rgba(var(--primary-rgb),.9),0 0 40px rgba(var(--primary-rgb),.45)}}.percentile-badge{margin:0;padding:clamp(6px,1vh,8px) clamp(8px,1.5vw,10px);background:linear-gradient(135deg,var(--accent-soft-strong) 0%,var(--accent-soft) 100%);border-color:var(--accent-border);color:var(--primary);font-size:clamp(10px,1.5vw,11px);font-weight:600;letter-spacing:.2px;line-height:1.25;display:flex;align-items:flex-start;gap:6px;min-width:0}.percentile-icon{flex-shrink:0;line-height:1.25}.percentile-text{min-width:0}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.4vw,10px);flex:1;min-height:0}.stat-main{display:contents}.stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(8px,1.4vw,12px) clamp(8px,1.2vw,10px);text-align:center;transition:all var(--transition-base);min-width:0;min-height:0}.stat-value{font-size:clamp(15px,2.8vw,20px);font-weight:700;color:var(--foreground);margin-bottom:4px;line-height:1.2}.stat-value.highlight{color:var(--gold);text-shadow:0 0 10px rgba(var(--gold-rgb),.45)}.stat-value.streak{color:var(--destructive);display:flex;align-items:center;justify-content:center;gap:4px}.stat-label{font-size:clamp(10px,1.6vw,11px);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.6px}.fire-icon{display:inline-block;animation:fire .5s ease-in-out infinite alternate}@keyframes fire{0%{transform:scale(1)}to{transform:scale(1.15)}}.avatar-section{display:flex;align-items:center;gap:clamp(8px,1.5vw,10px);padding:clamp(8px,1.5vw,10px);flex-shrink:0}.avatar{width:clamp(36px,7vw,44px);height:clamp(36px,7vw,44px);font-size:clamp(12px,2.2vw,14px);background:var(--accent-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary-foreground);position:relative;flex-shrink:0}.avatar:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent-border);animation:avatar-pulse 2s ease-in-out infinite}@keyframes avatar-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.5}}.avatar-info{flex:1;min-width:0}.avatar-name{font-size:clamp(12px,2.2vw,14px);font-weight:700;color:var(--foreground);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar-earnings{font-size:clamp(11px,2vw,13px);color:var(--primary);font-weight:600}.level-badge{background:linear-gradient(135deg,var(--gold) 0%,var(--bronze) 100%);color:var(--primary-foreground);padding:3px 8px;border-radius:20px;font-size:clamp(9px,1.6vw,10px);font-weight:700;flex-shrink:0}@media(min-width:1080px)and (max-width:1399px){:host{height:auto;min-height:0;align-self:stretch}.card{height:auto;min-height:100%}.card-content{height:auto;flex:0 1 auto}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;flex:0 0 auto;gap:clamp(4px,1vw,6px)}.stat-item{flex-direction:column;align-items:stretch;justify-content:center;padding:clamp(5px,1.2vw,8px) clamp(3px,.8vw,5px);border-radius:var(--inset-radius)}.stat-main{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 4px;line-height:1.2}.stat-value{margin-bottom:0;font-size:clamp(10px,2.2vw,12px);white-space:nowrap}.stat-value.streak{gap:2px}.stat-label{font-size:clamp(8px,1.6vw,9px);text-transform:none;letter-spacing:0;color:var(--muted-foreground);white-space:nowrap}.fire-icon{font-size:10px}}@media(min-width:677px)and (max-width:1079px){:host{height:auto;min-height:0;align-self:stretch}.card{height:auto;min-height:100%;overflow:hidden}.card-content{height:auto;min-height:0;flex:1 1 auto;overflow:visible}.card-top{flex-shrink:0}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);flex:0 0 auto;min-height:0;gap:clamp(8px,1.2vw,12px);align-content:start}.stat-main{display:contents}.stat-item{flex-direction:column;align-items:center;justify-content:center;min-height:80px;height:auto;padding:clamp(10px,1.5vw,14px) clamp(10px,1.2vw,12px);border-radius:var(--inset-radius)}.stat-value{margin-bottom:4px;font-size:clamp(15px,2.6vw,20px);white-space:normal}.stat-label{font-size:clamp(10px,1.5vw,11px);text-transform:uppercase;letter-spacing:.6px;color:var(--muted-foreground);white-space:normal}.stat-item{min-height:88px}}@media(min-width:1400px){:host{height:auto;min-height:0;align-self:stretch}.card{height:auto;min-height:100%;overflow:hidden}.card-content{height:auto;min-height:0;flex:1 1 auto;overflow:visible}.card-top{flex-shrink:0}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);flex:0 0 auto;min-height:0;gap:clamp(8px,1.2vw,12px);align-content:start}.stat-main{display:contents}.stat-item{flex-direction:column;align-items:center;justify-content:center;min-height:80px;height:auto;padding:clamp(10px,1.5vw,14px) clamp(10px,1.2vw,12px);border-radius:var(--inset-radius)}.stat-value{margin-bottom:4px;font-size:clamp(15px,2.6vw,20px);white-space:normal}.stat-label{font-size:clamp(10px,1.5vw,11px);text-transform:uppercase;letter-spacing:.6px;color:var(--muted-foreground);white-space:normal}}@media(max-width:676px){:host{height:auto;min-height:0;align-self:stretch}.card{height:auto;min-height:0;padding:clamp(14px,4vw,18px);border-radius:var(--surface-radius)}.card-content{height:auto;min-height:0;flex:0 1 auto;gap:clamp(12px,3vw,16px);overflow:visible}.card-top{gap:clamp(14px,3.4vw,18px)}.rank-section{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3vw,14px);width:100%}.rank-container{width:clamp(84px,22vw,100px);height:clamp(84px,22vw,100px)}.rank-number{font-size:clamp(30px,8vw,38px)}.percentile-badge{width:100%;max-width:100%;justify-content:center;align-items:center;text-align:center;padding:clamp(10px,2.6vw,12px) clamp(14px,3.6vw,18px);font-size:clamp(12px,3.2vw,13px);border-radius:var(--radius-sm);line-height:1.35}.percentile-icon{font-size:clamp(14px,3.6vw,16px)}.percentile-text{text-align:center}.avatar-section{width:100%;padding:clamp(12px,3.2vw,14px);gap:clamp(12px,3vw,14px);border-radius:var(--inset-radius)}.avatar{width:clamp(44px,12vw,52px);height:clamp(44px,12vw,52px);font-size:clamp(14px,3.6vw,16px)}.avatar-name{font-size:clamp(15px,4vw,17px);white-space:normal;line-height:1.25}.avatar-earnings{font-size:clamp(13px,3.6vw,15px)}.level-badge{padding:clamp(5px,1.4vw,7px) clamp(10px,2.4vw,12px);font-size:clamp(10px,2.6vw,11px)}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);flex:0 0 auto;gap:clamp(8px,2.2vw,10px);width:100%}.stat-main{display:contents}.stat-item{flex-direction:column;align-items:center;justify-content:center;min-height:clamp(68px,18vw,80px);padding:clamp(10px,2.8vw,12px) clamp(8px,2vw,10px);border-radius:var(--inset-radius)}.stat-value{margin-bottom:clamp(4px,1vw,6px);font-size:clamp(16px,4.2vw,20px);line-height:1.15;white-space:normal}.stat-label{font-size:clamp(9px,2.4vw,10px);text-transform:uppercase;letter-spacing:.05em;line-height:1.25;text-align:center}}@media(max-width:380px){.card{padding:12px}.rank-container{width:76px;height:76px}.rank-number{font-size:26px}.avatar{width:42px;height:42px}.stat-item{min-height:62px;padding:8px 6px}.stat-value{font-size:15px}}@media(min-width:1024px){.card{border-radius:20px}}';
+var xr = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, y = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? wr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && xr(e, r, a), a;
+};
+let x = class extends u {
+  constructor() {
+    super(...arguments), this.rank = 42, this.percentile = 5, this.username = "CyberNinja", this.earnings = "$847.2K", this.winRate = 71, this.gamesPlayed = 1284, this.winStreak = 7, this.level = 47;
+  }
+  get initials() {
+    return this.username.slice(0, 2).toUpperCase();
+  }
+  render() {
+    return vr(this);
+  }
+};
+x.styles = [b, f(br)];
+y([
+  p({ type: Number })
+], x.prototype, "rank", 2);
+y([
+  p({ type: Number })
+], x.prototype, "percentile", 2);
+y([
+  p({ type: String })
+], x.prototype, "username", 2);
+y([
+  p({ type: String })
+], x.prototype, "earnings", 2);
+y([
+  p({ type: Number })
+], x.prototype, "winRate", 2);
+y([
+  p({ type: Number })
+], x.prototype, "gamesPlayed", 2);
+y([
+  p({ type: Number })
+], x.prototype, "winStreak", 2);
+y([
+  p({ type: Number })
+], x.prototype, "level", 2);
+x = y([
+  v(Dt)
+], x);
+const yr = ".section{margin-bottom:clamp(1.5rem,5vw,3rem);min-width:0}.section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.section-title{font-size:1.125rem;font-weight:700;margin:0}.elite-badge{font-size:.65rem;padding:.2rem .5rem;border-radius:var(--radius-sm);background:var(--medal-gold-bg);border:1px solid var(--medal-gold-border);color:var(--gold);font-weight:600;letter-spacing:.04em;text-transform:uppercase}@media(max-width:639px){.section-title{font-size:1rem}}:host{display:block;width:100%}.ranking-section{--ranking-podium-min-h: clamp(300px, min(36vh, 36dvh), 420px);--ranking-player-stats-min-h: clamp(300px, min(36vh, 36dvh), 420px)}.ranking-grid{display:grid;grid-template-columns:1fr;gap:clamp(.75rem,2vw,1rem);width:100%;align-items:stretch}@media(min-width:1080px){.ranking-grid.has-pair{grid-template-columns:minmax(0,1.38fr) minmax(0,.82fr);min-height:var(--ranking-podium-min-h)}}.ranking-column{display:flex;flex-direction:column;min-width:0;min-height:0}.ranking-column--player-stats{min-height:var(--ranking-player-stats-min-h)}.ranking-column--player-stats sf-leaderboard-player-stats-card{flex:1 1 auto;width:100%;min-height:0}.podium-slot{display:flex;flex:1 1 auto;min-width:0;min-height:var(--ranking-podium-min-h);overflow:hidden}.podium-slot>sf-leaderboard-podium{flex:1 1 auto;width:100%;height:100%;min-height:100%}@media(max-width:1079px){.ranking-section{--ranking-podium-min-h: clamp(280px, min(38vh, 38dvh), 400px);--ranking-player-stats-min-h: clamp(280px, min(34vh, 34dvh), 360px)}}@media(min-width:677px)and (max-width:1079px){.ranking-section{--ranking-player-stats-min-h: clamp(360px, min(42vh, 42dvh), 440px)}}@media(max-width:676px){.ranking-column--player-stats{min-height:0;height:auto}}@media(min-width:1280px){.ranking-section{--ranking-podium-min-h: clamp(340px, min(38vh, 38dvh), 460px);--ranking-player-stats-min-h: clamp(340px, min(38vh, 38dvh), 460px)}}@media(max-width:639px){.ranking-section{--ranking-podium-min-h: clamp(280px, min(44dvh, 46vh), 360px);--ranking-player-stats-min-h: clamp(240px, min(34dvh, 36vh), 288px)}}@media(max-width:380px){.ranking-section{--ranking-podium-min-h: clamp(268px, 48dvh, 340px);--ranking-player-stats-min-h: clamp(248px, 44dvh, 300px)}}";
+var $r = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, we = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? _r(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && $r(e, r, a), a;
+};
+let G = class extends u {
+  constructor() {
+    super(...arguments), this.lookupPlayers = [];
+  }
+  get hasPair() {
+    return this.ranking?.podium != null && this.ranking?.playerStats != null;
+  }
+  resolvePlayer(t) {
+    return this.lookupPlayers.find((e) => e.rank === t.rank);
+  }
+  renderPlayerStatsCard(t) {
+    const e = this.resolvePlayer(t), r = t.message?.match(/(\d+)\s*%/), i = t.percentile ?? (r ? Number(r[1]) : 5);
+    return o`
+      <sf-leaderboard-player-stats-card
+        rank="${t.rank}"
+        percentile="${i}"
+        username="${t.username ?? e?.username ?? "You"}"
+        earnings="${t.earnings ?? (e ? xe(e.totalWinnings) : "$0")}"
+        winRate="${t.winRate ?? e?.winRate ?? 0}"
+        gamesPlayed="${t.gamesPlayed ?? e?.gamesPlayed ?? 0}"
+        winStreak="${t.winStreak ?? e?.streak ?? 0}"
+        level="${t.level ?? e?.level ?? 0}"
+      ></sf-leaderboard-player-stats-card>
+    `;
+  }
+  render() {
+    if (!Kt(this.ranking)) return d;
+    const { podium: t, playerStats: e } = this.ranking;
+    return o`
+      <section class="section ranking-section">
+        <div class="ranking-grid ${this.hasPair ? "has-pair" : "single"}">
+          ${t ? o`
+                <div class="ranking-column ranking-column--podium">
+                  <div class="section-header">
+                    <h2 class="section-title">
+                      ${t.title ?? "Top Champions"}
+                    </h2>
+                    ${t.badge ? o`<span class="elite-badge">${t.badge}</span>` : d}
+                  </div>
+                  <div class="podium-slot">
+                    <sf-leaderboard-podium
+                      .players=${t.players}
+                    ></sf-leaderboard-podium>
+                  </div>
+                </div>
+              ` : d}
+          ${e ? o`
+                <div class="ranking-column ranking-column--player-stats">
+                  <div class="section-header">
+                    <h2 class="section-title">
+                      ${e.title ?? "Your Position"}
+                    </h2>
+                  </div>
+                  ${this.renderPlayerStatsCard(e)}
+                </div>
+              ` : d}
+        </div>
+      </section>
+    `;
+  }
+};
+G.styles = [b, f(yr)];
+we([
+  p({ attribute: !1 })
+], G.prototype, "ranking", 2);
+we([
+  p({ attribute: !1 })
+], G.prototype, "lookupPlayers", 2);
+G = we([
+  v(Bt)
+], G);
+function kr(t) {
+  return o`<div class="filters">
+  <div class="search-wrapper">
+    <span class="search-icon">🔍</span>
+    <input
+      type="text"
+      class="search-input"
+      placeholder="Search players..."
+      .value="${t.searchQuery}"
+      @input="${t.handleSearchInput}"
+    />
+  </div>
+
+  <div class="timeframe-tabs">${t.renderTimeframeTabs()}</div>
+
+  <select
+    class="category-select"
+    .value="${t.activeCategory}"
+    @change="${t.handleCategoryChange}"
+  >
+    ${t.renderCategoryOptions()}
+  </select>
+</div>
+`;
+}
+const Ar = ":host{display:block}.filters{display:flex;flex-direction:column;gap:.75rem;width:100%;min-width:0}@media(min-width:640px){.filters{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem}}.search-wrapper{position:relative;flex:1}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-foreground);font-size:.875rem}.search-input{width:100%;padding:.625rem 1rem .625rem 2.5rem;border-radius:var(--radius-sm);border:1px solid var(--surface-border-color);background:var(--inset-bg);color:var(--foreground);font-size:.875rem;font-family:inherit;outline:none;transition:border-color .2s ease}.search-input::placeholder{color:var(--muted-foreground)}.search-input:focus{border-color:var(--primary)}.timeframe-tabs{display:flex;align-items:center;gap:4px;padding:4px;background:var(--inset-bg);border:1px solid var(--inset-border);border-radius:var(--radius-sm);width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}@media(min-width:640px){.timeframe-tabs{width:auto;overflow-x:visible}}.tab-btn{padding:.375rem .75rem;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--muted-foreground);font-size:.75rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:var(--foreground)}.tab-btn.active{background:var(--accent-gradient);color:var(--primary-foreground);box-shadow:var(--surface-shadow)}.category-select{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--surface-border-color);background:var(--surface-gradient);color:var(--foreground);font-size:.875rem;font-family:inherit;cursor:pointer;outline:none;width:100%;min-width:0;max-width:100%}@media(min-width:640px){.category-select{width:auto;min-width:140px}}.category-select:focus{border-color:var(--primary)}";
+var Er = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, ce = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Sr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && Er(e, r, a), a;
+};
+let L = class extends u {
+  constructor() {
+    super(...arguments), this.activeTimeframe = K, this.activeCategory = Q, this.searchQuery = "";
+  }
+  emit(t, e) {
+    this.dispatchEvent(
+      new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 })
+    );
+  }
+  handleSearchInput(t) {
+    const e = t.target;
+    this.emit(fe, e.value);
+  }
+  handleTimeframeClick(t) {
+    this.emit(ge, t);
+  }
+  handleCategoryChange(t) {
+    const e = t.target;
+    this.emit(ue, e.value);
+  }
+  renderTimeframeTabs() {
+    return o`${Wt.map(
+      (t) => o`
+        <button
+          class="tab-btn ${this.activeTimeframe === t.value ? "active" : ""}"
+          @click="${() => this.handleTimeframeClick(t.value)}"
+        >
+          ${t.label}
+        </button>
+      `
+    )}`;
+  }
+  renderCategoryOptions() {
+    return o`${Yt.map(
+      (t) => o`<option value="${t.value}">${t.label}</option>`
+    )}`;
+  }
+  render() {
+    return kr(this);
+  }
+};
+L.styles = [b, f(Ar)];
+ce([
+  p({ type: String })
+], L.prototype, "activeTimeframe", 2);
+ce([
+  p({ type: String })
+], L.prototype, "activeCategory", 2);
+ce([
+  p({ type: String })
+], L.prototype, "searchQuery", 2);
+L = ce([
+  v(zt)
+], L);
+function Pr(t) {
+  return o`<div class="badge ${t.size} ${t.rankClass}">
+  ${t.renderRankContent()}
+</div>
+${t.renderTrend()}
+`;
+}
+const zr = ":host{display:inline-flex;align-items:center;gap:.5rem}.badge{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--inset-radius);border:2px solid;font-family:var(--font-mono);font-weight:700;transition:all .3s ease}.badge.sm{width:32px;height:32px;font-size:.75rem}.badge.md{width:48px;height:48px;font-size:1rem}.badge.lg{width:64px;height:64px;font-size:1.25rem}.badge.rank-1{background:color-mix(in srgb,var(--place-first-table-icon, #ffd700) 22%,transparent);border-color:var(--place-first-table-icon, #ffd700);color:var(--place-first-table-icon, #ffd700);box-shadow:0 0 20px color-mix(in srgb,var(--place-first-table-icon, #ffd700) 35%,transparent)}.badge.rank-2{background:color-mix(in srgb,var(--place-second-table-icon, #c0c0c0) 18%,transparent);border-color:var(--place-second-table-icon, #c0c0c0);color:var(--place-second-table-icon, #c0c0c0);box-shadow:0 0 20px color-mix(in srgb,var(--place-second-table-icon, #c0c0c0) 30%,transparent)}.badge.rank-3{background:color-mix(in srgb,var(--place-third-table-icon, #cd7f32) 18%,transparent);border-color:var(--place-third-table-icon, #cd7f32);color:var(--place-third-table-icon, #cd7f32);box-shadow:0 0 20px color-mix(in srgb,var(--place-third-table-icon, #cd7f32) 30%,transparent)}.badge.rank-other{background:var(--color-base-2, #00114f);border-color:var(--color-base-2, #00114f);color:var(--color-surface-muted, #808090)}.icon{font-size:1em;line-height:1}.rank-number{font-size:.65em;margin-top:2px}.trend{display:flex;align-items:center;gap:2px;font-size:.75rem;font-weight:500}.trend.up{color:var(--color-success, #00d26a)}.trend.down{color:var(--color-error, #ff4757)}.trend.same{color:var(--color-surface-muted, #808090)}.trend-icon{font-size:.75rem}";
+var Cr = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, J = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Rr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && Cr(e, r, a), a;
+};
+let C = class extends u {
+  constructor() {
+    super(...arguments), this.rank = 1, this.size = "md", this.showTrend = !0;
+  }
+  get rankClass() {
+    return this.rank <= 3 ? `rank-${this.rank}` : "rank-other";
+  }
+  getIcon() {
+    return this.rank === 1 ? "👑" : this.rank === 2 ? "🥈" : this.rank === 3 ? "🥉" : "";
+  }
+  getTrend() {
+    if (!this.previousRank || !this.showTrend) return null;
+    const t = this.previousRank - this.rank;
+    return t > 0 ? { icon: "↑", class: "up", diff: `+${t}` } : t < 0 ? { icon: "↓", class: "down", diff: `${t}` } : { icon: "–", class: "same", diff: "0" };
+  }
+  renderRankContent() {
+    return this.rank <= 3 ? o`
+        <span class="icon">${this.getIcon()}</span>
+        <span class="rank-number">${this.rank}</span>
+      ` : o`<span>#${this.rank}</span>`;
+  }
+  renderTrend() {
+    const t = this.getTrend();
+    return t ? o`
+      <div class="trend ${t.class}">
+        <span class="trend-icon">${t.icon}</span>
+        <span>${t.diff}</span>
+      </div>
+    ` : o``;
+  }
+  render() {
+    return Pr(this);
+  }
+};
+C.styles = [b, f(zr)];
+J([
+  p({ type: Number })
+], C.prototype, "rank", 2);
+J([
+  p({ type: Number })
+], C.prototype, "previousRank", 2);
+J([
+  p({ type: String })
+], C.prototype, "size", 2);
+J([
+  p({ type: Boolean })
+], C.prototype, "showTrend", 2);
+C = J([
+  v(Ot)
+], C);
+function Or(t) {
+  return o`<div class="avatar ${t.size} ${t.highlight ? "highlight" : ""}">
+  ${t.renderAvatarContent()}
+</div>
+${t.renderOnlineIndicator()}
+`;
+}
+const Tr = ':host{display:inline-block;position:relative}.avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--border);background:var(--secondary);color:var(--foreground);font-weight:700;overflow:hidden}.avatar.sm{width:32px;height:32px;font-size:.7rem}.avatar.md{width:48px;height:48px;font-size:.875rem}.avatar.lg{width:64px;height:64px;font-size:1.25rem}.avatar.xl{width:80px;height:80px;font-size:1.5rem}.avatar.highlight{border-color:var(--primary)}.avatar img{width:100%;height:100%;object-fit:cover}.online-indicator{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;background:var(--success);border-radius:50%;border:2px solid var(--surface-border-color)}.online-indicator:before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--success);animation:pulse-ring 1.5s ease-out infinite}@keyframes pulse-ring{0%{transform:scale(.8);opacity:1}to{transform:scale(2);opacity:0}}';
+var Dr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, B = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Lr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && Dr(e, r, a), a;
+};
+let E = class extends u {
+  constructor() {
+    super(...arguments), this.username = "", this.avatar = "", this.size = "md", this.isOnline = !1, this.highlight = !1;
+  }
+  renderAvatarContent() {
+    return this.avatar ? o`<img src="${this.avatar}" alt="${this.username}" />` : o`<span>${Ue(this.username)}</span>`;
+  }
+  renderOnlineIndicator() {
+    return this.isOnline ? o`<span class="online-indicator"></span>` : o``;
+  }
+  render() {
+    return Or(this);
+  }
+};
+E.styles = [b, f(Tr)];
+B([
+  p({ type: String })
+], E.prototype, "username", 2);
+B([
+  p({ type: String })
+], E.prototype, "avatar", 2);
+B([
+  p({ type: String })
+], E.prototype, "size", 2);
+B([
+  p({ type: Boolean })
+], E.prototype, "isOnline", 2);
+B([
+  p({ type: Boolean })
+], E.prototype, "highlight", 2);
+E = B([
+  v(Tt)
+], E);
+function jr(t) {
+  return o`<div class="table-container">
+  <div class="table-header">
+    <div class="col-rank">Rank</div>
+    <div class="col-player">Player</div>
+    <div class="col-games text-center hide-mobile">Games</div>
+    <div class="col-win-rate text-center hide-mobile">Win Rate</div>
+    <div class="col-streak text-center hide-mobile">Streak</div>
+    <div class="col-winnings text-right">Winnings</div>
+  </div>
+  <div class="table-body">${t.renderRows()}</div>
+</div>
+`;
+}
+const Br = ":host{display:block;width:100%}.col-rank{color:var(--table-col-rank-color, inherit);font-size:var(--table-col-rank-font-size, inherit)}.col-player{color:var(--table-col-player-color, inherit);font-size:var(--table-col-player-font-size, inherit)}.col-games{color:var(--table-col-games-color, inherit);font-size:var(--table-col-games-font-size, inherit)}.col-win-rate{color:var(--table-col-win-rate-color, inherit);font-size:var(--table-col-win-rate-font-size, inherit)}.col-streak{color:var(--table-col-streak-color, inherit);font-size:var(--table-col-streak-font-size, inherit)}.col-winnings{color:var(--table-col-winnings-color, inherit);font-size:var(--table-col-winnings-font-size, inherit)}.table-container{width:100%;max-width:100%;border-radius:var(--surface-radius);border:1px solid var(--surface-border-color);background:var(--surface-gradient);box-shadow:var(--surface-shadow);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.table-header{display:grid;grid-template-columns:80px 1fr 100px 100px 100px 120px;gap:1rem;padding:.75rem 1rem;background:var(--muted);border-bottom:1px solid var(--border);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}@media(max-width:768px){.table-header{grid-template-columns:52px minmax(120px,1fr) minmax(72px,88px);gap:.5rem;padding:.625rem .75rem;font-size:.625rem}.table-header .hide-mobile{display:none}}@media(max-width:380px){.table-header{grid-template-columns:44px minmax(100px,1fr) 72px;padding:.5rem}}.table-body{display:flex;flex-direction:column}.table-row{display:grid;grid-template-columns:80px 1fr 100px 100px 100px 120px;gap:1rem;padding:.75rem 1rem;align-items:center;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .2s ease;animation:fade-in .3s ease-out forwards;opacity:0}@media(max-width:768px){.table-row{grid-template-columns:52px minmax(120px,1fr) minmax(72px,88px);gap:.5rem;padding:.625rem .75rem}.table-row .hide-mobile{display:none}}@media(max-width:380px){.table-row{grid-template-columns:44px minmax(100px,1fr) 72px;padding:.5rem}}.table-row:hover{background:var(--inset-hover-bg)}.table-row:hover .chevron{opacity:1}.table-row:last-child{border-bottom:none}.table-row.top-3{background:var(--accent-soft)}@keyframes fade-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.player-cell{display:flex;align-items:center;gap:.75rem;min-width:0}.player-details{min-width:0}.player-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-name.highlight{color:var(--primary)}.player-level{display:inline-block;font-size:.6rem;padding:2px 6px;border-radius:4px;border:1px solid var(--border);color:var(--muted-foreground);margin-top:2px}.stat-cell{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.875rem;color:var(--muted-foreground)}.stat-cell .icon{font-size:.875rem;opacity:.5}.stat-cell.win-rate .icon,.stat-cell.win-rate.high{color:var(--success)}.stat-cell.streak{color:var(--gold)}.winnings-cell{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.winnings{font-family:var(--font-mono);font-weight:700}.winnings.highlight{color:var(--primary)}.chevron{color:var(--muted-foreground);opacity:0;transition:opacity .2s ease}.text-right{text-align:right}.text-center{text-align:center}";
+var Nr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, Me = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Ur(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && Nr(e, r, a), a;
+};
+let ie = class extends u {
+  constructor() {
+    super(...arguments), this.players = [];
+  }
+  handlePlayerClick(t) {
+    this.dispatchEvent(
+      new CustomEvent(ve, {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  renderStreak(t) {
+    return t.streak > 0 ? o`<span class="icon">🔥</span>${t.streak}` : o`<span>-</span>`;
+  }
+  renderRows() {
+    return o`${this.players.map(
+      (t, e) => o`
+        <div
+          class="table-row ${t.rank <= 3 ? "top-3" : ""}"
+          style="animation-delay: ${e * 50}ms"
+          @click="${() => this.handlePlayerClick(t)}"
+        >
+          <div class="col-rank">
+            <sf-leaderboard-rank-badge
+              rank="${t.rank}"
+              previousRank="${t.previousRank || t.rank}"
+              size="sm"
+            ></sf-leaderboard-rank-badge>
+          </div>
+          <div class="col-player player-cell">
+            <sf-leaderboard-player-avatar
+              username="${t.username}"
+              avatar="${t.avatar || ""}"
+              size="sm"
+              ?isOnline="${t.isOnline}"
+              ?highlight="${t.rank <= 3}"
+            ></sf-leaderboard-player-avatar>
+            <div class="player-details">
+              <div class="player-name ${t.rank <= 3 ? "highlight" : ""}">
+                ${t.username}
+              </div>
+              <span class="player-level">LVL ${t.level}</span>
+            </div>
+          </div>
+          <div class="col-games stat-cell hide-mobile">
+            <span class="icon">🏆</span>
+            ${t.gamesPlayed.toLocaleString()}
+          </div>
+          <div
+            class="col-win-rate stat-cell win-rate ${t.winRate >= 60 ? "high" : ""} hide-mobile"
+          >
+            <span class="icon">🎯</span>
+            ${t.winRate}%
+          </div>
+          <div class="col-streak stat-cell streak hide-mobile">
+            ${this.renderStreak(t)}
+          </div>
+          <div class="col-winnings winnings-cell">
+            <span class="winnings ${t.rank <= 3 ? "highlight" : ""}">
+              ${xe(t.totalWinnings)}
+            </span>
+            <span class="chevron">→</span>
+          </div>
+        </div>
+      `
+    )}`;
+  }
+  render() {
+    return jr(this);
+  }
+};
+ie.styles = [b, f(Br)];
+Me([
+  p({ type: Array })
+], ie.prototype, "players", 2);
+ie = Me([
+  v(Ct)
+], ie);
+const Ir = ".section{margin-bottom:clamp(1.5rem,5vw,3rem);min-width:0}.section-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.section-title{font-size:1.125rem;font-weight:700;margin:0}.elite-badge{font-size:.65rem;padding:.2rem .5rem;border-radius:var(--radius-sm);background:var(--medal-gold-bg);border:1px solid var(--medal-gold-border);color:var(--gold);font-weight:600;letter-spacing:.04em;text-transform:uppercase}@media(max-width:639px){.section-title{font-size:1rem}}:host{display:block;width:100%}.table-section{display:flex;flex-direction:column;gap:1rem;min-width:0}.table-section-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem}.table-subtitle{font-size:.875rem;color:var(--muted-foreground)}.table-section sf-leaderboard-table{width:100%}@media(max-width:639px){.table-section-header{flex-direction:column;align-items:flex-start}}";
+var Mr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, Fe = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Fr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && Mr(e, r, a), a;
+};
+let ne = class extends u {
+  get timeframe() {
+    return this.section.filters?.timeframe ?? K;
+  }
+  get category() {
+    return this.section.filters?.category ?? Q;
+  }
+  get searchQuery() {
+    return this.section.filters?.searchQuery ?? "";
+  }
+  onTimeframeChange(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(ge, {
+        detail: t.detail,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onCategoryChange(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(ue, {
+        detail: t.detail,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onSearchChange(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(fe, {
+        detail: t.detail,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onPlayerSelect(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(ve, {
+        detail: t.detail,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return this.section ? o`
+      <section class="section table-section">
+        ${this.section.title || this.section.subtitle ? o`
+              <div class="table-section-header">
+                ${this.section.title ? o`<h2 class="section-title">${this.section.title}</h2>` : d}
+                ${this.section.subtitle ? o`<span class="table-subtitle">${this.section.subtitle}</span>` : d}
+              </div>
+            ` : d}
+        ${this.section.filters ? o`
+              <sf-leaderboard-filters
+                activeTimeframe=${this.timeframe}
+                activeCategory=${this.category}
+                searchQuery=${this.searchQuery}
+                @timeframe-change=${this.onTimeframeChange}
+                @category-change=${this.onCategoryChange}
+                @search-change=${this.onSearchChange}
+              ></sf-leaderboard-filters>
+            ` : d}
+        <sf-leaderboard-table
+          .players=${this.section.players}
+          @player-select=${this.onPlayerSelect}
+        ></sf-leaderboard-table>
+      </section>
+    ` : d;
+  }
+};
+ne.styles = [b, f(Ir)];
+Fe([
+  p({ attribute: !1 })
+], ne.prototype, "section", 2);
+ne = Fe([
+  v(Nt)
+], ne);
+const Hr = ":host{display:block;width:100%}.page-footer{border-top:1px solid var(--border);margin-top:clamp(1.5rem,4vw,3rem);padding-top:1rem;width:100%}.page-footer p{margin:0;text-align:center;font-size:.875rem;color:var(--muted-foreground)}";
+var Vr = Object.defineProperty, Wr = Object.getOwnPropertyDescriptor, He = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Wr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && Vr(e, r, a), a;
+};
+let se = class extends u {
+  constructor() {
+    super(...arguments), this.text = "";
+  }
+  render() {
+    return this.text ? o`
+      <footer class="page-footer">
+        <p>${this.text}</p>
+      </footer>
+    ` : d;
+  }
+};
+se.styles = [b, f(Hr)];
+He([
+  p({ type: String })
+], se.prototype, "text", 2);
+se = He([
+  v(Ut)
+], se);
+var Yr = Object.defineProperty, Gr = Object.getOwnPropertyDescriptor, Ve = (t, e, r, i) => {
+  for (var a = i > 1 ? void 0 : i ? Gr(e, r) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (a = (i ? s(e, r, a) : s(a)) || a);
+  return i && a && Yr(e, r, a), a;
+};
+let oe = class extends u {
+  constructor() {
+    super(...arguments), this.data = qt();
+  }
+  get refreshContext() {
+    const t = this.data.table?.filters;
+    return {
+      timeframe: t?.timeframe ?? K,
+      category: t?.category ?? Q
+    };
+  }
+  get footerText() {
+    return this.data.footer?.text ?? this.data.table?.footer?.text ?? "";
+  }
+  get rankingLookupPlayers() {
+    const t = this.data.table?.players ?? [], e = this.data.ranking?.podium?.players ?? [];
+    return [...t, ...e];
+  }
+  renderHeader() {
+    return this.data.header ? o`
+      <sf-leaderboard-header-section
+        .section=${this.data.header}
+        .refreshContext=${this.refreshContext}
+      ></sf-leaderboard-header-section>
+    ` : d;
+  }
+  renderStats() {
+    return this.data.stats?.items?.length ? o`
+      <sf-leaderboard-stats-section
+        .section=${this.data.stats}
+      ></sf-leaderboard-stats-section>
+    ` : d;
+  }
+  renderRanking() {
+    return this.data.ranking ? o`
+      <sf-leaderboard-ranking-section
+        .ranking=${this.data.ranking}
+        .lookupPlayers=${this.rankingLookupPlayers}
+      ></sf-leaderboard-ranking-section>
+    ` : d;
+  }
+  renderTable() {
+    return this.data.table ? o`
+      <sf-leaderboard-table-section
+        .section=${this.data.table}
+        @timeframe-change=${this.onTimeframeChange}
+        @category-change=${this.onCategoryChange}
+        @search-change=${this.onSearchChange}
+        @player-select=${this.onPlayerSelect}
+      ></sf-leaderboard-table-section>
+    ` : d;
+  }
+  renderFooter() {
+    return this.footerText ? o`
+      <sf-leaderboard-footer-section
+        text=${this.footerText}
+      ></sf-leaderboard-footer-section>
+    ` : d;
+  }
+  onTimeframeChange(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(ge, {
+        detail: { timeframe: t.detail },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onCategoryChange(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(ue, {
+        detail: { category: t.detail },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onSearchChange(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(fe, {
+        detail: { query: t.detail },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  onPlayerSelect(t) {
+    t.stopPropagation(), this.dispatchEvent(
+      new CustomEvent(ve, {
+        detail: { player: t.detail },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return Zt(this);
+  }
+};
+oe.styles = [b, f(Xt)];
+Ve([
+  p({ attribute: !1 })
+], oe.prototype, "data", 2);
+oe = Ve([
+  v(St)
+], oe);
+rt(Je);
+//# sourceMappingURL=components.bundle.js.map