/**
 * PlayAwale — Les commandes du lecteur de parties
 * -----------------------------------------------------------------------------
 * Les boutons ronds du lecteur — début, précédent, lecture, suivant, fin — et
 * le bouton principal qui montre, selon « data-state », lecture, pause ou
 * revoir. Voir inc/partials/replay-bar.php et assets/js/game/replay-player.js.
 *
 * Sortis de pages/games.css TELS QUELS le 30/09/2026, quand le lecteur de coup
 * de pieges.php a eu besoin des mêmes boutons. Les réglages propres à la page
 * d'une partie revue — l'écran couché, notamment — restent dans games.css,
 * chargée après ce composant.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* --- 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;
}