/* =====================================================================
   Gemeinsames Stylesheet für alle GUI-Seiten (aufstellung/liga/waiver/
   draft/draftboard/stats/verwaltung). Dedupliziert aus den drei
   Original-Prototypen (identischer :root-Block + größtenteils identische
   Klassen waren dort dreimal kopiert) - Optik bewusst unverändert
   übernommen, nur seitenspezifische Klassen ergänzt für die vier neuen
   Seiten (draft/draftboard/stats/verwaltung), im selben Duktus.
   ===================================================================== */
:root{
  --turf-night:#0d1f16; --turf-mid:#132a1e; --turf-panel:#173425; --turf-panel-2:#1c3d2b;
  --pitch:#1e4a30; --pitch-line:rgba(241,237,225,0.14);
  --chalk:#f1ede1; --chalk-dim:#a9b8ac; --chalk-faint:#6f8177;
  --flag:#eab929; --flag-dim:#9c8231; --flare:#d9564c; --flare-dim:#7a3a35;
  --steel:#6c93c9; --green-ok:#5fae72;
  --line-grey:#25402f; --line-grey-2:#2c4a36; --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(ellipse at 15% -10%, rgba(234,185,41,0.06), transparent 45%), var(--turf-night);
  color:var(--chalk); font-family:'Inter',sans-serif; min-height:100vh; padding-bottom:60px;
}
::selection{background:var(--flag); color:var(--turf-night);}
/* max-width fließend statt hart gedeckelt (min() statt fixem 1320px) -
   auf breiten Monitoren (>1680px) bleibt ein bewusster Rand für Lesbarkeit,
   auf allem darunter nutzt die Seite die verfügbare Breite direkt aus,
   statt bei genau 1320px hart abzuschneiden. */
.wrap{max-width:min(2400px, 96vw); margin:0 auto; padding:0 20px;}
/* Reserviert Platz für #boardSidePanel (position:fixed, 300px, siehe dort) -
   ohne das würde das Panel über den rechten Board-Spalten in draft.html
   liegen (Prep- UND Room-Board, siehe Kommentar bei .board-panel-open in
   draft.html). Wird nur dort per JS gesetzt/entfernt. */
.wrap.board-panel-open{padding-right:322px;}
a{color:inherit;}

/* ---------- Top bar / global nav (7 Tabs) ---------- */
.topbar{border-bottom:1px solid var(--line-grey); background:linear-gradient(180deg, rgba(23,52,37,0.92), rgba(19,42,30,0.6));}
.topbar-inner{padding:14px 0 0;}
.nav-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.brand{font-family:'Anton',sans-serif; font-size:15px; text-transform:uppercase; letter-spacing:.02em; color:var(--chalk); display:flex; align-items:center; gap:8px;}
.brand .dot{width:9px;height:9px;border-radius:50%; background:var(--flag);}
.nav-tabs{display:flex; gap:4px; margin-left:8px; flex-wrap:wrap;}
.nav-tabs a{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em;
  padding:8px 14px; border-radius:7px 7px 0 0; text-decoration:none; color:var(--chalk-faint);
  border:1px solid transparent;
}
.nav-tabs a.active{color:var(--chalk); background:var(--turf-panel); border-color:var(--line-grey); border-bottom-color:var(--turf-panel);}
.nav-tabs a:hover:not(.active){color:var(--chalk-dim);}
/* Kein padding-bottom hier (früher 10px) - .header-actions ist einer von
   mehreren .nav-row-Kindern (Trade-Center-/Bug-Melden-Knöpfe hängen sich
   separat direkt an .nav-row, siehe api.js:mountTradeCenter/
   _ensureBugReportDom) und ein einseitiges Padding verschob dessen Inhalt
   (Liga wechseln/Abmelden) sichtbar gegenüber diesen Geschwistern nach
   oben, obwohl alle .nav-row-Kinder per align-items:center zentriert sind. */
.header-actions{margin-left:auto; display:flex; gap:10px; align-items:center;}
.ghost-btn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; color:var(--chalk);
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:9px 14px;
  cursor:pointer; display:flex; align-items:center; gap:7px; transition:border-color .15s, background .15s;
}
.ghost-btn:hover{border-color:var(--flag-dim); background:var(--turf-panel-2);}
.ghost-btn svg{width:14px; height:14px;}
.ghost-btn:disabled{opacity:.45; cursor:default;}

.subtabs{display:flex; gap:4px; padding:14px 0 0; border-bottom:1px solid var(--line-grey);}
.subtab{
  font-family:'Anton',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:.02em;
  padding:10px 18px; cursor:pointer; color:var(--chalk-faint); border-bottom:2px solid transparent;
  transition:color .15s;
}
.subtab.active{color:var(--chalk); border-bottom-color:var(--flag);}
.subtab:hover:not(.active){color:var(--chalk-dim);}

.view{display:none; padding-top:24px;}
.view.active{display:block;}

/* ---------- Login-Feld (Commissioner-Auth, GUI-Integration) ---------- */
.login-box{display:flex; align-items:center; gap:6px;}
.login-box input{
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px; color:var(--chalk);
  font-family:'JetBrains Mono',monospace; font-size:11.5px; padding:7px 9px; width:110px;
}
.login-status{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); display:flex; align-items:center; gap:6px;}
.login-status .dot{width:7px; height:7px; border-radius:50%; background:var(--flare);}
.login-status.ok .dot{background:var(--green-ok);}
.login-error{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--flare); margin-left:8px;
  white-space:nowrap;
}

/* ---------- Section head ---------- */
.section-head{display:flex; align-items:baseline; gap:12px; margin:0 0 4px;}
.section-head .eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--flag);}
.section-head h2{font-family:'Anton',sans-serif; font-weight:400; font-size:19px; letter-spacing:.01em; text-transform:uppercase; margin:0; color:var(--chalk);}
/* Sprunglink zum passenden Playbook-Abschnitt (Verwaltung > Playbook,
   siehe app/playbook.py) - kleines rundes "?" neben Seiten-/Abschnitts-
   Überschriften, kein Ersatz für die Überschrift selbst. */
.playbook-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; border:1px solid var(--line-grey-2);
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  color:var(--chalk-faint); text-decoration:none; vertical-align:middle; margin-left:4px;
  transition:color .15s, border-color .15s;
}
.playbook-link:hover{color:var(--flag); border-color:var(--flag);}
.section-sub{font-size:12.5px; color:var(--chalk-dim); margin:6px 0 18px; line-height:1.5; max-width:720px;}

/* ---------- Generic week/team select controls ---------- */
.team-switch{display:flex; align-items:center; gap:10px;}
.team-switch label{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-faint);}
.team-switch select, .field-select{
  background:var(--turf-mid); color:var(--chalk); border:1px solid var(--line-grey-2); border-radius:7px;
  padding:8px 12px; font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.01em; text-transform:uppercase; cursor:pointer;
}
/* Draft-Countdown im Menüband (additiv, Baustein C der Draft-Zeitplanung -
   siehe api.js:mountDraftCountdown) - hängt sich per insertAdjacentHTML
   direkt unter .nav-row, oberhalb des seitenspezifischen .topbar-row. */
.draft-countdown-bar{padding:6px 0 12px; display:flex; flex-direction:column; gap:4px;}
.draft-countdown-bar .dc-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.dc-timer{font-family:'Anton',sans-serif; font-size:16px; letter-spacing:.02em; color:var(--flag);}
.dc-meta{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); letter-spacing:.03em;}
.dc-reschedule-notice{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12px; padding:8px 12px; border-radius:8px; margin-bottom:6px;
  background:rgba(217,86,76,0.08); border:1px dashed var(--flare-dim); color:var(--chalk-dim);
}
.dc-reschedule-notice button{
  background:none; border:none; color:var(--chalk-faint); cursor:pointer; font-size:13px; line-height:1; padding:2px 4px;
}
.dc-reschedule-notice button:hover{color:var(--chalk);}

.week-badge{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.1em;}
.score-cluster{display:flex; align-items:baseline; gap:8px; margin-left:auto;}
.score-cluster .lbl{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.1em;}
.score-cluster .val{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:28px; color:var(--flag);}
.save-btn{
  font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; color:var(--turf-night);
  background:var(--flag); border:none; border-radius:8px; padding:11px 20px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease; box-shadow:0 0 0 rgba(234,185,41,0);
}
.save-btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(234,185,41,0.25);}
.save-btn:active{transform:translateY(0);}
.save-btn.saved{background:var(--green-ok); color:#0d1f16;}
.dirty-dot{width:8px;height:8px;border-radius:50%; background:var(--flare); display:none; margin-right:6px;}
.dirty-dot.show{display:inline-block;}

/* ---------- Layout (aufstellung/coaching: Hauptbereich + Sidebar) ---------- */
/* Sidebar-Spur darf bei genug Breite wachsen (statt starrer 300px), damit
   .sidebar (siehe unten) bei mehreren Karten (aufstellung.html: 4) intern
   auf 2 Spalten umbrechen kann - coaching.html hat nur 1 Karte, bleibt dort
   optisch unverändert (Grid mit einem Kind sieht wie ein Block aus). */
.layout{display:grid; grid-template-columns:1fr minmax(300px, 640px); gap:22px; padding-top:22px;}
@media (max-width:1020px){.layout{grid-template-columns:1fr;}}
/* min-width:0 ist hier notwendig, nicht kosmetisch: ein Grid-Item hat ohne
   das einen impliziten min-width:auto - die Bank-Leiste (.bench-strip,
   fixed-width Karten, viele Spieler) würde sonst ihre volle Inhaltsbreite
   als Mindestbreite nach oben durchreichen und den ganzen "1fr"-Grid-Track
   (und damit die gesamte Seite) horizontal aufblähen, statt dass
   .bench-strips eigenes overflow-x:auto greift (führte live zu einer Seite,
   die genau so breit wie die Spieleranzahl war, mit abgeschnittenen Karten
   am rechten Rand statt einem internen Scrollbalken).*/
.main-col{min-width:0;}

/* Draft-Screen-Panels (Baustein D der Draft-Zeitplanung, draft.html) -
   eigene Klasse statt .layout wiederzuverwenden, damit die geänderte
   Spaltenzahl NICHT auch aufstellung.html/coaching.html betrifft, die
   .layout ebenfalls nutzen. Drei Spalten: Pick-Ausblick & Historie links,
   Haupt-Draftpool in der Mitte, Rosterpositionen rechts - responsive
   Fallback wie .layout (Panels stapeln untereinander). */
.draft-layout{display:grid; grid-template-columns:280px 1fr 300px; gap:22px; padding-top:22px;}
@media (max-width:1200px){.draft-layout{grid-template-columns:1fr;}}
.draft-layout .pick-log{max-height:640px;}

/* Room-Board-Ansicht: das Board braucht die volle Bildschirmbreite (9
   Positionsspalten), nicht die schmale Mittelspalte zwischen den beiden
   Sidebars - Pick-Historie/Rosterpositionen rutschen dafür unter das Board,
   statt links/rechts daneben zu stehen (Klasse wird beim Umschalten auf
   den Room-Board-Subtab per JS gesetzt/entfernt). */
.draft-layout.board-wide{grid-template-columns:1fr 1fr;}
.draft-layout.board-wide .main-col{grid-column:1 / -1; grid-row:1;}
.draft-layout.board-wide .left-panel{grid-column:1; grid-row:2;}
.draft-layout.board-wide .right-panel{grid-column:2; grid-row:2;}
@media (max-width:1200px){
  .draft-layout.board-wide{grid-template-columns:1fr;}
  .draft-layout.board-wide .left-panel{grid-column:1; grid-row:2;}
  .draft-layout.board-wide .right-panel{grid-column:1; grid-row:3;}
}
.pick-row.on-clock{border-color:var(--flag); background:rgba(234,185,41,0.1);}
.pick-row.upcoming{opacity:.6;}

.roster-pos-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.rp-cell{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:7px; padding:8px 10px;
}
.rp-cell .rp-pos{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--chalk-faint); text-transform:uppercase;}
.rp-cell .rp-count{font-family:'Anton',sans-serif; font-size:15px; color:var(--chalk);}

.field-card{border:1px solid var(--line-grey); border-radius:var(--radius); overflow:hidden; background:var(--turf-panel);}

/* Feld-Diagramm (aufstellung.html): Offense/Defense stehen sich pre-snap
   gegenüber, Formation/3-4-4-3 bestimmen die tatsächliche Positionierung
   der Slot-Karten (siehe OFFENSE_COORDS/spreadX im Skript). Die
   .slot-Karten selbst (Avatar/Name/Punkte) sind unverändert - nur ihre
   Positionierung wechselt von Flex-Reihe zu absoluter %-Koordinate. */
.field-diagram{
  position:relative; width:100%; height:560px;
  background:repeating-linear-gradient(180deg, var(--pitch) 0 44px, #1a4229 44px 88px);
}
.field-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.field-yard-line{stroke:var(--pitch-line); stroke-width:0.3;}
.field-los{stroke:var(--flag-dim); stroke-width:0.5; stroke-dasharray:1.5 1;}
.field-diagram-label{
  position:absolute; left:14px; z-index:1; font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(241,237,225,0.5);
}
.field-diagram-label.offense-label{top:10px;}
.field-diagram-label.defense-label{bottom:10px;}
.field-slots{position:absolute; inset:0;}
.field-slots .slot{
  position:absolute; transform:translate(-50%,-50%); width:96px; z-index:1;
  background:rgba(13,31,22,0.55); backdrop-filter:blur(1px);
}
/* Dekorativer O-Line-Platzhalter (5 Offensive Linemen, hier nicht als
   Spieler modelliert) - sitzt mittig auf der Line-Reihe, ca. 3x so breit
   wie eine einzelne Spieler-Karte (96px), damit WR/TE-Slots sich sichtbar
   links/rechts davon anordnen statt mittig zu kollidieren. Kein Slot: nicht
   draggable, keine Drop-Handler, z-index niedriger als echte Slots. */
.oline-block{
  position:absolute; transform:translate(-50%,-50%); z-index:0;
  width:300px; height:34px; border-radius:8px;
  border:1px dashed var(--line-grey-2); background:rgba(241,237,225,0.04);
  display:flex; align-items:center; justify-content:center;
}
.oline-block span{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em;
  color:var(--chalk-faint); text-transform:uppercase;
}
/* Boost-Netz-Übersicht (AUFSTELLUNG_BOOST_NETZ_KONZEPT.md): Schalter +
   Perspektiven-Switch oberhalb des Feld-Diagramms, Coach-Badges links/rechts
   davon, Pfeil-Overlay in Pixel-Koordinaten über die gesamte .field-stage
   (Badges + Feld) - siehe redrawBoostNetworkArrows() im Skript. */
.field-card-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:12px 18px; border-bottom:1px dashed var(--line-grey-2);
}
.ctrl-group{display:flex; align-items:center; gap:10px;}
.ctrl-label{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--chalk-faint);
}
.switch{
  position:relative; width:40px; height:22px; border-radius:12px; background:var(--turf-mid);
  border:1px solid var(--line-grey-2); cursor:pointer; transition:background .2s; flex:none;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--chalk-faint); transition:transform .2s ease, background .2s;
}
.switch.on{background:rgba(234,185,41,0.16); border-color:var(--flag-dim);}
.switch.on::after{transform:translateX(18px); background:var(--flag);}
.seg{
  display:flex; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:2px;
  font-family:'JetBrains Mono',monospace; font-size:11px; opacity:0; pointer-events:none; transition:opacity .2s;
}
.seg.active{opacity:1; pointer-events:auto;}
.seg button{
  background:none; border:none; color:var(--chalk-faint); padding:5px 11px; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:inherit; transition:background .15s, color .15s;
}
.seg button.active{background:var(--turf-panel-2); color:var(--chalk);}
.seg button:hover:not(.active){color:var(--chalk-dim);}

/* Boost-Netz-Redesign (AUFSTELLUNG_BOOST_NETZ_REDESIGN_KONZEPT.md):
   "Alle Pfeile zeigen"-Fallback-Schalter + Hinweistext, gleiches
   Sichtbarkeits-Muster wie .seg.active (nur bei aktivem Boost-Netz). */
.boostnet-showall{
  display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--chalk-faint); opacity:0; pointer-events:none; transition:opacity .2s; cursor:pointer;
}
.boostnet-showall.show{opacity:1; pointer-events:auto;}
.boostnet-showall input{accent-color:var(--flag); cursor:pointer;}
.boostnet-hint{
  margin:0; padding:8px 18px; font-size:11px; color:var(--chalk-faint); line-height:1.5;
  border-bottom:1px dashed var(--line-grey-2); display:none;
}
.boostnet-hint.show{display:block;}

.field-stage{position:relative; display:grid; grid-template-columns:88px 1fr 88px;}
.coach-col{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 6px; gap:8px;}
.coach-badge{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:14px; border:2px solid var(--line-grey-2); background:var(--turf-mid);
  color:var(--chalk); flex:none; transition:border-color .25s, box-shadow .25s;
}
.coach-col.own .coach-badge{border-color:var(--flag-dim);}
.coach-col.opp .coach-badge{border-color:var(--flare-dim);}
.field-stage.net-on .coach-col.own .coach-badge{box-shadow:0 0 0 3px rgba(234,185,41,0.15);}
.field-stage.net-on .coach-col.opp .coach-badge{box-shadow:0 0 0 3px rgba(217,86,76,0.15);}
.coach-name{
  font-family:'JetBrains Mono',monospace; font-size:9px; text-align:center; color:var(--chalk-faint);
  line-height:1.4; text-transform:uppercase; letter-spacing:.03em;
}
.coach-col.own .coach-name b{color:var(--flag);}
.coach-col.opp .coach-name b{color:var(--flare);}

.boost-net-svg{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;}
.boost-net-svg path{pointer-events:stroke;}
.boost-net-svg .boostnet-edge-label{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; paint-order:stroke;
  stroke:var(--turf-night); stroke-width:3px; stroke-linejoin:round;
}
.field-stage .slot.boostnet-dim, .field-stage .oline-block.boostnet-dim, .coach-badge.boostnet-dim{opacity:.3;}
.field-stage .slot.boostnet-focused, .field-stage .oline-block.boostnet-focused{
  box-shadow:0 0 0 3px rgba(234,185,41,0.35); border-radius:10px;
}
.coach-badge.boostnet-focused{box-shadow:0 0 0 3px rgba(234,185,41,0.45) !important;}
/* Klick-/Hover-Einladung: nur wenn Boost-Netz an ist UND nicht im
   "Alle anzeigen"-Fallback (dort gibt es keine Fokus-Interaktion). */
.field-stage.net-on .slot:not(.slot-empty),
.field-stage.net-on .coach-badge,
.field-stage.net-on .oline-block{cursor:pointer;}

/* Mini-Signal-Punkt je Spieler-Karte (Konzept Abschnitt 3.2): fasst den
   kombinierten Faktor dieses Spielers zusammen, damit man auch OHNE Klick
   sieht, wo sich ein genauerer Blick lohnt - nur sichtbar, wenn das
   Boost-Netz an ist (Klasse .net-on auf .field-stage). */
.boostnet-signal-dot{
  display:none; position:absolute; top:-2px; right:-2px; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--turf-panel);
}
.field-stage.net-on .boostnet-signal-dot{display:block;}
.boostnet-signal-dot.boost{background:var(--green-ok);}
.boostnet-signal-dot.malus{background:var(--flare);}
.boostnet-signal-dot.neutral{background:var(--chalk-faint);}

/* Fokus-Textpanel unterhalb des Feldes - kompakte Liste derselben Kanten,
   die gerade als Pfeile gezeichnet werden (Konzept Abschnitt 3.7: hilft
   auch auf schmalen Viewports, wo Pfeil-Labels sich überlappen können). */
.boostnet-focus-panel{
  padding:12px 18px; border-top:1px dashed var(--line-grey-2); background:var(--turf-panel-2);
  display:flex; flex-direction:column; gap:6px;
}
.bnf-head{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.04em; color:var(--chalk-dim); text-transform:uppercase; margin-bottom:2px;}
.bnf-row{display:flex; align-items:center; gap:8px; font-size:12px;}
.bnf-row .bnf-label{flex:1; min-width:0;}
.bnf-row .bnf-pct{font-family:'JetBrains Mono',monospace; font-weight:700; flex:none;}
.bnf-row .bnf-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.bnf-row.boost .bnf-dot{background:var(--green-ok);} .bnf-row.boost .bnf-pct{color:var(--green-ok);}
.bnf-row.malus .bnf-dot{background:var(--flare);} .bnf-row.malus .bnf-pct{color:var(--flare);}
.bnf-row.neutral .bnf-dot{background:var(--chalk-faint);} .bnf-row.neutral .bnf-pct{color:var(--chalk-faint);}

