/**
 * PlayAwale — Mes parties, et la page qui rejoue une partie
 * -----------------------------------------------------------------------------
 * Deux pages qui se suivent : games.php, la liste de ses parties, et
 * replay.php, où chacune d'elles mène.
 *
 * LA LISTE SE PARCOURT PAR REPÈRES
 * Des filtres, le bilan de la sélection, les parties rangées par mois et vingt
 * par page. La carte d'une partie, elle, est un composant partagé avec « Mes
 * statistiques » : assets/css/components/game-card.css.
 *
 * UNE SEULE PAGE REJOUE
 * La liste portait son propre lecteur, posé par-dessus elle. Chaque ligne mène
 * désormais à l'adresse de la partie — celle qu'on partage —, et les règles du
 * lecteur superposé sont parties avec lui. Le plateau et ses deux panneaux sont
 * ceux du jeu, à l'identique — d'où « game-page » sur la page, qui porte les
 * mesures dont les panneaux découlent.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* 900 pixels, comme « Mes statistiques » : quatre filtres tiennent sur une ligne
   sans rogner leur texte, et une carte garde son détail sur une seule ligne. */
.games-page .account-block {
  width: min(94vw, 900px);
}


/* =============================================================================
   LES FILTRES
   -----------------------------------------------------------------------------
   Quatre listes déroulantes côte à côte — deux par ligne sur un téléphone — et
   un bouton. L'adversaire, quand on vient de sa ligne, est une pastille qu'on
   retire d'un geste.
   ============================================================================= */

.games-filters {
  text-align: left;
}

/* QUATRE COLONNES, LE NIVEAU PLUS LARGE
   Un nom de niveau — « Stratège Probabiliste » — est le plus long des choix. Sur
   un téléphone, deux colonnes : le mode et le niveau y prennent toute la largeur,
   l'issue et la période se partagent la dernière ligne. Aucun texte choisi n'est
   rogné. */
.games-filters__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.games-filter--wide {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {

  .games-filters__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .games-filter--wide {
    grid-column: auto;
  }

  /* Le zoom automatique qu'on évite avec 16 pixels ne concerne que les
     téléphones : sur un grand écran, un corps un peu plus petit laisse la place
     aux noms longs. */
  .games-filter__select {
    font-size: 0.95rem;
  }
}

.games-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;

  min-width: 0;
}

.games-filter__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Au moins 16 pixels de texte : en dessous, un iPhone agrandit la page. La
   flèche est dessinée ici — une image « data: », que la politique admet. */
.games-filter__select {
  width: 100%;
  padding: 0.55em 2.1em 0.55em 0.8em;

  font-family: var(--font-body);
  font-size: max(1rem, 16px);
  color: var(--color-text);

  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6.5 9 5.5 6 5.5-6' stroke='%233c2723' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 0.95em;
  border: 2px solid var(--color-sand-400);
  border-radius: var(--radius-sm);

  appearance: none;
  cursor: pointer;
}

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

.games-filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);

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

.games-filters__reset {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
}

.games-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  margin: 0 0 var(--space-sm);
  padding: 0.3em 0.35em 0.3em 0.95em;

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

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

.games-filters__chip-remove {
  display: grid;
  place-items: center;

  width: 1.8em;
  height: 1.8em;

  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-full);
}

.games-filters__chip-remove svg {
  width: 1em;
  height: 1em;
}

.games-filters__chip-remove:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}


/* =============================================================================
   LE BILAN DE LA SÉLECTION
   -----------------------------------------------------------------------------
   Les quatre issues de « Mes statistiques », dans le même ordre, la couleur
   portée par le chiffre. Chacune est un lien : touchée, elle ne garde que ses
   parties, et reste allumée tant qu'elle filtre.
   ============================================================================= */

.games-summary {
  margin-bottom: var(--space-md);
}

.games-summary__hint {
  margin: 0 0 var(--space-xs);

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

.games-summary__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);

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

.games-outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;

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

  color: var(--color-text);
  text-decoration: none;

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

  transition: background-color var(--duration-fast);
}

