/**
 * PlayAwale — Page « Multijoueur »
 * -----------------------------------------------------------------------------
 * Écran de choix entre les façons de jouer à plusieurs : même écran, réseau,
 * tournoi.
 *
 * ELLE REPREND L'ÉCRAN DE CHOIX DU SOLO, ELLE NE LE REFAIT PAS
 * La mise en page, la mascotte, la liste et ses trois dispositions viennent de
 * components/picker.css ; la barre d'outils de components/game-tools.css.
 * Cette feuille n'ajoute que deux choses qui n'existent qu'ici : la ligne
 * d'explication sous le nom d'un mode, et l'aspect d'un mode pas encore ouvert.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

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

/* La page reprend la disposition de l'écran de jeu — colonne centrée — sans en
   être un : elle ne porte ni plateau ni panneaux. */
.multiplayer-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}


/* =============================================================================
   LES MODES
   ============================================================================= */

/* UNE SEULE COLONNE, QUEL QUE SOIT L'ÉCRAN
   Le composant passe à deux colonnes au-delà de 56,25 rem : c'est ce qu'il faut
   pour huit niveaux, qui demanderaient sinon de faire défiler la page. Trois
   modes n'en ont pas besoin, et la deuxième colonne y laisserait un orphelin.

   Une colonne les met en outre dans l'ordre où ils viendront — le même écran,
   puis le réseau, puis le tournoi —, ce que deux colonnes brouillent. */
.multiplayer-page .picker__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Le panneau s'élargit à 1 120 px sur grand écran pour loger deux colonnes.
   Sur une seule, il rendrait des boutons démesurément longs : il garde donc la
   largeur qu'il a partout ailleurs. */
@media (min-width: 56.25rem) {

  .multiplayer-page .picker {
    max-width: min(92vw, 620px);
  }
}

/* « dessin, nom, chevron » : les trois colonnes du composant, dans l'ordre où
   l'accueil les pose déjà. Un mode fermé remplace son chevron par la mention
   « bientôt », à la place exacte où le solo pose son taux de réussite — la
   grille, elle, ne change pas. */
.multiplayer-page .picker-button {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* La ligne d'explication sous le nom d'un mode — « .mode-note » — vivait ici
   jusqu'à ce que le choix d'un salon en réseau la réclame à son tour. Elle a
   rejoint components/picker.css : deux pages la voulaient, elle n'appartenait
   donc plus à celle-ci. */

/* La mention « bientôt » et le retrait d'une entrée fermée ont rejoint
   components/picker.css : l'accueil les voulait aussi, et deux pages qui
   décrivent la même chose finissent toujours par diverger. */


/* =============================================================================
   ADAPTATION AUX PETITS ÉCRANS
   ============================================================================= */

/* En vignette — le composant empile portrait, nom et note sous 46 rem —, la
   ligne d'explication ferait des vignettes trop hautes. Le nom et la mention
   d'attente suffisent à choisir. */
@media (max-width: 46rem), (orientation: landscape) and (max-height: 34rem) {

  .multiplayer-page .picker-button {
    grid-template-columns: 1fr;
  }

  .mode-note {
    display: none;
  }
}