.boost-net-legend{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; padding:12px 16px; font-size:10.5px;
  color:var(--chalk-faint); font-family:'JetBrains Mono',monospace; background:var(--turf-panel);
  border:1px solid var(--line-grey); border-radius:var(--radius);
}
.boost-net-legend .grp{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.boost-net-legend .sep{width:1px; height:14px; background:var(--line-grey-2);}
.boost-net-legend .item{display:inline-flex; align-items:center; gap:6px;}
.boost-net-legend .dot{width:9px; height:9px; border-radius:50%; flex:none;}
.boost-net-legend .ln{width:20px; height:0; border-top:2px solid var(--chalk-dim); flex:none;}
.boost-net-legend .ln.dashed{border-top-style:dashed;}
.boost-net-note{
  margin-top:12px; padding:11px 16px; border-radius:var(--radius); background:var(--turf-panel);
  border:1px solid var(--line-grey); border-left:3px solid var(--flare-dim); font-size:12px; color:var(--chalk-dim);
  line-height:1.6; display:none;
}
.boost-net-note.show{display:block;}

/* Zonen-Tafel (Boost-Netz Konzept B, Bug-Liste-Anhang) - Opt-in-Ansicht,
   siehe #boostNetViewSeg/#ztCard in aufstellung.html. Wiederverwendet die
   echte Defense-Insight-Zonenkarte (_diRenderZoneSvg, .di-zone* Klassen
   aus dem Defense-Insight-Bereich weiter unten in dieser Datei). */
.zt-card{margin-top:16px; padding:16px; border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel);}
.zt-persp-line{font-size:12px; color:var(--chalk-dim); margin:0 0 12px; line-height:1.6;}
.zt-layout{display:grid; grid-template-columns:1.3fr .7fr; gap:18px; align-items:start;}
@media (max-width:900px){ .zt-layout{grid-template-columns:1fr;} }
.zt-field-col{display:flex; flex-direction:column; gap:6px;}
.zt-attacker-row{position:relative; height:64px;}
.zt-att-circle{
  position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:3px; cursor:pointer;
}
.zt-att-avatar{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--turf-panel-2); border:1.5px solid var(--line-grey-2); color:var(--chalk-dim);
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11px; transition:border-color .15s, color .15s;
}
.zt-att-tag{font-family:'Inter',sans-serif; font-size:9.5px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.03em;}
.zt-att-circle.focused .zt-att-avatar{
  border-color:var(--flag); color:var(--chalk); box-shadow:0 0 0 3px rgba(234,185,41,.18);
}
.zt-field-wrap{position:relative; aspect-ratio:100/106; border:1px solid var(--line-grey); border-radius:var(--radius); overflow:hidden; background:var(--turf-mid);}
.zt-field-wrap > div, .zt-field-wrap > svg{position:absolute; inset:0; width:100%; height:100%;}
.zt-overlay-svg{pointer-events:none;}
/* own_offense-Modus: eigene Angreifer sitzen als echte Formation IM Feld
   (siehe ztRenderOverlay/computeOffenseCoords), dafür braucht der Rahmen
   zusätzlichen Rückraum ÜBER dem Zonenfeld - #ztZoneBoard rutscht dafür
   an den unteren Rand statt die volle Höhe zu füllen (106 von 142 Einheiten
   Gesamthöhe = ZT_BACKFIELD_H(36) + 106, siehe ztRenderOverlay). */
.zt-field-wrap.zt-tall{aspect-ratio:100/142;}
.zt-field-wrap.zt-tall #ztZoneBoard{top:auto; bottom:0; height:74.65%;}
#ztZoneBoard .di-zone-rect{
  cursor:pointer; fill-opacity:.68; stroke:rgba(9,20,14,.4); stroke-width:.4; rx:3; ry:3;
  filter:drop-shadow(0 1.5px 3px rgba(4,10,7,.4)); transition:fill-opacity .15s, filter .15s;
}
#ztZoneBoard .di-zone-rect:hover{fill-opacity:.86; filter:drop-shadow(0 2px 5px rgba(4,10,7,.5));}
#ztZoneBoard .di-zone-label{font-weight:700; letter-spacing:.02em;}
#ztZoneBoard .di-zone-factor{font-weight:800;}
.zt-zone-sheen{fill:url(#ztSheenGrad); pointer-events:none;}
.zt-arrow-glow{fill:none; stroke-linecap:round; filter:blur(1.8px); opacity:.4; pointer-events:none;}
.zt-arrow{fill:none; stroke-linecap:round; pointer-events:none;}
/* Unsichtbarer, breiterer Pfad NUR fürs Hovern - ein dünner 1-3 Einheiten
   breiter Pfeil in einer 100-Einheiten-viewBox ist sonst kaum zu treffen. */
.zt-arrow-hit{fill:none; stroke:transparent; pointer-events:stroke;}
.zt-edge-vis{pointer-events:auto; cursor:default;}
.zt-edge-vis.zt-hl{filter:brightness(1.4) drop-shadow(0 0 3px rgba(234,185,41,.55));}
.zt-overlay-svg.zt-dim-others .zt-edge-vis:not(.zt-hl){opacity:.32; transition:opacity .15s;}
/* Gegner-DL Run-Stop: rote T-Tackle-Marken auf der L.O.S. statt Malus-Symbol */
.zt-tstop-bar{fill:var(--flare); filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5));}
/* Malus-Warnsymbole in der Zonen-Kachel (ersetzen den Pfeil bei Malus) */
.zt-malus-mild-tri{fill:var(--flag); stroke:#0d1f16; stroke-width:.3;}
.zt-malus-severe-circle{fill:var(--flare); stroke:#0d1f16; stroke-width:.35;}
.zt-malus-bar{fill:#fff;}
/* Roter Glüh-Ring um D-Line-/LB-Punkte, von denen ein Pass-Rush-/Blitz-Pfeil
   auf den QB ausgeht - macht sofort klar, woher die Gefahr kommt. */
.zt-threat-ring{fill:none; stroke:var(--flare); stroke-width:.5; opacity:.6; filter:drop-shadow(0 0 2px rgba(217,86,76,.6));}
.zt-player{cursor:pointer; pointer-events:auto;}
.zt-player-circle{fill:var(--turf-panel-2); stroke:var(--line-grey-2); stroke-width:.6; transition:stroke .15s;}
.zt-player-init{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:3.6px; fill:var(--chalk-dim);
  text-anchor:middle; dominant-baseline:central; pointer-events:none;
}
.zt-player-tag{
  font-family:'Inter',sans-serif; font-size:2.4px; fill:var(--chalk-faint); text-anchor:middle;
  pointer-events:none; text-transform:uppercase; letter-spacing:.02em;
}
.zt-player.focused .zt-player-circle{stroke:var(--flag); stroke-width:1; filter:drop-shadow(0 0 2px rgba(234,185,41,.6));}
.zt-player.focused .zt-player-init{fill:var(--chalk);}
.zt-side{display:flex; flex-direction:column; gap:10px;}
.zt-detail-card{border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-mid); padding:14px;}
.zt-dk-lbl{font-size:10.5px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
.zt-dk-val{font-size:15px; font-weight:700; margin-bottom:6px; color:var(--chalk);}
.zt-detail-row{display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:5px 8px; margin:0 -8px; border-top:1px dashed var(--line-grey-2); color:var(--chalk-dim); border-radius:5px; transition:background .12s;}
.zt-detail-row[data-edge-i]{cursor:default;}
.zt-detail-row.zt-hl{background:rgba(234,185,41,.14);}
.zt-detail-row b{color:var(--chalk); font-family:'JetBrains Mono',monospace;}
.zt-legend-mini{display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--chalk-dim); margin-top:8px;}
.zt-lr{display:flex; align-items:center; gap:8px;}
.zt-sw{width:14px; height:14px; border-radius:4px; flex-shrink:0;}

@media (prefers-reduced-motion: reduce){
  .switch::after, .coach-badge{transition:none;}
}

.special-teams-strip{
  display:flex; align-items:center; gap:14px; padding:10px 20px;
  border-top:1px dashed var(--line-grey-2); background:var(--turf-panel);
}
.st-label{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-faint);}

.slot{
  width:112px; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 6px 10px; border-radius:10px; border:1px dashed transparent; cursor:grab;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.slot:active{cursor:grabbing;}
.slot.dragover{background:rgba(234,185,41,0.14); border-color:var(--flag);}
.slot-avatar{
  width:46px; height:46px; border-radius:50%; background:var(--turf-mid); border:2px solid var(--line-grey-2);
  display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:15px;
  color:var(--chalk); position:relative;
}
.slot-avatar .team-flag{position:absolute; bottom:-2px; right:-2px; width:12px; height:12px; border-radius:50%; border:2px solid var(--turf-panel);}
.slot-key{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; color:var(--flag); text-transform:uppercase; font-weight:700;}
.slot-name{font-size:11.5px; font-weight:600; text-align:center; line-height:1.2; max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.slot-pts{font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--chalk-dim);}
.slot-empty .slot-avatar{border-style:dashed; color:var(--chalk-faint);}
.slot-empty .slot-name{color:var(--chalk-faint);}
.status-dot{position:absolute; top:-2px; left:-2px; width:11px; height:11px; border-radius:50%; border:2px solid var(--turf-panel);}
.status-dot.OK, .status-dot.ACT{background:var(--green-ok);}
.status-dot.Fraglich, .status-dot.QUEST{background:var(--flag);}
.status-dot.Verletzt, .status-dot.RES{background:var(--flare);}
.status-dot.Bye, .status-dot.E14{background:var(--chalk-faint);}

/* ---------- Bench ---------- */
.bench-strip{
  border-top:1px solid var(--line-grey); background:var(--turf-panel-2); padding:14px 18px;
  display:flex; gap:12px; overflow-x:auto;
}
.bench-strip::-webkit-scrollbar{height:6px;}
.bench-strip::-webkit-scrollbar-thumb{background:var(--line-grey-2); border-radius:3px;}
.bench-card{
  flex:none; width:118px; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:9px;
  padding:9px 8px; cursor:grab; position:relative; transition:border-color .15s, transform .1s;
}
.bench-card:hover{border-color:var(--flag-dim); transform:translateY(-2px);}
.bench-card:active{cursor:grabbing;}
.bench-card .bc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;}
.bench-card .bc-pos{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; color:var(--turf-night); background:var(--chalk-dim); border-radius:4px; padding:2px 5px;}
.bench-card .bc-pts{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--chalk-dim); font-weight:700;}
.bench-card .bc-name{font-size:11.5px; font-weight:600; line-height:1.25; margin-bottom:2px;}
.bench-card .bc-meta{font-size:9.5px; color:var(--chalk-faint); font-family:'JetBrains Mono',monospace;}
.bench-label{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-faint); margin-bottom:8px;}

/* IR/PUP/Suspended + Auswechselspieler (additiv, ROSTER_MANAGEMENT_ERWEITERUNG_KONZEPT.md) */
.bench-card.on-ir{opacity:.6; border-style:dashed;}
.bc-actions{display:flex; align-items:center; gap:4px; margin-top:6px;}
.bc-status-select{
  flex:1; min-width:0; background:var(--turf-panel); color:var(--chalk-dim); border:1px solid var(--line-grey-2);
  border-radius:5px; padding:2px 3px; font-family:'JetBrains Mono',monospace; font-size:8.5px; cursor:pointer;
}
.bc-sub-toggle{
  flex:none; background:var(--turf-panel); border:1px solid var(--line-grey-2); border-radius:5px; color:var(--chalk-faint);
  font-size:11px; line-height:1; padding:3px 5px; cursor:pointer;
}
.bc-sub-toggle:hover{border-color:var(--flag-dim); color:var(--flag);}
.bc-sub-toggle.active{border-color:var(--flag); color:var(--flag); background:rgba(234,185,41,0.12);}
.bc-substitute-badge{
  position:absolute; top:-9px; left:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--flag); color:var(--turf-night); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.35); z-index:2;
}

/* ---------- Generic roster / market / select tables ---------- */
.roster-card, .market-card, .standings-card{border:1px solid var(--line-grey); border-radius:var(--radius); overflow:hidden; background:var(--turf-panel); margin-top:22px;}
table.roster, table.market, table.standings, table.select-table, table.rank-table{width:100%; border-collapse:collapse; font-size:12.5px;}
table.roster th, table.market th, table.standings th, table.rank-table th{
  text-align:left; padding:10px 12px; background:var(--turf-mid); font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint); font-weight:600;
  border-bottom:1px solid var(--line-grey); white-space:nowrap;
}
table.roster th.num, table.roster td.num,
table.market th.num, table.market td.num,
table.standings th.num, table.standings td.num,
table.rank-table th.num, table.rank-table td.num{text-align:right;}
table.roster td, table.market td, table.standings td, table.rank-table td{padding:9px 12px; border-bottom:1px solid var(--line-grey); vertical-align:middle;}
table.roster tr:last-child td, table.market tr:last-child td, table.standings tr:last-child td, table.rank-table tr:last-child td{border-bottom:none;}
table.roster tr.is-bench td{color:var(--chalk-dim);}
table.roster tr:hover td, table.market tr:hover td, table.rank-table tr:hover td{background:rgba(241,237,225,0.02);}
table.standings tr.me td:first-child{box-shadow:inset 3px 0 0 var(--flag);}
.r-pos, .m-pos{font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; color:var(--turf-night); background:var(--chalk-dim); border-radius:4px; padding:3px 6px;}
.r-pos.starter{background:var(--flag);}
.r-name, .m-name{font-weight:600;}
.r-team, .m-team{font-size:10.5px; color:var(--chalk-faint); font-family:'JetBrains Mono',monospace;}
.r-status, .m-status{display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:10.5px;}
.r-status .dot, .m-status .dot{width:7px; height:7px; border-radius:50%;}
.r-num{font-family:'JetBrains Mono',monospace;}

/* Roster-Tabelle (Aufstellung): alle Spalten zentriert außer "Spieler",
   Kopfzeilen klickbar zum Sortieren (Bug-Liste Punkt 3). */
table.roster th, table.roster td{text-align:center;}
table.roster th.r-name-col, table.roster td.r-name{text-align:left;}
table.roster th[data-k]{cursor:pointer; user-select:none; transition:color .12s;}
table.roster th[data-k]:hover{color:var(--chalk);}
table.roster th .sort-arrow{display:inline-block; width:8px; margin-left:2px; color:var(--flag);}
table.roster th.sorted-asc, table.roster th.sorted-desc{color:var(--chalk);}
.r-role{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); text-transform:uppercase;}
.empty-row td{padding:32px 12px; text-align:center; color:var(--chalk-faint); font-family:'JetBrains Mono',monospace; font-size:12px;}

/* ---------- Sidebar ---------- */
/* Grid statt starrer Ein-Spalten-Kette (Nutzer-Feedback: Rand-Fix +
   Kachel-Umbau) - .side-card ist bereits fast identisch zu .admin-card,
   deshalb reicht ein eigenes Mini-Grid statt die Klasse zu wechseln.
   min-width:0 verhindert, dass eine breite Karte (z.B. lange Boost-Liste)
   die Grid-Spur aufbläht - gleiches Prinzip wie schon bei .main-col. */
.sidebar{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; align-content:start; align-items:start;}
.side-card{border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel); padding:16px; min-width:0;}
.side-card h3{
  font-family:'Anton',sans-serif; font-weight:400; font-size:14px; text-transform:uppercase; letter-spacing:.02em;
  margin:0 0 4px; color:var(--chalk);
}
/* Coaching Staff + O-Line/Defense-Schema nebeneinander statt gestapelt
   (Bug-Liste Punkt 4). Feste 1fr/1fr-Aufteilung statt auto-fit: die
   .side-card selbst ist durch das .sidebar-Grid oft nur ~260-300px breit,
   da würde minmax(200px,...) sofort auf eine Spalte zurückfallen und die
   gewünschte Nebeneinander-Anordnung nie zeigen. Nur auf echt schmalen
   (mobilen) Viewports wird gestapelt. */
.staff-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.staff-col{min-width:0;}
.staff-col + .staff-col{border-left:1px solid var(--line-grey); padding-left:14px;}
@media (max-width:520px){
  .staff-cols{grid-template-columns:1fr;}
  .staff-col + .staff-col{border-left:none; padding-left:0; margin-top:16px;}
}
.open-req-group + .open-req-group{margin-top:14px;}
.open-req-group h4{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--chalk-faint); margin:0 0 6px;}
.open-req-row{padding:8px 0; border-bottom:1px solid var(--line-grey);}
.open-req-row:last-child{border-bottom:none;}
.open-req-main{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.open-req-main .name{font-size:12.5px; font-weight:600; color:var(--chalk);}
.open-req-sub{font-size:11px; color:var(--chalk-faint); margin-top:2px;}
.open-req-empty{font-size:11.5px; color:var(--chalk-faint); font-style:italic;}
.link-heading{cursor:pointer; transition:color .15s;}
.link-heading:hover{color:var(--flag);}
.side-sub{font-size:11px; color:var(--chalk-faint); margin-bottom:12px; line-height:1.5;}
/* Playbook-Artikel-Tabellen (rohes content_html, siehe app/playbook_content.py)
   - #playbookContent hat keinen eigenen Tabellen-Reset, ohne diese Klasse
   wuerde eine <table> unformatiert/randlos rendern. */
.playbook-table{width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:12.5px;}
.playbook-table th, .playbook-table td{padding:6px 10px; border-bottom:1px solid var(--line-grey); text-align:left;}
.playbook-table th{color:var(--chalk-faint); font-weight:600; text-transform:uppercase; font-size:10.5px; letter-spacing:.03em;}
.playbook-table td:last-child, .playbook-table th:last-child{text-align:right; font-family:'JetBrains Mono',monospace;}
.opp-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.opp-head .nm{font-family:'Anton',sans-serif; font-size:16px; text-transform:uppercase;}
.opp-head .proj{font-family:'JetBrains Mono',monospace; color:var(--flag); font-weight:700; font-size:17px;}
/* Liga-Gegner-Kachel (Bug-Liste Punkt 5) - jetzt so breit wie Matchup-
   Boosts/Coaching-Staff (grid-column:1/-1 in aufstellung.html), zeigt
   Formation, ein Säulendiagramm "Punkte nach Position" und die 3 besten
   Starter des Gegners statt der früheren flachen Pro-Slot-Liste. */
.opp-form-chip{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-dim);
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px; padding:3px 9px; margin:0 8px 10px 0;
}
.opp-wide-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; align-items:start;}
.opp-section-label{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint); margin-bottom:8px;}
.opp-bar-row{display:flex; align-items:center; gap:8px; font-size:11.5px; padding:3px 0;}
.opp-bar-pos{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; color:var(--turf-night); background:var(--chalk-dim); border-radius:4px; padding:2px 5px; min-width:26px; text-align:center;}
.opp-bar-track{flex:1; height:7px; border-radius:4px; background:var(--turf-mid); overflow:hidden;}
.opp-bar-fill{height:100%; border-radius:4px; background:var(--flag-dim);}
.opp-bar-val{font-family:'JetBrains Mono',monospace; color:var(--chalk-dim); min-width:32px; text-align:right;}
.opp-watch{display:flex; flex-direction:column; gap:8px;}
.opp-watch-card{border:1px solid var(--line-grey); border-radius:8px; padding:8px 10px; background:var(--turf-mid);}
.opp-watch-head{display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:4px;}
.opp-watch-head .pos{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; color:var(--turf-night); background:var(--chalk-dim); border-radius:4px; padding:2px 5px; min-width:26px; text-align:center;}
.opp-watch-head .nm2{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.opp-watch-stats{display:flex; gap:14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint);}

/* Matchup-Boosts-Panel (aufstellung.html) - ein Kärtchen je Spieler mit
   Boost-Aufschlüsselung, darunter dieselben .boost-lane-Akkordeons wie im
   Spieler-Infofenster (siehe api.js:_piRenderBoostExplainLanes), damit
   Popup und Aufstellungsseite optisch und strukturell identisch bleiben. */
#boostPanelBody{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; align-items:start;}
.boost-panel-player{display:flex; flex-direction:column; gap:6px;}
.boost-panel-player-head{display:flex; align-items:center; gap:8px;}
.boost-panel-player-head .pos{
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--chalk); background:var(--turf-mid);
  border:1px solid var(--line-grey-2); border-radius:5px; padding:3px 7px; min-width:38px; text-align:center;
}
.boost-panel-player-head .nm3{font-size:12.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.boost-panel-badge{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-radius:999px; padding:2px 8px; flex:none;
}
.boost-panel-badge.projection{background:rgba(108,147,201,0.18); color:var(--steel);}
.boost-panel-badge.actual{background:rgba(95,174,114,0.18); color:var(--green-ok);}

.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; font-size:10.5px; color:var(--chalk-faint); font-family:'JetBrains Mono',monospace;}
.legend span{display:inline-flex; align-items:center; gap:5px;}
.legend .dot{width:8px; height:8px; border-radius:50%;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--green-ok); color:var(--turf-night); font-weight:700; font-size:13px; padding:12px 20px;
  border-radius:8px; transition:opacity .25s ease, transform .25s ease; z-index:150; max-width:80vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--flare); color:var(--turf-night);}

