/**
 * PlayAwale — Le classement Elo des IA (elo.php)
 * -----------------------------------------------------------------------------
 * Les blocs de la page sont ceux de « Comment jouent les IA » et de l'espace
 * du joueur (pages/account.css) ; cette feuille n'ajoute que les graphiques :
 * le classement et ses barres, les graines de l'écart, les étapes du tournoi,
 * le tableau des duels, la courbe, et la comparaison avec les joueurs.
 *
 * AUCUN STYLE DANS LA PAGE. La politique de sécurité du site refuse l'attribut
 * « style » : positions et couleurs de chaque IA sont des attributs SVG, et les
 * cases des duels prennent une classe par palier (.elo-cell--v4 … --d4).
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* Une colonne plus large que l'espace du joueur : il y a des tableaux. */
.elo-page .account-block {
  width: min(94vw, 860px);
}

.elo-lead {
  max-width: 46rem;
}

.elo-date {
  margin: calc(var(--space-md) * -1) 0 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Les fonds communs des barres. */
.elo-track {
  fill: rgba(60, 39, 35, 0.1);
}


/* =============================================================================
   1. LE CLASSEMENT
   -----------------------------------------------------------------------------
   Rang, portrait, nom, note, puis la barre de marge, qui prend le reste de la
   ligne. Sur un téléphone, la barre passe dessous, sur toute la largeur.
   ============================================================================= */

.elo-rank {
  display: grid;
  gap: var(--space-xs);

  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.elo-rank__row {
  display: grid;
  grid-template-columns: 2rem 44px minmax(9rem, 1.1fr) 6.5rem minmax(8rem, 1fr);
  align-items: center;
  gap: var(--space-sm);

  padding: var(--space-xs) var(--space-sm);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

/* Le rang : la même pastille que sur « Comment jouent les IA ». */
.elo-rank__place {
  display: grid;
  place-items: center;

  width: 2rem;
  height: 2rem;

  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-brand-cream);

  background-color: var(--color-brand-dark);
  border-radius: var(--radius-full);
}

/* Le premier en ambre, comme la graine pleine de la jauge. */
.elo-rank__row:first-child .elo-rank__place {
  color: var(--color-text);
  background-color: var(--color-brand-amber);
  background-image: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);
}

.elo-rank__face {
  width: 44px;
  height: 44px;
  padding: 2px;

  object-fit: contain;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hollow);
}

.elo-rank__name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  text-align: left;
  color: var(--color-text);
  text-decoration: none;
}

.elo-rank__name:hover,
.elo-rank__name:focus-visible {
  text-decoration: underline;
}

.elo-rank__score {
  font-family: var(--font-body);
  text-align: right;
  white-space: nowrap;
}

.elo-rank__score strong {
  font-size: 1.35rem;
  color: var(--color-text);
}

.elo-rank__score small {
  margin-left: 0.2em;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.elo-rank__bar {
  width: 100%;
  height: 20px;
}

@media (max-width: 640px) {

  .elo-rank__row {
    grid-template-columns: 2rem 40px 1fr auto;
  }

  .elo-rank__face {
    width: 40px;
    height: 40px;
  }

  .elo-rank__bar {
    grid-column: 1 / -1;
  }
}


/* =============================================================================
   2. CE QUE VEUT DIRE UN ÉCART : dix graines, dont les premières pleines
   ============================================================================= */

.elo-gaps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-md);

  margin-bottom: var(--space-md);
}

.elo-gap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);

  margin: 0;
  padding: var(--space-md);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.elo-gap figcaption {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: center;
  color: var(--color-text-muted);
}

.elo-gap figcaption strong {
  display: block;
  margin-bottom: 2px;

  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-text);
}

.elo-seeds {
  width: 100%;
  max-width: 13rem;
  height: auto;
}

/* Les graines de la jauge de « Comment jouent les IA » : éteintes en creux,
   pleines en ambre. */
.elo-seed {
  fill: rgba(60, 39, 35, 0.14);
}

.elo-seed--on {
  fill: var(--color-brand-amber);
}

.elo-example {
  padding: var(--space-sm) var(--space-md);

  color: var(--color-text);
  background-color: var(--color-brand-cream);
  border-left: 4px solid var(--color-brand-amber);
  border-radius: var(--radius-sm);
}


/* =============================================================================
   3. LE TOURNOI, EN QUATRE ÉTAPES
   ============================================================================= */

.elo-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-sm);

  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

.elo-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);

  padding: var(--space-sm) var(--space-md);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.elo-step__number {
  display: grid;
  place-items: center;
  flex: none;

  width: 2rem;
  height: 2rem;

  font-family: var(--font-display);
  color: var(--color-text);

  background-color: var(--color-brand-amber);
  background-image: var(--gradient-amber-raised);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised-amber);
}

.elo-step__text {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: left;
  color: var(--color-text);
}


/* =============================================================================
   4. TOUS LES DUELS
   -----------------------------------------------------------------------------
   Vert quand l'IA de la ligne domine, rouge quand elle est dominée, ambre à
   l'équilibre : sept paliers. Le tableau défile de côté sur un téléphone
   plutôt que de déborder de la page.
   ============================================================================= */

.elo-duels-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

.elo-duels {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

.elo-duels thead img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}

.elo-duels tbody th {
  padding-right: var(--space-xs);

  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  color: var(--color-text);
}

.elo-duels tbody th img,
.elo-vs tbody th img {
  width: 28px;
  height: 28px;
  margin-right: 6px;
  vertical-align: middle;
}