.games-outcome__value {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.games-outcome__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.games-outcome.is-won .games-outcome__value       { color: var(--color-outcome-won); }
.games-outcome.is-lost .games-outcome__value      { color: var(--color-outcome-lost); }
.games-outcome.is-drawn .games-outcome__value     { color: var(--color-outcome-drawn); }
.games-outcome.is-abandoned .games-outcome__value { color: var(--color-outcome-abandoned); }

.games-outcome:hover {
  background-color: var(--color-brand-amber-light);
}

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

.games-outcome.is-active {
  background-color: var(--color-brand-amber);
  box-shadow: var(--shadow-sm);
}

.games-outcome.is-active .games-outcome__label {
  color: var(--color-text);
}


/* =============================================================================
   LES PARTIES, PAR MOIS
   ============================================================================= */

.games-range {
  margin: 0 0 var(--space-xs);

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

.games-month {
  margin: var(--space-md) 0 var(--space-xs);

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

.games-range + .games-month {
  margin-top: 0;
}

.games-empty__title {
  margin: 0 0 var(--space-2xs);

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

.games-empty__text {
  margin: 0 0 var(--space-sm);

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


/* =============================================================================
   LES PAGES
   ============================================================================= */

.games-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);

  margin-top: var(--space-lg);
}

.games-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);

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

.games-pagination__link,
.games-pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;

  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.7em;

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

.games-pagination__step {
  padding: 0 1em;
}

.games-pagination__link:hover,
.games-pagination__step:hover {
  background-color: var(--color-brand-amber-light);
}

.games-pagination__link:focus-visible,
.games-pagination__step:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.games-pagination__link.is-current {
  color: var(--color-brand-cream);
  background: var(--color-brand-dark);
  box-shadow: none;
}

.games-pagination__icon {
  width: 0.9em;
  height: 0.9em;
}

.games-pagination__icon--prev {
  transform: rotate(180deg);
}

.games-pagination__gap {
  padding: 0 0.2em;
  color: var(--color-text-muted);
}

@media (max-width: 30rem) {

  .games-summary__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =============================================================================
   LA PAGE D'UNE PARTIE
   -----------------------------------------------------------------------------
   replay.php — la seule page qui rejoue une partie, qu'on y arrive par un lien
   partagé, par la fin d'une partie ou par la liste ci-dessus. Le plateau et ses
   deux panneaux sont ceux du jeu : rien n'est redessiné ici, seuls l'en-tête et
   la barre du bas lui appartiennent en propre. Elle est en pleine page : il n'y
   a rien derrière elle, et donc rien à recouvrir.
   ============================================================================= */

/* La hauteur qu'occupe un portrait de camp, depuis le bord de l'écran.

   ELLE N'EST PAS « --panel-reach »
   Celle-là décrit une LARGEUR : elle contient le facteur 1,2 qui tient compte
   du score débordant sur le côté du portrait. En hauteur, un portrait n'occupe
   que son propre côté plus les vingt pixels qui le séparent du bord. Employer
   la mesure horizontale ici coûtait dix-huit pixels de trop, et faisait
   défiler la page sur un écran de trois cent vingt. */
.replay-page {
  --replay-corner: calc(var(--avatar-panel-size, 72px) + var(--space-lg));

  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* L'aire de jeu du gabarit partagé, placée au centre de ce qui reste.

   ELLE PORTE SA PROPRE DISPOSITION
   Le balisage vient de inc/partials/game-area.php, mais sa mise en colonne
   était déclarée dans pages/solo.css — que cette page ne charge pas, et n'a
   aucune raison de charger : elle n'est pas une page de jeu. Sans cela le
   plateau s'étirait sur toute la largeur de la fenêtre, puisque plus rien ne
   le centrait. Les trois lignes sont donc reprises ici. */
.replay-page .game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 0;
  padding: var(--space-md) 0;
}


/* --- L'en-tête ------------------------------------------------------------ */

.replay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);

  /* Les panneaux de camp sont ancrés à 20 px des bords de l'écran : l'en-tête
     leur laisse le passage plutôt que de se glisser dessous. */
  padding: var(--space-sm) calc(var(--panel-reach, 120px) + var(--space-sm));
}

/* Le titre de la page est un h1, et il a sa propre mesure : sans elle, il
   prenait la taille par défaut du navigateur — le double du texte —, dans la
   police du texte et non celle des titres. */
.replay__title h1 {
  margin: 0;

  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-shadow: var(--shadow-heading);
}

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

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

/* --- La barre du bas ------------------------------------------------------ */

.replay-bar {
  display: grid;
  gap: var(--space-sm);

  padding: var(--space-sm) calc(var(--panel-reach, 120px) + var(--space-sm))
           var(--space-md);
}


/* --- L'avancement --------------------------------------------------------- */

.replay-track {
  position: relative;
  height: 22px;
}

/* Le rail, et le curseur natif par-dessus : le curseur porte l'accessibilité —
   clavier, lecteur d'écran, valeur —, le rail porte le dessin. Redessiner un
   curseur de toutes pièces aurait rendu le premier au prix du second. */
.replay-track__rail {
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);

  height: 8px;

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

.replay-track__fill {
  height: 100%;
  width: 0;

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

  transition: width var(--duration-fast) linear;
}

/* Les marques de prise. Elles ne bougent pas : elles disent, avant même qu'on
   ait lancé la lecture, où les graines sont tombées. */
.replay-track__captures {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.replay-track__capture {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;

  margin-left: -1.5px;
  border-radius: var(--radius-full);
}

.replay-track__capture.is-mine   { background: var(--color-outcome-won); }
.replay-track__capture.is-theirs { background: var(--color-outcome-lost); }

/* Le curseur natif, rendu invisible sauf sa poignée : c'est lui qu'on saisit,
   et c'est lui que le clavier pilote. */
.replay-track__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;

  appearance: none;
  background: none;
  cursor: pointer;
}

.replay-track__slider::-webkit-slider-runnable-track {
  height: 22px;
  background: none;
}

.replay-track__slider::-moz-range-track {
  height: 22px;
  background: none;
}

.replay-track__slider::-webkit-slider-thumb {
  appearance: none;

  width: 18px;
  height: 18px;
  margin-top: 2px;

  border: 2px solid var(--color-brand-cream);
  border-radius: var(--radius-full);
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.replay-track__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;

  border: 2px solid var(--color-brand-cream);
  border-radius: var(--radius-full);
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.replay-track__slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}


/* --- Les commandes -------------------------------------------------------- */

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

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

  width: 40px;
  height: 40px;

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

  transition: background var(--duration-fast), transform var(--duration-fast);
}

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