/* ---------- Liga: Standings / Division ---------- */
.division-block{margin-bottom:26px;}
.division-block h3{
  font-family:'Anton',sans-serif; font-weight:400; font-size:15px; text-transform:uppercase; letter-spacing:.02em;
  color:var(--chalk-dim); margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.division-block h3::before{content:""; width:14px; height:2px; background:var(--flag);}
.team-name-cell{display:flex; align-items:center; gap:9px; font-weight:700;}
.team-rank{font-family:'JetBrains Mono',monospace; color:var(--chalk-faint); font-size:11px; width:14px;}
.streak-chain{display:flex; gap:3px;}
.streak-badge{
  width:19px; height:19px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--turf-night);
}
.streak-badge.W{background:var(--green-ok);}
.streak-badge.L{background:var(--flare);}
.streak-badge.T{background:var(--chalk-faint);}
.diff-pos{color:var(--green-ok);} .diff-neg{color:var(--flare);}

/* ---------- Liga: Matchday ---------- */
.week-nav{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.arrow-btn{
  width:38px; height:38px; border-radius:8px; background:var(--turf-mid); border:1px solid var(--line-grey-2);
  color:var(--chalk); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s;
}
.arrow-btn:hover:not(:disabled){border-color:var(--flag-dim); background:var(--turf-panel-2);}
.arrow-btn:disabled{opacity:.3; cursor:default;}
.week-label{font-family:'Anton',sans-serif; font-size:20px; text-transform:uppercase; letter-spacing:.01em; min-width:170px; text-align:center;}
.week-sub{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.08em; text-align:center; margin-top:-2px;}
.week-hint{margin-left:auto; font-size:11px; color:var(--chalk-faint); font-family:'JetBrains Mono',monospace;}

/* auto-fill statt fester 2 Spalten - nutzt auf breiten Screens automatisch
   mehr Spalten statt fest bei 2 zu bleiben, kein Media-Query-Sonderfall
   mehr nötig (Einspalten-Fall ergibt sich von selbst bei schmaler Breite). */
.matchup-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:14px;}
.mcard{border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel); padding:16px 18px; position:relative;}
.mcard .div-badge{
  position:absolute; top:12px; right:14px; font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--chalk-faint); border:1px solid var(--line-grey-2); border-radius:4px; padding:2px 6px;
}
.mrow{display:flex; align-items:center; justify-content:space-between; padding:6px 0;}
.mrow .nm{font-weight:700; font-size:14px;}
.mrow.winner .nm{color:var(--flag);}
.mrow .sc{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:19px; color:var(--chalk);}
.mrow.winner .sc{color:var(--flag);}
.mcard .vs-divider{height:1px; background:var(--line-grey); margin:2px 0;}
.mcard .status-line{margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.06em;}
.mcard.tie .status-line{color:var(--chalk-dim);}
.mcard.pending .sc{color:var(--chalk-faint);}
/* Live/Endstand-Unterscheidung (Nutzer-Wunsch: Spieltagsübersicht zeigt
   immer den aktuellen Spielstand - gelb während der Spieltag läuft, weiß
   sobald er beendet ist, siehe liga.html:renderMatchday). Höhere Spezifität
   als die .mrow .sc-Basisregel oben, kollidiert nie mit .mrow.winner .sc
   (gleiche Spezifität, bleibt unangetastet), da .winner während live nie
   gesetzt wird. */
.mcard.live .sc{color:var(--flag);}
.mcard.live .status-line{color:var(--flag);}

/* ---------- Modal (geteilt: Kreuztabelle/Playoffs/Waiver-Popup) ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,14,10,0.72); display:none; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto; z-index:100;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:var(--turf-panel); border:1px solid var(--line-grey); border-radius:12px; max-width:960px; width:100%;
  padding:22px 24px 26px; position:relative; min-width:0;
}
.modal.pi-modal{max-width:1560px;}
.modal.oli-modal{max-width:min(2200px, 96vw);}

/* ---------- Bug-Melde-Kontextmenü (Tester-Tag, siehe api.js mountBugReportWidget) ---------- */
.bug-ctx-menu{
  position:fixed; z-index:200; background:var(--turf-panel); border:1px solid var(--line-grey); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35); padding:4px; min-width:150px; display:none;
}
.bug-ctx-menu.show{display:block;}
.bug-ctx-menu-item{
  padding:8px 14px; border-radius:6px; font-size:12.5px; color:var(--chalk); cursor:pointer; white-space:nowrap;
}
.bug-ctx-menu-item:hover{background:var(--turf-mid);}

/* ---------- Spieler-Badges (private Scouting-Marker, siehe app/badges.py) ---------- */
.player-badges{display:inline-flex; gap:2px; margin-left:5px; font-size:11px; vertical-align:middle; cursor:help;}
.badge-picker-list{display:flex; flex-direction:column; gap:2px; max-height:340px; overflow-y:auto;}
.badge-picker-item{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:7px; cursor:pointer; font-size:13px;
}
.badge-picker-item:hover{background:var(--turf-mid);}
.badge-picker-item input[type="checkbox"]{flex:none;}
.badge-picker-item .bp-icon{font-size:15px; flex:none;}
.badge-picker-item .bp-label{flex:1;}
.badge-picker-item input:disabled ~ .bp-label{color:var(--chalk-faint);}

/* ---------- Defense Insight - Zonen-Feld (DEFENSE_ZONEN_KONZEPT.md) ---------- */
.di-field-wrap{margin:10px 0; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:10px; padding:10px;}
.di-field-svg{width:100%; height:auto; display:block;}
.di-los-line{stroke:var(--chalk-faint); stroke-width:.3; stroke-dasharray:1.5,1.5;}
.di-los-label{fill:var(--chalk-faint); font-size:3px; font-family:'JetBrains Mono',monospace;}
.di-zone-rect{stroke:var(--turf-night); stroke-width:.3;}
.di-zone-label{fill:var(--turf-night); font-size:2.6px; font-weight:700; font-family:'Inter',sans-serif; text-transform:uppercase;}
.di-zone-factor{fill:var(--turf-night); font-size:3.2px; font-weight:700; font-family:'JetBrains Mono',monospace;}
.di-zone{opacity:0; animation:diFadeIn .5s ease-out forwards;}
/* Spieler-Zonen-Highlight (siehe api.js:_renderPlayerZoneHighlightSvg) -
   Zonen-Farbe bleibt der Boost-/Malus-Faktor, ein Akzent-Rahmen markiert
   zusätzlich die Zone(n) dieses Spielers, alle anderen werden gedimmt. */
.di-zone-highlighted{stroke:var(--flag); stroke-width:1.6; filter:drop-shadow(0 0 2.5px var(--flag));}
.di-zone-dimmed{opacity:.32;}
.di-yard-line{stroke:var(--chalk); stroke-width:.2; stroke-dasharray:.8,1.2; opacity:.35; pointer-events:none;}
.di-hash-mark{stroke:var(--chalk); stroke-width:.5; opacity:.5; pointer-events:none;}
.di-defender-dot{fill:var(--chalk); fill-opacity:.4; stroke:var(--turf-night); stroke-width:.3;}
@keyframes diFadeIn{from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .di-zone{animation:none; opacity:1;}
}
.di-legend{display:flex; align-items:center; gap:10px; margin-top:12px;}
.di-legend-bar{flex:1; height:10px; border-radius:5px; background:linear-gradient(90deg, var(--green-ok), var(--flag), var(--flare));}
.di-legend-label{font-size:10.5px; color:var(--chalk-faint); white-space:nowrap;}
.di-man-marker{fill:var(--turf-night); font-size:2.6px; font-weight:700; font-family:'JetBrains Mono',monospace; pointer-events:none;}

/* ---------- Defense Insight - Stats-Dashboard (echte Aufstellung/Ranking) ---------- */
.di-stats-heading{font-family:'Anton',sans-serif; font-weight:400; font-size:14px; text-transform:uppercase; margin:18px 0 8px; color:var(--chalk);}
.di-season-picker{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.di-season-picker label{font-size:11px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.04em;}
.di-season-picker input{width:80px; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px; color:var(--chalk); padding:4px 8px; font-family:'JetBrains Mono',monospace;}
.di-stat-picker{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.di-stat-pill{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:20px; color:var(--chalk-dim); font-size:11.5px; padding:5px 12px; cursor:pointer; transition:background .15s,color .15s,border-color .15s;}
.di-stat-pill:hover{border-color:var(--steel);}
.di-stat-pill.active{background:rgba(74,163,255,0.18); border-color:#4aa3ff; color:#8fc4ff;}
.di-metric-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:8px; margin-bottom:16px;}
.di-metric-card{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:8px 10px; text-align:center;}
.di-metric-value{font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--chalk);}
.di-metric-label{font-size:9.5px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.03em; margin-top:2px;}
.di-radar-wrap{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:4px;}
.di-radar-chart{flex:0 0 auto;}
.di-radar-title{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-faint); margin-bottom:6px; text-align:center;}
.di-radar-svg{width:190px; height:190px; overflow:visible;}
.di-radar-ring{fill:none; stroke:var(--line-grey-2); stroke-width:1; stroke-dasharray:2,3;}
.di-radar-axis{stroke:var(--line-grey-2); stroke-width:1;}
.di-radar-poly{fill:rgba(74,163,255,0.22); stroke:#4aa3ff; stroke-width:2; stroke-linejoin:round;}
.di-radar-label{font-size:8.5px; fill:var(--chalk-faint);}

/* ---------- O-Line-Insight: Grade-Board (Gauge-Balken statt Zonen-Karte,
   siehe api.js:_oliRenderGradeBoard) + gestapelter Lauf-/Pass-Split-Balken
   (Nutzer-Wunsch "stacked box", api.js:_oliRenderStatsDashboard).
   Nutzer-Feedback: die 5 Gauges standen einzeln untereinander und nahmen
   die volle Modal-Breite ein - jetzt ein 2-spaltiges Grid ("hintereinander
   statt untereinander", gedrungener), zusammen mit der OC/HC-Info-Kachel
   in einer gemeinsamen Kopfzeile (.oli-header-row) statt als eigene
   volle Zeile darunter. ---------- */
.oli-header-row{display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; margin:8px 0 16px;}
.oli-header-info{flex:1 1 240px; min-width:220px;}
.oli-header-gradeboard{flex:2 1 440px; min-width:320px;}
.oli-gauge-board{display:grid; grid-template-columns:repeat(2, minmax(190px, 1fr)); gap:6px 18px;}
.oli-gauge-row{display:grid; grid-template-columns:110px 1fr 40px; align-items:center; gap:8px;}
.oli-gauge-label{font-size:11px; color:var(--chalk-dim);}
.oli-gauge-label small{color:var(--chalk-faint); font-size:9px;}
.oli-gauge-track{height:9px; border-radius:5px; background:var(--turf-mid); border:1px solid var(--line-grey-2); overflow:hidden;}
.oli-gauge-fill{height:100%; border-radius:5px 0 0 5px; transition:width .2s;}
.oli-gauge-value{font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; text-align:right; white-space:nowrap;}

.oli-stack-bar{display:flex; width:100%; height:22px; border-radius:6px; overflow:hidden; border:1px solid var(--line-grey-2); margin-top:4px;}
.oli-stack-seg{height:100%; transition:width .2s;}
.oli-stack-run{background:var(--steel);}
.oli-stack-pass{background:var(--flare);}
.oli-stack-legend{display:flex; gap:16px; margin-top:6px; font-size:11px; color:var(--chalk-dim);}
.oli-stack-dot{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle;}

/* ---------- Einzelspieler-Zonen-Popup (Spieltag-Boxscore-Doppelklick) ---------- */
.zc-modal{max-width:640px;}
/* WR/TE-Kachel-Ansicht (Nutzer-Wunsch: "nutze mehr die Breite des
   Bildschirms") - !important, da unabhängig vom sonstigen .zc-modal/
   .pi-modal-Kaskadenausgang sicher greifen muss (siehe frontend/api.js:
   openPlayerZoneCardModal). */
.zc-modal.wide{max-width:min(1400px, 96vw) !important;}
.zc-header{margin-bottom:10px;}
.zc-name{font-family:'Anton',sans-serif; font-weight:400; font-size:20px; text-transform:uppercase; color:var(--chalk);}
.zc-sub{font-size:12px; color:var(--chalk-faint); margin-top:2px;}
.zc-sub b{color:var(--chalk);}
.zc-card{border:1px solid var(--line-grey-2); border-radius:9px; background:var(--turf-mid); padding:11px 13px; margin-top:10px;}
.zc-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.zc-card-title{font-size:13px; font-weight:700; color:var(--chalk); text-transform:uppercase; letter-spacing:.02em;}
.zc-card-pts{font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:var(--chalk); flex:none;}
.zc-card-factor{font-size:10.5px; font-weight:500; color:var(--chalk-faint);}
.zc-card-stats{font-size:12px; color:var(--chalk-dim); margin-top:5px;}
.zc-stat-clickable{cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px; color:var(--flag);}
.zc-stat-clickable:hover{color:var(--chalk);}

/* ---------- Separation-Vergleichs-Popup (Nutzer-Wunsch: Klick auf "Ø
   Separation (Yds)" - kleines, transparentes, am Klickpunkt verankertes
   Popup statt eines vollen Modals, gleiches Grund-Idiom wie .bug-ctx-menu) ---------- */
.sep-popover{
  position:fixed; z-index:210; width:340px; max-width:calc(100vw - 16px);
  background:rgba(13,31,22,0.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-grey-2); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.45);
  padding:10px 12px 12px; display:none;
}
.sep-popover.show{display:block;}
.sep-popover-head{
  display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono',monospace;
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--chalk-dim); margin-bottom:8px;
}
.sep-popover-close{background:none; border:none; color:var(--chalk-faint); cursor:pointer; font-size:13px; padding:0 2px;}
.sep-popover-close:hover{color:var(--chalk);}
.sep-popover-body{max-height:340px; overflow-y:auto;}
.sep-rows{display:flex; flex-direction:column; gap:4px;}
.sep-row{display:flex; align-items:center; gap:8px;}
.sep-name{
  flex:0 0 108px; font-size:11px; color:var(--chalk-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sep-bar-track{flex:1; height:7px; background:var(--turf-mid); border-radius:4px; overflow:hidden;}
.sep-bar-fill{height:100%; background:var(--steel); border-radius:4px;}
.sep-value{
  flex:0 0 30px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-dim);
}
.sep-row.mine .sep-name{color:var(--flag); font-weight:700;}
.sep-row.mine .sep-bar-fill{background:var(--flag);}
.sep-row.mine .sep-value{color:var(--flag);}
.sep-explainer{font-size:11px; color:var(--chalk-faint); line-height:1.5; margin:0 0 8px;}
.sep-tier-ref{margin-top:10px; padding-top:8px; border-top:1px solid var(--line-grey-2);}
.sep-tier-head{font-family:'JetBrains Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--chalk-faint); margin-bottom:5px;}
.sep-tier-row{display:flex; align-items:center; gap:8px; padding:2px 0; font-size:11px;}
.sep-tier-badge{
  flex:0 0 18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:10px;
  background:var(--turf-mid); color:var(--chalk-dim);
}
.sep-tier-badge.sep-tier-S{background:var(--flag); color:var(--turf-night);}
.sep-tier-badge.sep-tier-A{background:var(--flag-dim); color:var(--turf-night);}
.sep-tier-val{flex:1; color:var(--chalk-dim); font-family:'JetBrains Mono',monospace;}
.sep-tier-factor{flex:0 0 34px; text-align:right; font-family:'JetBrains Mono',monospace; color:var(--chalk-faint);}
.zc-card-edges{display:flex; flex-direction:column; gap:3px; margin-top:8px; border-top:1px solid var(--line-grey); padding-top:8px;}
.zc-edge{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--chalk-faint);}
.zc-edge b{font-family:'JetBrains Mono',monospace; font-weight:700;}
.zc-edge.boost b{color:var(--flag);}
.zc-edge.malus b{color:var(--flare);}
.zc-edge.neutral b{color:var(--chalk-faint);}
/* WR/TE-Kachel-Ansicht: .zc-card wird zusätzlich als .pi-tile-Grid-Kind
   verwendet (siehe .pi-dashboard unten) - der Block-Stack-Abstand von
   oben entfällt dort, .pi-dashboard's eigener "gap" übernimmt das. */
.pi-tile.zc-card{margin-top:0;}

/* Balken+Kumulativ-Diagramm (Nutzer-Wunsch: "ein Diagramm, wo auf der
   x-Achse alle Punktemöglichkeiten für WR aufgeführt sind..."), siehe
   frontend/api.js:_renderZoneBarChart. */
.zc-barchart-title{font-size:11px; color:var(--chalk-faint); margin-bottom:8px; text-transform:uppercase; letter-spacing:.02em;}
.zc-barchart-svg{width:100%; height:auto; display:block; overflow:visible;}
.zc-bar-zeroline{stroke:var(--line-grey-2); stroke-width:1; stroke-dasharray:3,3;}
.zc-bar-base{fill:var(--steel); opacity:.55;}
.zc-bar-delta.boost{fill:var(--green-ok);}
.zc-bar-delta.malus{fill:var(--flare);}
.zc-bar-value{font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; fill:var(--chalk);}
.zc-bar-label{font-size:9px; fill:var(--chalk-faint);}
.zc-cum-line{fill:none; stroke:var(--flag); stroke-width:2; stroke-linejoin:round;}
.zc-cum-dot{fill:var(--flag); stroke:var(--turf-panel); stroke-width:1.5;}

/* Gestapelte Wurftiefen-Balken (Nutzer-Wunsch: "im Diagramm die Punkte
   durch die Fänge extra ausweisen, gestapelt nach Wurftiefe und den
   Boni") - eine Farbe je Punkte-Komponente (Yards/Fänge/TDs), siehe
   points_breakdown in app/boost.py:_wr_te_zone_breakdown. */
.zc-bar-seg-yards{fill:var(--steel);}
.zc-bar-seg-catch{fill:var(--green-ok);}
.zc-bar-seg-td{fill:var(--flag-dim);}
.zc-bar-legend{display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:6px; padding-top:6px; border-top:1px solid var(--line-grey);}
.zc-legend-item{display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--chalk-faint);}
.zc-legend-swatch{display:inline-block; width:9px; height:9px; border-radius:2px;}

/* Nutzer-Wunsch ("aktualisierte Punkte in gelber Schrift hervorheben, wenn
   sich der Gesamt-Punktestand seit der letzten Ansicht geändert hat") -
   siehe frontend/api.js:_zcTotalPointsHtml + models.PlayerWeekPointsSnapshot. */
.zc-total-changed{color:var(--flag);}

.modal-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:7px; background:var(--turf-mid);
  border:1px solid var(--line-grey-2); color:var(--chalk-dim); font-size:15px; cursor:pointer;
}
.modal-close:hover{color:var(--chalk); border-color:var(--flag-dim);}
.modal h2{font-family:'Anton',sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; margin:0 0 4px;}
.modal .modal-sub{font-size:12px; color:var(--chalk-faint); margin-bottom:18px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px;}
.btn-secondary{
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px; color:var(--chalk-dim);
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:10px 18px; cursor:pointer;
}
.btn-secondary:hover{color:var(--chalk); border-color:var(--line-grey-2);}
.btn-confirm{
  font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:var(--turf-night);
  background:var(--flag); border:none; border-radius:8px; padding:10px 20px; cursor:pointer;
  transition:transform .12s ease;
}
.btn-confirm.trade{background:var(--steel);}
.btn-confirm:hover:not(:disabled){transform:translateY(-1px);}
.btn-confirm:disabled{background:var(--turf-mid); color:var(--chalk-faint); cursor:default; transform:none; border:1px solid var(--line-grey-2);}

/* Generischer Scroll-Container für breite Tabellen (z.B. Testdraft-Cap-Übersicht,
   Team-Cap-Sheet) - table.roster hat mehrere white-space:nowrap-Header-Zellen, die
   auf schmalen Bildschirmen (Handy) breiter werden als die Karte selbst; ohne diesen
   Wrapper läuft die Tabelle unkontrolliert über den Kartenrand hinaus, statt
   horizontal zu scrollen. */
.table-scroll{overflow-x:auto;}

/* Kreuztabelle */
.crosstable-wrap{overflow-x:auto;}
table.crosstable{border-collapse:collapse; font-size:10.5px; font-family:'JetBrains Mono',monospace; white-space:nowrap;}
table.crosstable th, table.crosstable td{border:1px solid var(--line-grey); padding:6px 8px; text-align:center;}
table.crosstable th{background:var(--turf-mid); color:var(--chalk-dim); font-weight:600;}
table.crosstable th.row-head{text-align:left; color:var(--chalk); position:sticky; left:0; background:var(--turf-mid); z-index:2;}
table.crosstable td.diag{background:repeating-linear-gradient(45deg, var(--turf-mid) 0 4px, var(--turf-panel) 4px 8px);}
table.crosstable td .res{display:block; line-height:1.5;}
table.crosstable td .res.W{color:var(--green-ok);}
table.crosstable td .res.L{color:var(--flare);}
table.crosstable td .res.T{color:var(--chalk-dim);}
table.crosstable td.empty{color:var(--chalk-faint);}

