@sensiblestats/widget-react 0.59.1 → 0.60.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
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.cjs +2604 -1561
  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 +2583 -1540
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +422 -423
  9. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -38,6 +38,111 @@
38
38
  --ss-w-correct: #1f9d55; --ss-w-wrong: #b9bbc2;
39
39
  }
40
40
 
41
+ /* ── games design tokens (u393) ── derived from operator tokens so every tenant theme works.
42
+ Targets (Hull #F5A800/#0B0B0B/#F5F5F5): ground #0D0C0A, surface #17150F, warm #1C1810,
43
+ raised #211E17, line #26221A, line-warm #3A2F18, accent-tint #3A2C10, strong-line #4A4131. */
44
+ .ss-w-root {
45
+ --ss-g-ground: color-mix(in srgb, var(--ss-w-accent) 2%, var(--ss-w-panel));
46
+ --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)));
47
+ --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)));
48
+ --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)));
49
+ --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)));
50
+ --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)));
51
+ --ss-g-accent-tint: color-mix(in srgb, var(--ss-w-accent) 20%, var(--ss-w-panel));
52
+ --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)));
53
+ --ss-g-ink: color-mix(in srgb, var(--ss-w-accent) 4%, var(--ss-w-ink));
54
+ --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)));
55
+ --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)));
56
+ --ss-g-faint: color-mix(in srgb, var(--ss-w-ink) 45%, var(--ss-w-panel));
57
+ --ss-g-on-accent: #1a1206;
58
+ --ss-g-on-correct: #fff;
59
+ --ss-g-correct: color-mix(in srgb, var(--ss-w-correct) 55%, #000);
60
+ --ss-g-wrong: color-mix(in srgb, var(--ss-w-neg) 55%, #000);
61
+ /* Brighter wrong for thin marks (borders, icons, segments) that must read on dark surfaces; --ss-g-wrong stays for fills. */
62
+ --ss-g-wrong-mark: var(--ss-w-neg);
63
+ --ss-g-success: color-mix(in srgb, var(--ss-w-pos) 80%, var(--ss-w-ink));
64
+ --ss-g-success-tint: color-mix(in srgb, var(--ss-w-pos) 18%, var(--ss-w-panel));
65
+ --ss-g-close: #e3b341;
66
+ --ss-g-flame: #ff6a1a;
67
+ /* Pitch colours are fixed in both themes: the pitch is always a dark green. */
68
+ --ss-g-pitch: #123524;
69
+ --ss-g-pitch-line: #3e7055;
70
+ --ss-g-pitch-chip: #0d0c0a;
71
+ --ss-g-pitch-ink: #f4efe6;
72
+ --ss-g-pitch-mark: #c9d6cd;
73
+ --ss-g-font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
74
+ --ss-g-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
75
+ }
76
+
77
+ /* ── games ui kit (u393) ── */
78
+ .ss-g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
79
+ .ss-g-head { display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 6px; font-family: var(--ss-g-font-body); }
80
+ .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; }
81
+ .ss-g-back:hover { background: var(--ss-g-surface); }
82
+ .ss-g-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
83
+ .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; }
84
+ .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; }
85
+ .ss-g-head-right { flex: none; }
86
+ .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; }
87
+ .ss-g-chip--neutral { background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); color: var(--ss-g-ink); }
88
+ .ss-g-chip--neutral .ss-g-num, .ss-g-chip--neutral svg { color: var(--ss-w-accent); }
89
+ .ss-g-chip--accent { background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font-weight: 700; }
90
+ .ss-g-chip--success { background: var(--ss-g-success-tint); color: var(--ss-g-success); font-weight: 700; }
91
+ .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); }
92
+ .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); }
93
+ .ss-g-statstack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
94
+ .ss-g-statstack-v { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; color: var(--ss-w-accent); }
95
+ .ss-g-statstack-l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }
96
+ .ss-g-progress { display: flex; align-items: center; gap: 12px; padding: 0 16px 8px; }
97
+ .ss-g-progress-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }
98
+ .ss-g-progress-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ss-g-ink); }
99
+ .ss-g-progress-rl { color: var(--ss-g-muted); }
100
+ .ss-g-segs { display: grid; gap: 4px; }
101
+ .ss-g-seg { height: 5px; border-radius: 3px; background: var(--ss-g-line); }
102
+ .ss-g-seg[data-state="done"] { background: var(--ss-g-strong-line); }
103
+ .ss-g-seg[data-state="current"] { background: var(--ss-w-accent); }
104
+ .ss-g-seg[data-state="correct"] { background: var(--ss-g-correct); }
105
+ .ss-g-seg[data-state="wrong"] { background: var(--ss-g-wrong-mark); }
106
+ .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; }
107
+ .ss-g-btn:disabled { opacity: .45; cursor: default; }
108
+ .ss-g-btn--block { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 800; }
109
+ .ss-g-btn--primary { border: 0; background: var(--ss-w-accent); color: var(--ss-g-on-accent); }
110
+ .ss-g-btn--outline { border: 1.5px solid var(--ss-g-strong-line); background: transparent; color: var(--ss-g-ink); }
111
+ .ss-g-btn--accent-outline { border: 1.5px solid var(--ss-w-accent); background: transparent; color: var(--ss-w-accent); }
112
+ .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; }
113
+ .ss-g-search { display: flex; flex-direction: column; gap: 6px; }
114
+ .ss-g-search-label { font-size: 12px; font-weight: 600; color: var(--ss-g-muted); }
115
+ .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); }
116
+ .ss-g-search-box:focus-within { border-color: var(--ss-w-accent); }
117
+ .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); }
118
+ .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); }
119
+ .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); }
120
+ .ss-g-sil--selected { background: var(--ss-g-accent-tint); color: color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-g-raised)); }
121
+ .ss-g-sil--mystery { background: var(--ss-g-accent-tint); color: var(--ss-g-ground); }
122
+ .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); }
123
+ .ss-g-crest { flex: none; object-fit: contain; }
124
+ .ss-g-crest--ph { color: var(--ss-g-strong-line); }
125
+ .ss-g-pitch-svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--ss-g-pitch-line); stroke-width: .6; }
126
+ /* ── games screen scaffold (u393) — shared by every game screen ── */
127
+ .ss-w-gscreen > .ss-g-screen { flex: 1; min-height: 0; }
128
+ .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); }
129
+ .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; }
130
+ .ss-g-body .ss-g-progress { padding: 0; }
131
+ .ss-g-loading { align-items: center; justify-content: center; color: var(--ss-g-muted); font-size: 13px; }
132
+ .ss-g-opts { display: flex; flex-direction: column; gap: 4px; max-height: 232px; overflow-y: auto; }
133
+ .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; }
134
+ .ss-g-opt:hover, .ss-g-opt:focus-visible { background: var(--ss-g-raised); outline: none; }
135
+ .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; }
136
+ .ss-g-opt-av img { width: 100%; height: 100%; object-fit: cover; }
137
+ .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); }
138
+ .ss-g-result[data-tone="win"] { border-color: var(--ss-g-correct); }
139
+ .ss-g-result[data-tone="lose"] { border-color: var(--ss-g-wrong-mark); }
140
+ .ss-g-result-title { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; line-height: 1; }
141
+ .ss-g-result-score { font-size: 13px; font-weight: 700; color: var(--ss-g-muted); }
142
+ .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; }
143
+ .ss-g-result-detail { font-size: 13px; color: var(--ss-g-ink-2); }
144
+ .ss-g-result .ss-g-btn { margin-top: 6px; }
145
+
41
146
  /* launcher */
