/* ── stats.css — Page Statistiques HexLobby ───────────────────────────── */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.st-hero {
  padding      : 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
}
.st-hero-title {
  font-size    : 2.2rem;
  font-weight  : 900;
  color        : var(--text);
  margin-bottom: .6rem;
}
.st-hero-sub {
  color    : var(--text-muted);
  font-size: 1rem;
}

/* ── Fond alterné ────────────────────────────────────────────────────────── */
.st-section-dark {
  background: rgba(255,255,255,.018);
}

/* ── KPI grid ────────────────────────────────────────────────────────────── */
.st-kpi-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap                  : 1rem;
}

.st-kpi {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .75rem;
  padding      : 1.35rem 1.25rem;
  text-align   : center;
  transition   : border-color .2s, transform .15s;
}
.st-kpi:hover {
  border-color: rgba(129,140,248,.3);
  transform   : translateY(-2px);
}

.st-kpi-icon  { font-size: 1.6rem; margin-bottom: .5rem; }
.st-kpi-value {
  font-size  : 2rem;
  font-weight: 900;
  color      : var(--text);
  line-height: 1.1;
}
.st-kpi-unit  { font-size: 1rem; font-weight: 500; color: var(--text-muted); margin-left: .15rem; }
.st-kpi-label { font-size: .78rem; color: var(--text-muted); margin-top: .35rem; }

/* ── Deux colonnes ───────────────────────────────────────────────────────── */
.st-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap    : 1.25rem;
}
@media (max-width: 800px) { .st-two-col { grid-template-columns: 1fr; } }

/* ── Card générique ──────────────────────────────────────────────────────── */
.st-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: .85rem;
  padding      : 1.5rem;
}

.st-card-head {
  display        : flex;
  align-items    : baseline;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : .4rem;
  margin-bottom  : 1.25rem;
}
.st-card-title {
  font-size  : 1.05rem;
  font-weight: 800;
  color      : var(--text);
}
.st-card-sub {
  font-size: .78rem;
  color    : var(--text-muted);
}

/* ── Titre section ───────────────────────────────────────────────────────── */
.st-section-title {
  font-size    : 1.6rem;
  font-weight  : 800;
  color        : var(--text);
  margin-bottom: 1.25rem;
}

/* ── Distribution MMR ────────────────────────────────────────────────────── */
.st-mmr-dist { display: flex; flex-direction: column; gap: .55rem; }

