/* ===== bsc- = BoxScore =====
   Moved out of boxscore.php's inline <style> block 2026-08-11 (continuing the page-by-page
   cleanup, see css/dyne.css's own header for the project). All static, no PHP-variable
   interpolation, so this is a clean 1:1 move. Includes a `.layoutBoundary { max-width: none
   !important; }` override — intentionally scoped to only THIS page (per the original comment
   below), safe here since this file is only ever linked from boxscore.php, unlike dyne.css
   which loads on every page. */

/* .layoutBoundary (externes Stylesheet) deckelt normalerweise bei 1400px - User-Wunsch
   2026-08-11 "wenn Platz da ist noch breiter werden": auf dieser Seite aufgehoben, damit
   .bsc-page auf breiten/Ultrawide-Bildschirmen tatsaechlich breiter werden kann. Nur
   hier ueberschrieben (eigener <style>-Block, nicht die geteilte externe Datei) - andere
   Seiten, die den Standard-Shell nutzen, bleiben unveraendert bei 1400px. */
.layoutBoundary { max-width: none !important; }
/* .layoutBoundary allein reicht nicht - #content (Klasse .content) und section.main liegen
   noch eine bzw. zwei Ebenen weiter aussen und haben in dyne.css offenbar ihre eigene
   Standard-Breitenbegrenzung (User-Feedback 2026-08-13: Box blieb auf 4K trotz obigem
   Override bei ~1080px haengen, also deutlich UNTER den 1400px von .layoutBoundary - die
   Begrenzung muss also aus einem dieser beiden weiter aussen liegenden Container kommen).
   Beide hier ebenfalls aufgehoben, gleiches Prinzip wie oben: nur auf dieser Seite (diese
   Datei laedt ausschliesslich boxscore.php), andere Seiten mit Standard-Shell bleiben
   unveraendert. */
#content.content { max-width: none !important; }
section.main { max-width: none !important; }
/* Maximalbreite auf 1600px reduziert (User-Korrektur 2026-08-17: die volle vorherige
   Breite von 3220px wirkte auf breiten Screens zu ausgestreckt fuer ein einzelnes,
   gestapeltes Team-Panel). 1600px liegt knapp ueber dem Minimum, das eine Spieler-Tabelle
   ohne eigenes horizontales Scrollen braucht (1420px min-width + 32px Panel-Padding, siehe
   table.bsc-player-table weiter unten). Auf schmaleren Fenstern bleibt .bsc-page einfach bei
   100% Breite (kein erzwungener Weissraum). */
.bsc-page { max-width: 1600px; margin: 0 auto; }
/* Weisse Aussenbox um den gesamten Inhalt (User-Wunsch 2026-08-17), gleiches Muster wie
   .dyp-box/.pls-box in dyne.css (design-system.md "Outer white content box"). Scoreboard/
   Team-Panels behalten ihre eigenen Karten (jetzt mit Border statt nur Box-Shadow, siehe
   dort) - wie .dyp-gm-card innerhalb von .dyp-box. */
.bsc-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 22px 24px 26px; }
/* Nav-lokale Rueckweg-Links (siehe $bsc_page_local_html) - #bscNavLocal ist EIN
   Flex-Item neben dem Hamburger-Icon (nav.php .mainnav-page-local{display:contents}),
   sein Padding-Left wird per JS (bscSyncNavLocalPadding(), <script> unten) auf die
   tatsaechliche Position von .bsc-page synchronisiert. */
