npm - @sensiblestats/widget-react - Versions diffs - 0.94.0 → 0.95.1 - Mend

@sensiblestats/widget-react 0.94.0 → 0.95.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -81,6 +81,6 @@ type StatsWidgetProps = {
 };
 declare function StatsWidget(props: StatsWidgetProps): JSX.Element | null;
-declare const WIDGET_CSS = ".ss-w-root { all: revert; }\n.ss-w-root, .ss-w-root * { box-sizing: border-box; margin: 0; padding: 0; }\n.ss-w-root {\n  --ss-w-accent: #17936a;\n  --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n  --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;\n  --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n  --ss-w-pos: #1aa563; --ss-w-neg: #e0524b; --ss-w-warn: #c07a00;\n  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n  --ss-w-correct: #1f9d55; --ss-w-wrong: #b9bbc2;\n  --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);\n}\n@media (prefers-color-scheme: dark) {\n  .ss-w-root[data-ss-w-theme=\"auto\"] {\n    --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n    --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n    --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n    --ss-w-pos: #37c891; --ss-w-neg: #f0655d; --ss-w-warn: #e0a030;\n    --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n    --ss-w-correct: #37c86b; --ss-w-wrong: #3a3a41;\n  }\n}\n.ss-w-root[data-ss-w-theme=\"dark\"] {\n  --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n  --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n  --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n  --ss-w-pos: #37c891; --ss-w-neg: #f0655d; --ss-w-warn: #e0a030;\n  --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n  --ss-w-correct: #37c86b; --ss-w-wrong: #3a3a41;\n}\n.ss-w-root[data-ss-w-theme=\"light\"] {\n  --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n  --ss-w-ink: #14181d; --ss-w-faint: #6b7580;\n  --ss-w-line: #e4e8ec; --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n  --ss-w-correct: #1f9d55; --ss-w-wrong: #b9bbc2;\n}\n\n/* \u2500\u2500 games design tokens (u393) \u2500\u2500 derived from operator tokens so every tenant theme works.\n   Targets (Hull #F5A800/#0B0B0B/#F5F5F5): ground #0D0C0A, surface #17150F, warm #1C1810,\n   raised #211E17, line #26221A, line-warm #3A2F18, accent-tint #3A2C10, strong-line #4A4131. */\n.ss-w-root {\n  --ss-g-ground: color-mix(in srgb, var(--ss-w-accent) 2%, var(--ss-w-panel));\n  --ss-g-surface: color-mix(in srgb, var(--ss-w-accent) 3%, color-mix(in srgb, var(--ss-w-ink) 3%, var(--ss-w-panel)));\n  --ss-g-warm: color-mix(in srgb, var(--ss-w-accent) 6%, color-mix(in srgb, var(--ss-w-ink) 2%, var(--ss-w-panel)));\n  --ss-g-raised: color-mix(in srgb, var(--ss-w-accent) 3%, color-mix(in srgb, var(--ss-w-ink) 6%, var(--ss-w-panel)));\n  --ss-g-line: color-mix(in srgb, var(--ss-w-accent) 4%, color-mix(in srgb, var(--ss-w-ink) 8%, var(--ss-w-panel)));\n  --ss-g-line-warm: color-mix(in srgb, var(--ss-w-accent) 18%, color-mix(in srgb, var(--ss-w-ink) 3%, var(--ss-w-panel)));\n  --ss-g-accent-tint: color-mix(in srgb, var(--ss-w-accent) 20%, var(--ss-w-panel));\n  --ss-g-strong-line: color-mix(in srgb, var(--ss-w-accent) 8%, color-mix(in srgb, var(--ss-w-ink) 18%, var(--ss-w-panel)));\n  --ss-g-ink: color-mix(in srgb, var(--ss-w-accent) 4%, var(--ss-w-ink));\n  --ss-g-ink-2: color-mix(in srgb, var(--ss-w-accent) 4%, color-mix(in srgb, var(--ss-w-ink) 72%, var(--ss-w-panel)));\n  --ss-g-muted: color-mix(in srgb, var(--ss-w-accent) 5%, color-mix(in srgb, var(--ss-w-ink) 60%, var(--ss-w-panel)));\n  --ss-g-faint: color-mix(in srgb, var(--ss-w-ink) 45%, var(--ss-w-panel));\n  --ss-g-on-accent: #1a1206;\n  --ss-g-on-correct: #fff;\n  --ss-g-correct: color-mix(in srgb, var(--ss-w-correct) 55%, #000);\n  --ss-g-wrong: color-mix(in srgb, var(--ss-w-neg) 55%, #000);\n  /* Brighter wrong for thin marks (borders, icons, segments) that must read on dark surfaces; --ss-g-wrong stays for fills. */\n  --ss-g-wrong-mark: var(--ss-w-neg);\n  --ss-g-success: color-mix(in srgb, var(--ss-w-pos) 80%, var(--ss-w-ink));\n  --ss-g-success-tint: color-mix(in srgb, var(--ss-w-pos) 18%, var(--ss-w-panel));\n  --ss-g-close: #e3b341;\n  --ss-g-flame: #ff6a1a;\n  /* Pitch colours are fixed in both themes: the pitch is always a dark green. */\n  --ss-g-pitch: #123524;\n  --ss-g-pitch-line: #3e7055;\n  --ss-g-pitch-chip: #0d0c0a;\n  --ss-g-pitch-ink: #f4efe6;\n  --ss-g-pitch-mark: #c9d6cd;\n  --ss-g-font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;\n  --ss-g-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;\n}\n\n\n/* \u2500\u2500 games ui kit (u393) \u2500\u2500 */\n.ss-g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.ss-g-head { display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 6px; font-family: var(--ss-g-font-body); }\n.ss-g-back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--ss-g-ink); cursor: pointer; }\n.ss-g-back:hover { background: var(--ss-g-surface); }\n.ss-g-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }\n.ss-g-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-title { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; color: var(--ss-g-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-head-right { flex: none; }\n.ss-g-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }\n.ss-g-chip--neutral { background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); color: var(--ss-g-ink); }\n.ss-g-chip--neutral .ss-g-num, .ss-g-chip--neutral svg { color: var(--ss-w-accent); }\n.ss-g-chip--accent { background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font-weight: 700; }\n.ss-g-chip--success { background: var(--ss-g-success-tint); color: var(--ss-g-success); font-weight: 700; }\n.ss-g-chip--badge { padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); }\n.ss-g-chip--lock { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--ss-g-raised); color: var(--ss-g-muted); }\n.ss-g-statstack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }\n.ss-g-statstack-v { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; color: var(--ss-w-accent); }\n.ss-g-statstack-l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-progress { display: flex; align-items: center; gap: 12px; padding: 0 16px 8px; }\n.ss-g-progress-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }\n.ss-g-progress-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ss-g-ink); }\n.ss-g-progress-rl { color: var(--ss-g-muted); }\n.ss-g-segs { display: grid; gap: 4px; }\n.ss-g-seg { height: 5px; border-radius: 3px; background: var(--ss-g-line); }\n.ss-g-seg[data-state=\"done\"] { background: var(--ss-g-strong-line); }\n.ss-g-seg[data-state=\"current\"] { background: var(--ss-w-accent); }\n.ss-g-seg[data-state=\"correct\"] { background: var(--ss-g-correct); }\n.ss-g-seg[data-state=\"wrong\"] { background: var(--ss-g-wrong-mark); }\n.ss-g-btn { min-height: 48px; padding: 0 16px; border-radius: 12px; font-family: var(--ss-g-font-body); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }\n.ss-g-btn:disabled { opacity: .45; cursor: default; }\n.ss-g-btn--block { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 800; }\n.ss-g-btn--primary { border: 0; background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-btn--outline { border: 1.5px solid var(--ss-g-strong-line); background: transparent; color: var(--ss-g-ink); }\n.ss-g-btn--accent-outline { border: 1.5px solid var(--ss-w-accent); background: transparent; color: var(--ss-w-accent); }\n.ss-g-btn--surface { border: 1px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); font-weight: 600; font-size: 13px; }\n.ss-g-search { display: flex; flex-direction: column; gap: 6px; }\n.ss-g-search-label { font-size: 12px; font-weight: 600; color: var(--ss-g-muted); }\n.ss-g-search-box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1.5px solid var(--ss-g-line); color: var(--ss-g-muted); }\n.ss-g-search-box:focus-within { border-color: var(--ss-w-accent); }\n.ss-g-search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ss-g-ink); font: 500 15px var(--ss-g-font-body); }\n.ss-g-search-clear { flex: none; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--ss-g-line); color: var(--ss-g-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }\n.ss-g-search-clear:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-g-footer { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--ss-g-line); display: flex; flex-direction: column; gap: 10px; background: var(--ss-g-ground); }\n.ss-g-sil { position: relative; flex: none; display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--ss-g-raised); color: var(--ss-g-strong-line); }\n.ss-g-sil--selected { background: var(--ss-g-accent-tint); color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-g-raised)); }\n.ss-g-sil--mystery { background: var(--ss-g-accent-tint); color: var(--ss-g-ground); }\n.ss-g-sil-q { position: absolute; top: 22%; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 1.1em; color: var(--ss-w-accent); }\n.ss-g-crest { flex: none; object-fit: contain; }\n.ss-g-crest--ph { color: var(--ss-g-strong-line); }\n.ss-g-pitch-svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--ss-g-pitch-line); stroke-width: .6; }\n/* \u2500\u2500 games screen scaffold (u393) \u2014 shared by every game screen \u2500\u2500 */\n.ss-w-gscreen > .ss-g-screen { flex: 1; min-height: 0; }\n.ss-g-screen { display: flex; flex-direction: column; min-height: 0; background: var(--ss-g-ground); color: var(--ss-g-ink); font-family: var(--ss-g-font-body); }\n.ss-g-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 16px; }\n.ss-g-body .ss-g-progress { padding: 0; }\n.ss-g-loading { align-items: center; justify-content: center; color: var(--ss-g-muted); font-size: 13px; }\n.ss-g-opts { display: flex; flex-direction: column; gap: 4px; max-height: 232px; overflow-y: auto; }\n.ss-g-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 12px; background: var(--ss-g-surface); color: var(--ss-g-ink); font: 600 15px var(--ss-g-font-body); text-align: left; cursor: pointer; }\n.ss-g-opt:hover, .ss-g-opt:focus-visible { background: var(--ss-g-raised); outline: none; }\n.ss-g-opt-av { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 13px; font-weight: 700; }\n.ss-g-opt-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-result { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 18px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-result[data-tone=\"win\"] { border-color: var(--ss-g-correct); }\n.ss-g-result[data-tone=\"lose\"] { border-color: var(--ss-g-wrong-mark); }\n.ss-g-result-title { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }\n.ss-g-result-score { font-size: 13px; font-weight: 700; color: var(--ss-g-muted); }\n.ss-g-result-num { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 40px; color: var(--ss-w-accent); margin-right: 4px; }\n.ss-g-result-detail { font-size: 13px; color: var(--ss-g-ink-2); }\n.ss-g-result .ss-g-btn { margin-top: 6px; }\n\n/* launcher */\n.ss-w-fab-wrap { position: fixed; bottom: var(--ss-w-offset-y); z-index: 2147483000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-fab-wrap { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-fab-wrap { left: var(--ss-w-offset-x); align-items: flex-start; }\n.ss-w-fab { width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--ss-w-nav); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); }\n.ss-w-fab-mark { width: 30px; height: 30px; display: block; object-fit: contain; }\n.ss-w-greeting { max-width: 240px; display: flex; align-items: flex-start; background: var(--ss-w-panel); color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-greeting-body { position: relative; flex: 1; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 9px 4px 9px 12px; }\n.ss-w-greeting-x { flex: none; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 7px 9px 0 2px; }\n.ss-w-greeting-text { display: block; }\n/* Bubble asks (onboarding presets, spec C6): the line stays one button, the asks stack under it as\n   sibling buttons. 240 px bubble: 196 px of text room per ask; widest contract ask 167 px (EN),\n   153 px (TR) at 12px/600, measured 2026-10-04. A longer label wraps, never an ellipsis. */\n.ss-w-greeting--asks { flex-direction: column; align-items: stretch; }\n.ss-w-greeting-top { display: flex; align-items: flex-start; }\n.ss-w-greeting-asks { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }\n.ss-w-greeting-ask { min-height: 44px; width: 100%; text-align: left; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 35%, var(--ss-w-line)); border-radius: 10px; padding: 6px 10px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }\n.ss-w-greeting-ask:hover { border-color: var(--ss-w-accent); }\n.ss-w-greeting-ask:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n/* Typing indicator: overlays the text area so bubble height stays put; hidden at\n   rest, revealed only during the one-shot intro (see prefers-reduced-motion block). */\n.ss-w-greeting-dots { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; }\n.ss-w-greeting-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-faint); display: block; }\n/* One-shot launcher attention intro: FAB nudges, then the greeting types in.\n   Gated behind no-preference so reduce-motion users get the greeting shown\n   statically (text visible, no nudge, no typing). ChatFab adds .ss-w-intro once\n   per page load; every animation runs a single time and settles at rest. */\n@media (prefers-reduced-motion: no-preference) {\n  .ss-w-intro .ss-w-fab { animation: ss-w-nudge .8s ease both; }\n  .ss-w-intro .ss-w-greeting { animation: ss-w-greet-in .45s cubic-bezier(.2,.8,.3,1.15) .8s both; }\n  .ss-w-intro .ss-w-greeting-text { animation: ss-w-greet-textin .4s ease 1.65s both; }\n  .ss-w-intro .ss-w-greeting-asks { animation: ss-w-greet-textin .4s ease 1.65s both; }\n  .ss-w-intro .ss-w-greeting-dots { animation: ss-w-greet-dots .95s ease .85s both; }\n  .ss-w-intro .ss-w-greeting-dots i { animation: ss-w-greet-dotbounce .5s ease .85s 2; }\n  .ss-w-intro .ss-w-greeting-dots i:nth-child(2) { animation-delay: 1s; }\n  .ss-w-intro .ss-w-greeting-dots i:nth-child(3) { animation-delay: 1.15s; }\n}\n@keyframes ss-w-nudge {\n  0%, 100% { transform: none; }\n  22% { transform: translateY(-9px) rotate(-9deg); }\n  44% { transform: translateY(0) rotate(7deg); }\n  64% { transform: translateY(-4px) rotate(-4deg); }\n  82% { transform: rotate(2deg); }\n}\n@keyframes ss-w-greet-in {\n  from { opacity: 0; transform: translateY(8px) scale(.92); }\n  to { opacity: 1; transform: none; }\n}\n@keyframes ss-w-greet-textin { from { opacity: 0; } to { opacity: 1; } }\n@keyframes ss-w-greet-dots { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }\n@keyframes ss-w-greet-dotbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n\n/* panel */\n.ss-w-panel { position: fixed; bottom: calc(var(--ss-w-offset-y) + 72px); z-index: 2147483000; display: flex; flex-direction: column; width: min(460px, calc(100vw - 40px)); height: min(640px, calc(100vh - 120px)); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: var(--ss-w-radius); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.24); }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { left: var(--ss-w-offset-x); }\n@media (max-width: 639px) {\n  /* Fill via inset with no explicit height (like the site's working panel) so the\n     input stays visible when the mobile keyboard/URL-bar shrinks the viewport. The\n     position-specific selectors override the right/left offsets set above. */\n  .ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel,\n  .ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { inset: 0; width: auto; height: auto; border: none; border-radius: 0; }\n}\n.ss-w-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-header-mark { width: 18px; height: 18px; display: block; object-fit: contain; }\n.ss-w-header-title { font-weight: 660; flex: 1; }\n.ss-w-close { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu-wrap { position: relative; display: grid; place-items: center; }\n.ss-w-kebab { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 184px; padding: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }\n.ss-w-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }\n.ss-w-menu-item:hover, .ss-w-menu-item:focus-visible { background: var(--ss-w-bubble); }\n.ss-w-menu-item svg { color: var(--ss-w-faint); font-size: 15px; flex: none; }\n\n/* messages */\n/* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --\n   same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM\n   landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */\n/* Children of this scrolling column flex container must NOT shrink. The default flex-shrink:1\n   compresses every child to fit the panel instead of letting the container scroll, and\n   .ss-w-grp's own overflow:hidden then clips the compressed content away entirely \u2014 27\n   competition groups rendered as blank bars on a phone. Applies to the pinned cards too. */\n.ss-w-mon-list > * { flex: none; }\n.ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }\n/* Transient bottom spacer: reserves a viewport of room below a new turn so its\n   top can be scrolled into view while the reply is still streaming in. Height is\n   set imperatively and flex must not shrink it away. */\n.ss-w-turn-spacer { flex: none; }\n.ss-w-msg { display: flex; }\n.ss-w-user { justify-content: flex-end; }\n.ss-w-user .ss-w-bubble { background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 14px; padding: 8px 12px; max-width: 80%; }\n.ss-w-bot { flex-direction: column; gap: 8px; }\n.ss-w-status { font-size: 11px; color: var(--ss-w-faint); font-style: italic; }\n.ss-w-error { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c0392b; }\n.ss-w-retry { background: none; border: 1px solid currentColor; border-radius: 10px; padding: 2px 8px; cursor: pointer; color: inherit; }\n\n/* markdown */\n.ss-w-md { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-md :where(p, ul, ol, table, pre, blockquote, h1, h2, h3, h4) { margin: 0; }\n.ss-w-md > *:first-child { margin-top: 0; }\n.ss-w-md > *:last-child { margin-bottom: 0; }\n.ss-w-md-ul { list-style: disc outside; padding-left: 18px; }\n.ss-w-md-ol { list-style: decimal outside; padding-left: 18px; }\n.ss-w-md-ul li::marker, .ss-w-md-ol li::marker { color: var(--ss-w-accent); }\n.ss-w-md-link { color: var(--ss-w-accent); text-decoration: underline; }\n.ss-w-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }\n.ss-w-md-table { border-collapse: collapse; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }\n.ss-w-md-table td, .ss-w-md-table th { border: 1px solid var(--ss-w-line); padding: 4px 8px; text-align: left; white-space: nowrap; }\n.ss-w-md-table th { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); font-weight: 700; }\n.ss-w-md-table tbody tr:nth-child(even) { background: var(--ss-w-bubble); }\n.ss-w-md-code { background: var(--ss-w-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }\n\n/* entity cards */\n.ss-w-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Entity card: identity header row over a horizontal stat strip */\n.ss-w-ecard { display: flex; flex-direction: column; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }\n\n.ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }\n.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); }\n.ss-w-thumb.ss-w-team { border-radius: 12px; }\n.ss-w-ecard[data-kind=\"player\"] .ss-w-thumb { background-color: var(--ss-w-accent); }\n.ss-w-nm { font-weight: 680; line-height: 1.15; overflow-wrap: anywhere; }\n.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* bare card (no stat scopes): simple avatar + name row */\n.ss-w-ecard-bare { display: flex; align-items: center; }\n.ss-w-ecard-bare .ss-w-ecard-hd { padding: 10px 12px; }\n\n.ss-w-ecard-hd { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }\n.ss-w-ecard-hd .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }\n.ss-w-ecard-hd .ss-w-thumb.ss-w-team { border-radius: 10px; }\n.ss-w-ecard-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start; margin-left: auto; }\n.ss-w-ecard-meta .ss-w-ecard-season { margin: 0; }\n\n/* scope tabs: reuse the underline pattern, relocated above the strip */\n.ss-w-ecard-scopes { display: flex; align-items: stretch; gap: 2px; padding: 0 11px; border-top: 1px solid var(--ss-w-line); flex-wrap: wrap; }\n.ss-w-ecard-scope { 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: 7px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }\n.ss-w-ecard-scope[aria-selected=\"true\"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-ecard-scope .ss-w-ecard-crest { width: 14px; height: 14px; }\n.ss-w-ecard-scopes + .ss-w-ecard-strip { border-top: none; }\n\n.ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }\n.ss-w-ecard-season { flex: none; 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; }\n\n/* stat strip: 1px gap over a line-colored ground paints hairlines between cells, wrap-safe */\n.ss-w-ecard-strip { display: grid; gap: 1px; background: var(--ss-w-line); border-top: 1px solid var(--ss-w-line); }\n.ss-w-ecard-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 11px; background: var(--ss-w-panel); }\n.ss-w-ecard-cval { height: 20px; display: flex; align-items: center; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n.ss-w-ecard-cval .ss-w-form { width: 42px; }\n.ss-w-ecard-clabel { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); font-weight: 600; font-variant-numeric: tabular-nums; }\n\n.ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }\n.ss-w-form span { display: block; border-radius: 2px; }\n.ss-w-form-w { background: var(--ss-w-pos); }\n.ss-w-form-d { background: var(--ss-w-faint); }\n.ss-w-form-l { background: var(--ss-w-neg); }\n\n.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; }\n.ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }\n.ss-w-cards-more:disabled { opacity: .5; cursor: default; }\n\n/* betting insights */\n.ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; }\n\n/* header, competition-hero fallback: comp on the left, live badge + kickoff + pin on the right,\n   all on one line (used when there is no fixture, and by MarketOddsCardList) */\n.ss-w-bi-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); }\n.ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n/* two-tier header: a quiet meta line (competition + kickoff + match pin) stacked above the\n   fixture, so long club names get the whole width to themselves and stop truncating (u350) */\n.ss-w-bi-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-bi-meta-left { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }\n.ss-w-bi-meta-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n.ss-w-bi-fixture-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }\n.ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }\n.ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }\n.ss-w-bi-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; align-self: flex-start; flex: none; }\n\n/* crests -- CSS background-image on a span, never <img> (matches .ss-w-ecard-crest precedent) */\n.ss-w-bi-comp-logo { width: 16px; height: 16px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n\n/* fixture atoms -- crest-flanked team pair; shared by the insight fixture line and MarketOddsCardList */\n.ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }\n.ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* shared crest-flanked team row (MarketOddsCardList); matches .ss-w-bi-fixture-line's hero weight\n   so the fixture reads the same on both card types (u350) */\n.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n\n/* row 2, two-tier: the market label owns a full-width line above the pick row (selection grows\n   left, odds + slip + pin sit right), so neither the market name nor the fixture clips (u350) */\n.ss-w-bi-action { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-bi-pick-row { display: flex; align-items: center; gap: 9px; }\n.ss-w-bi-sel { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-odds { flex: none; margin-left: auto; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }\n.ss-w-bi-odds b { font-size: 20px; font-family: ui-monospace, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.05; }\n.ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }\n.ss-w-bi-pick-row .ss-w-slip { flex: none; }\n\n/* row 3: bar-chart glyph + reasoning prose, in a subtle strip */\n.ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }\n.ss-w-bi-chart { flex: none; width: 13px; height: 12px; margin-top: 2px; opacity: .55;\n  background:\n    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) left / 3px 55% no-repeat,\n    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) center / 3px 100% no-repeat,\n    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) right / 3px 75% no-repeat;\n  background-position: left bottom, center bottom, right bottom;\n}\n.ss-w-bi-text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }\n.ss-w-bi-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n\n/* NBA insight cards (u555 B5). No bookmaker, pin, live block or odds history: prices and stats only. */\n.ss-w-nba-cards { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-nba-card{border:1px solid var(--ss-w-line);border-radius:16px;background:var(--ss-w-panel);padding:14px;display:flex;flex-direction:column;gap:12px}\n.ss-w-nba-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }\n.ss-w-nba-head-l { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }\n.ss-w-nba-meta { margin: 0; font-size: 11px; color: var(--ss-w-faint); line-height: 1.3; }\n.ss-w-nba-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-nba-chip{font-size:11px;font-weight:600;white-space:nowrap;border-radius:999px;padding:3px 8px;border:1px solid var(--ss-w-line)}\n.ss-w-nba-chip { flex: none; color: var(--ss-w-warn); border-color: var(--ss-w-warn); }\n.ss-w-nba-split,.ss-w-nba-ladder{display:grid;align-items:center;gap:6px;font-size:13px;font-variant-numeric:tabular-nums}\n.ss-w-nba-split{grid-template-columns:minmax(0,1fr) 56px 46px 40px auto}\n.ss-w-nba-ladder{grid-template-columns:52px minmax(0,1fr) 34px 34px 74px}\n.ss-w-nba-row { display: contents; }\n.ss-w-nba-hd{font-size:10.5px;font-weight:600;color:var(--ss-w-faint);white-space:nowrap}\n.ss-w-nba-split .ss-w-nba-n,.ss-w-nba-ladder .ss-w-nba-n{text-align:right}\n.ss-w-nba-n { font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-nba-who { min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-nba-at { font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-nba-meter { height: 6px; border-radius: 3px; background: var(--ss-w-bubble); overflow: hidden; }\n.ss-w-nba-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--ss-w-accent); }\n.ss-w-nba-pcell { display: flex; justify-content: flex-end; min-width: 0; }\n.ss-w-nba-price{font-size:11.5px;font-weight:600;border:1px solid var(--ss-w-line);border-radius:9px;padding:5px 8px;white-space:nowrap}\n.ss-w-nba-price { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-nba-price-lab { color: var(--ss-w-faint); font-weight: 600; }\n.ss-w-nba-pcell .ss-w-slip { flex: none; }\n.ss-w-nba-pcell .ss-w-slip-btn.ss-w-slip-btn--price { width: auto; flex-direction: row; align-items: baseline; gap: 5px; padding: 5px 8px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }\n.ss-w-nba-pcell .ss-w-slip-btn--price .ss-w-mol-lab, .ss-w-nba-pcell .ss-w-slip-btn--price .ss-w-mol-tick { font-size: 11.5px; }\n.ss-w-nba-games { display: flex; gap: 4px; }\n.ss-w-nba-game { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }\n.ss-w-nba-gv { font-size: 11.5px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-nba-track { position: relative; width: 100%; height: 56px; }\n.ss-w-nba-bar { position: absolute; bottom: 0; left: 22%; right: 22%; box-sizing: border-box; border: 1.5px solid var(--ss-w-accent); border-radius: 3px 3px 0 0; background: transparent; }\n.ss-w-nba-bar[data-hit] { background: var(--ss-w-accent); }\n.ss-w-nba-mark { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--ss-w-faint); }\n.ss-w-nba-gd { font-size: 10px; color: var(--ss-w-faint); white-space: nowrap; }\n.ss-w-nba-figs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }\n.ss-w-nba-fig { display: flex; flex-direction: column; gap: 1px; }\n.ss-w-nba-fig b { font-size: 16px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-nba-figl { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-nba-figs .ss-w-nba-pcell { margin-left: auto; }\n.ss-w-nba-mates { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); }\n.ss-w-nba-note { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ss-w-faint); }\n.ss-w-nba-stat { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-nba-stathd { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-nba-stathd b { font-size: 13px; color: var(--ss-w-ink); }\n.ss-w-nba-move{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;font-size:12px;line-height:1.4}\n.ss-w-nba-move { color: var(--ss-w-ink); }\n.ss-w-nba-dot { width: 8px; height: 8px; margin-top: 4px; box-sizing: border-box; border: 2px solid var(--ss-w-warn); border-radius: 50%; }\n.ss-w-nba-sq { width: 7px; height: 7px; margin-top: 5px; border-radius: 1.5px; background: var(--ss-w-ink); }\n.ss-w-nba-legs { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-nba-leg { display: grid; grid-template-columns: minmax(0,1fr) auto 34px auto; align-items: center; gap: 8px; font-size: 13px; }\n.ss-w-nba-legstat { color: var(--ss-w-faint); font-size: 12px; white-space: nowrap; }\n.ss-w-nba-leg .ss-w-nba-n { text-align: right; }\n.ss-w-nba-joint{display:grid;grid-template-columns:62px repeat(7,minmax(0,1fr));gap:4px;font-size:12px;font-variant-numeric:tabular-nums}\n.ss-w-nba-jl { min-width: 0; font-size: 11px; font-weight: 600; color: var(--ss-w-faint); overflow-wrap: anywhere; line-height: 1.25; }\n.ss-w-nba-jc { text-align: center; color: var(--ss-w-faint); }\n.ss-w-nba-jc[data-hit] { color: var(--ss-w-ink); font-weight: 700; }\n.ss-w-nba-joint .ss-w-nba-hd { font-size: 10px; }\n.ss-w-nba-tick { color: var(--ss-w-accent); font-weight: 700; }\n.ss-w-nba-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-nba-legkey { display: inline-flex; align-items: center; gap: 5px; }\n.ss-w-nba-swatch { width: 12px; height: 2px; border-radius: 1px; }\n.ss-w-nba-swatch--spread { background: var(--ss-w-accent); }\n.ss-w-nba-swatch--total { background: var(--ss-w-ink); }\n.ss-w-nba-svg { display: block; width: 100%; height: auto; overflow: visible; }\n.ss-w-nba-lane path { fill: none; stroke-width: 2; stroke-linejoin: round; }\n.ss-w-nba-lane--spread path { stroke: var(--ss-w-accent); }\n.ss-w-nba-lane--spread circle { fill: var(--ss-w-accent); }\n.ss-w-nba-lane--total path { stroke: var(--ss-w-ink); }\n.ss-w-nba-lane--total circle { fill: var(--ss-w-ink); }\n.ss-w-nba-axis { font-size: 9.5px; fill: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-nba-inj { stroke: var(--ss-w-warn); stroke-width: 1; stroke-dasharray: 3 3; }\n.ss-w-nba-evs { display: flex; flex-direction: column; }\n.ss-w-nba-ev{display:grid;grid-template-columns:44px 14px minmax(0,1fr);gap:8px;align-items:start;padding:6px 0;font-size:12.5px;line-height:1.35}\n.ss-w-nba-ev { color: var(--ss-w-ink); }\n.ss-w-nba-ev + .ss-w-nba-ev { border-top: 1px solid var(--ss-w-line); }\n.ss-w-nba-evt { font-size: 11.5px; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ss-w-nba-nowrow { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; font-size: 13px; }\n.ss-w-nba-foot{font-size:11px;color:var(--ss-w-faint);line-height:1.4;border-top:1px solid var(--ss-w-line);padding-top:10px}\n.ss-w-nba-card .ss-w-combo-addall { align-self: stretch; }\n\n/* market odds card */\n.ss-w-mocards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-mocard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n/* Embedded inside the market accordion, which already provides the card frame + accent rail --\n   drop the inner frame so odds rows aren't double-bordered. */\n.ss-w-mocard--bare { border: none; border-radius: 0; padding: 0; background: none; }\n.ss-w-mo-sub { display: flex; flex-direction: column; gap: 5px; min-width: 0; }\n.ss-w-mo-teams { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-tag { flex: none; font-size: 10.5px; font-weight: 700; line-height: 1.4; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }\n.ss-w-mo-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }\n.ss-w-mo-more:hover { text-decoration: underline; }\n.ss-w-mo-more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }\n.ss-w-mo-more-chev-up { transform: translateY(1px) rotate(-135deg); }\n.ss-w-mo-rows { display: flex; flex-direction: column; gap: 4px; }\n/* Stage 4: live card score+minute in header (R18). */\n.ss-w-bi-score { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); white-space: nowrap; }\n.ss-w-bi-min { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; }\n/* D12: closed state message row; D13: stale-price notice. */\n.ss-w-mo-closed { padding: 6px 0; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-mo-stale { margin: 0; font-size: 11px; color: var(--ss-w-faint); }\n/* The card's stat, in the Live tab accordion's insight style. No row below it is marked (R17). */\n.ss-w-mo-stat { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }\n.ss-w-mo-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--ss-w-line); }\n.ss-w-mo-row:last-child { border-bottom: none; }\n.ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); flex: 1; min-width: 0; }\n.ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }\n/* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a\n   shortening price as a discount, which inverts what it actually means for the bettor. */\n.ss-w-move { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }\n.ss-w-move-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }\n.ss-w-move-arrow { font-size: 9px; line-height: 1; }\n/* margin-left:auto is row layout, not badge styling -- it belongs to the market-odds row, which is\n   a flex row, and must NOT follow the badge into the insight card's odds column. */\n.ss-w-mo-row .ss-w-move { margin-left: auto; }\n.ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }\n.ss-w-mo-row .ss-w-slip { margin: 0; flex: none; }\n.ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-allmk-wrap { position: relative; display: inline-flex; flex: none; margin-left: auto; }\n.ss-w-allmk-wrap--chip { margin-left: 0; }\n.ss-w-allmk { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; background: none; border: 0; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); white-space: nowrap; cursor: pointer; }\n.ss-w-allmk svg { width: 13px; height: 13px; flex: none; }\n.ss-w-allmk:hover { text-decoration: underline; }\n.ss-w-allmk--chip { margin-left: 0; gap: 3px; height: 22px; padding: 0 6px; border: 1px solid var(--ss-w-line); border-radius: 11px; font-size: 11px; font-variant-numeric: tabular-nums; }\n.ss-w-allmk--chip:hover { text-decoration: none; border-color: var(--ss-w-accent); }\n\n/* combo card (onboarding presets, spec C5): legs in kickoff order, then the server's\n   multiplication line. Same card family as .ss-w-mocard / .ss-w-binsight. */\n.ss-w-combos { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-combo { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 4px 11px 10px; display: flex; flex-direction: column; gap: 8px; }\n.ss-w-combo-legs { list-style: none; display: flex; flex-direction: column; }\n.ss-w-combo-leg { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-bottom: 1px dashed var(--ss-w-line); }\n.ss-w-combo-leg:last-child { border-bottom: none; padding-bottom: 2px; }\n.ss-w-combo-leg-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-combo-leg-pick { display: flex; align-items: center; gap: 9px; min-width: 0; }\n.ss-w-combo-leg-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }\n.ss-w-combo-leg-market { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-combo-leg-sel { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-combo-leg-price { flex: none; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; line-height: 1.05; color: var(--ss-w-accent); }\n.ss-w-combo-leg-pick .ss-w-slip { flex: none; }\n.ss-w-combo-leg-stat { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 9px; }\n.ss-w-combo-math { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ss-w-ink); text-align: right; background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }\n.ss-w-combo-note { font-size: 11px; line-height: 1.4; color: var(--ss-w-faint); }\n.ss-w-combo-change { align-self: flex-start; min-height: 36px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 650; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; cursor: pointer; }\n.ss-w-combo-addall { flex-direction: column; align-items: stretch; gap: 6px; }\n.ss-w-combo-addall .ss-w-slip-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; font-weight: 650; border-radius: 22px; white-space: normal; }\n.ss-w-combo-addall .ss-w-toast { position: static; width: auto; max-width: none; font-size: 12px; box-shadow: none; }\n\n/* onboarding presets stage 2: the two tools (spec Stage 2 Behaviour, boards 1c and 2c). A sheet\n   over the message list, inside .ss-w-chat-layer; the body scrolls and the builder's Send sits in\n   the footer, so it stays visible on a phone. Colours come from the theme tokens. */\n.ss-w-tool-backdrop { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0,0,0,.35); }\n.ss-w-tool { display: flex; flex-direction: column; min-height: 0; max-height: 100%; background: var(--ss-w-panel); color: var(--ss-w-ink); border-top: 1px solid var(--ss-w-line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.18); outline: none; }\n.ss-w-tool-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }\n.ss-w-tool-title { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.3; }\n.ss-w-tool-close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 16px; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: none; border-radius: 50%; cursor: pointer; }\n.ss-w-tool-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; }\n.ss-w-tool-body > * { flex: none; }\n.ss-w-tool-foot { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-tool-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; }\n.ss-w-tool-ask { font-size: 14px; font-weight: 650; line-height: 1.7; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-tool-num { position: relative; display: inline-block; vertical-align: middle; margin: 0 2px; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ss-w-accent); }\n.ss-w-tool-num-size { display: block; font-size: max(16px, 1em); user-select: none; -webkit-user-select: none; visibility: hidden; box-sizing: border-box; min-width: 44px; min-height: 32px; padding: 6px 26px 6px 10px; line-height: 1.3; white-space: pre; }\n.ss-w-tool-num-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 22px 0 10px; font: inherit; font-size: max(16px, 1em); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ss-w-accent); background-color: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); border: 1.5px solid color-mix(in srgb, var(--ss-w-accent) 65%, var(--ss-w-line)); border-radius: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; }\n.ss-w-tool-num::after { content: \"\"; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; }\n.ss-w-tool-num-select:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-tool-num-select option { font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-panel); }\n.ss-w-tool-num-select option:disabled { color: var(--ss-w-faint); }\n.ss-w-tool-picks { list-style: none; display: flex; flex-direction: column; gap: 4px; }\n.ss-w-tool-pick { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 5px 8px; font-size: 12px; line-height: 1.35; background: var(--ss-w-bubble); border-radius: 8px; }\n.ss-w-tool-pick-match { grid-column: 1; font-weight: 650; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-tool-pick-sel { grid-column: 1; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-tool-pick-kick { grid-column: 1; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-tool-pick-price { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; color: var(--ss-w-accent); }\n.ss-w-tool-math { padding: 6px 8px; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; text-align: right; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; overflow-wrap: anywhere; }\n.ss-w-tool-unavailable { padding: 6px 8px; font-size: 12px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 8px; }\n.ss-w-tool-row--ask { flex-direction: row; align-items: center; gap: 10px; border-left-width: 1px; }\n.ss-w-tool-icon { flex: none; font-size: 20px; line-height: 1; }\n.ss-w-tool-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }\n.ss-w-tool-ready { padding: 2px 8px; font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 10px; }\n.ss-w-tool-go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 50%; cursor: pointer; }\n.ss-w-tool-go:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }\n.ss-w-tool-go:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-tool-send { align-self: flex-end; min-height: 40px; padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 20px; cursor: pointer; }\n.ss-w-tool-send:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }\n.ss-w-tool-foot .ss-w-tool-send { width: 100%; }\n.ss-w-tool-section { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-tool-label { font-size: 11.5px; font-weight: 650; color: var(--ss-w-faint); }\n.ss-w-tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-tool-chip { min-width: 52px; min-height: 36px; padding: 6px 10px; font: inherit; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ss-w-ink); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 18px; cursor: pointer; }\n.ss-w-tool-chip[aria-pressed=\"true\"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n.ss-w-tool-stepper { display: inline-flex; align-items: center; gap: 10px; }\n.ss-w-tool-step { width: 40px; height: 40px; display: grid; place-items: center; font: inherit; font-size: 18px; font-weight: 700; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 50%; cursor: pointer; }\n.ss-w-tool-step:disabled { opacity: .5; cursor: not-allowed; }\n.ss-w-tool-count { min-width: 24px; text-align: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }\n\n/* onboarding presets stage 2: the chat layer and the speed dial (spec Stage 2 Behaviour). The\n   layer is the message list's positioned box (P6), so the dial sits against the list's bottom\n   right and rises with the composer: right 8px puts the 44px button's centre on Send's (12px\n   padding + 18px), bottom 10px is above the composer's top border. While the button shows the list\n   gets 54px more bottom padding so its last message can scroll clear. */\n.ss-w-chat-layer { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n.ss-w-chat-layer[data-dial] .ss-w-list { padding-bottom: 68px; }\n.ss-w-dial { position: absolute; left: 12px; right: 8px; bottom: 10px; z-index: 2; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; pointer-events: none; }\n.ss-w-dial-btn, .ss-w-dial-pill { pointer-events: auto; }\n.ss-w-dial-btn { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; font-size: 20px; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; }\n.ss-w-dial-btn[aria-expanded=\"true\"] { color: var(--ss-w-panel); background: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n.ss-w-dial-btn:focus-visible, .ss-w-dial-pill:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-dial-icon { grid-area: 1 / 1; display: grid; place-items: center; transition: transform 200ms ease, opacity 200ms ease; }\n.ss-w-dial-icon--close { opacity: 0; transform: rotate(-90deg); }\n.ss-w-dial-btn[aria-expanded=\"true\"] .ss-w-dial-icon--open { opacity: 0; transform: rotate(90deg); }\n.ss-w-dial-btn[aria-expanded=\"true\"] .ss-w-dial-icon--close { opacity: 1; transform: none; }\n.ss-w-dial-dot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; background: var(--ss-w-accent); border: 2px solid var(--ss-w-panel); border-radius: 50%; }\n.ss-w-dial-pills { max-width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }\n.ss-w-dial-pill { max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.25; text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--ss-w-ink); background: var(--ss-w-panel); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 35%, var(--ss-w-line)); border-radius: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.16); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.5); transform-origin: bottom right; transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; }\n.ss-w-dial-pill svg { flex: none; font-size: 18px; color: var(--ss-w-accent); }\n.ss-w-dial-pill-label { min-width: 0; }\n.ss-w-dial-pills[data-open] .ss-w-dial-pill { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 200ms ease, visibility 0s; }\n@media (prefers-reduced-motion: reduce) {\n  .ss-w-dial-pill { transform: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }\n  .ss-w-dial-pills[data-open] .ss-w-dial-pill { transition: opacity 200ms ease, visibility 0s; }\n  .ss-w-dial-icon { transition: opacity 200ms ease; }\n  .ss-w-dial-icon--close, .ss-w-dial-btn[aria-expanded=\"true\"] .ss-w-dial-icon--open { transform: none; }\n}\n\n/* Compact price list (D16): three or more cards of one turn, one row per fixture. Team names wrap\n   to a second line and are never cut; the time sits above the match pin, with no column of its own. */\n.ss-w-mol { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-mol-head, .ss-w-mol-row { display: grid; grid-template-columns: minmax(0, 1fr) 126px 46px; align-items: center; gap: 4px; }\n.ss-w-mol-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow-wrap: anywhere; }\n.ss-w-mol-cols, .ss-w-mol-cells { display: grid; gap: 4px; }\n.ss-w-mol-col { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); text-align: center; overflow-wrap: break-word; min-width: 0; }\n.ss-w-mol-comp { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding-top: 4px; }\n.ss-w-mol-row { padding: 6px 0; border-bottom: 1px dashed var(--ss-w-line); min-height: 48px; box-sizing: border-box; }\n.ss-w-mol-row:focus { outline: none; }\n.ss-w-mol-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; border-radius: 6px; }\n.ss-w-mol-tick { font-family: inherit; font-size: 9.5px; font-weight: 700; line-height: 1.1; }\n.ss-w-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\n.ss-w-mol-group .ss-w-mol-row:last-child { border-bottom: none; }\n.ss-w-mol-fx { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: none; border: none; padding: 0; text-align: left; font: inherit; color: inherit; }\n.ss-w-mol-team { display: flex; align-items: center; gap: 5px; min-width: 0; }\n.ss-w-mol-team > * { flex: none; }\n.ss-w-mol-team > .ss-w-mol-nm { flex: 1 1 auto; }\n.ss-w-mol-nm { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); overflow-wrap: break-word; hyphens: manual; line-height: 1.2; min-width: 0; }\n.ss-w-mol-mkt { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-mol-cells { align-items: start; }\n.ss-w-mol-cell { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }\n.ss-w-mol-cell > .ss-w-mol-price { flex: none; }\n.ss-w-mol-cell .ss-w-move { justify-content: center; gap: 2px; }\n.ss-w-mol-cell .ss-w-move-prev { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 10px; }\n/* A 39 px cell fits four characters at 13 px: five step down to 11.5 px and six to 10.5 px. */\n.ss-w-mol-cell--wide .ss-w-mol-price, .ss-w-mol-cell--wide .ss-w-slip-btn.ss-w-slip-btn--price { font-size: 11.5px; }\n.ss-w-mol-cell--wider .ss-w-mol-price, .ss-w-mol-cell--wider .ss-w-slip-btn.ss-w-slip-btn--price { font-size: 10.5px; }\n.ss-w-mol-cell .ss-w-slip { margin: 0; flex: none; min-width: 0; }\n.ss-w-mol-price, .ss-w-slip-btn--price { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 0; border-radius: 8px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); font-family: inherit; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ss-w-accent); }\n.ss-w-slip-btn.ss-w-slip-btn--price { width: 100%; cursor: pointer; background: var(--ss-w-panel); color: var(--ss-w-accent); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 5px 0; font-size: 13px; font-weight: 700; box-shadow: none; }\n.ss-w-slip-btn--price:hover:not(:disabled) { border-color: var(--ss-w-accent); }\n.ss-w-slip-btn--price[data-settled] { color: var(--ss-w-faint); }\n.ss-w-mol-lab { font-family: inherit; font-size: 9.5px; font-weight: 600; color: var(--ss-w-faint); line-height: 1.1; text-align: center; overflow-wrap: anywhere; }\n.ss-w-mol-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n.ss-w-mol-when { font-size: 9.5px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.15; }\n.ss-w-mol-side--live .ss-w-mol-when { color: var(--ss-w-neg); }\n\n/* odds movement card */\n.ss-w-omcards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-omcard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-om-head { display: flex; align-items: center; gap: 8px; }\n.ss-w-om-market { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-om-tag { margin-left: auto; flex: none; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 2px 7px; }\n.ss-w-om-fixture { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-om-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-om-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }\n.ss-w-om-chart { display: block; width: 100%; height: auto; }\n/* Single neutral accent in BOTH directions, deliberately. Colouring a shortening price green\n   frames it as a discount, which inverts what it means for the bettor -- the same reason\n   .ss-w-move keeps both directions on --ss-w-faint. */\n.ss-w-om-line { stroke: var(--ss-w-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }\n.ss-w-om-dot { fill: var(--ss-w-accent); }\n.ss-w-om-grid { stroke: var(--ss-w-line); stroke-width: 1; }\n.ss-w-om-ylab, .ss-w-om-xlab { fill: var(--ss-w-faint); font-size: 9px; font-family: ui-monospace, monospace; }\n.ss-w-om-empty { font-size: 11.5px; color: var(--ss-w-faint); padding: 6px 0; }\n.ss-w-om-foot { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-om-foot b { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ss-w-ink); }\n.ss-w-om-excl { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-om-susp { font-size: 11px; font-weight: 600; color: #c0392b; }\n.ss-w-om-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n\n/* action buttons */\n.ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }\n/* text-align is explicit because a <button> defaults to center, and a follow-up question long\n   enough to wrap then sets its second line ragged on both sides. */\n.ss-w-abtn { font-size: 12px; font-weight: 560; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; padding: 6px 12px; cursor: pointer; text-align: left; }\n.ss-w-abtn:disabled { opacity: .5; cursor: default; }\n.ss-w-abtn-shimmer { width: 140px; height: 30px; border-radius: 16px; background: linear-gradient(90deg, var(--ss-w-bubble), var(--ss-w-line), var(--ss-w-bubble)); background-size: 200% 100%; animation: ss-w-shimmer 1.2s infinite; }\n@keyframes ss-w-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n\n/* intent chips */\n.ss-w-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-chip { font-size: 11.5px; font-weight: 550; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 5px 11px; cursor: pointer; }\n\n/* input */\n.ss-w-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-limit { padding: 10px 12px; border-top: 1px solid var(--ss-w-line); font-size: 13px; line-height: 1.4; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-limit:empty { padding: 0; border-top: 0; }\n.ss-w-limit:focus { outline: none; }\n.ss-w-limit:not(:empty) + .ss-w-input { border-top: none; }\n.ss-w-textarea { flex: 1; resize: none; border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 10px; font: inherit; color: inherit; background: var(--ss-w-panel); max-height: 96px; }\n.ss-w-textarea:disabled { opacity: .55; cursor: not-allowed; }\n/* iOS Safari zooms the page when a focused field's font-size is < 16px. Bump it\n   on touch devices only, so the desktop 13px design is unchanged. */\n@media (pointer: coarse) {\n  .ss-w-textarea { font-size: 16px; }\n}\n.ss-w-send { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: var(--ss-w-accent); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; }\n.ss-w-send:disabled { opacity: .45; cursor: not-allowed; }\n.ss-w-stop-glyph { width: 11px; height: 11px; background: currentColor; border-radius: 2px; }\n\n/* add to slip */\n.ss-w-slip { position: relative; display: flex; }\n.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }\n.ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }\n/* Anchored to the RIGHT of its (narrow) button wrapper and sized by content, growing leftward\n   into the card -- inheriting the wrapper's width squeezes the text to one character per line.\n   Every toast site (slip buttons, pin toggles) sits at the right edge of its row. */\n.ss-w-toast { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1; width: max-content; max-width: 210px; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-toast-success { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }\n.ss-w-toast-error { color: #c0392b; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }\n\n/* pin affordance */\n.ss-w-pin-wrap { position: relative; display: inline-flex; flex: none; }\n.ss-w-pin { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pin svg { width: 12px; height: 12px; }\n.ss-w-pin:hover { color: var(--ss-w-ink); border-color: var(--ss-w-faint); }\n.ss-w-pin[data-on] { background: var(--ss-w-accent); border-color: var(--ss-w-accent); color: #fff; }\n.ss-w-pin[data-on]:hover { background: var(--ss-w-accent); color: #fff; }\n.ss-w-hist { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-hist svg { width: 12px; height: 12px; }\n.ss-w-hist:hover { color: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n\n@media (prefers-reduced-motion: reduce) {\n  .ss-w-abtn-shimmer { animation: none; }\n}\n\n/* greeting dashboard */\n.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }\n.ss-w-dash-head { display: flex; flex-direction: column; }\n.ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }\n.ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }\n.ss-w-dash-foot { font-size: 11px; color: var(--ss-w-faint); margin-top: 2px; }\n\n.ss-w-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-dash-tile--half { grid-column: span 1; }\n.ss-w-dash-tile--full { grid-column: 1 / -1; }\n\n.ss-w-dash-tile {\n  display: flex; align-items: center; gap: 10px;\n  padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n  background: var(--ss-w-panel); text-align: left; cursor: pointer; width: 100%;\n  color: inherit; font: inherit;\n  min-width: 0;                      /* the panel is min(400px, 100vw - 40px): without this,\n                                        a long Turkish title blows the column out */\n}\n.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }\n.ss-w-dash-emoji { line-height: 1; }\n.ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }\n.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }\n.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }\n\n/* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A\n   nowrap badge (~70px) sitting beside icon+chevron in a ~180px half-span tile left the\n   title column at ~22px wide, wrapping every title character-by-character. Here the row\n   gets the body's full width, so a badge this size is comfortably inside it. */\n.ss-w-dash-tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }\n.ss-w-dash-tile-badge { flex: none; 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; }\n\n.ss-w-dash-tile-crests { flex: none; display: flex; align-items: center; }\n.ss-w-dash-tile-crest {\n  width: 18px; height: 18px; border-radius: 50%;\n  background-size: cover; background-position: center; background-color: var(--ss-w-bubble);\n  margin-left: -6px; border: 2px solid var(--ss-w-panel);    /* overlapping stack, capped at 3 in DashboardTile */\n}\n.ss-w-dash-tile-crest:first-child { margin-left: 0; }\n\n/* Market: default 2-column grid, tiles get the same accent rail as the other card\n   families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as\n   part of that visual language rather than a plain unstyled button. */\n.ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }\n\n/* Goal: one column of compact cards, 60px tall with the badge as a price column on the right.\n   The value ink is accent mixed toward ink (as on the hero price): plain light accent on the\n   panel is 3.9:1, under the 4.5:1 small text needs. */\n.ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }\n.ss-w-dash--goal .ss-w-dash-tile { gap: 12px; min-height: 60px; padding: 8px 12px 8px 14px; border-radius: 8px; }\n.ss-w-dash--goal .ss-w-dash-tile:hover { background: var(--ss-w-bubble); }\n.ss-w-dash--goal .ss-w-dash-tile-icon { width: 24px; height: 24px; font-size: 20px; }\n.ss-w-dash--goal .ss-w-dash-tile-body { gap: 1px; }\n.ss-w-dash--goal .ss-w-dash-tile-title { font-size: 15px; line-height: 1.25; }\n.ss-w-dash--goal .ss-w-dash-tile-subtitle { font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }\n.ss-w-dash-tile-value {\n  flex: none; margin-left: auto; max-width: 40%; text-align: right;\n  font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;\n  color: color-mix(in srgb, var(--ss-w-accent) 70%, var(--ss-w-ink));\n}\n\n/* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets\n   the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow\n   column was wrapping \"Most interesting angles\" onto three lines. The chevron is dropped (the\n   whole card is the tap target) and the badge + crest row is forced onto one line. */\n.ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }\n.ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }\n.ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }\n/* The full-span trends tile has the whole panel width, so its icon and title sit on one row\n   (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */\n.ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }\n.ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }\n.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }\n.ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }\n/* Tints mix a hue into the live panel rather than hardcoding a light pastel, so a dark\n   operator surface (e.g. --ss-w-panel set from a navy `surface` brand color) yields a\n   readable tinted-dark card instead of near-white ink on a fixed light pastel. */\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1) { background: color-mix(in srgb, #34c759 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }\n/* A hero tile would take the first tint position; count only regular tiles where `of S` parses. */\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #34c759 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }\n\n/* Hero: the personalized lead tile. Declared after the layout rules and at three-class\n   specificity so it keeps one look in every layout -- no market rail, no goal pill, no\n   discovery tint or stacking. Colours derive from accent/panel/ink so an operator surface\n   and dark mode both work without their own rules. */\n.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero {\n  display: flex; flex-direction: column; align-items: stretch; gap: 10px;\n  padding: 12px 14px 14px; border-radius: 16px;\n  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 38%, var(--ss-w-line));\n  background:\n    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ss-w-accent) 18%, transparent) 0%, transparent 60%),\n    var(--ss-w-panel);\n  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ss-w-accent) 80%, transparent);\n}\n.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:hover { border-color: var(--ss-w-accent); }\n.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-dash-hero-top { display: flex; align-items: center; gap: 8px; min-height: 20px; }\n.ss-w-dash-hero-badge {\n  font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;\n  color: var(--ss-w-panel); background: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); border-radius: 999px; padding: 3px 10px;\n  white-space: nowrap;\n}\n.ss-w-dash-hero-chevron { flex: none; width: 14px; height: 14px; color: var(--ss-w-faint); }\n.ss-w-dash-hero-badge { margin-right: auto; }\n.ss-w-dash-hero-chevron:only-child { margin-left: auto; }\n.ss-w-dash-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.ss-w-dash-hero-visual { flex: none; display: flex; align-items: center; }\n.ss-w-dash-hero-crest {\n  width: 40px; height: 40px; border-radius: 50%;\n  background-color: color-mix(in srgb, var(--ss-w-ink) 4%, var(--ss-w-panel));\n  background-size: 72%; background-position: center; background-repeat: no-repeat;\n  box-shadow: 0 0 0 2px var(--ss-w-panel), 0 0 0 3px color-mix(in srgb, var(--ss-w-ink) 10%, var(--ss-w-panel));\n}\n.ss-w-dash-hero-crest + .ss-w-dash-hero-crest { margin-left: -8px; }\n.ss-w-dash-hero-icon {\n  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 22px;\n  background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel));\n}\n.ss-w-dash-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-dash-hero-price {\n  flex: none; margin-left: auto;\n  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 750; line-height: 1;\n  color: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); padding: 5px 9px; border-radius: 8px;\n  background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel));\n  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-panel));\n}\n\n/* club fan pre-match dashboard */\n.ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }\n.ss-w-fandash-greeting { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); }\n.ss-w-fandash-greeting--lead { font-weight: 400; }\n.ss-w-fandash-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Shared card chrome -- a plain <div> for [data] cards, a <button> for [prefill] cards. Both\n   share the same box so the two families read as one system, not two ad hoc layouts. */\n.ss-w-fandash-card {\n  display: flex; flex-direction: column; gap: 8px;\n  padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n  background: var(--ss-w-panel); text-align: left;\n  color: inherit; font: inherit; width: 100%; min-width: 0;\n}\n.ss-w-fandash-card--tap { cursor: pointer; border-left: 3px solid var(--ss-w-accent); }\n.ss-w-fandash-card--tap:hover { background: var(--ss-w-bubble); }\n.ss-w-fandash-card-cta { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); }\n\n/* Shared alignment primitives: a small letterspaced section eyebrow, and a 3-column value/label\n   split reused by the fixture head-to-head (and any future stat-row card). */\n.ss-w-fandash-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }\n.ss-w-fandash-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-split-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }\n.ss-w-fandash-split-value { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); line-height: 1; }\n.ss-w-fandash-split-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* fixture card */\n.ss-w-fandash-fixture-teams { display: flex; align-items: center; gap: 10px; }\n.ss-w-fandash-fixture-team { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }\n.ss-w-fandash-fixture-team--away { justify-content: flex-end; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest { width: 30px; height: 30px; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest-mono { font-size: 12px; }\n.ss-w-fandash-fixture-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }\n.ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n/* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */\n.ss-w-fandash-fixture-meta { border-top: 1px solid var(--ss-w-line); padding-top: 10px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-fixture-kickoff { font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-fixture-venue { font-weight: 600; }\n.ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }\n/* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */\n.ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }\n/* extra breathing room between the tally row and the fact beyond the card's own gap */\n.ss-w-fandash-h2h .ss-w-fandash-fact { margin-top: 4px; }\n\n/* Team form: a two-column result-card grid, left = home team's last 5, right = away team's last 5,\n   most-recent first. The head row carries each column's crest + name; the rows grid is filled\n   home-cell/away-cell per index so the 2-col grid lays out pairs without extra JS bookkeeping. */\n.ss-w-fandash-teamform-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }\n.ss-w-fandash-teamform-head-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; font-weight: 750; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest-mono { font-size: 8px; }\n.ss-w-fandash-teamform-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-teamform-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; }\n.ss-w-fandash-teamform-slot { display: block; min-width: 0; }\n.ss-w-fandash-teamform-cell {\n  display: flex; align-items: center; gap: 4px; border-radius: 7px; padding: 4px 5px; color: #fff;\n}\n.ss-w-fandash-teamform-cell--win { background: var(--ss-w-pos); }\n.ss-w-fandash-teamform-cell--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-teamform-cell--draw { background: var(--ss-w-faint); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest { width: 16px; height: 16px; flex: none; background: rgba(255, 255, 255, .22); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest-mono { font-size: 7px; color: #fff; }\n.ss-w-fandash-teamform-score { flex: 1; text-align: center; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }\n.ss-w-fandash-injuries-more { margin-top: 10px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }\n.ss-w-fandash-form-pill {\n  display: inline-grid; place-items: center; width: 16px; height: 16px;\n  border-radius: 4px; font-size: 9.5px; font-weight: 700; color: #fff;\n}\n.ss-w-fandash-form-pill--win { background: var(--ss-w-pos); }\n.ss-w-fandash-form-pill--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-form-pill--draw { background: var(--ss-w-faint); }\n\n/* countdown card: a compact top card -- section eyebrow left, colon-separated clock right. Each\n   segment stacks its figure over a small unit label (d/h/m/s). The exact kickoff date is not\n   repeated here; the fixture card below carries it. */\n.ss-w-fandash-countdown-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-countdown-clock { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ss-w-accent); }\n.ss-w-fandash-countdown-seg { display: inline-flex; flex-direction: column; align-items: center; }\n.ss-w-fandash-countdown-value { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }\n.ss-w-fandash-countdown-unit { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); margin-top: 3px; }\n.ss-w-fandash-countdown-colon { font-size: 22px; font-weight: 750; line-height: 1; color: var(--ss-w-faint); }\n\n/* injuries + transfers: two-column ours/theirs, in/out */\n.ss-w-fandash-transfers-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n/* injuries: a 1px divider column sits between the two team sections, each headed by crest + name */\n.ss-w-fandash-injuries-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 12px; }\n.ss-w-fandash-injuries-divider { background: var(--ss-w-line); }\n.ss-w-fandash-injuries-col, .ss-w-fandash-transfers-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-transfers-col-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n.ss-w-fandash-injuries-col-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest-mono { font-size: 9px; }\n.ss-w-fandash-injuries-col-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-injuries-empty, .ss-w-fandash-transfers-empty { font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-list, .ss-w-fandash-transfer-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }\n.ss-w-fandash-injury-row, .ss-w-fandash-transfer-row { display: flex; flex-direction: column; gap: 1px; }\n.ss-w-fandash-injury-name, .ss-w-fandash-transfer-name { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }\n.ss-w-fandash-injury-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-status { font-weight: 700; color: var(--ss-w-neg); }\n.ss-w-fandash-transfer-club { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-transfer-type { align-self: flex-start; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 1px 7px; margin-top: 2px; }\n\n/* reason-to-bet */\n.ss-w-fandash-reason-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-reason-item { font-size: 12.5px; padding-left: 14px; position: relative; }\n.ss-w-fandash-reason-item::before { content: \"\u2022\"; position: absolute; left: 0; color: var(--ss-w-accent); font-weight: 700; }\n\n/* where-to-watch */\n.ss-w-fandash-stations { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-fandash-station-chip { font-size: 11.5px; font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 999px; padding: 4px 10px; }\n\n/* congested week: a fixed 3-column grid of upcoming fixtures (day / opponent / comp / time) */\n.ss-w-fandash-congested-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-congested-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border-radius: 10px; background: var(--ss-w-bubble); }\n.ss-w-fandash-congested-day { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n.ss-w-fandash-congested-opponent { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-congested-comp { font-size: 10px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-congested-time { font-size: 10.5px; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n\n/* links: 2-column grid of tappable tiles */\n.ss-w-fandash-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-link-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); }\n.ss-w-fandash-link-tile:hover { background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n.ss-w-fandash-link-label { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-link-chevron { flex: none; width: 12px; height: 12px; color: var(--ss-w-accent); }\n\n/* post-match result: full-time scoreboard, mirroring the live card's crest + big-score treatment.\n   A neutral \"Full time\" pill sits left of a coloured Win/Draw/Loss tag; the 3-column main row\n   (home crest+name | score | away crest+name, away reversed) puts the winner's score in full ink\n   and the loser's dimmed; a centered meta line sits under a divider. */\n.ss-w-fandash-postmatch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }\n.ss-w-fandash-postmatch-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-postmatch-tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-postmatch-tag--win { color: var(--ss-w-pos); }\n.ss-w-fandash-postmatch-tag--loss { color: var(--ss-w-neg); }\n.ss-w-fandash-postmatch-tag--draw { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-postmatch-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-postmatch-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-postmatch-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-postmatch-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }\n.ss-w-fandash-postmatch-score-value--win { color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-value--lose { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-postmatch-meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ss-w-line); font-size: 12px; color: var(--ss-w-faint); text-align: center; }\n\n/* post-match goals: a football-ball icon per goal (mirrors the live timeline ball, duplicated here\n   under the postmatch prefix), text dimmed for opponent goals and picked out in full ink + bold\n   for the club's own goals */\n.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-postmatch-goal { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-goal-ball { width: 11px; height: 11px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-postmatch-goal--club { color: var(--ss-w-ink); font-weight: 650; }\n\n/* post-match stats: home value / stat label / away value, oriented by venue (u316), each row now\n   backed by a home/away split bar -- the big upgrade from plain text -- plus a legend. Mirrors\n   LiveStatsCard's split-bar treatment under the postmatch-prefixed classes; the shared\n   --ss-w-home/--ss-w-away/--ss-w-track tokens are defined above. */\n.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-postmatch-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-postmatch-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-postmatch-stat-label { font-size: 10.5px; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-fandash-postmatch-stat-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-postmatch-stat-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-fandash-postmatch-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-postmatch-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-postmatch-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-legend-swatch--away { background: var(--ss-w-away); }\n\n/* post-match top performer (full mockup treatment): gradient initials avatar + name + a\n   prominent rating chip. Avatar gradient reuses the --ss-w-away token, same pairing as the live\n   crest fallback; \"?\" renders through the same avatar span when the name is blank. */\n.ss-w-fandash-postmatch-perf-row { display: flex; align-items: center; gap: 12px; }\n.ss-w-fandash-postmatch-perf-avatar {\n  flex: none; width: 42px; height: 42px; border-radius: 50%;\n  display: grid; place-items: center;\n  font-size: 14px; font-weight: 800; color: #fff;\n  background: linear-gradient(135deg, var(--ss-w-away), color-mix(in srgb, var(--ss-w-away) 55%, #000));\n}\n.ss-w-fandash-postmatch-perf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }\n.ss-w-fandash-postmatch-perf-rating { margin-left: auto; flex: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 11px; }\n\n/* post-match next (v1, modest): whenLabel is already a complete localized phrase (opponent +\n   venue + kickoff) composed server-side, so this card renders just that one line -- dressed up\n   with an accent rule rather than a duplicated opponent line. The richer opponent-headline/venue-\n   chip/crest layout from the mockup needs a server field split and is deferred. */\n.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--ss-w-accent); padding-left: 10px; }\n.ss-w-fandash-postmatch-next-when { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.3; }\n\n/* resting next: the between-matches fixture teaser -- when-label left, competition badge right */\n.ss-w-fandash-resting-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-next-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-resting-next-competition { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n\n/* resting standings: position figure left, W-D-L/points record right */\n.ss-w-fandash-resting-standings-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-standings-position { font-size: 15px; font-weight: 750; color: var(--ss-w-ink); }\n.ss-w-fandash-resting-standings-record { font-size: 11.5px; color: var(--ss-w-faint); text-align: right; }\n\n/* resting season: top scorer / key player / season tally as stacked rows */\n.ss-w-fandash-resting-season-rows { display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-resting-season-row { font-size: 12.5px; color: var(--ss-w-ink); }\n\n/* resting form: reuses the fixture last-five pill classes (ss-w-fandash-form / -form-pill) */\n.ss-w-fandash-resting-form .ss-w-fandash-form { margin-top: 2px; }\n\n/* live score: pulsing Live pill, crests (real image or a coloured initials fallback), a big\n   tabular score, and an optional scorers line. Also where the shared home/away venue-colour\n   tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats\n   cards reuse them. */\n.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ss-w-fandash-live-pulse 1.3s ease-in-out infinite; }\n@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }\n@media (prefers-reduced-motion: reduce) {\n  .ss-w-fandash-live-dot { animation: none; }\n}\n.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-competition { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-live-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-live-scorers-row { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-live-scorers { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-live-scorers--home { justify-content: flex-start; }\n.ss-w-fandash-live-scorers--away { justify-content: flex-end; }\n.ss-w-fandash-live-scorers--home .ss-w-fandash-live-scorers-icon { color: var(--ss-w-home); }\n.ss-w-fandash-live-scorers--away .ss-w-fandash-live-scorers-icon { color: var(--ss-w-away); }\n.ss-w-fandash-live-scorers-icon { flex: none; }\n\n/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on\n   its own side (home left, away right), most-recent 3 shown with a \"See more\" toggle for the\n   rest. A 3-column grid (txt | badge | txt) per row; the spine itself is a ::before on the list. */\n.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-live-tl::before { content: \"\"; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; background: var(--ss-w-line); transform: translateX(-1px); }\n.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }\n.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }\n.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }\n.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }\n.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }\n.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 29px; height: 19px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }\n.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }\n.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }\n.ss-w-fandash-live-tl-ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }\n.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }\n.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }\n.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }\n.ss-w-fandash-live-tl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-more { margin-top: 4px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-live-tl-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n\n/* live stats: club value / stat label / opponent value, each row backed by a home/away split\n   bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.\n   No side signal reaches this card, so the club is always the home token and the opponent is\n   always the away token -- see LiveStatsCard.tsx. */\n.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-live-stat-label { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n\n.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }\n.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }\n.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }\n.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }\n.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }\n.ss-w-fandash-live-mom-base { stroke: var(--ss-w-line); stroke-width: 1; stroke-dasharray: 3 3; }\n.ss-w-fandash-live-mom-plot { position: relative; }\n.ss-w-fandash-live-mom-now {\n  position: absolute; width: 7px; height: 7px; border-radius: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-ink);\n  pointer-events: none;\n}\n.ss-w-mon-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); text-align: center; }\n.ss-w-mon-mom .ss-w-fandash-live-mom { margin-top: 6px; padding-top: 0; border-top: none; }\n\n.ss-w-fandash-live-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-live-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-live-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-live-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-legend-swatch--away { background: var(--ss-w-away); }\n\n/* live monitor tab bar: underline pattern mirrors .ss-w-ecard-scope; the unread dot uses --ss-w-neg */\n.ss-w-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ss-w-line); overflow-x: auto; scrollbar-width: none; }\n.ss-w-tabs::-webkit-scrollbar { display: none; }\n.ss-w-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 9px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; flex: none; white-space: nowrap; }\n.ss-w-tab[data-on] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-tab-count { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 999px; padding: 1px 6px; }\n.ss-w-tab[data-on] .ss-w-tab-count { color: var(--ss-w-accent); }\n.ss-w-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n\n/* Matches tab match card (MonitorMatchCard): pill row, crest/score main row, per-stat split\n   bars (venue-oriented -- home always left/blue, away always right/red, never club-oriented,\n   the u316 bug class), a promoted-market strip for the user's pinned stat chips, and a grace\n   note once the match has gone full time. Reuses the --ss-w-home/--ss-w-away/--ss-w-track venue\n   tokens and .ss-w-fandash-live-pill for the Live pill so all live surfaces share one look. */\n.ss-w-mon { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ss-w-line); border-radius: 12px; background: var(--ss-w-panel); }\n.ss-w-mon-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-mon-pill { display: inline-flex; flex: none; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 3px 8px; }\n.ss-w-mon-min { flex: none; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-comp { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-mon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-w-mon-side--away { flex-direction: row-reverse; text-align: right; }\n/* long club names (Wolverhampton Wanderers) wrap to two lines instead of truncating mid-word */\n.ss-w-mon-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-mon-vs { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; }\n.ss-w-mon-score { display: flex; align-items: baseline; justify-content: center; font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-mon-score i { font-style: normal; color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }\n.ss-w-nbamon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-nbamon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-w-nbamon-side--home { flex-direction: row-reverse; text-align: right; }\n.ss-w-nbamon-badge { flex: none; display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 5px; border-radius: 7px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--ss-w-ink); }\n.ss-w-nbamon-team { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }\n.ss-w-nbamon-city { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-nbamon-nick { font-size: 13px; font-weight: 800; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-nbamon-ls { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center; color: var(--ss-w-ink); }\n.ss-w-nbamon-ls th, .ss-w-nbamon-ls td { padding: 3px 4px; font-weight: 500; }\n.ss-w-nbamon-ls thead th { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-nbamon-ls tbody th { text-align: left; font-weight: 800; }\n.ss-w-nbamon-ls .ss-w-nbamon-total { font-weight: 800; }\n.ss-w-nbamon-ls td.ss-w-nbamon-cur { color: var(--ss-w-neg); font-weight: 800; }\n.ss-w-nbamon-dash { color: var(--ss-w-faint); }\n.ss-w-nbamon-tos { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ss-w-faint); }\n/* Scoreboard strip: one 122px tile per followed game, scrolling sideways inside its own box so the\n   panel never gains a horizontal scroll. */\n.ss-w-strip { position: relative; flex: none; display: flex; gap: 8px; padding: 8px 12px; background: var(--ss-w-bubble); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }\n.ss-w-strip::-webkit-scrollbar { display: none; }\n.ss-w-strip-tile { flex: none; box-sizing: border-box; width: 122px; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 7px; border: 1px solid var(--ss-w-line); border-radius: 10px; background: var(--ss-w-panel); font: inherit; color: var(--ss-w-ink); text-align: left; cursor: pointer; }\n.ss-w-strip-tile[aria-pressed=\"true\"] { border-color: var(--ss-w-accent); box-shadow: inset 0 0 0 1px var(--ss-w-accent); }\n.ss-w-strip-tile:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-strip-status { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }\n.ss-w-strip-status--live { color: var(--ss-w-neg); }\n.ss-w-strip-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-strip-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); }\n.ss-w-strip-sport { flex: none; margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--ss-w-warn); }\n.ss-w-strip-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-strip-row .ss-w-bi-crest { width: 16px; height: 16px; }\n.ss-w-strip-row .ss-w-bi-crest-mono { font-size: 8px; }\n.ss-w-strip-badge { display: grid; place-items: center; min-width: 22px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 8.5px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-ink); }\n.ss-w-strip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }\n.ss-w-strip-score { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }\n.ss-w-strip-row--muted .ss-w-strip-name, .ss-w-strip-row--muted .ss-w-strip-score { color: var(--ss-w-faint); }\n.ss-w-mon-scorers { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 10px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mon-scorers-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.ss-w-mon-scorers-col li { overflow-wrap: anywhere; }\n.ss-w-mon-scorers-home { text-align: right; }\n.ss-w-mon-scorers-away { text-align: left; }\n.ss-w-mon-scorers-ball { flex: none; align-self: start; line-height: 1.35; }\n\n/* Pinned pre-match form + head-to-head (MonitorFormH2H): collapsed by default, a real <button>\n   header toggles it. W/D/L dots and the H2H bar/legend keep fixed, theme-independent colors\n   (same convention as the dashboard tile accents above) since they're self-contained badges\n   carrying their own ink color, not page-background-dependent text. */\n.ss-w-h2h { border-left: 3px solid #16A34A; padding-left: 12px; }\n.ss-w-h2h-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 0; }\n.ss-w-h2h-head-l { display: flex; align-items: center; gap: 6px; }\n.ss-w-h2h-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--ss-w-faint); flex: none; }\n.ss-w-h2h-title { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-h2h-chevron { flex: none; color: var(--ss-w-faint); transition: transform .15s ease; }\n.ss-w-h2h-chevron--open { transform: rotate(180deg); }\n.ss-w-h2h-body { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }\n.ss-w-h2h-forms { display: flex; align-items: flex-start; justify-content: space-between; }\n.ss-w-h2h-form-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }\n.ss-w-h2h-form-col--away { align-items: flex-end; }\n.ss-w-h2h-form-team { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-h2h-dots { display: flex; gap: 4px; }\n.ss-w-h2h-result { width: 20px; height: 20px; border-radius: 999px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }\n.ss-w-h2h-result--win { background: #16A34A; color: #FFFFFF; }\n.ss-w-h2h-result--draw { background: #E5E7EB; color: #4B5563; }\n.ss-w-h2h-result--loss { background: #F5A623; color: #1F2937; }\n.ss-w-h2h-record { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-h2h-meta { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-h2h-bar { display: flex; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }\n.ss-w-h2h-bar-seg--win { background: #16A34A; }\n.ss-w-h2h-bar-seg--draw { background: #D1D5DB; }\n.ss-w-h2h-bar-seg--loss { background: #2563EB; }\n.ss-w-h2h-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }\n.ss-w-h2h-legend-item { font-size: 11px; color: var(--ss-w-ink); display: flex; align-items: center; gap: 5px; }\n.ss-w-h2h-legend-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }\n.ss-w-h2h-legend-dot--win { background: #16A34A; }\n.ss-w-h2h-legend-dot--draw { background: #D1D5DB; }\n.ss-w-h2h-legend-dot--loss { background: #2563EB; }\n\n.ss-w-fact { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, transparent); }\n.ss-w-fact-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-w-fact-min { color: var(--ss-w-ink); letter-spacing: 0; }\n.ss-w-fact-subj { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--ss-w-faint); }\n.ss-w-fact-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ss-w-ink); }\n.ss-w-fact-basis { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-fact-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }\n.ss-w-fact-foot { display: flex; align-items: center; gap: 14px; }\n.ss-w-fact-link { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); background: none; border: none; padding: 4px 0; min-height: 32px; cursor: pointer; }\n.ss-w-fact-link--muted { color: var(--ss-w-faint); margin-left: auto; }\n.ss-w-fact-hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ss-w-line); }\n.ss-w-fact-hist li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-fact-hist li:last-child { border-bottom: none; }\n.ss-w-fact-hmin { font-size: 11px; font-weight: 800; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-fact-htext { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ss-w-ink); }\n.ss-w-mon-stats { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-mon-stat { display: flex; flex-direction: column; gap: 5px; }\n.ss-w-mon-pstrip { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ss-w-accent) 8%, transparent); }\n.ss-w-mon-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-mon-stat-v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-stat-v--home { color: var(--ss-w-home); }\n.ss-w-mon-stat-v--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-mon-stat-l { font-size: 10px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-mon-bar { position: relative; height: 6px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-mon-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-mon-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-mon-stat-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mon-mkt { background: color-mix(in srgb, var(--ss-w-accent) 10%, transparent); border-radius: 6px; padding: 3px 6px; color: var(--ss-w-ink); }\n.ss-w-mon-stat-mkt-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.ss-w-mon-price { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ss-w-accent); }\n.ss-w-mon-susp { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 2px 6px; }\n.ss-w-mon-asof { display: block; font-size: 10.5px; font-weight: 600; color: var(--ss-w-cta); }\n.ss-w-mon-grace { font-size: 11px; color: var(--ss-w-faint); border-top: 1px solid var(--ss-w-line); padding-top: 8px; }\n\n/* Matches/Odds tab panels (MonitorTabs): the shared per-market-pin context line, the empty\n   state shown when the snapshot carries no matches/markets yet, the persistent D5 in-slip badge,\n   and the per-market-pin wrapper card (struck price on settlement is a pure CSS hook off its\n   [data-settled] attribute -- no separate class on the price element itself). */\n.ss-w-mk-ctx { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ss-w-line); }\n/* the score and the trailing badges/pin never shrink or wrap -- only the fixture name truncates */\n.ss-w-mk-ctx b { flex: none; white-space: nowrap; }\n/* the context line's fixture name stays single-line (the two-line clamp is for the match card) */\n.ss-w-mk-ctx .ss-w-mon-name { display: block; white-space: nowrap; text-overflow: ellipsis; }\n.ss-w-mk-ctx-side { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-mk-ctx-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }\n/* flex:1 keeps the composer pinned to the panel bottom when a tab is empty */\n.ss-w-mon-empty { flex: 1; padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n/* shared group-header label for Club Fixtures (round) and Squad (position) list groups */\n.ss-w-club-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding: 10px 2px 4px; }\n.ss-w-sq-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-sq-num { flex: none; width: 20px; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }\n.ss-w-sq-name { font-size: 13px; font-weight: 600; color: var(--ss-w-ink); }\n.ss-w-sq-name { flex: 1; min-width: 0; }\n.ss-w-sq-name-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-sq-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--ss-w-radius); background: var(--ss-w-track); }\n.ss-w-sq-seg-btn { flex: 1; padding: 5px 8px; border: 0; border-radius: calc(var(--ss-w-radius) - 2px); background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-sq-seg-btn[aria-pressed=\"true\"] { background: var(--ss-w-panel); color: var(--ss-w-ink); }\n.ss-w-sq-seg-btn:focus-visible, .ss-w-sq-tap:focus-visible, .ss-w-pd-back:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 1px; }\n.ss-w-sq-tap { width: 100%; border: 0; border-bottom: 1px solid var(--ss-w-line); background: transparent; font: inherit; text-align: left; cursor: pointer; }\n.ss-w-sq-col { flex: none; width: 40px; text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-sq-head { border-bottom: 0; padding-bottom: 0; }\n.ss-w-sq-head .ss-w-sq-col { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); }\n.ss-w-sq-stats { padding-top: 10px; gap: 10px; }\n.ss-w-sq-card { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; }\n.ss-w-sq-stats .ss-w-sq-row { display: grid; grid-template-columns: 1fr 26px 30px 36px 20px 20px 20px 20px 36px; gap: 0; padding: 7px 10px; font-size: 11px; }\n.ss-w-sq-card > :last-child { border-bottom: 0; }\n.ss-w-sq-pos, .ss-w-sq-c20, .ss-w-sq-c30, .ss-w-sq-c36 { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-sq-stats .ss-w-sq-head { padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-faint); }\n.ss-w-sq-stats .ss-w-sq-head > span { font-size: 9px; font-weight: 700; color: var(--ss-w-faint); }\n.ss-w-sq-player { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-sq-badge { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--ss-w-track); color: var(--ss-w-faint); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }\n.ss-w-sq-stats .ss-w-sq-name { font-size: 11px; }\n.ss-w-sq-rtg { font-weight: 700; }\n.ss-w-sq-rtg-none { color: var(--ss-w-faint); font-weight: 400; }\n.ss-w-sq-stats .ss-w-pos-ink { color: var(--ss-w-pos); font-weight: 700; }\n.ss-w-sq-foot { padding: 0 2px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-sq-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 14px 0; }\n.ss-w-sq-bar .ss-w-sq-seg { margin: 0; }\n.ss-w-sq-bar .ss-w-sq-seg:only-child { flex: 1; }\n.ss-w-sq-bar .ss-w-sq-seg:not(:only-child) { flex: none; }\n.ss-w-sq-eyebrow { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); }\n@media (max-width: 429px) { .ss-w-sq-badge { display: none; } }\n@media (max-width: 359px) {\n  .ss-w-sq-yr { display: none; }\n  .ss-w-sq-stats .ss-w-sq-row { grid-template-columns: 1fr 26px 30px 36px 20px 20px 36px; }\n}\n.ss-w-pd-bar { flex: none; display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ss-w-line); line-height: normal; }\n.ss-w-pd-back { display: flex; align-items: center; gap: 2px; min-height: 32px; padding: 8px 8px 8px 0; margin: -8px 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pd-back:hover { color: var(--ss-w-ink); }\n.ss-w-mon-list.ss-w-pd-list { padding: 16px; gap: 14px; line-height: normal; }\n.ss-w-pd-card { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; }\n.ss-w-pd-faint { color: var(--ss-w-faint); }\n.ss-w-pd-profile { display: flex; gap: 12px; padding: 14px; }\n.ss-w-pd-photo { flex: none; border-radius: 50%; border: 1px solid var(--ss-w-line); background: var(--ss-w-bubble); object-fit: cover; }\n.ss-w-pd-avatar { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-pd-profile-main { flex: 1; min-width: 0; }\n.ss-w-pd-name { font-size: 16px; font-weight: 800; color: var(--ss-w-ink); overflow-wrap: break-word; }\n.ss-w-pd-sub { margin-top: 1px; font-size: 12px; color: var(--ss-w-faint); }\n/* Two columns as on the board, collapsing to one when a column would drop under 80px (narrow phones). */\n.ss-w-pd-bio { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(80px, calc((100% - 10px) / 2)), 1fr)); gap: 4px 10px; margin-top: 10px; font-size: 11.5px; }\n.ss-w-pd-bio-item { min-width: 0; overflow-wrap: break-word; }\n.ss-w-pd-pitch { position: relative; flex: none; width: 56px; height: 76px; border: 1px solid var(--ss-w-line); border-radius: 6px; background: var(--ss-w-track); }\n.ss-w-pd-pitch-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--ss-w-accent); border: 2px solid var(--ss-w-nav); transform: translate(-50%, -50%); }\n.ss-w-pd-avail { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }\n.ss-w-pd-avail-text { min-width: 0; }\n.ss-w-pd-avail-next { font-size: 12.5px; font-weight: 700; }\n.ss-w-pd-avail-note { margin-top: 1px; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-pd-pill { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }\n.ss-w-pd-pill--pos, .ss-w-pd-chip--pos { background: color-mix(in srgb, var(--ss-w-pos) 14%, transparent); color: var(--ss-w-pos); }\n.ss-w-pd-pill--warn, .ss-w-pd-chip--warn { background: color-mix(in srgb, var(--ss-w-warn) 14%, transparent); color: var(--ss-w-warn); }\n.ss-w-pd-pill--neg, .ss-w-pd-chip--neg { background: color-mix(in srgb, var(--ss-w-neg) 14%, transparent); color: var(--ss-w-neg); }\n.ss-w-pd-pill--draw { background: var(--ss-w-track); color: var(--ss-w-faint); }\n.ss-w-pd-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding: 0 2px; }\n.ss-w-pd-eyebrow--block { margin-bottom: 8px; }\n.ss-w-pd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }\n.ss-w-pd-tile { min-width: 0; padding: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; }\n.ss-w-pd-tile-label { font-size: 10.5px; color: var(--ss-w-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-pd-tile-value { margin-top: 2px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }\n.ss-w-pd-pos-ink { color: var(--ss-w-pos); }\n/* Below 360px the board's 10px tile padding clips \"Matches\"/\"Minutes\" (43px) in a ~34px label box. */\n@media (max-width: 359px) {\n  .ss-w-pd-tiles { gap: 6px; }\n  .ss-w-pd-tile { padding: 10px 6px; }\n}\n.ss-w-pd-perf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }\n.ss-w-pd-perf-head .ss-w-pd-eyebrow { flex: 1; min-width: 0; }\n.ss-w-pd-seg { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ss-w-track); }\n.ss-w-pd-seg-btn { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 11.5px; font-weight: 700; line-height: normal; white-space: nowrap; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pd-seg-btn[aria-pressed=\"true\"] { background: var(--ss-w-nav); color: #fff; }\n.ss-w-pd-seg-btn:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 1px; }\n.ss-w-pd-perf-sub { margin-bottom: 10px; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-pd-perf-head + .ss-w-pd-perf-cards { margin-top: 10px; }\n.ss-w-pd-perf-cards { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-pd-perf-card { padding: 14px; }\n.ss-w-pd-perf-group { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; }\n.ss-w-pd-bar-row + .ss-w-pd-bar-row { margin-top: 12px; }\n.ss-w-pd-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 12.5px; }\n.ss-w-pd-bar-label { min-width: 0; overflow-wrap: break-word; }\n.ss-w-pd-bar-value { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-w-pd-track { height: 6px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; }\n.ss-w-pd-fill { height: 100%; border-radius: 999px; }\n.ss-w-pd-fill--pos { background: var(--ss-w-pos); }\n.ss-w-pd-fill--warn { background: var(--ss-w-warn); }\n.ss-w-pd-fill--neg { background: var(--ss-w-neg); }\n.ss-w-pd-match { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-pd-match:last-child { border-bottom: none; }\n.ss-w-pd-match-date { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-pd-match-opp { font-size: 12.5px; font-weight: 600; overflow-wrap: break-word; }\n.ss-w-pd-match-sub { margin-top: 1px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-pd-chip-empty { min-width: 30px; }\n.ss-w-pd-chip { min-width: 30px; padding: 3px 0; border-radius: 6px; text-align: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }\n.ss-w-rec-list { margin: 0; padding: 0; list-style: none; }\n.ss-w-rec-value { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-rec-since { font-size: 12px; color: var(--ss-w-faint); }\n/* Per-pin unavailable state: the pin's context line still rendered above (score, name, unpin), but\n   the pin has neither a card nor history (compose-time rescue failed) -- a small inline note beats\n   a bare context line with nothing under it. */\n.ss-w-mon-empty-card { padding: 8px 0 2px; font-size: 12px; color: var(--ss-w-faint); }\n.ss-w-mon-inslip { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-pos); }\n/* Odds-tab item is bare: the visible card is the market-odds card itself (no outer wrapper card),\n   with an optional slim live strip above it. */\n.ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-mk-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mk-live-score { color: var(--ss-w-ink); font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-w-mon-oddspin[data-settled] .ss-w-mo-price,\n.ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }\n\n/* market accordion (Task 9): one collapsed row per available market, expanding into a reused\n   MarketOddsCardList ladder (hideHeader -- the row header already carries the market label). */\n/* Pinned-match tile: the match card + its odds accordion, spaced apart. */\n.ss-w-mon-item { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-acc { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }\n/* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */\n.ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }\n.ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }\n/* Suspended: the row stays listed (knowing a market is off is useful) but is not tappable --\n   its card is unservable, so a pointer cursor would promise something that cannot load. */\n.ss-w-acc-toggle--susp { cursor: default; color: var(--ss-w-faint); }\n.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }\n.ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }\n.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); flex: none; }\n.ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }\n.ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }\n.ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }\n\n/* ---- NBA player props on the Following card (u560) ---- */\n.ss-w-props { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 11px 4px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }\n.ss-w-props-head { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-props-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 8px; background: var(--ss-w-track); }\n.ss-w-props-side { padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); cursor: pointer; font-variant-numeric: tabular-nums; }\n.ss-w-props-side[aria-pressed=\"true\"] { background: var(--ss-w-panel); color: var(--ss-w-ink); }\n.ss-w-props-list { display: flex; flex-direction: column; min-width: 0; }\n.ss-w-props-item { min-width: 0; }\n.ss-w-props-item + .ss-w-props-item { border-top: 1px solid var(--ss-w-line); }\n.ss-w-props-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 0; background: none; border: 0; font: inherit; color: var(--ss-w-ink); text-align: left; cursor: pointer; }\n.ss-w-props-jn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }\n.ss-w-props-jn--home { background: var(--ss-w-home); }\n.ss-w-props-jn--away { background: var(--ss-w-away); }\n.ss-w-props-pn { min-width: 0; display: flex; flex-direction: column; gap: 1px; }\n.ss-w-props-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-props-meta { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-props-main { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; column-gap: 5px; text-align: right; max-width: 96px; font-variant-numeric: tabular-nums; }\n.ss-w-props-stat { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-props-line { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-props-panel { background: var(--ss-w-bubble); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; min-width: 0; }\n.ss-w-props-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-props-chip { padding: 5px 11px; border: 1px solid var(--ss-w-line); border-radius: 999px; background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; cursor: pointer; }\n.ss-w-props-chip[aria-pressed=\"true\"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n.ss-w-props-side:focus-visible, .ss-w-props-row:focus-visible, .ss-w-props-chip:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 1px; }\n.ss-w-props-ou { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px; }\n.ss-w-props-price { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; padding: 6px 9px; border: 1px solid var(--ss-w-line); border-radius: 8px; background: var(--ss-w-panel); font-size: 13px; font-weight: 700; color: var(--ss-w-ink); cursor: default; font-variant-numeric: tabular-nums; }\n.ss-w-props-price-lab { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-props-alt, .ss-w-props-l5 { display: flex; flex-direction: column; gap: 5px; min-width: 0; }\n.ss-w-props-cap { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-props-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); grid-auto-flow: row dense; gap: 6px; min-width: 0; }\n.ss-w-props-ladder .ss-w-props-price { flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; font-size: 12px; }\n/* The grids hold no scroll container, so a slip toast is never clipped: the wrapper drops out of\n   layout and the toast takes a full row of its own under the tapped price (dense refills the gap). */\n.ss-w-props-ou .ss-w-slip, .ss-w-props-ladder .ss-w-slip { display: contents; }\n.ss-w-props-ou .ss-w-toast, .ss-w-props-ladder .ss-w-toast { position: static; grid-column: 1 / -1; width: auto; max-width: none; box-shadow: none; }\n.ss-w-props-ou .ss-w-slip-btn.ss-w-slip-btn--price { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 9px; }\n.ss-w-props-ladder .ss-w-slip-btn.ss-w-slip-btn--price { min-width: 0; gap: 2px; padding: 6px 8px; font-size: 12px; }\n.ss-w-props .ss-w-slip-btn--price .ss-w-mol-lab { font-size: 11px; }\n/* The right gutter holds the line label, so it never sits on a bar's value. */\n.ss-w-props-bars { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 56px; margin-top: 14px; padding-right: 32px; }\n.ss-w-props-bar { position: relative; min-height: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--ss-w-accent) 55%, var(--ss-w-track)); }\n.ss-w-props-val { position: absolute; top: -14px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 0 2px; border-radius: 3px; background: var(--ss-w-bubble); line-height: 13px; font-size: 10px; font-weight: 600; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-props-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ss-w-ink); }\n.ss-w-props-ref-lab { position: absolute; right: 0; top: -7px; width: 28px; text-align: right; line-height: 13px; border-radius: 3px; background: var(--ss-w-bubble); font-size: 9.5px; font-weight: 600; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-props-opps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-right: 32px; text-align: center; font-size: 10px; color: var(--ss-w-faint); }\n\n/* ---- Today tab (u355) ---- */\n.ss-w-sec-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-sec-head::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n.ss-w-today-live { display: flex; flex-direction: column; gap: 2px; }\n\n/* Today tab root (Task 7): position: relative so the grid's own star/unstar toast (absolute,\n   top-centre) anchors here rather than to some unrelated positioned ancestor. */\n/* Non-scrolling anchor for .ss-w-today-toast (position: absolute; top: 0): .ss-w-mon-list below is\n   the overflow-y: auto scroller, so a toast parented to IT would scroll out of view with the\n   content that moved it. This wrapper sits outside that scroller, inside .ss-w-panel's fixed-size\n   flex column, so top: 0 always lands at the visible top of the Today tab. min-height: 0 is\n   required: without it this flex item defaults to min-height: auto (its content height), .ss-w-panel's\n   overflow: hidden then clips it, and .ss-w-mon-list inside never gets a bounded height to scroll within. */\n.ss-w-today-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n\n/* Section header for \"Your leagues\"/\"Top leagues\"/\"All leagues\" (Task 7) -- same visual\n   treatment as .ss-w-sec-head (the live-band header), kept as a separate class so a kept test\n   asserting .ss-w-sec-head is absent when nothing is live cannot see this header too. */\n.ss-w-today-sec { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-today-sec::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-today-sec-sub { text-transform: none; letter-spacing: normal; font-weight: 600; }\n.ss-w-today-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.ss-w-today-empty { font-size: 12px; color: var(--ss-w-faint); padding: 10px 2px; }\n.ss-w-today-search-block { display: flex; flex-direction: column; }\n.ss-w-today-search-group { display: flex; align-items: center; gap: 7px; padding: 2px 2px 6px; }\n.ss-w-today-search-group::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-today-search-group .ss-w-bi-comp-logo { width: 16px; height: 16px; }\n.ss-w-today-search-group-name { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-search-row { cursor: pointer; border-radius: 10px; }\n.ss-w-today-search-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n\n/* League tile (Task 5): a flat row (crest + name as the open target, star as a separate sibling\n   button) rather than a disclosure header -- opening is Task 6's LeagueDetail, not an inline\n   expansion. Same border/radius language .ss-w-grp used to carry, before Task 7 deleted it. */\n.ss-w-today-tile { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; background: var(--ss-w-bubble); }\n.ss-w-today-tile-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: none; border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }\n.ss-w-today-tile-body:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-tile-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-tile-country { font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-today-tile-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 6px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-tile-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-tile-star[aria-pressed=\"true\"] { color: var(--ss-w-accent); }\n.ss-w-today-tile-star:disabled { cursor: default; opacity: .4; }\n.ss-w-today-tile-star svg { width: 18px; height: 18px; }\n\n/* Capped row groups (variant B of u521): one league's section-header plus up to\n   ROW_CAP_PER_LEAGUE inline fixture rows, used in place of a tile when the section row budget\n   allows it. Mirrors LeagueTile's button-body + sibling-star-button shape. */\n.ss-w-today-rowsection { display: flex; flex-direction: column; gap: 12px; }\n.ss-w-today-rowgroup { display: flex; flex-direction: column; }\n.ss-w-today-rowgroup-head { display: flex; align-items: center; gap: 4px; }\n.ss-w-today-rowgroup-head-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px; background: none; border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }\n.ss-w-today-rowgroup-head-body:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-rowgroup-name { font-size: 11px; font-weight: 800; letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-rowgroup-star { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-rowgroup-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-rowgroup-star[aria-pressed=\"true\"] { color: var(--ss-w-accent); }\n.ss-w-today-rowgroup-star:disabled { cursor: default; opacity: .4; }\n.ss-w-today-rowgroup-star svg { width: 16px; height: 16px; }\n.ss-w-today-rowgroup-rows { display: flex; flex-direction: column; }\n.ss-w-today-rowgroup-seeall { align-self: flex-start; background: none; border: none; font: inherit; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); cursor: pointer; padding: 4px 2px 0; }\n.ss-w-today-rowgroup-seeall:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n\n/* League detail (Task 6): the drill-in view opened from a tile. Its header star is always\n   enabled (spec \u00A73/\u00A77's one exception to the tile rule), so it carries no :disabled styling. */\n.ss-w-today-detail { position: relative; display: flex; flex-direction: column; gap: 10px; }\n.ss-w-today-detail-head { display: flex; align-items: center; gap: 8px; }\n.ss-w-today-detail-back { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); cursor: pointer; transform: scaleX(-1); }\n.ss-w-today-detail-back:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-detail-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-detail-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-detail-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-detail-star[aria-pressed=\"true\"] { color: var(--ss-w-accent); }\n.ss-w-today-detail-star svg { width: 18px; height: 18px; }\n.ss-w-today-detail-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }\n.ss-w-today-detail-prev, .ss-w-today-detail-next { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-detail-prev:focus-visible, .ss-w-today-detail-next:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-detail-prev { transform: scaleX(-1); }\n.ss-w-today-detail-pos { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-today-detail-body { display: flex; flex-direction: column; }\n.ss-w-today-detail-count { align-self: flex-end; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }\n/* aria-live status region, not a modal -- pointer-events: none so the header/nav above stay\n   clickable while it is showing. */\n.ss-w-today-toast { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; width: max-content; max-width: 220px; font-size: 11px; font-weight: 560; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 5px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n\n.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-drow:last-child { border-bottom: none; }\n.ss-w-drow-when { font-size: 11px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-drow-when--live { color: var(--ss-w-neg); }\n.ss-w-drow-when--two { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }\n.ss-w-drow-when--two > span:last-child { font-size: 10px; font-weight: 600; }\n/* Each side ellipsises independently: a single joined string truncates the away team off the end,\n   which is the u350 betting-card truncation one layer down. */\n.ss-w-drow-fx { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-drow-side { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 0; }\n/* Away side mirrors home around the score: crest to the far edge, name aligned inward. */\n.ss-w-drow-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-drow-nm { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* Centre slot of .ss-w-drow-fx, between the two sides: flex:none so a widening score never\n   steals width the team names need to avoid ellipsis. min-width holds the slot at the width of a\n   one-digit scoreline so an unscored row's bare dash does not pull the column out of line -- the\n   scores read as a column down the list, not a jitter. */\n.ss-w-drow-sc { flex: none; min-width: 26px; text-align: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-drow-sc--idle { color: var(--ss-w-faint); font-weight: 600; }\n.ss-w-drow--live { background: color-mix(in srgb, var(--ss-w-neg) 5%, transparent); border-radius: 8px; padding: 7px 6px; margin: 0 -6px; border-bottom: none; }\n.ss-w-drow-crest { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: contain; background: var(--ss-w-bubble); }\n.ss-w-drow-crest--abbr { width: 26px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; letter-spacing: .02em; line-height: 1; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); box-sizing: border-box; }\n\n.ss-w-stale { font-size: 11px; font-weight: 600; color: var(--ss-w-cta); background: color-mix(in srgb, var(--ss-w-cta) 12%, var(--ss-w-panel)); border-radius: 8px; padding: 6px 9px; }\n\n/* Prize banner: CTA-tinted card with icon + body column (label + chips) \u2014 still used by\n   LeaderboardEmpty.tsx's weekly-prize callout. */\n.ss-w-prize { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--ss-w-cta) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 22%, var(--ss-w-line)); }\n.ss-w-prize-icon { flex: none; font-size: 20px; line-height: 1; padding-top: 1px; }\n.ss-w-prize-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-prize-text { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.35; overflow-wrap: anywhere; }\n\n/* \u2500\u2500 games hub (u393) \u2500\u2500 */\n.ss-g-hub-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--ss-g-ground); font-family: var(--ss-g-font-body); color: var(--ss-g-ink); }\n.ss-g-hub { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 20px; }\n.ss-g-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-g-stat { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); min-width: 0; }\n.ss-g-stat-l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-stat-v { display: flex; align-items: baseline; gap: 4px; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 24px; line-height: 1; white-space: nowrap; }\n.ss-g-stat-v svg { color: var(--ss-g-flame); align-self: center; }\n.ss-g-stat-v small { font-family: var(--ss-g-font-body); font-size: 12px; font-weight: 600; color: var(--ss-g-muted); overflow: hidden; text-overflow: ellipsis; }\n.ss-g-stat-v--accent { color: var(--ss-w-accent); }\n.ss-g-prize { align-self: flex-start; }\n.ss-g-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; min-width: 0; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); color: var(--ss-g-ink); text-align: left; font: inherit; cursor: pointer; }\n.ss-g-tile:not([data-disabled]):hover { border-color: var(--ss-g-line-warm); }\n.ss-g-tile[data-disabled] { opacity: .55; cursor: default; }\n.ss-g-tile--tile { height: 148px; }\n.ss-g-tile-art { height: 74px; border-radius: 10px; background: var(--ss-g-raised); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }\n.ss-g-art { width: 100%; height: 100%; }\n.ss-g-art-fg { fill: var(--ss-g-strong-line); }\n.ss-g-art-accent { fill: var(--ss-w-accent); }\n.ss-g-art-accent-stroke { fill: none; stroke: var(--ss-w-accent); stroke-width: 2; }\n.ss-g-art-dot { fill: var(--ss-g-pitch-mark); }\n.ss-g-art-pitch { fill: var(--ss-g-pitch); stroke: var(--ss-g-pitch-line); }\n.ss-g-art-block { fill: var(--ss-g-line); }\n.ss-g-art-correct { fill: var(--ss-g-correct); }\n.ss-g-art-dash { fill: none; stroke: var(--ss-g-strong-line); stroke-dasharray: 3 2; stroke-width: 1.5; }\n.ss-g-art-line { stroke: var(--ss-g-line-warm); stroke-width: 2; }\n.ss-g-art-ink { fill: none; stroke: var(--ss-g-on-accent); stroke-width: 2; }\n.ss-g-art-q { fill: var(--ss-w-accent); font: 800 20px var(--ss-g-font-display); }\n.ss-g-tile-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-tile-status { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-tile-status[data-tone=\"accent\"] { color: var(--ss-w-accent); font-weight: 600; }\n.ss-g-tile-status[data-tone=\"success\"] { color: var(--ss-g-success); font-weight: 700; }\n.ss-g-tile--hero { flex-direction: row; min-height: 184px; padding: 0; overflow: hidden; border-radius: 18px; background: var(--ss-g-warm); border-color: var(--ss-g-line-warm); }\n.ss-g-hero-text { flex: 0 0 60%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; min-width: 0; }\n.ss-g-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-g-hero-title { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 34px; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-hero-sub { font-size: 14px; color: var(--ss-g-ink-2); }\n.ss-g-hero-cta { align-self: flex-start; margin-top: 6px; padding: 9px 16px; border-radius: 999px; background: var(--ss-w-accent); color: var(--ss-g-on-accent); font-size: 14px; font-weight: 700; }\n.ss-g-hero-art { flex: 1; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(-58deg, var(--ss-g-accent-tint) 0 14px, var(--ss-g-warm) 14px 32px); }\n.ss-g-sec { display: flex; flex-direction: column; gap: 10px; }\n.ss-g-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }\n.ss-g-sec-head h3 { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }\n.ss-g-sec-head span { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; }\n.ss-g-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n.ss-g-tile--wide { flex-direction: row; align-items: center; gap: 14px; min-height: 104px; }\n.ss-g-wide-art { width: 84px; height: 84px; flex: none; border-radius: 10px; background: var(--ss-g-raised); }\n.ss-g-wide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }\n.ss-g-wide-chev { color: var(--ss-g-muted); transform: rotate(180deg); display: flex; }\n\n/* \u2500\u2500 Mystery Tiger (u393) \u2500\u2500 */\n.ss-g-mt-card { flex: none; border-radius: 18px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); overflow: hidden; display: flex; flex-direction: column; }\n.ss-g-mt-portrait { position: relative; height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: repeating-linear-gradient(-58deg, var(--ss-g-accent-tint) 0 16px, var(--ss-g-warm) 16px 36px); }\n.ss-g-mt-portrait .ss-g-sil { font-size: 46px; }\n.ss-g-mt-photo { width: 132px; height: 132px; margin-bottom: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 40px var(--ss-g-font-display); }\n.ss-g-mt-photo img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-cp-photo { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 22px var(--ss-g-font-display); }\n.ss-g-cp-photo img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-mt-reveal-name { position: absolute; bottom: 6px; left: 12px; right: 12px; text-align: center; font: 800 20px var(--ss-g-font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mt-known { display: grid; gap: 6px; padding: 12px; }\n.ss-g-mt-known-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }\n.ss-g-mt-lab { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-mt-known-v { width: 100%; height: 38px; border-radius: 8px; display: grid; place-items: center; font: 700 16px var(--ss-g-font-display); background: var(--ss-g-raised); color: var(--ss-g-muted); white-space: nowrap; }\n.ss-g-mt-known-v[data-state=\"known\"] { background: var(--ss-g-correct); color: var(--ss-g-on-correct); font-size: 18px; }\n.ss-g-mt-known-v[data-state=\"range\"] { border: 1px dashed var(--ss-g-strong-line); }\n.ss-g-mt-table { display: flex; flex-direction: column; gap: 8px; }\n.ss-g-mt-thead, .ss-g-mt-row { display: grid; gap: 5px; align-items: center; }\n.ss-g-mt-thead { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-mt-thead span:not(:first-child) { text-align: center; }\n.ss-g-mt-who { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-g-mt-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 12px; font-weight: 700; overflow: hidden; }\n.ss-g-mt-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }\n.ss-g-mt-first { font-size: 11px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mt-last { font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mt-cell { height: 42px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font: 700 16px var(--ss-g-font-display); background: var(--ss-g-raised); border: 1px solid var(--ss-g-line); color: var(--ss-g-ink); overflow: hidden; }\n.ss-g-mt-cell[data-verdict=\"exact\"] { background: var(--ss-g-correct); border-color: transparent; color: var(--ss-g-on-correct); }\n.ss-g-mt-cell[data-verdict=\"near\"] { background: var(--ss-g-close); border-color: transparent; color: var(--ss-g-on-accent); }\n.ss-g-mt-cell-dir { font-size: 10px; margin-top: 2px; }\n.ss-g-mt-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-mt-legend span { display: inline-flex; align-items: center; gap: 6px; }\n.ss-g-mt-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }\n.ss-g-mt-sw[data-verdict=\"exact\"] { background: var(--ss-g-correct); }\n.ss-g-mt-sw[data-verdict=\"near\"] { background: var(--ss-g-close); }\n.ss-g-mt-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; color: var(--ss-g-ink-2); }\n.ss-g-mt-hint svg { color: var(--ss-w-accent); flex: none; margin-top: 1px; }\n\n/* \u2500\u2500 Higher or Lower (u393) \u2500\u2500 */\n.ss-g-hl-prompt { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }\n.ss-g-hl-prompt-q { font-size: 13px; color: var(--ss-g-muted); }\n.ss-g-hl-prompt-stat { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }\n.ss-g-hl-prompt-season { font-size: 12px; color: var(--ss-g-muted); }\n/* The pair fills whatever height the panel leaves (a laptop demo panel is ~670px, the design 860px):\n   both cards share it and the photos scale with them, so Higher/Lower never fall below the fold. */\n.ss-g-hl .ss-g-body { overflow-y: auto; container: hl / size; }\n.ss-g-hl-pair { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }\n.ss-g-hl-card { flex: 1 1 0; min-height: min-content; max-height: 240px; display: flex; border-radius: 18px; overflow: hidden; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }\n.ss-g-hl-card--b { border-color: var(--ss-g-line-warm); }\n.ss-g-hl-photo-wrap { width: 38%; max-width: 160px; flex: none; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; background: var(--ss-g-raised); overflow: hidden; }\n.ss-g-hl-photo-wrap .ss-g-sil { border-radius: 0; background: transparent; }\n.ss-g-hl-photo { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ss-g-muted); font: 800 36px var(--ss-g-font-display); }\n.ss-g-hl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }\n.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; }\n.ss-g-hl-first { font-size: 13px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-hl-surname { font: 800 26px var(--ss-g-font-display); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-hl-value { font: 800 56px var(--ss-g-font-display); line-height: .95; color: var(--ss-w-accent); margin-top: 6px; }\n.ss-g-hl-stat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-hl-btns { display: flex; flex-direction: row; gap: 8px; margin-top: 12px; }\n.ss-g-hl-btns .ss-g-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; gap: 4px; }\n/* Labels stay on one line: Turkish \"DAHA FAZLA\" wrapped to two in a ~115px button. */\n.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }\n.ss-g-hl-btns .ss-g-btn svg { flex: none; }\n/* Phone-width cards: the info column is ~230px, too narrow for \"DAHA FAZLA\" + icon side by side.\n   Drop the icons and tighten the type first; stack the buttons only when even that cannot fit. */\n.ss-g-hl-info { container: hlinfo / inline-size; }\n@container hlinfo (max-width: 280px) {\n  .ss-g-hl-btns .ss-g-btn svg { display: none; }\n  .ss-g-hl-btns .ss-g-btn { font-size: 12px; letter-spacing: 0; padding: 0 4px; }\n}\n@container hlinfo (max-width: 180px) {\n  .ss-g-hl-btns { flex-direction: column; }\n}\n.ss-g-hl-vs { position: relative; z-index: 1; flex: none; align-self: center; width: 44px; height: 44px; margin: -28px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }\n/* Clear the VS badge that straddles the seam between the two cards. */\n.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }\n.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 24px; }\n/* Short panels (a ~580px widget on a small laptop): tighten the type so both cards and the\n   Higher/Lower buttons stay on screen; below this the body scrolls rather than clipping names. */\n@container hl (max-height: 420px) {\n  .ss-g-hl-prompt-stat { font-size: 24px; }\n  .ss-g-hl-prompt-season { display: none; }\n  .ss-g-hl-info { padding: 8px 12px; }\n  .ss-g-hl-surname { font-size: 22px; }\n  .ss-g-hl-value { font-size: 42px; margin-top: 2px; }\n  .ss-g-hl-btns { margin-top: 8px; }\n  .ss-g-hl-vs { width: 38px; height: 38px; margin: -22px 0; font-size: 15px; }\n  .ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 18px; }\n  .ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 18px; }\n}\n.ss-g-hl-feedback { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ss-g-ink-2); }\n.ss-g-hl-feedback[data-correct=\"true\"] svg { color: var(--ss-g-success); }\n.ss-g-hl-feedback[data-correct=\"false\"] svg { color: var(--ss-g-wrong-mark); }\n.ss-g-hl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.ss-g-hl-dots { display: flex; gap: 5px; }\n.ss-g-hl-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--ss-g-strong-line); }\n.ss-g-hl-dot[data-state=\"correct\"] { background: var(--ss-g-correct); border: 0; }\n.ss-g-hl-dot[data-state=\"wrong\"] { background: var(--ss-g-wrong-mark); border: 0; }\n.ss-g-hl-pts { font: 700 22px var(--ss-g-font-display); white-space: nowrap; }\n.ss-g-hl-pts-unit { font-size: 13px; color: var(--ss-g-muted); }\n\n/* \u2500\u2500 Guess the XI (u393) \u2500\u2500 pitch colours are the fixed --ss-g-pitch* tokens (Task 1) */\n.ss-g-gxi-pitch { position: relative; flex: none; height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid var(--ss-g-pitch-line);\n  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ss-g-pitch) 92%, var(--ss-g-pitch-mark)) 0 12.5%, var(--ss-g-pitch) 12.5% 25%); }\n.ss-g-gxi-rows { position: absolute; inset: 14px 6px; display: flex; flex-direction: column; justify-content: space-between; }\n.ss-g-gxi-row { display: flex; justify-content: space-evenly; align-items: flex-start; }\n.ss-g-gxi-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 72px; }\n.ss-g-gxi-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-pitch-chip); border: 2px solid var(--ss-g-pitch-ink); font-size: 22px; line-height: 1; }\n.ss-g-gxi-node[data-revealed] .ss-g-gxi-disc { border-color: var(--ss-w-accent); }\n.ss-g-gxi-disc[data-code] { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ss-g-pitch-ink); }\n.ss-g-gxi-pos { max-width: 100%; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-pitch-chip); color: var(--ss-g-pitch-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-gxi-pos--name { color: var(--ss-w-accent); text-transform: uppercase; }\n.ss-g-gxi-wrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.ss-g-gxi-wrong-l { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-gxi-wrong-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; color: var(--ss-g-muted); }\n/* u407: lineup photo \u2014 fills the 44px disc like the flag does */\n.ss-g-gxi-disc--photo { overflow: hidden; border: 2px solid var(--ss-w-accent); }\n.ss-g-gxi-disc--photo img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-gxi-disc--photo .ss-w-av-initials { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; color: var(--ss-g-pitch-ink); }\n/* u407: answer reveal \u2014 prominent row using theme tokens, works on dark/navy/light surfaces */\n.ss-g-gxi-answer { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: var(--ss-g-warm); border: 1.5px solid var(--ss-g-line-warm); }\n.ss-g-gxi-answer-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-g-muted); flex: none; }\n.ss-g-gxi-answer-name { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--ss-g-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n/* ---- Daily Quiz (u393) ---- */\n.ss-g-dq-stem { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }\n.ss-g-dq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n.ss-g-dq-opt { position: relative; min-height: 96px; padding: 44px 12px 12px; border-radius: 16px; border: 1.5px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); text-align: left; font: inherit; cursor: pointer; display: flex; align-items: flex-end; min-width: 0; }\n.ss-g-dq-opt:hover:not(:disabled) { border-color: var(--ss-g-line-warm); }\n.ss-g-dq-opt[aria-pressed=\"true\"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-dq-opt:disabled { cursor: default; }\n.ss-g-dq-badge { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ss-g-raised); font-weight: 700; font-size: 13px; color: var(--ss-g-ink); }\n.ss-g-dq-opt[aria-pressed=\"true\"] .ss-g-dq-badge { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-dq-opt-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }\n.ss-g-dq-opt-first { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-dq-opt-last { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-dq-opt-suffix { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ss-g-muted); }\n.ss-g-dq-opt-full { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }\n.ss-g-dq-nav { display: flex; gap: 10px; }\n.ss-g-dq-nav .ss-g-btn--block { flex: 1; }\n.ss-g-dq-rq { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }\n.ss-g-dq-rq-stem { font-weight: 700; font-size: 14px; }\n.ss-g-dq-rq-opts { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-g-dq-rq-opt { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--ss-g-raised); color: var(--ss-g-muted); }\n.ss-g-dq-rq-opt--correct { background: var(--ss-g-correct); color: var(--ss-g-on-correct); }\n.ss-g-dq-rq-opt--wrong { background: var(--ss-g-wrong); color: var(--ss-g-on-correct); }\n.ss-g-dq-why { font-size: 13px; color: var(--ss-g-ink-2); }\n/* u407: player avatar in quiz option \u2014 centered in top half, badge at top-left unaffected */\n.ss-g-dq-opt-av { position: absolute; top: 7px; right: 10px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 13px; font-weight: 700; flex: none; }\n.ss-g-dq-opt-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-dq-opt-av .ss-w-av-initials { font-size: 11px; }\n\n/* ---- Career Path (u393) ---- */\n.ss-g-cp-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-cp-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }\n.ss-g-cp-card-title { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-cp-hint { font-size: 13px; color: var(--ss-g-ink-2); }\n.ss-g-cp-locks { display: flex; gap: 6px; flex-wrap: wrap; }\n.ss-g-cp-line { list-style: none; display: flex; flex-direction: column; }\n.ss-g-cp-step { display: flex; gap: 14px; align-items: stretch; }\n.ss-g-cp-rail { display: flex; flex-direction: column; align-items: center; width: 52px; flex: none; }\n.ss-g-cp-tile { width: 52px; height: 52px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; }\n.ss-g-cp-tile--locked { border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); }\n.ss-g-cp-tile--faint { border: 1.5px dashed var(--ss-g-line); background: transparent; color: var(--ss-g-faint); }\n.ss-g-cp-conn { width: 2px; flex: 1; min-height: 14px; background: var(--ss-g-line-warm); }\n.ss-g-cp-conn--faint { background: var(--ss-g-line); }\n.ss-g-cp-step:last-child .ss-g-cp-conn { display: none; }\n.ss-g-cp-step-text { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding-bottom: 14px; min-width: 0; }\n.ss-g-cp-club { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }\n.ss-g-cp-sub { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-cp-loan { color: var(--ss-w-accent); font-weight: 600; }\n\n/* Game screen host: fills the panel; each screen owns its header, gutters and scrolling. */\n.ss-w-gscreen-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--ss-g-ground); }\n.ss-w-gscreen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }\n.ss-w-gscreen-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; color: var(--ss-w-faint); font-size: 13px; text-align: center; }\n\n/* ---- Leaderboard (D2) ---- */\n/* Outer shell */\n.ss-w-lb2 { display: flex; flex-direction: column; gap: 12px; }\n\n/* Segmented control: This week / All time */\n.ss-w-seg { display: inline-flex; gap: 2px; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }\n.ss-w-seg-btn { font-size: 12px; font-weight: 600; border: none; border-radius: 7px; padding: 5px 12px; color: var(--ss-w-faint); background: none; cursor: pointer; font: inherit; white-space: nowrap; }\n.ss-w-seg-btn[data-on] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 3px rgba(0,0,0,.09); }\n\n/* Row list */\n.ss-w-lb2-rows { display: flex; flex-direction: column; border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; background: var(--ss-w-panel); }\n.ss-w-lb2-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-lb2-row:last-child { border-bottom: none; }\n/* Highlighted \"you\" row: full-width tint via negative margin trick, contained by border-radius above */\n.ss-w-lb2-row--you { background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); }\n.ss-w-lb2-rank { flex: none; min-width: 30px; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }\n.ss-w-lb2-rank--top3 { color: var(--ss-w-cta); }\n.ss-w-lb2-handle { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-lb2-points { flex: none; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-lb2-streak { flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); padding-left: 4px; }\n\n/* Kit-prize separator: a labelled hairline (eyebrow + two growing lines) */\n.ss-w-kitline { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); }\n.ss-w-kitline::before, .ss-w-kitline::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n\n/* Off-board treatment: dashed pill indicating rank is outside top N */\n.ss-w-lbgap { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 11.5px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 10px; }\n\n/* ---- Leaderboard empty / weekly-reset default state ---- */\n.ss-w-lb-empty { display: flex; flex-direction: column; gap: 12px; flex: 1; }\n.ss-w-lb-empty-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px 16px; border: 1px dashed color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); border-radius: 14px; background: color-mix(in srgb, var(--ss-w-cta) 6%, var(--ss-w-panel)); }\n.ss-w-lb-empty--alltime { align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }\n.ss-w-lb-empty-icon { font-size: 30px; line-height: 1; }\n.ss-w-lb-empty-title { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: var(--ss-w-ink); }\n.ss-w-lb-empty-body { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.4; color: var(--ss-w-faint); }\n.ss-w-lb-empty-cta { margin-top: 6px; border: none; border-radius: 10px; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); cursor: pointer; }\n.ss-w-lb-empty-cta:hover { filter: brightness(1.04); }\n.ss-w-lb-last { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--ss-w-line); font-size: 11px; }\n.ss-w-lb-last-label { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ss-w-faint); }\n.ss-w-lb-last-handle { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-lb-last-points { flex: none; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n\n/* PlayerAvatar initials fallback (PlayerAvatar.tsx) \u2014 size/colour inherit from the avatar class. */\n.ss-w-av-initials { font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }\n\n/* ---- Beat the Grid (u393) ---- */\n.ss-g-btg-grid { display: grid; gap: 6px; }\n/* While the search sheet is pinned below, the grid shrinks its rows to share the body with it\n   instead of pushing the bottom row under the sheet. */\n.ss-g-btg-grid--fit { flex: 0 1 auto; min-height: 0; }\n.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; overflow: hidden; }\n.ss-g-btg-colhdr[data-meta] { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: 11px; letter-spacing: 0; }\n.ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }\n.ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; overflow: hidden; }\n.ss-g-btg-rowhdr[data-meta] { font-size: 10px; font-family: var(--ss-g-font-body); font-weight: 700; letter-spacing: -0.01em; text-transform: none; word-break: normal; overflow-wrap: normal; hyphens: none; line-height: 1.25; padding: 0 2px; }\n.ss-g-btg-cell { position: relative; min-height: 0; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }\n.ss-g-btg-cell:disabled { cursor: default; }\n.ss-g-btg-cell[data-state=\"active\"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }\n.ss-g-btg-cell[data-state=\"correct\"], .ss-g-btg-cell[data-state=\"wrong\"] { justify-content: flex-end; background: var(--ss-g-surface); border-style: solid; }\n.ss-g-btg-cell[data-state=\"correct\"] { border-color: var(--ss-g-correct); }\n.ss-g-btg-cell[data-state=\"wrong\"] { border-color: var(--ss-g-wrong-mark); }\n.ss-g-btg-badge { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--ss-g-on-correct); }\n.ss-g-btg-badge--correct { background: var(--ss-g-correct); }\n.ss-g-btg-badge--wrong { background: var(--ss-g-wrong); }\n.ss-g-btg-rarity { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-g-btg-cell[data-state=\"wrong\"] .ss-g-btg-rarity { background: var(--ss-g-raised); color: var(--ss-g-muted); }\n.ss-g-btg-cell .ss-g-sil { border-radius: 0; background: transparent; }\n.ss-g-btg-name { width: 100%; padding: 4px 2px; background: var(--ss-g-ground); color: var(--ss-g-ink); font-family: var(--ss-g-font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-btg-plus { display: flex; }\n.ss-g-btg-pin { flex: none; padding: 0 12px 12px; }\n.ss-g-btg-sheet { padding: 14px; border-radius: 18px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line-warm); display: flex; flex-direction: column; gap: 12px; }\n.ss-g-btg-sheet-hdr { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-g-btg-sheet-hdr .ss-g-chip { padding: 4px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-btg-sheet-x { color: var(--ss-g-muted); display: flex; flex: none; }\n.ss-g-btg-sheet-close { margin-left: auto; flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ss-g-muted); display: grid; place-items: center; cursor: pointer; }\n.ss-g-btg-sheet-close:hover { background: var(--ss-g-raised); color: var(--ss-g-ink); }\n.ss-g-btg-sheet .ss-g-search-box { height: 48px; border-radius: 12px; background: var(--ss-g-ground); }\n.ss-g-btg-sheet-empty { font-size: 13px; color: var(--ss-g-muted); }\n.ss-g-btg-sheet .ss-g-opt { background: var(--ss-g-raised); }\n.ss-g-btg-sheet .ss-g-opts { max-height: 160px; }\n.ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }\n/* u407: cell avatar replaces Silhouette */\n.ss-g-btg-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 12px; font-weight: 700; }\n.ss-g-btg-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-btg-av .ss-w-av-initials { font-size: 12px; }\n/* u407: coach photo in row/col header */\n.ss-g-btg-coach-av { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 10px; font-weight: 700; }\n.ss-g-btg-coach-av img { width: 100%; height: 100%; object-fit: cover; }\n/* u407: country flag emoji in header \u2014 sized to match other header icons */\n.ss-g-btg-hdr-flag { font-size: 20px; line-height: 1; flex: none; }\n/* u407: club crest in col/row header */\n.ss-g-btg-colhdr .ss-g-crest, .ss-g-btg-rowhdr .ss-g-crest { width: 28px; height: 28px; flex: none; }\n\n/* \u2500\u2500 Starting XI (u393) \u2500\u2500 */\n.ss-g-xi-pitch { position: relative; flex: none; height: 400px; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(180deg, var(--ss-g-pitch) 0 40px, color-mix(in srgb, var(--ss-g-pitch) 88%, var(--ss-g-pitch-mark)) 40px 80px); border: 1px solid var(--ss-g-pitch-line); }\n.ss-g-xi-slot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 48px; border: 0; padding: 0; background: transparent; color: var(--ss-g-pitch-mark); font: inherit; cursor: pointer; }\n.ss-g-xi-slot:disabled { cursor: default; }\n.ss-g-xi-ring { width: 48px; height: 48px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--ss-g-pitch-mark); font-family: var(--ss-g-font-display); font-weight: 800; font-size: 20px; }\n.ss-g-xi-slot[data-state=\"filled\"] .ss-g-xi-ring { border: 2px solid var(--ss-w-accent); background: var(--ss-g-accent-tint); color: var(--ss-g-ink); }\n.ss-g-xi-slot[data-state=\"active\"] .ss-g-xi-ring { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }\n.ss-g-xi-tag { max-width: 72px; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-ground); color: var(--ss-g-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-xi-slot[data-state=\"active\"] .ss-g-xi-tag { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-xi-picker { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-xi-picker-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }\n.ss-g-xi-list { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }\n.ss-g-xi-opt { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--ss-g-raised); color: var(--ss-g-ink); font: inherit; text-align: left; cursor: pointer; }\n.ss-g-xi-opt:disabled { opacity: .5; cursor: default; }\n.ss-g-xi-opt-no { width: 28px; flex: none; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; color: var(--ss-w-accent); text-align: center; }\n.ss-g-xi-opt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-xi-opt-pos { flex: none; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-line); color: var(--ss-g-ink-2); font-size: 10px; font-weight: 700; }\n.ss-g-xi-lock { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-xi-lock svg { color: var(--ss-w-accent); flex: none; }\n\n/* \u2500\u2500 Stat Ladder (u393) \u2500\u2500 */\n.ss-g-sl-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 6px; text-align: center; }\n.ss-g-sl-stat { padding: 4px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }\n.ss-g-sl-q { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 30px; line-height: 1.05; text-transform: uppercase; }\n.ss-g-sl-q em { font-style: normal; color: var(--ss-w-accent); }\n.ss-g-sl-rungs { list-style: none; display: flex; flex-direction: column; gap: 10px; }\n.ss-g-sl-rung { min-height: 84px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px; border-radius: 16px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }\n.ss-g-sl-rung--mystery { min-height: 96px; border: 2px dashed var(--ss-w-accent); background: repeating-linear-gradient(-58deg, var(--ss-g-accent-tint) 0 14px, var(--ss-g-warm) 14px 32px); }\n.ss-g-sl-rung--mystery[data-result=\"correct\"] { border: 2px solid var(--ss-g-correct); background: var(--ss-g-warm); }\n.ss-g-sl-rung--mystery[data-result=\"wrong\"] { border: 2px solid var(--ss-g-wrong-mark); background: var(--ss-g-warm); }\n.ss-g-sl-rank { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ss-g-raised); color: var(--ss-g-ink-2); font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; }\n.ss-g-sl-rung:first-child .ss-g-sl-rank { background: var(--ss-g-accent-tint); color: var(--ss-w-accent); }\n.ss-g-sl-rung--mystery .ss-g-sl-rank { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-sl-av { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-ink-2); font-weight: 700; }\n.ss-g-sl-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-sl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }\n.ss-g-sl-name small { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-sl-name b { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-sl-who { flex: 1; min-width: 0; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-g-sl-val { flex: none; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 34px; line-height: 1; }\n.ss-g-sl-val--mystery { font-size: 40px; color: var(--ss-w-accent); }\n.ss-g-sl-clue { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; line-height: 1.4; color: var(--ss-g-ink-2); }\n.ss-g-sl-clue svg { flex: none; color: var(--ss-w-accent); }\n.ss-g-sl-pool { list-style: none; display: flex; flex-direction: column; gap: 4px; }\n.ss-g-sl-opt { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid transparent; border-radius: 12px; background: var(--ss-g-raised); color: var(--ss-g-ink); font: inherit; text-align: left; cursor: pointer; }\n.ss-g-sl-opt[aria-pressed=\"true\"] { border-color: var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-sl-opt[aria-pressed=\"true\"] svg { color: var(--ss-w-accent); }\n.ss-g-sl-opt:disabled { opacity: .5; cursor: default; }\n.ss-g-sl-opt-av { width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-line); color: var(--ss-g-ink-2); font-size: 12px; font-weight: 700; }\n.ss-g-sl-opt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-sl-guess { display: flex; align-items: flex-end; gap: 8px; }\n.ss-g-sl-guess .ss-g-search { flex: 1; min-width: 0; }\n.ss-g-sl-guess .ss-g-btn { min-height: 50px; padding: 0 20px; border-radius: 14px; }\n\n/* \u2500\u2500 Matchday Predictor (u393) \u2500\u2500 */\n.ss-g-mp-card { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 16px 10px; border-radius: 18px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-mp-team { width: 84px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }\n.ss-g-mp-team .ss-g-crest--ph { color: var(--ss-g-strong-line); }\n.ss-g-mp-team-name { max-width: 100%; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 17px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-mp-team-side { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-mp-scores { display: flex; align-items: center; gap: 8px; }\n.ss-g-mp-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n.ss-g-mp-step { width: 64px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ss-g-line-warm); background: var(--ss-g-raised); color: var(--ss-g-ink); cursor: pointer; }\n.ss-g-mp-step:disabled { opacity: .4; cursor: default; }\n.ss-g-mp-digit { width: 64px; height: 76px; display: grid; place-items: center; box-sizing: border-box; border-radius: 12px; background: var(--ss-g-ground); border: 2px solid var(--ss-g-strong-line); font-family: var(--ss-g-font-display); font-weight: 800; font-size: 52px; line-height: 1; }\n.ss-g-mp-digit[data-active=\"true\"] { border-color: var(--ss-w-accent); color: var(--ss-w-accent); }\n.ss-g-mp-dash { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 30px; color: var(--ss-g-faint); }\n.ss-g-mp-scorer { display: flex; flex-direction: column; gap: 10px; }\n.ss-g-mp-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }\n.ss-g-mp-sec-head h3 { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }\n.ss-g-mp-sec-head span { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-g-mp-pcard { position: relative; min-width: 0; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); font: inherit; cursor: pointer; }\n.ss-g-mp-pcard[aria-pressed=\"true\"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-mp-pcard:disabled { cursor: default; opacity: .6; }\n.ss-g-mp-pcheck { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-mp-pname { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mp-none { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ss-g-line); background: transparent; color: var(--ss-g-muted); font: 600 14px var(--ss-g-font-body); cursor: pointer; text-align: left; }\n.ss-g-mp-radio { width: 18px; height: 18px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ss-g-strong-line); }\n.ss-g-mp-none[aria-pressed=\"true\"] { color: var(--ss-g-ink); border-color: var(--ss-g-line-warm); }\n.ss-g-mp-none[aria-pressed=\"true\"] .ss-g-mp-radio { border-color: var(--ss-w-accent); background: var(--ss-w-accent); box-shadow: inset 0 0 0 3px var(--ss-g-ground); }\n.ss-g-mp-closed { padding: 10px 14px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); color: var(--ss-g-muted); font-size: 13px; text-align: center; }\n.ss-g-mp-fun { font-size: 11px; color: var(--ss-g-faint); text-align: center; }\n.ss-g-mp-rows { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-g-mp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 14px; }\n.ss-g-mp-row-k { color: var(--ss-g-ink-2); }\n.ss-g-mp-row-v { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ss-g-muted); }\n.ss-g-mp-row[data-ok=\"true\"] { border-color: var(--ss-g-correct); }\n.ss-g-mp-row[data-ok=\"true\"] .ss-g-mp-row-v { color: var(--ss-g-success); }\n.ss-g-mp-row-d { color: var(--ss-g-ink); }\n\n/* \u2500\u2500 Fan MOTM (u393) \u2500\u2500 */\n.ss-g-motm-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }\n.ss-g-motm-row { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; border-radius: 14px; border: 1px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); font: inherit; text-align: left; cursor: pointer; }\n.ss-g-motm-row:not(:disabled):hover { border-color: var(--ss-g-line-warm); }\n.ss-g-motm-row:disabled { cursor: default; }\n.ss-g-motm-row--voted { border: 1.5px solid var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-motm-av { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-ink-2); font-size: 13px; font-weight: 700; }\n.ss-g-motm-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-motm-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-motm-pill { flex: none; padding: 3px 8px; font-size: 11px; }\n.ss-g-motm-foot { font-size: 14px; font-weight: 600; }\n.ss-g-motm-fun { font-size: 11px; color: var(--ss-g-faint); }\n\n/* \u2500\u2500 tap-to-answer tray + per-game team-colour band (u503) \u2500\u2500 */\n.ss-g-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }\n.ss-g-tray-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 78px; padding: 6px 4px; border: 1px solid var(--ss-g-line); border-radius: 14px; background: var(--ss-g-surface); color: var(--ss-g-ink); font-family: var(--ss-g-font-body); cursor: pointer; }\n.ss-g-tray-chip:hover, .ss-g-tray-chip:focus-visible { background: var(--ss-g-raised); border-color: var(--ss-w-accent); outline: none; }\n.ss-g-tray-chip:disabled { opacity: .5; cursor: default; }\n.ss-g-tray-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 14px; font-weight: 700; }\n.ss-g-tray-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-tray-name { width: 100%; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }\n.ss-g-tray-first { max-width: 100%; font-size: 10px; font-weight: 500; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-tray-last { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* Each game gets its own band colour: the operator accent mixed into the ground, hue-nudged per game.\n   Browsers without relative colour syntax keep the plain accent mix. */\n.ss-g-screen[data-game] { --ss-g-band: color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)); }\n@supports (color: oklch(from red l c h)) {\n  .ss-g-screen[data-game] { --ss-g-band: oklch(from color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)) l calc(c * 1.5) calc(h + var(--ss-g-hue-shift, 0))); }\n}\n.ss-g-screen[data-game=\"mystery-tiger\"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 0; }\n.ss-g-screen[data-game=\"career-path\"] { --ss-g-band-mix: 11%; --ss-g-hue-shift: -24; }\n.ss-g-screen[data-game] > .ss-g-head { background: var(--ss-g-band); border-radius: 0 0 24px 24px; padding-bottom: 12px; }\n.ss-g-worth { flex: none; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ss-g-muted); }\n.ss-g-worth-now { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-g-screen[data-game=\"beat-the-grid\"] { --ss-g-band-mix: 13%; --ss-g-hue-shift: 14; }\n.ss-g-screen[data-game=\"guess-the-xi\"] { --ss-g-band-mix: 12%; --ss-g-hue-shift: -36; }\n.ss-g-screen[data-game=\"higher-or-lower\"] { --ss-g-band-mix: 16%; --ss-g-hue-shift: 28; }\n.ss-g-screen[data-game=\"daily-quiz\"] { --ss-g-band-mix: 10%; --ss-g-hue-shift: -12; }\n.ss-g-screen[data-game=\"stat-ladder\"] { --ss-g-band-mix: 15%; --ss-g-hue-shift: 36; }\n.ss-g-screen[data-game=\"matchday-predictor\"] { --ss-g-band-mix: 18%; --ss-g-hue-shift: -4; }\n.ss-g-screen[data-game=\"starting-xi\"] { --ss-g-band-mix: 9%; --ss-g-hue-shift: -30; }\n.ss-g-screen[data-game=\"fan-motm\"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 8; }\n";
+declare const WIDGET_CSS = ".ss-w-root { all: revert; }\n.ss-w-root, .ss-w-root * { box-sizing: border-box; margin: 0; padding: 0; }\n.ss-w-root {\n  --ss-w-accent: #17936a;\n  --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n  --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;\n  --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n  --ss-w-pos: #1aa563; --ss-w-neg: #e0524b; --ss-w-warn: #c07a00;\n  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n  --ss-w-correct: #1f9d55; --ss-w-wrong: #b9bbc2;\n  --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);\n}\n@media (prefers-color-scheme: dark) {\n  .ss-w-root[data-ss-w-theme=\"auto\"] {\n    --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n    --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n    --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n    --ss-w-pos: #37c891; --ss-w-neg: #f0655d; --ss-w-warn: #e0a030;\n    --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n    --ss-w-correct: #37c86b; --ss-w-wrong: #3a3a41;\n  }\n}\n.ss-w-root[data-ss-w-theme=\"dark\"] {\n  --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n  --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n  --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n  --ss-w-pos: #37c891; --ss-w-neg: #f0655d; --ss-w-warn: #e0a030;\n  --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n  --ss-w-correct: #37c86b; --ss-w-wrong: #3a3a41;\n}\n.ss-w-root[data-ss-w-theme=\"light\"] {\n  --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n  --ss-w-ink: #14181d; --ss-w-faint: #6b7580;\n  --ss-w-line: #e4e8ec; --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n  --ss-w-correct: #1f9d55; --ss-w-wrong: #b9bbc2;\n}\n\n/* \u2500\u2500 games design tokens (u393) \u2500\u2500 derived from operator tokens so every tenant theme works.\n   Targets (Hull #F5A800/#0B0B0B/#F5F5F5): ground #0D0C0A, surface #17150F, warm #1C1810,\n   raised #211E17, line #26221A, line-warm #3A2F18, accent-tint #3A2C10, strong-line #4A4131. */\n.ss-w-root {\n  --ss-g-ground: color-mix(in srgb, var(--ss-w-accent) 2%, var(--ss-w-panel));\n  --ss-g-surface: color-mix(in srgb, var(--ss-w-accent) 3%, color-mix(in srgb, var(--ss-w-ink) 3%, var(--ss-w-panel)));\n  --ss-g-warm: color-mix(in srgb, var(--ss-w-accent) 6%, color-mix(in srgb, var(--ss-w-ink) 2%, var(--ss-w-panel)));\n  --ss-g-raised: color-mix(in srgb, var(--ss-w-accent) 3%, color-mix(in srgb, var(--ss-w-ink) 6%, var(--ss-w-panel)));\n  --ss-g-line: color-mix(in srgb, var(--ss-w-accent) 4%, color-mix(in srgb, var(--ss-w-ink) 8%, var(--ss-w-panel)));\n  --ss-g-line-warm: color-mix(in srgb, var(--ss-w-accent) 18%, color-mix(in srgb, var(--ss-w-ink) 3%, var(--ss-w-panel)));\n  --ss-g-accent-tint: color-mix(in srgb, var(--ss-w-accent) 20%, var(--ss-w-panel));\n  --ss-g-strong-line: color-mix(in srgb, var(--ss-w-accent) 8%, color-mix(in srgb, var(--ss-w-ink) 18%, var(--ss-w-panel)));\n  --ss-g-ink: color-mix(in srgb, var(--ss-w-accent) 4%, var(--ss-w-ink));\n  --ss-g-ink-2: color-mix(in srgb, var(--ss-w-accent) 4%, color-mix(in srgb, var(--ss-w-ink) 72%, var(--ss-w-panel)));\n  --ss-g-muted: color-mix(in srgb, var(--ss-w-accent) 5%, color-mix(in srgb, var(--ss-w-ink) 60%, var(--ss-w-panel)));\n  --ss-g-faint: color-mix(in srgb, var(--ss-w-ink) 45%, var(--ss-w-panel));\n  --ss-g-on-accent: #1a1206;\n  --ss-g-on-correct: #fff;\n  --ss-g-correct: color-mix(in srgb, var(--ss-w-correct) 55%, #000);\n  --ss-g-wrong: color-mix(in srgb, var(--ss-w-neg) 55%, #000);\n  /* Brighter wrong for thin marks (borders, icons, segments) that must read on dark surfaces; --ss-g-wrong stays for fills. */\n  --ss-g-wrong-mark: var(--ss-w-neg);\n  --ss-g-success: color-mix(in srgb, var(--ss-w-pos) 80%, var(--ss-w-ink));\n  --ss-g-success-tint: color-mix(in srgb, var(--ss-w-pos) 18%, var(--ss-w-panel));\n  --ss-g-close: #e3b341;\n  --ss-g-flame: #ff6a1a;\n  /* Pitch colours are fixed in both themes: the pitch is always a dark green. */\n  --ss-g-pitch: #123524;\n  --ss-g-pitch-line: #3e7055;\n  --ss-g-pitch-chip: #0d0c0a;\n  --ss-g-pitch-ink: #f4efe6;\n  --ss-g-pitch-mark: #c9d6cd;\n  --ss-g-font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;\n  --ss-g-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;\n}\n\n\n/* \u2500\u2500 games ui kit (u393) \u2500\u2500 */\n.ss-g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.ss-g-head { display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 6px; font-family: var(--ss-g-font-body); }\n.ss-g-back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--ss-g-ink); cursor: pointer; }\n.ss-g-back:hover { background: var(--ss-g-surface); }\n.ss-g-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }\n.ss-g-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-title { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; color: var(--ss-g-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-head-right { flex: none; }\n.ss-g-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }\n.ss-g-chip--neutral { background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); color: var(--ss-g-ink); }\n.ss-g-chip--neutral .ss-g-num, .ss-g-chip--neutral svg { color: var(--ss-w-accent); }\n.ss-g-chip--accent { background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font-weight: 700; }\n.ss-g-chip--success { background: var(--ss-g-success-tint); color: var(--ss-g-success); font-weight: 700; }\n.ss-g-chip--badge { padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); }\n.ss-g-chip--lock { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--ss-g-raised); color: var(--ss-g-muted); }\n.ss-g-statstack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }\n.ss-g-statstack-v { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; color: var(--ss-w-accent); }\n.ss-g-statstack-l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-progress { display: flex; align-items: center; gap: 12px; padding: 0 16px 8px; }\n.ss-g-progress-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }\n.ss-g-progress-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ss-g-ink); }\n.ss-g-progress-rl { color: var(--ss-g-muted); }\n.ss-g-segs { display: grid; gap: 4px; }\n.ss-g-seg { height: 5px; border-radius: 3px; background: var(--ss-g-line); }\n.ss-g-seg[data-state=\"done\"] { background: var(--ss-g-strong-line); }\n.ss-g-seg[data-state=\"current\"] { background: var(--ss-w-accent); }\n.ss-g-seg[data-state=\"correct\"] { background: var(--ss-g-correct); }\n.ss-g-seg[data-state=\"wrong\"] { background: var(--ss-g-wrong-mark); }\n.ss-g-btn { min-height: 48px; padding: 0 16px; border-radius: 12px; font-family: var(--ss-g-font-body); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }\n.ss-g-btn:disabled { opacity: .45; cursor: default; }\n.ss-g-btn--block { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 800; }\n.ss-g-btn--primary { border: 0; background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-btn--outline { border: 1.5px solid var(--ss-g-strong-line); background: transparent; color: var(--ss-g-ink); }\n.ss-g-btn--accent-outline { border: 1.5px solid var(--ss-w-accent); background: transparent; color: var(--ss-w-accent); }\n.ss-g-btn--surface { border: 1px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); font-weight: 600; font-size: 13px; }\n.ss-g-search { display: flex; flex-direction: column; gap: 6px; }\n.ss-g-search-label { font-size: 12px; font-weight: 600; color: var(--ss-g-muted); }\n.ss-g-search-box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1.5px solid var(--ss-g-line); color: var(--ss-g-muted); }\n.ss-g-search-box:focus-within { border-color: var(--ss-w-accent); }\n.ss-g-search-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ss-g-ink); font: 500 15px var(--ss-g-font-body); }\n.ss-g-search-clear { flex: none; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--ss-g-line); color: var(--ss-g-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }\n.ss-g-search-clear:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-g-footer { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--ss-g-line); display: flex; flex-direction: column; gap: 10px; background: var(--ss-g-ground); }\n.ss-g-sil { position: relative; flex: none; display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--ss-g-raised); color: var(--ss-g-strong-line); }\n.ss-g-sil--selected { background: var(--ss-g-accent-tint); color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-g-raised)); }\n.ss-g-sil--mystery { background: var(--ss-g-accent-tint); color: var(--ss-g-ground); }\n.ss-g-sil-q { position: absolute; top: 22%; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 1.1em; color: var(--ss-w-accent); }\n.ss-g-crest { flex: none; object-fit: contain; }\n.ss-g-crest--ph { color: var(--ss-g-strong-line); }\n.ss-g-pitch-svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--ss-g-pitch-line); stroke-width: .6; }\n/* \u2500\u2500 games screen scaffold (u393) \u2014 shared by every game screen \u2500\u2500 */\n.ss-w-gscreen > .ss-g-screen { flex: 1; min-height: 0; }\n.ss-g-screen { display: flex; flex-direction: column; min-height: 0; background: var(--ss-g-ground); color: var(--ss-g-ink); font-family: var(--ss-g-font-body); }\n.ss-g-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 16px; }\n.ss-g-body .ss-g-progress { padding: 0; }\n.ss-g-loading { align-items: center; justify-content: center; color: var(--ss-g-muted); font-size: 13px; }\n.ss-g-opts { display: flex; flex-direction: column; gap: 4px; max-height: 232px; overflow-y: auto; }\n.ss-g-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 12px; background: var(--ss-g-surface); color: var(--ss-g-ink); font: 600 15px var(--ss-g-font-body); text-align: left; cursor: pointer; }\n.ss-g-opt:hover, .ss-g-opt:focus-visible { background: var(--ss-g-raised); outline: none; }\n.ss-g-opt-av { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 13px; font-weight: 700; }\n.ss-g-opt-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-result { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 18px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-result[data-tone=\"win\"] { border-color: var(--ss-g-correct); }\n.ss-g-result[data-tone=\"lose\"] { border-color: var(--ss-g-wrong-mark); }\n.ss-g-result-title { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }\n.ss-g-result-score { font-size: 13px; font-weight: 700; color: var(--ss-g-muted); }\n.ss-g-result-num { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 40px; color: var(--ss-w-accent); margin-right: 4px; }\n.ss-g-result-detail { font-size: 13px; color: var(--ss-g-ink-2); }\n.ss-g-result .ss-g-btn { margin-top: 6px; }\n\n/* launcher */\n.ss-w-fab-wrap { position: fixed; bottom: var(--ss-w-offset-y); z-index: 2147483000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-fab-wrap { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-fab-wrap { left: var(--ss-w-offset-x); align-items: flex-start; }\n.ss-w-fab { width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--ss-w-nav); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); }\n.ss-w-fab-mark { width: 30px; height: 30px; display: block; object-fit: contain; }\n.ss-w-greeting { max-width: 240px; display: flex; align-items: flex-start; background: var(--ss-w-panel); color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-greeting-body { position: relative; flex: 1; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 9px 4px 9px 12px; }\n.ss-w-greeting-x { flex: none; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 7px 9px 0 2px; }\n.ss-w-greeting-text { display: block; }\n/* Bubble asks (onboarding presets, spec C6): the line stays one button, the asks stack under it as\n   sibling buttons. 240 px bubble: 196 px of text room per ask; widest contract ask 167 px (EN),\n   153 px (TR) at 12px/600, measured 2026-10-04. A longer label wraps, never an ellipsis. */\n.ss-w-greeting--asks { flex-direction: column; align-items: stretch; }\n.ss-w-greeting-top { display: flex; align-items: flex-start; }\n.ss-w-greeting-asks { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }\n.ss-w-greeting-ask { min-height: 44px; width: 100%; text-align: left; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 35%, var(--ss-w-line)); border-radius: 10px; padding: 6px 10px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }\n.ss-w-greeting-ask:hover { border-color: var(--ss-w-accent); }\n.ss-w-greeting-ask:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n/* Typing indicator: overlays the text area so bubble height stays put; hidden at\n   rest, revealed only during the one-shot intro (see prefers-reduced-motion block). */\n.ss-w-greeting-dots { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; }\n.ss-w-greeting-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-faint); display: block; }\n/* One-shot launcher attention intro: FAB nudges, then the greeting types in.\n   Gated behind no-preference so reduce-motion users get the greeting shown\n   statically (text visible, no nudge, no typing). ChatFab adds .ss-w-intro once\n   per page load; every animation runs a single time and settles at rest. */\n@media (prefers-reduced-motion: no-preference) {\n  .ss-w-intro .ss-w-fab { animation: ss-w-nudge .8s ease both; }\n  .ss-w-intro .ss-w-greeting { animation: ss-w-greet-in .45s cubic-bezier(.2,.8,.3,1.15) .8s both; }\n  .ss-w-intro .ss-w-greeting-text { animation: ss-w-greet-textin .4s ease 1.65s both; }\n  .ss-w-intro .ss-w-greeting-asks { animation: ss-w-greet-textin .4s ease 1.65s both; }\n  .ss-w-intro .ss-w-greeting-dots { animation: ss-w-greet-dots .95s ease .85s both; }\n  .ss-w-intro .ss-w-greeting-dots i { animation: ss-w-greet-dotbounce .5s ease .85s 2; }\n  .ss-w-intro .ss-w-greeting-dots i:nth-child(2) { animation-delay: 1s; }\n  .ss-w-intro .ss-w-greeting-dots i:nth-child(3) { animation-delay: 1.15s; }\n}\n@keyframes ss-w-nudge {\n  0%, 100% { transform: none; }\n  22% { transform: translateY(-9px) rotate(-9deg); }\n  44% { transform: translateY(0) rotate(7deg); }\n  64% { transform: translateY(-4px) rotate(-4deg); }\n  82% { transform: rotate(2deg); }\n}\n@keyframes ss-w-greet-in {\n  from { opacity: 0; transform: translateY(8px) scale(.92); }\n  to { opacity: 1; transform: none; }\n}\n@keyframes ss-w-greet-textin { from { opacity: 0; } to { opacity: 1; } }\n@keyframes ss-w-greet-dots { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }\n@keyframes ss-w-greet-dotbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n\n/* panel */\n.ss-w-panel { position: fixed; bottom: calc(var(--ss-w-offset-y) + 72px); z-index: 2147483000; display: flex; flex-direction: column; width: min(460px, calc(100vw - 40px)); height: min(640px, calc(100vh - 120px)); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: var(--ss-w-radius); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.24); }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { left: var(--ss-w-offset-x); }\n@media (max-width: 639px) {\n  /* Fill via inset with no explicit height (like the site's working panel) so the\n     input stays visible when the mobile keyboard/URL-bar shrinks the viewport. The\n     position-specific selectors override the right/left offsets set above. */\n  .ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel,\n  .ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { inset: 0; width: auto; height: auto; border: none; border-radius: 0; }\n}\n.ss-w-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-header-mark { width: 18px; height: 18px; display: block; object-fit: contain; }\n.ss-w-header-title { font-weight: 660; flex: 1; }\n.ss-w-close { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu-wrap { position: relative; display: grid; place-items: center; }\n.ss-w-kebab { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 184px; padding: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }\n.ss-w-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }\n.ss-w-menu-item:hover, .ss-w-menu-item:focus-visible { background: var(--ss-w-bubble); }\n.ss-w-menu-item svg { color: var(--ss-w-faint); font-size: 15px; flex: none; }\n\n/* messages */\n/* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --\n   same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM\n   landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */\n/* Children of this scrolling column flex container must NOT shrink. The default flex-shrink:1\n   compresses every child to fit the panel instead of letting the container scroll, and\n   .ss-w-grp's own overflow:hidden then clips the compressed content away entirely \u2014 27\n   competition groups rendered as blank bars on a phone. Applies to the pinned cards too. */\n.ss-w-mon-list > * { flex: none; }\n.ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }\n/* Transient bottom spacer: reserves a viewport of room below a new turn so its\n   top can be scrolled into view while the reply is still streaming in. Height is\n   set imperatively and flex must not shrink it away. */\n.ss-w-turn-spacer { flex: none; }\n.ss-w-msg { display: flex; }\n.ss-w-user { justify-content: flex-end; }\n.ss-w-user .ss-w-bubble { background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 14px; padding: 8px 12px; max-width: 80%; }\n.ss-w-bot { flex-direction: column; gap: 8px; }\n.ss-w-status { font-size: 11px; color: var(--ss-w-faint); font-style: italic; }\n.ss-w-error { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c0392b; }\n.ss-w-retry { background: none; border: 1px solid currentColor; border-radius: 10px; padding: 2px 8px; cursor: pointer; color: inherit; }\n\n/* markdown */\n.ss-w-md { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-md :where(p, ul, ol, table, pre, blockquote, h1, h2, h3, h4) { margin: 0; }\n.ss-w-md > *:first-child { margin-top: 0; }\n.ss-w-md > *:last-child { margin-bottom: 0; }\n.ss-w-md-ul { list-style: disc outside; padding-left: 18px; }\n.ss-w-md-ol { list-style: decimal outside; padding-left: 18px; }\n.ss-w-md-ul li::marker, .ss-w-md-ol li::marker { color: var(--ss-w-accent); }\n.ss-w-md-link { color: var(--ss-w-accent); text-decoration: underline; }\n.ss-w-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }\n.ss-w-md-table { border-collapse: collapse; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }\n.ss-w-md-table td, .ss-w-md-table th { border: 1px solid var(--ss-w-line); padding: 4px 8px; text-align: left; white-space: nowrap; }\n.ss-w-md-table th { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); font-weight: 700; }\n.ss-w-md-table tbody tr:nth-child(even) { background: var(--ss-w-bubble); }\n.ss-w-md-code { background: var(--ss-w-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }\n\n/* entity cards */\n.ss-w-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Entity card: identity header row over a horizontal stat strip */\n.ss-w-ecard { display: flex; flex-direction: column; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }\n\n.ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }\n.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); }\n.ss-w-thumb.ss-w-team { border-radius: 12px; }\n.ss-w-ecard[data-kind=\"player\"] .ss-w-thumb { background-color: var(--ss-w-accent); }\n.ss-w-nm { font-weight: 680; line-height: 1.15; overflow-wrap: anywhere; }\n.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* bare card (no stat scopes): simple avatar + name row */\n.ss-w-ecard-bare { display: flex; align-items: center; }\n.ss-w-ecard-bare .ss-w-ecard-hd { padding: 10px 12px; }\n\n.ss-w-ecard-hd { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }\n.ss-w-ecard-hd .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }\n.ss-w-ecard-hd .ss-w-thumb.ss-w-team { border-radius: 10px; }\n.ss-w-ecard-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start; margin-left: auto; }\n.ss-w-ecard-meta .ss-w-ecard-season { margin: 0; }\n\n/* scope tabs: reuse the underline pattern, relocated above the strip */\n.ss-w-ecard-scopes { display: flex; align-items: stretch; gap: 2px; padding: 0 11px; border-top: 1px solid var(--ss-w-line); flex-wrap: wrap; }\n.ss-w-ecard-scope { 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: 7px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }\n.ss-w-ecard-scope[aria-selected=\"true\"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-ecard-scope .ss-w-ecard-crest { width: 14px; height: 14px; }\n.ss-w-ecard-scopes + .ss-w-ecard-strip { border-top: none; }\n\n.ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }\n.ss-w-ecard-season { flex: none; 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; }\n\n/* stat strip: 1px gap over a line-colored ground paints hairlines between cells, wrap-safe */\n.ss-w-ecard-strip { display: grid; gap: 1px; background: var(--ss-w-line); border-top: 1px solid var(--ss-w-line); }\n.ss-w-ecard-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 11px; background: var(--ss-w-panel); }\n.ss-w-ecard-cval { height: 20px; display: flex; align-items: center; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n.ss-w-ecard-cval .ss-w-form { width: 42px; }\n.ss-w-ecard-clabel { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); font-weight: 600; font-variant-numeric: tabular-nums; }\n\n.ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }\n.ss-w-form span { display: block; border-radius: 2px; }\n.ss-w-form-w { background: var(--ss-w-pos); }\n.ss-w-form-d { background: var(--ss-w-faint); }\n.ss-w-form-l { background: var(--ss-w-neg); }\n\n.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; }\n.ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }\n.ss-w-cards-more:disabled { opacity: .5; cursor: default; }\n\n/* betting insights */\n.ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; }\n\n/* header, competition-hero fallback: comp on the left, live badge + kickoff + pin on the right,\n   all on one line (used when there is no fixture, and by MarketOddsCardList) */\n.ss-w-bi-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); }\n.ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n/* two-tier header: a quiet meta line (competition + kickoff + match pin) stacked above the\n   fixture, so long club names get the whole width to themselves and stop truncating (u350) */\n.ss-w-bi-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-bi-meta-left { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }\n.ss-w-bi-meta-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n.ss-w-bi-fixture-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }\n.ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }\n.ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }\n.ss-w-bi-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; align-self: flex-start; flex: none; }\n\n/* crests -- CSS background-image on a span, never <img> (matches .ss-w-ecard-crest precedent) */\n.ss-w-bi-comp-logo { width: 16px; height: 16px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n\n/* fixture atoms -- crest-flanked team pair; shared by the insight fixture line and MarketOddsCardList */\n.ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }\n.ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* shared crest-flanked team row (MarketOddsCardList); matches .ss-w-bi-fixture-line's hero weight\n   so the fixture reads the same on both card types (u350) */\n.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n\n/* row 2, two-tier: the market label owns a full-width line above the pick row (selection grows\n   left, odds + slip + pin sit right), so neither the market name nor the fixture clips (u350) */\n.ss-w-bi-action { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-bi-pick-row { display: flex; align-items: center; gap: 9px; }\n.ss-w-bi-sel { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-odds { flex: none; margin-left: auto; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }\n.ss-w-bi-odds b { font-size: 20px; font-family: ui-monospace, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.05; }\n.ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }\n.ss-w-bi-pick-row .ss-w-slip { flex: none; }\n\n/* row 3: bar-chart glyph + reasoning prose, in a subtle strip */\n.ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }\n.ss-w-bi-chart { flex: none; width: 13px; height: 12px; margin-top: 2px; opacity: .55;\n  background:\n    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) left / 3px 55% no-repeat,\n    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) center / 3px 100% no-repeat,\n    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) right / 3px 75% no-repeat;\n  background-position: left bottom, center bottom, right bottom;\n}\n.ss-w-bi-text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }\n.ss-w-bi-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n\n/* NBA insight cards (u555 B5). No bookmaker, pin, live block or odds history: prices and stats only. */\n.ss-w-nba-cards { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-nba-card{border:1px solid var(--ss-w-line);border-radius:16px;background:var(--ss-w-panel);padding:14px;display:flex;flex-direction:column;gap:12px}\n.ss-w-nba-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }\n.ss-w-nba-head-l { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }\n.ss-w-nba-meta { margin: 0; font-size: 11px; color: var(--ss-w-faint); line-height: 1.3; }\n.ss-w-nba-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-nba-chip{font-size:11px;font-weight:600;white-space:nowrap;border-radius:999px;padding:3px 8px;border:1px solid var(--ss-w-line)}\n.ss-w-nba-chip { flex: none; color: var(--ss-w-warn); border-color: var(--ss-w-warn); }\n.ss-w-nba-split,.ss-w-nba-ladder{display:grid;align-items:center;gap:6px;font-size:13px;font-variant-numeric:tabular-nums}\n.ss-w-nba-split{grid-template-columns:minmax(0,1fr) 56px 46px 40px auto}\n.ss-w-nba-ladder{grid-template-columns:52px minmax(0,1fr) 34px 34px 74px}\n.ss-w-nba-row { display: contents; }\n.ss-w-nba-hd{font-size:10.5px;font-weight:600;color:var(--ss-w-faint);white-space:nowrap}\n.ss-w-nba-split .ss-w-nba-n,.ss-w-nba-ladder .ss-w-nba-n{text-align:right}\n.ss-w-nba-n { font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-nba-who { min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-nba-at { font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-nba-meter { height: 6px; border-radius: 3px; background: var(--ss-w-bubble); overflow: hidden; }\n.ss-w-nba-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--ss-w-accent); }\n.ss-w-nba-pcell { display: flex; justify-content: flex-end; min-width: 0; }\n.ss-w-nba-price{font-size:11.5px;font-weight:600;border:1px solid var(--ss-w-line);border-radius:9px;padding:5px 8px;white-space:nowrap}\n.ss-w-nba-price { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-nba-price-lab { color: var(--ss-w-faint); font-weight: 600; }\n.ss-w-nba-pcell .ss-w-slip { flex: none; }\n.ss-w-nba-pcell .ss-w-slip-btn.ss-w-slip-btn--price { width: auto; flex-direction: row; align-items: baseline; gap: 5px; padding: 5px 8px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }\n.ss-w-nba-pcell .ss-w-slip-btn--price .ss-w-mol-lab, .ss-w-nba-pcell .ss-w-slip-btn--price .ss-w-mol-tick { font-size: 11.5px; }\n.ss-w-nba-games { display: flex; gap: 4px; }\n.ss-w-nba-game { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }\n.ss-w-nba-gv { font-size: 11.5px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-nba-track { position: relative; width: 100%; height: 56px; }\n.ss-w-nba-bar { position: absolute; bottom: 0; left: 22%; right: 22%; box-sizing: border-box; border: 1.5px solid var(--ss-w-accent); border-radius: 3px 3px 0 0; background: transparent; }\n.ss-w-nba-bar[data-hit] { background: var(--ss-w-accent); }\n.ss-w-nba-mark { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--ss-w-faint); }\n.ss-w-nba-gd { font-size: 10px; color: var(--ss-w-faint); white-space: nowrap; }\n.ss-w-nba-figs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }\n.ss-w-nba-fig { display: flex; flex-direction: column; gap: 1px; }\n.ss-w-nba-fig b { font-size: 16px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-nba-figl { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-nba-figs .ss-w-nba-pcell { margin-left: auto; }\n.ss-w-nba-mates { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); }\n.ss-w-nba-note { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ss-w-faint); }\n.ss-w-nba-stat { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-nba-stathd { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-nba-stathd b { font-size: 13px; color: var(--ss-w-ink); }\n.ss-w-nba-move{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;font-size:12px;line-height:1.4}\n.ss-w-nba-move { color: var(--ss-w-ink); }\n.ss-w-nba-dot { width: 8px; height: 8px; margin-top: 4px; box-sizing: border-box; border: 2px solid var(--ss-w-warn); border-radius: 50%; }\n.ss-w-nba-sq { width: 7px; height: 7px; margin-top: 5px; border-radius: 1.5px; background: var(--ss-w-ink); }\n.ss-w-nba-legs { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-nba-leg { display: grid; grid-template-columns: minmax(0,1fr) auto 34px auto; align-items: center; gap: 8px; font-size: 13px; }\n.ss-w-nba-legstat { color: var(--ss-w-faint); font-size: 12px; white-space: nowrap; }\n.ss-w-nba-leg .ss-w-nba-n { text-align: right; }\n.ss-w-nba-joint{display:grid;grid-template-columns:62px repeat(7,minmax(0,1fr));gap:4px;font-size:12px;font-variant-numeric:tabular-nums}\n.ss-w-nba-jl { min-width: 0; font-size: 11px; font-weight: 600; color: var(--ss-w-faint); overflow-wrap: anywhere; line-height: 1.25; }\n.ss-w-nba-jc { text-align: center; color: var(--ss-w-faint); }\n.ss-w-nba-jc[data-hit] { color: var(--ss-w-ink); font-weight: 700; }\n.ss-w-nba-joint .ss-w-nba-hd { font-size: 10px; }\n.ss-w-nba-tick { color: var(--ss-w-accent); font-weight: 700; }\n.ss-w-nba-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-nba-legkey { display: inline-flex; align-items: center; gap: 5px; }\n.ss-w-nba-swatch { width: 12px; height: 2px; border-radius: 1px; }\n.ss-w-nba-swatch--spread { background: var(--ss-w-accent); }\n.ss-w-nba-swatch--total { background: var(--ss-w-ink); }\n.ss-w-nba-svg { display: block; width: 100%; height: auto; overflow: visible; }\n.ss-w-nba-lane path { fill: none; stroke-width: 2; stroke-linejoin: round; }\n.ss-w-nba-lane--spread path { stroke: var(--ss-w-accent); }\n.ss-w-nba-lane--spread circle { fill: var(--ss-w-accent); }\n.ss-w-nba-lane--total path { stroke: var(--ss-w-ink); }\n.ss-w-nba-lane--total circle { fill: var(--ss-w-ink); }\n.ss-w-nba-axis { font-size: 9.5px; fill: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-nba-inj { stroke: var(--ss-w-warn); stroke-width: 1; stroke-dasharray: 3 3; }\n.ss-w-nba-evs { display: flex; flex-direction: column; }\n.ss-w-nba-ev{display:grid;grid-template-columns:44px 14px minmax(0,1fr);gap:8px;align-items:start;padding:6px 0;font-size:12.5px;line-height:1.35}\n.ss-w-nba-ev { color: var(--ss-w-ink); }\n.ss-w-nba-ev + .ss-w-nba-ev { border-top: 1px solid var(--ss-w-line); }\n.ss-w-nba-evt { font-size: 11.5px; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ss-w-nba-nowrow { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; font-size: 13px; }\n.ss-w-nba-foot{font-size:11px;color:var(--ss-w-faint);line-height:1.4;border-top:1px solid var(--ss-w-line);padding-top:10px}\n.ss-w-nba-card .ss-w-combo-addall { align-self: stretch; }\n/* matchup, quarter ladder and settle recap (u564 lane B): the same card, ladder grid and figures as above. */\n.ss-w-nba-ladder--q{grid-template-columns:70px minmax(0,1fr) 62px 74px}\n.ss-w-nba-mu,.ss-w-nba-sr{display:grid;align-items:start;gap:8px 6px;font-size:13px;font-variant-numeric:tabular-nums}\n.ss-w-nba-mu{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}\n.ss-w-nba-mu .ss-w-nba-hd{white-space:normal}\n.ss-w-nba-mu-team { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; color: var(--ss-w-ink); }\n.ss-w-nba-mu-v { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n.ss-w-nba-mu-v b { font-size: 15px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-nba-mu-v span, .ss-w-nba-mu-rest { font-size: 10.5px; line-height: 1.3; color: var(--ss-w-faint); }\n.ss-w-nba-mu-rest { overflow-wrap: anywhere; }\n.ss-w-nba-b2b { white-space: nowrap; }\n.ss-w-nba-mu-pos { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }\n.ss-w-nba-small { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1.3; color: var(--ss-w-warn); border: 1px solid var(--ss-w-warn); border-radius: 999px; padding: 0 6px; white-space: nowrap; }\n.ss-w-nba-mu-pos .ss-w-nba-small { margin-left: 6px; }\n.ss-w-nba-sr-player { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-nba-sr{grid-template-columns:minmax(0,1fr) 44px 44px 54px;align-items:center}\n.ss-w-nba-sr-line { display: contents; }\n.ss-w-nba-sr .ss-w-nba-n { text-align: right; }\n.ss-w-nba-res { justify-self: end; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }\n.ss-w-nba-res[data-result=\"push\"], .ss-w-nba-res[data-result=\"void\"] { color: var(--ss-w-faint); }\n.ss-w-nba-more, .ss-w-nba-sr-sum { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ss-w-faint); }\n.ss-w-nba-sr-sum { font-weight: 600; color: var(--ss-w-ink); }\n\n/* market odds card */\n.ss-w-mocards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-mocard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n/* Embedded inside the market accordion, which already provides the card frame + accent rail --\n   drop the inner frame so odds rows aren't double-bordered. */\n.ss-w-mocard--bare { border: none; border-radius: 0; padding: 0; background: none; }\n.ss-w-mo-sub { display: flex; flex-direction: column; gap: 5px; min-width: 0; }\n.ss-w-mo-teams { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-tag { flex: none; font-size: 10.5px; font-weight: 700; line-height: 1.4; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }\n.ss-w-mo-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }\n.ss-w-mo-more:hover { text-decoration: underline; }\n.ss-w-mo-more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }\n.ss-w-mo-more-chev-up { transform: translateY(1px) rotate(-135deg); }\n.ss-w-mo-rows { display: flex; flex-direction: column; gap: 4px; }\n/* Stage 4: live card score+minute in header (R18). */\n.ss-w-bi-score { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); white-space: nowrap; }\n.ss-w-bi-min { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; }\n/* D12: closed state message row; D13: stale-price notice. */\n.ss-w-mo-closed { padding: 6px 0; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-mo-stale { margin: 0; font-size: 11px; color: var(--ss-w-faint); }\n/* The card's stat, in the Live tab accordion's insight style. No row below it is marked (R17). */\n.ss-w-mo-stat { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }\n.ss-w-mo-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--ss-w-line); }\n.ss-w-mo-row:last-child { border-bottom: none; }\n.ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); flex: 1; min-width: 0; }\n.ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }\n/* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a\n   shortening price as a discount, which inverts what it actually means for the bettor. */\n.ss-w-move { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }\n.ss-w-move-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }\n.ss-w-move-arrow { font-size: 9px; line-height: 1; }\n/* margin-left:auto is row layout, not badge styling -- it belongs to the market-odds row, which is\n   a flex row, and must NOT follow the badge into the insight card's odds column. */\n.ss-w-mo-row .ss-w-move { margin-left: auto; }\n.ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }\n.ss-w-mo-row .ss-w-slip { margin: 0; flex: none; }\n.ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-allmk-wrap { position: relative; display: inline-flex; flex: none; margin-left: auto; }\n.ss-w-allmk-wrap--chip { margin-left: 0; }\n.ss-w-allmk { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; background: none; border: 0; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); white-space: nowrap; cursor: pointer; }\n.ss-w-allmk svg { width: 13px; height: 13px; flex: none; }\n.ss-w-allmk:hover { text-decoration: underline; }\n.ss-w-allmk--chip { margin-left: 0; gap: 3px; height: 22px; padding: 0 6px; border: 1px solid var(--ss-w-line); border-radius: 11px; font-size: 11px; font-variant-numeric: tabular-nums; }\n.ss-w-allmk--chip:hover { text-decoration: none; border-color: var(--ss-w-accent); }\n\n/* combo card (onboarding presets, spec C5): legs in kickoff order, then the server's\n   multiplication line. Same card family as .ss-w-mocard / .ss-w-binsight. */\n.ss-w-combos { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-combo { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 4px 11px 10px; display: flex; flex-direction: column; gap: 8px; }\n.ss-w-combo-legs { list-style: none; display: flex; flex-direction: column; }\n.ss-w-combo-leg { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-bottom: 1px dashed var(--ss-w-line); }\n.ss-w-combo-leg:last-child { border-bottom: none; padding-bottom: 2px; }\n.ss-w-combo-leg-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-combo-leg-pick { display: flex; align-items: center; gap: 9px; min-width: 0; }\n.ss-w-combo-leg-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }\n.ss-w-combo-leg-market { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-combo-leg-sel { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-combo-leg-price { flex: none; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; line-height: 1.05; color: var(--ss-w-accent); }\n.ss-w-combo-leg-pick .ss-w-slip { flex: none; }\n.ss-w-combo-leg-stat { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 9px; }\n.ss-w-combo-math { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ss-w-ink); text-align: right; background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }\n.ss-w-combo-note { font-size: 11px; line-height: 1.4; color: var(--ss-w-faint); }\n.ss-w-combo-change { align-self: flex-start; min-height: 36px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 650; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; cursor: pointer; }\n.ss-w-combo-addall { flex-direction: column; align-items: stretch; gap: 6px; }\n.ss-w-combo-addall .ss-w-slip-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; font-weight: 650; border-radius: 22px; white-space: normal; }\n.ss-w-combo-addall .ss-w-toast { position: static; width: auto; max-width: none; font-size: 12px; box-shadow: none; }\n\n/* onboarding presets stage 2: the two tools (spec Stage 2 Behaviour, boards 1c and 2c). A sheet\n   over the message list, inside .ss-w-chat-layer; the body scrolls and the builder's Send sits in\n   the footer, so it stays visible on a phone. Colours come from the theme tokens. */\n.ss-w-tool-backdrop { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(0,0,0,.35); }\n.ss-w-tool { display: flex; flex-direction: column; min-height: 0; max-height: 100%; background: var(--ss-w-panel); color: var(--ss-w-ink); border-top: 1px solid var(--ss-w-line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.18); outline: none; }\n.ss-w-tool-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }\n.ss-w-tool-title { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.3; }\n.ss-w-tool-close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 16px; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: none; border-radius: 50%; cursor: pointer; }\n.ss-w-tool-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; }\n.ss-w-tool-body > * { flex: none; }\n.ss-w-tool-foot { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-tool-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; }\n.ss-w-tool-ask { font-size: 14px; font-weight: 650; line-height: 1.7; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-tool-num { position: relative; display: inline-block; vertical-align: middle; margin: 0 2px; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ss-w-accent); }\n.ss-w-tool-num-size { display: block; font-size: max(16px, 1em); user-select: none; -webkit-user-select: none; visibility: hidden; box-sizing: border-box; min-width: 44px; min-height: 32px; padding: 6px 26px 6px 10px; line-height: 1.3; white-space: pre; }\n.ss-w-tool-num-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 22px 0 10px; font: inherit; font-size: max(16px, 1em); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ss-w-accent); background-color: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); border: 1.5px solid color-mix(in srgb, var(--ss-w-accent) 65%, var(--ss-w-line)); border-radius: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; }\n.ss-w-tool-num::after { content: \"\"; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; }\n.ss-w-tool-num-select:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-tool-num-select option { font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-panel); }\n.ss-w-tool-num-select option:disabled { color: var(--ss-w-faint); }\n.ss-w-tool-picks { list-style: none; display: flex; flex-direction: column; gap: 4px; }\n.ss-w-tool-pick { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 5px 8px; font-size: 12px; line-height: 1.35; background: var(--ss-w-bubble); border-radius: 8px; }\n.ss-w-tool-pick-match { grid-column: 1; font-weight: 650; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-tool-pick-sel { grid-column: 1; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-tool-pick-kick { grid-column: 1; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-tool-pick-price { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; color: var(--ss-w-accent); }\n.ss-w-tool-math { padding: 6px 8px; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; text-align: right; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; overflow-wrap: anywhere; }\n.ss-w-tool-unavailable { padding: 6px 8px; font-size: 12px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 8px; }\n.ss-w-tool-row--ask { flex-direction: row; align-items: center; gap: 10px; border-left-width: 1px; }\n.ss-w-tool-icon { flex: none; font-size: 20px; line-height: 1; }\n.ss-w-tool-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }\n.ss-w-tool-ready { padding: 2px 8px; font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, transparent); border-radius: 10px; }\n.ss-w-tool-go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 50%; cursor: pointer; }\n.ss-w-tool-go:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }\n.ss-w-tool-go:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-tool-send { align-self: flex-end; min-height: 40px; padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--ss-w-accent); border: none; border-radius: 20px; cursor: pointer; }\n.ss-w-tool-send:disabled { color: var(--ss-w-faint); background: var(--ss-w-bubble); cursor: not-allowed; }\n.ss-w-tool-foot .ss-w-tool-send { width: 100%; }\n.ss-w-tool-section { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-tool-label { font-size: 11.5px; font-weight: 650; color: var(--ss-w-faint); }\n.ss-w-tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-tool-chip { min-width: 52px; min-height: 36px; padding: 6px 10px; font: inherit; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ss-w-ink); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 18px; cursor: pointer; }\n.ss-w-tool-chip[aria-pressed=\"true\"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n.ss-w-tool-stepper { display: inline-flex; align-items: center; gap: 10px; }\n.ss-w-tool-step { width: 40px; height: 40px; display: grid; place-items: center; font: inherit; font-size: 18px; font-weight: 700; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 50%; cursor: pointer; }\n.ss-w-tool-step:disabled { opacity: .5; cursor: not-allowed; }\n.ss-w-tool-count { min-width: 24px; text-align: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }\n\n/* onboarding presets stage 2: the chat layer and the speed dial (spec Stage 2 Behaviour). The\n   layer is the message list's positioned box (P6), so the dial sits against the list's bottom\n   right and rises with the composer: right 8px puts the 44px button's centre on Send's (12px\n   padding + 18px), bottom 10px is above the composer's top border. While the button shows the list\n   gets 54px more bottom padding so its last message can scroll clear. */\n.ss-w-chat-layer { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n.ss-w-chat-layer[data-dial] .ss-w-list { padding-bottom: 68px; }\n.ss-w-dial { position: absolute; left: 12px; right: 8px; bottom: 10px; z-index: 2; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; pointer-events: none; }\n.ss-w-dial-btn, .ss-w-dial-pill { pointer-events: auto; }\n.ss-w-dial-btn { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; font-size: 20px; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; }\n.ss-w-dial-btn[aria-expanded=\"true\"] { color: var(--ss-w-panel); background: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n.ss-w-dial-btn:focus-visible, .ss-w-dial-pill:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-dial-icon { grid-area: 1 / 1; display: grid; place-items: center; transition: transform 200ms ease, opacity 200ms ease; }\n.ss-w-dial-icon--close { opacity: 0; transform: rotate(-90deg); }\n.ss-w-dial-btn[aria-expanded=\"true\"] .ss-w-dial-icon--open { opacity: 0; transform: rotate(90deg); }\n.ss-w-dial-btn[aria-expanded=\"true\"] .ss-w-dial-icon--close { opacity: 1; transform: none; }\n.ss-w-dial-dot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; background: var(--ss-w-accent); border: 2px solid var(--ss-w-panel); border-radius: 50%; }\n.ss-w-dial-pills { max-width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }\n.ss-w-dial-pill { max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.25; text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--ss-w-ink); background: var(--ss-w-panel); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 35%, var(--ss-w-line)); border-radius: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.16); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.5); transform-origin: bottom right; transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; }\n.ss-w-dial-pill svg { flex: none; font-size: 18px; color: var(--ss-w-accent); }\n.ss-w-dial-pill-label { min-width: 0; }\n.ss-w-dial-pills[data-open] .ss-w-dial-pill { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 200ms ease, visibility 0s; }\n@media (prefers-reduced-motion: reduce) {\n  .ss-w-dial-pill { transform: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }\n  .ss-w-dial-pills[data-open] .ss-w-dial-pill { transition: opacity 200ms ease, visibility 0s; }\n  .ss-w-dial-icon { transition: opacity 200ms ease; }\n  .ss-w-dial-icon--close, .ss-w-dial-btn[aria-expanded=\"true\"] .ss-w-dial-icon--open { transform: none; }\n}\n\n/* Compact price list (D16): three or more cards of one turn, one row per fixture. Team names wrap\n   to a second line and are never cut; the time sits above the match pin, with no column of its own. */\n.ss-w-mol { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-mol-head, .ss-w-mol-row { display: grid; grid-template-columns: minmax(0, 1fr) 126px 46px; align-items: center; gap: 4px; }\n.ss-w-mol-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow-wrap: anywhere; }\n.ss-w-mol-cols, .ss-w-mol-cells { display: grid; gap: 4px; }\n.ss-w-mol-col { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); text-align: center; overflow-wrap: break-word; min-width: 0; }\n.ss-w-mol-comp { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding-top: 4px; }\n.ss-w-mol-row { padding: 6px 0; border-bottom: 1px dashed var(--ss-w-line); min-height: 48px; box-sizing: border-box; }\n.ss-w-mol-row:focus { outline: none; }\n.ss-w-mol-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; border-radius: 6px; }\n.ss-w-mol-tick { font-family: inherit; font-size: 9.5px; font-weight: 700; line-height: 1.1; }\n.ss-w-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\n.ss-w-mol-group .ss-w-mol-row:last-child { border-bottom: none; }\n.ss-w-mol-fx { display: flex; flex-direction: column; gap: 3px; min-width: 0; background: none; border: none; padding: 0; text-align: left; font: inherit; color: inherit; }\n.ss-w-mol-team { display: flex; align-items: center; gap: 5px; min-width: 0; }\n.ss-w-mol-team > * { flex: none; }\n.ss-w-mol-team > .ss-w-mol-nm { flex: 1 1 auto; }\n.ss-w-mol-nm { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); overflow-wrap: break-word; hyphens: manual; line-height: 1.2; min-width: 0; }\n.ss-w-mol-mkt { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-mol-cells { align-items: start; }\n.ss-w-mol-cell { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }\n.ss-w-mol-cell > .ss-w-mol-price { flex: none; }\n.ss-w-mol-cell .ss-w-move { justify-content: center; gap: 2px; }\n.ss-w-mol-cell .ss-w-move-prev { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 10px; }\n/* A 39 px cell fits four characters at 13 px: five step down to 11.5 px and six to 10.5 px. */\n.ss-w-mol-cell--wide .ss-w-mol-price, .ss-w-mol-cell--wide .ss-w-slip-btn.ss-w-slip-btn--price { font-size: 11.5px; }\n.ss-w-mol-cell--wider .ss-w-mol-price, .ss-w-mol-cell--wider .ss-w-slip-btn.ss-w-slip-btn--price { font-size: 10.5px; }\n.ss-w-mol-cell .ss-w-slip { margin: 0; flex: none; min-width: 0; }\n.ss-w-mol-price, .ss-w-slip-btn--price { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 0; border-radius: 8px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); font-family: inherit; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ss-w-accent); }\n.ss-w-slip-btn.ss-w-slip-btn--price { width: 100%; cursor: pointer; background: var(--ss-w-panel); color: var(--ss-w-accent); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 5px 0; font-size: 13px; font-weight: 700; box-shadow: none; }\n.ss-w-slip-btn--price:hover:not(:disabled) { border-color: var(--ss-w-accent); }\n.ss-w-slip-btn--price[data-settled] { color: var(--ss-w-faint); }\n.ss-w-mol-lab { font-family: inherit; font-size: 9.5px; font-weight: 600; color: var(--ss-w-faint); line-height: 1.1; text-align: center; overflow-wrap: anywhere; }\n.ss-w-mol-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n.ss-w-mol-when { font-size: 9.5px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.15; }\n.ss-w-mol-side--live .ss-w-mol-when { color: var(--ss-w-neg); }\n\n/* odds movement card */\n.ss-w-omcards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-omcard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-om-head { display: flex; align-items: center; gap: 8px; }\n.ss-w-om-market { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-om-tag { margin-left: auto; flex: none; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 2px 7px; }\n.ss-w-om-fixture { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-om-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-om-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }\n.ss-w-om-chart { display: block; width: 100%; height: auto; }\n/* Single neutral accent in BOTH directions, deliberately. Colouring a shortening price green\n   frames it as a discount, which inverts what it means for the bettor -- the same reason\n   .ss-w-move keeps both directions on --ss-w-faint. */\n.ss-w-om-line { stroke: var(--ss-w-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }\n.ss-w-om-dot { fill: var(--ss-w-accent); }\n.ss-w-om-grid { stroke: var(--ss-w-line); stroke-width: 1; }\n.ss-w-om-ylab, .ss-w-om-xlab { fill: var(--ss-w-faint); font-size: 9px; font-family: ui-monospace, monospace; }\n.ss-w-om-empty { font-size: 11.5px; color: var(--ss-w-faint); padding: 6px 0; }\n.ss-w-om-foot { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-om-foot b { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ss-w-ink); }\n.ss-w-om-excl { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-om-susp { font-size: 11px; font-weight: 600; color: #c0392b; }\n.ss-w-om-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n\n/* action buttons */\n.ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }\n/* text-align is explicit because a <button> defaults to center, and a follow-up question long\n   enough to wrap then sets its second line ragged on both sides. */\n.ss-w-abtn { font-size: 12px; font-weight: 560; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; padding: 6px 12px; cursor: pointer; text-align: left; }\n.ss-w-abtn:disabled { opacity: .5; cursor: default; }\n.ss-w-abtn-shimmer { width: 140px; height: 30px; border-radius: 16px; background: linear-gradient(90deg, var(--ss-w-bubble), var(--ss-w-line), var(--ss-w-bubble)); background-size: 200% 100%; animation: ss-w-shimmer 1.2s infinite; }\n@keyframes ss-w-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n\n/* intent chips */\n.ss-w-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-chip { font-size: 11.5px; font-weight: 550; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 5px 11px; cursor: pointer; }\n\n/* input */\n.ss-w-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-limit { padding: 10px 12px; border-top: 1px solid var(--ss-w-line); font-size: 13px; line-height: 1.4; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-limit:empty { padding: 0; border-top: 0; }\n.ss-w-limit:focus { outline: none; }\n.ss-w-limit:not(:empty) + .ss-w-input { border-top: none; }\n.ss-w-textarea { flex: 1; resize: none; border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 10px; font: inherit; color: inherit; background: var(--ss-w-panel); max-height: 96px; }\n.ss-w-textarea:disabled { opacity: .55; cursor: not-allowed; }\n/* iOS Safari zooms the page when a focused field's font-size is < 16px. Bump it\n   on touch devices only, so the desktop 13px design is unchanged. */\n@media (pointer: coarse) {\n  .ss-w-textarea { font-size: 16px; }\n}\n.ss-w-send { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: var(--ss-w-accent); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; }\n.ss-w-send:disabled { opacity: .45; cursor: not-allowed; }\n.ss-w-stop-glyph { width: 11px; height: 11px; background: currentColor; border-radius: 2px; }\n\n/* add to slip */\n.ss-w-slip { position: relative; display: flex; }\n.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }\n.ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }\n/* Anchored to the RIGHT of its (narrow) button wrapper and sized by content, growing leftward\n   into the card -- inheriting the wrapper's width squeezes the text to one character per line.\n   Every toast site (slip buttons, pin toggles) sits at the right edge of its row. */\n.ss-w-toast { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1; width: max-content; max-width: 210px; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-toast-success { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }\n.ss-w-toast-error { color: #c0392b; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }\n\n/* pin affordance */\n.ss-w-pin-wrap { position: relative; display: inline-flex; flex: none; }\n.ss-w-pin { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pin svg { width: 12px; height: 12px; }\n.ss-w-pin:hover { color: var(--ss-w-ink); border-color: var(--ss-w-faint); }\n.ss-w-pin[data-on] { background: var(--ss-w-accent); border-color: var(--ss-w-accent); color: #fff; }\n.ss-w-pin[data-on]:hover { background: var(--ss-w-accent); color: #fff; }\n.ss-w-hist { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-hist svg { width: 12px; height: 12px; }\n.ss-w-hist:hover { color: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n\n@media (prefers-reduced-motion: reduce) {\n  .ss-w-abtn-shimmer { animation: none; }\n}\n\n/* greeting dashboard */\n.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }\n.ss-w-dash-head { display: flex; flex-direction: column; }\n.ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }\n.ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }\n.ss-w-dash-foot { font-size: 11px; color: var(--ss-w-faint); margin-top: 2px; }\n\n.ss-w-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-dash-tile--half { grid-column: span 1; }\n.ss-w-dash-tile--full { grid-column: 1 / -1; }\n\n.ss-w-dash-tile {\n  display: flex; align-items: center; gap: 10px;\n  padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n  background: var(--ss-w-panel); text-align: left; cursor: pointer; width: 100%;\n  color: inherit; font: inherit;\n  min-width: 0;                      /* the panel is min(400px, 100vw - 40px): without this,\n                                        a long Turkish title blows the column out */\n}\n.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }\n.ss-w-dash-emoji { line-height: 1; }\n.ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }\n.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }\n.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }\n\n/* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A\n   nowrap badge (~70px) sitting beside icon+chevron in a ~180px half-span tile left the\n   title column at ~22px wide, wrapping every title character-by-character. Here the row\n   gets the body's full width, so a badge this size is comfortably inside it. */\n.ss-w-dash-tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }\n.ss-w-dash-tile-badge { flex: none; 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; }\n\n.ss-w-dash-tile-crests { flex: none; display: flex; align-items: center; }\n.ss-w-dash-tile-crest {\n  width: 18px; height: 18px; border-radius: 50%;\n  background-size: cover; background-position: center; background-color: var(--ss-w-bubble);\n  margin-left: -6px; border: 2px solid var(--ss-w-panel);    /* overlapping stack, capped at 3 in DashboardTile */\n}\n.ss-w-dash-tile-crest:first-child { margin-left: 0; }\n\n/* Market: default 2-column grid, tiles get the same accent rail as the other card\n   families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as\n   part of that visual language rather than a plain unstyled button. */\n.ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }\n\n/* Goal: one column of compact cards, 60px tall with the badge as a price column on the right.\n   The value ink is accent mixed toward ink (as on the hero price): plain light accent on the\n   panel is 3.9:1, under the 4.5:1 small text needs. */\n.ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }\n.ss-w-dash--goal .ss-w-dash-tile { gap: 12px; min-height: 60px; padding: 8px 12px 8px 14px; border-radius: 8px; }\n.ss-w-dash--goal .ss-w-dash-tile:hover { background: var(--ss-w-bubble); }\n.ss-w-dash--goal .ss-w-dash-tile-icon { width: 24px; height: 24px; font-size: 20px; }\n.ss-w-dash--goal .ss-w-dash-tile-body { gap: 1px; }\n.ss-w-dash--goal .ss-w-dash-tile-title { font-size: 15px; line-height: 1.25; }\n.ss-w-dash--goal .ss-w-dash-tile-subtitle { font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }\n.ss-w-dash-tile-value {\n  flex: none; margin-left: auto; max-width: 40%; text-align: right;\n  font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;\n  color: color-mix(in srgb, var(--ss-w-accent) 70%, var(--ss-w-ink));\n}\n\n/* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets\n   the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow\n   column was wrapping \"Most interesting angles\" onto three lines. The chevron is dropped (the\n   whole card is the tap target) and the badge + crest row is forced onto one line. */\n.ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }\n.ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }\n.ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }\n/* The full-span trends tile has the whole panel width, so its icon and title sit on one row\n   (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */\n.ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }\n.ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }\n.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }\n.ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }\n/* Tints mix a hue into the live panel rather than hardcoding a light pastel, so a dark\n   operator surface (e.g. --ss-w-panel set from a navy `surface` brand color) yields a\n   readable tinted-dark card instead of near-white ink on a fixed light pastel. */\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1) { background: color-mix(in srgb, #34c759 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }\n/* A hero tile would take the first tint position; count only regular tiles where `of S` parses. */\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #34c759 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #3a82f6 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #f5a623 10%, var(--ss-w-panel)); }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4 of :not(.ss-w-dash-hero)) { background: color-mix(in srgb, #a855f7 10%, var(--ss-w-panel)); }\n\n/* Hero: the personalized lead tile. Declared after the layout rules and at three-class\n   specificity so it keeps one look in every layout -- no market rail, no goal pill, no\n   discovery tint or stacking. Colours derive from accent/panel/ink so an operator surface\n   and dark mode both work without their own rules. */\n.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero {\n  display: flex; flex-direction: column; align-items: stretch; gap: 10px;\n  padding: 12px 14px 14px; border-radius: 16px;\n  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 38%, var(--ss-w-line));\n  background:\n    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ss-w-accent) 18%, transparent) 0%, transparent 60%),\n    var(--ss-w-panel);\n  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ss-w-accent) 80%, transparent);\n}\n.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:hover { border-color: var(--ss-w-accent); }\n.ss-w-dash .ss-w-dash-grid .ss-w-dash-hero:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-dash-hero-top { display: flex; align-items: center; gap: 8px; min-height: 20px; }\n.ss-w-dash-hero-badge {\n  font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;\n  color: var(--ss-w-panel); background: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); border-radius: 999px; padding: 3px 10px;\n  white-space: nowrap;\n}\n.ss-w-dash-hero-chevron { flex: none; width: 14px; height: 14px; color: var(--ss-w-faint); }\n.ss-w-dash-hero-badge { margin-right: auto; }\n.ss-w-dash-hero-chevron:only-child { margin-left: auto; }\n.ss-w-dash-hero-main { display: flex; align-items: center; gap: 12px; min-width: 0; }\n.ss-w-dash-hero-visual { flex: none; display: flex; align-items: center; }\n.ss-w-dash-hero-crest {\n  width: 40px; height: 40px; border-radius: 50%;\n  background-color: color-mix(in srgb, var(--ss-w-ink) 4%, var(--ss-w-panel));\n  background-size: 72%; background-position: center; background-repeat: no-repeat;\n  box-shadow: 0 0 0 2px var(--ss-w-panel), 0 0 0 3px color-mix(in srgb, var(--ss-w-ink) 10%, var(--ss-w-panel));\n}\n.ss-w-dash-hero-crest + .ss-w-dash-hero-crest { margin-left: -8px; }\n.ss-w-dash-hero-icon {\n  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 22px;\n  background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel));\n}\n.ss-w-dash-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }\n.ss-w-dash-hero-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); overflow-wrap: anywhere; }\n.ss-w-dash-hero-subtitle { font-size: 12px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-dash-hero-price {\n  flex: none; margin-left: auto;\n  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 750; line-height: 1;\n  color: color-mix(in srgb, var(--ss-w-accent) 45%, var(--ss-w-ink)); padding: 5px 9px; border-radius: 8px;\n  background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel));\n  border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-panel));\n}\n\n/* club fan pre-match dashboard */\n.ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }\n.ss-w-fandash-greeting { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); }\n.ss-w-fandash-greeting--lead { font-weight: 400; }\n.ss-w-fandash-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Shared card chrome -- a plain <div> for [data] cards, a <button> for [prefill] cards. Both\n   share the same box so the two families read as one system, not two ad hoc layouts. */\n.ss-w-fandash-card {\n  display: flex; flex-direction: column; gap: 8px;\n  padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n  background: var(--ss-w-panel); text-align: left;\n  color: inherit; font: inherit; width: 100%; min-width: 0;\n}\n.ss-w-fandash-card--tap { cursor: pointer; border-left: 3px solid var(--ss-w-accent); }\n.ss-w-fandash-card--tap:hover { background: var(--ss-w-bubble); }\n.ss-w-fandash-card-cta { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); }\n\n/* Shared alignment primitives: a small letterspaced section eyebrow, and a 3-column value/label\n   split reused by the fixture head-to-head (and any future stat-row card). */\n.ss-w-fandash-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }\n.ss-w-fandash-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-split-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }\n.ss-w-fandash-split-value { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); line-height: 1; }\n.ss-w-fandash-split-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* fixture card */\n.ss-w-fandash-fixture-teams { display: flex; align-items: center; gap: 10px; }\n.ss-w-fandash-fixture-team { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }\n.ss-w-fandash-fixture-team--away { justify-content: flex-end; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest { width: 30px; height: 30px; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest-mono { font-size: 12px; }\n.ss-w-fandash-fixture-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }\n.ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n/* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */\n.ss-w-fandash-fixture-meta { border-top: 1px solid var(--ss-w-line); padding-top: 10px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-fixture-kickoff { font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-fixture-venue { font-weight: 600; }\n.ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }\n/* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */\n.ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }\n/* extra breathing room between the tally row and the fact beyond the card's own gap */\n.ss-w-fandash-h2h .ss-w-fandash-fact { margin-top: 4px; }\n\n/* Team form: a two-column result-card grid, left = home team's last 5, right = away team's last 5,\n   most-recent first. The head row carries each column's crest + name; the rows grid is filled\n   home-cell/away-cell per index so the 2-col grid lays out pairs without extra JS bookkeeping. */\n.ss-w-fandash-teamform-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }\n.ss-w-fandash-teamform-head-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; font-weight: 750; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest-mono { font-size: 8px; }\n.ss-w-fandash-teamform-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-teamform-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; }\n.ss-w-fandash-teamform-slot { display: block; min-width: 0; }\n.ss-w-fandash-teamform-cell {\n  display: flex; align-items: center; gap: 4px; border-radius: 7px; padding: 4px 5px; color: #fff;\n}\n.ss-w-fandash-teamform-cell--win { background: var(--ss-w-pos); }\n.ss-w-fandash-teamform-cell--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-teamform-cell--draw { background: var(--ss-w-faint); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest { width: 16px; height: 16px; flex: none; background: rgba(255, 255, 255, .22); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest-mono { font-size: 7px; color: #fff; }\n.ss-w-fandash-teamform-score { flex: 1; text-align: center; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }\n.ss-w-fandash-injuries-more { margin-top: 10px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }\n.ss-w-fandash-form-pill {\n  display: inline-grid; place-items: center; width: 16px; height: 16px;\n  border-radius: 4px; font-size: 9.5px; font-weight: 700; color: #fff;\n}\n.ss-w-fandash-form-pill--win { background: var(--ss-w-pos); }\n.ss-w-fandash-form-pill--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-form-pill--draw { background: var(--ss-w-faint); }\n\n/* countdown card: a compact top card -- section eyebrow left, colon-separated clock right. Each\n   segment stacks its figure over a small unit label (d/h/m/s). The exact kickoff date is not\n   repeated here; the fixture card below carries it. */\n.ss-w-fandash-countdown-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-countdown-clock { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ss-w-accent); }\n.ss-w-fandash-countdown-seg { display: inline-flex; flex-direction: column; align-items: center; }\n.ss-w-fandash-countdown-value { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }\n.ss-w-fandash-countdown-unit { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); margin-top: 3px; }\n.ss-w-fandash-countdown-colon { font-size: 22px; font-weight: 750; line-height: 1; color: var(--ss-w-faint); }\n\n/* injuries + transfers: two-column ours/theirs, in/out */\n.ss-w-fandash-transfers-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n/* injuries: a 1px divider column sits between the two team sections, each headed by crest + name */\n.ss-w-fandash-injuries-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 12px; }\n.ss-w-fandash-injuries-divider { background: var(--ss-w-line); }\n.ss-w-fandash-injuries-col, .ss-w-fandash-transfers-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-transfers-col-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n.ss-w-fandash-injuries-col-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest-mono { font-size: 9px; }\n.ss-w-fandash-injuries-col-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-injuries-empty, .ss-w-fandash-transfers-empty { font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-list, .ss-w-fandash-transfer-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }\n.ss-w-fandash-injury-row, .ss-w-fandash-transfer-row { display: flex; flex-direction: column; gap: 1px; }\n.ss-w-fandash-injury-name, .ss-w-fandash-transfer-name { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }\n.ss-w-fandash-injury-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-status { font-weight: 700; color: var(--ss-w-neg); }\n.ss-w-fandash-transfer-club { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-transfer-type { align-self: flex-start; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 1px 7px; margin-top: 2px; }\n\n/* reason-to-bet */\n.ss-w-fandash-reason-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-reason-item { font-size: 12.5px; padding-left: 14px; position: relative; }\n.ss-w-fandash-reason-item::before { content: \"\u2022\"; position: absolute; left: 0; color: var(--ss-w-accent); font-weight: 700; }\n\n/* where-to-watch */\n.ss-w-fandash-stations { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-fandash-station-chip { font-size: 11.5px; font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 999px; padding: 4px 10px; }\n\n/* congested week: a fixed 3-column grid of upcoming fixtures (day / opponent / comp / time) */\n.ss-w-fandash-congested-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-congested-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border-radius: 10px; background: var(--ss-w-bubble); }\n.ss-w-fandash-congested-day { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n.ss-w-fandash-congested-opponent { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-congested-comp { font-size: 10px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-congested-time { font-size: 10.5px; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n\n/* links: 2-column grid of tappable tiles */\n.ss-w-fandash-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-link-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); }\n.ss-w-fandash-link-tile:hover { background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n.ss-w-fandash-link-label { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-link-chevron { flex: none; width: 12px; height: 12px; color: var(--ss-w-accent); }\n\n/* post-match result: full-time scoreboard, mirroring the live card's crest + big-score treatment.\n   A neutral \"Full time\" pill sits left of a coloured Win/Draw/Loss tag; the 3-column main row\n   (home crest+name | score | away crest+name, away reversed) puts the winner's score in full ink\n   and the loser's dimmed; a centered meta line sits under a divider. */\n.ss-w-fandash-postmatch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }\n.ss-w-fandash-postmatch-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-postmatch-tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-postmatch-tag--win { color: var(--ss-w-pos); }\n.ss-w-fandash-postmatch-tag--loss { color: var(--ss-w-neg); }\n.ss-w-fandash-postmatch-tag--draw { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-postmatch-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-postmatch-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-postmatch-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-postmatch-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }\n.ss-w-fandash-postmatch-score-value--win { color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-value--lose { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-postmatch-meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ss-w-line); font-size: 12px; color: var(--ss-w-faint); text-align: center; }\n\n/* post-match goals: a football-ball icon per goal (mirrors the live timeline ball, duplicated here\n   under the postmatch prefix), text dimmed for opponent goals and picked out in full ink + bold\n   for the club's own goals */\n.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-postmatch-goal { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-goal-ball { width: 11px; height: 11px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-postmatch-goal--club { color: var(--ss-w-ink); font-weight: 650; }\n\n/* post-match stats: home value / stat label / away value, oriented by venue (u316), each row now\n   backed by a home/away split bar -- the big upgrade from plain text -- plus a legend. Mirrors\n   LiveStatsCard's split-bar treatment under the postmatch-prefixed classes; the shared\n   --ss-w-home/--ss-w-away/--ss-w-track tokens are defined above. */\n.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-postmatch-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-postmatch-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-postmatch-stat-label { font-size: 10.5px; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-fandash-postmatch-stat-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-postmatch-stat-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-fandash-postmatch-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-postmatch-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-postmatch-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-legend-swatch--away { background: var(--ss-w-away); }\n\n/* post-match top performer (full mockup treatment): gradient initials avatar + name + a\n   prominent rating chip. Avatar gradient reuses the --ss-w-away token, same pairing as the live\n   crest fallback; \"?\" renders through the same avatar span when the name is blank. */\n.ss-w-fandash-postmatch-perf-row { display: flex; align-items: center; gap: 12px; }\n.ss-w-fandash-postmatch-perf-avatar {\n  flex: none; width: 42px; height: 42px; border-radius: 50%;\n  display: grid; place-items: center;\n  font-size: 14px; font-weight: 800; color: #fff;\n  background: linear-gradient(135deg, var(--ss-w-away), color-mix(in srgb, var(--ss-w-away) 55%, #000));\n}\n.ss-w-fandash-postmatch-perf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }\n.ss-w-fandash-postmatch-perf-rating { margin-left: auto; flex: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 11px; }\n\n/* post-match next (v1, modest): whenLabel is already a complete localized phrase (opponent +\n   venue + kickoff) composed server-side, so this card renders just that one line -- dressed up\n   with an accent rule rather than a duplicated opponent line. The richer opponent-headline/venue-\n   chip/crest layout from the mockup needs a server field split and is deferred. */\n.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--ss-w-accent); padding-left: 10px; }\n.ss-w-fandash-postmatch-next-when { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.3; }\n\n/* resting next: the between-matches fixture teaser -- when-label left, competition badge right */\n.ss-w-fandash-resting-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-next-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-resting-next-competition { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n\n/* resting standings: position figure left, W-D-L/points record right */\n.ss-w-fandash-resting-standings-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-standings-position { font-size: 15px; font-weight: 750; color: var(--ss-w-ink); }\n.ss-w-fandash-resting-standings-record { font-size: 11.5px; color: var(--ss-w-faint); text-align: right; }\n\n/* resting season: top scorer / key player / season tally as stacked rows */\n.ss-w-fandash-resting-season-rows { display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-resting-season-row { font-size: 12.5px; color: var(--ss-w-ink); }\n\n/* resting form: reuses the fixture last-five pill classes (ss-w-fandash-form / -form-pill) */\n.ss-w-fandash-resting-form .ss-w-fandash-form { margin-top: 2px; }\n\n/* live score: pulsing Live pill, crests (real image or a coloured initials fallback), a big\n   tabular score, and an optional scorers line. Also where the shared home/away venue-colour\n   tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats\n   cards reuse them. */\n.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ss-w-fandash-live-pulse 1.3s ease-in-out infinite; }\n@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }\n@media (prefers-reduced-motion: reduce) {\n  .ss-w-fandash-live-dot { animation: none; }\n}\n.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-competition { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-live-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-live-scorers-row { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-live-scorers { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-live-scorers--home { justify-content: flex-start; }\n.ss-w-fandash-live-scorers--away { justify-content: flex-end; }\n.ss-w-fandash-live-scorers--home .ss-w-fandash-live-scorers-icon { color: var(--ss-w-home); }\n.ss-w-fandash-live-scorers--away .ss-w-fandash-live-scorers-icon { color: var(--ss-w-away); }\n.ss-w-fandash-live-scorers-icon { flex: none; }\n\n/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on\n   its own side (home left, away right), most-recent 3 shown with a \"See more\" toggle for the\n   rest. A 3-column grid (txt | badge | txt) per row; the spine itself is a ::before on the list. */\n.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-live-tl::before { content: \"\"; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; background: var(--ss-w-line); transform: translateX(-1px); }\n.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }\n.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }\n.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }\n.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }\n.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }\n.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 29px; height: 19px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }\n.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }\n.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }\n.ss-w-fandash-live-tl-ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }\n.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }\n.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }\n.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }\n.ss-w-fandash-live-tl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-more { margin-top: 4px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-live-tl-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n\n/* live stats: club value / stat label / opponent value, each row backed by a home/away split\n   bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.\n   No side signal reaches this card, so the club is always the home token and the opponent is\n   always the away token -- see LiveStatsCard.tsx. */\n.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-live-stat-label { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n\n.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }\n.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }\n.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }\n.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }\n.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }\n.ss-w-fandash-live-mom-base { stroke: var(--ss-w-line); stroke-width: 1; stroke-dasharray: 3 3; }\n.ss-w-fandash-live-mom-plot { position: relative; }\n.ss-w-fandash-live-mom-now {\n  position: absolute; width: 7px; height: 7px; border-radius: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-ink);\n  pointer-events: none;\n}\n.ss-w-mon-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); text-align: center; }\n.ss-w-mon-mom .ss-w-fandash-live-mom { margin-top: 6px; padding-top: 0; border-top: none; }\n\n.ss-w-fandash-live-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-live-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-live-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-live-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-legend-swatch--away { background: var(--ss-w-away); }\n\n/* live monitor tab bar: underline pattern mirrors .ss-w-ecard-scope; the unread dot uses --ss-w-neg */\n.ss-w-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ss-w-line); overflow-x: auto; scrollbar-width: none; }\n.ss-w-tabs::-webkit-scrollbar { display: none; }\n.ss-w-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 9px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; flex: none; white-space: nowrap; }\n.ss-w-tab[data-on] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-tab-count { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 999px; padding: 1px 6px; }\n.ss-w-tab[data-on] .ss-w-tab-count { color: var(--ss-w-accent); }\n.ss-w-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n\n/* Matches tab match card (MonitorMatchCard): pill row, crest/score main row, per-stat split\n   bars (venue-oriented -- home always left/blue, away always right/red, never club-oriented,\n   the u316 bug class), a promoted-market strip for the user's pinned stat chips, and a grace\n   note once the match has gone full time. Reuses the --ss-w-home/--ss-w-away/--ss-w-track venue\n   tokens and .ss-w-fandash-live-pill for the Live pill so all live surfaces share one look. */\n.ss-w-mon { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ss-w-line); border-radius: 12px; background: var(--ss-w-panel); }\n.ss-w-mon-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-mon-pill { display: inline-flex; flex: none; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 3px 8px; }\n.ss-w-mon-min { flex: none; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-comp { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-mon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-w-mon-side--away { flex-direction: row-reverse; text-align: right; }\n/* long club names (Wolverhampton Wanderers) wrap to two lines instead of truncating mid-word */\n.ss-w-mon-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-mon-vs { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; }\n.ss-w-mon-score { display: flex; align-items: baseline; justify-content: center; font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-mon-score i { font-style: normal; color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }\n.ss-w-nbamon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-nbamon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-w-nbamon-side--home { flex-direction: row-reverse; text-align: right; }\n.ss-w-nbamon-badge { flex: none; display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 5px; border-radius: 7px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--ss-w-ink); }\n.ss-w-nbamon-team { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }\n.ss-w-nbamon-city { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-nbamon-nick { font-size: 13px; font-weight: 800; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-nbamon-ls { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center; color: var(--ss-w-ink); }\n.ss-w-nbamon-ls th, .ss-w-nbamon-ls td { padding: 3px 4px; font-weight: 500; }\n.ss-w-nbamon-ls thead th { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-nbamon-ls tbody th { text-align: left; font-weight: 800; }\n.ss-w-nbamon-ls .ss-w-nbamon-total { font-weight: 800; }\n.ss-w-nbamon-ls td.ss-w-nbamon-cur { color: var(--ss-w-neg); font-weight: 800; }\n.ss-w-nbamon-dash { color: var(--ss-w-faint); }\n.ss-w-nbamon-tos { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ss-w-faint); }\n/* Scoreboard strip: one 122px tile per followed game, scrolling sideways inside its own box so the\n   panel never gains a horizontal scroll. */\n.ss-w-strip { position: relative; flex: none; display: flex; gap: 8px; padding: 8px 12px; background: var(--ss-w-bubble); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }\n.ss-w-strip::-webkit-scrollbar { display: none; }\n.ss-w-strip-tile { flex: none; box-sizing: border-box; width: 122px; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 7px; border: 1px solid var(--ss-w-line); border-radius: 10px; background: var(--ss-w-panel); font: inherit; color: var(--ss-w-ink); text-align: left; cursor: pointer; }\n.ss-w-strip-tile[aria-pressed=\"true\"] { border-color: var(--ss-w-accent); box-shadow: inset 0 0 0 1px var(--ss-w-accent); }\n.ss-w-strip-tile:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-strip-status { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }\n.ss-w-strip-status--live { color: var(--ss-w-neg); }\n.ss-w-strip-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-strip-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); }\n.ss-w-strip-sport { flex: none; margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--ss-w-warn); }\n.ss-w-strip-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-strip-row .ss-w-bi-crest { width: 16px; height: 16px; }\n.ss-w-strip-row .ss-w-bi-crest-mono { font-size: 8px; }\n.ss-w-strip-badge { display: grid; place-items: center; min-width: 22px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 8.5px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-ink); }\n.ss-w-strip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; }\n.ss-w-strip-score { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }\n.ss-w-strip-row--muted .ss-w-strip-name, .ss-w-strip-row--muted .ss-w-strip-score { color: var(--ss-w-faint); }\n.ss-w-mon-scorers { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 10px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mon-scorers-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.ss-w-mon-scorers-col li { overflow-wrap: anywhere; }\n.ss-w-mon-scorers-home { text-align: right; }\n.ss-w-mon-scorers-away { text-align: left; }\n.ss-w-mon-scorers-ball { flex: none; align-self: start; line-height: 1.35; }\n\n/* Pinned pre-match form + head-to-head (MonitorFormH2H): collapsed by default, a real <button>\n   header toggles it. W/D/L dots and the H2H bar/legend keep fixed, theme-independent colors\n   (same convention as the dashboard tile accents above) since they're self-contained badges\n   carrying their own ink color, not page-background-dependent text. */\n.ss-w-h2h { border-left: 3px solid #16A34A; padding-left: 12px; }\n.ss-w-h2h-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 0; }\n.ss-w-h2h-head-l { display: flex; align-items: center; gap: 6px; }\n.ss-w-h2h-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--ss-w-faint); flex: none; }\n.ss-w-h2h-title { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-h2h-chevron { flex: none; color: var(--ss-w-faint); transition: transform .15s ease; }\n.ss-w-h2h-chevron--open { transform: rotate(180deg); }\n.ss-w-h2h-body { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }\n.ss-w-h2h-forms { display: flex; align-items: flex-start; justify-content: space-between; }\n.ss-w-h2h-form-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }\n.ss-w-h2h-form-col--away { align-items: flex-end; }\n.ss-w-h2h-form-team { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-h2h-dots { display: flex; gap: 4px; }\n.ss-w-h2h-result { width: 20px; height: 20px; border-radius: 999px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }\n.ss-w-h2h-result--win { background: #16A34A; color: #FFFFFF; }\n.ss-w-h2h-result--draw { background: #E5E7EB; color: #4B5563; }\n.ss-w-h2h-result--loss { background: #F5A623; color: #1F2937; }\n.ss-w-h2h-record { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-h2h-meta { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-h2h-bar { display: flex; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }\n.ss-w-h2h-bar-seg--win { background: #16A34A; }\n.ss-w-h2h-bar-seg--draw { background: #D1D5DB; }\n.ss-w-h2h-bar-seg--loss { background: #2563EB; }\n.ss-w-h2h-legend { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }\n.ss-w-h2h-legend-item { font-size: 11px; color: var(--ss-w-ink); display: flex; align-items: center; gap: 5px; }\n.ss-w-h2h-legend-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; flex: none; }\n.ss-w-h2h-legend-dot--win { background: #16A34A; }\n.ss-w-h2h-legend-dot--draw { background: #D1D5DB; }\n.ss-w-h2h-legend-dot--loss { background: #2563EB; }\n\n.ss-w-fact { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, transparent); }\n.ss-w-fact-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-w-fact-min { color: var(--ss-w-ink); letter-spacing: 0; }\n.ss-w-fact-subj { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 650; color: var(--ss-w-faint); }\n.ss-w-fact-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ss-w-ink); }\n.ss-w-fact-basis { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-fact-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 8px; }\n.ss-w-fact-foot { display: flex; align-items: center; gap: 14px; }\n.ss-w-fact-link { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); background: none; border: none; padding: 4px 0; min-height: 32px; cursor: pointer; }\n.ss-w-fact-link--muted { color: var(--ss-w-faint); margin-left: auto; }\n.ss-w-fact-hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ss-w-line); }\n.ss-w-fact-hist li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-fact-hist li:last-child { border-bottom: none; }\n.ss-w-fact-hmin { font-size: 11px; font-weight: 800; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-fact-htext { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ss-w-ink); }\n.ss-w-mon-stats { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-mon-stat { display: flex; flex-direction: column; gap: 5px; }\n.ss-w-mon-pstrip { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ss-w-accent) 8%, transparent); }\n.ss-w-mon-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-mon-stat-v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-stat-v--home { color: var(--ss-w-home); }\n.ss-w-mon-stat-v--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-mon-stat-l { font-size: 10px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-mon-bar { position: relative; height: 6px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-mon-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-mon-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-mon-stat-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mon-mkt { background: color-mix(in srgb, var(--ss-w-accent) 10%, transparent); border-radius: 6px; padding: 3px 6px; color: var(--ss-w-ink); }\n.ss-w-mon-stat-mkt-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.ss-w-mon-price { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ss-w-accent); }\n.ss-w-mon-susp { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 2px 6px; }\n.ss-w-mon-asof { display: block; font-size: 10.5px; font-weight: 600; color: var(--ss-w-cta); }\n.ss-w-mon-grace { font-size: 11px; color: var(--ss-w-faint); border-top: 1px solid var(--ss-w-line); padding-top: 8px; }\n\n/* Matches/Odds tab panels (MonitorTabs): the shared per-market-pin context line, the empty\n   state shown when the snapshot carries no matches/markets yet, the persistent D5 in-slip badge,\n   and the per-market-pin wrapper card (struck price on settlement is a pure CSS hook off its\n   [data-settled] attribute -- no separate class on the price element itself). */\n.ss-w-mk-ctx { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ss-w-line); }\n/* the score and the trailing badges/pin never shrink or wrap -- only the fixture name truncates */\n.ss-w-mk-ctx b { flex: none; white-space: nowrap; }\n/* the context line's fixture name stays single-line (the two-line clamp is for the match card) */\n.ss-w-mk-ctx .ss-w-mon-name { display: block; white-space: nowrap; text-overflow: ellipsis; }\n.ss-w-mk-ctx-side { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-mk-ctx-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }\n/* flex:1 keeps the composer pinned to the panel bottom when a tab is empty */\n.ss-w-mon-empty { flex: 1; padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n/* shared group-header label for Club Fixtures (round) and Squad (position) list groups */\n.ss-w-club-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding: 10px 2px 4px; }\n.ss-w-sq-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-sq-num { flex: none; width: 20px; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }\n.ss-w-sq-name { font-size: 13px; font-weight: 600; color: var(--ss-w-ink); }\n.ss-w-sq-name { flex: 1; min-width: 0; }\n.ss-w-sq-name-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-sq-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--ss-w-radius); background: var(--ss-w-track); }\n.ss-w-sq-seg-btn { flex: 1; padding: 5px 8px; border: 0; border-radius: calc(var(--ss-w-radius) - 2px); background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-sq-seg-btn[aria-pressed=\"true\"] { background: var(--ss-w-panel); color: var(--ss-w-ink); }\n.ss-w-sq-seg-btn:focus-visible, .ss-w-sq-tap:focus-visible, .ss-w-pd-back:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 1px; }\n.ss-w-sq-tap { width: 100%; border: 0; border-bottom: 1px solid var(--ss-w-line); background: transparent; font: inherit; text-align: left; cursor: pointer; }\n.ss-w-sq-col { flex: none; width: 40px; text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-sq-head { border-bottom: 0; padding-bottom: 0; }\n.ss-w-sq-head .ss-w-sq-col { font-size: 10px; font-weight: 700; color: var(--ss-w-faint); }\n.ss-w-sq-stats { padding-top: 10px; gap: 10px; }\n.ss-w-sq-card { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; }\n.ss-w-sq-stats .ss-w-sq-row { display: grid; grid-template-columns: 1fr 26px 30px 36px 20px 20px 20px 20px 36px; gap: 0; padding: 7px 10px; font-size: 11px; }\n.ss-w-sq-card > :last-child { border-bottom: 0; }\n.ss-w-sq-pos, .ss-w-sq-c20, .ss-w-sq-c30, .ss-w-sq-c36 { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-sq-stats .ss-w-sq-head { padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-faint); }\n.ss-w-sq-stats .ss-w-sq-head > span { font-size: 9px; font-weight: 700; color: var(--ss-w-faint); }\n.ss-w-sq-player { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-sq-badge { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--ss-w-track); color: var(--ss-w-faint); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }\n.ss-w-sq-stats .ss-w-sq-name { font-size: 11px; }\n.ss-w-sq-rtg { font-weight: 700; }\n.ss-w-sq-rtg-none { color: var(--ss-w-faint); font-weight: 400; }\n.ss-w-sq-stats .ss-w-pos-ink { color: var(--ss-w-pos); font-weight: 700; }\n.ss-w-sq-foot { padding: 0 2px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-sq-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 14px 0; }\n.ss-w-sq-bar .ss-w-sq-seg { margin: 0; }\n.ss-w-sq-bar .ss-w-sq-seg:only-child { flex: 1; }\n.ss-w-sq-bar .ss-w-sq-seg:not(:only-child) { flex: none; }\n.ss-w-sq-eyebrow { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); }\n@media (max-width: 429px) { .ss-w-sq-badge { display: none; } }\n@media (max-width: 359px) {\n  .ss-w-sq-yr { display: none; }\n  .ss-w-sq-stats .ss-w-sq-row { grid-template-columns: 1fr 26px 30px 36px 20px 20px 36px; }\n}\n.ss-w-pd-bar { flex: none; display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ss-w-line); line-height: normal; }\n.ss-w-pd-back { display: flex; align-items: center; gap: 2px; min-height: 32px; padding: 8px 8px 8px 0; margin: -8px 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pd-back:hover { color: var(--ss-w-ink); }\n.ss-w-mon-list.ss-w-pd-list { padding: 16px; gap: 14px; line-height: normal; }\n.ss-w-pd-card { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; }\n.ss-w-pd-faint { color: var(--ss-w-faint); }\n.ss-w-pd-profile { display: flex; gap: 12px; padding: 14px; }\n.ss-w-pd-photo { flex: none; border-radius: 50%; border: 1px solid var(--ss-w-line); background: var(--ss-w-bubble); object-fit: cover; }\n.ss-w-pd-avatar { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-pd-profile-main { flex: 1; min-width: 0; }\n.ss-w-pd-name { font-size: 16px; font-weight: 800; color: var(--ss-w-ink); overflow-wrap: break-word; }\n.ss-w-pd-sub { margin-top: 1px; font-size: 12px; color: var(--ss-w-faint); }\n/* Two columns as on the board, collapsing to one when a column would drop under 80px (narrow phones). */\n.ss-w-pd-bio { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(80px, calc((100% - 10px) / 2)), 1fr)); gap: 4px 10px; margin-top: 10px; font-size: 11.5px; }\n.ss-w-pd-bio-item { min-width: 0; overflow-wrap: break-word; }\n.ss-w-pd-pitch { position: relative; flex: none; width: 56px; height: 76px; border: 1px solid var(--ss-w-line); border-radius: 6px; background: var(--ss-w-track); }\n.ss-w-pd-pitch-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--ss-w-accent); border: 2px solid var(--ss-w-nav); transform: translate(-50%, -50%); }\n.ss-w-pd-avail { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }\n.ss-w-pd-avail-text { min-width: 0; }\n.ss-w-pd-avail-next { font-size: 12.5px; font-weight: 700; }\n.ss-w-pd-avail-note { margin-top: 1px; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-pd-pill { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }\n.ss-w-pd-pill--pos, .ss-w-pd-chip--pos { background: color-mix(in srgb, var(--ss-w-pos) 14%, transparent); color: var(--ss-w-pos); }\n.ss-w-pd-pill--warn, .ss-w-pd-chip--warn { background: color-mix(in srgb, var(--ss-w-warn) 14%, transparent); color: var(--ss-w-warn); }\n.ss-w-pd-pill--neg, .ss-w-pd-chip--neg { background: color-mix(in srgb, var(--ss-w-neg) 14%, transparent); color: var(--ss-w-neg); }\n.ss-w-pd-pill--draw { background: var(--ss-w-track); color: var(--ss-w-faint); }\n.ss-w-pd-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-w-faint); padding: 0 2px; }\n.ss-w-pd-eyebrow--block { margin-bottom: 8px; }\n.ss-w-pd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }\n.ss-w-pd-tile { min-width: 0; padding: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; }\n.ss-w-pd-tile-label { font-size: 10.5px; color: var(--ss-w-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-pd-tile-value { margin-top: 2px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }\n.ss-w-pd-pos-ink { color: var(--ss-w-pos); }\n/* Below 360px the board's 10px tile padding clips \"Matches\"/\"Minutes\" (43px) in a ~34px label box. */\n@media (max-width: 359px) {\n  .ss-w-pd-tiles { gap: 6px; }\n  .ss-w-pd-tile { padding: 10px 6px; }\n}\n.ss-w-pd-perf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }\n.ss-w-pd-perf-head .ss-w-pd-eyebrow { flex: 1; min-width: 0; }\n.ss-w-pd-seg { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ss-w-track); }\n.ss-w-pd-seg-btn { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 11.5px; font-weight: 700; line-height: normal; white-space: nowrap; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pd-seg-btn[aria-pressed=\"true\"] { background: var(--ss-w-nav); color: #fff; }\n.ss-w-pd-seg-btn:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 1px; }\n.ss-w-pd-perf-sub { margin-bottom: 10px; font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-pd-perf-head + .ss-w-pd-perf-cards { margin-top: 10px; }\n.ss-w-pd-perf-cards { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-pd-perf-card { padding: 14px; }\n.ss-w-pd-perf-group { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; }\n.ss-w-pd-bar-row + .ss-w-pd-bar-row { margin-top: 12px; }\n.ss-w-pd-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 12.5px; }\n.ss-w-pd-bar-label { min-width: 0; overflow-wrap: break-word; }\n.ss-w-pd-bar-value { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-w-pd-track { height: 6px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; }\n.ss-w-pd-fill { height: 100%; border-radius: 999px; }\n.ss-w-pd-fill--pos { background: var(--ss-w-pos); }\n.ss-w-pd-fill--warn { background: var(--ss-w-warn); }\n.ss-w-pd-fill--neg { background: var(--ss-w-neg); }\n.ss-w-pd-match { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-pd-match:last-child { border-bottom: none; }\n.ss-w-pd-match-date { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-pd-match-opp { font-size: 12.5px; font-weight: 600; overflow-wrap: break-word; }\n.ss-w-pd-match-sub { margin-top: 1px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-pd-chip-empty { min-width: 30px; }\n.ss-w-pd-chip { min-width: 30px; padding: 3px 0; border-radius: 6px; text-align: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }\n.ss-w-rec-list { margin: 0; padding: 0; list-style: none; }\n.ss-w-rec-value { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-rec-since { font-size: 12px; color: var(--ss-w-faint); }\n/* Per-pin unavailable state: the pin's context line still rendered above (score, name, unpin), but\n   the pin has neither a card nor history (compose-time rescue failed) -- a small inline note beats\n   a bare context line with nothing under it. */\n.ss-w-mon-empty-card { padding: 8px 0 2px; font-size: 12px; color: var(--ss-w-faint); }\n.ss-w-mon-inslip { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-pos); }\n/* Odds-tab item is bare: the visible card is the market-odds card itself (no outer wrapper card),\n   with an optional slim live strip above it. */\n.ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-mk-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mk-live-score { color: var(--ss-w-ink); font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-w-mon-oddspin[data-settled] .ss-w-mo-price,\n.ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }\n\n/* market accordion (Task 9): one collapsed row per available market, expanding into a reused\n   MarketOddsCardList ladder (hideHeader -- the row header already carries the market label). */\n/* Pinned-match tile: the match card + its odds accordion, spaced apart. */\n.ss-w-mon-item { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-acc { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }\n/* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */\n.ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }\n.ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }\n/* Suspended: the row stays listed (knowing a market is off is useful) but is not tappable --\n   its card is unservable, so a pointer cursor would promise something that cannot load. */\n.ss-w-acc-toggle--susp { cursor: default; color: var(--ss-w-faint); }\n.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }\n.ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }\n.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); flex: none; }\n.ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }\n.ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }\n.ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }\n\n/* ---- NBA player props on the Following card (u560) ---- */\n.ss-w-props { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 11px 4px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }\n.ss-w-props-head { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-props-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 8px; background: var(--ss-w-track); }\n.ss-w-props-side { padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); cursor: pointer; font-variant-numeric: tabular-nums; }\n.ss-w-props-side[aria-pressed=\"true\"] { background: var(--ss-w-panel); color: var(--ss-w-ink); }\n.ss-w-props-list { display: flex; flex-direction: column; min-width: 0; }\n.ss-w-props-item { min-width: 0; }\n.ss-w-props-item + .ss-w-props-item { border-top: 1px solid var(--ss-w-line); }\n.ss-w-props-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 0; background: none; border: 0; font: inherit; color: var(--ss-w-ink); text-align: left; cursor: pointer; }\n.ss-w-props-jn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }\n.ss-w-props-jn--home { background: var(--ss-w-home); }\n.ss-w-props-jn--away { background: var(--ss-w-away); }\n.ss-w-props-pn { min-width: 0; display: flex; flex-direction: column; gap: 1px; }\n.ss-w-props-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-props-meta { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-props-main { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; column-gap: 5px; text-align: right; max-width: 96px; font-variant-numeric: tabular-nums; }\n.ss-w-props-stat { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-props-line { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-props-panel { background: var(--ss-w-bubble); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; min-width: 0; }\n.ss-w-props-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-props-chip { padding: 5px 11px; border: 1px solid var(--ss-w-line); border-radius: 999px; background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; cursor: pointer; }\n.ss-w-props-chip[aria-pressed=\"true\"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }\n.ss-w-props-side:focus-visible, .ss-w-props-row:focus-visible, .ss-w-props-chip:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 1px; }\n.ss-w-props-ou { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px; }\n.ss-w-props-price { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; padding: 6px 9px; border: 1px solid var(--ss-w-line); border-radius: 8px; background: var(--ss-w-panel); font-size: 13px; font-weight: 700; color: var(--ss-w-ink); cursor: default; font-variant-numeric: tabular-nums; }\n.ss-w-props-price-lab { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-props-alt, .ss-w-props-l5 { display: flex; flex-direction: column; gap: 5px; min-width: 0; }\n.ss-w-props-cap { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-props-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); grid-auto-flow: row dense; gap: 6px; min-width: 0; }\n.ss-w-props-ladder .ss-w-props-price { flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; font-size: 12px; }\n/* The grids hold no scroll container, so a slip toast is never clipped: the wrapper drops out of\n   layout and the toast takes a full row of its own under the tapped price (dense refills the gap). */\n.ss-w-props-ou .ss-w-slip, .ss-w-props-ladder .ss-w-slip { display: contents; }\n.ss-w-props-ou .ss-w-toast, .ss-w-props-ladder .ss-w-toast { position: static; grid-column: 1 / -1; width: auto; max-width: none; box-shadow: none; }\n.ss-w-props-ou .ss-w-slip-btn.ss-w-slip-btn--price { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 9px; }\n.ss-w-props-ladder .ss-w-slip-btn.ss-w-slip-btn--price { min-width: 0; gap: 2px; padding: 6px 8px; font-size: 12px; }\n.ss-w-props .ss-w-slip-btn--price .ss-w-mol-lab { font-size: 11px; }\n/* The right gutter holds the line label, so it never sits on a bar's value. */\n.ss-w-props-bars { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 56px; margin-top: 14px; padding-right: 32px; }\n.ss-w-props-bar { position: relative; min-height: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--ss-w-accent) 55%, var(--ss-w-track)); }\n.ss-w-props-val { position: absolute; top: -14px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 0 2px; border-radius: 3px; background: var(--ss-w-bubble); line-height: 13px; font-size: 10px; font-weight: 600; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }\n.ss-w-props-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ss-w-ink); }\n.ss-w-props-ref-lab { position: absolute; right: 0; top: -7px; width: 28px; text-align: right; line-height: 13px; border-radius: 3px; background: var(--ss-w-bubble); font-size: 9.5px; font-weight: 600; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-props-opps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-right: 32px; text-align: center; font-size: 10px; color: var(--ss-w-faint); }\n\n/* ---- Today tab (u355) ---- */\n.ss-w-sec-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-sec-head::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n.ss-w-today-live { display: flex; flex-direction: column; gap: 2px; }\n\n/* Today tab root (Task 7): position: relative so the grid's own star/unstar toast (absolute,\n   top-centre) anchors here rather than to some unrelated positioned ancestor. */\n/* Non-scrolling anchor for .ss-w-today-toast (position: absolute; top: 0): .ss-w-mon-list below is\n   the overflow-y: auto scroller, so a toast parented to IT would scroll out of view with the\n   content that moved it. This wrapper sits outside that scroller, inside .ss-w-panel's fixed-size\n   flex column, so top: 0 always lands at the visible top of the Today tab. min-height: 0 is\n   required: without it this flex item defaults to min-height: auto (its content height), .ss-w-panel's\n   overflow: hidden then clips it, and .ss-w-mon-list inside never gets a bounded height to scroll within. */\n.ss-w-today-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }\n\n/* Section header for \"Your leagues\"/\"Top leagues\"/\"All leagues\" (Task 7) -- same visual\n   treatment as .ss-w-sec-head (the live-band header), kept as a separate class so a kept test\n   asserting .ss-w-sec-head is absent when nothing is live cannot see this header too. */\n.ss-w-today-sec { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-today-sec::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-today-sec-sub { text-transform: none; letter-spacing: normal; font-weight: 600; }\n.ss-w-today-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.ss-w-today-empty { font-size: 12px; color: var(--ss-w-faint); padding: 10px 2px; }\n.ss-w-today-search-block { display: flex; flex-direction: column; }\n.ss-w-today-search-group { display: flex; align-items: center; gap: 7px; padding: 2px 2px 6px; }\n.ss-w-today-search-group::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-today-search-group .ss-w-bi-comp-logo { width: 16px; height: 16px; }\n.ss-w-today-search-group-name { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-search-row { cursor: pointer; border-radius: 10px; }\n.ss-w-today-search-row:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n\n/* League tile (Task 5): a flat row (crest + name as the open target, star as a separate sibling\n   button) rather than a disclosure header -- opening is Task 6's LeagueDetail, not an inline\n   expansion. Same border/radius language .ss-w-grp used to carry, before Task 7 deleted it. */\n.ss-w-today-tile { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; background: var(--ss-w-bubble); }\n.ss-w-today-tile-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: none; border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }\n.ss-w-today-tile-body:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-tile-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-tile-country { font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-today-tile-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 6px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-tile-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-tile-star[aria-pressed=\"true\"] { color: var(--ss-w-accent); }\n.ss-w-today-tile-star:disabled { cursor: default; opacity: .4; }\n.ss-w-today-tile-star svg { width: 18px; height: 18px; }\n\n/* Capped row groups (variant B of u521): one league's section-header plus up to\n   ROW_CAP_PER_LEAGUE inline fixture rows, used in place of a tile when the section row budget\n   allows it. Mirrors LeagueTile's button-body + sibling-star-button shape. */\n.ss-w-today-rowsection { display: flex; flex-direction: column; gap: 12px; }\n.ss-w-today-rowgroup { display: flex; flex-direction: column; }\n.ss-w-today-rowgroup-head { display: flex; align-items: center; gap: 4px; }\n.ss-w-today-rowgroup-head-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px; background: none; border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }\n.ss-w-today-rowgroup-head-body:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-rowgroup-name { font-size: 11px; font-weight: 800; letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-rowgroup-star { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-rowgroup-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-rowgroup-star[aria-pressed=\"true\"] { color: var(--ss-w-accent); }\n.ss-w-today-rowgroup-star:disabled { cursor: default; opacity: .4; }\n.ss-w-today-rowgroup-star svg { width: 16px; height: 16px; }\n.ss-w-today-rowgroup-rows { display: flex; flex-direction: column; }\n.ss-w-today-rowgroup-seeall { align-self: flex-start; background: none; border: none; font: inherit; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); cursor: pointer; padding: 4px 2px 0; }\n.ss-w-today-rowgroup-seeall:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n\n/* League detail (Task 6): the drill-in view opened from a tile. Its header star is always\n   enabled (spec \u00A73/\u00A77's one exception to the tile rule), so it carries no :disabled styling. */\n.ss-w-today-detail { position: relative; display: flex; flex-direction: column; gap: 10px; }\n.ss-w-today-detail-head { display: flex; align-items: center; gap: 8px; }\n.ss-w-today-detail-back { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); cursor: pointer; transform: scaleX(-1); }\n.ss-w-today-detail-back:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-detail-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-today-detail-star { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-detail-star:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-detail-star[aria-pressed=\"true\"] { color: var(--ss-w-accent); }\n.ss-w-today-detail-star svg { width: 18px; height: 18px; }\n.ss-w-today-detail-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }\n.ss-w-today-detail-prev, .ss-w-today-detail-next { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: none; border-radius: 8px; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-today-detail-prev:focus-visible, .ss-w-today-detail-next:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-today-detail-prev { transform: scaleX(-1); }\n.ss-w-today-detail-pos { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-today-detail-body { display: flex; flex-direction: column; }\n.ss-w-today-detail-count { align-self: flex-end; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }\n/* aria-live status region, not a modal -- pointer-events: none so the header/nav above stay\n   clickable while it is showing. */\n.ss-w-today-toast { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; width: max-content; max-width: 220px; font-size: 11px; font-weight: 560; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 5px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n\n.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-drow:last-child { border-bottom: none; }\n.ss-w-drow-when { font-size: 11px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-drow-when--live { color: var(--ss-w-neg); }\n.ss-w-drow-when--two { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }\n.ss-w-drow-when--two > span:last-child { font-size: 10px; font-weight: 600; }\n/* Each side ellipsises independently: a single joined string truncates the away team off the end,\n   which is the u350 betting-card truncation one layer down. */\n.ss-w-drow-fx { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-drow-side { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 0; }\n/* Away side mirrors home around the score: crest to the far edge, name aligned inward. */\n.ss-w-drow-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-drow-nm { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* Centre slot of .ss-w-drow-fx, between the two sides: flex:none so a widening score never\n   steals width the team names need to avoid ellipsis. min-width holds the slot at the width of a\n   one-digit scoreline so an unscored row's bare dash does not pull the column out of line -- the\n   scores read as a column down the list, not a jitter. */\n.ss-w-drow-sc { flex: none; min-width: 26px; text-align: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-drow-sc--idle { color: var(--ss-w-faint); font-weight: 600; }\n.ss-w-drow--live { background: color-mix(in srgb, var(--ss-w-neg) 5%, transparent); border-radius: 8px; padding: 7px 6px; margin: 0 -6px; border-bottom: none; }\n.ss-w-drow-crest { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: contain; background: var(--ss-w-bubble); }\n.ss-w-drow-crest--abbr { width: 26px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; letter-spacing: .02em; line-height: 1; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); box-sizing: border-box; }\n\n.ss-w-stale { font-size: 11px; font-weight: 600; color: var(--ss-w-cta); background: color-mix(in srgb, var(--ss-w-cta) 12%, var(--ss-w-panel)); border-radius: 8px; padding: 6px 9px; }\n\n/* Prize banner: CTA-tinted card with icon + body column (label + chips) \u2014 still used by\n   LeaderboardEmpty.tsx's weekly-prize callout. */\n.ss-w-prize { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--ss-w-cta) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 22%, var(--ss-w-line)); }\n.ss-w-prize-icon { flex: none; font-size: 20px; line-height: 1; padding-top: 1px; }\n.ss-w-prize-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-prize-text { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.35; overflow-wrap: anywhere; }\n\n/* \u2500\u2500 games hub (u393) \u2500\u2500 */\n.ss-g-hub-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--ss-g-ground); font-family: var(--ss-g-font-body); color: var(--ss-g-ink); }\n.ss-g-hub { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 20px; }\n.ss-g-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-g-stat { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); min-width: 0; }\n.ss-g-stat-l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-stat-v { display: flex; align-items: baseline; gap: 4px; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 24px; line-height: 1; white-space: nowrap; }\n.ss-g-stat-v svg { color: var(--ss-g-flame); align-self: center; }\n.ss-g-stat-v small { font-family: var(--ss-g-font-body); font-size: 12px; font-weight: 600; color: var(--ss-g-muted); overflow: hidden; text-overflow: ellipsis; }\n.ss-g-stat-v--accent { color: var(--ss-w-accent); }\n.ss-g-prize { align-self: flex-start; }\n.ss-g-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; min-width: 0; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); color: var(--ss-g-ink); text-align: left; font: inherit; cursor: pointer; }\n.ss-g-tile:not([data-disabled]):hover { border-color: var(--ss-g-line-warm); }\n.ss-g-tile[data-disabled] { opacity: .55; cursor: default; }\n.ss-g-tile--tile { height: 148px; }\n.ss-g-tile-art { height: 74px; border-radius: 10px; background: var(--ss-g-raised); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }\n.ss-g-art { width: 100%; height: 100%; }\n.ss-g-art-fg { fill: var(--ss-g-strong-line); }\n.ss-g-art-accent { fill: var(--ss-w-accent); }\n.ss-g-art-accent-stroke { fill: none; stroke: var(--ss-w-accent); stroke-width: 2; }\n.ss-g-art-dot { fill: var(--ss-g-pitch-mark); }\n.ss-g-art-pitch { fill: var(--ss-g-pitch); stroke: var(--ss-g-pitch-line); }\n.ss-g-art-block { fill: var(--ss-g-line); }\n.ss-g-art-correct { fill: var(--ss-g-correct); }\n.ss-g-art-dash { fill: none; stroke: var(--ss-g-strong-line); stroke-dasharray: 3 2; stroke-width: 1.5; }\n.ss-g-art-line { stroke: var(--ss-g-line-warm); stroke-width: 2; }\n.ss-g-art-ink { fill: none; stroke: var(--ss-g-on-accent); stroke-width: 2; }\n.ss-g-art-q { fill: var(--ss-w-accent); font: 800 20px var(--ss-g-font-display); }\n.ss-g-tile-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-tile-status { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-tile-status[data-tone=\"accent\"] { color: var(--ss-w-accent); font-weight: 600; }\n.ss-g-tile-status[data-tone=\"success\"] { color: var(--ss-g-success); font-weight: 700; }\n.ss-g-tile--hero { flex-direction: row; min-height: 184px; padding: 0; overflow: hidden; border-radius: 18px; background: var(--ss-g-warm); border-color: var(--ss-g-line-warm); }\n.ss-g-hero-text { flex: 0 0 60%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; min-width: 0; }\n.ss-g-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-g-hero-title { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 34px; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-hero-sub { font-size: 14px; color: var(--ss-g-ink-2); }\n.ss-g-hero-cta { align-self: flex-start; margin-top: 6px; padding: 9px 16px; border-radius: 999px; background: var(--ss-w-accent); color: var(--ss-g-on-accent); font-size: 14px; font-weight: 700; }\n.ss-g-hero-art { flex: 1; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(-58deg, var(--ss-g-accent-tint) 0 14px, var(--ss-g-warm) 14px 32px); }\n.ss-g-sec { display: flex; flex-direction: column; gap: 10px; }\n.ss-g-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }\n.ss-g-sec-head h3 { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }\n.ss-g-sec-head span { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; }\n.ss-g-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n.ss-g-tile--wide { flex-direction: row; align-items: center; gap: 14px; min-height: 104px; }\n.ss-g-wide-art { width: 84px; height: 84px; flex: none; border-radius: 10px; background: var(--ss-g-raised); }\n.ss-g-wide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }\n.ss-g-wide-chev { color: var(--ss-g-muted); transform: rotate(180deg); display: flex; }\n\n/* \u2500\u2500 Mystery Tiger (u393) \u2500\u2500 */\n.ss-g-mt-card { flex: none; border-radius: 18px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); overflow: hidden; display: flex; flex-direction: column; }\n.ss-g-mt-portrait { position: relative; height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: repeating-linear-gradient(-58deg, var(--ss-g-accent-tint) 0 16px, var(--ss-g-warm) 16px 36px); }\n.ss-g-mt-portrait .ss-g-sil { font-size: 46px; }\n.ss-g-mt-photo { width: 132px; height: 132px; margin-bottom: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 40px var(--ss-g-font-display); }\n.ss-g-mt-photo img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-cp-photo { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 22px var(--ss-g-font-display); }\n.ss-g-cp-photo img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-mt-reveal-name { position: absolute; bottom: 6px; left: 12px; right: 12px; text-align: center; font: 800 20px var(--ss-g-font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mt-known { display: grid; gap: 6px; padding: 12px; }\n.ss-g-mt-known-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }\n.ss-g-mt-lab { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-mt-known-v { width: 100%; height: 38px; border-radius: 8px; display: grid; place-items: center; font: 700 16px var(--ss-g-font-display); background: var(--ss-g-raised); color: var(--ss-g-muted); white-space: nowrap; }\n.ss-g-mt-known-v[data-state=\"known\"] { background: var(--ss-g-correct); color: var(--ss-g-on-correct); font-size: 18px; }\n.ss-g-mt-known-v[data-state=\"range\"] { border: 1px dashed var(--ss-g-strong-line); }\n.ss-g-mt-table { display: flex; flex-direction: column; gap: 8px; }\n.ss-g-mt-thead, .ss-g-mt-row { display: grid; gap: 5px; align-items: center; }\n.ss-g-mt-thead { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-mt-thead span:not(:first-child) { text-align: center; }\n.ss-g-mt-who { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-g-mt-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 12px; font-weight: 700; overflow: hidden; }\n.ss-g-mt-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }\n.ss-g-mt-first { font-size: 11px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mt-last { font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mt-cell { height: 42px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font: 700 16px var(--ss-g-font-display); background: var(--ss-g-raised); border: 1px solid var(--ss-g-line); color: var(--ss-g-ink); overflow: hidden; }\n.ss-g-mt-cell[data-verdict=\"exact\"] { background: var(--ss-g-correct); border-color: transparent; color: var(--ss-g-on-correct); }\n.ss-g-mt-cell[data-verdict=\"near\"] { background: var(--ss-g-close); border-color: transparent; color: var(--ss-g-on-accent); }\n.ss-g-mt-cell-dir { font-size: 10px; margin-top: 2px; }\n.ss-g-mt-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-mt-legend span { display: inline-flex; align-items: center; gap: 6px; }\n.ss-g-mt-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }\n.ss-g-mt-sw[data-verdict=\"exact\"] { background: var(--ss-g-correct); }\n.ss-g-mt-sw[data-verdict=\"near\"] { background: var(--ss-g-close); }\n.ss-g-mt-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; color: var(--ss-g-ink-2); }\n.ss-g-mt-hint svg { color: var(--ss-w-accent); flex: none; margin-top: 1px; }\n\n/* \u2500\u2500 Higher or Lower (u393) \u2500\u2500 */\n.ss-g-hl-prompt { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }\n.ss-g-hl-prompt-q { font-size: 13px; color: var(--ss-g-muted); }\n.ss-g-hl-prompt-stat { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }\n.ss-g-hl-prompt-season { font-size: 12px; color: var(--ss-g-muted); }\n/* The pair fills whatever height the panel leaves (a laptop demo panel is ~670px, the design 860px):\n   both cards share it and the photos scale with them, so Higher/Lower never fall below the fold. */\n.ss-g-hl .ss-g-body { overflow-y: auto; container: hl / size; }\n.ss-g-hl-pair { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }\n.ss-g-hl-card { flex: 1 1 0; min-height: min-content; max-height: 240px; display: flex; border-radius: 18px; overflow: hidden; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }\n.ss-g-hl-card--b { border-color: var(--ss-g-line-warm); }\n.ss-g-hl-photo-wrap { width: 38%; max-width: 160px; flex: none; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; background: var(--ss-g-raised); overflow: hidden; }\n.ss-g-hl-photo-wrap .ss-g-sil { border-radius: 0; background: transparent; }\n.ss-g-hl-photo { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ss-g-muted); font: 800 36px var(--ss-g-font-display); }\n.ss-g-hl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }\n.ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; }\n.ss-g-hl-first { font-size: 13px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-hl-surname { font: 800 26px var(--ss-g-font-display); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-hl-value { font: 800 56px var(--ss-g-font-display); line-height: .95; color: var(--ss-w-accent); margin-top: 6px; }\n.ss-g-hl-stat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-hl-btns { display: flex; flex-direction: row; gap: 8px; margin-top: 12px; }\n.ss-g-hl-btns .ss-g-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; gap: 4px; }\n/* Labels stay on one line: Turkish \"DAHA FAZLA\" wrapped to two in a ~115px button. */\n.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }\n.ss-g-hl-btns .ss-g-btn svg { flex: none; }\n/* Phone-width cards: the info column is ~230px, too narrow for \"DAHA FAZLA\" + icon side by side.\n   Drop the icons and tighten the type first; stack the buttons only when even that cannot fit. */\n.ss-g-hl-info { container: hlinfo / inline-size; }\n@container hlinfo (max-width: 280px) {\n  .ss-g-hl-btns .ss-g-btn svg { display: none; }\n  .ss-g-hl-btns .ss-g-btn { font-size: 12px; letter-spacing: 0; padding: 0 4px; }\n}\n@container hlinfo (max-width: 180px) {\n  .ss-g-hl-btns { flex-direction: column; }\n}\n.ss-g-hl-vs { position: relative; z-index: 1; flex: none; align-self: center; width: 44px; height: 44px; margin: -28px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }\n/* Clear the VS badge that straddles the seam between the two cards. */\n.ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }\n.ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 24px; }\n/* Short panels (a ~580px widget on a small laptop): tighten the type so both cards and the\n   Higher/Lower buttons stay on screen; below this the body scrolls rather than clipping names. */\n@container hl (max-height: 420px) {\n  .ss-g-hl-prompt-stat { font-size: 24px; }\n  .ss-g-hl-prompt-season { display: none; }\n  .ss-g-hl-info { padding: 8px 12px; }\n  .ss-g-hl-surname { font-size: 22px; }\n  .ss-g-hl-value { font-size: 42px; margin-top: 2px; }\n  .ss-g-hl-btns { margin-top: 8px; }\n  .ss-g-hl-vs { width: 38px; height: 38px; margin: -22px 0; font-size: 15px; }\n  .ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 18px; }\n  .ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 18px; }\n}\n.ss-g-hl-feedback { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ss-g-ink-2); }\n.ss-g-hl-feedback[data-correct=\"true\"] svg { color: var(--ss-g-success); }\n.ss-g-hl-feedback[data-correct=\"false\"] svg { color: var(--ss-g-wrong-mark); }\n.ss-g-hl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.ss-g-hl-dots { display: flex; gap: 5px; }\n.ss-g-hl-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--ss-g-strong-line); }\n.ss-g-hl-dot[data-state=\"correct\"] { background: var(--ss-g-correct); border: 0; }\n.ss-g-hl-dot[data-state=\"wrong\"] { background: var(--ss-g-wrong-mark); border: 0; }\n.ss-g-hl-pts { font: 700 22px var(--ss-g-font-display); white-space: nowrap; }\n.ss-g-hl-pts-unit { font-size: 13px; color: var(--ss-g-muted); }\n\n/* \u2500\u2500 Guess the XI (u393) \u2500\u2500 pitch colours are the fixed --ss-g-pitch* tokens (Task 1) */\n.ss-g-gxi-pitch { position: relative; flex: none; height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid var(--ss-g-pitch-line);\n  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ss-g-pitch) 92%, var(--ss-g-pitch-mark)) 0 12.5%, var(--ss-g-pitch) 12.5% 25%); }\n.ss-g-gxi-rows { position: absolute; inset: 14px 6px; display: flex; flex-direction: column; justify-content: space-between; }\n.ss-g-gxi-row { display: flex; justify-content: space-evenly; align-items: flex-start; }\n.ss-g-gxi-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 72px; }\n.ss-g-gxi-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-pitch-chip); border: 2px solid var(--ss-g-pitch-ink); font-size: 22px; line-height: 1; }\n.ss-g-gxi-node[data-revealed] .ss-g-gxi-disc { border-color: var(--ss-w-accent); }\n.ss-g-gxi-disc[data-code] { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ss-g-pitch-ink); }\n.ss-g-gxi-pos { max-width: 100%; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-pitch-chip); color: var(--ss-g-pitch-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-gxi-pos--name { color: var(--ss-w-accent); text-transform: uppercase; }\n.ss-g-gxi-wrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n.ss-g-gxi-wrong-l { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-gxi-wrong-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; color: var(--ss-g-muted); }\n/* u407: lineup photo \u2014 fills the 44px disc like the flag does */\n.ss-g-gxi-disc--photo { overflow: hidden; border: 2px solid var(--ss-w-accent); }\n.ss-g-gxi-disc--photo img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-gxi-disc--photo .ss-w-av-initials { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; color: var(--ss-g-pitch-ink); }\n/* u407: answer reveal \u2014 prominent row using theme tokens, works on dark/navy/light surfaces */\n.ss-g-gxi-answer { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: var(--ss-g-warm); border: 1.5px solid var(--ss-g-line-warm); }\n.ss-g-gxi-answer-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-g-muted); flex: none; }\n.ss-g-gxi-answer-name { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--ss-g-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n/* ---- Daily Quiz (u393) ---- */\n.ss-g-dq-stem { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }\n.ss-g-dq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n.ss-g-dq-opt { position: relative; min-height: 96px; padding: 44px 12px 12px; border-radius: 16px; border: 1.5px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); text-align: left; font: inherit; cursor: pointer; display: flex; align-items: flex-end; min-width: 0; }\n.ss-g-dq-opt:hover:not(:disabled) { border-color: var(--ss-g-line-warm); }\n.ss-g-dq-opt[aria-pressed=\"true\"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-dq-opt:disabled { cursor: default; }\n.ss-g-dq-badge { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ss-g-raised); font-weight: 700; font-size: 13px; color: var(--ss-g-ink); }\n.ss-g-dq-opt[aria-pressed=\"true\"] .ss-g-dq-badge { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-dq-opt-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }\n.ss-g-dq-opt-first { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-dq-opt-last { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-dq-opt-suffix { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ss-g-muted); }\n.ss-g-dq-opt-full { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }\n.ss-g-dq-nav { display: flex; gap: 10px; }\n.ss-g-dq-nav .ss-g-btn--block { flex: 1; }\n.ss-g-dq-rq { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }\n.ss-g-dq-rq-stem { font-weight: 700; font-size: 14px; }\n.ss-g-dq-rq-opts { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-g-dq-rq-opt { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--ss-g-raised); color: var(--ss-g-muted); }\n.ss-g-dq-rq-opt--correct { background: var(--ss-g-correct); color: var(--ss-g-on-correct); }\n.ss-g-dq-rq-opt--wrong { background: var(--ss-g-wrong); color: var(--ss-g-on-correct); }\n.ss-g-dq-why { font-size: 13px; color: var(--ss-g-ink-2); }\n/* u407: player avatar in quiz option \u2014 centered in top half, badge at top-left unaffected */\n.ss-g-dq-opt-av { position: absolute; top: 7px; right: 10px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 13px; font-weight: 700; flex: none; }\n.ss-g-dq-opt-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-dq-opt-av .ss-w-av-initials { font-size: 11px; }\n\n/* ---- Career Path (u393) ---- */\n.ss-g-cp-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-cp-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }\n.ss-g-cp-card-title { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-cp-hint { font-size: 13px; color: var(--ss-g-ink-2); }\n.ss-g-cp-locks { display: flex; gap: 6px; flex-wrap: wrap; }\n.ss-g-cp-line { list-style: none; display: flex; flex-direction: column; }\n.ss-g-cp-step { display: flex; gap: 14px; align-items: stretch; }\n.ss-g-cp-rail { display: flex; flex-direction: column; align-items: center; width: 52px; flex: none; }\n.ss-g-cp-tile { width: 52px; height: 52px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; }\n.ss-g-cp-tile--locked { border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); }\n.ss-g-cp-tile--faint { border: 1.5px dashed var(--ss-g-line); background: transparent; color: var(--ss-g-faint); }\n.ss-g-cp-conn { width: 2px; flex: 1; min-height: 14px; background: var(--ss-g-line-warm); }\n.ss-g-cp-conn--faint { background: var(--ss-g-line); }\n.ss-g-cp-step:last-child .ss-g-cp-conn { display: none; }\n.ss-g-cp-step-text { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding-bottom: 14px; min-width: 0; }\n.ss-g-cp-club { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }\n.ss-g-cp-sub { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-cp-loan { color: var(--ss-w-accent); font-weight: 600; }\n\n/* Game screen host: fills the panel; each screen owns its header, gutters and scrolling. */\n.ss-w-gscreen-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--ss-g-ground); }\n.ss-w-gscreen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }\n.ss-w-gscreen-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; color: var(--ss-w-faint); font-size: 13px; text-align: center; }\n\n/* ---- Leaderboard (D2) ---- */\n/* Outer shell */\n.ss-w-lb2 { display: flex; flex-direction: column; gap: 12px; }\n\n/* Segmented control: This week / All time */\n.ss-w-seg { display: inline-flex; gap: 2px; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }\n.ss-w-seg-btn { font-size: 12px; font-weight: 600; border: none; border-radius: 7px; padding: 5px 12px; color: var(--ss-w-faint); background: none; cursor: pointer; font: inherit; white-space: nowrap; }\n.ss-w-seg-btn[data-on] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 3px rgba(0,0,0,.09); }\n\n/* Row list */\n.ss-w-lb2-rows { display: flex; flex-direction: column; border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; background: var(--ss-w-panel); }\n.ss-w-lb2-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-lb2-row:last-child { border-bottom: none; }\n/* Highlighted \"you\" row: full-width tint via negative margin trick, contained by border-radius above */\n.ss-w-lb2-row--you { background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); }\n.ss-w-lb2-rank { flex: none; min-width: 30px; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-faint); }\n.ss-w-lb2-rank--top3 { color: var(--ss-w-cta); }\n.ss-w-lb2-handle { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-lb2-points { flex: none; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-lb2-streak { flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); padding-left: 4px; }\n\n/* Kit-prize separator: a labelled hairline (eyebrow + two growing lines) */\n.ss-w-kitline { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); }\n.ss-w-kitline::before, .ss-w-kitline::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n\n/* Off-board treatment: dashed pill indicating rank is outside top N */\n.ss-w-lbgap { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 11.5px; color: var(--ss-w-faint); border: 1px dashed var(--ss-w-line); border-radius: 10px; }\n\n/* ---- Leaderboard empty / weekly-reset default state ---- */\n.ss-w-lb-empty { display: flex; flex-direction: column; gap: 12px; flex: 1; }\n.ss-w-lb-empty-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 20px 16px; border: 1px dashed color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); border-radius: 14px; background: color-mix(in srgb, var(--ss-w-cta) 6%, var(--ss-w-panel)); }\n.ss-w-lb-empty--alltime { align-items: center; justify-content: center; text-align: center; padding: 24px 16px; }\n.ss-w-lb-empty-icon { font-size: 30px; line-height: 1; }\n.ss-w-lb-empty-title { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: var(--ss-w-ink); }\n.ss-w-lb-empty-body { margin: 0; max-width: 30ch; font-size: 12.5px; line-height: 1.4; color: var(--ss-w-faint); }\n.ss-w-lb-empty-cta { margin-top: 6px; border: none; border-radius: 10px; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); cursor: pointer; }\n.ss-w-lb-empty-cta:hover { filter: brightness(1.04); }\n.ss-w-lb-last { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid var(--ss-w-line); font-size: 11px; }\n.ss-w-lb-last-label { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ss-w-faint); }\n.ss-w-lb-last-handle { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-lb-last-points { flex: none; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n\n/* PlayerAvatar initials fallback (PlayerAvatar.tsx) \u2014 size/colour inherit from the avatar class. */\n.ss-w-av-initials { font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }\n\n/* ---- Beat the Grid (u393) ---- */\n.ss-g-btg-grid { display: grid; gap: 6px; }\n/* While the search sheet is pinned below, the grid shrinks its rows to share the body with it\n   instead of pushing the bottom row under the sheet. */\n.ss-g-btg-grid--fit { flex: 0 1 auto; min-height: 0; }\n.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; overflow: hidden; }\n.ss-g-btg-colhdr[data-meta] { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: 11px; letter-spacing: 0; }\n.ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }\n.ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; overflow: hidden; }\n.ss-g-btg-rowhdr[data-meta] { font-size: 10px; font-family: var(--ss-g-font-body); font-weight: 700; letter-spacing: -0.01em; text-transform: none; word-break: normal; overflow-wrap: normal; hyphens: none; line-height: 1.25; padding: 0 2px; }\n.ss-g-btg-cell { position: relative; min-height: 0; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }\n.ss-g-btg-cell:disabled { cursor: default; }\n.ss-g-btg-cell[data-state=\"active\"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }\n.ss-g-btg-cell[data-state=\"correct\"], .ss-g-btg-cell[data-state=\"wrong\"] { justify-content: flex-end; background: var(--ss-g-surface); border-style: solid; }\n.ss-g-btg-cell[data-state=\"correct\"] { border-color: var(--ss-g-correct); }\n.ss-g-btg-cell[data-state=\"wrong\"] { border-color: var(--ss-g-wrong-mark); }\n.ss-g-btg-badge { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--ss-g-on-correct); }\n.ss-g-btg-badge--correct { background: var(--ss-g-correct); }\n.ss-g-btg-badge--wrong { background: var(--ss-g-wrong); }\n.ss-g-btg-rarity { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-g-btg-cell[data-state=\"wrong\"] .ss-g-btg-rarity { background: var(--ss-g-raised); color: var(--ss-g-muted); }\n.ss-g-btg-cell .ss-g-sil { border-radius: 0; background: transparent; }\n.ss-g-btg-name { width: 100%; padding: 4px 2px; background: var(--ss-g-ground); color: var(--ss-g-ink); font-family: var(--ss-g-font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-btg-plus { display: flex; }\n.ss-g-btg-pin { flex: none; padding: 0 12px 12px; }\n.ss-g-btg-sheet { padding: 14px; border-radius: 18px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line-warm); display: flex; flex-direction: column; gap: 12px; }\n.ss-g-btg-sheet-hdr { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-g-btg-sheet-hdr .ss-g-chip { padding: 4px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-btg-sheet-x { color: var(--ss-g-muted); display: flex; flex: none; }\n.ss-g-btg-sheet-close { margin-left: auto; flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ss-g-muted); display: grid; place-items: center; cursor: pointer; }\n.ss-g-btg-sheet-close:hover { background: var(--ss-g-raised); color: var(--ss-g-ink); }\n.ss-g-btg-sheet .ss-g-search-box { height: 48px; border-radius: 12px; background: var(--ss-g-ground); }\n.ss-g-btg-sheet-empty { font-size: 13px; color: var(--ss-g-muted); }\n.ss-g-btg-sheet .ss-g-opt { background: var(--ss-g-raised); }\n.ss-g-btg-sheet .ss-g-opts { max-height: 160px; }\n.ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }\n/* u407: cell avatar replaces Silhouette */\n.ss-g-btg-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 12px; font-weight: 700; }\n.ss-g-btg-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-btg-av .ss-w-av-initials { font-size: 12px; }\n/* u407: coach photo in row/col header */\n.ss-g-btg-coach-av { width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: var(--ss-g-raised); display: grid; place-items: center; color: var(--ss-g-muted); font-size: 10px; font-weight: 700; }\n.ss-g-btg-coach-av img { width: 100%; height: 100%; object-fit: cover; }\n/* u407: country flag emoji in header \u2014 sized to match other header icons */\n.ss-g-btg-hdr-flag { font-size: 20px; line-height: 1; flex: none; }\n/* u407: club crest in col/row header */\n.ss-g-btg-colhdr .ss-g-crest, .ss-g-btg-rowhdr .ss-g-crest { width: 28px; height: 28px; flex: none; }\n\n/* \u2500\u2500 Starting XI (u393) \u2500\u2500 */\n.ss-g-xi-pitch { position: relative; flex: none; height: 400px; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(180deg, var(--ss-g-pitch) 0 40px, color-mix(in srgb, var(--ss-g-pitch) 88%, var(--ss-g-pitch-mark)) 40px 80px); border: 1px solid var(--ss-g-pitch-line); }\n.ss-g-xi-slot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 48px; border: 0; padding: 0; background: transparent; color: var(--ss-g-pitch-mark); font: inherit; cursor: pointer; }\n.ss-g-xi-slot:disabled { cursor: default; }\n.ss-g-xi-ring { width: 48px; height: 48px; box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--ss-g-pitch-mark); font-family: var(--ss-g-font-display); font-weight: 800; font-size: 20px; }\n.ss-g-xi-slot[data-state=\"filled\"] .ss-g-xi-ring { border: 2px solid var(--ss-w-accent); background: var(--ss-g-accent-tint); color: var(--ss-g-ink); }\n.ss-g-xi-slot[data-state=\"active\"] .ss-g-xi-ring { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }\n.ss-g-xi-tag { max-width: 72px; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-ground); color: var(--ss-g-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-xi-slot[data-state=\"active\"] .ss-g-xi-tag { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-xi-picker { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-xi-picker-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }\n.ss-g-xi-list { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }\n.ss-g-xi-opt { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--ss-g-raised); color: var(--ss-g-ink); font: inherit; text-align: left; cursor: pointer; }\n.ss-g-xi-opt:disabled { opacity: .5; cursor: default; }\n.ss-g-xi-opt-no { width: 28px; flex: none; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; color: var(--ss-w-accent); text-align: center; }\n.ss-g-xi-opt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-xi-opt-pos { flex: none; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-line); color: var(--ss-g-ink-2); font-size: 10px; font-weight: 700; }\n.ss-g-xi-lock { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-xi-lock svg { color: var(--ss-w-accent); flex: none; }\n\n/* \u2500\u2500 Stat Ladder (u393) \u2500\u2500 */\n.ss-g-sl-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 6px; text-align: center; }\n.ss-g-sl-stat { padding: 4px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }\n.ss-g-sl-q { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 30px; line-height: 1.05; text-transform: uppercase; }\n.ss-g-sl-q em { font-style: normal; color: var(--ss-w-accent); }\n.ss-g-sl-rungs { list-style: none; display: flex; flex-direction: column; gap: 10px; }\n.ss-g-sl-rung { min-height: 84px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px; border-radius: 16px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }\n.ss-g-sl-rung--mystery { min-height: 96px; border: 2px dashed var(--ss-w-accent); background: repeating-linear-gradient(-58deg, var(--ss-g-accent-tint) 0 14px, var(--ss-g-warm) 14px 32px); }\n.ss-g-sl-rung--mystery[data-result=\"correct\"] { border: 2px solid var(--ss-g-correct); background: var(--ss-g-warm); }\n.ss-g-sl-rung--mystery[data-result=\"wrong\"] { border: 2px solid var(--ss-g-wrong-mark); background: var(--ss-g-warm); }\n.ss-g-sl-rank { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ss-g-raised); color: var(--ss-g-ink-2); font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; }\n.ss-g-sl-rung:first-child .ss-g-sl-rank { background: var(--ss-g-accent-tint); color: var(--ss-w-accent); }\n.ss-g-sl-rung--mystery .ss-g-sl-rank { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-sl-av { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-ink-2); font-weight: 700; }\n.ss-g-sl-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-sl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }\n.ss-g-sl-name small { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-sl-name b { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-sl-who { flex: 1; min-width: 0; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-g-sl-val { flex: none; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 34px; line-height: 1; }\n.ss-g-sl-val--mystery { font-size: 40px; color: var(--ss-w-accent); }\n.ss-g-sl-clue { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 13px; line-height: 1.4; color: var(--ss-g-ink-2); }\n.ss-g-sl-clue svg { flex: none; color: var(--ss-w-accent); }\n.ss-g-sl-pool { list-style: none; display: flex; flex-direction: column; gap: 4px; }\n.ss-g-sl-opt { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid transparent; border-radius: 12px; background: var(--ss-g-raised); color: var(--ss-g-ink); font: inherit; text-align: left; cursor: pointer; }\n.ss-g-sl-opt[aria-pressed=\"true\"] { border-color: var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-sl-opt[aria-pressed=\"true\"] svg { color: var(--ss-w-accent); }\n.ss-g-sl-opt:disabled { opacity: .5; cursor: default; }\n.ss-g-sl-opt-av { width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-line); color: var(--ss-g-ink-2); font-size: 12px; font-weight: 700; }\n.ss-g-sl-opt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-sl-guess { display: flex; align-items: flex-end; gap: 8px; }\n.ss-g-sl-guess .ss-g-search { flex: 1; min-width: 0; }\n.ss-g-sl-guess .ss-g-btn { min-height: 50px; padding: 0 20px; border-radius: 14px; }\n\n/* \u2500\u2500 Matchday Predictor (u393) \u2500\u2500 */\n.ss-g-mp-card { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 16px 10px; border-radius: 18px; background: var(--ss-g-warm); border: 1px solid var(--ss-g-line-warm); }\n.ss-g-mp-team { width: 84px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }\n.ss-g-mp-team .ss-g-crest--ph { color: var(--ss-g-strong-line); }\n.ss-g-mp-team-name { max-width: 100%; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 17px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }\n.ss-g-mp-team-side { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }\n.ss-g-mp-scores { display: flex; align-items: center; gap: 8px; }\n.ss-g-mp-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n.ss-g-mp-step { width: 64px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ss-g-line-warm); background: var(--ss-g-raised); color: var(--ss-g-ink); cursor: pointer; }\n.ss-g-mp-step:disabled { opacity: .4; cursor: default; }\n.ss-g-mp-digit { width: 64px; height: 76px; display: grid; place-items: center; box-sizing: border-box; border-radius: 12px; background: var(--ss-g-ground); border: 2px solid var(--ss-g-strong-line); font-family: var(--ss-g-font-display); font-weight: 800; font-size: 52px; line-height: 1; }\n.ss-g-mp-digit[data-active=\"true\"] { border-color: var(--ss-w-accent); color: var(--ss-w-accent); }\n.ss-g-mp-dash { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 30px; color: var(--ss-g-faint); }\n.ss-g-mp-scorer { display: flex; flex-direction: column; gap: 10px; }\n.ss-g-mp-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }\n.ss-g-mp-sec-head h3 { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }\n.ss-g-mp-sec-head span { font-size: 12px; color: var(--ss-g-muted); }\n.ss-g-mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-g-mp-pcard { position: relative; min-width: 0; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); font: inherit; cursor: pointer; }\n.ss-g-mp-pcard[aria-pressed=\"true\"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-mp-pcard:disabled { cursor: default; opacity: .6; }\n.ss-g-mp-pcheck { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ss-w-accent); color: var(--ss-g-on-accent); }\n.ss-g-mp-pname { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-mp-none { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ss-g-line); background: transparent; color: var(--ss-g-muted); font: 600 14px var(--ss-g-font-body); cursor: pointer; text-align: left; }\n.ss-g-mp-radio { width: 18px; height: 18px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ss-g-strong-line); }\n.ss-g-mp-none[aria-pressed=\"true\"] { color: var(--ss-g-ink); border-color: var(--ss-g-line-warm); }\n.ss-g-mp-none[aria-pressed=\"true\"] .ss-g-mp-radio { border-color: var(--ss-w-accent); background: var(--ss-w-accent); box-shadow: inset 0 0 0 3px var(--ss-g-ground); }\n.ss-g-mp-closed { padding: 10px 14px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); color: var(--ss-g-muted); font-size: 13px; text-align: center; }\n.ss-g-mp-fun { font-size: 11px; color: var(--ss-g-faint); text-align: center; }\n.ss-g-mp-rows { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-g-mp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); font-size: 14px; }\n.ss-g-mp-row-k { color: var(--ss-g-ink-2); }\n.ss-g-mp-row-v { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ss-g-muted); }\n.ss-g-mp-row[data-ok=\"true\"] { border-color: var(--ss-g-correct); }\n.ss-g-mp-row[data-ok=\"true\"] .ss-g-mp-row-v { color: var(--ss-g-success); }\n.ss-g-mp-row-d { color: var(--ss-g-ink); }\n\n/* \u2500\u2500 Fan MOTM (u393) \u2500\u2500 */\n.ss-g-motm-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }\n.ss-g-motm-row { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; border-radius: 14px; border: 1px solid var(--ss-g-line); background: var(--ss-g-surface); color: var(--ss-g-ink); font: inherit; text-align: left; cursor: pointer; }\n.ss-g-motm-row:not(:disabled):hover { border-color: var(--ss-g-line-warm); }\n.ss-g-motm-row:disabled { cursor: default; }\n.ss-g-motm-row--voted { border: 1.5px solid var(--ss-w-accent); background: var(--ss-g-warm); }\n.ss-g-motm-av { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-ink-2); font-size: 13px; font-weight: 700; }\n.ss-g-motm-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-motm-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-motm-pill { flex: none; padding: 3px 8px; font-size: 11px; }\n.ss-g-motm-foot { font-size: 14px; font-weight: 600; }\n.ss-g-motm-fun { font-size: 11px; color: var(--ss-g-faint); }\n\n/* \u2500\u2500 tap-to-answer tray + per-game team-colour band (u503) \u2500\u2500 */\n.ss-g-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }\n.ss-g-tray-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 78px; padding: 6px 4px; border: 1px solid var(--ss-g-line); border-radius: 14px; background: var(--ss-g-surface); color: var(--ss-g-ink); font-family: var(--ss-g-font-body); cursor: pointer; }\n.ss-g-tray-chip:hover, .ss-g-tray-chip:focus-visible { background: var(--ss-g-raised); border-color: var(--ss-w-accent); outline: none; }\n.ss-g-tray-chip:disabled { opacity: .5; cursor: default; }\n.ss-g-tray-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 14px; font-weight: 700; }\n.ss-g-tray-av img { width: 100%; height: 100%; object-fit: cover; }\n.ss-g-tray-name { width: 100%; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }\n.ss-g-tray-first { max-width: 100%; font-size: 10px; font-weight: 500; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-g-tray-last { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* Each game gets its own band colour: the operator accent mixed into the ground, hue-nudged per game.\n   Browsers without relative colour syntax keep the plain accent mix. */\n.ss-g-screen[data-game] { --ss-g-band: color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)); }\n@supports (color: oklch(from red l c h)) {\n  .ss-g-screen[data-game] { --ss-g-band: oklch(from color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)) l calc(c * 1.5) calc(h + var(--ss-g-hue-shift, 0))); }\n}\n.ss-g-screen[data-game=\"mystery-tiger\"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 0; }\n.ss-g-screen[data-game=\"career-path\"] { --ss-g-band-mix: 11%; --ss-g-hue-shift: -24; }\n.ss-g-screen[data-game] > .ss-g-head { background: var(--ss-g-band); border-radius: 0 0 24px 24px; padding-bottom: 12px; }\n.ss-g-worth { flex: none; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ss-g-muted); }\n.ss-g-worth-now { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: var(--ss-w-accent); }\n.ss-g-screen[data-game=\"beat-the-grid\"] { --ss-g-band-mix: 13%; --ss-g-hue-shift: 14; }\n.ss-g-screen[data-game=\"guess-the-xi\"] { --ss-g-band-mix: 12%; --ss-g-hue-shift: -36; }\n.ss-g-screen[data-game=\"higher-or-lower\"] { --ss-g-band-mix: 16%; --ss-g-hue-shift: 28; }\n.ss-g-screen[data-game=\"daily-quiz\"] { --ss-g-band-mix: 10%; --ss-g-hue-shift: -12; }\n.ss-g-screen[data-game=\"stat-ladder\"] { --ss-g-band-mix: 15%; --ss-g-hue-shift: 36; }\n.ss-g-screen[data-game=\"matchday-predictor\"] { --ss-g-band-mix: 18%; --ss-g-hue-shift: -4; }\n.ss-g-screen[data-game=\"starting-xi\"] { --ss-g-band-mix: 9%; --ss-g-hue-shift: -30; }\n.ss-g-screen[data-game=\"fan-motm\"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 8; }\n";
 export { StatsWidget, type StatsWidgetConfig, type StatsWidgetProps, WIDGET_CSS, type WidgetHost, createWidgetHost };