/* ===================== profile.php ?view=player ("epp-" prefix) =====================
   Moved out of profile.php's player-view inline <style> block 2026-08-11 (continuing the
   page-by-page cleanup, see css/dyne.css's own header for the project). profile.php merges 3
   old pages (player/gm/team) behind if($view===...) branches, each with its OWN <head> and its
   own epp- block — genuinely different in places (.epp-hero padding/gap/min-height, award badge
   variants, mobile layout strategy all differ from the gm/team views), so kept as 3 SEPARATE
   files (css/profile-player.css / -gm.css / -team.css) rather than force-merged into one - only
   one of the three <head> branches ever executes per request, so there's no cascade-conflict
   risk from keeping them apart, but merging same-named rules with different values into one file
   would risk one view silently overriding another's intended layout.

   Consolidated 2026-08-22 (User-Frage "noch weitere Klassen, die man globalisieren könnte?"):
   the rules that WERE byte-identical across all 3 files (page shell, nav controls, hero
   decoration, chip row, awards base/champ/stat variants, stat-table chrome, name-link/muted
   text, legend, teampill, note, scroll-shadow, the 720px media query) moved to css/dyne.css
   ("Shared epp- profile chrome" section) - this file now keeps only what's genuinely unique to
   the player view (hero layout incl. the ESPN-style photo treatment, MVP/All-Star award
   variants, Season/Career stat highlighting incl. All-Star star + MVP-season row, the
   Transaktionsverlauf tx-* block, chip-toggle). A few small 2-way matches with profile-gm.css/
   profile-team.css (.epp-hero-media, .epp-hero-text, base .epp-allstar-star) were deliberately
   left duplicated rather than chased for marginal gain - see
   project_css_globalization_2026_08_22 memory for the list of what's still open. */

.mainnav-hamburger-wrap { position: fixed; left: 0; top: 0; z-index: 999999; }
.mainnav-header { max-width: 1360px; margin: 0 auto; position: fixed; display: flex; }
.mainnav-header::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background-color: #2c3e50; z-index: -1; }
/* Notifications-Icon (Team-Logo rechts oben) hat dasselbe Problem wie das Hamburger-Icon,
   nur spiegelverkehrt (User-Report 2026-08-16, urspruenglich auf roster.php gefunden und
   dort behoben, siehe css/roster.css fuer die volle Erklaerung): als Flex-Kind der hier auf
   1360px zentrierten .mainnav-header landet es per margin-left:auto (aus nav.php) nur am
   rechten Rand der zentrierten Box statt am echten Bildschirmrand. !important noetig, weil
   nav.php's eigenes ".ntf-badge-wrap { position: relative; }" (fuer den absolut
   positionierten Badge-Zaehler .ntf-count) im <head> NACH dieser Datei ausgegeben wird und
   bei gleicher Spezifitaet sonst gewinnen wuerde. */
.ntf-badge-wrap { position: fixed !important; top: 2px; right: 0; z-index: 999999; }
.ntf-pop { position: fixed !important; top: 40px !important; right: 0 !important; }
/* .gst-badge-wrap/.gst-pop (Login-Hinweis fuer ausgeloggte Besucher, 2026-08-18) - selber Slot,
   selbes Problem wie .ntf-badge-wrap/.ntf-pop oben, siehe roster.css fuer den vollen Kommentar. */
.gst-badge-wrap { position: fixed !important; top: 2px !important; right: 0 !important; z-index: 999999 !important; }
.gst-pop { position: fixed !important; top: 40px !important; right: 0 !important; }

.epp-hero { position: relative; padding: 0 24px; display: flex; align-items: center; gap: 22px; overflow: hidden; min-height: 150px; }
/* ESPN-Stil (User-Wunsch 2026-08-10, 3. Nachtrag): Spielerfoto in voller Breite/Hoehe der
   Hero-Leiste, ueberlappt das grosse Wasserzeichen-Logo aber nach rechts versetzt (margin-
   left auf .epp-hero-media), dazu klarer Abstand (gap) zum Text daneben. Kein Rahmen/Box,
   keine Ausblend-Maske mehr - volle Rechteckflaeche wie im ESPN-Referenzscreenshot. */