.bsc-navlocal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bsc-topbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.bsc-btn { font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--navy-text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.bsc-btn:hover { background: var(--row-hover); }
/* Farben auf dunkel (statt weiss+text-shadow) umgestellt, seit .bsc-topbar innerhalb der
   neuen weissen .bsc-box liegt (User-Wunsch 2026-08-17) statt direkt auf dem dunklen
   Seitenhintergrund zu stehen. */
.bsc-meta { text-align: right; font-size: 12px; color: var(--text-muted); }
.bsc-meta a { color: var(--pill-bird-text); }
.bsc-meta b { font-variant-numeric: tabular-nums; color: var(--text); }

/* Liegt jetzt innerhalb von .bsc-box, braucht daher keine eigene Karte (Hintergrund/Shadow)
   mehr - nur noch die Textbreite bleibt begrenzt, damit die Fehlermeldung nicht ueber die
   volle 1600px-Boxbreite laeuft. */
.bsc-error { max-width: 480px; margin: 10px auto; text-align: center; }
.bsc-error h2 { color: var(--bad-text) !important; text-shadow: none !important; margin-top: 0; }
.bsc-error p { color: var(--text) !important; text-shadow: none !important; }

.bsc-scoreboard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(20,30,40,.06); }
.bsc-round-chip-wrap { text-align: center; margin-bottom: 14px; }
.bsc-round-chip { display: inline-block; background: var(--navy-dark); color: #ffffff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 12px; }
.bsc-score-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.bsc-score-side { display: flex; align-items: center; gap: 14px; }
.bsc-score-side.right { flex-direction: row-reverse; text-align: right; }
.bsc-team-logo { width: 56px; height: 56px; object-fit: contain; }
.bsc-score-side .bsc-tinfo .bsc-tname { font-size: 16px; font-weight: 800; color: var(--bsc-tname-col, var(--navy-text)); }
.bsc-score-side .bsc-tinfo .bsc-tname a { color: var(--bsc-tname-col, var(--navy-text)); text-decoration: none; }
html[data-theme="dark"] .bsc-score-side .bsc-tinfo .bsc-tname,
html[data-theme="dark"] .bsc-score-side .bsc-tinfo .bsc-tname a { color: var(--bsc-tname-col-dark, var(--navy-text)); }
.bsc-score-side .bsc-tinfo .bsc-tname a:hover { text-decoration: underline; }
.bsc-score-side .bsc-tinfo .bsc-tgm { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.bsc-score-side .bsc-tinfo .bsc-tgm a { color: var(--text-muted); }
.bsc-score-side .bsc-tinfo .bsc-tcomment { position: relative; display: inline-block; max-width: 240px; margin-top: 7px; padding: 6px 10px; background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 10px; font-size: 11.5px; font-style: italic; color: var(--text-muted); line-height: 1.35; text-align: left; }
.bsc-score-side .bsc-tinfo .bsc-tcomment::after { content: ""; position: absolute; top: -5px; left: 14px; width: 9px; height: 9px; background: var(--bg-card-alt); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.bsc-score-side.right .bsc-tinfo .bsc-tcomment::after { left: auto; right: 14px; }
.bsc-score-mid { text-align: center; font-variant-numeric: tabular-nums; }
.bsc-score-mid .bsc-pts { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text); }
.bsc-score-mid .bsc-pts .bsc-dash { color: var(--text-muted-2); font-weight: 500; margin: 0 8px; font-size: 22px; }
@media (max-width: 640px) { .bsc-score-row { grid-template-columns: 1fr; gap: 12px; } .bsc-score-side.right { flex-direction: row; text-align: left; } }

/* Matchup-Kontext-Leiste (User-Wunsch 2026-09-24, Mock "Variante B"): eine Zeile unter dem Ergebnis in
   derselben Karte, durch eine Haarlinie abgesetzt. Links/rechts Serie/Bilanz/Letzte 10 je Team als
   .bsc-stat-chip (gleiche Optik wie die Chips der Team-Panels, Team B gespiegelt), in der Mitte der
   Direktvergleich (Balken + H2H-Serie + "Letzte Duelle"-Aufklapper). Die Balkenfarben sind die
   Team-Primaerfarbe color1 (--bsc-bar-*, vom PHP inline gesetzt) - bewusst auch im Dark Mode
   (User-Wunsch 2026-09-26), keine lesbare Dark-Variante. */
.bsc-ctx { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr minmax(240px, 300px) 1fr; gap: 18px; align-items: center; }
.bsc-ctx .bsc-stat-chip-row { margin-bottom: 0; }
.bsc-ctx-chips.right { justify-content: flex-end; }
.bsc-ctx .bsc-stat-chip.bsc-ctx-w .v { color: var(--good-text); }
.bsc-ctx .bsc-stat-chip.bsc-ctx-l .v { color: var(--bad-text); }
.bsc-ctx-h2h { display: grid; gap: 6px; }
.bsc-ctx-lbl { text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted-2); }
.bsc-ctx-bar { display: grid; grid-template-columns: 22px 1fr 22px; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.bsc-ctx-bar .n:first-child { text-align: right; }
.bsc-ctx-bar .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); gap: 2px; }
.bsc-ctx-bar .bar .a { background: var(--bsc-bar-a, var(--navy-text)); }
.bsc-ctx-bar .bar .b { background: var(--bsc-bar-b, var(--navy-text)); }.bsc-ctx-h2h-foot { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.bsc-ctx-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 9px; background: var(--good-bg); color: var(--good-text); border: 1px solid var(--good-border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsc-ctx-pill i { font-style: normal; font-weight: 600; letter-spacing: .03em; opacity: .8; }
.bsc-ctx-toggle { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--pill-bird-text); background: none; border: 0; padding: 2px 4px; cursor: pointer; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
.bsc-ctx-toggle:hover { text-decoration: underline; }
.bsc-ctx-toggle:focus-visible { outline: 2px solid var(--pill-bird-border); outline-offset: 2px; }
.bsc-ctx-caret::before { content: "\25BE"; }
.bsc-ctx-toggle[aria-expanded="true"] .bsc-ctx-caret::before { content: "\25B4"; }
/* Aufklapp-Block "Letzte Duelle": nur die 5 juengsten Spiele der beiden GMs, dieses Spiel hervorgehoben. */
.bsc-duels { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; justify-content: center; }
.bsc-duels[hidden] { display: none; }
.bsc-duels-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.bsc-duels .bsc-sub-h { margin: 0 0 6px; }
.bsc-duels-note { font-size: 10.5px; color: var(--text-muted-2); margin-bottom: 6px; }
.bsc-duel-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: auto auto auto; }
.bsc-duel { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 14px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 11.5px; }
.bsc-duel:last-child { border-bottom: 0; }
.bsc-duel:nth-child(even) { background: var(--bg-card-alt); }
.bsc-duel.cur { background: var(--pill-bird-bg); }
.bsc-duel-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; }
.bsc-duel-dot.w { background: var(--good-bg); color: var(--good-text); border: 1px solid var(--good-border); }
.bsc-duel-dot.l { background: var(--bad-bg); color: var(--bad-text); border: 1px solid var(--bad-border); }
.bsc-duel-when { color: var(--text-muted); }
.bsc-duel-now { margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pill-bird-text); white-space: nowrap; }
.bsc-duel-score { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); text-decoration: none; }
a.bsc-duel-score { color: var(--navy-text); }
a.bsc-duel-score:hover { text-decoration: underline; }
.bsc-duel-colon { color: var(--text-muted-2); margin: 0 6px; }
.bsc-duel-team.win { font-weight: 800; }
.bsc-duels-foot { width: 0; min-width: 100%; margin-top: 10px; text-align: center; font-size: 11px; font-weight: 600; }
.bsc-duels-foot a { color: var(--pill-bird-text); text-decoration: none; }
.bsc-duels-foot a:hover { text-decoration: underline; }
@media (max-width: 640px) {
	.bsc-ctx { grid-template-columns: 1fr; gap: 12px; }
	.bsc-ctx-h2h { order: -1; }
	.bsc-ctx-chips.right { justify-content: flex-start; }
}