/* Playoff Bracket */
.bracket-note{
  display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--flag); background:rgba(234,185,41,0.08); border:1px dashed var(--flag-dim); border-radius:7px;
  padding:8px 12px; margin-bottom:18px;
}
.bracket{display:grid; grid-template-columns:1fr 1fr 1fr; gap:26px; align-items:center;}
@media (max-width:720px){.bracket{grid-template-columns:1fr; gap:16px;}}
.bracket-col{display:flex; flex-direction:column; gap:22px; justify-content:center; height:100%;}
.bracket-col-label{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-faint); text-align:center; margin-bottom:4px;}
.matchup-box{border:1px solid var(--line-grey-2); border-radius:8px; background:var(--turf-mid); overflow:hidden;}
.matchup-box.projected{border-style:dashed;}
.seed-row{display:flex; align-items:center; gap:8px; padding:9px 10px; border-bottom:1px solid var(--line-grey);}
.seed-row:last-child{border-bottom:none;}
.seed-row .seednum{
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--turf-night);
  background:var(--chalk-dim); border-radius:4px; padding:2px 6px; min-width:18px; text-align:center;
}
.seed-row .seednm{flex:1; font-size:12.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.seed-row.winner .seednm{color:var(--flag);}
.seed-row .seedsc{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--chalk-dim);}
.tbd{color:var(--chalk-faint); font-style:italic; font-size:12px; padding:14px 10px; text-align:center;}
.champion-box{text-align:center;}
.champion-box .trophy{font-size:26px; margin-bottom:6px;}
.champion-box .cname{font-family:'Anton',sans-serif; font-size:16px; text-transform:uppercase; color:var(--flag);}
.champion-box .csub{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); text-transform:uppercase; margin-top:4px;}

/* ---------- Waiver: Filterleiste + Marktzeilen ---------- */
.filter-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.search-input{
  flex:1; min-width:220px; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px;
  padding:10px 14px; color:var(--chalk); font-family:'Inter',sans-serif; font-size:13px;
}
.search-input::placeholder{color:var(--chalk-faint);}
.search-input:focus{outline:none; border-color:var(--flag-dim);}
.pos-chips{display:flex; gap:6px; flex-wrap:wrap;}
.pos-chip{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.03em; padding:8px 12px;
  border-radius:20px; border:1px solid var(--line-grey-2); background:var(--turf-mid); color:var(--chalk-dim); cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.pos-chip:hover{border-color:var(--flag-dim);}
.pos-chip.active{background:var(--flag); color:var(--turf-night); border-color:var(--flag);}
.toggle-free{
  display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--chalk-dim); cursor:pointer; user-select:none; padding:8px 12px; border-radius:8px;
  border:1px solid var(--line-grey-2); background:var(--turf-mid);
}
.toggle-free input{accent-color:var(--flag);}
.m-owner{font-family:'JetBrains Mono',monospace; font-size:10.5px;}
.m-owner.free{color:var(--green-ok); font-weight:700;}
.m-owner.taken{color:var(--chalk-faint);}
.m-owner.mine{color:var(--flag); font-weight:700;}
.add-btn{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.03em;
  background:var(--flag); color:var(--turf-night); border:none; border-radius:6px; padding:7px 13px; cursor:pointer;
  transition:transform .1s ease; white-space:nowrap;
}
.add-btn.trade{background:var(--steel); color:var(--turf-night);}
.add-btn:hover{transform:translateY(-1px);}
.add-btn:disabled{background:var(--turf-mid); color:var(--chalk-faint); cursor:default; transform:none; border:1px solid var(--line-grey-2);}

/* Popup Spieler-Karte (Add/Trade/Draft) */
.pcard-head{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
/* "Spieler droppen" im Spieler-Infofenster (api.js:_piRenderModalBody) */
.pi-menu-band{display:flex; gap:8px; margin:2px 0 14px;}
.pcard-avatar{
  width:54px; height:54px; border-radius:50%; background:var(--turf-mid); border:2px solid var(--line-grey-2);
  display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:17px; color:var(--chalk);
  position:relative; flex:none;
}
.pcard-avatar .team-flag{position:absolute; bottom:-2px; right:-2px; width:14px; height:14px; border-radius:50%; border:2px solid var(--turf-panel);}
.pcard-title h2{font-family:'Anton',sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; margin:0 0 3px; color:var(--chalk);}
.pcard-title .sub{font-size:12px; color:var(--chalk-faint); font-family:'JetBrains Mono',monospace;}
.pcard-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0;}
.pstat{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:10px 12px; text-align:center;}
.pstat .v{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:18px; color:var(--flag);}
.pstat .l{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.08em; margin-top:2px;}

.hint-box{
  font-size:12.5px; line-height:1.5; padding:12px 14px; border-radius:8px; margin-bottom:16px;
  background:rgba(234,185,41,0.08); border:1px dashed var(--flag-dim); color:var(--chalk-dim);
}
.hint-box.warn{background:rgba(217,86,76,0.08); border-color:var(--flare-dim);}
.hint-box.info{background:rgba(108,147,201,0.1); border-color:var(--steel);}
.hint-box b{color:var(--chalk);}

/* Spieler-Infofenster (geteiltes Modal, siehe api.js:_piRenderModalBody) -
   Kopf/Roster-Zeile nutzen bereits bestehende .pcard- / .hint-box-Klassen,
   nur die Stats-Auswahl-Zeile und die Boost-Liste sind neu. */

/* Kachel-Dashboard (Nutzer-Feedback: das Fenster war eine lange, extrem
   hohe Ein-Spalten-Kette) - reagiert wie .admin-grid automatisch auf jede
   Breite (auto-fit statt fester Spaltenzahl), keine separaten 16:9/4:3/
   Handy-Layouts nötig. .pi-tile-wide für Kacheln mit viel Inhalt (Spiel-
   für-Spiel-Tabelle, Usage-Profil, Detailtiefe, Boost-Erklärung). */
.pi-dashboard{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:16px; margin-top:18px; align-items:start;}
.pi-tile{border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel); padding:18px; min-width:0;}
.pi-tile-wide{grid-column:1/-1;}

.pi-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.pi-section-head h3{margin:0;}
.pi-boost-list{display:flex; flex-direction:column; gap:8px;}
.pi-boost-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  background:var(--turf-mid); border:1px solid var(--line-grey-2); opacity:.55;
}
.pi-boost-row.active{opacity:1; border-color:var(--flag-dim); background:rgba(234,185,41,0.06);}
.pi-boost-dot{width:8px; height:8px; border-radius:50%; background:var(--chalk-faint); flex:none;}
.pi-boost-row.active .pi-boost-dot{background:var(--flag);}
.pi-boost-label{flex:1; font-size:12.5px; line-height:1.4;}
.pi-boost-factor{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--chalk-dim); flex:none;}
.pi-boost-row.active .pi-boost-factor{color:var(--flag);}

/* Boost-Erklärung (BOOST_ERKLAERUNG_POPUP_KONZEPT.md): ausklappbare Lanes
   pro Statistik-Kategorie unter der statischen "Mögliche Boosts"-Liste -
   eigene boost/malus/neutral-Färbung (Faktor-Richtung), unabhängig vom
   active/inactive-Muster der planbaren Hebel oben. */
.boost-lanes{display:flex; flex-direction:column; gap:8px;}
.boost-lane{border:1px solid var(--line-grey-2); border-radius:9px; overflow:hidden; background:var(--turf-mid);}
.boost-lane-head{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer;
  background:none; border:none; color:var(--chalk); font-family:'Inter',sans-serif; text-align:left;
}
.boost-lane-dot{width:9px; height:9px; border-radius:50%; flex:none;}
.boost-lane-title{flex:1; font-size:12.5px; font-weight:600;}
.boost-lane-arrow{font-size:10px; color:var(--chalk-faint); transition:transform .15s ease;}
.boost-lane.open .boost-lane-arrow{transform:rotate(180deg);}
.boost-lane-body{
  display:flex; flex-direction:column; gap:6px; padding:0 12px; max-height:0; overflow:hidden;
  transition:max-height .2s ease, padding .2s ease;
}
.boost-lane.open .boost-lane-body{max-height:600px; padding:2px 12px 12px;}
.boost-lane-group{color:var(--chalk-faint); font-size:11px;}
.boost-lane .pi-boost-row{opacity:1; background:rgba(241,237,225,0.03);}
.pi-boost-factor.boost{color:var(--flag);} .pi-boost-factor.malus{color:var(--flare);} .pi-boost-factor.neutral{color:var(--chalk-faint);}
.pi-boost-row.malus{border-color:var(--flare-dim);}
.pi-boost-row.boost{border-color:var(--flag-dim);}
@media (prefers-reduced-motion: reduce){
  .boost-lane-body, .boost-lane-arrow{transition:none;}
}

/* Game-Log-Tabelle (Spalten=Statistiken, Zeilen=Spiele) + kleine Splitgrafik
   daneben - .pi-game-log-wrap bekommt sein eigenes overflow-x:auto, damit
   eine breite QB-Tabelle (viele Wurftiefen-Spalten) nicht wie früher beim
   Bank-Streifen die ganze Seite/das ganze Modal aufbläht (min-width:0 im
   Flex-Kontext ist hier aus demselben Grund nötig). */
.pi-stats-layout{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;}
.pi-game-log-wrap{flex:1; min-width:0; max-width:100%; overflow-x:auto;}
.pi-game-log-wrap table{white-space:nowrap;}
.pi-season-row td{background:rgba(234,185,41,0.08); font-weight:700; color:var(--chalk);}
.pi-not-played td{color:var(--chalk-faint); opacity:.55;}
/* Linke Spalte: Splitgrafik, Radar-Diagramme (untereinander) und
   Effizienz-Quadrant gestapelt, statt jeweils eigener volle-Breite-Abschnitte
   - macht das Fenster kompakter/"quadratischer" statt einer langen
   Ein-Grafik-nach-der-anderen-Ansicht. */
.pi-side-charts{flex:0 0 300px; display:flex; flex-direction:column; gap:6px;}
.pi-side-charts .pi-split-chart{width:100%;}
.pi-side-sub-head{display:flex; align-items:center; justify-content:space-between; margin:16px 0 4px;}
.pi-chart-title{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint); margin-bottom:10px;}
.pi-chart-bars{display:flex; align-items:flex-end; gap:8px; height:150px; padding:0 4px;}
.pi-bar-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; height:100%;}
.pi-bar-value{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-dim); text-align:center; margin-bottom:4px; line-height:1.3;}
.pi-bar{width:100%; background:var(--flag); border-radius:4px 4px 0 0; min-height:2px;}
.pi-bar-label{font-size:9.5px; color:var(--chalk-faint); text-align:center; margin-top:6px;}

/* Reihe statt Spalte (Nutzer-Feedback Runde 6: "die Netzgrafiken können
   besser gruppiert werden" / "Advanced-Stats sind immer noch untereinander")
   - mehrere Radar-/Kompakt-Karten fließen nebeneinander, brechen erst bei
   Platzmangel um. */
.pi-radar-wrap{display:flex; flex-direction:row; flex-wrap:wrap; gap:18px; margin-top:4px;}
.pi-radar-chart{flex:0 0 auto;}
.pi-radar-title{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint); margin-bottom:6px; text-align:center;}
.pi-radar-svg{width:230px; height:230px; overflow:visible;}
.pi-radar-ring{fill:none; stroke:var(--line-grey-2); stroke-width:1; stroke-dasharray:2,3;}
.pi-radar-axis{stroke:var(--pitch-line); stroke-width:1;}
.pi-radar-poly{fill:rgba(234,185,41,0.22); stroke:var(--flag); stroke-width:2; stroke-linejoin:round;}
.pi-radar-label{font-size:8.5px; fill:var(--chalk-faint);}
.pi-radar-toggle{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--chalk-dim); cursor:pointer; user-select:none;}
.pi-radar-toggle input{cursor:pointer;}
/* Kompakte Kategorien mit <3 Achsen (z.B. RB/WR-"Risiko") - Perzentil-Balken
   statt entartetem Polygon, siehe _piRenderCompactPercentileChart. */
.pi-radar-chart-compact{width:260px; text-align:left;}

.matchup-strip{display:flex; gap:5px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; margin-bottom:4px;}
.mcell{flex:1 0 46px; min-width:46px; border-radius:6px; padding:7px 4px 6px; text-align:center; font-family:'JetBrains Mono',monospace; border:1px solid var(--line-grey-2); background:var(--turf-mid);}
.mcell .wk{font-size:8.5px; color:var(--chalk-faint); display:block; margin-bottom:3px; letter-spacing:.04em;}
.mcell .opp{font-size:11.5px; font-weight:700; display:block; color:var(--chalk-dim);}
.mcell .rank{font-size:8px; opacity:.85; display:block; margin-top:2px; color:var(--chalk-faint);}
.mcell.easy{background:rgba(95,174,114,.14); border-color:rgba(95,174,114,.35);}
.mcell.easy .opp, .mcell.easy .rank{color:var(--green-ok);}
.mcell.hard{background:rgba(217,86,76,.14); border-color:rgba(217,86,76,.35);}
.mcell.hard .opp, .mcell.hard .rank{color:var(--flare);}

.range-row{width:100%;}
.range-track{position:relative; height:22px; background:var(--line-grey); border-radius:20px; overflow:hidden;}
.range-fill{position:absolute; top:0; bottom:0; background:linear-gradient(90deg,rgba(108,147,201,.35),rgba(234,185,41,.35));}
.range-median{position:absolute; top:-3px; width:2px; height:28px; background:var(--chalk);}
.range-scale{display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-dim); margin-top:6px;}

.quad-svg{width:100%; max-width:340px; height:220px;}
.quad-axis{stroke:var(--chalk-faint); stroke-width:1;}
.quad-line{stroke:var(--line-grey-2); stroke-width:1; stroke-dasharray:3,3;}
.quad-dot{fill:var(--steel); opacity:.55;}
.quad-dot.hero{fill:var(--flag); opacity:1;}
.quad-axis-label{font-family:'JetBrains Mono',monospace; font-size:9px; fill:var(--chalk-dim);}

.pill{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:20px; vertical-align:middle;}
.pill.q{background:rgba(234,185,41,0.16); color:var(--flag); border:1px solid rgba(234,185,41,0.4);}
.pill.out{background:rgba(217,86,76,0.16); color:var(--flare); border:1px solid rgba(217,86,76,0.4);}
.pill.ok{background:rgba(95,174,114,0.16); color:var(--green-ok); border:1px solid rgba(95,174,114,0.4);}
.pill.muted{background:rgba(111,129,119,0.16); color:var(--chalk-faint); border:1px solid rgba(111,129,119,0.4);}

.pi-trend-row{display:flex; align-items:center; gap:8px; margin:10px 0 0;}

.qbnet-svg{width:100%; max-width:400px; height:auto; display:block; margin:0 auto;}
.qbnet-line{stroke:var(--line-grey-2); stroke-linecap:round;}
.qbnet-qb{fill:var(--flag); stroke:var(--turf-night); stroke-width:2;}
.qbnet-qb-label{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; fill:var(--turf-night); text-anchor:middle;}
.qbnet-node{fill:var(--steel); stroke:var(--turf-night); stroke-width:1.5; cursor:default;}
.qbnet-node.pos-TE{fill:var(--green-ok);}
.qbnet-node.pos-RB{fill:var(--flare);}
.qbnet-label{font-family:'JetBrains Mono',monospace; font-size:9px; fill:var(--chalk-faint);}

/* Snap Share & Usage-Statistik (Konzept: SNAP_SHARE_USAGE_KONZEPT.md) */
.usage-trend-svg{width:100%; height:auto;}
.usage-grid{stroke:var(--line-grey-2); stroke-width:1; stroke-dasharray:2,3;}
.usage-axis-label{font-family:'JetBrains Mono',monospace; font-size:8px; fill:var(--chalk-faint);}

.usage-split-bar{display:flex; width:100%; height:18px; border-radius:6px; overflow:hidden; background:var(--line-grey);}
.usage-split-seg{height:100%; min-width:2px;}
.usage-legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;}
.usage-legend-item{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--chalk-dim);}
.usage-legend-dot{width:8px; height:8px; border-radius:50%; display:inline-block;}

/* Detailtiefe-Erweiterung (NFL_DATENTIEFE_AUSBAUPOTENZIAL.md): kompaktes
   Label/Wert-Raster für QB-/RB-/WR-TE-/Defender-Zusatzstats im Spieler-
   Infofenster - wiederverwendet für alle vier neuen Panels statt je eine
   eigene Tabelle zu bauen. */
.pi-stat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px 14px; margin:8px 0;}
.pi-stat-item{display:flex; flex-direction:column; gap:2px;}
.pi-stat-item .lbl{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--chalk-faint);}
.pi-stat-item .val{font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; color:var(--chalk);}
.pi-detail-badge{
  display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  border-radius:999px; padding:2px 8px; background:rgba(108,147,201,0.18); color:var(--steel); margin-left:8px;
}

/* Cockpit/Editorial-Report-Layouts (Spieler-Insight-Neugestaltung) - Über-
   sicht zeigt Perzentil-/Passnetzwerk-Balken statt der vollen Radar-/SVG-
   Grafiken (die bleiben unverändert in Advanced, siehe .pi-radar-*/.qbnet-*
   oben). Beide Layouts teilen sich .subtab/.view (siehe liga.html/draft.html)
   für den Übersicht/Advanced-Umschalter. */
.pi-pct-row{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:11px;}
.pi-pct-lbl{width:130px; flex-shrink:0; color:var(--chalk-dim);}
.pi-pct-track{flex:1; height:7px; background:var(--line-grey); border-radius:8px; overflow:hidden;}
.pi-pct-fill{height:100%; border-radius:8px; background:var(--steel);}
.pi-pct-val{width:32px; text-align:right; font-family:'JetBrains Mono',monospace; color:var(--chalk-faint); font-size:10px;}

.pi-net-row{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-grey);}
.pi-net-row:last-child{border-bottom:none;}
.pi-net-pos-chip{
  width:26px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; flex-shrink:0;
  background:var(--turf-mid); border:1px solid var(--steel); color:var(--steel);
}
.pi-net-name{flex:1; font-size:12px; color:var(--chalk-dim);}
.pi-net-bar-track{width:80px; height:5px; background:var(--line-grey); border-radius:6px; overflow:hidden; flex-shrink:0;}
.pi-net-bar-fill{height:100%; background:var(--steel); border-radius:6px;}
.pi-net-stat{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); text-align:right; white-space:nowrap;}

.pi-subtabs{margin-top:18px;}

/* Punkte-Trend-Karte (Übersicht, siehe _piRenderBigTrendCard) - größere
   Sparkline statt der kleinen ▲/▼-Variante (trendSparkline, weiterhin für
   Waiver Wire genutzt). */
.pi-spark{display:flex; align-items:center; gap:10px;}
.pi-spark .lbl{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-faint); flex-shrink:0;}

/* Advanced-Reiter breiter/kompakter (Nutzer-Feedback Runde 5): Split-Chart
   und Effizienz-Quadrant nebeneinander statt gestapelt - beides Volumen-/
   Effizienz-Blickwinkel auf dieselben Snap-Zahlen. */
.pi-adv-row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.pi-adv-row2 .pi-radar-wrap{justify-content:flex-start;}
@media (max-width:900px){ .pi-adv-row2{grid-template-columns:1fr;} }

/* Modernisierter Header: NFL-Team, Saison-Rang, Vertrag/Jahr, Depth-Chart
   (Nutzer-Feedback Runde 5) - ersetzt den reinen Fließtext-Hinweis. */
