/* ===================== 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. */

.epp-page { max-width: 1360px; margin: 0 auto; background: #fff; }
/* Seitensteuerung (Suche/Tabs/Saison) buendig zur Seitenbreite statt links am
   Hamburger-Icon - identisches Muster wie roster.php (User-Feedback 2026-08-08). */
.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; }
.epp-navlocal { width: 100%; box-sizing: border-box; padding: 0 20px; display: flex; align-items: center; flex-wrap: wrap; }
/* Angeglichen an den site-weiten Saison-Dropdown-Stil von draftpicks.php/halloffame.php
   (.dpp-select/.hof-select, User-Wunsch 2026-08-15 "gleicher Stil wie der Rest") - ersetzt
   das vorherige mainnav-thq-dropdown-Flyout. Identische Regel in allen 3 epp-Dateien
   (profile-player.css/-gm.css/-team.css), wie schon bei .epp-navlocal. */
.epp-select { font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; }
.epp-select:hover { border-color: rgba(255,255,255,.6); }
.epp-select option { color: #1b2733; background: #fff; }
/* Saisontyp/Anzeigemodus-Umschalter (2026-08-08 Nachtrag): echte Segmented-Tabs statt der
   alten Hover-Dropdowns - User-Feedback nach Live-Vergleich mit dem freigegebenen Mockup
   ("wo sind die Umschaltebuttons"). Sitzen als $page_local_html-Inhalt in derselben
   dunklen Leiste wie das Hamburger-Icon (render_main_nav_css() liefert dafuer schon
   .mainnav-list-item als Flex-Kind), inline-flex noetig damit sie sich NICHT wie die
   Dropdown-Divs zuvor block-artig untereinander stapeln. */
.epp-seg { display: inline-flex; background: #1a2733; border-radius: 16px; padding: 2px; gap: 2px; margin: 4px 6px; vertical-align: middle; }
.epp-seg a { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 14px; color: #aab5c0; text-decoration: none; white-space: nowrap; }
.epp-seg a.active { background: #2c3e50; color: #fff; box-shadow: 0 0 0 1px #44525f inset; }
.epp-seg.epp-view-switch { margin-right: 20px; }
.epp-hero { position: relative; padding: 0 24px; display: flex; align-items: center; gap: 22px; overflow: hidden; min-height: 150px; }
.epp-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.epp-hero > * { position: relative; z-index: 1; }
/* 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-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin: 0 0 3px; }
.epp-title { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.15; }
.epp-title .fn { font-weight: 500; opacity: .85; margin-right: 6px; }
.epp-subtitle { font-size: 12.5px; opacity: .82; margin-top: 5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.epp-subtitle .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.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-chiprow { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 24px; background: #f4f6f8; border-bottom: 1px solid #dde1e6; }
.epp-chip { background: #fff; border: 1px solid #dde1e6; border-radius: 6px; padding: 5px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 80px; }
.epp-chip .k { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tc, #2c3e50); }
.epp-chip .v { font-size: 12.5px; font-weight: 600; color: #1b2733; white-space: nowrap; }
.epp-chip a { color: var(--tc, #2c3e50); text-decoration: underline; }

.epp-content { padding: 18px 24px 28px; }
.epp-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 9px; gap: 10px; flex-wrap: wrap; }
.epp-h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #2c3e50; margin: 0; }
.epp-h2 .n { color: #a9b0b8; font-weight: 600; margin-left: 6px; text-transform: none; letter-spacing: 0; }

.epp-awards { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.epp-award { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 5px; border-radius: 16px; background: #fff; border: 1px solid #c8ccd1; font-size: 11.5px; font-weight: 600; color: #5f5e5a; }
.epp-award .ic { width: 20px; height: 20px; border-radius: 50%; background: #f1eee8; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.epp-award b { font-variant-numeric: tabular-nums; }
.epp-award.champ { background: #fff8e6; border-color: #e8c96b; color: #8a6a00; }
.epp-award.champ .ic { background: #f4d67f; }
.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-award.stat { background: #e6f6e9; border-color: #9bd6a6; color: #1d7a30; }
.epp-award.stat .ic { background: #c3ecca; }

.epp-table-scroll { overflow-x: auto; margin-bottom: 6px; border-radius: 6px; border: 1px solid #e2e4e7; }
table.epp-table { width: 100%; border-collapse: collapse; font-size: 11.3px; font-variant-numeric: tabular-nums; }
.epp-table thead th { background: #2c3e50; color: #fff; font-weight: 700; text-align: center; padding: 7px 6px; white-space: nowrap; font-variant-numeric: normal; }
.epp-table thead th.left { text-align: left; padding-left: 12px; }
.epp-table tbody td { padding: 6px; text-align: center; border-bottom: 1px solid #e2e4e7; white-space: nowrap; }
.epp-table tbody td.left { text-align: left; padding-left: 12px; font-weight: 600; }
.epp-table tbody tr:nth-child(odd) { background: #fff; }
.epp-table tbody tr:nth-child(even) { background: #f5f6f8; }
.epp-table tbody tr:hover { background: #eaf1f8; }
.epp-table tbody tr.tot td.left { color: #2c3e50; }
.epp-table tbody tr.high td { background: #fdf8e6; }
.epp-table tbody tr.high td.left { color: #8a6a00; }
.epp-table td.sticky-col, .epp-table th.sticky-col { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 2px 0 4px rgba(0,0,0,.06); }
.epp-table thead th.sticky-col { background: #2c3e50; z-index: 2; }
.epp-namelink { color: #2c3e50; font-weight: 600; text-decoration: underline; }
.epp-muted { color: #c3c9cf; }
/* Bestwerte/Rekorde in Saison- und Einzelspiel-Tabelle: eigener Bestwert = fett,
   DYNE-Allzeitrekord = goldener Zellhintergrund (schliesst "fett" nicht aus - ein
   Allzeitrekord ist per Definition auch der eigene Bestwert). Saisonspalte: Stern =
   All-Star in der Saison, goldener Zellhintergrund = MVP/Finals-MVP in der Saison. */
.epp-table td.epp-best { font-weight: 800; }
.epp-table td.epp-record { background: #fdf3c7; font-weight: 800; color: #7a5d00; }
.epp-table tbody tr:nth-child(even) td.epp-record { background: #fbe9a8; }
.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; }
/* Dritte Hervorhebungsstufe: "Season Record" (Liga-fuehrend diese Saison) - blauer
   Unterstrich, kollidiert visuell nicht mit fett/Gold und kann mit beidem kombiniert
   auftreten. */
.epp-table td.epp-leader { text-decoration: underline; text-decoration-color: #2c7be5; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Vierte Stufe, nur Game Log: "Career High" - eigener Bestwert UEBER ALLE SAISONS. Blauer
   Farbverlauf + dunkles Blau als Textfarbe (User-Wahl 2026-08-14, zunaechst Silber probiert,
   aber "hebt sich zu wenig hervor" - jetzt kraeftigeres, gesaettigteres Blau statt des
   dezenten Metallic-Grau. Bewusst als Zellhintergrund statt Unterstrich wie bei Season Record
   ($epp-leader), damit beide trotz verwandter Farbfamilie ueber unterschiedliche visuelle
   Kanaele (Flaeche vs. Linie) klar unterscheidbar bleiben. Die zweite Regel darunter stellt
   sicher, dass ein DYNE Record IMMER Career High schlaegt (ein Allzeitrekord ist per
   Definition auch ein Career High) - hoehere Spezifitaet (zwei Klassen kombiniert) gewinnt
   garantiert gegen die einfache .epp-careerhigh-Regel, unabhaengig von der
   Deklarationsreihenfolge im Stylesheet, sodass nie eine Vermischung aus Blau und Gold
   entsteht. */
.epp-table td.epp-careerhigh { background: linear-gradient(180deg, #dbe9fb, #a8c8ee); color: #12447e; font-weight: 700; }
.epp-table td.epp-careerhigh.epp-record { background: #fdf3c7; color: #7a5d00; font-weight: 800; }
.epp-table tbody tr:nth-child(even) td.epp-careerhigh.epp-record { background: #fbe9a8; }
/* Zentrierte Box statt linksbuendiger Liste mit gestrichelter oberer Trennlinie (User-Wunsch
   2026-08-14: "legende zentriert und in box gepackt", analog zu draftpicks.php/boxscore.php,
   siehe .dpp-legend in dyne.css bzw. .bsc-legend in boxscore.css). */
.epp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 12px 16px; background: #f4f6f8; border: 1px solid #dde1e6; border-radius: 6px; font-size: 11px; color: #66707c; }
.epp-legend .sw { display: inline-block; padding: 1px 7px; border-radius: 9px; font-weight: 800; font-size: 10.5px; }
.epp-legend .sw.best { background: #eef1f4; color: #1b2733; }
.epp-legend .sw.record { background: #fdf3c7; color: #7a5d00; }
.epp-legend .sw.leader { background: #eef1f4; color: #1b2733; text-decoration: underline; text-decoration-color: #2c7be5; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.epp-legend .sw.careerhigh { background: linear-gradient(180deg, #dbe9fb, #a8c8ee); color: #12447e; }
.epp-legend .star { color: #d7a32e; }
.epp-teampill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9px; letter-spacing: .02em; }
.epp-note { font-size: 11px; color: #8b95a1; padding: 8px 2px 2px; }

@media (max-width: 720px) {
  .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-chiprow { padding: 12px 16px; }
  .epp-content { padding: 14px 16px 22px; }
  /* Kartenstil (User-Feedback 2026-08-09: "sieht kacke aus") durch normale, horizontal
     scrollbare Tabelle ersetzt - bei 30+ Spalten wurde aus jeder Zeile eine unuebersichtliche
     Wand aus "Label: Wert"-Paaren. min-width erzwingt hier (nur unterhalb 720px) den
     Scroll-Modus des schon vorhandenen .epp-table-scroll-Containers; auf Desktop bleibt die
     Tabelle unveraendert (dort reicht die Breite ohne Scrollen). Die Schatten-Scrollleiste am
     unteren Viewport-Rand (siehe Script weiter unten) macht das Scrollen erreichbar, ohne
     erst ans Tabellenende scrollen zu muessen. */
  table.epp-table { min-width: 2000px; }
}
/* Schatten-Scrollleiste (gleiches Muster wie statshub.php, User-Wunsch 2026-08-09): bleibt am
   unteren Viewport-Rand sichtbar, sobald die gerade sichtbare Tabelle breiter als der
   Container ist, und ist bidirektional synchronisiert (siehe Script weiter unten). */
.epp-scroll-shadow { position: fixed; bottom: 0; height: 14px; overflow-x: auto; overflow-y: hidden; background: #eef1f4; border-top: 1px solid #ccd3da; z-index: 40; display: none; }
.epp-scroll-shadow.visible { display: block; }
.epp-scroll-shadow-inner { height: 1px; }