/* Team-Panels stehen UNTEREINANDER statt nebeneinander (User-Wunsch 2026-08-17): jedes
   Panel bekommt dadurch die volle Breite von .bsc-page statt sie sich mit dem anderen Team
   teilen zu muessen - table.bsc-player-table (min-width 1420px weiter unten) passt so auf
   praktisch jedem Desktop-Fenster (~1592px inkl. Panel-Padding) ohne eigenes horizontales
   Scrollen, waehrend die nebeneinander-Variante dafuer erst ab ~3200px Fensterbreite
   ausreichte. Kein Media-Query-Umbruch mehr noetig, da immer einspaltig. */
.bsc-team-panels { display: grid; grid-template-columns: 1fr; gap: 18px; }
.bsc-team-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,30,40,.06); }
.bsc-thead-bar { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; }
.bsc-tp-body { padding: 14px 16px 18px; }

.bsc-stat-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bsc-stat-chip { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-size: 10.5px; min-width: 54px; text-align: center; }
.bsc-stat-chip .k { display: block; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-muted-2); font-size: 9px; margin-bottom: 2px; }
.bsc-stat-chip .v { display: block; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

.bsc-sub-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 14px 0 6px; }
.bsc-table-scroll { overflow-x: auto; }
/* table-layout:fixed + nur die Namensspalte mit eigener Breite (User-Wunsch 2026-08-11
   "Spielerspalten alle gleich groß machen"): alle uebrigen (Stats-)Spalten bekommen
   bewusst KEINE eigene Breite - bei fixed Table-Layout teilen sich Spalten ohne
   angegebene Breite den verbleibenden Platz automatisch zu gleichen Teilen auf (CSS-
   Standardverhalten, kein JS noetig). min-width haelt die Spalten auch bei schmalerem
   Panel (< volle .bsc-page-Maximalbreite) lesbar breit genug fuer den laengsten Zellinhalt
   ("38/71 (53.5%)" bei FG/3P/FT) statt sie unlesbar zusammenzuquetschen - unterhalb
   dieser Breite greift stattdessen die vorhandene .bsc-table-scroll-Scrollleiste.
   width:100% laesst die Spalten zusaetzlich weiter wachsen, sobald mehr Platz da ist. */