.st-mmr-row {
  display    : grid;
  grid-template-columns: 90px 1fr 44px;
  align-items: center;
  gap        : .6rem;
}
.st-mmr-label {
  font-size  : .8rem;
  font-weight: 700;
  text-align : right;
}
.st-mmr-track {
  position     : relative;
  height       : 10px;
  border-radius: 999px;
  background   : rgba(255,255,255,.06);
  overflow     : hidden;
}
.st-mmr-fill-solid {
  position     : absolute;
  left         : 0; top: 0; bottom: 0;
  border-radius: 999px;
  transition   : width .6s ease;
  opacity      : .75;
}
.st-mmr-count {
  font-size : .78rem;
  color     : var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Graphe activité ─────────────────────────────────────────────────────── */
.st-chart-wrap  { position: relative; height: 200px; }
.st-chart-note  { font-size: .78rem; color: var(--text-muted); margin-top: .75rem; text-align: right; }

/* ── Distribution placements (barres verticales) ─────────────────────────── */
.st-placement-dist {
  display    : flex;
  align-items: flex-end;
  gap        : .6rem;
  height     : 180px;
  padding-top: 1rem;
}

.st-pd-col {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  height        : 100%;
}

.st-pd-bar-wrap {
  flex         : 1;
  width        : 100%;
  display      : flex;
  align-items  : flex-end;
  justify-content: center;
}

.st-pd-bar {
  width        : 75%;
  border-radius: 4px 4px 0 0;
  min-height   : 3px;
  transition   : height .5s ease, opacity .2s;
}
.st-pd-bar:hover { opacity: .8; }
.st-pd-bar-top { background: linear-gradient(180deg, #34d399, #059669); }
.st-pd-bar-bot { background: linear-gradient(180deg, #475569, #334155); }

.st-pd-label {
  font-size  : .78rem;
  font-weight: 700;
  color      : var(--text-muted);
  margin-top : .3rem;
}
.st-pd-pct {
  font-size: .7rem;
  color    : var(--text-muted);
  opacity  : .7;
}

/* ── Top performers ──────────────────────────────────────────────────────── */
.st-perf-tabs {
  display    : flex;
  gap        : .5rem;
  margin-bottom: 1rem;
  flex-wrap  : wrap;
}
.st-ptab {
  padding      : .45rem 1rem;
  border-radius: .45rem;
  border       : 1px solid var(--border);
  background   : transparent;
  color        : var(--text-muted);
  font-size    : .85rem;
  font-weight  : 600;
  cursor       : pointer;
  transition   : background .15s, color .15s, border-color .15s;
}
.st-ptab:hover {
  background  : rgba(255,255,255,.05);
  color       : var(--text);
}
.st-ptab-active {
  background  : rgba(129,140,248,.12);
  border-color: rgba(129,140,248,.35);
  color       : var(--accent);
}

.st-ptab-panel { display: none; }
.st-ptab-panel.st-ptab-active { display: block; }

.st-perf-list {
  display       : flex;
  flex-direction: column;
  gap           : .55rem;
}

.st-perf-row {
  display        : flex;
  align-items    : center;
  gap            : .85rem;
  padding        : .85rem 1rem;
  background     : var(--bg-card);
  border         : 1px solid var(--border);
  border-radius  : .65rem;
  text-decoration: none;
  transition     : border-color .2s, transform .15s;
}
.st-perf-row:hover {
  border-color: rgba(255,255,255,.2);
  transform   : translateX(3px);
}

.st-perf-rank {
  font-size  : 1rem;
  font-weight: 900;
  width      : 28px;
  text-align : center;
  flex-shrink: 0;
  color      : var(--text-muted);
}
.st-perf-rank-1 { color: #f4d03f; }
.st-perf-rank-2 { color: #e2e8f0; }
.st-perf-rank-3 { color: #cd7f32; }

.st-perf-avatar {
  width        : 38px;
  height       : 38px;
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}

.st-perf-info {
  display       : flex;
  flex-direction: column;
  gap           : .2rem;
  flex          : 1;
  min-width     : 0;
}
.st-perf-name {
  font-size    : .9rem;
  font-weight  : 700;
  color        : var(--text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}
.st-perf-detail {
  font-size: .75rem;
  color    : var(--text-muted);
}

.st-perf-stat {
  display       : flex;
  flex-direction: column;
  align-items   : flex-end;
  flex-shrink   : 0;
}
.st-perf-val {
  font-size  : 1.25rem;
  font-weight: 900;
  color      : var(--text);
  line-height: 1;
}
.st-perf-val-green { color: #34d399; }
.st-perf-lbl {
  font-size: .7rem;
  color    : var(--text-muted);
  margin-top: .15rem;
}

/* ── Vide ────────────────────────────────────────────────────────────────── */
.st-empty {
  text-align: center;
  color     : var(--text-muted);
  font-size : .9rem;
  padding   : 2rem 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .st-kpi-grid     { grid-template-columns: repeat(2, 1fr); }
  .st-kpi-value    { font-size: 1.6rem; }
  .st-hero-title   { font-size: 1.6rem; }
  .st-mmr-row      { grid-template-columns: 70px 1fr 36px; }
  .st-perf-row     { gap: .55rem; padding: .7rem .75rem; }
  .st-perf-avatar  { width: 32px; height: 32px; }
  .st-placement-dist { height: 140px; gap: .35rem; }
}