/* Release 402: pieces of the designer's UI kit on real data. Game page (form guide, head-to-head, full standings table), Live (score
   list) and the simulation results (stacked result bar, mirrored team bars, player frequency bars). */
:root { --kit-a: #5663F0; --kit-b: #F97316; --kit-d: #A3A8B8; --kit-w: #16A34A; --kit-l: #DC2626; --kit-ink: #170F49; --kit-muted: #6F6C90; --kit-line: #ECEAF4; --kit-soft: #F6F7FB; }

/* W / D / L badges */
.kit-form-row { display: inline-flex; gap: 4px; }
.kit-wdl { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; font: 800 11px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-wdl.is-w { background: var(--kit-w); }
.kit-wdl.is-d { background: #94A3B8; }
.kit-wdl.is-l { background: var(--kit-l); }

/* game page: form and head-to-head */
.kit-label { margin: 0 0 10px; color: var(--kit-muted); font: 800 12px/1.2 var(--b-font, Nunito, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.kit-label small { margin-left: 6px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.kit-forms { margin: 0 0 18px; }
.kit-form { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--kit-line); }
.kit-form:last-child { border-bottom: 0; }
.kit-form b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kit-ink); font: 700 15px/1.3 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-form small { color: var(--kit-muted); }
.kit-h2h { margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--kit-line); }
.kit-h2h-nums { display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 12px; text-align: center; }
.kit-h2h-nums span { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--kit-muted); font: 600 13px/1.3 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-h2h-nums b { font: 800 34px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-h2h-nums .is-a b { color: var(--kit-a); }
.kit-h2h-nums .is-d b { color: var(--kit-d); }
.kit-h2h-nums .is-b b { color: var(--kit-b); }
.kit-stack { display: flex; gap: 3px; height: 10px; margin: 0 0 14px; }
.kit-stack i { display: block; min-width: 6px; border-radius: 999px; }
.kit-stack .is-a, .kit-stack .is-home { background: var(--kit-a); }
.kit-stack .is-d, .kit-stack .is-draw { background: var(--kit-d); }
.kit-stack .is-b, .kit-stack .is-away { background: var(--kit-b); }
.kit-meet { margin: 0; padding: 0; list-style: none; }
.kit-meet li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--kit-line); }
.kit-meet-d { flex: 0 0 96px; color: var(--kit-muted); font-size: 13px; }
.kit-meet-s { flex: 1; min-width: 0; color: var(--kit-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.kit-avg { display: flex; justify-content: space-between; margin: 10px 0 0; color: var(--kit-muted); font-size: 14px; }
.kit-avg b { color: var(--kit-ink); }

/* game page: the full league table */
.kit-table-more { margin: 10px 0 0; }
.kit-table-more > summary { cursor: pointer; color: var(--b-primary-600, #4647E5); font-weight: 800; }
.kit-standings tr.is-us :is(td, th) { background: #EEF0FE !important; }
.kit-standings .kit-rank { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--kit-soft); font-weight: 700; font-size: 12px; }
.kit-standings tr.is-drop .kit-rank, .kit-key.is-drop { background: #FDE2E2; color: #B42318; }
.kit-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.kit-standings .is-up { color: var(--kit-w); font-weight: 700; }
.kit-standings .is-down { color: var(--kit-l); font-weight: 700; }
.kit-standings .kit-wdl { width: 20px; height: 20px; font-size: 10px; }

/* Live: score list */
.sl { margin: 0 0 18px; border: 1px solid var(--kit-line); border-radius: 14px; background: #fff; overflow: hidden; }
.sl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--kit-line); }
.sl-head h2 { margin: 0; color: var(--kit-ink); font: 800 17px/1.3 var(--b-font, Nunito, system-ui, sans-serif); }
.sl-head small { color: var(--kit-muted); font-size: 12.5px; }
.sl-list { margin: 0; padding: 0; list-style: none; }
.sl-list li + li { border-top: 1px solid var(--kit-line); }
.sl-row { display: grid; grid-template-columns: 78px 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; padding: 10px 18px; border: 0; background: transparent; color: var(--kit-ink); font: 600 14px/1.3 var(--b-font, Nunito, system-ui, sans-serif); text-align: left; cursor: pointer; }
.sl-row:hover { background: var(--kit-soft); }
.sl-row:focus-visible { outline: 2px solid var(--b-primary-600, #4647E5); outline-offset: -2px; }
.sl-chip { justify-self: start; padding: 3px 9px; border-radius: 999px; background: #EEF0F5; color: #475467; font: 800 11px/1.3 var(--b-font, Nunito, system-ui, sans-serif); white-space: nowrap; }
.sl-chip.is-live { background: #DC2626; color: #fff; }
.sl-chip.is-next { background: transparent; color: var(--kit-muted); font-weight: 600; padding-left: 0; }
.sl-team { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-team.is-a { justify-content: flex-end; }
.sl-mark { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #EEF0FE; color: #3B3CC4; font: 800 9px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.sl-score { min-width: 64px; padding: 5px 10px; border-radius: 8px; background: var(--kit-soft); text-align: center; font: 800 15px/1.2 var(--b-font, Nunito, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.sl-score.is-live { background: #FEF2F2; color: #B42318; }
.sl-score.is-next { background: transparent; border: 1px dashed #D0D5DD; color: var(--kit-muted); font-weight: 600; font-size: 13px; }
  .sl-all { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--kit-line); background: #fff; color: var(--b-primary-600, #4647E5); font: 800 14px/1.2 var(--b-font, Nunito, system-ui, sans-serif); cursor: pointer; }
@media (max-width: 560px) {
  .sl-row { grid-template-columns: 1fr auto 1fr; padding: 10px 12px; gap: 8px; }
  .sl-chip { grid-column: 1 / -1; justify-self: center; }
  .sl-mark { display: none; }
}

/* simulation: stacked result bar, mirrored team bars, player bars */
.kit-outcome { padding: 4px 0 14px; }
.kit-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--kit-ink); font-size: 14px; }
.kit-legend li i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.kit-legend .is-home { background: var(--kit-a); }
.kit-legend .is-draw { background: var(--kit-d); }
.kit-legend .is-away { background: var(--kit-b); }
.kit-legend small { color: var(--kit-muted); }
#teamTable tr.kit-mrow td { padding-top: 0 !important; padding-bottom: 10px !important; border-top: 0 !important; }
#teamTable tr:has(+ tr.kit-mrow) td { border-bottom: 0 !important; }
.kit-mbar { display: inline-flex; width: calc(50% - 3px); height: 6px; border-radius: 999px; background: #E6E8F0; overflow: hidden; vertical-align: middle; }
.kit-mbar + .kit-mbar { margin-left: 6px; }
.kit-mbar.is-home { justify-content: flex-end; }
.kit-mbar i { display: block; height: 100%; border-radius: 999px; }
.kit-mbar.is-home i { background: var(--kit-a); }
.kit-mbar.is-away i { background: var(--kit-b); }
.kit-pbar { display: block; width: 100%; max-width: 120px; height: 5px; margin-top: 5px; border-radius: 999px; background: #E6E8F0; overflow: hidden; }
.kit-pbar i { display: block; height: 100%; border-radius: 999px; background: var(--kit-a); }

/* release 403: the score list and "Upcoming fixtures" side by side on Live (designer's kit 02) */
.sl-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; margin: 0 0 18px; }
.sl-wrap > .sl { margin: 0; }
@media (max-width: 900px) { .sl-wrap { grid-template-columns: 1fr; } }
.fx-head { align-items: center; }
.fx-head small { display: block; margin-top: 2px; }
.fx-key { display: inline-flex; align-items: center; gap: 3px; color: var(--kit-muted); font-size: 12px; white-space: nowrap; }
.fx-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.fx-key .d1, .fx-d.d1 { background: #DCFCE7; color: #166534; }
.fx-key .d2, .fx-d.d2 { background: #BBF7D0; color: #15803D; }
.fx-key .d3, .fx-d.d3 { background: #FEF3C7; color: #92400E; }
.fx-key .d4, .fx-d.d4 { background: #FED7AA; color: #9A3412; }
.fx-key .d5, .fx-d.d5 { background: #FECACA; color: #991B1B; }
.fx-list { margin: 0; padding: 0; list-style: none; }
.fx-list li { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--kit-line); }
.fx-list li:first-child { border-top: 0; }
.fx-date { flex: 0 0 92px; display: flex; flex-direction: column; line-height: 1.25; }
.fx-date b { color: var(--kit-ink); font-size: 14px; }
.fx-date small { color: var(--kit-muted); font-size: 12px; }
.fx-ha { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #EEF0F5; color: #475467; font: 800 11px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.fx-opp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kit-ink); font-weight: 700; }
.fx-d { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 800 14px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.fx-foot { padding: 12px 18px 14px; border-top: 1px solid var(--kit-line); }
html:not(#k403a):not(#k403b) body .fx-foot select { width: 100% !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23170f49' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; padding-right: 30px !important; height: 38px; padding: 0 30px 0 10px; border: 1px solid #d9dbe9; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23170f49' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; appearance: none; color: var(--kit-ink); font: 600 14px/1.2 var(--b-font, Nunito, system-ui, sans-serif); }
.fx-note { margin: 8px 0 0; padding: 0; color: var(--kit-muted); font-size: 12.5px; line-height: 1.45; }
.fx > .fx-note { padding: 14px 18px; margin: 0; }

/* release 403: soccer game timeline in the Live card's details (designer's kit 11) */
.tl { grid-column: 1 / -1; padding: 4px 0 6px; }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.tl-head h3 { margin: 0; color: var(--kit-ink); font: 800 15px/1.3 var(--b-font, Nunito, system-ui, sans-serif); }
.tl-key { display: inline-flex; align-items: center; gap: 6px; color: var(--kit-muted); font-size: 12px; }
.tl-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
.tl-key .is-a, .tl-dot.is-a { --c: var(--kit-a); background: var(--kit-a); }
.tl-key .is-b, .tl-dot.is-b { --c: var(--kit-b); background: var(--kit-b); }
.tl-list { position: relative; margin: 0; padding: 0; list-style: none; }
.tl-list li { position: relative; display: grid; grid-template-columns: 40px 18px 1fr; align-items: start; gap: 10px; padding: 6px 0; }
.tl-list li + li::before { content: ""; position: absolute; left: 58px; top: -6px; width: 2px; height: 18px; background: #E4E7EC; }
.tl-min { color: var(--kit-ink); font-weight: 800; font-size: 13px; text-align: right; padding-top: 1px; }
.tl-dot { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--c); }
.tl-txt b { display: block; color: var(--kit-ink); font-size: 14px; }
.tl-txt small { color: var(--kit-muted); font-size: 12.5px; }
.tl-yellow .tl-txt b::after, .tl-red .tl-txt b::after { content: ""; display: inline-block; width: 8px; height: 11px; margin-left: 6px; border-radius: 2px; vertical-align: -1px; background: #FACC15; }
.tl-red .tl-txt b::after { background: #DC2626; }

/* release 403: simulation page, designer's kit 05 (player vs. player), 06 (leaderboard), 12 (box score), 13 (splits bars) */
.kit-av { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; color: #fff; font: 800 10px/1 var(--b-font, Nunito, system-ui, sans-serif); vertical-align: middle; }
.kit-av.is-home { background: var(--kit-a); }
.kit-av.is-away { background: var(--kit-b); }
.kit-pos { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #EEF0F5; color: #344054; font: 800 10.5px/1.4 var(--b-font, Nunito, system-ui, sans-serif); vertical-align: 1px; }
#playerTable td.kit-best, .kit-boxt td.kit-best { color: var(--kit-a) !important; font-weight: 800 !important; }
.kit-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.kit-spark i { display: block; width: 7px; border-radius: 2px; background: #C7D2FE; }
.kit-spark i.is-last { background: var(--kit-a); }
.kit-pbar.is-split { max-width: 160px; }
.kit-pvp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--kit-line); }
.kit-pvp-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.kit-pvp-who.is-r { align-items: flex-end; text-align: right; }
.kit-pvp-who.is-r label { display: flex; justify-content: flex-end; }
.kit-pvp-who label { display: block; width: 100%; }
.kit-pvp-who select { width: 100%; min-width: 0; max-width: 260px; height: 34px; padding: 0 8px; border: 1px solid #d9dbe9; border-radius: 8px; background: #fff; color: var(--kit-ink); font: 700 14px/1.2 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-pvp-who small { color: var(--kit-muted); font-size: 12px; }
.kit-vs { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--kit-soft); color: var(--kit-muted); font: 800 11px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-pvp-rows { margin: 0; padding: 0; list-style: none; }
.kit-pvp-rows li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--kit-line); font-variant-numeric: tabular-nums; }
.kit-pvp-rows li span:last-child { text-align: right; }
.kit-pvp-rows em { color: var(--kit-muted); font-style: normal; font-size: 12.5px; font-weight: 700; text-align: center; }
.kit-pvp-rows .is-win { font-weight: 800; }
.kit-pvp-rows .is-win.is-a { color: var(--kit-a); }
.kit-pvp-rows .is-win.is-b { color: var(--kit-b); }
.kit-pvp-edge { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--kit-soft); }
.kit-pvp-edge p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 13px; }
.kit-pvp-edge p span { color: var(--kit-muted); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 11.5px; }
.kit-pvp-edge .kit-stack { margin: 0; }
.kit-boxt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kit-boxt :is(th, td) { padding: 9px 10px; border-bottom: 1px solid var(--kit-line); text-align: right; white-space: nowrap; font-size: 13.5px; }
.kit-boxt thead th { background: var(--kit-soft); color: var(--kit-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.kit-boxt :is(thead th:first-child, tbody th) { text-align: left; }
.kit-boxt tbody th { color: var(--kit-ink); font-weight: 700; }
.kit-boxt tbody th small { color: var(--kit-muted); font-weight: 600; margin-left: 4px; }
.kit-boxt td.is-zero { color: #B0B5C3; }
.kit-boxt tr.kit-box-team th { padding-top: 14px; background: #fff; color: var(--kit-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.kit-boxt tr.kit-box-total :is(th, td) { background: #FAFAFF; font-weight: 800; color: var(--kit-ink); }
#playerTable td.kit-who { display: flex; align-items: center; }
#playerTable td.kit-who .kit-who-txt { display: flex; flex-direction: column; min-width: 0; }
#playerTable td.kit-who .player-name { font-weight: 700; }

/* release 439 (owner: spacing; Preline progress cards, "I like the orange thing") */
.kit-pvp { padding-bottom: 20px; }
html body .kit-pvp > .card-head, html body [data-kit-box] > .card-head { padding-left: 20px; padding-right: 20px; }
.kit-pvp-top, .kit-pvp-rows { margin-left: 20px; margin-right: 20px; }
.kit-pvp-edge { margin: 16px 20px 0; padding: 14px 16px; border: 1px solid var(--kit-line); background: #fff; }
.kit-pvp-rows li { row-gap: 6px; }
.kit-pvp-rows .is-win.c-home { color: var(--kit-a); } .kit-pvp-rows .is-win.c-away { color: var(--kit-b); }
.kit-pvp-split { grid-column: 1 / -1; display: flex; gap: 3px; height: 3px; }
.kit-pvp-split i { display: block; min-width: 3px; border-radius: 999px; opacity: .45; }
.c-home { background: var(--kit-a); } .c-away { background: var(--kit-b); }
.kit-pvp-rows span.c-home, .kit-pvp-rows span.c-away { background: none; }
.kit-seg { display: flex; gap: 4px; height: 10px; margin: 2px 0 12px; }
.kit-seg i { display: block; min-width: 8px; border-radius: 999px; }
.kit-seg .is-tie, .kit-seg-legend .is-tie { background: repeating-linear-gradient(135deg, #C7CBD6 0 3px, #EEF0F4 3px 6px); }
.kit-seg-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.kit-seg-legend li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kit-seg-legend li:nth-child(2) { text-align: center; align-items: center; } .kit-seg-legend li:last-child { text-align: right; align-items: flex-end; }
.kit-seg-legend b { color: var(--kit-ink); font: 800 22px/1.1 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-seg-legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--kit-muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-seg-legend span i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
html:not(#k439a):not(#k439b):not(#k439c):not(#k439d):not(#k439e):not(#k439f) body .kit-boxt tbody th { background: #fff !important; }
html:not(#k439a):not(#k439b):not(#k439c):not(#k439d):not(#k439e):not(#k439f) body .kit-boxt tr.kit-box-team th { background: var(--kit-soft) !important; }
html:not(#k439a):not(#k439b):not(#k439c):not(#k439d):not(#k439e):not(#k439f) body .kit-boxt tr.kit-box-total :is(th, td) { background: #FAFAFF !important; }
html body .kit-boxt :is(th, td):first-child { padding-left: 20px; } html body .kit-boxt :is(th, td):last-child { padding-right: 20px; }
.kit-pvp-rows li > span:nth-child(3) { text-align: right; } .kit-pvp-rows li > span:first-child { text-align: left; }

/* release 440: the result card (Preline segmented status card) and the game-by-game strip (Preline streak card) */
.kit-res { padding: 6px 20px 18px; }
.kit-res-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; margin: 0 0 12px; padding: 0; list-style: none; }
.kit-res-nums li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kit-res-nums b { color: var(--kit-ink); font: 800 28px/1.05 var(--b-font, Nunito, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.kit-res-nums span { display: inline-flex; align-items: center; gap: 7px; color: var(--kit-muted); font: 700 13.5px/1.3 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-res-nums span i { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.kit-res-nums small { color: var(--kit-muted); font-size: 12px; }
.kit-res .is-home { background: var(--kit-a); } .kit-res .is-away { background: var(--kit-b); } .kit-res .is-draw { background: var(--kit-d); }
.kit-res-bar { height: 12px; margin: 0; }
.kit-streak { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--kit-line); }
.kit-streak-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; color: var(--kit-ink); font: 800 14px/1.3 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-streak-h small { color: var(--kit-muted); font-weight: 600; font-size: 12px; }
.kit-streak ol { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.kit-streak li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 46px; }
.kit-dot { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font: 800 13px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kit-dot.is-home { background: var(--kit-a); } .kit-dot.is-away { background: var(--kit-b); }
.kit-dot.is-draw { background: #fff !important; border: 2px dashed #B0B5C3; color: var(--kit-muted); }
.kit-streak li small { color: var(--kit-muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kit-streak-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; color: var(--kit-muted); font: 700 13px/1.3 var(--b-font, Nunito, system-ui, sans-serif); }
.kit-streak-sum span { display: inline-flex; align-items: center; gap: 6px; }
.kit-streak-sum i { width: 10px; height: 10px; border-radius: 50%; }
.kit-streak-sum b { color: var(--kit-ink); }

/* release 441: the strip in the progress card, filling as games finish */
.kit-streak.is-progress { margin-top: 16px; padding-top: 14px; }
.kit-streak .is-home { background: var(--kit-a); } .kit-streak .is-away { background: var(--kit-b); } .kit-streak .is-draw { background: var(--kit-d); }
.kit-dot.is-wait { width: 14px; height: 14px; margin: 8px; background: #EEF0F4; border: 2px dashed #D0D5DD; }
.kit-streak li.is-wait small { color: #C3C7D2; }
.kit-streak li.is-new .kit-dot { animation: kitPop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes kitPop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kit-streak li.is-new .kit-dot { animation: none; } }

/* release 444 (owner: "NBA and NHL have symbols, La Liga is a shirt, maybe don't show symbol at all"): no team badges or jerseys */
.sl-mark { display: none !important; }
.lvk-jerseys:empty { display: none; }