/*
 * Dédale Obscur — page de classement.
 *
 * Même socle visuel que les pages de jeu (pierre sombre, ambre des torches),
 * avec les contraintes habituelles : #app à 800 px pour ne pas passer sous les
 * blocs latéraux fixes du site, et 24 px de padding horizontal minimum pour que
 * le banner partagé ne déborde pas.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, #26201a 0%, #14110f 55%, #08080a 100%);
  color: #e7e2d9;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

#app {
  max-width: 800px;
  margin: 0 auto;
  padding: 28px 24px 40px;
}

h1 {
  font-size: 1.6rem;
  color: var(--color-light, #fde68a);
  margin: 8px 0 12px;
  text-align: center;
}

.cache { display: none !important; }

.classement-intro {
  color: #a8a094;
  line-height: 1.6;
  font-size: 0.95rem;
  text-align: center;
  margin: 0 auto 20px;
  max-width: 64ch;
}

.classement-intro strong { color: #ded7cb; }

.onglets {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.onglet {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(180, 150, 100, 0.28);
  background: rgba(28, 24, 20, 0.6);
  color: #b9ae9c;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.onglet:hover { border-color: rgba(245, 158, 11, 0.5); color: #ded7cb; }

.onglet.actif {
  border-color: var(--color-mid, #f59e0b);
  background: rgba(120, 80, 25, 0.4);
  color: var(--color-light, #fde68a);
}

.choix-taille {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pastille-taille {
  font: inherit;
  font-size: 0.8rem;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: transparent;
  color: #8f877a;
  cursor: pointer;
}

.pastille-taille.actif {
  border-color: var(--color-accent, #7dd3fc);
  color: var(--color-accent, #7dd3fc);
}

.classement-zone { min-height: 180px; }

.chargement, .no-data {
  text-align: center;
  color: #8f877a;
  font-size: 0.92rem;
  padding: 30px 10px;
}

.table-classement {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table-classement th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #857d70;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(180, 150, 100, 0.22);
  font-weight: 700;
}

.table-classement td {
  padding: 10px;
  border-bottom: 1px solid rgba(180, 150, 100, 0.1);
  color: #ded7cb;
}

.table-classement tr.moi td {
  background: rgba(245, 158, 11, 0.09);
  color: var(--color-light, #fde68a);
}

.rang { color: #857d70; font-variant-numeric: tabular-nums; width: 3ch; }
.chrono { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-accent, #7dd3fc); }
.secondaire { color: #857d70; font-size: 0.85rem; }

/* La pastille d'aide est ce qui rend un classement unique acceptable : le temps
 * seul ne dirait pas dans quelles conditions il a été réalisé. */
.pastille-aide {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.aide-aucune { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.aide-carte  { background: rgba(125, 211, 252, 0.16); color: #7dd3fc; }
.aide-traces { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; }

.classement-note {
  text-align: center;
  color: #7d7568;
  font-size: 0.8rem;
  margin-top: 22px;
  line-height: 1.5;
}

footer {
  margin-top: 34px;
  text-align: center;
  font-size: 0.82rem;
  color: #7d7568;
}

footer a { color: #b9ae9c; text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  #app { padding: 18px 24px 30px; }
  .table-classement { font-size: 0.85rem; }
  .table-classement td, .table-classement th { padding: 8px 6px; }
}