@sensiblestats/widget-react 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @sensiblestats/widget-react
 
+## 0.10.0
+
+### Minor Changes
+
+- Redesign team/player entity cards and polish the betting cards.
+
+  - Entity cards adopt an identity-hero layout: crest-led identity block beside a tabbed stats panel. Competition chips become an underline tab strip on top of the stats they switch, with the season pill (shortened to `26/27`) on that row. The W-D-L record renders as a proportional win/draw/loss form bar. Single-competition cards show a static league label; zero-scope cards fall back to a bare avatar+name row.
+  - Market odds cards drop the "updated HH:MM" line.
+  - Betting insight cards move the add-to-slip button beside the top-right odds box (and free its toast from the narrow column so text no longer clips), and relocate the fixture (team names) and competition under the market name, with the league on its own line.
+
+## 0.9.0
+
+### Minor Changes
+
+- Entity cards now show the season and per-competition scope chips. `EntityCard`
+  drops the flat `stats` field in favor of `seasonName` + `scopes` (`All` aggregate
+  plus one scope per competition, each with an optional logo); the widget renders a
+  season label and, for 2+ competitions, a chip row that switches the stat set
+  client-side. `widget-embed` re-bundles `widget-react`, so it is republished too.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.8.0
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -193,19 +193,27 @@ function readStatCells(raw) {
   }
   return cells;
 }
-function readStats(card) {
-  return readStatCells(card.stats);
-}
 function toCardVM(card) {
   const entityType = str(card.entityType)?.toLowerCase();
   const kind = entityType === "player" ? "player" : entityType === "team" ? "team" : "generic";
+  const scopes = Array.isArray(card.scopes) ? card.scopes.map((s) => {
+    const label = str(s.label);
+    if (!label) return null;
+    return {
+      competitionId: typeof s.competitionId === "number" ? s.competitionId : null,
+      label,
+      image: str(s.imagePath),
+      stats: readStatCells(s.stats)
+    };
+  }).filter((s) => s !== null) : [];
   return {
     id: String(card.entityId),
     kind,
     name: card.canonicalName,
     image: str(card.imagePath) ?? str(card.imageUrl) ?? str(card.image_url) ?? str(card.logoUrl) ?? str(card.logo),
     sub: str(card.subtitle) ?? str(card.teamName) ?? str(card.leagueName) ?? str(card.position),
-    stats: readStats(card)
+    season: str(card.seasonName),
+    scopes
   };
 }
 function toActionVM(action) {
@@ -536,16 +544,77 @@ function Markdown({ text }) {
 var import_react2 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var MAX_VISIBLE = 3;
+var RECORD_RE = /^(\d+)-(\d+)-(\d+)$/;
 function initials(name) {
   return name.split(/\s+/).slice(0, 2).map((w) => w[0] ?? "").join("").toUpperCase();
 }
-function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
-  const [expanded, setExpanded] = (0, import_react2.useState)(false);
-  if (cards.length === 0) return null;
-  const visible = expanded ? cards : cards.slice(0, MAX_VISIBLE);
-  const overflow = cards.length - MAX_VISIBLE;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-cards", children: [
-    visible.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
+function shortSeason(season) {
+  return season.replace(/\d{4}/g, (year) => year.slice(2));
+}
+function Crest({ image }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-crest", style: { backgroundImage: `url(${image})` }, "aria-hidden": "true" });
+}
+function FormBar({ w, d, l }) {
+  if (w + d + l === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-form", "aria-hidden": "true", children: [
+    w > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-form-w", style: { flexGrow: w } }) : null,
+    d > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-form-d", style: { flexGrow: d } }) : null,
+    l > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-form-l", style: { flexGrow: l } }) : null
+  ] });
+}
+function StatRows({ stats }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-stats", children: stats.map((s) => {
+    const m = RECORD_RE.exec(s.value);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-rlabel", children: s.label }),
+      m ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormBar, { w: Number(m[1]), d: Number(m[2]), l: Number(m[3]) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-rval", children: s.value })
+    ] }, s.label);
+  }) });
+}
+function CardBody({ c }) {
+  const [active, setActive] = (0, import_react2.useState)(0);
+  if (c.scopes.length === 0) return null;
+  const season = c.season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-season", children: shortSeason(c.season) }) : null;
+  if (c.scopes.length === 1) {
+    const only = c.scopes[0];
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-tabs ss-w-ecard-tabs-static", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-lead", children: [
+          only.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: only.image }) : null,
+          only.label
+        ] }),
+        season
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRows, { stats: only.stats })
+    ] });
+  }
+  const current = c.scopes[active] ?? c.scopes[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-tabs", role: "tablist", children: [
+      c.scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          className: "ss-w-ecard-tab",
+          "aria-selected": i === active,
+          "aria-label": s.label,
+          title: s.label,
+          onClick: () => setActive(i),
+          children: s.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: s.image }) : s.label
+        },
+        String(s.competitionId ?? "all")
+      )),
+      season
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRows, { stats: current.stats }, String(current.competitionId ?? "all"))
+  ] });
+}
+function EntityCardItem({ c }) {
+  const hasBody = c.scopes.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: hasBody ? "ss-w-ecard" : "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-id", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "span",
         {
@@ -554,16 +623,21 @@ function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMore
           children: c.image ? "" : initials(c.name)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-meta", children: [
-        c.kind !== "generic" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-kind", children: c.kind }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-idtext", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-nm", children: c.name }),
         c.sub ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-sub", children: c.sub }) : null
-      ] }),
-      c.stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-stat", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: s.value }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: s.label })
-      ] }, s.label))
-    ] }, c.id)),
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardBody, { c })
+  ] });
+}
+function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  if (cards.length === 0) return null;
+  const visible = expanded ? cards : cards.slice(0, MAX_VISIBLE);
+  const overflow = cards.length - MAX_VISIBLE;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-cards", children: [
+    visible.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EntityCardItem, { c }, c.id)),
     overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "ss-w-cards-more", disabled, onClick: () => setExpanded((v) => !v), children: expanded ? showLessLabel : showMoreLabel(overflow) }) : null
   ] });
 }