42
147
  .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; }
43
148
  .ss-w-root[data-ss-w-pos="right"] .ss-w-fab-wrap { right: var(--ss-w-offset-x); }
@@ -878,71 +983,191 @@
878
983
 
879
984
  .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
985
 
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) */
986
+ /* Prize banner: CTA-tinted card with icon + body column (label + chips) — still used by
987
+ LeaderboardEmpty.tsx's weekly-prize callout. */
886
988
  .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
989
  .ss-w-prize-icon { flex: none; font-size: 20px; line-height: 1; padding-top: 1px; }
888
990
  .ss-w-prize-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
889
991
  .ss-w-prize-text { font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.35; overflow-wrap: anywhere; }
890
992
 
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
- /* Game screen fills the panel; the board scrolls internally and the search/input bar stays
918
- pinned at the bottom so the fan never has to scroll to reach it. */
919
- .ss-w-gscreen-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px; overflow: hidden; }
993
+ /* ── games hub (u393) ── */
994
+ .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); }
995
+ .ss-g-hub { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 20px; }
996
+ .ss-g-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
997
+ .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; }
998
+ .ss-g-stat-l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }
999
+ .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; }
1000
+ .ss-g-stat-v svg { color: var(--ss-g-flame); align-self: center; }
1001
+ .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; }
1002
+ .ss-g-stat-v--accent { color: var(--ss-w-accent); }
1003
+ .ss-g-prize { align-self: flex-start; }
1004
+ .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; }
1005
+ .ss-g-tile:not([data-disabled]):hover { border-color: var(--ss-g-line-warm); }
1006
+ .ss-g-tile[data-disabled] { opacity: .55; cursor: default; }
1007
+ .ss-g-tile--tile { height: 148px; }
1008
+ .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; }
1009
+ .ss-g-art { width: 100%; height: 100%; }
1010
+ .ss-g-art-fg { fill: var(--ss-g-strong-line); }
1011
+ .ss-g-art-accent { fill: var(--ss-w-accent); }
1012
+ .ss-g-art-accent-stroke { fill: none; stroke: var(--ss-w-accent); stroke-width: 2; }
1013
+ .ss-g-art-dot { fill: var(--ss-g-pitch-mark); }
1014
+ .ss-g-art-pitch { fill: var(--ss-g-pitch); stroke: var(--ss-g-pitch-line); }
1015
+ .ss-g-art-block { fill: var(--ss-g-line); }
1016
+ .ss-g-art-correct { fill: var(--ss-g-correct); }
1017
+ .ss-g-art-dash { fill: none; stroke: var(--ss-g-strong-line); stroke-dasharray: 3 2; stroke-width: 1.5; }
1018
+ .ss-g-art-line { stroke: var(--ss-g-line-warm); stroke-width: 2; }
1019
+ .ss-g-art-ink { fill: none; stroke: var(--ss-g-on-accent); stroke-width: 2; }
1020
+ .ss-g-art-q { fill: var(--ss-w-accent); font: 800 20px var(--ss-g-font-display); }
1021
+ .ss-g-tile-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1022
+ .ss-g-tile-status { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1023
+ .ss-g-tile-status[data-tone="accent"] { color: var(--ss-w-accent); font-weight: 600; }
1024
+ .ss-g-tile-status[data-tone="success"] { color: var(--ss-g-success); font-weight: 700; }
1025
+ .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); }
1026
+ .ss-g-hero-text { flex: 0 0 60%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px; min-width: 0; }
1027
+ .ss-g-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-w-accent); }
1028
+ .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; }
1029
+ .ss-g-hero-sub { font-size: 14px; color: var(--ss-g-ink-2); }
1030
+ .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; }
1031
+ .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); }
1032
+ .ss-g-sec { display: flex; flex-direction: column; gap: 10px; }
1033
+ .ss-g-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
1034
+ .ss-g-sec-head h3 { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
1035
+ .ss-g-sec-head span { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; }
1036
+ .ss-g-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
1037
+ .ss-g-tile--wide { flex-direction: row; align-items: center; gap: 14px; min-height: 104px; }
1038
+ .ss-g-wide-art { width: 84px; height: 84px; flex: none; border-radius: 10px; background: var(--ss-g-raised); }
1039
+ .ss-g-wide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
1040
+ .ss-g-wide-chev { color: var(--ss-g-muted); transform: rotate(180deg); display: flex; }
1041
+
1042
+ /* ── Mystery Tiger (u393) ── */
1043
+ .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; }
1044
+ .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); }
1045
+ .ss-g-mt-portrait .ss-g-sil { font-size: 46px; }
1046
+ .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); }
1047
+ .ss-g-mt-photo img { width: 100%; height: 100%; object-fit: cover; }
1048
+ .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; }
1049
+ .ss-g-mt-known { display: grid; gap: 6px; padding: 12px; }
1050
+ .ss-g-mt-known-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
1051
+ .ss-g-mt-lab { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }
1052
+ .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; }
1053
+ .ss-g-mt-known-v[data-state="known"] { background: var(--ss-g-correct); color: var(--ss-g-on-correct); font-size: 18px; }
1054
+ .ss-g-mt-known-v[data-state="range"] { border: 1px dashed var(--ss-g-strong-line); }
1055
+ .ss-g-mt-table { display: flex; flex-direction: column; gap: 8px; }
1056
+ .ss-g-mt-thead, .ss-g-mt-row { display: grid; gap: 5px; align-items: center; }
1057
+ .ss-g-mt-thead { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }
1058
+ .ss-g-mt-thead span:not(:first-child) { text-align: center; }
1059
+ .ss-g-mt-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
1060
+ .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; }
1061
+ .ss-g-mt-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
1062
+ .ss-g-mt-first { font-size: 11px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1063
+ .ss-g-mt-last { font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1064
+ .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; }
1065
+ .ss-g-mt-cell[data-verdict="exact"] { background: var(--ss-g-correct); border-color: transparent; color: var(--ss-g-on-correct); }
1066
+ .ss-g-mt-cell[data-verdict="near"] { background: var(--ss-g-close); border-color: transparent; color: var(--ss-g-on-accent); }
1067
+ .ss-g-mt-cell-dir { font-size: 10px; margin-top: 2px; }
1068
+ .ss-g-mt-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ss-g-muted); }
1069
+ .ss-g-mt-legend span { display: inline-flex; align-items: center; gap: 6px; }
1070
+ .ss-g-mt-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
1071
+ .ss-g-mt-sw[data-verdict="exact"] { background: var(--ss-g-correct); }
1072
+ .ss-g-mt-sw[data-verdict="near"] { background: var(--ss-g-close); }
1073
+ .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); }
1074
+ .ss-g-mt-hint svg { color: var(--ss-w-accent); flex: none; margin-top: 1px; }
1075
+
1076
+ /* ── Higher or Lower (u393) ── */
1077
+ .ss-g-hl-prompt { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
1078
+ .ss-g-hl-prompt-q { font-size: 13px; color: var(--ss-g-muted); }
1079
+ .ss-g-hl-prompt-stat { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
1080
+ .ss-g-hl-prompt-season { font-size: 12px; color: var(--ss-g-muted); }
1081
+ .ss-g-hl-pair { display: flex; flex-direction: column; gap: 12px; }
1082
+ .ss-g-hl-card { display: flex; min-height: 196px; border-radius: 18px; overflow: hidden; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); }
1083
+ .ss-g-hl-card--b { border-color: var(--ss-g-line-warm); }
1084
+ .ss-g-hl-photo-wrap { width: 40%; max-width: 170px; flex: none; display: flex; align-items: flex-end; justify-content: center; background: var(--ss-g-raised); overflow: hidden; }
1085
+ .ss-g-hl-photo-wrap .ss-g-sil { border-radius: 0; background: transparent; }
1086
+ .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); }
1087
+ .ss-g-hl-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
1088
+ .ss-g-hl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px; }
1089
+ .ss-g-hl-first { font-size: 13px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1090
+ .ss-g-hl-surname { font: 800 30px var(--ss-g-font-display); text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1091
+ .ss-g-hl-value { font: 800 76px var(--ss-g-font-display); line-height: 1; color: var(--ss-w-accent); margin-top: 10px; }
1092
+ .ss-g-hl-stat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-g-muted); }
1093
+ .ss-g-hl-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
1094
+ .ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
1095
+ .ss-g-hl-vs { position: relative; z-index: 1; align-self: center; width: 48px; height: 48px; margin: -30px 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); }
1096
+ /* Clear the VS badge that straddles the seam between the two cards. */
1097
+ .ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 30px; }
1098
+ .ss-g-hl-vs + .ss-g-hl-card .ss-g-hl-info { padding-top: 30px; }
1099
+ .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); }
1100
+ .ss-g-hl-feedback[data-correct="true"] svg { color: var(--ss-g-success); }
1101
+ .ss-g-hl-feedback[data-correct="false"] svg { color: var(--ss-g-wrong-mark); }
1102
+ .ss-g-hl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
1103
+ .ss-g-hl-dots { display: flex; gap: 5px; }
1104
+ .ss-g-hl-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--ss-g-strong-line); }
1105
+ .ss-g-hl-dot[data-state="correct"] { background: var(--ss-g-correct); border: 0; }
1106
+ .ss-g-hl-dot[data-state="wrong"] { background: var(--ss-g-wrong-mark); border: 0; }
1107
+ .ss-g-hl-pts { font: 700 22px var(--ss-g-font-display); white-space: nowrap; }
1108
+ .ss-g-hl-pts-unit { font-size: 13px; color: var(--ss-g-muted); }
1109
+
1110
+ /* ── Guess the XI (u393) ── pitch colours are the fixed --ss-g-pitch* tokens (Task 1) */
1111
+ .ss-g-gxi-pitch { position: relative; flex: none; height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid var(--ss-g-pitch-line);
1112
+ 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%); }
1113
+ .ss-g-gxi-rows { position: absolute; inset: 14px 6px; display: flex; flex-direction: column; justify-content: space-between; }
1114
+ .ss-g-gxi-row { display: flex; justify-content: space-evenly; align-items: flex-start; }
1115
+ .ss-g-gxi-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 72px; }
1116
+ .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; }
1117
+ .ss-g-gxi-node[data-revealed] .ss-g-gxi-disc { border-color: var(--ss-w-accent); }
1118
+ .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; }
1119
+ .ss-g-gxi-pos--name { color: var(--ss-w-accent); text-transform: uppercase; }
1120
+ .ss-g-gxi-wrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
1121
+ .ss-g-gxi-wrong-l { font-size: 12px; color: var(--ss-g-muted); }
1122
+ .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); }
1123
+
1124
+ /* ---- Daily Quiz (u393) ---- */
1125
+ .ss-g-dq-stem { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
1126
+ .ss-g-dq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
1127
+ .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; }
1128
+ .ss-g-dq-opt:hover:not(:disabled) { border-color: var(--ss-g-line-warm); }
1129
+ .ss-g-dq-opt[aria-pressed="true"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); }
1130
+ .ss-g-dq-opt:disabled { cursor: default; }
1131
+ .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); }
1132
+ .ss-g-dq-opt[aria-pressed="true"] .ss-g-dq-badge { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }
1133
+ .ss-g-dq-opt-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
1134
+ .ss-g-dq-opt-first { font-size: 12px; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1135
+ .ss-g-dq-opt-last { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; overflow-wrap: anywhere; }
1136
+ .ss-g-dq-opt-suffix { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ss-g-muted); }
1137
+ .ss-g-dq-opt-full { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
1138
+ .ss-g-dq-nav { display: flex; gap: 10px; }
1139
+ .ss-g-dq-nav .ss-g-btn--block { flex: 1; }
1140
+ .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); }
1141
+ .ss-g-dq-rq-stem { font-weight: 700; font-size: 14px; }
1142
+ .ss-g-dq-rq-opts { display: flex; flex-wrap: wrap; gap: 6px; }
1143
+ .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); }
1144
+ .ss-g-dq-rq-opt--correct { background: var(--ss-g-correct); color: var(--ss-g-on-correct); }
1145
+ .ss-g-dq-rq-opt--wrong { background: var(--ss-g-wrong); color: var(--ss-g-on-correct); }
1146
+ .ss-g-dq-why { font-size: 13px; color: var(--ss-g-ink-2); }
1147
+
1148
+ /* ---- Career Path (u393) ---- */
1149
+ .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); }
1150
+ .ss-g-cp-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
1151
+ .ss-g-cp-card-title { font-family: var(--ss-g-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; overflow-wrap: anywhere; }
1152
+ .ss-g-cp-hint { font-size: 13px; color: var(--ss-g-ink-2); }
1153
+ .ss-g-cp-locks { display: flex; gap: 6px; flex-wrap: wrap; }
1154
+ .ss-g-cp-line { list-style: none; display: flex; flex-direction: column; }
1155
+ .ss-g-cp-step { display: flex; gap: 14px; align-items: stretch; }
1156
+ .ss-g-cp-rail { display: flex; flex-direction: column; align-items: center; width: 52px; flex: none; }
1157
+ .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; }
1158
+ .ss-g-cp-tile--locked { border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); }
1159
+ .ss-g-cp-tile--faint { border: 1.5px dashed var(--ss-g-line); background: transparent; color: var(--ss-g-faint); }
1160
+ .ss-g-cp-conn { width: 2px; flex: 1; min-height: 14px; background: var(--ss-g-line-warm); }
1161
+ .ss-g-cp-conn--faint { background: var(--ss-g-line); }
1162
+ .ss-g-cp-step:last-child .ss-g-cp-conn { display: none; }
1163
+ .ss-g-cp-step-text { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding-bottom: 14px; min-width: 0; }
1164
+ .ss-g-cp-club { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
1165
+ .ss-g-cp-sub { font-size: 12px; color: var(--ss-g-muted); }
1166
+ .ss-g-cp-loan { color: var(--ss-w-accent); font-weight: 600; }
1167
+
1168
+ /* Game screen host: fills the panel; each screen owns its header, gutters and scrolling. */
1169
+ .ss-w-gscreen-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--ss-g-ground); }
920
1170
  .ss-w-gscreen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