/* border-collapse:separate statt collapse (User-Feedback 2026-09-20, "scrollen immer noch
   langsam" nach der rAF-Drosselung oben) - bekannter Trap aus design-system.md ("Sticky-Spalten
   Trap #2", zuerst bei currentgm.php gefunden): collapse bremst position:sticky-Zellen beim
   Wischen auf mobilem Safari/Chrome spuerbar aus. Visuell identisch hier, da jede Zelle nur ihren
   eigenen border-bottom setzt (keine mit dem Nachbarn geteilten Raender, die durch collapse
   verschmolzen wuerden). */
table.bsc-player-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; min-width: 1420px; font-size: 11px; }
table.bsc-player-table thead th { background: var(--bg-card-alt); color: var(--text-muted); font-weight: 700; padding: 6px 4px; text-transform: uppercase; font-size: 9.5px; letter-spacing: .03em; white-space: nowrap; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; }
table.bsc-player-table thead th.left, table.bsc-player-table tbody td.left { width: 240px; }
/* FG/3P/FT-Zellen ("38/71 (53.5%)") brauchen mehr Platz als die uebrigen Stats-Spalten (User-Wunsch
   2026-09-19: Stats-Spalten schmaler, Namensspalte breit genug fuer den laengsten Namen; die
   restlichen 14 Spalten teilen sich weiter gleichmaessig den Rest). Spaltenindex haengt an der
   Reihenfolge in boxscore.php ($render_group): Spieler,MIN,PTS,REB,AST,STL,BLK,TO,FG,3P,FT. */
