:root {
  --navy:   #04446c;
  --gold:   #eba044;
  --bg:     #f7f8fa;
  --bg2:    #ffffff;
  --border: #e4e6eb;
  --text:   #1a2233;
  --muted:  #8a94a8;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Libre Franklin', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  min-height: 100vh;
}

/* ── Search bar ── */
.search-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 100;
}
.search-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.search-wrap { position: relative; max-width: 480px; }
.search-row  { display: flex; gap: 10px; }
.search-input {
  flex: 1;
  padding: 9px 14px 9px 36px;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--navy); background: #fff; }
.search-icon {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted); font-size: 15px; pointer-events: none;
}
.search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  max-height: 260px; overflow-y: auto; z-index: 200; display: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.search-dropdown.open { display: block; }
.search-item {
  padding: 9px 14px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border); transition: background 0.12s;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--bg); }
.si-name { font-weight: 600; font-size: 13px; color: var(--navy); }
.si-meta { font-size: 12px; color: var(--muted); }

/* ── Page wrapper ── */
.page-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ── Intro card ── */
.intro-card {
  border-left: 4px solid var(--gold);
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.intro-title {
  font-size: 12px; font-weight: 700; color: var(--navy);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.8px;
}
.intro-text { font-size: 12px; color: var(--muted); line-height: 1.6; }
.expander { background: #e8f2f8; border: 1px solid #c2dcea; margin-top: 10px; border-radius: 3px; }
.exp-toggle {
  width: 100%; background: none; border: none; padding: 9px 14px; text-align: left;
  font-family: 'Libre Franklin', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.exp-body { padding: 0 14px; max-height: 0; overflow: hidden; transition: max-height .3s ease; font-size: 11px; color: var(--muted); line-height: 1.7; }
.exp-body.open { max-height: 400px; padding: 0 14px 12px; }
.exp-body p { margin-bottom: 4px; }

/* ── Empty state ── */
.empty { text-align: center; padding: 60px 24px; color: var(--muted); }
.empty-icon { font-size: 36px; margin-bottom: 14px; opacity: 0.25; }
.empty h2 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }

/* ── Warning ── */
.warning {
  background: #fffbf0; border: 1px solid #f0d080; border-radius: 4px;
  padding: 10px 14px; font-size: 12px; color: #8a6010; margin-bottom: 16px;
}

/* ════════════════════════════════════════
   MAIN LAYOUT: card left + content right
════════════════════════════════════════ */
.profile-layout {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── PLAYER CARD (vertical sidebar) ── */
.player-card {
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 80px;
  border-top: 4px solid var(--navy);
}

/* ── top: navy section ── */
.pc-photo-wrap {
  background: var(--navy);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pc-photo {
  width: 88px; height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.pc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pc-photo-placeholder { font-size: 32px; opacity: 0.2; padding-bottom: 2px; }

.pc-name {
  font-size: 16px; font-weight: 800;
  color: #fff; text-align: center; line-height: 1.2;
  margin-bottom: 4px;
}
.pc-sub {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.9px;
  text-align: center;
}

/* ── middle: white info rows ── */
.pc-info {
  background: var(--bg2);
  padding: 10px 14px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-top: none;
}
.pc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.pc-row:last-child { border-bottom: none; }
.pc-label {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.pc-value {
  font-size: 12px; font-weight: 700;
  color: var(--text); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── bottom: stats ── */
.pc-stats {
  background: var(--bg);
  padding: 12px 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
}
.pc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pc-stat-val {
  font-size: 22px; font-weight: 800;
  color: var(--navy); line-height: 1;
}
.pc-stat-lbl {
  font-size: 9px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px;
}

/* ── CONTENT AREA (right) ── */
.content-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* verhindert dass Grid-Zelle sich über 1fr ausdehnt */
}

/* ── Stats table: scroll auf desktop ── */
.stats-table-wrap {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

/* ── Percentile boxes grid (2 columns) ── */
.pct-boxes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Colored box headers per category ── */
.pct-box .card-head { color: #fff; border-bottom: none; letter-spacing: 1px; }
.pct-box .card-head span { color: rgba(255,255,255,0.7); }
.pct-box--scouting .card-head   { background: #5a3d8c; }
.pct-box--overall .card-head    { background: #04446c; }

/* ── Stat label tooltips (rendered via JS fixed-position div, not ::after) ── */
.stat-tip {
  cursor: help;
  border-bottom: 1px dashed rgba(255,255,255,0.5);
  display: inline-block;
}
#gh-tooltip {
  position: fixed;
  z-index: 9999;
  background: #111827;
  color: #e5e9f4;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 240px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: normal;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Measurements box ── */
.meas-box .card-head { background: #2d5a4a; }
.meas-table { width:100%; border-collapse:collapse; font-size:13px; }
.meas-table td { padding: 5px 2px; }
.meas-table td:first-child { color: var(--muted); width:58%; }
.meas-table td:last-child  { font-weight:600; text-align:right; }
.meas-source { font-size:10px; opacity:0.7; margin-left:6px; font-weight:normal; text-transform:none; letter-spacing:0; }
.ws-diff { font-size:11px; margin-left:5px; font-weight:normal; }
.ws-diff.pos { color:#7dd4a8; }
.ws-diff.neg { color:#f08080; }
.style-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.style-badge.st-strong{background:#eba044;color:#fff}
.style-badge.st-mid{background:#04446c;color:#fff}
.style-badge.st-lean{background:transparent;color:#7b828c;border:1px solid #cdd3da;font-weight:600}
.style-none{color:#9aa0a8;font-style:italic}

.badge-entered  { display:inline-block;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;background:#eba044;color:#fff;letter-spacing:.3px; }
.badge-withdrawn{ display:inline-block;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;background:#d94f4f;color:#fff;letter-spacing:.3px; }
.pct-box--shooting .card-head   { background: #c47c18; }
.pct-box--playmaking .card-head { background: #2a7f8c; }
.pct-box--rebounding .card-head { background: #3a7c4e; }
.pct-box--defense .card-head    { background: #7c3a3a; }
.pct-box .card-body { padding: 6px 14px 10px; }

/* ── Similar Players ── */
.sim-section { width: 100%; margin-top: 12px; }
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sim-block .card-head { background: #1e3a52; color: #fff; border-bottom: none; }
.sim-block .card-head span { color: rgba(255,255,255,.6); }
.sim-nba .card-head { background: #2d5a4a; }
.sim-list { padding: 6px 0; }
.sim-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--border); transition: background .12s; }
.sim-row:last-child { border-bottom: none; }
.sim-row:hover { background: #f0f5f8; }
.sim-rank { font-size: 11px; font-weight: 800; color: var(--navy); min-width: 18px; }
.sim-bar-wrap { flex: 1; min-width: 0; }
.sim-name { font-size: 12px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sim-meta { font-size: 10px; color: #6b8a9a; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-dims { font-size: 9px; color: #8a9aaa; margin-top: 1px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-score { font-size: 12px; font-weight: 700; color: var(--navy); min-width: 38px; text-align: right; flex-shrink: 0; }
.sim-dcs { font-size: 10px; color: #6b8a9a; min-width: 50px; text-align: right; }
.sim-outcome { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.so-star     { background: #fdf3e7; color: #c67400; }
.so-rotation { background: #e8f2f8; color: #04446c; }
.so-fringe   { background: #f0f0f0; color: #6b6b6b; }
.sim-pick    { font-size: 10px; color: #6b8a9a; min-width: 44px; text-align: right; }

/* ── Cards ── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.card-head {
  border-radius: 8px 8px 0 0;
}
.card-head {
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted);
}
.card-head span { color: var(--navy); margin-right: 4px; }
.card-body { padding: 20px; }

/* ── Radar ── */
.radar-card .card-body { padding: 16px 12px 12px; }
#radarCanvas { display: block; margin: 0 auto; max-width: 100%; }
.radar-ctx {
  text-align: center; margin-top: 8px;
  font-size: 11px; color: var(--muted); font-style: italic;
}

/* ── Percentile rows ── */
.pct-rows { display: flex; flex-direction: column; }
.pct-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.pct-row:last-child { border-bottom: none; }
.pct-lbl {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  width: 52px; flex-shrink: 0;
}
.pct-raw {
  font-size: 13px; font-weight: 600; color: var(--text);
  width: 42px; flex-shrink: 0; text-align: right;
}
.bar-wrap { flex: 1; max-width: 180px; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--gold); transition: width 0.7s cubic-bezier(0.4,0,0.2,1); }
.pct-rank { font-size: 13px; font-weight: 700; width: 30px; text-align: right; flex-shrink: 0; color: var(--navy); }
.pct-rank.no-data { color: var(--border); }
.pct-delta { font-size: 12px; font-weight: 700; width: 46px; text-align: right; flex-shrink: 0; letter-spacing: -0.2px; cursor: help; }
.pct-delta.no-data { color: var(--border); cursor: default; }
.bar-wrap.avg { position: relative; background: #eef2f6; }
.avg-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.avg-center { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: #b7c2cf; }
.pct-mode-toggle { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin: 0 0 10px; }
.pct-mode-toggle .pmt-hint { font-size: 11px; color: var(--muted); margin-right: 2px; }
.pct-mode-toggle .pmode { font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 20px; border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; font-family: inherit; }
.pct-mode-toggle .pmode.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Stats Table ── */
.stats-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: 0 16px;
}
.stats-tab {
  padding: 10px 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 0.15s;
  margin-bottom: -1px;
}
.stats-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.stats-tab:hover:not(.active) { color: var(--navy); }

/* ── Karriere-Historie aufklappen (06.09.2026) ──────────────────────────
   Die aelteren Saisons stehen IM HTML und werden hier nur verdeckt — nicht
   nachgeladen. Google sieht sie, die Seite macht weiterhin 0 fetch(). */
.stats-table tbody tr.career-old { display: none; }
.card.show-history .stats-table tbody tr.career-old { display: table-row; }
.history-toggle {
  margin-left: auto; align-self: center;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 10px; margin: 6px 0;
  font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--navy); cursor: pointer; white-space: nowrap;
}
.history-toggle:hover { border-color: var(--gold); color: var(--gold); }
.history-toggle .ht-close { display: none; }
.card.show-history .history-toggle .ht-open { display: none; }
.card.show-history .history-toggle .ht-close { display: inline; }
.stats-table-wrap { overflow-x: scroll; }
.stats-table-wrap::-webkit-scrollbar {
  height: 8px;
  background: #e8eef2;
}
.stats-table-wrap::-webkit-scrollbar-thumb {
  background: var(--navy);
  border-radius: 4px;
}
.stats-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}
.stats-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px; white-space: nowrap;
}
.stats-table thead th {
  padding: 6px 8px; text-align: right;
  font-size: 9px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--muted);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.stats-table thead th.left { text-align: left; }
.stats-table tbody td {
  padding: 7px 8px; text-align: right;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.stats-table tbody td.left { text-align: left; font-weight: 600; }
.stats-table tbody td.season-col { color: var(--navy); font-weight: 700; }
.stats-table tbody tr.career-row td { font-weight: 700; background: var(--bg); border-top: 2px solid var(--border); }
.stats-table tbody tr:not(.career-row):hover td { background: var(--blue-lt); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Methodology ── */
.method-section { margin-top: 4px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.method-toggle {
  width: 100%; background: var(--bg); border: none; border-bottom: 1px solid var(--border);
  padding: 10px 16px; display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; font-family: 'Libre Franklin', sans-serif;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted);
}
.method-toggle:hover { background: var(--border); }
.method-toggle span { color: var(--navy); margin-right: 4px; }
.method-toggle .chevron { transition: transform 0.2s; font-size: 10px; }
.method-toggle.open .chevron { transform: rotate(180deg); }
.method-body { display: none; padding: 16px 18px; background: var(--bg2); font-size: 13px; line-height: 1.7; color: var(--text); }
.method-body.open { display: block; }
.method-body p { margin-bottom: 8px; }
.method-body p:last-child { margin-bottom: 0; }
.method-body strong { color: var(--navy); }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

/* Tablet */
@media (max-width: 800px) {
  .profile-layout {
    grid-template-columns: 220px 1fr;
    gap: 14px;
  }
  .pc-name { font-size: 15px; }
  .pc-stat-val { font-size: 20px; }
}

/* Mobile — alles untereinander */
@media (max-width: 600px) {
  .search-section { padding: 12px 14px; }
  .page-wrapper { padding: 12px 12px 48px; }

  /* Similar Prospects: Dims ausblenden, Tier·DCS2 voll zeigen (umbrechen statt kürzen) */
  .sim-dims { display: none; }
  .sim-meta { white-space: normal; overflow: visible; text-overflow: clip; }

  .profile-layout {
    grid-template-columns: 1fr;
  }

  .player-card {
    position: static;
  }

  /* Mobile card: foto + name nebeneinander */
  .pc-photo-wrap {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-align: left;
  }
  .pc-photo {
    width: 72px; height: 72px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .pc-name { font-size: 17px; text-align: left; }
  .pc-sub  { text-align: left; }

  /* Info: 2 Spalten */
  .pc-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 12px 16px;
  }
  .pc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .pc-value { text-align: left; font-size: 13px; }

  /* Stats bleiben in einer Reihe */
  .pc-stats { padding: 12px 16px; }
  .pc-stat-val { font-size: 22px; }

  /* Verhindere horizontales Scrollen auf Seitenebene */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Cards: weniger Innenabstand */
  .card-body { padding: 12px; }
  .card-head { padding: 8px 12px; }

  /* Stats-Tabelle: scrollt intern, sprengt nicht die Seite */
  .stats-table-wrap {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Percentile-Zeilen: etwas schmaler */
  .pct-lbl { width: 44px; font-size: 10px; }
  .pct-raw { width: 36px; font-size: 12px; }
  .pct-rank { width: 26px; font-size: 12px; }
  .pct-delta { width: 40px; font-size: 11px; }

  #radarCanvas { max-width: 100%; height: auto !important; }

  /* Suche: volle Breite */
  .search-wrap { max-width: 100%; }

  /* Methodik-Box */
  .method-body { font-size: 12px; padding: 12px 14px; }

  /* Pct-Boxes: single column auf mobile */
  .pct-boxes-grid {
    grid-template-columns: 1fr;
  }
}

/* Statischer Kopf — steht ohne JavaScript im HTML, damit Suchmaschinen den
   Spieler sicher erfassen. Wird ausgeblendet, sobald das Profil gerendert ist. */
.gh-static-profile{background:var(--white);border-bottom:1px solid var(--border);padding:26px 0 22px}
.gh-static-profile h1{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.6px;line-height:1.15}
.gsp-sub{font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-top:5px}
.gsp-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0}
.gsp-stats div{display:flex;flex-direction:column}
.gsp-stats dt{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.gsp-stats dd{font-size:19px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.gsp-note{font-size:12.5px;color:var(--muted);margin-top:14px}
@media(min-width:760px){.gh-static-profile h1{font-size:36px}}

/* Link-Netz am Seitenfuss — der eigentliche Zweck der Index-Ebene: statische
   Kanten zwischen den Profilen, damit ein Crawler ohne JavaScript weiterkommt. */
.gh-netz{border-top:1px solid var(--border);background:#fafbfc;padding:26px 0 30px}
.gh-netz h2{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.2px;margin:0 0 12px}
.ghn-list{list-style:none;margin:0;padding:0;display:grid;gap:6px 20px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.ghn-list a{font-size:13px;color:var(--navy);text-decoration:none}
.ghn-list a:hover{text-decoration:underline}
.ghn-up{margin:16px 0 0;font-size:13px;font-weight:600}
.ghn-up a{color:var(--navy)}