.pi-header-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0 18px;}
.pi-header-block{border:1px solid var(--line-grey-2); border-radius:var(--radius); background:var(--turf-mid); padding:12px 14px;}
.pi-header-block .lbl{font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-faint); margin-bottom:6px;}
.pi-header-block .big{font-family:'Anton',sans-serif; font-size:17px; color:var(--chalk);}
.pi-header-block .sub2{font-size:10.5px; color:var(--chalk-faint); margin-top:3px; line-height:1.4;}
.pi-rank-pill{display:inline-flex; align-items:baseline; gap:4px; font-family:'Anton',sans-serif; font-size:20px; color:var(--flag);}
.pi-rank-pill .of{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); font-weight:400;}
.pi-contract-years{display:flex; gap:4px; margin-top:2px; flex-wrap:wrap;}
.pi-contract-year-cell{flex:1 0 auto; min-width:52px; text-align:center; background:var(--turf-panel); border:1px solid var(--line-grey-2); border-radius:5px; padding:4px 2px;}
.pi-contract-year-cell .yr{font-family:'JetBrains Mono',monospace; font-size:8px; color:var(--chalk-faint); display:block;}
.pi-contract-year-cell .amt{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-dim); display:block; margin-top:1px;}
.pi-contract-total{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); margin-top:6px;}
@media (max-width:900px){ .pi-header-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* NFL-Team-Block ist jetzt anklickbar (öffnet das Depth-Chart-Popup,
   siehe openDepthChartModal in api.js) - "Schein-Effekt" beim Hover
   (Nutzer-Feedback) statt eines reinen Cursor-Wechsels: sanftes Glühen +
   leichtes Anheben, plus ein ausgeblendeter Hinweistext, der einblendet. */
.pi-team-block{cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; outline:none;}
.pi-team-block:hover, .pi-team-block:focus-visible{
  border-color:var(--flag-dim);
  box-shadow:0 0 0 1px var(--flag-dim), 0 0 26px 2px rgba(234,185,41,.28);
  transform:translateY(-2px);
}
.pi-team-block-hint{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.03em; color:var(--flag);
  margin-top:8px; opacity:0; transform:translateY(-3px); transition:opacity .18s ease, transform .18s ease;
}
.pi-team-block:hover .pi-team-block-hint, .pi-team-block:focus-visible .pi-team-block-hint{opacity:1; transform:translateY(0);}

/* Depth-Chart-Popup (Nutzer-Feedback, siehe api.js:openDepthChartModal) -
   .dc-row.focus = der Spieler, von dessen Insight aus geöffnet wurde,
   .dc-row.owned = irgendein anderer, in dieser Liga gedrafteter Spieler.
   Breite folgt derselben "dynamisch bis zur Bildschirmbreite"-Konvention
   wie .wrap oben (Nutzer-Feedback: Namen waren in der festen 960px-Breite
   abgeschnitten) - min(...) statt fester px-Zahl, damit auch sehr breite
   Bildschirme die zusätzliche Fläche nutzen, ohne auf schmalen Screens
   über den Viewport hinauszuwachsen. */
.modal.dc-modal{max-width:min(2000px, 96vw);}
.dc-header{margin-bottom:2px;}
.dc-header .dc-name{font-family:'Anton',sans-serif; font-weight:400; font-size:21px; text-transform:uppercase; color:var(--chalk);}
.dc-sub{font-size:11.5px; color:var(--chalk-faint); margin:4px 0 14px;}
.dc-legend{display:flex; gap:18px; margin-bottom:18px; flex-wrap:wrap;}
.dc-legend-item{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--chalk-dim);}
.dc-legend-item.dc-legend-snap{color:var(--chalk-faint); font-family:'JetBrains Mono',monospace; font-size:10px;}
.dc-legend-dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dc-legend-dot.focus{background:var(--flag);}
.dc-legend-dot.owned{background:var(--green-ok);}
.dc-group{margin-bottom:22px;}
.dc-group:last-child{margin-bottom:0;}
.dc-group-head{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint); border-bottom:1px solid var(--line-grey-2); padding-bottom:6px; margin-bottom:12px;}
.dc-group-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px;}
.dc-position{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:var(--radius); padding:9px 10px; min-width:0;}
.dc-position-label{font-family:'Anton',sans-serif; font-weight:400; font-size:12px; letter-spacing:.02em; color:var(--chalk-dim); margin-bottom:7px;}
.dc-position-rows{display:flex; flex-direction:column; gap:2px;}
/* flex-wrap statt einer starren Einzeilen-Row: Rang+Slot+Name bleiben in
   Zeile 1 (Name bekommt die volle verbleibende Breite), der Rosterbesitz-
   Hinweis rutscht per flex-basis:100% IMMER in eine eigene Zeile 2, statt
   sich mit dem Namen um denselben Platz zu streiten (genau das führte zu
   Namen wie "Warren McCle...", sobald ein Team-Badge dabei stand). */
.dc-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; font-size:11.5px; padding:3px 5px; border-radius:5px; line-height:1.3;}
.dc-rank{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); flex:none; width:11px;}
.dc-slot{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); flex:none; width:26px;}
.dc-row-name{flex:1 1 auto; min-width:40px; color:var(--chalk-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dc-snap{flex:none; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--chalk-faint); white-space:nowrap;}
.dc-owner-note{flex:1 0 100%; padding-left:43px; font-size:9px; color:var(--chalk-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dc-row.owned{background:rgba(95,174,114,.14);}
.dc-row.owned .dc-row-name, .dc-row.owned .dc-owner-note{color:var(--green-ok);}
.dc-row.focus{background:rgba(234,185,41,.18); box-shadow:0 0 0 1px var(--flag-dim);}
.dc-row.focus .dc-row-name{color:var(--flag); font-weight:700;}
.dc-row.focus .dc-owner-note{color:var(--flag);}
.dc-row.dc-clickable{cursor:pointer; outline:none;}
.dc-row.dc-clickable:hover, .dc-row.dc-clickable:focus-visible{filter:brightness(1.22);}
@media (max-width:640px){ .dc-group-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));} }

/* "Zurück"-Knopf im Spieler-Insight (Nutzer-Feedback: aus dem Depth-Chart-
   Popup heraus einen Spieler anklicken, dann wieder zurück) - Geschwister
   von .modal-close, oben links statt oben rechts. */
.modal-back{
  position:absolute; top:14px; left:14px; height:30px; padding:0 12px; border-radius:7px; background:var(--turf-mid);
  border:1px solid var(--line-grey-2); color:var(--chalk-dim); font-size:12px; font-family:'Inter',sans-serif; cursor:pointer;
}
.modal-back:hover{color:var(--chalk); border-color:var(--flag-dim);}

/* Layout A: Cockpit - Hauptspalte trägt Form/Spiele/Touchdowns, schmale
   Seitenspalte bündelt Passnetzwerk/Chancen/Risiken/Boosts (der Wechsel zu
   Advanced läuft über den .pi-subtabs-Reiter oben, keine eigene Kachel
   mehr nötig - Nutzer-Feedback Runde 6). */
.pi-cockpit-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:16px; align-items:start; margin-top:18px;}
.pi-cockpit-main{display:flex; flex-direction:column; gap:16px; min-width:0;}
.pi-cockpit-side{display:flex; flex-direction:column; gap:14px; min-width:0;}
.pi-cockpit-form-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,220px); gap:16px;}
.pi-cockpit-adv-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:18px;}
@media (max-width:820px){
  .pi-cockpit-body{grid-template-columns:1fr;}
  .pi-cockpit-form-split{grid-template-columns:1fr;}
  .pi-cockpit-adv-grid{grid-template-columns:1fr;}
}

/* Layout B: Editorial Report - ein Scroll, benannte Kapitel statt Kacheln. */
.pi-chapter{padding:22px 0; border-top:1px solid var(--line-grey);}
.pi-chapter-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px;}
.pi-chapter-idx{font-family:'Anton',sans-serif; font-size:28px; color:var(--line-grey-2); line-height:1;}
.pi-chapter-head h3{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:16px; margin:0; letter-spacing:.01em; color:var(--chalk);}
.pi-chapter-head select{margin-left:auto;}
.pi-chapter-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start;}
@media (max-width:820px){ .pi-chapter-cols{grid-template-columns:1fr;} }

.heat-grid{display:flex; flex-direction:column; gap:3px;}
.heat-row{display:grid; grid-template-columns:28px repeat(3, 1fr); gap:3px; align-items:center;}
.heat-row-label{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint);}
.heat-col-label{font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--chalk-faint); text-transform:uppercase; text-align:center;}
.heat-cell{
  height:30px; border-radius:5px; border:1px solid var(--line-grey-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:var(--chalk);
}

.slot-preview{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.slot-preview .arrow{color:var(--chalk-faint); font-size:16px;}
.slot-badge{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; padding:8px 14px; border-radius:8px;
  background:var(--turf-mid); border:1px solid var(--flag-dim); color:var(--flag);
}

.select-table-wrap{border:1px solid var(--line-grey-2); border-radius:8px; overflow:hidden; margin-bottom:18px; max-height:280px; overflow-y:auto;}
table.select-table th{
  position:sticky; top:0; text-align:left; padding:8px 10px; background:var(--turf-mid); font-family:'JetBrains Mono',monospace;
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-faint); border-bottom:1px solid var(--line-grey);
}
table.select-table td{padding:8px 10px; border-bottom:1px solid var(--line-grey);}
table.select-table tr:last-child td{border-bottom:none;}
table.select-table tr.selected td{background:rgba(217,86,76,0.1);}
table.select-table tr:hover td{background:rgba(241,237,225,0.03); cursor:pointer;}
table.select-table tr.invalid-drop td{color:var(--chalk-faint); opacity:.55;}
table.select-table tr.invalid-drop:hover td{background:transparent; cursor:default;}
table.select-table tr.selected.trade-offer td{background:rgba(108,147,201,0.14);}
.pick-radio, .pick-check{accent-color:var(--flare);}
.trade-offer .pick-check{accent-color:var(--steel);}
.dt-role{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); text-transform:uppercase;}

/* ---------- Team-Status-Pille (Waiver/Draft) ---------- */
.team-status{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-faint);}
.team-status b{color:var(--chalk);}
.roster-pill{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; padding:5px 10px; border-radius:20px;
  border:1px solid var(--line-grey-2); background:var(--turf-mid); color:var(--chalk-dim); margin-left:auto;
}
.roster-pill.full{color:var(--flare); border-color:var(--flare-dim); background:rgba(217,86,76,0.08);}
.save-indicator{
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); display:flex; align-items:center; gap:5px;
}
.save-indicator .dot{width:6px; height:6px; border-radius:50%; background:var(--green-ok);}
.save-indicator.saving .dot{background:var(--flag);}

/* ---------- Neu: Draft / Draftboard / Stats / Verwaltung ---------- */
.pick-log{display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto;}
.pick-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:var(--turf-mid); border:1px solid var(--line-grey-2);}
.pick-row .pick-num{font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; color:var(--turf-night); background:var(--flag); border-radius:4px; padding:2px 7px; min-width:28px; text-align:center;}
.pick-row .pick-team{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); min-width:120px;}
.pick-row .pick-player{flex:1; font-weight:600; font-size:12.5px;}

.board-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line-grey);}
.board-row:hover{background:rgba(241,237,225,0.02);}
.board-row.drafted{opacity:.4;}
.board-rank{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-faint); width:28px; text-align:right;}
.board-pts{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--flag); width:60px; text-align:right;}

.stat-tabs{display:flex; gap:4px; margin-bottom:16px;}
.stat-tab{
  font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 14px; border-radius:20px; border:1px solid var(--line-grey-2); background:var(--turf-mid);
  color:var(--chalk-dim); cursor:pointer;
}
.stat-tab.active{background:var(--flag); color:var(--turf-night); border-color:var(--flag);}

/* auto-fit statt auto-fill (Nutzer-Feedback: bei wenigen Karten auf breiten
   Screens blieben mit auto-fill zusätzliche, leere Spuren stehen - die
   Karten wuchsen dadurch nicht über ihre Mindestbreite hinaus, obwohl noch
   sichtbarer Platz frei war (Liga: schmale Divisions-Tabellen mit
   abgeschnittenen Spalten + toter Rand rechts). auto-fit kollabiert leere
   Spuren auf 0, die 1fr-Anteile der echten Karten füllen den frei
   werdenden Platz. */
.admin-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:18px;}
.admin-card{border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel); padding:18px;}
.admin-card h3{font-family:'Anton',sans-serif; font-weight:400; font-size:14px; text-transform:uppercase; margin:0 0 12px; color:var(--chalk);}
.form-row{display:flex; flex-direction:column; gap:4px; margin-bottom:12px;}
.form-row label{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--chalk-faint);}
.form-row input, .form-row select, .form-row textarea{
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:7px; color:var(--chalk);
  padding:9px 11px; font-family:'Inter',sans-serif; font-size:13px;
}
/* Explizite Höhe nötig, da ein natives <select> trotz identischem
   Padding/Border/Font ~2px höher rendert als <input> (Browser-Eigenheit
   der nativen Select-Darstellung) - ohne das lagen Select und Input in
   derselben .form-row sichtbar auf unterschiedlicher Höhe. */
.form-row input, .form-row select{height:38px;}
.form-row textarea{resize:vertical; min-height:70px;}
.form-inline{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;}
.admin-result{margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-dim); white-space:pre-wrap;}

/* ---------- Verwaltung: Kachel-Übersicht (Nutzer-Feedback Konzept-Runde) -
   Startbildschirm mit Status-Kacheln statt direkt mit dichten Formularen zu
   starten; Klick auf eine Kachel schaltet auf die bestehenden .subtabs/.view
   um (unverändert darunterliegend, siehe #subtabScreen weiter unten). ---------- */
.tile-home-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;}
@media (max-width:980px){ .tile-home-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
.admin-tile{
  background:var(--turf-panel); border:1px solid var(--line-grey-2); border-radius:var(--radius);
  padding:16px; cursor:pointer; transition:border-color .15s, transform .15s; position:relative; text-align:left;
  font-family:inherit; color:inherit; display:block; width:100%;
}
.admin-tile:hover{border-color:var(--flag-dim); transform:translateY(-1px);}
.admin-tile .tile-icon{font-size:19px; margin-bottom:9px; display:block;}
.admin-tile h3{font-family:'Anton',sans-serif; font-weight:400; font-size:13.5px; text-transform:uppercase; letter-spacing:.01em; margin:0 0 6px; color:var(--chalk);}
.admin-tile .tile-stat{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-dim); line-height:1.6;}
.admin-tile .tile-stat b{color:var(--chalk); font-weight:700;}
.admin-tile.big{grid-column:span 2;}
.back-to-tiles{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line-grey-2); color:var(--chalk-dim); border-radius:7px;
  padding:8px 13px; cursor:pointer; margin-bottom:14px;
}
.back-to-tiles:hover{border-color:var(--flag-dim); color:var(--chalk);}

/* ---------- Verwaltung: geführter Assistent (mehrschrittige Kacheln, z.B.
   Liga-Einstellungen/Salary-Cap-Einstellungen) - reines Anzeige-Umschalten
   über [data-step], keine eigene Speicherlogik (das bestehende Formular/
   der bestehende Save-Handler bleibt unverändert, nur die Sichtbarkeit der
   Feldgruppen wechselt). ---------- */
.wizard-steps-bar{display:flex; gap:6px; margin:4px 0 18px;}
.wizard-steps-bar .dot-step{flex:1; height:4px; border-radius:3px; background:var(--line-grey-2);}
.wizard-steps-bar .dot-step.done{background:var(--green-ok);}
.wizard-steps-bar .dot-step.active{background:var(--flag);}
.wizard-step-label{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--flag); margin-bottom:4px;}
.wizard-step-pane{display:none;}
.wizard-step-pane.active{display:block;}
.wizard-nav{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-grey);}
.wizard-nav .counter{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint);}
.wizard-nav-btns{display:flex; gap:8px;}

/* ---------- Verwaltung: Gefahrenzone (Saisonverwaltung - Saison löschen /
   alle Roster zurücksetzen). ---------- */
.danger-zone{margin-top:22px; border:1px solid var(--flare-dim); border-radius:var(--radius); padding:16px 18px; background:rgba(217,86,76,0.06);}
.danger-zone .dz-head{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
.danger-zone h3{font-family:'Anton',sans-serif; font-weight:400; font-size:13.5px; text-transform:uppercase; margin:0; color:var(--flare);}
.danger-zone .section-sub{margin:0 0 14px;}
.dz-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid rgba(217,86,76,0.18); flex-wrap:wrap;}
.dz-row:first-of-type{border-top:none;}
.dz-row .txt b{display:block; color:var(--chalk); font-size:13px; margin-bottom:2px;}
.dz-row .txt span{color:var(--chalk-faint); font-size:11.5px;}
.btn-danger-outline{
  font-family:'Inter',sans-serif; font-weight:600; font-size:12px; color:var(--flare);
  background:transparent; border:1px solid var(--flare-dim); border-radius:8px; padding:9px 14px; cursor:pointer;
}
.btn-danger-outline:hover{background:rgba(217,86,76,0.12);}
.btn-danger-solid{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; color:#2a0e0c;
  background:var(--flare); border:none; border-radius:8px; padding:10px 18px; cursor:pointer;
}
.btn-danger-solid:disabled{opacity:.4; cursor:not-allowed;}
.purge-scope-list{list-style:none; padding:0; margin:12px 0 0; font-size:12.5px;}
.purge-scope-list li{padding:5px 0 5px 20px; position:relative; color:var(--chalk-dim); border-bottom:1px dashed var(--line-grey);}
.purge-scope-list li:last-child{border-bottom:none;}
.purge-scope-list li:before{content:"—"; position:absolute; left:0; color:var(--flare);}
.purge-scope-list li b{color:var(--chalk); font-weight:600;}
.purge-scope-list li.new:before{content:"+"; color:var(--green-ok); font-weight:700;}
.confirm-type-row{margin-top:14px;}

/* Leichtgewichtige Popup-Alternative für einzelne, klar abgegrenzte
   Aktionen (Nutzer-Feedback Konzept-Runde: "arbeite mit Popups an
   Stellen, wo es deutlich vereinfacht") - native <details>/<summary>
   statt eines eigenen Modals: kein zusätzliches JS/keine ID-Umzugsrisiken,
   das Formular bleibt bis zum Aufklappen unsichtbar. */
.admin-card details summary{cursor:pointer; list-style:none; outline:none;}
.admin-card details summary::-webkit-details-marker{display:none;}
.admin-card details summary h3{margin:0 !important;}
.admin-card details summary:before{content:"▸ "; color:var(--flag); font-size:11px;}
.admin-card details[open] summary:before{content:"▾ "; color:var(--flag);}

/* ---------- Draftboard: Board-Ansicht (Positions-Spalten, Drag&Drop) ---------- */
.board-toolbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; padding:12px 14px; background:var(--turf-panel); border:1px solid var(--line-grey); border-radius:var(--radius);}
.board-toolbar .grp{display:flex; align-items:center; gap:8px;}
.board-toolbar label{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--chalk-faint);}
.mode-toggle{display:flex; gap:2px; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:2px;}
.mode-toggle button{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; padding:7px 12px; border-radius:6px;
  border:none; background:transparent; color:var(--chalk-faint); cursor:pointer;
}
.mode-toggle button.active{background:var(--flag); color:var(--turf-night);}
.board-toolbar input[type="number"]{width:60px;}
.board-toolbar select{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px; color:var(--chalk); padding:6px 9px; font-family:'JetBrains Mono',monospace; font-size:11px;}
.board-pos-filter-list{display:flex; flex-wrap:wrap; gap:4px;}
.board-pos-filter-item{
  display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  color:var(--chalk-dim); background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px;
  padding:5px 9px; cursor:pointer; text-transform:none; letter-spacing:0;
}
.board-pos-filter-item:has(input:checked){color:var(--turf-night); background:var(--flag); border-color:var(--flag);}

.board-columns{display:grid; gap:10px; min-width:900px;}
/* Der globale Rang läuft über ALLE Positionen hinweg (jeder Spieler hat einen
   eindeutigen Gesamt-Rang, siehe computeDefaultRanks/effectiveRank in
   draft.html) - bei 9 statt urspruenglich 4 Positionsspalten ergibt das
   tausende Zeilen. Statt die ganze Seite endlos zu strecken (und damit die
   Sidebars in ROOM-Modus meterweit nach unten zu schieben), bekommt das
   Board hier wie die Pick-Historie (.pick-log) einen internen Scrollbalken. */
