/* ===================== 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, Season/Career stat
   highlighting incl. All-Star star + MVP-season row). 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.

   .epp-award.allstar moved to css/dyne.css 2026-09-10 (was mistakenly still here even though
   "champ"/"stat" were already globalized 2026-08-22) - the Awards-Tab now shows a GM's OWN
   players' All-Star badges on the GM view too (profile-gm.css never had this variant, so it
   silently rendered uncolored there until this move). .mvp existed briefly alongside it but was
   retired the same day - Finals MVP moved into .champ, All-Star MVP into .allstar, and the
   remaining season-end individual awards (MVP, DPOTY, Sixth Man, MIP, ROTY) became the new
   .season variant (silver metallic) instead.

   The Transaktionsverlauf tx-* block + .epp-chip-toggle/.pview (originally player-view-only, this
   file) moved OUT to css/dyne.css on 2026-09-02, when the GM/Team views grew their own
   Transaktionsverlauf toggle - see dyne.css's "Transaktionsverlauf chrome (shared)" section. */

.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-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; }

@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; }
}

/* ===================== Ratings-Tab ("epp-rt-" prefix, added 2026-09-06) =====================
   Neuer dritter Tab (Stats/Ratings/Transactions) im Spielerprofil, Layout angelehnt an
   2kratings.com (User-Wunsch, siehe Mock): Attribute nach 2K-eigenen Kategorien gruppiert
   (Outside Scoring/Inside Scoring/Playmaking/Defense/Rebounding/Athleticism/Intangibles),
   Badges nur die tatsaechlich vorhandenen, Hot-Zone-Court als eingefaerbte SVG-Flaechen. Die
   Kategorie-GESAMTZAHL, die 2K selbst zeigt ("81 Outside Scoring"), fehlt bewusst - das ist eine
   intern gewichtete Mischung der Einzelwerte, deren Formel wir nicht kennen (ebenso Potential/
   Total Attributes, fuer die player_ratings gar keine Spalten hat). */
.epp-rt-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }

/* Attribute/Badges/Hot-Zones Spalten-Umschalter fuer die "Alle Saisons"-Tabelle (User-Wunsch
   2026-09-09) - byte-identische Kopie von freeagents.css's .fap-group-chip/plp-group-chip
   (bewusst dupliziert, gleiches Muster wie die restlichen 2 Kopien dieser Komponente). */