.replay-btn:active {
  transform: translateY(1px);
}

/* Le bouton de lecture est plus grand que les autres : c'est celui qu'on
   cherche, et le seul qu'on presse plusieurs fois de suite. */
.replay-btn--main {
  width: 54px;
  height: 54px;

  background: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);
}

.replay-btn--main:hover,
.replay-btn--main:focus-visible {
  box-shadow: var(--shadow-raised-amber-hover);
}

/* Une taille en PIXELS, et non en pourcentage : un pictogramme mesuré sur une
   boîte qui n'a pas de largeur à elle ne se centre pas — c'est ce qui
   décentrait le triangle de lecture. */
.replay-btn__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Deux dessins, chacun deux fois : le chevron avance et, retourné, recule ;
   la barre et son triangle vont au début et, en miroir, à la fin. Les deux
   bouts se répondent, et aucun ne ressemble aux pas d'un coup. */
.replay-btn__icon--back {
  transform: rotate(180deg);
}

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

/* Le bouton principal porte ses trois dessins ; « data-state » en montre un.
   Le triangle de lecture est dessiné un peu à droite du centre de son carré :
   c'est ce qui le fait paraître centré, l'œil pesant la pointe moins que la
   base. */
.replay-btn--main .replay-btn__icon {
  display: none;
  width: 24px;
  height: 24px;
}

.replay-btn--main[data-state="play"] .replay-btn__icon--play,
.replay-btn--main[data-state="pause"] .replay-btn__icon--pause,
.replay-btn--main[data-state="replay"] .replay-btn__icon--replay {
  display: block;
}


/* --- La vitesse ----------------------------------------------------------- */