921
- .ss-w-gscreen > .ss-w-gxi, .ss-w-gscreen > .ss-w-gt, .ss-w-gscreen > .ss-w-cpath,
922
- .ss-w-gscreen > .ss-w-btg, .ss-w-gscreen > .ss-w-hl { flex: 1; min-height: 0; }
923
- /* Daily Quiz has no inner .ss-w-gscroll region — its whole body (score, questions, submit) is the
924
- scroller, so it takes the fill AND the overflow here. Without this it was clipped by the
925
- overflow:hidden frame and the lower questions + Submit could not be reached. */
926
- .ss-w-gscreen > .ss-w-dq { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
927
- /* Scrollable board + guess-history region. */
928
- .ss-w-gscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding-bottom: 2px; }
929
- /* Bottom-pinned bar (search input / action). */
930
- .ss-w-gpin { flex-shrink: 0; padding-top: 10px; }
931
- /* Heads stay put above the scroll region. */
932
- .ss-w-gxi-head, .ss-w-gt-head, .ss-w-cpath-head, .ss-w-btg-head { flex-shrink: 0; }
933
- /* Mystery Tiger explainer key (✓ / ▲ / ▼). */
934
- .ss-w-gt-key { white-space: nowrap; }
935
- .ss-w-gt-key b { font-weight: 800; color: var(--ss-w-ink); }
936
- .ss-w-gt-key-ok { color: var(--ss-w-correct) !important; }
937
- /* Legend colour swatches — green = exact match, amber = close (same broad line / confederation
938
- / within tolerance). Mirrors .ss-w-gtile--exact / --near tile fills. */
939
- .ss-w-gt-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: middle; }
940
- .ss-w-gt-sw--exact { background: var(--ss-w-correct); }
941
- .ss-w-gt-sw--near { background: var(--ss-w-accent); }
942
- /* Higher or Lower terminal score unit. */
943
- .ss-w-hl-over-unit { font-size: 14px; font-weight: 700; color: var(--ss-w-faint); }
944
- .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; }
945
- .ss-w-gscreen-back-arrow { font-size: 11px; font-weight: 700; }
946
1171
  .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; }
