/* Game page extras (score chart, feed, teams, cards, form) and the top scorers tables on competition and club pages.
   Built on the app.css tokens (--surface, --line, --muted, --ink, --accent, --red, --bg). Team colours are the only
   new tokens: home green, away purple, checked for colour-blind separation in light and dark. */
/* Dark first, like app.css: :root holds the dark values, [data-theme="light"] the light ones */
:root { --c-home: #2fa866; --c-away: #9878dc }
:root[data-theme="light"] { --c-home: #0f7a41; --c-away: #7a4fc4 }

.gs-team.home, .gs-feed li.home, .prog .k.home { --c: var(--c-home) }
.gs-team.away, .gs-feed li.away, .prog .k.away { --c: var(--c-away) }
.gs-team h3 { display: flex; align-items: center; gap: 8px }
.gs-team h3::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none }
.board .gs-ht { font-size: 12px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap }

/* How it unfolded */
.gs-flow { margin-bottom: 8px }
.gs-flow h2 { margin-top: 4px }
.prog .legend { display: flex; gap: 6px 16px; font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; align-items: baseline }
.prog .legend .k { font-weight: 600 }
.prog .legend .k::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c); vertical-align: middle; margin-right: 6px }
.prog .legend .note { margin: 0 }
.prog .chart { overflow-x: auto }
.prog svg { display: block; width: 100%; min-width: 520px; height: auto; font-family: var(--body) }
.prog .gl { stroke: var(--line); stroke-width: 1 }
.prog .base { stroke: var(--muted); stroke-width: 1 }
.prog .ax { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums }
.prog .ht { stroke: var(--muted); stroke-dasharray: 3 3 }
.prog .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.prog .ln.home, .prog .goal.home, .prog .pt.home { stroke: var(--c-home) }
.prog .ln.away, .prog .goal.away, .prog .pt.away { stroke: var(--c-away) }
.prog .goal.home, .prog .pt.home { fill: var(--c-home) }
.prog .goal.away, .prog .pt.away { fill: var(--c-away) }
.prog .goal, .prog .pt { stroke: var(--surface) !important; stroke-width: 2 }
.prog .end { font-size: 12px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums }
.prog .hit { fill: transparent }
.prog .hit:hover { fill: color-mix(in srgb, var(--ink) 6%, transparent) }
@media (max-width: 640px) { .prog .ax { font-size: 16px } .prog .end { font-size: 17px } }

/* Live feed */
.gs-feed { max-height: 1400px; overflow-y: auto }
.gs-feed .gs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 1px }
.gs-feed .gs-badge { display: inline-block; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 6px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px }
.gs-feed li.gs-goal .what { font-weight: 700 }
.gs-feed li.gs-goal .what small { font-weight: 400 }
.gs-feed .gs-src { display: block; font-size: 12px }
.gs-feed .gs-src a { color: var(--muted) }
.gs-feed .gs-tick { color: var(--accent); font-weight: 600 }
.gs-feed li.gs-phase { display: block; text-align: center; font: 700 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 9px 6px; border-radius: 6px; border-bottom: 0; margin: 2px 0 }

/* Scorers and teams */
table.sc tr.gs-total td { border-top: 2px solid var(--line); font-weight: 600 }
.gs-team ol.xv li span { min-width: 0 }
.gs-team abbr { text-decoration: none; color: var(--muted) }
.gs-team .gs-off { color: var(--muted) }
details.gs-subs { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px }
details.gs-subs summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent) }
details.gs-subs summary small { color: var(--muted); font-weight: 500; margin-left: 4px }
details.gs-subs table { margin-top: 6px }
.gs-mgmt { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px }
.gs-mgmt h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.gs-mgmt dl { display: grid; grid-template-columns: fit-content(40%) 1fr; gap: 2px 10px; margin: 0; font-size: 13px }
.gs-mgmt dt { color: var(--muted) }
.gs-mgmt dd { margin: 0; min-width: 0 }

/* Cards and incidents */
.gs-cards .gs-none { margin: 0; font-weight: 600 }
.gs-card { display: inline-block; width: 9px; height: 12px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; background: var(--muted) }
.gs-card.yellow { background: #e8b923 }
.gs-card.red { background: #c4271b }
.gs-card.black { background: #111; outline: 1px solid var(--muted) }
.gs-inc { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; display: grid; gap: 4px }

/* Head to head and form */
.gs-formrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; flex-wrap: wrap }
.gs-formrow .t { font-weight: 600 }
.gs-form { display: inline-flex; gap: 4px }
.gs-pill { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; font: 700 13px/1 var(--body); text-decoration: none; color: #fff }
.gs-pill:hover { color: #fff; filter: brightness(1.1) }
.gs-pill.W { background: var(--accent-strong) }
.gs-pill.D { background: var(--muted) }
.gs-pill.L { background: var(--red) }
.gs-h2h h3 { margin: 14px 0 4px }
.gs-h2h .note { margin: 4px 0 8px }

/* Top scorers (competition and club pages) */
.ts-wrap { overflow-x: auto }
.ts { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 360px }
.ts th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line) }
.ts td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--line) }
.ts tr:last-child td { border-bottom: 0 }
.ts .pl { text-align: left }
.ts .pl small { display: block; color: var(--muted); font-size: 12px }
.ts .pl a { text-decoration: none }
.ts .pos { color: var(--muted); width: 28px; text-align: center }
.ts .tot { font-weight: 800 }
.ts-link a { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 14px }
@media (max-width: 480px) { .ts .xs { display: none } }