.replay-speed {
  display: inline-flex;
  gap: 2px;

  margin-left: var(--space-sm);
  padding: 3px;

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

.replay-speed__btn {
  padding: var(--space-2xs) var(--space-sm);

  border: none;
  border-radius: var(--radius-full);
  background: none;

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

  transition: background var(--duration-fast), color var(--duration-fast);
}

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


/* --- Où l'on en est ------------------------------------------------------- */

.replay-position {
  margin: 0 0 0 var(--space-sm);

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

  /* La largeur est réservée : sans cela, passer de « Coup 9 » à « Coup 10 »
     décale toute la rangée de boutons d'un demi-caractère. */
  min-width: 9rem;
}

.replay-hint {
  margin: 0;

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

/* Une aide au clavier n'a de sens que là où il y en a un. */
@media (pointer: coarse) {
  .replay-hint {
    display: none;
  }
}


/* --- Écrans étroits et écrans bas ----------------------------------------- */

@media (max-width: 640px) {

  /* LES PORTRAITS SONT EN DIAGONALE, ET L'EN-TÊTE DOIT LES CONTOURNER
     Celui de l'adversaire est en haut à GAUCHE, celui du joueur en bas à
     DROITE. L'en-tête se décale donc à droite du premier, et la barre laisse
     sa droite au second. Sur un grand écran on pouvait dégager les deux côtés
     partout ; sur un téléphone, chaque pixel repris d'un côté où il n'y a rien
     est un pixel rendu au texte. */
  .replay__head {
    padding-left: var(--panel-reach, 118px);
    padding-right: var(--space-sm);
  }

  .replay-bar {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  /* La rangée du bas s'arrête avant le portrait du joueur, qui déborde du coin
     inférieur droit. Les commandes restent centrées dans ce qui reste. */
  .replay-controls {
    padding-right: calc(var(--panel-reach, 118px) - var(--space-sm));
  }

  .replay__title h1 {
    font-size: var(--font-size-base);
  }

  .replay-speed,
  .replay-position {
    margin-left: 0;
  }

  .replay-position {
    min-width: 0;
    width: 100%;
    text-align: center;
  }
}

/* Écran couché et bas — un téléphone tenu en travers : tout se resserre pour
   laisser au plateau ce qui lui revient. C'est le format le plus étroit du jeu,
   celui où la version 1 laissait les portraits recouvrir le plateau. */
@media (max-height: 560px) {

  /* « .replay-page .replay-bar » et non « .replay-bar » seul : les autres
     règles de la barre sur cette page ont cette précision, et l'une d'elles
     l'emporterait sinon par sa seule spécificité. */
  .replay-page .replay-bar {
    gap: var(--space-2xs);
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-xs);
  }

  .replay-btn {
    width: 34px;
    height: 34px;
  }

  .replay-btn--main {
    width: 44px;
    height: 44px;
  }

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

  .replay-btn--main .replay-btn__icon {
    width: 20px;
    height: 20px;
  }

  .replay-hint {
    display: none;
  }

  /* L'en-tête se réduit à une ligne : le titre suffit, l'état passe à côté. */
  .replay__head {
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
  }

  .replay__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .replay__title h1 {
    font-size: var(--font-size-base);
  }

  .replay__state {
    margin-top: 0;
  }

  /* La barre d'outils du bas se pose PAR-DESSUS le coin, là où le plateau ne
     va pas : sur un écran de trois cent soixante pixels de haut, une rangée de
     plus coûterait au plateau le tiers de ce qui lui reste. */
  .replay-page .game-tools {
    position: fixed;
    left: var(--space-xs);
    bottom: var(--space-xs);
    z-index: var(--z-content);
  }
}

/* Écran étroit ET bas à la fois — un petit téléphone couché. La rangée de
   commandes ne tient plus sur une ligne avec les vitesses : celles-ci passent
   dessous plutôt que d'écraser les boutons. */
@media (max-height: 560px) and (max-width: 700px) {

  .replay-controls {
    gap: var(--space-2xs);
  }

  .replay-speed__btn {
    padding: var(--space-2xs) var(--space-xs);
  }
}


/* La réserve du plateau.
   -----------------------------------------------------------------------------
   ON N'ÉCRIT ICI QUE CE QUE LA PAGE AJOUTE
   La place des deux panneaux de camp est déjà réservée par game-panel.css, et
   elle l'est SELON L'ORIENTATION : en largeur quand ils se font face sur les
   côtés, en hauteur quand ils s'empilent. L'écraser par une valeur fixe — ce
   qui était fait d'abord — donnait un plateau minuscule sur un téléphone tenu
   droit, la largeur y étant amputée de deux panneaux qui n'y sont pas.

   Ce qui reste à réserver est donc la seule chose que la page ajoute : la
   hauteur de son en-tête, de sa barre et des outils. Mesurés : 102 + 174 + 40,
   soit un peu plus de 300 px, et davantage quand la barre se replie.

   POURQUOI LE PLATEAU EST CENTRÉ, ET DONC LA RÉSERVE DOUBLÉE EN PORTRAIT
   En portrait, la réserve des panneaux se partage à parts égales au-dessus et
   au-dessous ; celle de la page, elle, s'ajoute en entier — l'en-tête et la
   barre ne sont pas symétriques autour du plateau, mais leur somme est ce
   qu'il ne faut pas occuper. */
.replay-page .board-container {
  --board-reserve-y: 320px;

  margin-bottom: 0;
}

@media (orientation: portrait) {
  .replay-page .board-container {
    /* UN SEUL PANNEAU, PAS DEUX
       Celui du HAUT tient dans la hauteur de l'en-tête, qui est déjà comptée
       dans les 320 px ; celui du BAS occupe la marge que la barre se réserve
       plus bas. Compter les deux — ce qui était fait d'abord — retranchait
       cent vingt pixels de trop et donnait un plateau de trente pixels par
       trou sur un petit téléphone. */
    /* UN PEU D'AIR SUR LES CÔTÉS
       Le plateau vise exactement toute la largeur : à trois cent vingt pixels,
       il la prend au pixel près et le moindre retrait de la page le fait
       déborder. Seize pixels lui rendent une marge, et coûtent deux pixels de
       trou sur un écran ordinaire. En paysage, la réserve des panneaux joue
       déjà ce rôle — voir game-panel.css. */
    --board-reserve-x: var(--space-md);

    --board-reserve-y: calc(var(--replay-corner, 96px) + 320px);
  }
}

/* Écran bas : la barre se resserre — boutons plus petits, aide au clavier
   masquée — et l'en-tête aussi. La réserve suit. */
@media (max-height: 560px) {
  .replay-page .board-container {
    --board-reserve-y: 255px;
  }
}

/* La marge de bas de page de la barre.

   SEULEMENT SUR UN ÉCRAN ASSEZ HAUT
   Cette marge de bas de page est un confort : sur un écran couché de trois cent
   soixante pixels, elle faisait déborder la page d'exactement sa propre hauteur.
   La condition évite d'avoir à la défaire plus bas, où l'ordre des règles
   décide et où l'on finit par ne plus savoir laquelle gagne. */
@media (min-height: 561px) {
  .replay-page .replay-bar {
    padding-bottom: var(--space-2xl);
  }
}


/* --- Analyser et partager --------------------------------------------------- */

.replay__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-xs);
}

