/* ---------- vue classement ---------- */
.classement { max-width: 640px; margin: 0 auto; padding: 4px 20px 90px; }
.cl-head { margin: 6px 0 22px; }
.cl-head h1 { font-size: 1.9rem; margin: 6px 0 8px; }
.cl-head > p { color: var(--ink-soft); margin: 0; max-width: 58ch; }
.cl-liste { display: flex; flex-direction: column; gap: 8px; }
/* La ligne est un bouton : elle mène au profil public du joueur. Elle doit
   donc se réinitialiser (un bouton hérite d'une police et d'un alignement qui
   ne sont pas les nôtres) et se signaler comme cliquable. */
.cl-ligne {
  display: grid; grid-template-columns: 34px 38px 1fr auto; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.cl-ligne:hover { border-color: var(--accent); }
/* Sa propre ligne doit se repérer d'un coup d'œil dans une liste de cinquante. */
.cl-ligne.moi { border-color: var(--accent); background: var(--accent-soft); }
.cl-ligne.podium { border-color: var(--gold-dark); }
.cl-ligne.p1 { background: linear-gradient(90deg, rgba(236,193,78,.16), transparent 60%); }
.cl-rang {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .95rem;
  color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums;
}
.podium .cl-rang { color: var(--gold-dark); font-size: 1.1rem; }
.cl-av { width: 38px; height: 38px; display: grid; place-items: center; }
.cl-av img { width: 34px; height: 34px; border-radius: 50%; display: block; object-fit: cover; }
.cl-av .cl-crab { width: 38px; height: 26px; display: block; }
.cl-nom { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cl-nom b { font-size: .94rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lvl { font-family: "IBM Plex Mono", monospace; font-size: .68rem; color: var(--ink-soft); letter-spacing: .06em; }
.cl-xp {
  font-family: "IBM Plex Mono", monospace; font-size: .84rem; font-weight: 600;
  color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cl-coupe { text-align: center; color: var(--ink-soft); letter-spacing: .3em; padding: 2px 0; }
.cl-attente, .cl-vide { text-align: center; color: var(--ink-soft); padding: 26px 14px; }
.cl-vide p { margin: 0 0 14px; }
.cl-option {
  margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border-strong);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center;
}
.cl-option label { font-size: .9rem; font-weight: 600; cursor: pointer; }
.cl-option input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.cl-option-d { grid-column: 2; margin: 0; font-size: .82rem; color: var(--ink-soft); }