947
1172
 
948
1173
  /* ---- Leaderboard (D2) ---- */
@@ -987,367 +1212,141 @@
987
1212
  .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; }
988
1213
  .ss-w-lb-last-points { flex: none; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
989
1214
 
990
- /* ---- Mystery Tiger game screen (D3) ---- */
991
- .ss-w-gt { display: flex; flex-direction: column; gap: 10px; }
992
- /* Typeahead wrapper: relative so the dropdown can position under it */
993
- .ss-w-gtta { position: relative; }
994
- .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; }
995
- .ss-w-gtta-i:focus { border-color: var(--ss-w-accent); }
996
- .ss-w-gtta-i:disabled { opacity: .5; cursor: not-allowed; }
997
- /* Opens UPWARD (bottom-anchored) because the input is pinned to the panel's bottom edge — a
998
- downward menu would be clipped off-screen. */
999
- .ss-w-gtta-drop { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); top: auto; z-index: 10; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 10px; max-height: 200px; overflow-y: auto; box-shadow: 0 -4px 16px rgba(0,0,0,.16); }
1000
- .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); }
1001
- .ss-w-gtta-opt:last-child { border-bottom: none; }
1002
- .ss-w-gtta-opt:hover { background: var(--ss-w-bubble); }
1003
- /* Header: title + sub + remaining chip */
1004
- .ss-w-gt-head { display: flex; align-items: flex-start; gap: 8px; }
1005
- .ss-w-gt-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
1006
- .ss-w-gt-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
1007
- .ss-w-gt-left { margin-left: auto; flex: none; font-size: 11px; 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: 4px 10px; white-space: nowrap; }
1008
- /* Hero card — portrait + the masked profile the fan is hunting on. On reveal the silhouette
1009
- becomes the real photo (or initials) and the profile rows drop away. Fully token-driven. */
1010
- .ss-w-gt-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 12px; }
1011
- .ss-w-gt-card--reveal { grid-template-columns: 1fr; justify-items: center; }
1012
- .ss-w-gt-sil { width: 96px; height: 118px; border-radius: 11px; overflow: hidden; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); display: grid; place-items: center; }
1013
- .ss-w-gt-sil svg, .ss-w-gt-sil img { display: block; width: 100%; height: 100%; }
1014
- .ss-w-gt-sil img { object-fit: cover; }
1015
- .ss-w-gt-attrs { display: flex; flex-direction: column; justify-content: center; }
1016
- .ss-w-gt-attr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px; }
1017
- .ss-w-gt-attr + .ss-w-gt-attr { border-top: 1px solid var(--ss-w-line); }
1018
- .ss-w-gt-attr-k { color: var(--ss-w-faint); font-size: 12px; font-weight: 600; }
1019
- .ss-w-gt-attr-v { color: var(--ss-w-faint); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
1020
- /* Progress dots — one per guess allowance; used guesses filled with the accent. */
1021
- .ss-w-gt-dots { display: flex; gap: 7px; justify-content: center; }
1022
- .ss-w-gt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-w-wrong); }
1023
- .ss-w-gt-dot--on { background: var(--ss-w-accent); }
1024
- /* Guess rows — one labelled block per guess */
1025
- .ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
1026
- /* First-load legend (empty state) */
1027
- .ss-w-gt-lead { font-size: 11.5px; color: var(--ss-w-faint); line-height: 1.4; }
1028
- .ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
1029
- .ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
1030
- .ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
1031
- /* Verdict tiles: label on top, verdict glyph below */
1032
- .ss-w-gtile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; gap: 2px; min-width: 0; }
1033
- .ss-w-gtile-lab { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
1034
- .ss-w-gtile-v { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 800; line-height: 1; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1035
- .ss-w-gtile-dir { font-size: 9px; line-height: 1; }
1036
- .ss-w-gtile--exact { background: var(--ss-w-correct); color: #062611; }
1037
- .ss-w-gtile--near { background: var(--ss-w-accent); color: #241700; }
1038
- .ss-w-gtile--miss { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
1039
- /* Hint line */
1040
- .ss-w-gt-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
1041
- /* Terminal outcome banner */
1042
- .ss-w-gt-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
1043
- .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)); }
1044
- .ss-w-gt-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
1045
- .ss-w-gt-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
1046
- .ss-w-gt-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
1047
- .ss-w-gt-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
1048
-
1049
- /* ---- Higher or Lower game screen (D3) — artifact hl-pair/pcard/hlb layout ---- */
1050
- .ss-w-hl { display: flex; flex-direction: column; gap: 12px; }
1051
- /* Header: title + sub + streak chip */
1052
- .ss-w-hl-head { display: flex; align-items: flex-start; gap: 8px; }
1053
- .ss-w-hl-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
1054
- .ss-w-hl-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
1055
- .ss-w-hl-streak { margin-left: auto; flex: none; 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: 4px 10px; white-space: nowrap; }
1056
- /* Question line */
1057
- .ss-w-hl-q { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-faint); }
1058
- /* Pair: player A | Higher/Lower | player B */
1059
- .ss-w-hlpair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
1060
- .ss-w-hlpc { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px; text-align: center; min-width: 0; }
1061
- /* Player photo (was a 42px ball emoji): fixed 60px circle on both cards so they stay identical
1062
- regardless of name length. Falls back to initials when no photo URL is present. */
1063
- .ss-w-hlpc-av { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; flex: none; }
1064
- .ss-w-hlpc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
1065
- .ss-w-av-initials { font-size: 18px; font-weight: 800; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .02em; }
1066
- .ss-w-hlpc-name { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); line-height: 1.15; }
1067
- .ss-w-hlpc-stat { font-size: 8.5px; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }
1068
- .ss-w-hlpc-val { font-size: 30px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; line-height: 1; }
1069
- .ss-w-hlpc-val--hidden { color: var(--ss-w-faint); }
1070
- /* Higher / Lower — middle column. The pair grid stretches this column to the cards' height, so
1071
- space-between pins Higher to the top and Lower to the bottom, with "or" centered between the
1072
- two players. */
1073
- .ss-w-hlbtns { display: flex; flex-direction: column; gap: 6px; justify-content: space-between; }
1074
- .ss-w-hl-or { text-align: center; font-size: 11px; font-weight: 700; color: var(--ss-w-faint); }
1075
- .ss-w-hlbtn { font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-radius: 9px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--ss-w-line); white-space: nowrap; transition: border-color .1s, background .1s; }
1076
- /* Both options are neutral until picked — an amber default read as "already selected". */
1077
- .ss-w-hlbtn--up, .ss-w-hlbtn--dn { background: var(--ss-w-panel); color: var(--ss-w-ink); }
1078
- .ss-w-hlbtn:hover:not(:disabled) { 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); }
1079
- .ss-w-hlbtn:disabled { opacity: .5; cursor: not-allowed; }
1080
- /* Run-over terminal panel */
1081
- .ss-w-hl-over { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; }
1082
- .ss-w-hl-over-title { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); }
1083
- .ss-w-hl-over-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
1084
- .ss-w-hl-over-sub { font-size: 11px; color: var(--ss-w-faint); }
1085
- /* Answered history — clean single-line rows with the revealed value */
1086
- /* In-progress footer chips (artifact) */
1087
- .ss-w-hl-foot { display: flex; align-items: center; gap: 8px; }
1088
- .ss-w-hl-chip { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 4px 10px; }
1089
- .ss-w-hl-chip--green { margin-left: auto; color: var(--ss-w-correct); background: color-mix(in srgb, var(--ss-w-correct) 10%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 26%, var(--ss-w-line)); }
1090
-
1091
- /* ---- Career Path game screen (D3) — artifact cpath/club/cto layout ---- */
1092
- .ss-w-cpath { display: flex; flex-direction: column; gap: 12px; }
1093
- /* Header */
1094
- .ss-w-cpath-head { display: flex; align-items: flex-start; gap: 8px; }
1095
- .ss-w-cpath-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
1096
- .ss-w-cpath-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
1097
- .ss-w-cpath-left { margin-left: auto; flex: none; font-size: 11px; 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: 4px 10px; white-space: nowrap; }
1098
- /* Career sequence — horizontal crests with arrows */
1099
- .ss-w-cpath-seq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 4px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 13px 11px; }
1100
- .ss-w-cpath-arrow { align-self: flex-start; flex: none; color: var(--ss-w-faint); font-size: 13px; padding-top: 9px; }
1101
- /* Single club — small vertical card */
1102
- .ss-w-cpath-club { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; flex: none; }
1103
- .ss-w-cpath-crest { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 8px; }
1104
- .ss-w-cpath-crest--fallback { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .02em; color: var(--ss-w-faint); }
1105
- .ss-w-cpath-club-name { font-size: 9px; font-weight: 600; color: var(--ss-w-ink); text-align: center; line-height: 1.15; max-width: 56px; overflow-wrap: anywhere; }
1106
- .ss-w-cpath-spell-yr { font-size: 8px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
1107
- .ss-w-cpath-loan-note { display: block; color: var(--ss-w-faint); font-weight: 500; }
1108
- .ss-w-cpath-club--loan .ss-w-cpath-crest { border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 40%, var(--ss-w-line)); }
1109
- /* Hint line */
1110
- .ss-w-cpath-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ss-w-accent) 8%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }
1111
- /* Terminal outcome */
1112
- .ss-w-cpath-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
1113
- .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)); }
1114
- .ss-w-cpath-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
1115
- .ss-w-cpath-banner-name { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--ss-w-accent); }
1116
- .ss-w-cpath-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
1117
- .ss-w-cpath-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
1118
-
1119
- /* ---- Beat the Grid game screen (D3) — artifact grid/gc layout ---- */
1120
- .ss-w-btg { display: flex; flex-direction: column; gap: 10px; }
1121
- /* Header */
1122
- .ss-w-btg-head { display: flex; align-items: flex-start; gap: 8px; }
1123
- .ss-w-btg-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
1124
- .ss-w-btg-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
1125
- .ss-w-btg-ctx { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
1126
- .ss-w-btg-ctx-score { font-size: 13px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
1127
- .ss-w-btg-ctx-left { font-size: 11px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; }
1128
- /* Terminal summary */
1129
- .ss-w-btg-done { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
1130
- .ss-w-btg-done-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
1131
- .ss-w-btg-done-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
1132
- .ss-w-btg-done-sub { font-size: 11px; color: var(--ss-w-faint); }
1133
- /* Empty search pool note */
1134
- .ss-w-btg-sheet-empty { font-size: 12px; color: var(--ss-w-faint); text-align: center; padding: 14px 8px; }
1135
- /* Grid layout — col count driven inline via style */
1136
- .ss-w-btg-grid { display: grid; gap: 4px; width: 100%; }
1137
- /* Generic grid cell */
1138
- .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; }
1139
- /* Corner placeholder */
1140
- .ss-w-btg-gc--corner { background: none; }
1141
- /* Column header */
1142
- .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); }
1143
- /* Row header */
1144
- .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; }
1145
- /* Interactive cells */
1146
- .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; }
1147
- .ss-w-btg-cell:hover:not(:disabled) { border-color: var(--ss-w-accent); background: var(--ss-w-bubble); }
1148
- .ss-w-btg-cell:disabled { cursor: not-allowed; opacity: .75; }
1149
- .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)); }
1150
- .ss-w-btg-cell--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); }
1151
- .ss-w-btg-cell--active { border-color: var(--ss-w-accent); }
1152
- .ss-w-btg-cell-nm { font-size: 8.5px; font-weight: 600; line-height: 1.05; color: var(--ss-w-ink); text-align: center; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
1153
- .ss-w-btg-cell-score { font-size: 12px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
1154
- .ss-w-btg-cell--correct .ss-w-btg-cell-score { color: var(--ss-w-correct); }
1155
- .ss-w-btg-cell-check { color: var(--ss-w-correct); line-height: 1; }
1156
- .ss-w-btg-cell-empty { font-size: 16px; color: var(--ss-w-faint); }
1157
- /* Scoped search sheet: slides up over the grid */
1158
- .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); }
1159
- .ss-w-btg-sheet-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
1160
- .ss-w-btg-sheet-ctx { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
1161
- .ss-w-btg-sheet-row { font-size: 12.5px; font-weight: 700; color: var(--ss-w-ink); }
1162
- .ss-w-btg-sheet-sep { font-size: 13px; color: var(--ss-w-faint); font-weight: 500; }
1163
- .ss-w-btg-sheet-col { font-size: 12.5px; font-weight: 700; color: var(--ss-w-accent); }
1164
- .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; }
1165
- .ss-w-btg-sheet-close:hover { color: var(--ss-w-ink); background: var(--ss-w-bubble); }
1166
-
1167
- /* ---- Guess the XI game screen (D3) ---- */
1168
- .ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
1169
- /* Header */
1170
- .ss-w-gxi-head { display: flex; align-items: flex-start; gap: 8px; }
1171
- .ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
1172
- /* Formation pill next to the title, e.g. "4-2-3-1". */
1173
- .ss-w-gxi-form { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 26%, var(--ss-w-line)); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
1174
- .ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
1175
- .ss-w-gxi-left { margin-left: auto; flex: none; font-size: 11px; 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: 4px 10px; white-space: nowrap; }
1176
- /* Pitch: a flag per slot laid out in formation rows on a green field. A real min-height plus
1177
- space-between distributes the formation lines top→bottom like a pitch (GK at the back, forwards
1178
- forward); yard-line stripes reinforce the read. Without a height the lines collapse together. */
1179
- /* A football pitch is grass-green regardless of the operator accent, so the field uses fixed
1180
- green values (not --ss-w-correct, which is a muted per-operator token that vanished on dark
1181
- themes) plus visible horizontal yard-lines and a brighter halfway line. */
1182
- .ss-w-gxi-pitch { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 210px; padding: 14px 10px; border-radius: 14px; border: 1px solid rgba(46, 160, 86, .38);
1183
- background:
1184
- linear-gradient(180deg, rgba(46, 160, 86, .015) 0, rgba(46, 160, 86, .015) 49.5%, rgba(255,255,255,.14) 49.5%, rgba(255,255,255,.14) 50.5%, rgba(46, 160, 86, .015) 50.5%),
1185
- repeating-linear-gradient(180deg, transparent 0 31px, rgba(255,255,255,.045) 31px 32px),
1186
- linear-gradient(180deg, rgba(46, 160, 86, .28), rgba(38, 132, 71, .16)); }
1187
- .ss-w-gxi-prow { display: flex; justify-content: center; align-items: flex-start; gap: 12px; }
1188
- .ss-w-gxi-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 46px; }
1189
- .ss-w-gxi-flag { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; background: rgba(9, 12, 10, .55); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 1px 3px rgba(0,0,0,.3); overflow: hidden; }
1190
- /* A slot whose player has been revealed by a wrong guess. */
1191
- .ss-w-gxi-flag--revealed { border-color: var(--ss-w-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-w-accent) 45%, transparent); }
1192
- /* Position label shown under every flag (GK, CB, CM, ST…) — reads the formation and marks the
1193
- keeper's end. Muted so it sits behind the flag, not competing with it. */
1194
- .ss-w-gxi-pos { font-size: 8.5px; line-height: 1.05; font-weight: 800; letter-spacing: .04em; text-align: center; color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
1195
- /* Player surname, shown under the position once a wrong guess reveals it — in the accent colour. */
1196
- .ss-w-gxi-flag-lab { font-size: 8px; line-height: 1.05; font-weight: 700; text-align: center; color: var(--ss-w-accent); max-width: 46px; word-break: break-word; }
1197
- .ss-w-gxi-revnote { font-size: 11px; color: var(--ss-w-faint); }
1198
- /* Wrong-guess trail */
1199
- .ss-w-gxi-wrong { display: flex; flex-wrap: wrap; gap: 6px; }
1200
- .ss-w-gxi-wrong-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); text-decoration: line-through; }
1201
- /* Earned reveals */
1202
- .ss-w-gxi-reveals { display: flex; flex-direction: column; gap: 4px; }
1203
- .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; }
1204
- .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; }
1205
- .ss-w-gxi-reveal-val { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
1206
- /* Terminal outcome banner */
1207
- .ss-w-gxi-banner { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px; border-radius: 14px; text-align: center; }
1208
- .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)); }
1209
- .ss-w-gxi-banner--failed { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }
1210
- .ss-w-gxi-banner-label { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
1211
- .ss-w-gxi-banner-score { font-size: 34px; font-weight: 800; color: var(--ss-w-accent); line-height: 1; font-variant-numeric: tabular-nums; }
1212
- .ss-w-gxi-banner-sub { font-size: 11px; color: var(--ss-w-faint); }
1213
- /* Hint line */
1214
- .ss-w-gxi-hint { font-size: 11.5px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
1215
-
1216
- /* ---- Daily Quiz game screen (D3) ---- */
1217
- .ss-w-dq { display: flex; flex-direction: column; gap: 14px; }
1218
- /* Score banner (post-reveal) */
1219
- .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; }
1220
- .ss-w-dq-score-val { font-size: 26px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
1221
- .ss-w-dq-score-label { font-size: 13px; font-weight: 650; color: var(--ss-w-faint); }
1222
- /* Progress bar */
1223
- .ss-w-dq-prog { height: 4px; border-radius: 999px; background: var(--ss-w-bubble); overflow: hidden; }
1224
- .ss-w-dq-prog-fill { height: 100%; border-radius: 999px; background: var(--ss-w-accent); transition: width .25s ease; }
1225
- /* Questions list */
1226
- .ss-w-dq-questions { display: flex; flex-direction: column; gap: 16px; }
1227
- /* Single question */
1228
- .ss-w-dq-q { display: flex; flex-direction: column; gap: 8px; }
1229
- .ss-w-dq-qstem { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.4; }
1230
- /* Options grid: 2 across */
1231
- .ss-w-dq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
1232
- .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; }
1233
- .ss-w-dq-qopt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1234
- .ss-w-dq-qopt:disabled { cursor: not-allowed; }
1235
- .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)); }
1236
- .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); }
1237
- .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; }
1238
- /* Option letter badge */
1239
- .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); }
1240
- .ss-w-dq-qopt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1241
- /* Why/reveal text */
1242
- .ss-w-dq-qwhy { font-size: 11.5px; padding: 6px 10px; border-radius: 8px; line-height: 1.4; }
1243
- .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)); }
1244
- .ss-w-dq-qwhy--wrong { background: var(--ss-w-bubble); color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); }
1245
- /* Submit button */
1246
- .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; }
1247
- .ss-w-dq-submit:disabled { opacity: .4; cursor: not-allowed; }
1248
- .ss-w-dq-submit:hover:not(:disabled) { opacity: .88; }
1249
-
1250
- /* ── Matchday Predictor ──────────────────────────────────────────────────── */
1251
- .ss-w-mp { display: flex; flex-direction: column; gap: 14px; }
1252
- /* Score prediction row */
1253
- .ss-w-mp-pred-score { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }
1254
- .ss-w-mp-team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
1255
- .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%; }
1256
- .ss-w-mp-stepper { display: flex; align-items: center; gap: 8px; }
1257
- .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; }
1258
- .ss-w-mp-stepper-btn:hover:not(:disabled) { background: var(--ss-w-bubble); }
1259
- .ss-w-mp-stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
1260
- .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; }
1261
- .ss-w-mp-sep { font-size: 22px; font-weight: 700; color: var(--ss-w-faint); padding: 0 4px; }
1262
- /* First-scorer picker */
1263
- .ss-w-mp-scorer { display: flex; flex-direction: column; gap: 6px; }
1264
- .ss-w-mp-scorer-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }
1265
- .ss-w-mp-scorer-list { display: flex; flex-wrap: wrap; gap: 6px; }
1266
- .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; }
1267
- .ss-w-mp-scorer-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1268
- .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); }
1269
- .ss-w-mp-scorer-opt:disabled { opacity: .35; cursor: not-allowed; }
1270
- /* Save button */
1271
- .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; }
1272
- .ss-w-mp-savebtn:disabled { opacity: .4; cursor: not-allowed; }
1273
- .ss-w-mp-savebtn:hover:not(:disabled) { opacity: .88; }
1274
- /* Live / pending state */
1275
- .ss-w-mp-live { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 14px 0; }
1276
- .ss-w-mp-live-score { font-size: 30px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
1277
- .ss-w-mp-live-label { font-size: 12px; color: var(--ss-w-faint); font-style: italic; }
1278
- .ss-w-mp-live-outcome { display: flex; flex-direction: column; gap: 6px; width: 100%; }
1279
- .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; }
1280
- .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)); }
1281
- .ss-w-mp-live-row-key { color: var(--ss-w-faint); font-weight: 600; }
1282
- .ss-w-mp-live-row-val { font-weight: 700; color: var(--ss-w-ink); }
1283
- .ss-w-mp-live-row--correct .ss-w-mp-live-row-val { color: var(--ss-w-correct); }
1284
- /* For-fun note */
1285
- .ss-w-mp-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
1286
-
1287
- /* ── Starting XI ─────────────────────────────────────────────────────────── */
1288
- .ss-w-sxi { display: flex; flex-direction: column; gap: 14px; }
1289
- .ss-w-sxi-formation { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
1290
- /* Formation pitch area */
1291
- .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; }
1292
- .ss-w-sxi-pitch-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
1293
- /* Player slot */
1294
- .ss-w-sxi-pslot { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; cursor: pointer; }
1295
- .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; }
1296
- .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); }
1297
- .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%; }
1298
- /* Squad picker */
1299
- .ss-w-sxi-squad { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
1300
- .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; }
1301
- .ss-w-sxi-squad-row:hover:not(.ss-w-sxi-squad-row--picked) { background: var(--ss-w-bubble); }
1302
- .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); }
1303
- .ss-w-sxi-squad-name { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
1304
- .ss-w-sxi-squad-pos { font-size: 10.5px; color: var(--ss-w-faint); }
1305
- .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; }
1306
- .ss-w-sxi-savebtn:disabled { opacity: .4; cursor: not-allowed; }
1307
- .ss-w-sxi-savebtn:hover:not(:disabled) { opacity: .88; }
1308
- /* Pending / graded states */
1309
- .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; }
1310
- .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)); }
1311
- .ss-w-sxi-status-score { font-size: 28px; font-weight: 800; color: var(--ss-w-correct); font-variant-numeric: tabular-nums; }
1312
- .ss-w-sxi-status-label { font-size: 12.5px; color: var(--ss-w-faint); }
1313
-
1314
- /* ── Stat Ladder ─────────────────────────────────────────────────────────── */
1315
- .ss-w-sl { display: flex; flex-direction: column; gap: 14px; }
1316
- .ss-w-sl-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
1317
- /* Ladder list */
1318
- .ss-w-sl-ladder { display: flex; flex-direction: column; gap: 6px; }
1319
- .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); }
1320
- .ss-w-sl-lrow-rank { font-size: 11px; font-weight: 800; color: var(--ss-w-faint); width: 18px; flex: none; text-align: center; }
1321
- .ss-w-sl-lrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); }
1322
- .ss-w-sl-lrow-stat { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
1323
- /* Mystery rung */
1324
- .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)); }
1325
- .ss-w-sl-mystery .ss-w-sl-lrow-name { color: var(--ss-w-faint); font-style: italic; }
1326
- /* Reveal overlay: correct / wrong */
1327
- .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)); }
1328
- .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)); }
1329
- /* Player picker */
1330
- .ss-w-sl-picker { display: flex; flex-wrap: wrap; gap: 6px; }
1331
- .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; }
1332
- .ss-w-sl-picker-opt:hover:not(:disabled) { background: var(--ss-w-bubble); border-color: var(--ss-w-accent); }
1333
- .ss-w-sl-picker-opt:disabled { opacity: .35; cursor: not-allowed; }
1334
- .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); }
1335
- .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); }
1336
- .ss-w-sl-reveal--wrong { background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); }
1337
-
1338
- /* ── Fan MOTM ────────────────────────────────────────────────────────────── */
1339
- .ss-w-motm { display: flex; flex-direction: column; gap: 14px; }
1340
- .ss-w-motm-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); text-align: center; }
1341
- /* Vote candidate list */
1342
- .ss-w-motm-votes { display: flex; flex-direction: column; gap: 6px; }
1343
- .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; }
1344
- .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); }
1345
- .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; }
1346
- .ss-w-motm-vrow--result { cursor: default; }
1347
- .ss-w-motm-vrow-name { flex: 1; font-size: 13px; font-weight: 650; color: var(--ss-w-ink); position: relative; z-index: 1; }
1348
- .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; }
1349
- /* Share fill bar (behind content) */
1350
- .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; }
1351
- .ss-w-motm-vrow--voted .ss-w-motm-vfill { background: color-mix(in srgb, var(--ss-w-accent) 18%, var(--ss-w-panel)); }
1352
- /* For-fun note */
1353
- .ss-w-motm-fun { font-size: 11px; color: var(--ss-w-faint); text-align: center; font-style: italic; }
1215
+ /* PlayerAvatar initials fallback (PlayerAvatar.tsx) — size/colour inherit from the avatar class. */
1216
+ .ss-w-av-initials { font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
1217
+
1218
+ /* ---- Beat the Grid (u393) ---- */
1219
+ .ss-g-btg-grid { display: grid; gap: 6px; }
1220
+ .ss-g-btg-colhdr { height: 60px; 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; }
1221
+ .ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }
1222
+ .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; }
1223
+ .ss-g-btg-cell { position: relative; height: 98px; 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; }
1224
+ .ss-g-btg-cell:disabled { cursor: default; }
1225
+ .ss-g-btg-cell[data-state="active"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }
1226
+ .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; }
1227
+ .ss-g-btg-cell[data-state="correct"] { border-color: var(--ss-g-correct); }
1228
+ .ss-g-btg-cell[data-state="wrong"] { border-color: var(--ss-g-wrong-mark); }
1229
+ .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); }
1230
+ .ss-g-btg-badge--correct { background: var(--ss-g-correct); }
1231
+ .ss-g-btg-badge--wrong { background: var(--ss-g-wrong); }
1232
+ .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; }
1233
+ .ss-g-btg-cell[data-state="wrong"] .ss-g-btg-rarity { background: var(--ss-g-raised); color: var(--ss-g-muted); }
1234
+ .ss-g-btg-cell .ss-g-sil { border-radius: 0; background: transparent; }
1235
+ .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; }
1236
+ .ss-g-btg-plus { display: flex; }
1237
+ .ss-g-btg-pin { flex: none; padding: 0 12px 12px; }
1238
+ .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; }
1239
+ .ss-g-btg-sheet-hdr { display: flex; align-items: center; gap: 8px; min-width: 0; }
1240
+ .ss-g-btg-sheet-hdr .ss-g-chip { padding: 4px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
1241
+ .ss-g-btg-sheet-x { color: var(--ss-g-muted); display: flex; flex: none; }
1242
+ .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; }
1243
+ .ss-g-btg-sheet-close:hover { background: var(--ss-g-raised); color: var(--ss-g-ink); }
1244
+ .ss-g-btg-sheet .ss-g-search-box { height: 48px; border-radius: 12px; background: var(--ss-g-ground); }
1245
+ .ss-g-btg-sheet-empty { font-size: 13px; color: var(--ss-g-muted); }
1246
+ .ss-g-btg-sheet .ss-g-opt { background: var(--ss-g-raised); }
1247
+ .ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1248
+ .ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }
1249
+
1250
+ /* ── Starting XI (u393) ── */
1251
+ .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); }
1252
+ .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; }
1253
+ .ss-g-xi-slot:disabled { cursor: default; }
1254
+ .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; }
1255
+ .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); }
1256
+ .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); }
1257
+ .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; }
1258
+ .ss-g-xi-slot[data-state="active"] .ss-g-xi-tag { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }
1259
+ .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); }
1260
+ .ss-g-xi-picker-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
1261
+ .ss-g-xi-list { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
1262
+ .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; }
1263
+ .ss-g-xi-opt:disabled { opacity: .5; cursor: default; }
1264
+ .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; }
1265
+ .ss-g-xi-opt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1266
+ .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; }
1267
+ .ss-g-xi-lock { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ss-g-muted); }
1268
+ .ss-g-xi-lock svg { color: var(--ss-w-accent); flex: none; }
1269
+
1270
+ /* ── Stat Ladder (u393) ── */
1271
+ .ss-g-sl-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 6px; text-align: center; }
1272
+ .ss-g-sl-stat { padding: 4px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
1273
+ .ss-g-sl-q { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 30px; line-height: 1.05; text-transform: uppercase; }
1274
+ .ss-g-sl-q em { font-style: normal; color: var(--ss-w-accent); }
1275
+ .ss-g-sl-rungs { list-style: none; display: flex; flex-direction: column; gap: 10px; }
1276
+ .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); }
1277
+ .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); }
1278
+ .ss-g-sl-rung--mystery[data-result="correct"] { border: 2px solid var(--ss-g-correct); background: var(--ss-g-warm); }
1279
+ .ss-g-sl-rung--mystery[data-result="wrong"] { border: 2px solid var(--ss-g-wrong-mark); background: var(--ss-g-warm); }
1280
+ .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; }
1281
+ .ss-g-sl-rung:first-child .ss-g-sl-rank { background: var(--ss-g-accent-tint); color: var(--ss-w-accent); }
1282
+ .ss-g-sl-rung--mystery .ss-g-sl-rank { background: var(--ss-w-accent); color: var(--ss-g-on-accent); }
1283
+ .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; }
1284
+ .ss-g-sl-av img { width: 100%; height: 100%; object-fit: cover; }
1285
+ .ss-g-sl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
1286
+ .ss-g-sl-name small { font-size: 12px; color: var(--ss-g-muted); }
1287
+ .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; }
1288
+ .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); }
1289
+ .ss-g-sl-val { flex: none; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 34px; line-height: 1; }
1290
+ .ss-g-sl-val--mystery { font-size: 40px; color: var(--ss-w-accent); }
1291
+ .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); }
1292
+ .ss-g-sl-clue svg { flex: none; color: var(--ss-w-accent); }
1293
+ .ss-g-sl-pool { list-style: none; display: flex; flex-direction: column; gap: 4px; }
1294
+ .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; }
1295
+ .ss-g-sl-opt[aria-pressed="true"] { border-color: var(--ss-w-accent); background: var(--ss-g-warm); }
1296
+ .ss-g-sl-opt[aria-pressed="true"] svg { color: var(--ss-w-accent); }
1297
+ .ss-g-sl-opt:disabled { opacity: .5; cursor: default; }
1298
+ .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; }
1299
+ .ss-g-sl-opt-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1300
+ .ss-g-sl-guess { display: flex; align-items: flex-end; gap: 8px; }
1301
+ .ss-g-sl-guess .ss-g-search { flex: 1; min-width: 0; }
1302
+ .ss-g-sl-guess .ss-g-btn { min-height: 50px; padding: 0 20px; border-radius: 14px; }
1303
+
1304
+ /* ── Matchday Predictor (u393) ── */
1305
+ .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); }
1306
+ .ss-g-mp-team { width: 84px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
1307
+ .ss-g-mp-team .ss-g-crest--ph { color: var(--ss-g-strong-line); }
1308
+ .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; }
1309
+ .ss-g-mp-team-side { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-g-muted); }
1310
+ .ss-g-mp-scores { display: flex; align-items: center; gap: 8px; }
1311
+ .ss-g-mp-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
1312
+ .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; }
1313
+ .ss-g-mp-step:disabled { opacity: .4; cursor: default; }
1314
+ .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; }
1315
+ .ss-g-mp-digit[data-active="true"] { border-color: var(--ss-w-accent); color: var(--ss-w-accent); }
1316
+ .ss-g-mp-dash { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 30px; color: var(--ss-g-faint); }
1317
+ .ss-g-mp-scorer { display: flex; flex-direction: column; gap: 10px; }
1318
+ .ss-g-mp-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
1319
+ .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; }
1320
+ .ss-g-mp-sec-head span { font-size: 12px; color: var(--ss-g-muted); }
1321
+ .ss-g-mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
1322
+ .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; }
1323
+ .ss-g-mp-pcard[aria-pressed="true"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); }
1324
+ .ss-g-mp-pcard:disabled { cursor: default; opacity: .6; }
1325
+ .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); }
1326
+ .ss-g-mp-pname { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1327
+ .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; }
1328
+ .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); }
1329
+ .ss-g-mp-none[aria-pressed="true"] { color: var(--ss-g-ink); border-color: var(--ss-g-line-warm); }
1330
+ .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); }
1331
+ .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; }
1332
+ .ss-g-mp-fun { font-size: 11px; color: var(--ss-g-faint); text-align: center; }
1333
+ .ss-g-mp-rows { list-style: none; display: flex; flex-direction: column; gap: 6px; }
1334
+ .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; }
1335
+ .ss-g-mp-row-k { color: var(--ss-g-ink-2); }
1336
+ .ss-g-mp-row-v { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ss-g-muted); }
1337
+ .ss-g-mp-row[data-ok="true"] { border-color: var(--ss-g-correct); }
1338
+ .ss-g-mp-row[data-ok="true"] .ss-g-mp-row-v { color: var(--ss-g-success); }
1339
+ .ss-g-mp-row-d { color: var(--ss-g-ink); }
1340
+
1341
+ /* ── Fan MOTM (u393) ── */
1342
+ .ss-g-motm-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
1343
+ .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; }
1344
+ .ss-g-motm-row:not(:disabled):hover { border-color: var(--ss-g-line-warm); }
1345
+ .ss-g-motm-row:disabled { cursor: default; }
1346
+ .ss-g-motm-row--voted { border: 1.5px solid var(--ss-w-accent); background: var(--ss-g-warm); }
1347
+ .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; }
1348
+ .ss-g-motm-av img { width: 100%; height: 100%; object-fit: cover; }
1349
+ .ss-g-motm-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1350
+ .ss-g-motm-pill { flex: none; padding: 3px 8px; font-size: 11px; }
1351
+ .ss-g-motm-foot { font-size: 14px; font-weight: 600; }
1352
+ .ss-g-motm-fun { font-size: 11px; color: var(--ss-g-faint); }