/* « Analyser la partie » : la matière du sable, là où « Partager » porte l'ambre.
   Partager est le geste de cette page ; analyser en ouvre une autre. */
.replay__analyse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: none;

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

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-decoration: none;

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

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

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

@media (max-width: 560px) {
  .replay__analyse {
    padding: var(--space-xs);
  }
}

/* --- Le bouton de partage ------------------------------------------------- */

.replay__share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: none;

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

  border: none;
  border-radius: var(--radius-full);
  background: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  cursor: pointer;
}

.replay__share:hover,
.replay__share:focus-visible {
  box-shadow: var(--shadow-raised-amber-hover);
}

.replay__share-icon {
  width: 18px;
  height: 18px;
}

/* Sur un téléphone, le mot disparaît : le dessin suffit, et la place manque. */
@media (max-width: 560px) {
  .replay__share-label {
    display: none;
  }

  .replay__share {
    padding: var(--space-xs);
  }
}


/* =============================================================================
   LES DEUX COINS DU BAS SONT PRIS
   -----------------------------------------------------------------------------
   Le portrait du joueur déborde du coin inférieur DROIT, la barre d'outils tient
   le coin inférieur GAUCHE : tous deux sont posés en fixe, hors du flux. Sur un
   grand écran la barre du lecteur passe entre eux sans les toucher ; sur un
   téléphone, elle occupe toute la largeur et leur passerait dessous.

   Elle s'arrête donc AU-DESSUS des deux coins, et la réserve du plateau en tient
   déjà compte — c'est le terme « 2 × panel-reach » qu'elle porte en portrait.
   ============================================================================= */

@media (max-width: 640px) {

  /* « .replay-page .replay-bar », et non « .replay-bar » seul : la marge de bas
     de page est posée avec cette précision, et l'emporterait sinon. */
  .replay-page .replay-bar {
    padding-bottom: var(--replay-corner, 96px);
  }

  /* La rangée des commandes retrouve alors toute la largeur : ce qui la gênait
     était le portrait, qui n'est plus à sa hauteur. */
  .replay-controls {
    padding-right: 0;
  }
}

/* L'aide au clavier ne sert qu'à qui en a un, et prend une ligne entière : sous
   sept cents pixels de large, cette ligne vaut mieux au plateau. */
@media (max-width: 700px) {

  .replay-hint {
    display: none;
  }
}