@@ -673,7 +747,7 @@ function AddToSlipButton({ it, slip, ui }) {
 
 // src/components/BettingInsightList.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function StatRows({ stats }) {
+function StatRows2({ stats }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-lbl", children: s.label }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-num", children: s.value })
@@ -684,7 +758,7 @@ function ScopedStats({ scopes }) {
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-scoped", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: current.stats }, current.key)
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows2, { stats: current.stats }, current.key)
   ] });
 }
 function StatsDisclosure({ it, ui }) {
@@ -706,35 +780,37 @@ function StatsDisclosure({ it, ui }) {
         ]
       }
     ),
-    open ? hasScopes ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: it.stats }) : null
+    open ? hasScopes ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows2, { stats: it.stats }) : null
   ] });
 }
 function InsightCard({ it, ui, slip }) {
   const live = it.isLive || it.phase === "live";
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-binsight", children: [
-    live || it.fixture || it.competition ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-status", children: [
-      live ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-live", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
-        ui?.liveLabel ?? "Live"
-      ] }) : null,
-      it.fixture ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
-      it.competition ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-comp", children: it.competition }) : null
-    ] }) : null,
+    live ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-bi-status", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-live", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
+      ui?.liveLabel ?? "Live"
+    ] }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-mkt", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-market", children: it.market }),
-        it.selection ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-sel", children: it.selection }) : null
+        it.selection ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-sel", children: it.selection }) : null,
+        it.fixture || it.competition ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-match", children: [
+          it.fixture ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
+          it.competition ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-comp", children: it.competition }) : null
+        ] }) : null
       ] }),
-      it.odds ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-odds", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("b", { children: it.odds }),
-        it.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
-      ] }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-action", children: [
+        it.odds ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-bi-odds", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("b", { children: it.odds }),
+          it.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddToSlipButton, { it, slip, ui })
+      ] })
     ] }),
     it.text ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ss-w-bi-text", children: it.text }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatsDisclosure, { it, ui }),
-    it.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddToSlipButton, { it, slip, ui })
+    it.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
   ] });
 }
 function BettingInsightList({ insights, ui, slip }) {
@@ -753,15 +829,8 @@ function OddsRow({ vm, row, ui, slip }) {
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
   ] });
 }
-function formatUpdated(iso) {
-  if (!iso) return void 0;
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return void 0;
-  return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
-}
 function MarketOddsCard({ vm, ui, slip }) {
   const [open, setOpen] = (0, import_react6.useState)(false);
-  const updated = formatUpdated(vm.updatedAt);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-mocard", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-mo-head", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-mo-market", children: vm.market }),
@@ -779,10 +848,7 @@ function MarketOddsCard({ vm, ui, slip }) {
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: open ? ui?.hideLines ?? "Hide lines" : `${ui?.moreLines ?? "More lines"} (${vm.moreRows.length})` }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `ss-w-bi-chev${open ? " ss-w-bi-chev-up" : ""}`, "aria-hidden": "true" })
     ] }) : null,
-    vm.bookmaker || updated ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-mo-foot", children: [
-      vm.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: vm.bookmaker }) : null,
-      updated ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: `${ui?.updatedLabel ?? "updated"} ${updated}` }) : null
-    ] }) : null,
+    vm.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ss-w-mo-foot", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: vm.bookmaker }) }) : null,
     vm.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "ss-w-bi-disc", children: vm.disclaimer }) : null
   ] });
 }