.epp-rt-group-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.epp-rt-group-chip { border: 1px solid #ccd3da; background: #fff; color: #66707c; border-radius: 9px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; letter-spacing: .02em; }
.epp-rt-group-chip.active { background: #2c3e50; border-color: #2c3e50; color: #fff; }

/* 3 unabhaengige Spalten statt eines CSS-Grids mit gemeinsamen Zeilenhoehen (User-Wunsch: die
   Boxen muessen nicht alle gleich hoch sein) - jede Spalte stapelt ihre Karten nur nach eigenem
   Inhalt. Outside Scoring+Athleticism (Spalte 1) und Inside Scoring+Playmaking (Spalte 2) sind
   von der Spaltenaufteilung her insgesamt aehnlich hoch (6+6 vs. 8+5 Zeilen); Intangibles haengt
   an Spalte 3 unter Rebounding (User-Wunsch), nicht mehr an Spalte 1 wie im 2K-eigenen Layout. */
/* Grid statt Flex fuer die 3 Spalten-Wrapper (User-Wunsch: auf Mobile/Tablet muessen die Karten
   alle gleich breit sein) - mit Flex + flex-grow waechst eine einzeln umgebrochene letzte Spalte
   sonst auf die volle verbleibende Zeilenbreite statt gleich breit mit den Spalten darueber zu
   bleiben. Grid-Spalten sind immer exakt 1fr, unabhaengig davon wie viele Zellen die letzte Zeile
   fuellen. Jede Spalte bleibt trotzdem in sich ein Flex-Stack (unveraendert), nur der AEUSSERE
   Container ist jetzt Grid - Hoehe pro Spalte bleibt dadurch weiterhin unabhaengig vom Inhalt der
   Nachbarspalten (align-items:start statt des Grid-Defaults "stretch"). */
.epp-rt-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; align-items: start; }
.epp-rt-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.epp-rt-card { border: 1px solid #dde1e6; border-radius: 8px; overflow: hidden; background: #fff; }
.epp-rt-card-head { background: #f4f6f8; border-bottom: 1px solid #dde1e6; padding: 9px 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #2c3e50; }
.epp-rt-card-body { padding: 6px 14px; }
.epp-rt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #e2e4e7; }
.epp-rt-row:last-child { border-bottom: none; }
.epp-rt-card.solo .epp-rt-card-body { padding: 14px; display: flex; align-items: center; justify-content: space-between; }

/* Rating-Farbtier: 3 Stufen statt Rohzahl, Grenzen bei 60/80 (uebliche 2K-Farbskala). Reuse der
   bereits an anderer Stelle etablierten gruen/gelb/rot-Tokens (Award-Badge "stat", tx-pill "adj",
   tx-pill "waive") statt neuer Farbwerte. */
.epp-rt-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; border-radius: 6px; padding: 2px 9px; min-width: 28px; text-align: center; }
.epp-rt-num.good { background: #e6f6e9; color: #1d7a30; }
.epp-rt-num.mid { background: #fdf3d8; color: #92620a; }
.epp-rt-num.bad { background: #fbe0df; color: #a41f19; }

/* Badge-Sechseck-Chip - identische Optik zu playerratings.css' .badge-icon (bewusst hier separat
   gehalten statt geteilt, da profile.php dessen Stylesheet nicht laedt). */
.epp-rt-badge-chip { width: 18px; height: 18px; flex-shrink: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: #dde1e6; }
.epp-rt-badge-chip.t1 { background: #a9713f; }
.epp-rt-badge-chip.t2 { background: #8b939c; }
.epp-rt-badge-chip.t3 { background: #cf9d1f; }
.epp-rt-badge-chip.t4 { background: #8e4bc4; }

.epp-rt-badge-cat { margin-bottom: 16px; }
.epp-rt-badge-cat-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #66707c; margin: 0 0 8px; }
.epp-rt-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.epp-rt-badge-card { display: flex; align-items: center; gap: 10px; border: 1px solid #dde1e6; border-radius: 8px; padding: 10px 12px; background: #fff; }
.epp-rt-badge-name { font-size: 12px; font-weight: 600; color: #1b2733; line-height: 1.3; }
.epp-rt-badge-tier { display: block; font-size: 10px; color: #66707c; font-weight: 500; }

.epp-rt-badge-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 11px; color: #66707c; margin: 12px 0 24px; }
.epp-rt-badge-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* Hot-Zone-Court: reales 2kratings.com-SVG (vom User geliefert) uebernommen - nur die
   Fuellfarbe pro Zone kommt aus unseren eigenen Tendencies_HOTZONE*-Werten statt den fixen
   Beispielfarben des Original-Exports. */
.epp-rt-hz-wrap { display: flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.epp-rt-court { flex: 0 0 auto; width: 100%; max-width: 640px; height: auto; }
.epp-rt-hz-floor { fill: #eef1f4; }
.epp-rt-hz-ring { fill: #2c3e50; }
.epp-rt-hz-zone { stroke: #fff; stroke-width: 6; }
.epp-rt-hz-zone.cold { fill: #3b82c4; }
.epp-rt-hz-zone.neutral { fill: #8b939c; }
.epp-rt-hz-zone.hot { fill: #c0392b; }
.epp-rt-hz-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #1b2733; }
.epp-rt-hz-legend span { display: inline-flex; align-items: center; gap: 7px; }
.epp-rt-hz-legend .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.epp-rt-hz-legend .dot.cold { background: #3b82c4; }
.epp-rt-hz-legend .dot.neutral { background: #8b939c; }
.epp-rt-hz-legend .dot.hot { background: #c0392b; }

@media (max-width: 900px) {
  .epp-rt-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .epp-rt-columns { grid-template-columns: 1fr; }
}
