@sensiblestats/widget-react 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/dist/index.cjs

@@ -544,56 +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 Crest({ scope }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-crest", style: { backgroundImage: `url(${scope.image})` }, "aria-hidden": "true" });
+function shortSeason(season) {
+  return season.replace(/\d{4}/g, (year) => year.slice(2));
 }
-function StatRow({ stats }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-stats", children: 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)) });
+function Crest({ image }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-crest", style: { backgroundImage: `url(${image})` }, "aria-hidden": "true" });
 }
-function ScopeChips({ scopes }) {
-  const [active, setActive] = (0, import_react2.useState)(0);
-  const current = scopes[active] ?? scopes[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ss-w-ecard-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "ss-w-ecard-chip",
-        "aria-pressed": i === active,
-        "aria-label": s.label,
-        title: s.label,
-        onClick: () => setActive(i),
-        children: s.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { scope: s }) : s.label
-      },
-      String(s.competitionId ?? "all")
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRow, { stats: current.stats }, String(current.competitionId ?? "all"))
+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 CardScopes({ scopes }) {
-  if (scopes.length === 0) return null;
-  if (scopes.length === 1) {
-    const only = scopes[0];
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-tag", children: [
-        only.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { scope: only }) : null,
-        only.label
+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)(StatRow, { stats: only.stats })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatRows, { stats: only.stats })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ScopeChips, { scopes });
+  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 season = c.scopes.length > 0 ? c.season : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-head", children: [
+  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",
         {
@@ -602,17 +623,12 @@ function EntityCardItem({ c }) {
           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 || season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-sub", children: [
-          c.sub,
-          c.sub && season ? " \xB7 " : "",
-          season ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-season", children: season }) : null
-        ] }) : null
+        c.sub ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-sub", children: c.sub }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardScopes, { scopes: c.scopes })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CardBody, { c })
   ] });
 }
 function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
@@ -731,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 })
@@ -742,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 }) {
@@ -764,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 }) {
@@ -811,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 }),
@@ -837,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
   ] });
 }
@@ -999,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);
@@ -1008,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;
@@ -1074,26 +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; flex-direction: column; align-items: stretch; gap: 8px; 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-ecard-head { display: flex; align-items: center; gap: 11px; }
-.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-season { color: var(--ss-w-accent); font-weight: 660; }
-.ss-w-ecard-scopes { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }
-.ss-w-ecard-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; border: none; border-radius: 7px; padding: 4px 8px; color: var(--ss-w-faint); background: none; cursor: pointer; }
-.ss-w-ecard-chip[aria-pressed="true"] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
-.ss-w-ecard-crest { width: 16px; height: 16px; display: block; border-radius: 4px; background-size: cover; background-position: center; }
-.ss-w-ecard-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
-.ss-w-ecard-stats { display: flex; gap: 16px; }
-.ss-w-stat { 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; }
@@ -1110,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); }