.board-columns-wrap{overflow-x:auto; overflow-y:auto; max-height:640px; padding-bottom:6px;}
.board-col-header{
  border-radius:8px 8px 0 0; padding:10px 8px; text-align:center; font-family:'Anton',sans-serif;
  font-size:15px; text-transform:uppercase; letter-spacing:.02em; color:var(--turf-night);
}
.board-col-header .cnt{display:block; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; margin-top:2px; opacity:.75;}
.board-col-header.pos-QB{background:var(--flare);}
.board-col-header.pos-RB{background:var(--green-ok);}
.board-col-header.pos-WR{background:var(--steel);}
.board-col-header.pos-TE{background:var(--flag);}
.board-col-header.pos-DL{background:#d98a4f;}
.board-col-header.pos-LB{background:#a385d9;}
.board-col-header.pos-S{background:#57b8ae;}
.board-col-header.pos-K{background:#d97ab0;}
.board-col-header.pos-DST{background:#9aa8b8;}
/* Draftboard-Neugestaltung (Nutzer-Feedback: Spieler landeten in
   positionsfremden Spalten, weil Zeilen anhand gleicher Rang-Zahlen über
   ALLE Spalten hinweg ausgerichtet wurden) - jede Positionsspalte ist
   jetzt eine EIGENE, unabhängig fließende Liste (.board-col-body), keine
   geteilte Zeilen-Grid-Struktur mehr. Rang/Runde bleiben pro Karte
   sichtbar (weiterhin der gemeinsame positionsübergreifende Rang, siehe
   draft.html:effectiveBoardRank), nur die Zeilen-AUSRICHTUNG zwischen
   Spalten entfällt. */
.board-col-body{
  border:1px solid var(--line-grey); border-top:none; border-radius:0 0 var(--radius) var(--radius);
  background:var(--turf-panel); display:flex; flex-direction:column; overflow-y:auto; max-height:600px;
}
.board-col-card-wrap{padding:4px 8px; position:relative;}
.board-col-card-wrap.round-start{border-top:1px dashed var(--line-grey-2); padding-top:10px; margin-top:6px;}
.board-col-card-wrap.round-start.tier-emph{border-top-color:var(--flag-dim); border-top-width:2px;}
.board-col-card-wrap .round-label{position:absolute; left:2px; top:8px; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); letter-spacing:.06em;}
.board-col-empty{padding:22px 8px; text-align:center; color:var(--chalk-faint); font-size:11px;}
.board-card{
  display:flex; align-items:center; gap:6px; background:var(--turf-mid); border:1px solid var(--line-grey-2);
  border-radius:6px; padding:5px 8px; cursor:grab; font-size:11.5px; position:relative; transition:border-color .12s, transform .1s, box-shadow .12s;
}
.board-card:hover{border-color:var(--flag-dim);}
.board-card.dragging{opacity:.4;}
/* Einfügemarker beim Drag-Over einer Karte (Nutzer-Feedback: echtes
   Einfügen ZWISCHEN zwei Karten muss möglich sein, nicht nur "auf gleicher
   Höhe wie" eine bestehende Karte) - Mausposition obere/untere Kartenhälfte
   entscheidet vor/nach (siehe draft.html bindBoardInteractions). */
.board-card.dragover-before{box-shadow:0 -3px 0 0 var(--flag);}
.board-card.dragover-after{box-shadow:0 3px 0 0 var(--flag);}
.board-card.drafted{opacity:.35;}
.board-card.crossed .bc-nm{text-decoration:line-through; color:var(--chalk-faint);}
.board-card .bc-rank{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); min-width:16px;}
.board-card .bc-nm{flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.board-card .bc-sc{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--flag); font-weight:700;}
.board-card .bc-star{color:var(--flag); font-size:11px; cursor:pointer;}
.board-card .bc-cross{color:var(--chalk-faint); font-size:11px; cursor:pointer; opacity:.5;}
.board-card .bc-cross:hover{opacity:1; color:var(--flare);}
.board-card.tier-round1{background:var(--turf-mid);}
.board-card.tier-round2{background:#16321f;}
.board-card.tier-round3{background:var(--turf-panel-2);}
.board-card.hovered{border-color:var(--flag); box-shadow:0 0 0 1px var(--flag);}
.board-card .bc-compare{color:var(--steel); font-size:11px; cursor:pointer; opacity:.5;}
.board-card .bc-compare:hover{opacity:1;}
.board-card .bc-compare.active{opacity:1; color:var(--flag);}
.board-card .bc-mark{color:var(--flag); font-size:9px; cursor:default;}

.board-col-header{cursor:pointer; transition:box-shadow .12s;}
.board-col-header.eff-active{box-shadow:inset 0 0 0 2px var(--chalk);}

/* ---------------- Mock-Draft-Simulator (Draft-Strategie-Tab-Umbau,
   Nutzer-Feedback) - 3-Spalten-Layout: eigenes Team links, simulierte
   Reihenfolge mittig (Liste oder nach Position gereitert), Team-Tendenz/
   Notizen/Fit rechts. ---------------- */
.mocksim-layout{display:grid; grid-template-columns:260px 1fr 300px; gap:18px; align-items:start; margin-top:16px;}
@media (max-width: 1100px){ .mocksim-layout{grid-template-columns:1fr;} }

.myteam-col{background:var(--turf-panel); border:1px solid var(--line-grey); border-radius:var(--radius); padding:16px 18px; position:sticky; top:16px;}
.myteam-col h3{font-family:'Anton',sans-serif; font-weight:400; font-size:13.5px; letter-spacing:.02em; text-transform:uppercase; margin:0; color:var(--chalk);}
.myteam-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px;}
.myteam-head span{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint);}
.mt-group{margin-bottom:12px;}
.mt-group:last-child{margin-bottom:0;}
.mt-group-label{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--chalk-faint); margin-bottom:6px; display:flex; justify-content:space-between;
}
.mt-row{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; margin-bottom:3px;
  background:var(--turf-mid); border:1px solid var(--line-grey-2); font-size:11.5px;
}
.mt-row .mt-name{flex:1; color:var(--chalk); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mt-row .mt-pick{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--flag); flex-shrink:0;}
.mt-row.empty{background:transparent; border-style:dashed;}
.mt-row.empty .mt-name{color:var(--chalk-faint); font-weight:400; font-style:italic;}

.view-toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.seg{display:flex; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:3px; gap:2px;}
.seg button{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--chalk-faint); background:transparent; border:none; border-radius:6px; padding:6px 12px; cursor:pointer;
}
.seg button.active{background:var(--turf-panel-2); color:var(--chalk);}
.pos-tabs{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px;}
.pos-tab{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; color:var(--chalk-faint);
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px; padding:5px 11px; cursor:pointer;
}
.pos-tab.active{color:var(--turf-night); background:var(--flag); border-color:var(--flag);}

.mocksim-row{
  position:relative; display:flex; align-items:center; gap:9px; background:var(--turf-mid);
  border:1px solid var(--line-grey-2); border-radius:8px; padding:8px 10px; margin-bottom:5px; font-size:12px;
}
.mocksim-row .ms-rank{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); width:20px; text-align:right; flex-shrink:0;}
.mocksim-row .ms-pos{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; color:var(--chalk-dim);
  background:var(--turf-panel-2); border:1px solid var(--line-grey-2); border-radius:5px; padding:2px 6px; width:28px; text-align:center; flex-shrink:0;
}
.mocksim-row .ms-info{flex:1; min-width:0;}
.mocksim-row .ms-name{font-weight:600; color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mocksim-row .ms-meta{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); flex-shrink:0;}
.mocksim-row .fit-flag{font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--green-ok); flex-shrink:0;}
.mocksim-row .pick-flag{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; color:var(--turf-night);
  background:var(--flag); border-radius:5px; padding:2px 6px; white-space:nowrap; flex-shrink:0;
}
.mocksim-row.mine{border:1.5px solid var(--flag); background:rgba(234,185,41,0.08);}
.mocksim-row.fit{border-left:3px solid var(--green-ok);}
.mocksim-row.taken{opacity:.55; cursor:pointer;}
.mocksim-row.taken .ms-name{text-decoration:line-through; text-decoration-color:var(--chalk-faint);}
.mocksim-row.taken:hover{opacity:.85;}
.mocksim-row.taken .override-hint{display:none; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--steel); flex-shrink:0;}
.mocksim-row.taken:hover .override-hint{display:inline;}
.mocksim-row.taken:hover .ms-meta{display:none;}
.mocksim-row.taken.open{opacity:1;}

.ms-override-panel{
  position:absolute; z-index:5; top:calc(100% + 4px); left:0; right:0; cursor:default;
  background:var(--turf-panel-2); border:1px solid var(--line-grey-2); border-radius:8px; padding:10px;
  box-shadow:0 10px 24px rgba(0,0,0,0.4);
}
.ms-override-panel input{
  width:100%; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px; color:var(--chalk);
  font-family:'Inter',sans-serif; font-size:11.5px; padding:7px 9px; margin-bottom:8px;
}
.ms-override-results{max-height:180px; overflow-y:auto; margin-bottom:8px;}
.op-row{display:flex; justify-content:space-between; align-items:center; padding:5px 6px; border-radius:5px; font-size:11.5px; cursor:pointer;}
.op-row:hover{background:var(--turf-mid);}
.op-row .op-name{color:var(--chalk);}
.op-row .op-tag{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint);}

.lean-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius:6px; border:1px solid; background:rgba(255,255,255,0.03);
}
.lean-bar{height:7px; border-radius:4px; background:var(--turf-mid); margin:11px 0 4px; overflow:hidden; display:flex;}
.lean-bar .run{background:var(--flare);}
.lean-bar .pass{background:var(--steel);}
.lean-labels{display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); margin-bottom:12px;}
.lean-components{display:flex; flex-direction:column; gap:7px;}
.lean-comp{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11.5px;}
.lean-comp .lc-label{color:var(--chalk-dim);}
.lean-comp .lc-val{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk); text-align:right;}

.notes-list{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.note{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:7px; padding:9px 10px;}
.note-body{font-size:12px; color:var(--chalk-dim); line-height:1.45;}
.note-player{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--flag); background:rgba(234,185,41,0.08); border:1px solid var(--flag-dim); border-radius:5px; padding:3px 7px; cursor:pointer;
}
.note-meta{font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--chalk-faint); margin-top:6px; display:flex; align-items:center;}
.note-add{display:flex; gap:6px;}
.note-add input{
  flex:1; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:6px; color:var(--chalk);
  font-family:'Inter',sans-serif; font-size:11.5px; padding:8px 9px;
}
.note-add input::placeholder{color:var(--chalk-faint);}
.note-add button{
  background:var(--flag); border:none; border-radius:6px; color:var(--turf-night); font-weight:700; font-size:11px;
  padding:0 12px; cursor:pointer; font-family:'Inter',sans-serif;
}

.mini-chip-row{display:flex; flex-wrap:wrap; gap:6px;}
.mini-chip{
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-dim); background:var(--turf-mid);
  border:1px solid var(--line-grey-2); border-radius:5px; padding:4px 8px;
}
.mini-chip b{color:var(--chalk);}
.tile-link{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); text-decoration:underline;}
.tile-link:hover{color:var(--flag);}

.mocksim-row.flash{animation:ms-flash 1.2s ease;}
@keyframes ms-flash{0%{box-shadow:0 0 0 2px var(--flag);} 100%{box-shadow:none;}}

/* Vertikales Draftboard: rechtes Seitenpanel (Konsistenz-Vergleich + Effizienz-Quadrant je Position) */
.board-side-panel{
  /* top wird per JS auf die tatsächliche Topbar-Höhe gesetzt (renderSidePanel
     in draftboard.html) - die Topbar ist NICHT sticky/fixed, scrollt also mit
     weg, das Panel bleibt trotzdem (fixed) an fester Bildschirmposition
     sichtbar, startet aber unterhalb statt über der Kopfzeile. */
  position:fixed; top:0; right:0; bottom:0; width:300px; z-index:40;
  background:var(--turf-panel); border-left:1px solid var(--line-grey-2); border-top:1px solid var(--line-grey-2);
  box-shadow:-6px 0 18px rgba(0,0,0,0.3);
  padding:18px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:20px;
}
.panel-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.panel-section-head h4{margin:0; font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:13px; letter-spacing:.02em; color:var(--chalk);}
.panel-clear{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); cursor:pointer; text-decoration:underline;}
.panel-clear:hover{color:var(--flare);}
.panel-section .range-row{margin-bottom:14px;}
.panel-section .range-row:last-child{margin-bottom:0;}
.panel-section .rname{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; margin-bottom:5px;}
.panel-section .rname .pos{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint); font-weight:400;}
.range-remove{margin-left:auto; color:var(--chalk-faint); cursor:pointer; font-size:10px;}
.range-remove:hover{color:var(--flare);}
.panel-section .quad-svg{width:100%; height:auto;}
.quad-dot{cursor:pointer; transition:opacity .12s, r .12s;}
.quad-dot.hovered{r:6; stroke:var(--chalk); stroke-width:1.5;}
.quad-dot.dimmed{opacity:.25;}
.quad-dot.marked{fill:var(--flag); stroke:var(--flag); stroke-width:1;}

/* Coaching Staff (Konzept-Erweiterung, coaching.html) */
.archetype-badge{
  display:inline-flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:20px; white-space:nowrap; cursor:help;
}
.archetype-badge.cat-OFFENSE{background:rgba(217,86,76,0.14); color:var(--flare); border:1px solid var(--flare-dim);}
.archetype-badge.cat-DEFENSE{background:rgba(108,147,201,0.16); color:var(--steel); border:1px solid var(--steel);}
.real-role-badge{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; color:var(--turf-night);
  background:var(--chalk-dim); border-radius:4px; padding:2px 6px; letter-spacing:.04em;
}
.playcaller-star{color:var(--flag); font-size:11px;}
.coach-pool-actions{display:flex; gap:5px; justify-content:flex-end;}
.coach-pick-btn{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:10px; letter-spacing:.03em;
  background:var(--turf-mid); color:var(--chalk); border:1px solid var(--line-grey-2); border-radius:5px;
  padding:5px 9px; cursor:pointer; transition:transform .1s ease, border-color .12s;
}
.coach-pick-btn:hover{transform:translateY(-1px); border-color:var(--flag-dim);}
.coach-pick-btn:disabled{background:var(--turf-panel); color:var(--chalk-faint); cursor:default; transform:none; opacity:.5;}
.coach-pool-status{font-family:'JetBrains Mono',monospace; font-size:10px;}
.coach-pool-status.free{color:var(--green-ok); font-weight:700;}
.coach-pool-status.taken{color:var(--chalk-faint);}
.coach-pool-status.mine{color:var(--flag); font-weight:700;}

.staff-slot{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 10px;
  border-radius:8px; background:var(--turf-mid); border:1px solid var(--line-grey-2); margin-bottom:8px;
}
.staff-slot .ss-role{
  font-family:'Anton',sans-serif; font-size:14px; color:var(--flag); min-width:32px; text-transform:uppercase;
}
.staff-slot .ss-info{flex:1; min-width:0;}
.staff-slot .ss-name{font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.staff-slot .ss-empty{color:var(--chalk-faint); font-size:11.5px; font-style:italic;}
.staff-slot .ss-archetype{font-size:10px; color:var(--chalk-faint); margin-top:2px;}
.staff-undo-btn{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--flare); background:none;
  border:1px solid var(--flare-dim); border-radius:5px; padding:4px 7px; cursor:pointer; white-space:nowrap;
}
.staff-undo-btn:hover{background:rgba(217,86,76,0.1);}
.culture-bonus-note{font-size:10.5px; color:var(--chalk-faint); line-height:1.5; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-grey-2);}

/* O-Line-/D-Line-Schema-Zuweisung (aufstellung.html-Sidebar, Konzept-
   Erweiterung "Formation, O-Line/D-Line-Zuweisung") */
.unit-row{margin-bottom:14px;}
.unit-row:last-child{margin-bottom:0;}
.unit-row .ur-role{
  display:block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--chalk-faint); margin-bottom:4px; text-decoration:none; width:fit-content;
}
.unit-row .ur-role:hover{color:var(--flag); text-decoration:underline;}
.unit-row .ur-current{font-size:11.5px; color:var(--chalk-dim); margin-bottom:6px;}
.unit-row .ur-current b{color:var(--chalk);}
.unit-row .ur-controls{display:flex; gap:6px;}
.mini-select{
  flex:1; min-width:0; background:var(--turf-mid); color:var(--chalk); border:1px solid var(--line-grey-2);
  border-radius:6px; padding:6px 8px; font-family:'JetBrains Mono',monospace; font-size:11px; cursor:pointer;
}
.unit-row .staff-undo-btn{margin-top:6px;}

/* ---------- Saisonverwaltung (VERWALTUNG_SAISON_REDESIGN_KONZEPT.md) ----------
   .unit-row[data-year] statt der nackten .unit-row-Klasse, damit diese
   zusätzliche Umrandung nicht die bestehende Nutzung von .unit-row in
   aufstellung.html/coaching.html (O-Line-/Coach-Zuweisung, ohne eigene
   Box) verändert. */
.unit-row[data-year]{
  border:1px solid var(--line-grey-2); border-radius:10px; padding:12px 14px; margin-bottom:10px;
  background:var(--turf-mid);
}
.unit-row[data-year]:last-child{margin-bottom:0;}

/* ---------- Einrichtungs-Assistent (Konzept-Erweiterung, additiv) ----------
   Spotlight-Overlay + Popover, framework-frei. Läuft nur innerhalb von
   verwaltung.html (alle Schritte liegen in dessen Unterreitern). */
/* pointer-events:none auf dem gesamten Overlay-Container (nicht nur auf
   Backdrop/Spotlight einzeln - sonst bleibt der Container selbst als leere,
   aber hit-testbare Box über der ganzen Seite liegen): der Assistent ist rein
   optisch, die echte Seite bleibt darunter voll bedienbar - der Commissioner
   soll die hervorgehobene Einstellung WÄHREND des Schritts direkt im echten
   Formular ausfüllen können, statt nur zuzuschauen und es danach separat
   nachzuholen. Das Popover selbst braucht seine eigenen Buttons/Bilder
   klickbar - pointer-events:auto dort überschreibt gezielt wieder das
   geerbte "none" vom Container. */
#wizardOverlay{position:fixed; inset:0; z-index:500; pointer-events:none;}
.wizard-backdrop{position:fixed; inset:0; background:rgba(13,31,22,0.74);}
.wizard-spotlight{
  position:fixed; border-radius:10px; border:2px solid var(--flag);
  box-shadow:0 0 0 9999px rgba(13,31,22,0.74), 0 0 22px rgba(234,185,41,0.45);
  pointer-events:none; transition:top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.wizard-popover{
  position:fixed; width:320px; max-width:calc(100vw - 32px); background:var(--turf-panel);
  border:1px solid var(--line-grey-2); border-radius:12px; padding:16px; z-index:501;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
  max-height:calc(100vh - 32px); overflow-y:auto; visibility:hidden; pointer-events:auto;
}
.wizard-popover.wizard-popover-wide{width:480px;}
.wizard-progress{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--flag-dim); margin-bottom:6px;
}
.wizard-popover h4{margin:0 0 8px; font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:15px; color:var(--chalk);}
.wizard-popover p{margin:0 0 10px; font-size:12.5px; line-height:1.5; color:var(--chalk-dim);}
.wizard-popover img{width:100%; display:block; border-radius:8px; border:1px solid var(--line-grey-2); margin-bottom:4px; cursor:zoom-in;}
.wizard-image-caption{font-size:10px; color:var(--chalk-faint); margin:0 0 10px; line-height:1.4;}
.wizard-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; flex-wrap:wrap;}
@media (prefers-reduced-motion: reduce){
  .wizard-spotlight{transition:none;}
}

/* Lightbox zum Vergrößern der PDF-Grafiken im Assistenten - die Kurven/Tabellen
   haben feine Beschriftungen, die im ~480px breiten Popover kaum lesbar sind. */
#wizardLightbox{position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;}
.wizard-lightbox-backdrop{position:fixed; inset:0; background:rgba(6,14,10,0.92);}
#wizardLightbox img{position:relative; max-width:92vw; max-height:88vh; border-radius:10px; border:1px solid var(--line-grey-2); background:#fff; box-shadow:0 12px 40px rgba(0,0,0,0.5);}
#wizardLightbox .wizard-lightbox-close{position:absolute; top:18px; right:22px;}

/* ---------- Divisionen + Spielplan-Generator (additive Konzept-Erweiterung,
   app/schedule.py) ---------- */
.div-team-remove-btn{
  background:none; border:none; color:var(--chalk-faint); cursor:pointer; font-size:13px;
  margin-left:4px; padding:0; line-height:1;
}
.div-team-remove-btn:hover{color:var(--flare);}

.sched-week-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;}
.sched-week-card{
  border:1px solid var(--line-grey-2); border-radius:10px; padding:10px; background:var(--turf-mid);
}
.sched-week-title{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--flag-dim); margin-bottom:8px;
}
.sched-matchup-row{display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap;}
.sched-vs{font-size:10px; color:var(--chalk-faint); font-family:'JetBrains Mono',monospace;}
.sched-team-badge{
  display:inline-flex; align-items:center; background:var(--turf-panel); border:1px solid var(--line-grey-2);
  border-radius:6px; padding:4px 8px; font-size:11.5px; color:var(--chalk);
}
.sched-team-badge[draggable="true"]{cursor:grab;}
.sched-team-badge[draggable="true"]:active{cursor:grabbing;}
.sched-team-badge.sched-drag-over{border-color:var(--flag); box-shadow:0 0 0 2px rgba(234,185,41,0.35);}
.sched-byes{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line-grey-2); display:flex; flex-wrap:wrap; gap:6px;}

/* Draft-Reihenfolge-Editor (Runde 1, Verwaltung > Saisonverwaltung) -
   wiederverwendet .pick-row/.pick-num (draft.html) und .sched-team-badge/
   .sched-drag-over (Spielplan-Generator) für die Zeilen/draggable Badges. */
#draftOrderSlots{display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto; margin-bottom:18px;}

/* ---------- Roster-Übersicht (ROSTER_UEBERSICHT_KONZEPT.md, "Mein Roster"
   in stats.html) ---------- */
.ro-tiles{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.ro-tile{
  flex:1 1 140px; background:var(--turf-panel); border:1px solid var(--line-grey); border-radius:var(--radius);
  padding:14px 16px;
}
.ro-tile-value{font-family:'Anton',sans-serif; font-size:26px; color:var(--chalk); line-height:1;}
.ro-tile-label{font-size:11.5px; color:var(--chalk-dim); margin-top:6px;}
.ro-tile-sub{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); margin-top:2px;}

/* Kein align-items:start hier (Nutzer-Feedback: die 2 Karten je Zeile
   sollen auf dieselbe Höhe normiert werden, nicht jede nur so hoch wie ihr
   eigener Inhalt - Grid-Default align-items:stretch erledigt das). */
.ro-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:16px;}
/* Für Karten mit schmalem Inhalt (z.B. Ring-Diagramm + Legende, nie über
   ~450px): max-content statt 1fr verhindert das Stretchen auf die halbe
   Container-Breite, justify-content:start hält sie eng beieinander statt
   über den Rest der Zeile verteilt. */
.ro-grid-narrow{grid-template-columns:repeat(auto-fit, minmax(260px, max-content)); justify-content:start;}
.ro-card{padding:18px 20px;}
.ro-card-head{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--chalk-faint); margin-bottom:14px;
}

.ro-ring-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.ro-ring-svg{width:150px; height:150px; flex:none;}
.ro-ring-seg{transition:opacity .15s;}
.ro-ring-center-num{font-family:'Anton',sans-serif; font-size:30px; fill:var(--chalk);}
.ro-ring-center-lbl{font-family:'JetBrains Mono',monospace; font-size:9px; fill:var(--chalk-faint); text-transform:uppercase; letter-spacing:.05em;}