@@ -941,6 +1007,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
   --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
   --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;
   --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
+  --ss-w-pos: #1aa563; --ss-w-neg: #e0524b;
   --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);
@@ -950,12 +1017,14 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
     --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
     --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
     --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
+    --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
   }
 }
 .ss-w-root[data-ss-w-theme="dark"] {
   --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
   --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
   --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
+  --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
 }
 .ss-w-root[data-ss-w-theme="light"] {
   --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
@@ -1016,18 +1085,47 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-md-code { background: var(--ss-w-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }
 
 /* entity cards */
-.ss-w-cards { display: flex; flex-direction: column; gap: 7px; }
-.ss-w-ecard { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 11px; text-align: left; }
-.ss-w-thumb { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; }
-.ss-w-thumb.ss-w-team { border-radius: 10px; }
+.ss-w-cards { display: flex; flex-direction: column; gap: 8px; }
+
+/* Identity Hero: crest-led identity block | tabbed stats panel */
+.ss-w-ecard { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
+
+.ss-w-ecard-id { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 13px 10px; border-right: 1px solid var(--ss-w-line); background: linear-gradient(158deg, var(--ss-w-bubble), color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-bubble))); }
+.ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
+.ss-w-thumb { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
+.ss-w-thumb.ss-w-team { border-radius: 12px; }
 .ss-w-ecard[data-kind="player"] .ss-w-thumb { background-color: var(--ss-w-accent); }
-.ss-w-meta { display: flex; flex-direction: column; min-width: 0; }
-.ss-w-kind { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); line-height: 1.3; }
-.ss-w-nm { font-weight: 660; }
-.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); }
-.ss-w-stat { margin-left: auto; text-align: center; }
-.ss-w-stat b { display: block; font-variant-numeric: tabular-nums; }
-.ss-w-stat span { font-size: 9px; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-nm { font-weight: 680; line-height: 1.15; overflow-wrap: anywhere; }
+.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+
+/* bare card (no stat scopes): simple avatar + name row */
+.ss-w-ecard-bare { display: flex; align-items: center; }
+.ss-w-ecard-bare .ss-w-ecard-id { flex-direction: row; text-align: left; gap: 11px; background: none; border-right: none; padding: 10px 12px; }
+.ss-w-ecard-bare .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
+.ss-w-ecard-bare .ss-w-thumb.ss-w-team { border-radius: 10px; }
+
+.ss-w-ecard-body { min-width: 0; padding: 9px 12px 12px; display: flex; flex-direction: column; }
+
+/* tab strip seated on the stats panel's top edge; active tab underlined in accent */
+.ss-w-ecard-tabs { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--ss-w-line); margin-bottom: 9px; flex-wrap: wrap; }
+.ss-w-ecard-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 5px 8px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
+.ss-w-ecard-tab[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
+.ss-w-ecard-tabs-static { align-items: center; }
+.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; }
+.ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }
+.ss-w-ecard-season { margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
+.ss-w-ecard-tabs-static .ss-w-ecard-season { margin-bottom: 4px; }
+
+.ss-w-ecard-stats { display: flex; flex-direction: column; gap: 4px; }
+.ss-w-ecard-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
+.ss-w-ecard-rlabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .045em; color: var(--ss-w-faint); font-weight: 600; }
+.ss-w-ecard-rval { justify-self: end; font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+.ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }
+.ss-w-form span { display: block; border-radius: 2px; }
+.ss-w-form-w { background: var(--ss-w-pos); }
+.ss-w-form-d { background: var(--ss-w-faint); }
+.ss-w-form-l { background: var(--ss-w-neg); }
+
 .ss-w-cards-more { align-self: flex-start; font-size: 11.5px; font-weight: 560; color: var(--ss-w-accent); background: none; border: none; cursor: pointer; padding: 3px 2px; }
 .ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }
 .ss-w-cards-more:disabled { opacity: .5; cursor: default; }
@@ -1044,7 +1142,12 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ss-w-bi-market { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
 .ss-w-bi-sel { font-size: 12px; line-height: 1.3; color: var(--ss-w-faint); }
-.ss-w-bi-odds { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
+.ss-w-bi-match { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 5px; }
+.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
+.ss-w-bi-action .ss-w-slip > button { flex: 1; text-align: center; }
+/* The action column is narrow; let its toast size to its own text and anchor to the card's right edge instead of being clipped to the button width. */
+.ss-w-bi-action .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
+.ss-w-bi-odds { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
 .ss-w-bi-odds-cap { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
 .ss-w-bi-odds b { font-size: 19px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.1; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }