/**
 * PlayAwale — La page d'analyse d'une partie
 * -----------------------------------------------------------------------------
 * Écrite pour quelqu'un qui veut apprendre de ses erreurs : ce qu'on cherche en
 * premier se voit en premier.
 *
 * UNE HIÉRARCHIE, TROIS NIVEAUX
 *   1. le verdict et le chiffre — une précision, une gaffe, un coup trouvé — en
 *      gros et en couleur, qu'on lit sans lire ;
 *   2. la phrase qui l'explique, en texte courant ;
 *   3. le détail — valeurs de chaque coup, suites prévues — plus petit, pour qui
 *      veut creuser.
 *
 * LA COULEUR NE DIT JAMAIS SEULE
 * Chaque verdict porte son mot, chaque camp son nom à côté de sa graine. Les
 * couleurs des verdicts viennent de tokens.css ; celles des deux camps sont le
 * vert et la terre cuite des deux rangées du plateau — une paire éprouvée pour
 * les daltonismes rouge-vert.
 *
 * ELLE REPREND LE COMPTE
 * Titre gravé, cartes de sable, barre d'outils : account.css. Le plateau est le
 * composant du jeu, dimensionné ici sur la largeur de sa colonne.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   MISE EN PAGE
   ============================================================================= */

.analysis-page .account-block {
  width: min(94vw, 1180px);
}

.analysis-report {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.analysis-block .account-block__title {
  margin-bottom: var(--space-xs);
}


/* =============================================================================
   L'EN-TÊTE
   ============================================================================= */

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

.analysis-duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.analysis-duel__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.analysis-duel__face {
  width: 72px;
  height: 72px;
  padding: 3px;

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

.analysis-duel__face.is-known {
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px var(--color-brand-amber-deep);
}

.analysis-duel__name {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  text-align: center;
  text-wrap: balance;
}

.analysis-duel__score {
  margin: 0;

  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1;
  color: var(--color-text);
  text-shadow: var(--shadow-heading);
  white-space: nowrap;
}

.analysis-hero__meta {
  margin: 0;

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

.analysis-hero__meta strong {
  color: var(--color-text);
}

.analysis-hero__dot {
  margin: 0 var(--space-2xs);
}

/* « Revoir la partie » et « Exporter en JSON », côte à côte ; l'un sous l'autre
   si la ligne ne les tient pas. */
.analysis-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* « Revoir la partie » : une pastille de sable, comme les boutons de rejeu. */
.watch-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

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

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;

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

.watch-link:hover,
.watch-link:focus-visible {
  background-color: var(--color-brand-amber-light);
  box-shadow: var(--shadow-raised-hover);
}

.watch-link:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.watch-link__icon {
  width: 14px;
  height: 14px;
}


/* =============================================================================
   L'AVERTISSEMENT
   -----------------------------------------------------------------------------
   Une note, pas une alerte : l'ambre des pistes, un liseré, et le texte courant.
   Assez visible pour être lue avant les verdicts, assez calme pour ne pas faire
   douter de tout.
   ============================================================================= */

.analysis-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);

  width: min(94vw, 1180px);
  padding: var(--space-md) var(--space-lg);

  text-align: left;

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border-left: 5px solid var(--color-brand-amber-deep);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.analysis-disclaimer__icon {
  display: grid;
  place-items: center;
  flex: none;

  width: 2rem;
  height: 2rem;

  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-brand-dark);

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

.analysis-disclaimer__title {
  margin: 0 0 var(--space-2xs);

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.analysis-disclaimer__text {
  margin: 0;

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


/* =============================================================================
   LE GUIDE DE LECTURE
   -----------------------------------------------------------------------------
   Une carte qui s'ouvre : fermée, une ligne qui invite ; ouverte, quatre
   rubriques côte à côte sur un grand écran, les unes sous les autres sur un
   téléphone. Des définitions courtes, le mot en gras devant.
   ============================================================================= */

.analysis-guide {
  width: min(94vw, 1180px);

  text-align: left;

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.analysis-guide__summary {
  display: flex;
  align-items: center;
  gap: var(--space-md);

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

  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.analysis-guide__summary::-webkit-details-marker {
  display: none;
}

.analysis-guide__summary:hover {
  background-color: rgba(255, 219, 153, 0.3);
}

.analysis-guide__summary:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.analysis-guide__icon {
  display: grid;
  place-items: center;
  flex: none;

  width: 2rem;
  height: 2rem;

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

  background-color: var(--color-verdict-best);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.analysis-guide__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.analysis-guide__title {
  margin: 0;

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

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

.analysis-guide__chevron {
  flex: none;
  width: 18px;
  height: 18px;

  transform: rotate(90deg);
  transition: transform var(--duration-fast) ease;
}

.analysis-guide[open] .analysis-guide__chevron {
  transform: rotate(-90deg);
}

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

  padding: 0 var(--space-lg) var(--space-lg);
}

.analysis-guide__part {
  padding: var(--space-sm) var(--space-md) var(--space-md);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
}

.analysis-guide__part-title {
  margin: 0 0 var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.analysis-guide__terms {
  display: grid;
  gap: var(--space-sm);

  margin: 0;
}

.analysis-guide__term dt {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
}

.analysis-guide__term dd {
  margin: 0;

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

.analysis-guide__seed {
  margin-left: var(--space-md);
}

.analysis-guide__verdicts {
  display: grid;
  gap: var(--space-xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le badge dans une colonne de largeur fixe : les explications s'alignent. */
.analysis-guide__verdict {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-sm);

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

.analysis-guide__verdict .an-badge {
  justify-self: start;
}


/* =============================================================================
   LA PROGRESSION
   ============================================================================= */

.analysis-progress__track {
  height: 12px;
  margin: var(--space-sm) auto var(--space-xs);
  max-width: 540px;

  overflow: hidden;
  background-color: var(--color-sand-300);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hollow);
}

.analysis-progress__fill {
  display: block;
  width: 0;
  height: 100%;

  background-image: var(--gradient-amber-raised);
  border-radius: var(--radius-full);

  transition: width var(--duration-slow) ease;
}

.analysis-progress__count {
  margin: 0 0 var(--space-sm);

  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  text-align: center;
}

.analysis-progress__error {
  margin: var(--space-sm) 0;

  font-family: var(--font-body);
  font-weight: 700;
  text-align: center;
  color: var(--color-danger);
}

.analysis-progress__retry {
  display: flex;
  margin: 0 auto;
}


/* =============================================================================
   LES MARQUES COMMUNES
   -----------------------------------------------------------------------------
   La graine d'un camp, le badge d'un verdict, une prise.
   ============================================================================= */

.an-seed {
  display: inline-block;
  flex: none;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.4em;

  border-radius: var(--radius-full);
  box-shadow:
    inset 0 -2px 3px rgba(60, 39, 35, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Le camp 1 tient la rangée du bas, le camp 2 celle du haut : les couleurs que
   le lecteur de parties pose sur leurs coups. */
.an-seed--p1 { background-color: var(--color-outcome-won); }
.an-seed--p2 { background-color: var(--color-outcome-lost); }

/* L'ÉTIQUETTE D'UN VERDICT : UNE TEINTE, PAS UN CONTOUR
   Elle était cerclée d'un trait de la couleur du verdict. C'est le fond qui
   parle désormais, du plus calme au plus grave — sable, vert, ambre, rouille,
   rouille pleine —, et le texte garde un contraste lisible sur chacun. Une
   étiquette « forcé » n'est qu'un creux : il n'y avait pas de choix à juger. */
.an-badge {
  display: inline-flex;
  align-items: center;

  padding: 0.2em 0.65em;

  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-text);

  background-color: var(--color-sand-200);
  border: none;
  border-radius: var(--radius-full);
}

.an-badge--found {
  color: var(--color-brand-cream);
  background-color: var(--color-verdict-found);
}

.an-badge--best {
  background-color: var(--color-online-halo);
}

.an-badge--forced {
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-hollow);
}

.an-badge--inaccuracy {
  background-color: var(--color-brand-amber-light);
}

.an-badge--mistake {
  color: var(--color-danger);
  background-color: var(--color-danger-surface);
}

.an-badge--blunder {
  color: var(--color-brand-cream);
  background-color: var(--color-verdict-blunder);
}

.an-capture {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.45em;

  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);

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

.an-link {
  padding: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;

  background: none;
  border: none;
  cursor: pointer;
}

.an-link:hover,
.an-link:focus-visible {
  color: var(--color-focus-ring);
}

.an-card__empty {
  margin: 0;

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


/* =============================================================================
   L'ESSENTIEL
   ============================================================================= */

.analysis-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-md);

  text-align: left;
}

.an-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  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);
}

.an-card__name {
  display: flex;
  align-items: center;

  margin: 0;

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

.an-accuracy {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);

  margin: 0;
}

/* Le chiffre de la carte : grand, proportionnel, dans la police du texte. */
.an-accuracy__value {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

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

.an-accuracy__help {
  margin: calc(var(--space-xs) * -1) 0 0;

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

.an-verdicts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

/* UNE PASTILLE PAR VERDICT, SANS LISERÉ
   Chaque verdict portait un trait de couleur sur son bord gauche : six petits
   blocs, six bords colorés, et une carte qui ressemblait à un nuancier. La
   couleur passe au CHIFFRE, comme les issues de « Mes statistiques » : l'œil la
   trouve là où il lit, le libellé reste en retrait, et la pastille n'est plus
   qu'un creux clair dans le sable de la carte. */
.an-verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

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

  text-align: center;

  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hollow);
}

/* Un verdict qu'on n'a pas eu reste à sa place — l'ordre ne bouge jamais —,
   mais s'efface. */
.an-verdict.is-zero {
  opacity: 0.5;
}

.an-verdict__count {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-verdict-good);
}

.an-verdict--found .an-verdict__count      { color: var(--color-verdict-found); }
.an-verdict--best .an-verdict__count       { color: var(--color-verdict-best); }
.an-verdict--inaccuracy .an-verdict__count { color: var(--color-verdict-inaccuracy); }
.an-verdict--mistake .an-verdict__count    { color: var(--color-verdict-mistake); }
.an-verdict--blunder .an-verdict__count    { color: var(--color-verdict-blunder); }

.an-verdict__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--color-text-muted);
}

.an-facts {
  display: grid;
  gap: 2px;

  margin: 0;

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

.an-facts__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.an-facts dt {
  color: var(--color-text-muted);
}

.an-facts dd {
  margin: 0;
  font-weight: 700;
}

.an-card__sub {
  margin: var(--space-xs) 0 0;

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.an-review {
  display: grid;
  gap: var(--space-2xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

.an-review__btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);

  width: 100%;
  padding: var(--space-xs) var(--space-sm);

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

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.an-review__btn:hover,
.an-review__btn:focus-visible {
  background-color: var(--color-brand-amber-light);
}

.an-review__move {
  font-weight: 700;
}

.an-review__cost {
  margin-left: auto;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
   POUR PROGRESSER
   ============================================================================= */

.analysis-advice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-md);

  text-align: left;
}

.an-advice__for {
  display: flex;
  align-items: center;

  margin: 0 0 var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.an-advice__list {
  display: grid;
  gap: var(--space-xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chaque conseil est une carte à part : on les lit un à un, pas en paragraphe. */
.an-advice__item {
  position: relative;

  padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 1.4rem);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
}

.an-advice__item::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  top: calc(var(--space-sm) + 0.45em);

  width: 0.7rem;
  height: 0.7rem;

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

.an-advice__item--traps_good::before,
.an-advice__item--solid::before {
  background-color: var(--color-verdict-best);
}


/* =============================================================================
   LA COURBE ET LES GRAPHIQUES
   -----------------------------------------------------------------------------
   Des traits fins, une grille à peine visible, des lavis pâles : la donnée est
   la seule chose qui ait le droit de crier.
   ============================================================================= */

.analysis-curve {
  margin-top: var(--space-sm);
}

.an-chart-frame {
  position: relative;
  border-radius: var(--radius-sm);
}

.an-chart-frame:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
}

.an-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.an-grid {
  stroke: var(--color-sand-300);
  stroke-width: 1;
}

.an-mid {
  stroke: var(--color-sand-400);
  stroke-width: 1;
}

.an-phase {
  stroke: var(--color-sand-300);
  stroke-width: 1;
}

.an-tick,
.an-phase-label,
.an-marker-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--color-text-muted);
}

.an-marker-label {
  font-weight: 700;
  fill: var(--color-text);
}

.an-wash {
  stroke: none;
  opacity: 0.16;
}

.an-wash--p1 { fill: var(--color-outcome-won); }
.an-wash--p2 { fill: var(--color-outcome-lost); }

.an-line {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.an-series {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.an-series--p1 { stroke: var(--color-outcome-won); }
.an-series--p2 { stroke: var(--color-outcome-lost); }

/* Les points posés sur la ligne : un anneau du fond les détache du trait. */
.an-dot {
  stroke: var(--color-surface);
  stroke-width: 2;
}

.an-dot--found   { fill: var(--color-verdict-found); }
.an-dot--mistake { fill: var(--color-verdict-mistake); }
.an-dot--blunder { fill: var(--color-verdict-blunder); }

.an-marker {
  stroke: var(--color-brand-amber-deep);
  stroke-width: 1.5;
}

.an-cross {
  stroke: var(--color-text-muted);
  stroke-width: 1;
  pointer-events: none;
}

.an-hit {
  fill: transparent;
  cursor: crosshair;
}

.an-tooltip {
  position: absolute;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 2px;

  width: 200px;
  padding: var(--space-xs) var(--space-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  text-align: left;
  pointer-events: none;

  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}

.an-tooltip--mini {
  width: 150px;
}

.an-tooltip__value {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.an-tooltip__label {
  color: var(--color-text-muted);
}

.an-tooltip__row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.an-tooltip .an-badge {
  align-self: flex-start;
  margin-top: 2px;
}

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

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

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

.an-legend--lines {
  justify-content: flex-start;
  margin: 0 0 var(--space-sm);
}

.an-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.an-legend__wash {
  display: inline-block;
  width: 1rem;
  height: 0.7rem;
  border-radius: 3px;
}

.an-legend__wash--p1 { background-color: var(--color-outcome-won); opacity: 0.45; }
.an-legend__wash--p2 { background-color: var(--color-outcome-lost); opacity: 0.45; }

/* Les mêmes points que sur la courbe, avec le même anneau du fond. */
.an-legend__dot {
  display: inline-block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-full);
}

.an-legend__dot--found   { background-color: var(--color-verdict-found); }
.an-legend__dot--mistake { background-color: var(--color-verdict-mistake); }
.an-legend__dot--blunder { background-color: var(--color-verdict-blunder); }

.an-legend__line {
  display: inline-block;
  flex: none;
  width: 1rem;
  height: 2px;
  border-radius: 1px;
}

.an-legend__line--p1 { background-color: var(--color-outcome-won); }
.an-legend__line--p2 { background-color: var(--color-outcome-lost); }


/* --- Le tournant, le point de non-retour, les changements de meneur ------ */

.analysis-keypoints {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-sm);

  margin-top: var(--space-md);
  text-align: left;
}

.an-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);

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

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
}

.an-key__title {
  margin: 0;

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.an-key__text {
  margin: 0;

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


/* =============================================================================
   COUP PAR COUP
   -----------------------------------------------------------------------------
   Le plateau et son explication à gauche, qui suivent la page ; la liste des
   coups à droite, qui défile dans son cadre. Sur un téléphone, le plateau passe
   au-dessus et la liste dessous.
   ============================================================================= */

.analysis-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-lg);

  margin-top: var(--space-md);
  text-align: left;
}

.analysis-viewer {
  container-type: inline-size;

  position: sticky;
  top: var(--space-sm);

  padding: var(--space-md);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
}

.analysis-viewer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.analysis-viewer__title {
  margin: 0;

  font-family: var(--font-display);
  font-size: var(--font-size-base);
}

.analysis-viewer__toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;

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

.analysis-toggle {
  padding: var(--space-2xs) var(--space-sm);

  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);

  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.analysis-toggle.is-active {
  color: var(--color-text);
  background-color: var(--color-brand-amber);
}

.analysis-viewer__scores {
  display: flex;
  justify-content: space-between;

  margin: var(--space-xs) 0 var(--space-2xs);

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

/* Le plateau prend la largeur de sa colonne, et non celle de la fenêtre : un
   plateau de six trous tient en 7,33 fois la taille d'un trou. */
.analysis-viewer__board {
  --hole-size: min(62px, calc((100cqi - 4px) / 7.33333));

  margin: 0 auto var(--space-xs);
}

.analysis-viewer__legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);

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

.analysis-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Les deux anneaux, dessinés par les mêmes variables que ceux du plateau : la
   légende ne peut pas mentir sur ce qu'elle légende.

   ELLE VIT DANS LE CONTENEUR DU PLATEAU
   Le thème définit ces variables sur « .board-container », et nulle part
   ailleurs : hors du conteneur, elles n'existent pas. Le script y range donc la
   légende, sous le plateau. Le coup joué change de couleur avec la rangée du
   camp qui joue — vert en bas, rouge en haut —, comme sur le plateau ; le script
   dit lequel par « data-player ». */
.analysis-legend::before {
  content: '';
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin: 3px;
  border-radius: var(--radius-full);
}

.analysis-legend--played::before {
  outline: var(--hole-chosen-mine-outline);
}

.analysis-viewer__legend[data-player="2"] .analysis-legend--played::before {
  outline: var(--hole-chosen-outline);
}

.analysis-legend--best::before {
  outline: var(--hole-candidate-outline);
}

/* Le trait du thème est pensé pour un anneau autour d'un trou, pas pour une
   pastille de légende : sans cette épaisseur, on ne la voyait pas. */
.analysis-legend::before {
  outline-width: 2.5px;
}

/* Sur cette page, on vient chercher le coup joué et le meilleur coup : leurs
   anneaux sont plus épais qu'en partie, où ils ne font qu'annoncer un coup. */
.analysis-viewer__board .hole.is-chosen,
.analysis-viewer__board .hole.is-candidate {
  outline-width: calc(var(--hole-size) * 0.07);
}

.analysis-viewer__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);

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

.replay-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  color: var(--color-text);

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised);
  cursor: pointer;
}

.replay-like:hover,
.replay-like:focus-visible {
  background-image: var(--gradient-amber-raised);
}

.replay-like__icon {
  width: 16px;
  height: 16px;
}

.replay-like__icon--back {
  transform: rotate(180deg);
}

.replay-like__icon--end {
  transform: scaleX(-1);
}


/* --- Le détail d'un coup ---------------------------------------------------- */

.analysis-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-sand-300);
}

.an-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.an-detail__head .an-badge {
  font-size: var(--font-size-sm);
}

.an-detail__lead {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
}

.an-detail__notes {
  display: grid;
  gap: var(--space-xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

/* Une phrase par idée, chacune avec sa marque : on lit une liste de faits. */
.an-note {
  position: relative;

  padding-left: 1.2rem;

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

.an-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;

  width: 0.55rem;
  height: 0.55rem;

  background-color: var(--color-sand-400);
  border-radius: var(--radius-full);
}

.an-note--cost {
  font-weight: 700;
}

.an-note--cost::before   { background-color: var(--color-verdict-mistake); }
.an-note--best::before   { background-color: var(--color-verdict-best); }
.an-note--tag::before    { background-color: var(--color-brand-amber-deep); }

.an-detail__sub {
  margin: 0 0 var(--space-2xs);

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

.an-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

.an-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

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

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

  background-color: var(--color-surface);
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
}

.an-option__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.an-option.is-best {
  border-color: var(--color-verdict-best);
}

.an-option.is-played {
  box-shadow: 0 0 0 2px var(--color-text);
}

/* « meilleur », « joué » : le mot, en petit, à côté de la valeur. */
.an-option__tag {
  padding: 0 0.45em;

  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-brand-cream);

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

.an-option__tag--best {
  background-color: var(--color-verdict-best);
}

.an-detail__help {
  margin: 0;

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

.an-line__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);

  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pas;
}

.an-line__step {
  display: inline-flex;
  align-items: center;

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

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

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


/* --- La liste des coups ----------------------------------------------------- */

.analysis-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);

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

.analysis-chip {
  padding: var(--space-2xs) var(--space-md);

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

  background-color: var(--color-surface);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.analysis-chip.is-active {
  background-image: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);
}

.analysis-chip:focus-visible,
.analysis-select:focus-visible,
.an-row:focus-visible,
.an-review__btn:focus-visible,
.analysis-toggle:focus-visible,
.replay-like:focus-visible,
.an-link:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.analysis-select {
  padding: var(--space-2xs) var(--space-sm);

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

  background-color: var(--color-surface);
  border: 1px solid var(--color-sand-400);
  border-radius: var(--radius-sm);
}

/* La liste défile dans son cadre : le plateau reste à côté d'elle. */
.analysis-table-scroll {
  max-height: min(78vh, 900px);
  overflow: auto;

  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hollow);
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;

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

.analysis-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;

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

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

  background-color: var(--color-sand-100);
}

.an-row td {
  padding: var(--space-xs) var(--space-sm);
  vertical-align: middle;
  border-top: 1px solid var(--color-sand-200);
}

/* Le liseré du verdict, sur le bord d'attaque de la ligne. */
.an-row td:first-child {
  box-shadow: inset 4px 0 0 transparent;
}

.an-row--found td:first-child      { box-shadow: inset 4px 0 0 var(--color-verdict-found); }
.an-row--inaccuracy td:first-child { box-shadow: inset 4px 0 0 var(--color-verdict-inaccuracy); }
.an-row--mistake td:first-child    { box-shadow: inset 4px 0 0 var(--color-verdict-mistake); }
.an-row--blunder td:first-child    { box-shadow: inset 4px 0 0 var(--color-verdict-blunder); }

.an-row {
  cursor: pointer;
}

.an-row:hover td {
  background-color: rgba(255, 219, 153, 0.35);
}

.an-row.is-selected td {
  background-color: var(--color-brand-amber-light);
}

.an-row__n {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.an-row__who {
  white-space: nowrap;
}

.an-row__who .an-seed {
  vertical-align: -0.05em;
}

.an-row__seeds {
  margin-left: 0.4em;
  color: var(--color-text-muted);
}

.an-row__score {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.an-row__loss {
  margin-left: 0.4em;
  font-weight: 700;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
   LES COUPS REMARQUABLES
   ============================================================================= */

.analysis-moments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--space-md);

  text-align: left;
}

.an-moments__title {
  margin: 0 0 var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.an-moments__list {
  display: grid;
  gap: var(--space-xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

.an-moment {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);

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

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

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
}

.an-moment__text {
  flex: 1 1 14rem;
}


/* =============================================================================
   LE RYTHME DES INDICATEURS
   ============================================================================= */

.analysis-indicators {
  margin-top: var(--space-sm);
  text-align: left;
}

.an-minis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.an-mini {
  margin: 0;
  padding: var(--space-sm) var(--space-sm) var(--space-2xs);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
}

.an-mini__caption {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-2xs);
}

.an-mini__title {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
}

.an-mini__help {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.analysis-depth {
  margin: var(--space-sm) 0 0;

  font-family: var(--font-body);
  font-size: 0.78rem;
  text-align: center;
  color: var(--color-text-muted);
}


/* =============================================================================
   ÉCRANS MOYENS ET ÉTROITS
   ============================================================================= */

@media (max-width: 60rem) {

  /* « minmax(0, …) » et non « 1fr » : une colonne « 1fr » ne descend pas sous
     la largeur de son contenu, et la liste des coups poussait la page hors de
     l'écran d'un téléphone. */
  .analysis-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Empilé, le plateau ne suit plus la page : il couvrirait la liste. */
  .analysis-viewer {
    position: static;
  }

  .analysis-table-scroll {
    max-height: 60vh;
  }
}

@media (max-width: 40rem) {

  .analysis-page .account-block {
    padding: var(--space-md);
  }

  .an-minis {
    grid-template-columns: 1fr;
  }

  .analysis-duel {
    gap: var(--space-xs);
  }

  .analysis-duel__face {
    width: 56px;
    height: 56px;
  }

  .analysis-disclaimer {
    padding: var(--space-sm) var(--space-md);
  }

  /* La colonne du joueur passe sous le coup : cinq colonnes ne tiennent pas. */
  .an-row__name {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .analysis-progress__fill {
    transition: none;
  }
}