.ro-legend{display:flex; flex-direction:column; gap:8px;}
.ro-legend.ro-legend-inline{flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 14px; margin-top:10px;}
.ro-legend-row{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--chalk-dim);}
.ro-legend-inline .ro-legend-label{margin-right:8px;}
.ro-legend-dot{width:10px; height:10px; border-radius:3px; flex:none;}
.ro-legend-label{white-space:nowrap;}
.ro-legend-value{font-family:'JetBrains Mono',monospace; color:var(--chalk); margin-left:auto; padding-left:10px;}

/* Je Positionsgruppe ein Block mit 1 (Redraft) oder 2 (Dynasty) Balken
   untereinander - .ro-pos-subtag ("Spieler"/"Cap") ersetzt hier die
   Positionsabkürzung als Zeilenlabel, da die Position bereits einmal als
   Gruppen-Überschrift steht statt je Balken wiederholt zu werden. */
.ro-pos-bars{display:flex; flex-direction:column; gap:14px;}
.ro-pos-group{display:flex; gap:12px; align-items:baseline;}
.ro-pos-group-label{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--chalk); width:30px; flex:none;}
.ro-pos-group-bars{flex:1; display:flex; flex-direction:column; gap:5px; min-width:0;}
.ro-pos-subrow{display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:10px;}
.ro-pos-subtag{font-family:'JetBrains Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--chalk-faint);}
.ro-pos-track{height:8px; background:var(--line-grey); border-radius:6px; overflow:hidden;}
.ro-pos-fill{height:100%; background:var(--flag); border-radius:6px; transition:width .2s;}
.ro-pos-value{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--chalk); text-align:right; white-space:nowrap;}

.ro-cap-svg{width:100%; height:auto; max-width:520px;}
.ro-cap-limit-line{stroke:var(--chalk-faint); stroke-width:1; stroke-dasharray:4,3;}
.ro-cap-limit-label{font-family:'JetBrains Mono',monospace; font-size:8.5px; fill:var(--chalk-faint);}
.ro-cap-x-label{font-family:'JetBrains Mono',monospace; font-size:9.5px; fill:var(--chalk-dim);}

/* Vertrags-Matrix: sticky Kopfzeile + erste Spalte, Zebra, gedimmte
   "–"-Zellen (Vertrag lief dieses Jahr nicht), aktuelle Saison (2. Spalte
   = erste Spalte in cap_seasons) farblich hervorgehoben. */
table.contract-matrix{width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; font-variant-numeric:tabular-nums;}
table.contract-matrix th, table.contract-matrix td{padding:9px 12px; border-bottom:1px solid var(--line-grey); white-space:nowrap;}
table.contract-matrix th{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--chalk-faint); text-align:right; position:sticky; top:0; background:var(--turf-panel); z-index:1;
}
table.contract-matrix th:first-child, table.contract-matrix td:first-child{
  text-align:left; position:sticky; left:0; background:var(--turf-panel); z-index:2;
}
table.contract-matrix th:nth-child(2), table.contract-matrix td:nth-child(2){
  background:rgba(234,185,41,0.08); box-shadow:inset 1px 0 0 rgba(234,185,41,0.25), inset -1px 0 0 rgba(234,185,41,0.25);
}
table.contract-matrix tbody tr:nth-child(odd) td{background:rgba(241,237,225,0.015);}
table.contract-matrix tbody tr:nth-child(odd) td:first-child{background:rgba(241,237,225,0.03);}
table.contract-matrix tbody tr:nth-child(odd) td:nth-child(2){background:rgba(234,185,41,0.1);}
table.contract-matrix td.num{text-align:right;}
table.contract-matrix td.ro-dash{color:var(--chalk-faint);}
table.contract-matrix tr.ro-dead-row td{color:var(--chalk-dim); font-style:italic;}
table.contract-matrix .ro-matrix-name{font-style:normal;}
table.contract-matrix .ro-dead-badge{
  font-family:'JetBrains Mono',monospace; font-size:8.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--flare); border:1px solid var(--flare-dim); border-radius:4px; padding:1px 5px; margin-left:6px;
}
table.contract-matrix tfoot td{
  font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--chalk); border-top:2px solid var(--line-grey-2);
  border-bottom:none; position:sticky; bottom:0; background:var(--turf-panel);
}
.sched-bye-badge{font-size:10.5px; color:var(--chalk-faint); font-style:italic;}

/* ---------- Go-To-Guys (GO_TO_GUYS_KONZEPT.md) ---------- */
.gtg-list{display:flex; flex-direction:column; gap:12px;}
.gtg-row{
  border:1px solid var(--line-grey); border-radius:var(--radius); padding:12px 16px; background:var(--turf-mid);
}
.gtg-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.gtg-current{color:var(--chalk-dim);}
.gtg-arrow{color:var(--chalk-faint);}
.gtg-candidate{color:var(--chalk); font-weight:700;}
.gtg-badge{
  margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  border-radius:6px; padding:3px 9px;
}
.gtg-badge.waiver{background:rgba(234,185,41,0.16); color:var(--flag); border:1px solid var(--flag-dim);}
.gtg-badge.trade{background:rgba(108,147,201,0.16); color:var(--steel); border:1px solid var(--steel);}
.gtg-stats{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--chalk-dim);
}
.gtg-stats .gtg-reason{color:var(--green-ok); margin-left:auto;}
.gtg-note{font-size:11.5px; color:var(--chalk-faint); margin:8px 0 0;}
.gtg-note.ok{color:var(--green-ok);}
.gtg-note.warn{color:var(--flare);}

/* =====================================================================
   Landing-Page (öffentliche Marketing-Startseite, MULTI_USER_LIGA_KONZEPT.md
   Zugriffssperre) - eigener .lp-* Namensraum, nutzt dieselben Design-Tokens
   wie der Rest der App (Turf/Chalk/Flag), damit der Übergang zur echten
   App nach dem Login stimmig wirkt.
   ===================================================================== */
.lp-topbar{border-bottom:1px solid var(--line-grey); background:linear-gradient(180deg, rgba(23,52,37,0.92), rgba(19,42,30,0.6)); padding:16px 0;}
.lp-topbar-inner{display:flex; align-items:center; justify-content:space-between;}
.lp-topbar .ghost-btn{text-decoration:none;}

.lp-hero{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  padding:64px 0 56px;
}
@media (max-width:900px){.lp-hero{grid-template-columns:1fr; padding:40px 0;}}
.lp-hero-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--flag); display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.lp-hero-eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--flag);}
.lp-hero h1{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  font-size:44px; line-height:1.08; margin:0 0 18px; color:var(--chalk);
}
.lp-hero h1 span{color:var(--flag);}
@media (max-width:560px){.lp-hero h1{font-size:32px;}}
.lp-hero-sub{font-size:15px; line-height:1.6; color:var(--chalk-dim); max-width:540px; margin:0 0 28px;}
.lp-cta-row{display:flex; gap:12px; flex-wrap:wrap;}
.lp-cta-primary{
  font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:var(--turf-night);
  background:var(--flag); border:none; border-radius:9px; padding:13px 24px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:transform .15s;
}
.lp-cta-primary:hover{transform:translateY(-1px);}
.lp-cta-secondary{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--chalk);
  background:transparent; border:1px solid var(--line-grey-2); border-radius:9px; padding:12px 22px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.lp-cta-secondary:hover{border-color:var(--flag-dim); color:var(--flag);}

.lp-login-card{
  border:1px solid var(--line-grey-2); border-radius:14px; padding:28px;
  background:linear-gradient(160deg, var(--turf-panel), var(--turf-panel-2));
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.5);
}
.lp-login-card h3{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:16px;
  margin:0 0 6px; color:var(--chalk);
}
.lp-login-card p{font-size:12.5px; color:var(--chalk-faint); margin:0 0 20px; line-height:1.5;}
.lp-login-card .login-box{display:flex; flex-direction:column; gap:10px;}
.lp-login-card .login-box input{
  background:var(--turf-mid); color:var(--chalk); border:1px solid var(--line-grey-2); border-radius:8px;
  font-family:'Inter',sans-serif; font-size:13.5px; padding:11px 13px; width:100%;
}
.lp-login-card .login-box .ghost-btn{
  justify-content:center; background:var(--flag); color:var(--turf-night); border:none; padding:12px;
  font-weight:700; font-size:13.5px;
}
.lp-login-card .login-box .ghost-btn:hover{background:#f2c94c;}
.lp-login-card .login-status{justify-content:center; font-size:12px; margin-bottom:12px;}
.lp-login-card .login-error{color:var(--flare); font-size:11.5px; margin-top:4px;}

.lp-section{padding:48px 0;}
.lp-section-head{text-align:center; max-width:640px; margin:0 auto 32px;}
.lp-section-head .lp-hero-eyebrow{justify-content:center;}
.lp-section-head h2{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:26px;
  margin:0 0 10px; color:var(--chalk);
}
.lp-section-head p{font-size:13.5px; color:var(--chalk-dim); line-height:1.6; margin:0;}

.lp-features{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px;}
.lp-feature-card{
  border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel);
  padding:20px; transition:border-color .15s, transform .15s;
}
.lp-feature-card:hover{border-color:var(--flag-dim); transform:translateY(-2px);}
.lp-feature-icon{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-bottom:12px; background:rgba(234,185,41,0.12); border:1px solid var(--flag-dim);
}
.lp-feature-card h4{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:14px;
  margin:0 0 8px; color:var(--chalk); letter-spacing:.01em;
}
.lp-feature-card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px;}
.lp-feature-card li{
  font-size:12.5px; color:var(--chalk-dim); line-height:1.5; padding-left:16px; position:relative;
}
.lp-feature-card li::before{
  content:"\203A"; position:absolute; left:0; color:var(--flag); font-weight:700;
}

.lp-mockups{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px;}
.lp-mock-card{
  border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel); overflow:hidden;
}
.lp-mock-head{
  display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--turf-mid);
  border-bottom:1px solid var(--line-grey); font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint);
}
.lp-mock-head .lp-dots{display:flex; gap:4px; margin-right:4px;}
.lp-mock-head .lp-dots span{width:7px; height:7px; border-radius:50%; background:var(--line-grey-2);}
.lp-mock-body{padding:14px;}

.lp-mock-row{
  display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line-grey-2);
  font-size:12px;
}
.lp-mock-row:last-child{border-bottom:none;}
.lp-mock-pos{
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--turf-night);
  background:var(--chalk-dim); border-radius:4px; padding:2px 6px; flex:none;
}
.lp-mock-name{color:var(--chalk); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lp-mock-pts{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12.5px; flex:none;}
.lp-mock-pts.up{color:var(--green-ok);}
.lp-mock-pts.boost{color:var(--flag);}
.lp-mock-rank{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; color:var(--chalk-faint); width:18px; flex:none;
}
.lp-mock-star{color:var(--flag); flex:none; font-size:12px;}
.lp-mock-badge{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  border-radius:5px; padding:2px 7px; flex:none; background:rgba(108,147,201,0.16); color:var(--steel); border:1px solid var(--steel);
}
.lp-coach-name{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:15px; color:var(--chalk); margin:0 0 2px;}
.lp-coach-archetype{font-size:11.5px; color:var(--chalk-faint); margin:0 0 14px;}
.lp-coach-scheme{
  display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--flag); background:rgba(234,185,41,0.1); border:1px solid var(--flag-dim); border-radius:7px;
  padding:5px 10px; margin-bottom:14px;
}
.lp-coach-boosts{display:flex; gap:8px; flex-wrap:wrap;}
.lp-coach-boost{
  flex:1; min-width:70px; text-align:center; border:1px solid var(--line-grey-2); border-radius:8px;
  padding:8px 6px; background:var(--turf-mid);
}
.lp-coach-boost .lbl{display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint); margin-bottom:4px;}
.lp-coach-boost .val{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; color:var(--green-ok);}

.lp-footer{border-top:1px solid var(--line-grey); padding:28px 0; margin-top:20px; text-align:center;}
.lp-footer p{font-size:11.5px; color:var(--chalk-faint); margin:0;}

/* =====================================================================
   Spieltag / Matchup-Box-Score (angelehnt an die "Matchup"-Ansicht
   bekannter Fantasy-Apps) - zwei Team-Spalten mit Spieler+Punkten je
   Startaufstellungs-Slot, Wochen-Navigation per Pfeiltasten/-Buttons.
   ===================================================================== */
.mu-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0 8px;}
.mu-nav-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-grey-2); background:var(--turf-mid);
  color:var(--chalk); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.mu-nav-btn:hover{border-color:var(--flag-dim); color:var(--flag);}
.mu-nav-btn:disabled{opacity:.4; cursor:default;}
.mu-week-label{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:19px; color:var(--chalk); min-width:150px; text-align:center;}
.mu-controls-row{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:26px;}
.mu-hint{text-align:center; font-size:11px; color:var(--chalk-faint); margin:-4px 0 20px;}

/* Spieltag-weiter Status (EIN Kickoff-Zeitpunkt für alle Matchups dieser
   Woche, nicht pro Matchup - siehe app/season_phase.py:earliest_kickoff). */
.mu-week-status{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 20px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; color:var(--chalk-dim);
}
.mu-week-status .dot{width:7px; height:7px; border-radius:50%; flex:none;}
.mu-week-status.locked .dot{background:var(--flare);}
.mu-week-status.open .dot{background:var(--steel);}

.mu-vs{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin-bottom:14px;}
@media (max-width:700px){.mu-vs{grid-template-columns:1fr; text-align:center;}}
.mu-team-summary{
  border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel);
  padding:20px; text-align:center; transition:border-color .2s, box-shadow .2s;
}
.mu-team-summary.leading{border-color:var(--flag); box-shadow:0 0 0 1px var(--flag) inset;}
.mu-team-avatar{
  width:44px; height:44px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:15px; border:2px solid var(--line-grey-2); background:var(--turf-mid); color:var(--chalk-dim);
}
.mu-team-summary.leading .mu-team-avatar{border-color:var(--flag); color:var(--flag);}
.mu-team-summary .mu-team-name{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:16px; color:var(--chalk); margin-bottom:10px;}
.mu-team-summary .mu-team-score{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:38px; color:var(--chalk-dim); font-variant-numeric:tabular-nums;}
.mu-team-summary.leading .mu-team-score{color:var(--green-ok);}
.mu-team-projected{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-faint); margin-top:4px;}
.mu-vs-divider{font-family:'Anton',sans-serif; font-size:18px; color:var(--chalk-faint);}

.mu-view-toggle{display:flex; justify-content:center; gap:2px; background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:8px; padding:2px; width:fit-content; margin:0 auto 16px;}
.mu-view-toggle button{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 14px; border-radius:6px; border:none; background:transparent; color:var(--chalk-faint); cursor:pointer;
  transition:background .15s, color .15s;
}
.mu-view-toggle button.active{background:var(--turf-panel-2); color:var(--chalk);}

.mu-cmp-row{display:grid; grid-template-columns:1fr 34px 1fr; align-items:center; gap:10px; padding:9px 16px; border-bottom:1px solid var(--line-grey);}
.mu-cmp-row:last-child{border-bottom:none;}
.mu-cmp-side{display:flex; align-items:center; gap:9px; min-width:0;}
.mu-cmp-side.right{flex-direction:row-reverse; text-align:right;}
.mu-cmp-pts{font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; flex:none; min-width:38px;}
.mu-cmp-pts.proj{color:var(--chalk-faint); font-weight:600;}
.mu-cmp-name{font-size:12.5px; color:var(--chalk-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mu-cmp-row.win-home .mu-cmp-pts.home, .mu-cmp-row.win-home .mu-cmp-name.home{color:var(--green-ok);}
.mu-cmp-row.win-away .mu-cmp-pts.away, .mu-cmp-row.win-away .mu-cmp-name.away{color:var(--green-ok);}

.mu-stat-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.mu-stat-table th{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-faint);
  text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-grey);
}
.mu-stat-table td{padding:8px 12px; border-bottom:1px solid var(--line-grey); color:var(--chalk-dim); vertical-align:top;}
.mu-stat-table tr:last-child td{border-bottom:none;}
.mu-stat-table .mu-slot-pos{margin:0;}
.mu-stat-table .pname{color:var(--chalk); font-size:12.5px;}
.mu-stat-table .pts{font-family:'JetBrains Mono',monospace; font-weight:700; text-align:right; font-variant-numeric:tabular-nums;}
.mu-stat-table .pts.proj{color:var(--chalk-faint); font-weight:600;}
.mu-stat-table .statline{color:var(--chalk-faint); font-size:11.5px;}
.mu-stat-row.win .mu-stat-pts, .mu-stat-row.win .mu-stat-name{color:var(--green-ok);}
.mu-stat-row{cursor:pointer;}
.mu-boost-delta{font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;}
.mu-boost-delta.pos{color:var(--green-ok);}
.mu-boost-delta.neg{color:var(--flare);}
.mu-cmp-row{cursor:pointer;}

.mu-diff-card, .mu-swing-card{
  border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel); padding:16px 18px;
}
.mu-diff-card h3, .mu-swing-card h3{font-family:'Anton',sans-serif; font-size:14px; font-weight:400; margin:0 0 4px;}
.mu-diff-card .sub, .mu-swing-card .sub{color:var(--chalk-faint); font-size:11.5px; margin:0 0 14px;}
.mu-diff-row{margin-bottom:12px;}
.mu-diff-row:last-child{margin-bottom:0;}
.mu-diff-label{display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px;}
/* Tug-of-War-Balken (Spieltag-Redesign): Auslenkung von der Mitte (1.0×)
   statt eines einzelnen Links-Balkens - braucht ein positioniertes
   Elternelement für die Mittellinie + den Ausschlag in beide Richtungen. */
.mu-diff-track{position:relative; height:7px; background:var(--line-grey); border-radius:7px;}
.mu-diff-mid{position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--line-grey-2);}
.mu-diff-fill{position:absolute; top:0; bottom:0; border-radius:7px;}
.mu-swing-chip{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--line-grey); font-size:12px;}
.mu-swing-chip:last-child{border-bottom:none;}
.mu-swing-team-tag{
  font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.03em; padding:2px 5px; border-radius:4px;
  background:var(--turf-mid); color:var(--chalk-faint); border:1px solid var(--line-grey-2); flex:none; text-align:center;
}
.mu-swing-body{min-width:0;}
.mu-swing-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--chalk-dim);}
.mu-swing-bar-track{height:4px; border-radius:3px; background:var(--turf-mid); margin-top:5px; overflow:hidden;}
.mu-swing-bar{height:100%; border-radius:3px;}
.mu-swing-bar.boost{background:var(--flag);}
.mu-swing-bar.malus{background:var(--flare);}
.mu-swing-factor{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; flex:none; font-variant-numeric:tabular-nums;}
.mu-swing-factor.boost{color:var(--flag);}
.mu-swing-factor.malus{color:var(--flare);}
.mu-two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
@media (max-width:700px){.mu-two-col{grid-template-columns:1fr;}}

.mu-columns{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:700px){.mu-columns{grid-template-columns:1fr;}}
.mu-col{border:1px solid var(--line-grey); border-radius:var(--radius); background:var(--turf-panel); overflow:hidden;}
.mu-col-head{
  padding:10px 16px; background:var(--turf-mid); border-bottom:1px solid var(--line-grey);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--chalk-faint);
}
.mu-slot-row{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line-grey);}
.mu-slot-row:last-child{border-bottom:none;}
.mu-slot-pos{
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--turf-night);
  background:var(--chalk-dim); border-radius:4px; padding:3px 6px; flex:none; width:34px; text-align:center;
}
.mu-slot-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--chalk); font-size:13px;}
.mu-slot-name.empty{color:var(--chalk-faint); font-style:italic;}
.mu-slot-pts{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; color:var(--chalk-dim); flex:none;}
.mu-empty-state{padding:70px 20px; text-align:center; color:var(--chalk-faint); font-size:13px;}

/* -------- Ergebnis-Laufband (Nutzer-Wunsch: "wie im Videotext früher") --
   echte NFL-Ergebnisse, unabhängig von der Fantasy-Liga, oben auf der
   Spieltag-Seite. Eigener dunklerer Streifen (fast schwarz statt Turf-
   Grün) mit Mono-Ziffern - bewusst textueller/roher als der Rest der App,
   das ist der Teletext-Bezug. -------- */
.mu-ticker{
  background:#05100a; border-bottom:1px solid var(--line-grey-2); overflow:hidden;
  display:flex; align-items:stretch;
}
.mu-ticker-label{
  flex:none; display:flex; align-items:center; gap:6px; padding:0 14px; background:var(--flag); color:var(--turf-night);
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}
.mu-ticker-label .dot{width:6px; height:6px; border-radius:50%; background:var(--turf-night); animation:mu-ticker-blink 1.4s steps(1) infinite;}
.mu-ticker-viewport{flex:1; overflow:hidden; min-width:0; position:relative;}
.mu-ticker-track{display:flex; width:max-content; white-space:nowrap; animation:mu-ticker-scroll 100s linear infinite;}
.mu-ticker-track:hover{animation-play-state:paused;}
.mu-ticker-game{
  display:inline-flex; align-items:baseline; gap:7px; padding:9px 22px; font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--chalk-dim); border-right:1px solid rgba(241,237,225,0.1);
}
.mu-ticker-game b{color:var(--chalk); font-weight:700;}
/* Eigene Spieler (Nutzer-Wunsch): Team-Kürzel gelb, wenn ein Roster-Spieler
   des eingeloggten Owners in diesem echten NFL-Spiel steht. */