table.bsc-player-table thead th:nth-child(9), table.bsc-player-table thead th:nth-child(10), table.bsc-player-table thead th:nth-child(11) { width: 88px; }
table.bsc-player-table thead th.left { text-align: left; }
table.bsc-player-table tbody td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Namensspalte hat eine feste Breite (240px, siehe th.left/td.left oben), die dadurch in
   allen 4 Tabellen (Starter/Bank je Team) gleich breit ist. Lange Namen sollen dabei NICHT
   umbrechen (User-Wunsch 2026-08-13, Kurskorrektur ggue. 2026-08-11: vorher bewusst
   white-space:normal fuer Umbruch in 2. Zeile) - stattdessen werden sie mit Ellipsis
   abgeschnitten; title-Attribut am Namenslink (siehe boxscore.php) zeigt den vollen Namen
   beim Hovern. */
table.bsc-player-table tbody td.left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.bsc-player-table tbody tr:nth-child(even) { background: var(--bg-card-alt); }
table.bsc-player-table th.left, table.bsc-player-table td.left { position: sticky; left: 0; z-index: 1; box-shadow: 2px 0 4px rgba(0,0,0,0.08); }
table.bsc-player-table thead th.left { z-index: 2; }
table.bsc-player-table tbody td.left { background: var(--bg-card); }
table.bsc-player-table tbody tr:nth-child(even) td.left { background: var(--bg-card-alt); }
.bsc-player-cell { display: flex; align-items: center; gap: 7px; text-align: left; min-width: 0; }
/* min-width:0 + eigenes overflow/ellipsis auf dem Namens-Span noetig, weil Flex-Items sonst
   (default min-width:auto) nicht unter ihre Inhaltsbreite schrumpfen und die Ellipsis der
   td.left-Regel oben dadurch nie zum Tragen kommt. */
.bsc-player-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bsc-player-cell .bsc-player-pic { flex-shrink: 0; }
.bsc-player-cell a { color: var(--navy-text); text-decoration: none; font-weight: 600; }
.bsc-player-cell a:hover { text-decoration: underline; }
.bsc-player-pic { height: 24px; width: 24px; object-fit: cover; border-radius: 50%; }
/* Mobile: an die NBA-App-Boxscore-Optik angenaehert (User-Wunsch 2026-09-20, Screenshot-Vorlage;
   Korrektur selben Tags: erste Fassung hatte zu grosse Schrift/zu breite Stat-Spalten, dadurch
   WENIGER Spalten im Bild als vorher - Schrift/Breiten deutlich zurueckgenommen). Namensspalte
   schmal (120px, Spielerfoto bleibt - User-Wunsch "trotzdem Bild behalten"), Stat-Spalten (ausser
   FG/3P/FT - "Wuerfe", brauchen mehr Platz fuer "9/20 (45.0%)") auf eine schmale eigene
   Mindestbreite statt sich den Rest gleichmaessig zu teilen (siehe Kommentar bei
   thead th:nth-child(9-11) oben). min-width der Tabelle wird hier bewusst aufgehoben, sonst
   zwaengt die globale 1420px-Untergrenze (siehe oben, fuer Desktop gedacht) die schlankeren
   Mobile-Spalten wieder auseinander. */