.epp-hero-media { position: relative; flex: 0 0 auto; margin-left: 84px; height: 150px; }
/* Wasserzeichen-Logo jetzt Kind von .epp-hero-media statt .epp-hero (User-Feedback
   2026-08-10, 5. Nachtrag: in der mobilen Ansicht - wo .epp-hero durch flex-wrap deutlich
   hoeher wird als das Foto - ragte das vorher an der ganzen Hero-Hoehe (280px) orientierte
   Logo unten ueber das Foto hinaus). left:-84px gleicht den margin-left von .epp-hero-media
   aus, damit das Logo weiterhin buendig am linken Hero-Rand beginnt. Bewusst weiterhin volle
   280x280px Boxgroesse (User-Wunsch 2026-08-10, 6. Nachtrag: "nicht verkleinern, wieder auf
   die vorherige Groesse") - NICHT ueber eine kleinere Box + background-size:contain
   herunterskaliert (das haette das Logo insgesamt kleiner gemacht), sondern per clip-path
   unten um genau 130px gekappt (280-150), sodass exakt die obere 150px-Haelfte - in
   Originalgroesse, ungestaucht - sichtbar bleibt und buendig mit der Fotounterkante endet. */
.epp-hero-media::before { content: ""; position: absolute; left: -84px; top: 0; width: 280px; height: 280px; background-image: var(--wm); background-repeat: no-repeat; background-position: left -8px; background-size: contain; opacity: .3; clip-path: inset(0 0 130px 0); -webkit-mask-image: linear-gradient(120deg, #000 35%, transparent 80%); mask-image: linear-gradient(120deg, #000 35%, transparent 80%); pointer-events: none; }
/* Echtes <img> statt background-image-Div (User-Feedback 2026-08-10, 4. Nachtrag: "ist
   zugeschnitten") - object-fit:contain + width:auto zeigt das Foto immer in voller Breite/
   im Originalseitenverhaeltnis, statt es per background-size:cover in eine feste schmale
   Box hineinzuzoomen/zu beschneiden. Feste Hoehe 150px statt 100% (User-Wunsch 2026-08-10,
   5. Nachtrag: "ein ticken kleiner"). */
.epp-photo { position: relative; z-index: 2; height: 150px; width: auto; max-width: none; object-fit: contain; object-position: center top; flex: 0 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
/* Geskewte Streifen-Overlay, nach dem von ESPN gelieferten CSS uebertragen
   (.PlayerHeader__Overlay_Detail -> .epp-hero-seam, skew(-25deg) + Schlagschatten/Weiss-
   Deckkraft identisch, Deckkraft/Farbe an unseren farbigen statt weissen Hero-Hintergrund
   angepasst). Sitzt HINTER dem Foto (z-index 1, Uebergang Logo->Foto). Das Pendant am
   rechten Fotorand (.epp-hero-edge / .PlayerHeader__Overlay--right--opaque) wurde auf
   User-Wunsch 2026-08-10 wieder entfernt. */
.epp-hero-seam { position: absolute; left: 15px; top: 0; width: 74px; height: 100%; background: #fff; opacity: .16; transform: skew(-25deg); box-shadow: -5px 0 10px rgba(0,0,0,.25); border-right: 2px solid rgba(255,255,255,.5); pointer-events: none; z-index: 1; }
.epp-hero-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.epp-title .fn { font-weight: 500; opacity: .85; margin-right: 6px; }
.epp-subtitle-logo { height: 14px; width: auto; vertical-align: middle; border-radius: 2px; }
.epp-hero-badge { margin-left: auto; text-align: right; flex: 0 0 auto; padding-left: 12px; align-self: center; }
.epp-hero-badge .num { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.epp-hero-badge .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; opacity: .65; margin-top: 3px; }

.epp-chip a { color: var(--tc, #2c3e50); text-decoration: underline; }

.epp-award.mvp { background: #f0e8fb; border-color: #c6a3ec; color: #5a2a92; }
.epp-award.mvp .ic { background: #dcc2f5; }
.epp-award.allstar { background: #e7f2ff; border-color: #85b7eb; color: #0c447c; }
.epp-award.allstar .ic { background: #c7e2fb; }

.epp-table tbody tr.high td { background: #fdf8e6; }
.epp-table tbody tr.high td.left { color: #8a6a00; }
/* Bestwerte/Rekorde (best/record/leader/careerhigh): Werte jetzt zentral in css/dyne.css
   ("Record-highlighting tokens, shared, consolidated 2026-08-22") statt hier x3 dupliziert
   (identisch in profile-gm.css/profile-team.css) - Klassennamen unveraendert, nur die
   Deklaration ist umgezogen. Saisonspalte bleibt hier: Stern = All-Star in der Saison, goldener
   Zellhintergrund = MVP/Finals-MVP in der Saison (kein Duplikat, nur hier verwendet). */
.epp-allstar-star { color: #d7a32e; margin-left: 2px; }
.epp-table td.epp-mvp-season { background: #fdf3c7; }
.epp-table td.epp-mvp-season .epp-namelink, .epp-table td.epp-mvp-season { color: #7a5d00; font-weight: 800; }

/* ===================== Transaktionsverlauf (User-Wunsch 2026-08-17) =====================
   Chip-Umschalter in .epp-chiprow schaltet zwischen der bisherigen Statistik-Ansicht und dem
   neuen Verlauf um - .pview/.pview.active ist der eigentliche Sichtbarkeits-Schalter (echtes
   display:none/block per JS-Klasse, siehe <script> in profile.php), .epp-chip-toggle ist
   bewusst visuell ANDERS als die reinen Info-Chips daneben (dunkel/klickbar statt hell/passiv),
   damit klar ist, dass es sich um einen Button handelt. */
.epp-chip-toggle { margin-left: auto; background: #2c3e50; border: 1px solid #2c3e50; border-radius: 6px; padding: 6px 13px; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.epp-chip-toggle:hover { background: #1a2733; border-color: #1a2733; }
.epp-chip-toggle svg { width: 13px; height: 13px; flex-shrink: 0; }

.pview { display: none; }
.pview.active { display: block; }

.tx-count { font-size: 11.5px; color: #8b95a1; font-weight: 400; }

.tx-viewswitch { display: inline-flex; border: 1px solid #dde1e6; border-radius: 8px; overflow: hidden; }
.tx-viewswitch button { font-family: inherit; font-size: 11.5px; font-weight: 600; color: #66707c; background: #fff; border: none; padding: 6px 12px; cursor: pointer; }
.tx-viewswitch button + button { border-left: 1px solid #dde1e6; }
.tx-viewswitch button.active { background: #2c3e50; color: #fff; }

.tx-sub-view { display: none; }
.tx-sub-view.active { display: block; }

/* Pills je Transaktionstyp - Farbfamilien uebernommen aus .epp-award (allstar/stat) bzw. dem
   .trp-teampill/Status-Farbschema, um in der gleichen Palette wie der Rest der Seite zu bleiben. */
.tx-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.tx-pill.sign  { background: #e6f6e9; color: #1d7a30; }
.tx-pill.waive { background: #fbe0df; color: #a41f19; }
.tx-pill.trade { background: #e7f2ff; color: #0c447c; }
.tx-pill.claim { background: #e3f7f5; color: #0f766e; }
.tx-pill.draft { background: #f1e9fb; color: #6b21a8; }
.tx-pill.adj   { background: #fdf3d8; color: #92620a; }
.tx-status-pill { font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 3px 8px; background: #eceef1; color: #3d4952; white-space: nowrap; }
.tx-arrow { color: #94a0ac; font-size: 12px; margin: 0 1px; }

.tx-note { margin: 16px 0 0; padding: 10px 12px; background: #f4f6f8; border: 1px solid #dde1e6; border-radius: 6px; font-size: 11px; color: #66707c; line-height: 1.5; }

.tx-row { position: relative; display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center; padding: 12px 10px; border-radius: 6px; }
.tx-row:hover { background: #eaf1f8; }
.tx-date { font-size: 12px; font-weight: 600; color: #1b2733; line-height: 1.3; }
.tx-date .season { display: block; font-size: 10px; font-weight: 400; color: #94a0ac; }
.tx-body { min-width: 0; }
.tx-line1 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.tx-detail { font-size: 11.5px; color: #66707c; }
.tx-action { font-size: 11px; font-weight: 600; color: #2c3e50; border: 1px solid #ccd3da; background: #fff; border-radius: 7px; padding: 6px 11px; white-space: nowrap; text-decoration: none; }
.tx-action:hover { background: #2c3e50; color: #fff; border-color: #2c3e50; }

/* Timeline-Unteransicht: vertikale Linie + Punkt pro Zeile, Punktfarbe = Pill-Farbe des Typs. */
.tx-timeline { position: relative; margin-top: 8px; padding-left: 26px; }
.tx-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: #dde1e6; }
.tx-dot { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccd3da; }
.tx-dot-sign  { background: #1d7a30; }
.tx-dot-waive { background: #a41f19; }
.tx-dot-trade { background: #0c447c; }
.tx-dot-claim { background: #0f766e; }
.tx-dot-draft { background: #6b21a8; }
.tx-dot-adj   { background: #92620a; }

/* Nach-Saison-Unteransicht: <details>/<summary> statt eigenem JS-Handler (Klick-zu-oeffnen
   kommt kostenlos vom Browser). */
.tx-group { border: 1px solid #dde1e6; border-radius: 7px; margin-bottom: 8px; overflow: hidden; }
.tx-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #f4f6f8; }
.tx-group summary::-webkit-details-marker { display: none; }
.tx-group summary .chev { color: #94a0ac; font-size: 11px; transition: transform .15s ease; flex-shrink: 0; }
.tx-group[open] summary .chev { transform: rotate(90deg); }
.tx-group summary .season-name { font-size: 12.5px; font-weight: 700; color: #1b2733; white-space: nowrap; }
.tx-group summary .season-meta { font-size: 11px; color: #94a0ac; white-space: nowrap; }
.tx-group summary .season-dots { display: flex; gap: 4px; margin-left: auto; }
.tx-group summary .season-dots span { width: 7px; height: 7px; border-radius: 50%; }
.tx-group-body { padding: 4px 6px; }
.tx-group-body .tx-row { grid-template-columns: 78px 1fr auto; padding: 10px 8px; }
.tx-group-body .tx-row + .tx-row { border-top: 1px solid #e2e4e7; }

@media (max-width: 720px) {
  /* .epp-hero's mobile override muss hier bleiben (nicht in dyne.css) - .epp-hero selbst ist
     pro Ansicht unterschiedlich und bleibt deshalb page-eigen; die Override-Regel muss textuell
     NACH der eigenen Basisregel stehen, um sie zu gewinnen (siehe Kommentar in dyne.css bei der
     "Shared epp- profile chrome"-Sektion). */
  .epp-hero { flex-wrap: wrap; padding: 18px 16px; }
  /* OVR-Badge im hellen Kreis halten (User-Feedback 2026-08-10, 6. Nachtrag: "rutscht runter"):
     der Kreis (.epp-hero::after) haengt fest an der oberen rechten Ecke von .epp-hero, aber
     .epp-hero-badge ist normalerweise ein ganz normales Flex-Kind - sobald .epp-hero durch
     flex-wrap (Foto + Text stapeln sich) viel hoeher wird als der Kreis, rutscht das Badge als
     eigene, spaeter umgebrochene Zeile weit nach unten aus dem Kreis heraus. Fix: Badge nur
     auf schmalen Screens aus dem Flex-Fluss nehmen und stattdessen fest auf dieselbe obere
     rechte Ecke referenzieren wie der Kreis selbst (top 50px/right 16px trifft dessen sichtbare
     Mitte, unabhaengig davon wie hoch .epp-hero durch den Umbruch insgesamt wird). */
  .epp-hero-badge { position: absolute; top: 50px; right: 16px; margin-left: 0; padding-left: 0; }
  .epp-chip-toggle { margin-left: 0; width: 100%; justify-content: center; }
  .tx-row { grid-template-columns: 1fr; gap: 6px; }
  .tx-date { display: flex; align-items: baseline; gap: 6px; }
  .tx-date .season { display: inline; }
  .tx-action { justify-self: start; }
  .tx-group summary { flex-wrap: wrap; }
  .tx-group summary .season-dots { margin-left: 0; }
}