.mu-ticker-game b.mine{color:var(--flag);}
.mu-ticker-game .mu-ticker-score{color:var(--flag); font-weight:700; font-variant-numeric:tabular-nums;}
.mu-ticker-game .mu-ticker-pending{color:var(--chalk-faint);}
.mu-ticker-game .mu-ticker-own{color:var(--flag); font-weight:600; font-size:11px;}
@keyframes mu-ticker-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes mu-ticker-blink{0%,49%{opacity:1;} 50%,100%{opacity:.25;}}
@media (prefers-reduced-motion: reduce){
  .mu-ticker-track{animation:none; overflow-x:auto;}
}

/* -------- Scoreboard-Meter + Fortschritts-Punkte (Spieltag-Redesign) -- */
.mu-meter-row{margin-top:18px;}
.mu-meter-labels{display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); margin-bottom:6px; letter-spacing:.03em;}
.mu-meter-labels b{color:var(--chalk-dim); font-weight:600;}
.mu-meter{position:relative; height:9px; border-radius:999px; background:var(--turf-mid); overflow:hidden; border:1px solid var(--line-grey);}
.mu-meter-fill{position:absolute; inset:0; width:50%; border-radius:999px 0 0 999px; background:linear-gradient(90deg, var(--flag-dim), var(--flag)); transition:width 1s cubic-bezier(.22,.9,.28,1);}
.mu-meter-mid{position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line-grey-2);}
.mu-progress-row{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px;}
.mu-progress{display:flex; align-items:center; gap:8px; justify-content:center;}
.mu-progress-dots{display:flex; gap:4px;}
.mu-progress-dots span{width:7px; height:7px; border-radius:50%; background:var(--line-grey-2);}
.mu-progress-dots span.done{background:var(--green-ok);}
.mu-progress-label{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-faint); letter-spacing:.02em;}
@media (prefers-reduced-motion: reduce){
  .mu-meter-fill{transition:none;}
}

/* -------- Vergleich: Balken je Slot unter der bestehenden Zeile -------- */
.mu-cmp-bar-track{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:2px; height:5px; margin-top:6px;}
.mu-cmp-bar{height:100%; border-radius:3px; background:var(--line-grey-2);}
.mu-cmp-bar.home{justify-self:end; border-radius:3px 0 0 3px;}
.mu-cmp-bar.away{justify-self:start; border-radius:0 3px 3px 0;}
.mu-cmp-bar.win{background:var(--green-ok);}

/* -------- Saison-Form-Seitenleisten (Nutzer-Wunsch: "Statistiken der
   Spiele, in denen deine Spieler zum Einsatz kamen") -------- */
.mu-page-grid{max-width:1360px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:236px minmax(0,1fr) 236px; gap:22px; align-items:start;}
.mu-page-grid > .wrap{max-width:none; margin:0; padding-left:0; padding-right:0;}
.mu-side-rail{position:sticky; top:20px;}
.mu-season-card{background:var(--turf-panel); border:1px solid var(--line-grey); border-radius:var(--radius); padding:16px 15px;}
.mu-season-card h4{font-family:'Anton',sans-serif; font-weight:400; font-size:14px; text-transform:uppercase; letter-spacing:.01em; margin:3px 0 0;}
.mu-season-record{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); margin:5px 0 12px;}
.mu-season-row{padding:9px 0; border-top:1px solid var(--line-grey);}
.mu-season-row:first-of-type{border-top:none; padding-top:2px;}
.mu-season-row-top{display:flex; justify-content:space-between; align-items:baseline; gap:6px;}
.mu-season-row-name{font-size:11.5px; font-weight:600; color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mu-season-row-avg{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-dim); flex:none; font-variant-numeric:tabular-nums;}
.mu-season-row-games{font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--chalk-faint); margin-top:2px; letter-spacing:.02em;}
.mu-season-range-row{display:flex; align-items:center; gap:5px; margin-top:6px;}
.mu-season-range-end{font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--chalk-faint); flex:none;}
.mu-season-range{flex:1; position:relative; height:4px; border-radius:3px; background:var(--turf-mid); border:1px solid var(--line-grey);}
.mu-season-range-marker{position:absolute; top:-2px; width:2px; height:8px; border-radius:1px; transform:translateX(-1px);}
.mu-season-range-marker.boom{background:var(--green-ok);}
.mu-season-range-marker.bust{background:var(--flare);}
.mu-season-foot{margin-top:13px; padding-top:12px; border-top:1px solid var(--line-grey); font-size:11px; color:var(--chalk-dim); display:flex; justify-content:space-between; align-items:baseline;}
.mu-season-foot b{font-family:'JetBrains Mono',monospace; color:var(--chalk); font-weight:700; font-variant-numeric:tabular-nums;}

/* Snap-Share-Strahl (Nutzer-Wunsch: ein gemeinsamer Strahl je Offense/
   Defense statt einer Fortschrittsleiste pro Spieler, siehe
   frontend/matchup.html:renderSnapShareRays) - ein Strich je Spieler an
   seiner Snap-%-Position, Label wechselt über/unter dem Strahl um
   Kollisionen bei eng beieinander liegenden Werten zu reduzieren. */
.mu-snap-rail-block{margin-top:16px;}
.mu-snap-rail-block:first-of-type{margin-top:4px;}
.mu-snap-rail-title{font-size:10px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.03em;}
.mu-snap-rail{position:relative; height:6px; border-radius:3px; background:var(--turf-mid); border:1px solid var(--line-grey); margin:20px 6px;}
.mu-snap-tick{position:absolute; top:-6px; width:2px; height:18px; border-radius:1px; background:var(--flag); transform:translateX(-1px);}
.mu-snap-tick-label{position:absolute; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:700; color:var(--chalk-dim); white-space:nowrap;}
.mu-snap-tick-label.above{bottom:100%; margin-bottom:4px;}
.mu-snap-tick-label.below{top:100%; margin-top:4px;}

/* ---------- Team-Insights (Nutzer-Feedback: Ersatz für die "nicht
   aussagekräftige" Floor/Ceiling-Liste - Team-Splits/Einheiten-Strafen/
   Snap-Share) ---------- */
.mu-split-section{margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line-grey);}
.mu-split-title{font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--chalk-faint); margin-bottom:6px;}
.mu-split-empty{font-size:11px; color:var(--chalk-faint); margin:0;}
.mu-split-row{display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:4px;}
.mu-split-label{width:64px; flex:none; color:var(--chalk-dim);}
.mu-split-bar-track{flex:1; height:6px; border-radius:999px; background:var(--turf-mid); border:1px solid var(--line-grey); overflow:hidden;}
.mu-split-bar-fill{display:block; height:100%; background:var(--flag); border-radius:999px;}
.mu-split-value{width:40px; flex:none; text-align:right; font-family:'JetBrains Mono',monospace; color:var(--chalk); font-variant-numeric:tabular-nums;}
.mu-penalty-row{display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--chalk-dim); padding:3px 0;}
.mu-penalty-team{font-family:'JetBrains Mono',monospace; color:var(--steel);}
@media (max-width:1080px){
  .mu-page-grid{grid-template-columns:1fr 1fr;}
  .mu-page-grid > .wrap{grid-column:1/-1; order:1;}
  .mu-side-rail{order:2; position:static; margin-top:8px;}
}
@media (max-width:640px){
  .mu-page-grid{grid-template-columns:1fr; padding:0 16px;}
}

/* =====================================================================
   Trade-Center-Neugestaltung: Konzept A "Matchup Card", Konzept B
   "Trade Board", Konzept C "Geführter Ablauf" (Nutzer-Feedback: altes
   Fenster war eine reine Checkbox-Liste). Alle drei bauen auf denselben
   App-Farbvariablen auf (siehe :root), keine neuen Farben.
   ===================================================================== */

.tc-header-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:4px;}
/* margin-right räumt den absolut positionierten .modal-close ("✕", top:14px
   right:14px, 30px breit) frei - ohne das überlappte der Schalter sichtbar
   mit dem Schließen-Kreuz (Nutzer-Feedback samt Screenshot). */
.tc-variant-switch{display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-faint); margin-right:34px;}

/* ---------- Konzept A: Matchup Card ---------- */
.tc-a-head{display:flex; align-items:center; justify-content:center; gap:20px; margin:18px 0 20px;}
.tc-a-team{flex:1; text-align:center; min-width:0;}
.tc-a-name{
  font-family:'Anton',sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; letter-spacing:.01em;
  color:var(--chalk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tc-a-team.mine .tc-a-name{color:var(--flag);}
.tc-a-team.theirs .tc-a-name{color:var(--steel);}
.tc-a-vs{
  width:38px; height:38px; border-radius:50%; background:var(--turf-panel-2); border:1px solid var(--line-grey-2);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--chalk-dim); flex:none;
}
.tc-a-columns{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.tc-a-col-label{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--chalk-faint); margin-bottom:9px;
}
.tc-a-col.mine .tc-a-col-label{color:var(--flag-dim);}
.tc-a-col.theirs .tc-a-col-label{color:#7b93b4;}
.tc-a-asset{
  display:flex; align-items:center; gap:10px; background:var(--turf-mid); border:1px solid var(--line-grey-2);
  border-radius:10px; padding:9px 11px; margin-bottom:7px;
}
.tc-a-pick{background:transparent; border-style:dashed;}
.tc-a-avatar{
  width:32px; height:32px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:10.5px; color:var(--turf-night);
}
.tc-a-pick .tc-a-avatar{background:var(--turf-panel-2); color:var(--chalk-dim);}
.tc-a-asset-text{flex:1; min-width:0;}
.tc-a-asset-name{font-size:12.5px; font-weight:600; color:var(--chalk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tc-a-asset-meta{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint);}
.tc-a-asset-contract{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-dim); margin-top:2px;}
.tc-a-asset[data-pid], .tc-b-chip[data-pid], .c-review-item[data-pid]{cursor:pointer;}
.tc-a-remove{
  margin-left:auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--line-grey-2); background:none;
  color:var(--chalk-faint); cursor:pointer; font-size:11px; line-height:1; flex:none;
}
.tc-a-remove:hover{border-color:var(--flare); color:var(--flare);}
.tc-a-add-wrap{margin-top:4px;}
.tc-a-add-wrap summary{
  display:flex; align-items:center; gap:8px; background:none; border:1px dashed var(--line-grey-2); border-radius:10px;
  padding:9px 11px; color:var(--chalk-faint); font-size:12px; cursor:pointer; list-style:none;
}
.tc-a-add-wrap summary::-webkit-details-marker{display:none;}
.tc-a-add-wrap summary:hover{border-color:var(--flag-dim); color:var(--chalk-dim);}
.tc-a-add-wrap summary::before{content:"+ ";}
.tc-a-add-list{max-height:180px; overflow-y:auto; margin-top:6px;}
.tc-a-add-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:8px;
  font-size:12.5px; color:var(--chalk); cursor:pointer; min-width:0;
}
.tc-a-add-row:hover{background:var(--turf-mid);}
.tc-a-add-meta{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint); flex:none;}
@media (max-width:640px){ .tc-a-columns{grid-template-columns:1fr;} }

/* ---------- Konzept B: Trade Board ---------- */
.tc-b-tally{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--chalk-dim);
  background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:20px; padding:5px 13px; margin-bottom:12px;
}
.tc-b-board{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.tc-b-tray{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:12px; padding:13px; min-width:0;}
.tc-b-tray-head{margin-bottom:8px;}
.tc-b-tray-name{font-family:'Anton',sans-serif; font-weight:400; font-size:13.5px; text-transform:uppercase; letter-spacing:.01em;}
.tc-b-tray.mine .tc-b-tray-name{color:var(--flag);}
.tc-b-tray.theirs .tc-b-tray-name{color:var(--steel);}
.tc-b-zone-label{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--chalk-faint); margin:9px 0 6px;
}
.tc-b-selected{
  background:rgba(234,185,41,0.06); border:1px dashed var(--flag-dim); border-radius:9px; padding:7px; min-height:34px;
  display:flex; flex-direction:column; gap:5px;
}
.tc-b-pool{display:flex; flex-direction:column; gap:5px; max-height:150px; overflow-y:auto; padding-right:2px;}
.tc-b-chip{
  display:flex; align-items:center; gap:8px; background:var(--turf-panel-2); border-radius:8px; padding:6px 9px;
  border-left:3px solid var(--line-grey-2); cursor:pointer;
}
.tc-b-chip:hover{background:var(--turf-panel);}
.tc-b-chip.in-trade{background:var(--turf-panel); border-left-color:var(--flag);}
.tc-b-chip-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.tc-b-chip-name{font-size:12px; color:var(--chalk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tc-b-chip-contract{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-dim);}
.tc-b-chip-tag{
  font-family:'JetBrains Mono',monospace; font-size:9px; padding:2px 6px; border-radius:4px; color:var(--turf-night);
  font-weight:700; flex:none;
}
@media (max-width:640px){ .tc-b-board{grid-template-columns:1fr;} }

/* ---------- Konzept C: Geführter Ablauf ---------- */
.tc-c-layout{display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px;}
.tc-c-rail{display:flex; flex-direction:column; min-width:0;}
.tc-c-main{min-width:0;}
.tc-c-step{position:relative; padding:0 0 26px 24px;}
.tc-c-step:last-child{padding-bottom:0;}
.tc-c-step::before{content:""; position:absolute; left:5px; top:2px; bottom:-2px; width:1px; background:var(--line-grey-2);}
.tc-c-step:last-child::before{display:none;}
.tc-c-dot{position:absolute; left:0; top:1px; width:12px; height:12px; border-radius:50%; background:var(--turf-mid); border:2px solid var(--line-grey-2);}
.tc-c-step.done .tc-c-dot{background:var(--green-ok); border-color:var(--green-ok);}
.tc-c-step.now .tc-c-dot{background:var(--flag); border-color:var(--flag); box-shadow:0 0 0 4px rgba(234,185,41,0.16);}
.tc-c-step-label{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk-faint);}
.tc-c-step.now .tc-c-step-label{color:var(--flag);}
.tc-c-step-name{font-size:12.5px; font-weight:600; color:var(--chalk-dim); margin-top:2px;}
.tc-c-step.now .tc-c-step-name{color:var(--chalk);}
.tc-c-step.done .tc-c-step-name{color:var(--chalk-dim);}
.tc-c-main h2{font-family:'Anton',sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; margin:0 0 4px; letter-spacing:.01em;}
.c-review{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px;}
.c-review-col{background:var(--turf-mid); border:1px solid var(--line-grey-2); border-radius:10px; padding:13px;}
.c-review-col h4{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 9px;
  color:var(--chalk-faint); display:flex; justify-content:space-between;
}
.c-review-item{display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px solid var(--line-grey);}
.c-review-item:last-child{border-bottom:none;}
.c-review-item-name{font-size:12.5px; color:var(--chalk);}
.c-review-item-meta{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-faint);}
@media (max-width:680px){
  .tc-c-layout{grid-template-columns:minmax(0,1fr);}
  .tc-c-rail{flex-direction:row; flex-wrap:wrap; gap:14px;}
  .tc-c-step{padding:0 0 0 20px; min-width:0; flex:0 1 120px;}
  .tc-c-step::before{display:none;}
  .c-review{grid-template-columns:1fr;}
}

/* ---------- News-Seite (news.html) ---------- */
.news-grid{grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); align-items:start;}
.news-roster-card, .news-top-card, .news-form-card{grid-column:span 1;}
@media (min-width:1080px){
  .news-grid{grid-template-columns:1fr 1fr;}
  .news-roster-card, .news-top-card, .news-form-card{grid-column:1 / -1;}
}
.news-standings-table tr.news-mine td{color:var(--flag); font-weight:600;}
.news-pf-cell{display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap;}
.news-bar-track{display:inline-block; width:56px; height:6px; border-radius:999px; background:var(--line-grey); overflow:hidden; vertical-align:middle;}
.news-bar-fill{display:block; height:100%; background:var(--flag); border-radius:999px;}
.news-opponent-name{font-family:'Anton',sans-serif; font-size:16px; text-transform:uppercase; color:var(--chalk); margin-bottom:10px;}
.news-opponent-row{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-grey); font-size:13px;}
.news-opponent-row:last-child{border-bottom:none;}
.news-opponent-label{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--chalk-faint);}

.news-subsection-title{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--flag); margin:16px 0 6px;}
.news-player-list{display:flex; flex-direction:column;}
.news-player-row{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-grey); font-size:13px;}
.news-player-row:last-child{border-bottom:none;}
.news-player-name{flex:1; min-width:0; color:var(--chalk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news-player-pos{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint);}
.news-player-detail{font-size:11px; color:var(--chalk-faint); white-space:nowrap;}
.news-status-pill{font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.news-status-questionable{background:rgba(234,185,41,0.18); color:var(--flag);}
.news-status-doubtful{background:rgba(217,86,76,0.14); color:#e08a4f;}
.news-status-out{background:rgba(217,86,76,0.2); color:var(--flare);}
.news-status-bye{background:rgba(108,147,201,0.18); color:var(--steel);}
.news-status-returning{background:rgba(95,174,114,0.14); color:var(--green-ok); border:1px solid rgba(95,174,114,0.4);}

.news-form-chart{display:flex; align-items:flex-end; gap:10px; height:130px; padding-top:10px;}
.news-form-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; flex:1; height:100%;}
.news-form-bar{width:100%; max-width:34px; border-radius:4px 4px 0 0;}
.news-form-bar.above-avg{background:var(--green-ok);}
.news-form-bar.below-avg{background:var(--flare);}
.news-form-value, .news-form-week{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--chalk-faint);}

.news-top-week{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--chalk-faint); margin:0 0 10px;}
.news-top-columns{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.news-top-col-title{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--flag); margin-bottom:8px;}
.news-top-row{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line-grey); font-size:12.5px;}
.news-top-row:last-child{border-bottom:none;}
.news-top-rank{font-family:'JetBrains Mono',monospace; color:var(--chalk-faint); width:14px;}
.news-top-name{flex:1; min-width:0; color:var(--chalk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news-top-points{font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--chalk);}
@media (max-width:640px){
  .news-top-columns{grid-template-columns:1fr;}
}

/* ---------- Saison-Zeitstrahl (verwaltung.html, Nutzer-Wunsch: "mache es
   gerne als grafischen Zeitstrahl mit Beschriftung") ---------- */
.season-timeline{position:relative; height:150px; margin:26px 4px 14px;}
.st-axis{position:absolute; top:74px; left:0; right:0; height:3px; background:var(--line-grey); border-radius:2px;}
.st-span{position:absolute; top:70px; height:11px; border-radius:6px; background:rgba(95,174,114,0.3); border:1px solid var(--green-ok); cursor:help;}
.st-tick{position:absolute; top:68px; width:2px; height:15px; background:var(--chalk-faint); cursor:help; transform:translateX(-1px);}
.st-tick-end{background:transparent; border-left:2px dashed var(--flag-dim);}
.st-marker{position:absolute; top:67px; width:13px; height:13px; border-radius:50%; transform:translateX(-6.5px); border:2px solid var(--turf-night); cursor:help; box-shadow:0 0 0 1px var(--line-grey);}
.st-marker.activated{background:var(--flag);}
.st-marker.draft-scheduled{background:var(--turf-mid); border:2px dashed var(--chalk-faint);}
.st-marker.draft-completed{background:var(--green-ok);}
.st-marker.playoffs{background:var(--steel);}
.st-marker.finals{background:var(--flare);}
.st-marker.completed{background:var(--chalk);}
.st-label{position:absolute; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--chalk-dim); text-align:center; width:120px; line-height:1.35; pointer-events:none;}
.st-label.above{top:0;}
.st-label.below{top:90px;}
.st-label b{display:block; color:var(--chalk); font-size:10.5px; font-family:'Inter',sans-serif; font-weight:600;}
.st-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line-grey);}
.st-legend-item{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--chalk-dim);}
.st-legend-dot{display:inline-block; width:10px; height:10px; border-radius:50%; border:1px solid var(--line-grey);}
.st-legend-dot.activated{background:var(--flag);}
.st-legend-dot.draft-scheduled{background:var(--turf-mid); border:1px dashed var(--chalk-faint);}
.st-legend-dot.draft-completed{background:var(--green-ok);}
.st-legend-dot.playoffs{background:var(--steel);}
.st-legend-dot.finals{background:var(--flare);}
.st-legend-dot.completed{background:var(--chalk);}
.st-legend-swatch{display:inline-block; width:16px; height:8px; border-radius:4px; background:rgba(95,174,114,0.3); border:1px solid var(--green-ok);}
.st-legend-tick{display:inline-block; width:2px; height:12px; background:var(--chalk-faint);}
.st-legend-tick-end{background:transparent; border-left:2px dashed var(--flag-dim);}