@media (max-width: 720px) {
	table.bsc-player-table { min-width: 0; font-size: 11.5px; }
	table.bsc-player-table thead th { font-size: 9px; padding: 6px 3px; }
	table.bsc-player-table thead th.left, table.bsc-player-table tbody td.left { width: 100px; }
	table.bsc-player-table thead th:not(.left) { width: 46px; }
	table.bsc-player-table thead th:nth-child(9), table.bsc-player-table thead th:nth-child(10), table.bsc-player-table thead th:nth-child(11) { width: 78px; }
	table.bsc-player-table tbody td { padding: 8px 3px; }
	.bsc-player-pic { width: 18px; height: 18px; }
	.bsc-player-cell { gap: 5px; }
	.bsc-player-cell a { font-size: 11.5px; }
	/* Traeges Scrollen (User-Feedback): gleiches Perf-Muster wie profile.php's Sticky-Spalten
	   (siehe design-system.md, "Perf trap #3") - box-shadow auf JEDER sticky td (eine pro Zeile)
	   erzwingt pro Zelle eine eigene Compositor-Ebene, was bei vielen Zeilen beim Wischen zaeh
	   wird. Schatten bleibt nur auf der thead th.left, Body-Zellen bekommen stattdessen eine
	   einfache Randlinie; dazu -webkit-overflow-scrolling/overscroll-behavior fuer fluessigeres
	   Touch-Scrollen im Wrapper. */
	table.bsc-player-table tbody td.left { box-shadow: none; border-right: 1px solid var(--border-strong); }
	.bsc-table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
}
/* POTG (Player of the Game): NUR der Stern markiert den Spieler (User-Wunsch 2026-08-13,
   Kurskorrektur ggue. 2026-08-11 - der damals eingefuehrte Gold-Hintergrund der kompletten
   Zeile ist wieder raus, bsc-potg-row bekommt daher aktuell bewusst keine eigene
   background-Deklaration mehr). Sitzt als eigenes Flex-Geschwisterelement NEBEN dem
   Namens-<span> (nicht mehr darin, Bugfix 2026-08-15) - sonst schneidet dessen
   overflow:hidden/text-overflow:ellipsis den Stern bei jedem laengeren, gekuerzten Namen
   mit ab. flex-shrink:0 haelt ihn auch bei wenig Platz sichtbar. */
.bsc-potg-star { color: var(--star-gold); margin-left: 4px; flex-shrink: 0; }
/* Career High/Season High/Season Record/DYNE Record - gleiches 4-Stufen-System wie im
   Game Log von profile.php (Spieler-Ansicht), siehe bsc_stat_cell() weiter unten. Werte jetzt
   zentral in css/dyne.css ("Record-highlighting tokens, shared, consolidated 2026-08-22") statt
   hier dupliziert - Klassennamen (.bsc-best/.bsc-record/.bsc-careerhigh/.bsc-leader) unveraendert,
   nur die Deklaration ist umgezogen. */
/* Eigene, in sich geschlossene .bsc-legend-Klasse (User-Wunsch 2026-08-14: nicht mehr die
   geteilte .dpp-legend aus dyne.css wiederverwenden, die eigentlich fuer draftpicks.php's
   andere Swatch-Optik (kleiner Punkt statt Pill-Badge mit Beispieltext) gedacht ist und hier
   nur durch mehrere Ueberschreibungen passend gemacht wurde). Layout via flex+flex-wrap statt
   dyne.css's 2-Spalten-Grid - dadurch keine grid-auto-flow-Klimmzuege mehr noetig, um alle
   Eintraege in eine Zeile zu zwingen: flex bringt sie ohnehin in eine Zeile, sobald Platz da
   ist, und wrapt sauber um, wenn nicht (kein "2 Zeilen"-Bug wie beim geteilten Grid). */
.bsc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 12px 16px; background: var(--bg-section); border: 1px solid var(--border); border-radius: 6px; font-size: 11.5px; color: var(--pill-birdlost-text); }
.bsc-legend span { white-space: nowrap; }
.bsc-legend .sw { display: inline-block; padding: 1px 7px; border-radius: 9px; font-weight: 800; background: var(--bg-card-alt); color: var(--text); font-size: 10.5px; white-space: nowrap; }
.bsc-legend .sw.leader { text-decoration: underline; text-decoration-color: var(--rec-blue); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.bsc-legend .sw.record { background: var(--rec-gold-bg); color: var(--rec-gold-text); }
.bsc-legend .sw.careerhigh { background: var(--rec-ch-grad); color: var(--rec-ch-text); }
.bsc-player-cell a { color: var(--bsc-tname-col, var(--navy-text)); }
html[data-theme="dark"] .bsc-player-cell a { color: var(--bsc-tname-col-dark, var(--navy-text)); }