@sensiblestats/widget-react 0.48.10 → 0.50.0

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
  1. package/CHANGELOG.md +17 -0
  2. package/dist/index.cjs +2414 -250
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +2282 -118
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +384 -1
  9. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
8
8
  --ss-w-pos: #1aa563; --ss-w-neg: #e0524b;
9
9
  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;
10
+ --ss-w-correct: #1f9d55; --ss-w-wrong: #b9bbc2;
10
11
  --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;
11
12
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
12
13
  font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);
@@ -18,6 +19,7 @@
18
19
  --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
19
20
  --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
20
21
  --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;
22
+ --ss-w-correct: #37c86b; --ss-w-wrong: #3a3a41;
21
23
  }
22
24
  }
23
25
  .ss-w-root[data-ss-w-theme="dark"] {
@@ -26,12 +28,14 @@
26
28
  --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
27
29
  --ss-w-pos: #37c891; --ss-w-neg: #f0655d;
28
30
  --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;
31
+ --ss-w-correct: #37c86b; --ss-w-wrong: #3a3a41;
29
32
  }
30
33
  .ss-w-root[data-ss-w-theme="light"] {
31
34
  --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
32
35
  --ss-w-ink: #14181d; --ss-w-faint: #6b7580;
33
36
  --ss-w-line: #e4e8ec; --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
34
37
  --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;
38
+ --ss-w-correct: #1f9d55; --ss-w-wrong: #b9bbc2;
35
39
  }
36
40
 
37
41
  /* launcher */
@@ -766,7 +770,12 @@
766
770
  .ss-w-mon-vs { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; }
767
771
  .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); }
768
772
  .ss-w-mon-score i { font-style: normal; color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }
769
- .ss-w-mon-scorers { font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
773
+ .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); }
774
+ .ss-w-mon-scorers-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
775
+ .ss-w-mon-scorers-col li { overflow-wrap: anywhere; }
776
+ .ss-w-mon-scorers-home { text-align: right; }
777
+ .ss-w-mon-scorers-away { text-align: left; }
778
+ .ss-w-mon-scorers-ball { flex: none; align-self: start; line-height: 1.35; }
770
779
  .ss-w-mon-stats { display: flex; flex-direction: column; gap: 10px; }
771
780
  .ss-w-mon-stat { display: flex; flex-direction: column; gap: 5px; }
772
781
  .ss-w-mon-pstrip { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ss-w-accent) 8%, transparent); }
@@ -868,3 +877,377 @@
868
877
  .ss-w-drow-crest { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: contain; background: var(--ss-w-bubble); }
869
878
 
870
879
  .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; }
