/*
 * Chasse aux mots : classement.
 *
 * La carte, les onglets, le podium et les lignes viennent du socle partagé
 * (classement.css + classement-bloc.css). On ne pose ici que l'introduction de
 * la page, le choix du niveau et les colonnes propres au jeu.
 *
 * Ce fichier est chargé sur la page classement ET sur la page du défi du jour
 * (encart « classement du jour ») : il ne contient donc AUCUN sélecteur
 * générique, et ne redéfinit aucune classe du socle.
 */

.classement-intro {
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 16px;
  text-align: left;
}

.classement-liens {
  margin: 18px 0 4px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--texte-doux);
}
.classement-liens a { color: var(--color-light); }

.choix-niveau {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--texte-doux);
}
/* Le choix du niveau ne concerne que l'onglet « Par niveau ». Un navigateur qui
   ne connaît pas :has() le garde affiché partout, comme avant. */
.card:has(.mode-tab.active:not([data-mode-tab="niveau"])) .choix-niveau { display: none; }
.choix-niveau input[type="number"] {
  width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--line-forte, #39404a);
  border-radius: 8px;
  background: var(--surface-1, #16191f);
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}
.choix-niveau button {
  padding: 8px 14px;
  border: 1px solid var(--line-forte, #39404a);
  border-radius: 8px;
  background: transparent;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.choix-niveau button:hover { border-color: var(--color-mid); }

.lb-niveau,
.lb-points,
.lb-mots,
.lb-etoiles {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: var(--texte-doux);
}

.lb-niveau  { width: 64px; }
.lb-points  { width: 96px; }
.lb-mots    { width: 70px; }
.lb-etoiles { width: 64px; color: #fbbf24; letter-spacing: 1px; }

@media (max-width: 560px) {
  /* Sur téléphone, seules les colonnes qui départagent restent. */
  .lb-points, .lb-etoiles { display: none; }
  .lb-niveau { width: 54px; font-size: 0.8rem; }
  .lb-mots { width: 54px; font-size: 0.8rem; }
}