/* ═══════════════════════════════════════════════════════════════
   Page « Joueurs » Rocket League — layout des 2 colonnes d'équipe.
   Réutilise base.css + rocketleague-live.css (topbar, score bar,
   cartes .rl-player-card, .rl-stats-grid, pastille de statut).
   Ici : uniquement la grille des équipes + en-têtes + état vide.
   ═══════════════════════════════════════════════════════════════ */

/* Page défilante (topbar + score bar restent fixes par-dessus) */
html, body { overflow-y: auto !important; height: auto !important; }

#rlp-main { min-height: 100vh; }

/* ── Grille des 2 équipes ── */
#rlp-teams {
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 20px 32px;        /* 52 topbar + 52 score bar + marge */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
#rlp-teams.hidden { display: none; }

.rlp-col {
  background: var(--bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.rlp-col.blue   { border-top: 3px solid var(--rl-blue); }
.rlp-col.orange { border-top: 3px solid var(--rl-orange); }

.rlp-col-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-dark);
}
.rlp-col.blue   .rlp-col-hdr { background: var(--rl-blue-dim); }
.rlp-col.orange .rlp-col-hdr { background: var(--rl-orange-dim); }

.rlp-col-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.rlp-col-dot.blue   { background: var(--rl-blue-light); }
.rlp-col-dot.orange { background: var(--rl-orange-light); }

.rlp-col-title {
  flex: 1; margin: 0;
  font-family: var(--font-title);
  font-size: var(--text-lg); font-weight: 700; letter-spacing: .5px;
  color: var(--text-primary);
}
.rlp-col-count {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-sm);
  padding: 2px 8px; min-width: 26px; text-align: center;
}

.rlp-list { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.rlp-col-empty {
  font-size: var(--text-sm); color: var(--text-muted);
  text-align: center; padding: 22px 8px;
}

/* ── Carte joueur : boost sous la carte (barre + valeur) ── */
.rlp-boost { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; }
.rlp-boost .boost-wrap { flex: 1; margin: 0; }
.rlp-boost-num {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  color: var(--rl-boost); min-width: 26px; text-align: right;
}
/* Ma carte mise en avant */
.rl-player-card.is-me { box-shadow: inset 0 0 0 1px var(--rl-boost); }

/* ── État vide (aucune partie) — centré plein écran sous la topbar ── */
.rlp-empty {
  position: fixed; inset: 52px 0 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
}
.rlp-empty.hidden { display: none; }
.rlp-empty-icon { font-size: 40px; color: var(--rl-accent); opacity: .6; }
.rlp-empty-title {
  font-family: var(--font-title); font-size: var(--text-xl); font-weight: 700;
  color: var(--text-primary);
}
.rlp-empty-desc {
  font-size: var(--text-sm); color: var(--text-secondary);
  max-width: 380px; line-height: var(--leading-normal);
}

/* ── Responsive ── */
@media (max-width: 680px) {
  #rlp-teams { grid-template-columns: 1fr; gap: 14px; padding: 116px 14px 24px; }
}