880
+
881
+ /* ---- Games hub (D2) ---- */
882
+ /* Hub shell: prize banner → chips → game matrix, all in a single column */
883
+ .ss-w-games-hub { display: flex; flex-direction: column; gap: 12px; }
884
+
885
+ /* Prize banner: CTA-tinted card with icon + body column (label + chips) */
886
+ .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)); }
887
+ .ss-w-prize-icon { flex: none; font-size: 20px; line-height: 1; padding-top: 1px; }
888
+ .ss-w-prize-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
889
+ .ss-w-prize-text { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.35; overflow-wrap: anywhere; }
890
+
891
+ /* Hub chips (streak / rank) — NOT .ss-w-chip which belongs to intent chips */
892
+ .ss-w-g-chips { display: flex; gap: 6px; flex-wrap: wrap; }
893
+ .ss-w-g-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; white-space: nowrap; }
894
+ .ss-w-g-chip--streak { color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border-color: var(--ss-w-cta); }
895
+ .ss-w-g-chip--rank { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-accent) 24%, var(--ss-w-line)); }
896
+
897
+ /* Game matrix: 2-column grid of tiles */
898
+ .ss-w-gmatrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
899
+
900
+ /* Game tile: a tappable card with status-driven visual state */
901
+ .ss-w-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; min-width: 0; transition: background .12s ease; }
902
+ .ss-w-tile:not([data-disabled]):hover { background: var(--ss-w-bubble); }
903
+ .ss-w-tile[data-disabled] { opacity: .6; cursor: default; pointer-events: none; }
904
+ .ss-w-tile-icon { font-size: 22px; line-height: 1; }
905
+ .ss-w-tile-title { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.25; overflow-wrap: anywhere; }
906
+ .ss-w-tile-status { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; }
907
+ .ss-w-tile-status--available { color: var(--ss-w-accent); font-weight: 600; }
908
+ .ss-w-tile-status--in_progress { color: var(--ss-w-accent); font-weight: 600; }
909
+ .ss-w-tile-status--played { color: var(--ss-w-correct); font-weight: 700; font-variant-numeric: tabular-nums; }
910
+ .ss-w-tile-status--graded { color: var(--ss-w-correct); font-weight: 700; font-variant-numeric: tabular-nums; }
911
+ /* Skill / For-fun kind chip */
912
+ .ss-w-tile-chip { display: inline-flex; align-self: flex-start; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 7px; margin-top: 2px; }
913
+ .ss-w-tile-chip--skill { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); }
914
+ .ss-w-tile-chip--fun { color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
915
+
916
+ /* Game screen host: back-row + placeholder body */
917
+ .ss-w-gscreen { display: flex; flex-direction: column; gap: 0; }
918
+ .ss-w-gscreen-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0 10px; align-self: flex-start; }
919
+ .ss-w-gscreen-back-arrow { font-size: 11px; font-weight: 700; }
920
+ .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; }
921
+
922
+ /* ---- Leaderboard (D2) ---- */
923
+ /* Outer shell */
924
+ .ss-w-lb2 { display: flex; flex-direction: column; gap: 12px; }
925
+
926
+ /* Segmented control: This week / All time */
927
+ .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; }
928
+ .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; }
929
+ .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); }
930
+
931
+ /* Row list */
932
+ .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); }
933
+ .ss-w-lb2-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ss-w-line); }
934
+ .ss-w-lb2-row:last-child { border-bottom: none; }
935
+ /* Highlighted "you" row: full-width tint via negative margin trick, contained by border-radius above */
936
+ .ss-w-lb2-row--you { background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); }
937
+ .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); }
938
+ .ss-w-lb2-rank--top3 { color: var(--ss-w-cta); }
939
+ .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); }
940
+ .ss-w-lb2-points { flex: none; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
941
+ .ss-w-lb2-streak { flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); padding-left: 4px; }
942
+
943
+ /* Kit-prize separator: a labelled hairline (eyebrow + two growing lines) */
944
+ .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); }
945
+ .ss-w-kitline::before, .ss-w-kitline::after { content: ""; flex: 1; height: 1px; background: var(--ss-w-line); }
946
+
947
+ /* Off-board treatment: dashed pill indicating rank is outside top N */
948
+ .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; }
949
+
950
+ /* ---- Mystery Tiger game screen (D3) ---- */
951
+ .ss-w-gt { display: flex; flex-direction: column; gap: 10px; }
952
+ /* Typeahead wrapper: relative so the dropdown can position under it */
953
+ .ss-w-gtta { position: relative; }
954
+ .ss-w-gtta-i { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); font: inherit; font-size: 13px; outline: none; transition: border-color .12s; }
955
+ .ss-w-gtta-i:focus { border-color: var(--ss-w-accent); }
956
+ .ss-w-gtta-i:disabled { opacity: .5; cursor: not-allowed; }
957
+ .ss-w-gtta-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 10px; max-height: 180px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
958
+ .ss-w-gtta-opt { padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ss-w-ink); border-bottom: 1px solid var(--ss-w-line); }
959
+ .ss-w-gtta-opt:last-child { border-bottom: none; }
960
+ .ss-w-gtta-opt:hover { background: var(--ss-w-bubble); }
961
+ /* Column header labels: one cell per attribute */
962
+ .ss-w-gthdr { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; padding: 0 2px; }
963
+ .ss-w-gthdr-c { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
964
+ .ss-w-gthdr-c--name { text-align: left; }
965
+ /* Guess rows */
966
+ .ss-w-gtrows { display: flex; flex-direction: column; gap: 4px; }
967
+ .ss-w-gtrow { display: grid; grid-template-columns: 1fr repeat(5, 36px); gap: 4px; align-items: center; }
968
+ .ss-w-gtrow-nm { font-size: 12px; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
969
+ /* Verdict tiles */
970
+ .ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; gap: 1px; transition: transform .1s; }
971
+ .ss-w-gtile--exact { background: var(--ss-w-correct); color: #fff; }
972
+ .ss-w-gtile--near { background: var(--ss-w-cta); color: var(--ss-w-cta-ink, #fff); }
973
+ .ss-w-gtile--miss { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
974
+ .ss-w-gtile-dir { font-size: 11px; line-height: 1; }
975
+ /* Hint line */
976
+ .ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
977
+ /* Outcome banner: shown when solved or failed */
978
+ .ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
979
+ .ss-w-gt-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
980
+ .ss-w-gt-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
981
+ .ss-w-gt-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
982
+ .ss-w-gt-banner-label { font-size: 12px; color: var(--ss-w-faint); }
983
+
984
+ /* ---- Higher or Lower game screen (D3) ---- */
985
+ .ss-w-hl { display: flex; flex-direction: column; gap: 12px; }
986
+ /* Stat context header: family name + season */
987
+ .ss-w-hlctx { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
988
+ .ss-w-hlctx-fam { font-size: 14px; font-weight: 750; color: var(--ss-w-ink); }
989
+ .ss-w-hlctx-szn { font-size: 11.5px; color: var(--ss-w-faint); font-weight: 500; }
990
+ /* Score chip */
991
+ .ss-w-hl-score { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 3px 10px; }
992
+ /* Pair card: two player cards + divider */
993
+ .ss-w-hlpair { display: flex; align-items: stretch; gap: 0; border-radius: 14px; border: 1.5px solid var(--ss-w-line); overflow: hidden; background: var(--ss-w-panel); }
994
+ /* Player card */
995
+ .ss-w-hlpc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; }
996
+ .ss-w-hlpc--b { border-left: 1px solid var(--ss-w-line); }
997
+ .ss-w-hlpc-name { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.25; word-break: break-word; min-width: 0; }
998
+ .ss-w-hlpc-val { font-size: 22px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
999
+ .ss-w-hlpc-val--hidden { color: var(--ss-w-faint); font-size: 26px; }
1000
+ .ss-w-hlpc-val--correct { color: var(--ss-w-correct); }
1001
+ .ss-w-hlpc-val--wrong { color: var(--ss-w-cta); }
1002
+ .ss-w-hlpc-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 2px 8px; }
1003
+ .ss-w-hlpc-badge--correct { color: #fff; background: var(--ss-w-correct); }
1004
+ .ss-w-hlpc-badge--wrong { color: var(--ss-w-cta-ink, #fff); background: var(--ss-w-cta); }
1005
+ /* Higher / Lower buttons */
1006
+ .ss-w-hlbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
1007
+ .ss-w-hlbtn { padding: 11px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .1s, border-color .1s, color .1s; }
1008
+ .ss-w-hlbtn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); color: var(--ss-w-accent); }
1009
+ .ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
1010
+ /* Answered pair result rows */
1011
+ .ss-w-hlresults { display: flex; flex-direction: column; gap: 4px; }
1012
+ .ss-w-hlrrow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; background: var(--ss-w-bubble); }
1013
+ .ss-w-hlrrow--correct { background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
1014
+ .ss-w-hlrrow--wrong { background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); }
1015
+ .ss-w-hlrrow-names { flex: 1; min-width: 0; font-weight: 600; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1016
+ .ss-w-hlrrow-pick { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-faint); }
1017
+ .ss-w-hlrrow-icon { font-size: 14px; flex: none; }
1018
+
1019
+ /* ---- Career Path game screen (D3) ---- */
1020
+ .ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
1021
+ /* Context header */
1022
+ .ss-w-cpath-ctx { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
1023
+ .ss-w-cpath-ctx-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
1024
+ .ss-w-cpath-ctx-count { font-size: 12px; font-weight: 600; color: var(--ss-w-accent); }
1025
+ /* Career path: vertical timeline of club spells */
1026
+ .ss-w-cpath-path { display: flex; flex-direction: column; gap: 4px; }
1027
+ /* Single club card */
1028
+ .ss-w-cpath-club { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
1029
+ .ss-w-cpath-club--loan { border-style: dashed; }
1030
+ /* Crest image / fallback */
1031
+ .ss-w-cpath-crest { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 4px; }
1032
+ .ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; }
1033
+ /* Club info: name + years */
1034
+ .ss-w-cpath-club-info { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; flex-wrap: wrap; }
1035
+ .ss-w-cpath-club-name { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1036
+ .ss-w-cpath-spell-yr { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
1037
+ .ss-w-cpath-loan-badge { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-cta) 15%, var(--ss-w-panel)); color: var(--ss-w-cta-ink, #1b1300); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 30%, var(--ss-w-line)); flex: none; }
1038
+ /* Hidden clubs indicator */
1039
+ .ss-w-cpath-hidden { font-size: 11.5px; color: var(--ss-w-faint); font-style: italic; text-align: center; padding: 6px 0 2px; }
1040
+ /* Hint line */
1041
+ .ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 2px 0; font-style: italic; }
1042
+ /* Outcome banner */
1043
+ .ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; border-radius: 12px; text-align: center; }
1044
+ .ss-w-cpath-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
1045
+ .ss-w-cpath-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
1046
+ .ss-w-cpath-banner-name { font-size: 16px; font-weight: 750; color: var(--ss-w-ink); }
1047
+ .ss-w-cpath-banner-label { font-size: 12px; color: var(--ss-w-faint); }
1048
+
1049
+ /* ---- Beat the Grid game screen (D3) ---- */
1050
+ .ss-w-btg { display: flex; flex-direction: column; gap: 10px; }
1051
+ /* Score/context row */
1052
+ .ss-w-btg-ctx { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
1053
+ .ss-w-btg-ctx-score { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
1054
+ .ss-w-btg-ctx-left { font-size: 12px; color: var(--ss-w-faint); font-weight: 500; }
1055
+ .ss-w-btg-ctx-done { font-size: 12px; font-weight: 700; color: var(--ss-w-correct); }
1056
+ /* Grid layout — col count driven inline via style */
1057
+ .ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
1058
+ /* Generic grid cell */
1059
+ .ss-w-btg-gc { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 8px; min-height: 42px; padding: 4px; font-size: 11px; word-break: break-word; line-height: 1.2; }
1060
+ /* Corner placeholder */
1061
+ .ss-w-btg-gc--corner { background: none; }
1062
+ /* Column header */
1063
+ .ss-w-btg-gc--colhdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
1064
+ /* Row header */
1065
+ .ss-w-btg-gc--rowhdr { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); writing-mode: horizontal-tb; }
1066
+ /* Interactive cells */
1067
+ .ss-w-btg-cell { flex-direction: column; gap: 2px; cursor: pointer; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); transition: border-color .12s, background .12s; }
1068
+ .ss-w-btg-cell:hover:not(:disabled) { border-color: var(--ss-w-accent); background: var(--ss-w-bubble); }
1069
+ .ss-w-btg-cell:disabled { cursor: not-allowed; opacity: .75; }
1070
+ .ss-w-btg-cell--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); }
1071
+ .ss-w-btg-cell--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); }
1072
+ .ss-w-btg-cell--active { border-color: var(--ss-w-accent); }
1073
+ .ss-w-btg-cell-score { font-size: 14px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
1074
+ .ss-w-btg-cell-check { font-size: 12px; color: var(--ss-w-correct); line-height: 1; }
1075
+ .ss-w-btg-cell-empty { font-size: 16px; color: var(--ss-w-faint); }
1076
+ /* Scoped search sheet: slides up over the grid */
1077
+ .ss-w-btg-sheet { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
1078
+ .ss-w-btg-sheet-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
1079
+ .ss-w-btg-sheet-ctx { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
1080
+ .ss-w-btg-sheet-row { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }
1081
+ .ss-w-btg-sheet-sep { font-size: 13px; color: var(--ss-w-faint); font-weight: 500; }
1082
+ .ss-w-btg-sheet-col { font-size: 12.5px; font-weight: 700; color: var(--ss-w-accent); }
1083
+ .ss-w-btg-sheet-close { background: none; border: none; cursor: pointer; font-size: 14px; color: var(--ss-w-faint); padding: 2px 6px; border-radius: 6px; line-height: 1; font: inherit; }
1084
+ .ss-w-btg-sheet-close:hover { color: var(--ss-w-ink); background: var(--ss-w-bubble); }
1085
+
1086
+ /* ---- Guess the XI game screen (D3) ---- */
1087
+ .ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
1088
+ /* Context label (pool label) */
1089
+ .ss-w-gxi-ctx { display: flex; align-items: center; }
1090
+ .ss-w-gxi-ctx-label { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .05em; }
1091
+ /* Positions pitch: compact slot grid */
1092
+ .ss-w-gxi-pitch { display: flex; flex-wrap: wrap; gap: 5px; }
1093
+ .ss-w-gxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 6px 10px; min-width: 52px; }
1094
+ .ss-w-gxi-pslot-pos { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-accent); }
1095
+ .ss-w-gxi-pslot-nat { font-size: 10px; color: var(--ss-w-faint); font-weight: 500; text-align: center; line-height: 1.2; }
1096
+ /* Earned reveals */
1097
+ .ss-w-gxi-reveals { display: flex; flex-direction: column; gap: 4px; }
1098
+ .ss-w-gxi-reveal { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-cta) 22%, var(--ss-w-line)); border-radius: 8px; }
1099
+ .ss-w-gxi-reveal-slot { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-cta-ink, #1b1300); background: var(--ss-w-cta); border-radius: 6px; padding: 1px 6px; flex: none; }
1100
+ .ss-w-gxi-reveal-val { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
1101
+ /* Team pool: responsive flex grid of buttons */
1102
+ .ss-w-gxi-pool { display: flex; flex-wrap: wrap; gap: 6px; }
1103
+ .ss-w-gxi-team-btn { font: inherit; font-size: 12.5px; font-weight: 650; border-radius: 10px; padding: 9px 14px; cursor: pointer; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); color: var(--ss-w-ink); transition: background .1s, border-color .1s; }
1104
+ .ss-w-gxi-team-btn:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1105
+ .ss-w-gxi-team-btn:disabled { opacity: .5; cursor: not-allowed; }
1106
+ .ss-w-gxi-team-btn--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); color: var(--ss-w-correct); }
1107
+ .ss-w-gxi-team-btn--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); text-decoration: line-through; opacity: .65; }
1108
+ /* Outcome banner */
1109
+ .ss-w-gxi-banner { display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 10px; }
1110
+ .ss-w-gxi-banner--solved { background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
1111
+ .ss-w-gxi-banner--failed { background: color-mix(in srgb, var(--ss-w-wrong) 8%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); }
1112
+ .ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
1113
+ /* Hint line */
1114
+ .ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
1115
+
1116
+ /* ---- Daily Quiz game screen (D3) ---- */
1117
+ .ss-w-dq { display: flex; flex-direction: column; gap: 14px; }
1118
+ /* Score banner (post-reveal) */
1119
+ .ss-w-dq-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 10px; background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); border-radius: 12px; }
1120
+ .ss-w-dq-score-val { font-size: 26px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
1121
+ .ss-w-dq-score-label { font-size: 13px; font-weight: 650; color: var(--ss-w-faint); }
1122
+ /* Progress bar */
1123
+ .ss-w-dq-prog { height: 4px; border-radius: 999px; background: var(--ss-w-bubble); overflow: hidden; }
1124
+ .ss-w-dq-prog-fill { height: 100%; border-radius: 999px; background: var(--ss-w-accent); transition: width .25s ease; }
1125
+ /* Questions list */
1126
+ .ss-w-dq-questions { display: flex; flex-direction: column; gap: 16px; }
1127
+ /* Single question */
1128
+ .ss-w-dq-q { display: flex; flex-direction: column; gap: 8px; }
1129
+ .ss-w-dq-qstem { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.4; }
1130
+ /* Options grid: 2 across */
1131
+ .ss-w-dq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
1132
+ .ss-w-dq-qopt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; color: var(--ss-w-ink); transition: background .1s, border-color .1s; }
1133
+ .ss-w-dq-qopt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1134
+ .ss-w-dq-qopt:disabled { cursor: not-allowed; }
1135
+ .ss-w-dq-qopt--selected { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); }
1136
+ .ss-w-dq-qopt--correct { border-color: var(--ss-w-correct); background: color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)); color: var(--ss-w-correct); }
1137
+ .ss-w-dq-qopt--wrong { border-color: color-mix(in srgb, var(--ss-w-cta) 50%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-cta) 8%, var(--ss-w-panel)); opacity: .75; }
1138
+ /* Option letter badge */
1139
+ .ss-w-dq-qopt-letter { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--ss-w-faint); }
1140
+ .ss-w-dq-qopt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1141
+ /* Why/reveal text */
1142
+ .ss-w-dq-qwhy { font-size: 11.5px; padding: 6px 10px; border-radius: 8px; line-height: 1.4; }
1143
+ .ss-w-dq-qwhy--correct { background: color-mix(in srgb, var(--ss-w-correct) 9%, var(--ss-w-panel)); color: var(--ss-w-correct); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 22%, var(--ss-w-line)); }
1144
+ .ss-w-dq-qwhy--wrong { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
1145
+ /* Submit button */
1146
+ .ss-w-dq-submit { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
1147
+ .ss-w-dq-submit:disabled { opacity: .4; cursor: not-allowed; }
1148
+ .ss-w-dq-submit:hover:not(:disabled) { opacity: .88; }
1149
+
1150
+ /* ── Matchday Predictor ──────────────────────────────────────────────────── */
1151
+ .ss-w-mp { display: flex; flex-direction: column; gap: 14px; }
1152
+ /* Score prediction row */
1153
+ .ss-w-mp-pred-score { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }
1154
+ .ss-w-mp-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
1155
+ .ss-w-mp-team-name { font-size: 12px; font-weight: 650; color: var(--ss-w-ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
1156
+ .ss-w-mp-stepper { display: flex; align-items: center; gap: 8px; }
1157
+ .ss-w-mp-stepper-btn { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 18px; font-weight: 700; color: var(--ss-w-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .1s; }
1158
+ .ss-w-mp-stepper-btn:hover:not(:disabled) { background: var(--ss-w-bubble); }
1159
+ .ss-w-mp-stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
1160
+ .ss-w-mp-stepper-val { font-size: 26px; font-weight: 800; color: var(--ss-w-ink); min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
1161
+ .ss-w-mp-sep { font-size: 22px; font-weight: 700; color: var(--ss-w-faint); padding: 0 4px; }
1162
+ /* First-scorer picker */
1163
+ .ss-w-mp-scorer { display: flex; flex-direction: column; gap: 6px; }
1164
+ .ss-w-mp-scorer-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
1165
+ .ss-w-mp-scorer-list { display: flex; flex-wrap: wrap; gap: 6px; }
1166
+ .ss-w-mp-scorer-opt { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-ink); cursor: pointer; transition: background .1s, border-color .1s; }
1167
+ .ss-w-mp-scorer-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1168
+ .ss-w-mp-scorer-opt--selected { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); color: var(--ss-w-accent); }
1169
+ .ss-w-mp-scorer-opt:disabled { opacity: .35; cursor: not-allowed; }
1170
+ /* Save button */
1171
+ .ss-w-mp-savebtn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
1172
+ .ss-w-mp-savebtn:disabled { opacity: .4; cursor: not-allowed; }
1173
+ .ss-w-mp-savebtn:hover:not(:disabled) { opacity: .88; }
1174
+ /* Live / pending state */
1175
+ .ss-w-mp-live { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 14px 0; }
1176
+ .ss-w-mp-live-score { font-size: 30px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
1177
+ .ss-w-mp-live-label { font-size: 12px; color: var(--ss-w-faint); font-style: italic; }
1178
+ .ss-w-mp-live-outcome { display: flex; flex-direction: column; gap: 6px; width: 100%; }
1179
+ .ss-w-mp-live-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 10px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); font-size: 12.5px; }
1180
+ .ss-w-mp-live-row--correct { border-color: color-mix(in srgb, var(--ss-w-correct) 40%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
1181
+ .ss-w-mp-live-row-key { color: var(--ss-w-faint); font-weight: 600; }
1182
+ .ss-w-mp-live-row-val { font-weight: 700; color: var(--ss-w-ink); }
1183
+ .ss-w-mp-live-row--correct .ss-w-mp-live-row-val { color: var(--ss-w-correct); }
1184
+ /* For-fun note */
1185
+ .ss-w-mp-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
1186
+
1187
+ /* ── Starting XI ─────────────────────────────────────────────────────────── */
1188
+ .ss-w-sxi { display: flex; flex-direction: column; gap: 14px; }
1189
+ .ss-w-sxi-formation { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
1190
+ /* Formation pitch area */
1191
+ .ss-w-sxi-pitch { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px; border-radius: 12px; background: color-mix(in srgb, var(--ss-w-accent) 4%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); min-height: 260px; }
1192
+ .ss-w-sxi-pitch-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
1193
+ /* Player slot */
1194
+ .ss-w-sxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; cursor: pointer; }
1195
+ .ss-w-sxi-pslot-num { width: 36px; height: 36px; border-radius: 50%; border: 2px dashed var(--ss-w-line); background: var(--ss-w-bubble); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); transition: border-color .1s, background .1s; }
1196
+ .ss-w-sxi-pslot--filled .ss-w-sxi-pslot-num { border-style: solid; border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); color: var(--ss-w-accent); }
1197
+ .ss-w-sxi-pslot-name { font-size: 9.5px; font-weight: 600; color: var(--ss-w-ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
1198
+ /* Squad picker */
1199
+ .ss-w-sxi-squad { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
1200
+ .ss-w-sxi-squad-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); cursor: pointer; transition: background .1s; }
1201
+ .ss-w-sxi-squad-row:hover:not(.ss-w-sxi-squad-row--picked) { background: var(--ss-w-bubble); }
1202
+ .ss-w-sxi-squad-row--picked { background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border-color: var(--ss-w-accent); }
1203
+ .ss-w-sxi-squad-name { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
1204
+ .ss-w-sxi-squad-pos { font-size: 10.5px; color: var(--ss-w-faint); }
1205
+ .ss-w-sxi-savebtn { width: 100%; padding: 13px; border-radius: 12px; border: none; background: var(--ss-w-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
1206
+ .ss-w-sxi-savebtn:disabled { opacity: .4; cursor: not-allowed; }
1207
+ .ss-w-sxi-savebtn:hover:not(:disabled) { opacity: .88; }
1208
+ /* Pending / graded states */
1209
+ .ss-w-sxi-status { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 12px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); text-align: center; }
1210
+ .ss-w-sxi-status--graded { background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); }
1211
+ .ss-w-sxi-status-score { font-size: 28px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
1212
+ .ss-w-sxi-status-label { font-size: 12.5px; color: var(--ss-w-faint); }
1213
+
1214
+ /* ── Stat Ladder ─────────────────────────────────────────────────────────── */
1215
+ .ss-w-sl { display: flex; flex-direction: column; gap: 14px; }
1216
+ .ss-w-sl-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
1217
+ /* Ladder list */
1218
+ .ss-w-sl-ladder { display: flex; flex-direction: column; gap: 6px; }
1219
+ .ss-w-sl-lrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ss-w-line); background: var(--ss-w-panel); }
1220
+ .ss-w-sl-lrow-rank { font-size: 11px; font-weight: 800; color: var(--ss-w-faint); width: 18px; flex: none; text-align: center; }
1221
+ .ss-w-sl-lrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); }
1222
+ .ss-w-sl-lrow-stat { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
1223
+ /* Mystery rung */
1224
+ .ss-w-sl-mystery { border: 1.5px dashed var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 5%, var(--ss-w-panel)); }
1225
+ .ss-w-sl-mystery .ss-w-sl-lrow-name { color: var(--ss-w-faint); font-style: italic; }
1226
+ /* Reveal overlay: correct / wrong */
1227
+ .ss-w-sl-lrow--correct { border-color: color-mix(in srgb, var(--ss-w-correct) 40%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-correct) 8%, var(--ss-w-panel)); }
1228
+ .ss-w-sl-lrow--wrong { border-color: color-mix(in srgb, var(--ss-w-wrong, #e05050) 30%, var(--ss-w-line)); background: color-mix(in srgb, var(--ss-w-wrong, #e05050) 6%, var(--ss-w-panel)); }
1229
+ /* Player picker */
1230
+ .ss-w-sl-picker { display: flex; flex-wrap: wrap; gap: 6px; }
1231
+ .ss-w-sl-picker-opt { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); font: inherit; font-size: 12px; font-weight: 600; color: var(--ss-w-ink); cursor: pointer; transition: background .1s, border-color .1s; }
1232
+ .ss-w-sl-picker-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1233
+ .ss-w-sl-picker-opt:disabled { opacity: .35; cursor: not-allowed; }
1234
+ .ss-w-sl-reveal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); }
1235
+ .ss-w-sl-reveal--correct { background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-correct) 28%, var(--ss-w-line)); color: var(--ss-w-correct); }
1236
+ .ss-w-sl-reveal--wrong { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); }
1237
+
1238
+ /* ── Fan MOTM ────────────────────────────────────────────────────────────── */
1239
+ .ss-w-motm { display: flex; flex-direction: column; gap: 14px; }
1240
+ .ss-w-motm-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
1241
+ /* Vote candidate list */
1242
+ .ss-w-motm-votes { display: flex; flex-direction: column; gap: 6px; }
1243
+ .ss-w-motm-vrow { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--ss-w-line); background: var(--ss-w-panel); cursor: pointer; transition: background .1s, border-color .1s; position: relative; overflow: hidden; }
1244
+ .ss-w-motm-vrow:hover:not(.ss-w-motm-vrow--voted):not(.ss-w-motm-vrow--result) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1245
+ .ss-w-motm-vrow--voted { border-color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); cursor: default; }
1246
+ .ss-w-motm-vrow--result { cursor: default; }
1247
+ .ss-w-motm-vrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); position: relative; z-index: 1; }
1248
+ .ss-w-motm-vrow-pct { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
1249
+ /* Share fill bar (behind content) */
1250
+ .ss-w-motm-vfill { position: absolute; top: 0; left: 0; height: 100%; background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); transition: width .4s ease; pointer-events: none; }
1251
+ .ss-w-motm-vrow--voted .ss-w-motm-vfill { background: color-mix(in srgb, var(--ss-w-accent) 18%, var(--ss-w-panel)); }
1252
+ /* For-fun note */
1253
+ .ss-w-motm-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sensiblestats/widget-react",
3
- "version": "0.48.10",
3
+ "version": "0.50.0",
4
4
  "description": "Embeddable SensibleStats chat widget for React.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -37,7 +37,7 @@
37
37
  "prepublishOnly": "yarn build"
38
38
  },
39
39
  "dependencies": {
40
- "@sensiblestats/widget-sdk": "^0.35.2",
40
+ "@sensiblestats/widget-sdk": "^0.35.3",
41
41
  "react-markdown": "^9.0.1",
42
42
  "remark-gfm": "^4.0.0"
43
43
  },