.elo-cell {
  min-width: 3.4rem;
  padding: 0.45rem 0.25rem;

  font-weight: 700;
  text-align: center;
  color: var(--color-text);

  background-color: rgba(60, 39, 35, 0.05);
  border-radius: var(--radius-sm);
}

.elo-cell--self {
  background-color: transparent;
  background-image: repeating-linear-gradient(45deg, rgba(60, 39, 35, 0.07) 0 4px, transparent 4px 8px);
}

.elo-cell--v4 { background-color: rgba(76, 154, 80, 0.62); }
.elo-cell--v3 { background-color: rgba(76, 154, 80, 0.42); }
.elo-cell--v2 { background-color: rgba(76, 154, 80, 0.22); }
.elo-cell--eq { background-color: rgba(255, 201, 102, 0.45); }
.elo-cell--d2 { background-color: rgba(176, 64, 47, 0.2); }
.elo-cell--d3 { background-color: rgba(176, 64, 47, 0.38); }
.elo-cell--d4 { background-color: rgba(176, 64, 47, 0.56); }


/* =============================================================================
   5. L'ÉVOLUTION DES NOTES
   ============================================================================= */

.elo-evo {
  margin: 0;
}

.elo-evo__chart {
  display: block;
  width: 100%;
  height: auto;
}

.elo-grid {
  stroke: rgba(60, 39, 35, 0.1);
  stroke-width: 1;
}

.elo-axis {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--color-text-muted);
}

.elo-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);

  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.elo-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.elo-dot {
  width: 10px;
  height: 10px;
  flex: none;
}


/* =============================================================================
   6. CONTRE LES IA, CONTRE LES JOUEURS
   ============================================================================= */

.elo-vs {
  width: 100%;
  margin-bottom: var(--space-md);
  border-collapse: collapse;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.elo-vs th,
.elo-vs td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
}

.elo-vs thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.elo-vs tbody tr + tr {
  border-top: 1px solid rgba(60, 39, 35, 0.1);
}

.elo-vs tbody th {
  font-weight: 700;
  white-space: nowrap;
}

.elo-vs__rank {
  display: inline-grid;
  place-items: center;

  width: 1.5rem;
  height: 1.5rem;
  margin-right: 4px;

  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-brand-cream);

  background-color: var(--color-brand-dark);
  border-radius: var(--radius-full);
}

.elo-vs__rate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

.elo-vs__bar {
  width: 6rem;
  height: 10px;
}

.elo-vs__fill {
  fill: var(--color-brand-amber-deep);
}

.elo-vs__none {
  color: var(--color-text-muted);
}


/* =============================================================================
   7. LES LIENS, ET LA REMONTÉE
   ============================================================================= */

.elo-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);

  margin: var(--space-md) 0 0;
}

.elo-links__more {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* REMONTER EN HAUT : la pastille commune « Haut de page », en bas à droite —
   voir inc/partials/nav-tools.php et components/game-tools.css (01/10/2026). */

@media (prefers-reduced-motion: no-preference) {

  html:has(.elo-page) {
    scroll-behavior: smooth;
  }
}


/* =============================================================================
   1 bis. À QUOI CORRESPOND UNE NOTE : des paliers de niveau à l’awalé
   -----------------------------------------------------------------------------
   Une ligne par palier, du plus bas au plus haut ; la tranche en pastille, dont
   l'ambre fonce d'un palier à l'autre. Les lignes où se trouve une IA sont
   éclairées, et ses portraits posés au bout.
   ============================================================================= */

.elo-bands {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.elo-bands thead th {
  padding: 0 var(--space-sm);

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.elo-band td,
.elo-band th {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  vertical-align: middle;
  background-color: rgba(60, 39, 35, 0.04);
}

.elo-band > :first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.elo-band > :last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.elo-band.has-ai td,
.elo-band.has-ai th {
  background-color: var(--color-sand-100);
}

.elo-band__range {
  white-space: nowrap;
}

.elo-band__range::before {
  content: '';
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.45rem;
  vertical-align: -0.05rem;
  border-radius: var(--radius-full);
  background-color: var(--elo-band-color, #ffe2a8);
}

.elo-band--1 { --elo-band-color: #fff0cf; }
.elo-band--2 { --elo-band-color: #ffe2a8; }
.elo-band--3 { --elo-band-color: #ffd27f; }
.elo-band--4 { --elo-band-color: #ffc966; }
.elo-band--5 { --elo-band-color: #e8ad4c; }
.elo-band--6 { --elo-band-color: #d8a44e; }
.elo-band--7 { --elo-band-color: #b8802e; }

.elo-band__level {
  font-weight: 700;
  white-space: nowrap;
}

.elo-band__desc {
  color: var(--color-text-muted);
}

.elo-band__ai {
  min-width: 5rem;
  white-space: nowrap;
}

.elo-band__ai img {
  width: 34px;
  height: 34px;
  margin-right: -6px;
  vertical-align: middle;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hollow);
}


/* LES PORTRAITS DES TABLEAUX RESTENT EN LIGNE. Le site montre les images en
   bloc (base/reset.css) : sans cette règle, le portrait passait au-dessus du
   nom et les portraits d'un même palier s'empilaient. */
.elo-duels tbody th img,
.elo-vs tbody th img,
.elo-band__ai img {
  display: inline-block;
}

.elo-duels tbody th span,
.elo-vs tbody th span {
  vertical-align: middle;
}