/**
 * PlayAwale — Écran de choix
 * -----------------------------------------------------------------------------
 * La mascotte présente une liste, et le visiteur choisit : un niveau
 * d'adversaire, une façon de jouer à plusieurs. C'est le même écran, à ceci
 * près que les entrées changent.
 *
 * COMPOSANT, ET NON PAGE
 * Il était écrit dans pages/solo.css, sous les noms « level-picker » et
 * « level-button ». La page multijoueur devait s'y conformer sans pouvoir
 * l'atteindre : ou bien le recopier, ou bien l'en sortir. Il en est sorti, et
 * ses noms ne parlent plus de niveaux.
 *
 * UTILISATION
 *
 *     <section class="picker">
 *       <figure class="mascot-intro"> … </figure>
 *       <div class="picker__list">
 *         <button class="btn picker-button">
 *           <img class="picker-button__figure">   portrait ou pictogramme
 *           <span class="picker-button__name">    ce qu'on choisit
 *           <span class="picker-button__note">    une précision, discrète
 *
 * Le portrait et la note sont facultatifs : la grille garde ses colonnes
 * alignées d'une entrée à l'autre, qu'elles soient renseignées ou non.
 *
 * TROIS DISPOSITIONS
 * Une colonne de lignes larges par défaut, deux colonnes au-delà de 56,25 rem,
 * et des vignettes — portrait au-dessus du nom — sur téléphone. Le détail de
 * chacune, et les mesures qui les ont décidées, sont dans les commentaires
 * ci-dessous.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   CHOIX DU NIVEAU
   Les niveaux sont présentés du plus abordable au plus exigeant, dans l'ordre
   établi par le serveur d'après les taux de réussite observés.
   ============================================================================= */

.picker {
  width: 100%;
  max-width: min(92vw, 520px);
  text-align: center;
}

.picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Bouton de niveau : le rang à gauche, le nom au centre, le taux à droite.
   La grille garde les trois colonnes alignées d'un bouton à l'autre, quelle
   que soit la longueur du nom traduit. */
.picker-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);

  /* Le remplissage généreux du bouton principal serait excessif ici. */
  padding: var(--space-md) var(--space-lg);
  text-align: left;

  /* L'arrondi des blocs, et non celui des petits boutons : une ligne large qui
     garde des coins de dix pixels a l'air d'une barre, pas d'une carte. */
  border-radius: var(--radius-md);
}

/* Portrait de l'adversaire, à la place du numéro de niveau : on reconnaît
   ainsi le niveau à sa figure, la même qu'on retrouvera en jeu. */
.picker-button__figure {
  width: 2.2em;
  height: 2.2em;

  /* Le portrait n'est jamais déformé, et son fond circulaire fait office de
     pastille : aucune bordure ni couleur à ajouter. */
  object-fit: contain;
}

.picker-button__name {
  font-size: 0.95em;
}

/* La phrase qui caractérise un niveau, sous son nom : l'adversaire se présente
   — « Je vous aide à apprendre le jeu ». Elle a son corps à elle, et non celui
   de la note des modes : à 0,55 em, elle serait tombée sous les dix pixels dans
   une vignette de téléphone. */
.picker-button__tagline {
  display: block;
  margin-top: 0.2em;

  font-family: var(--font-body);
  font-size: 0.62em;
  font-weight: normal;
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}

/* Survol : il monte de deux pixels, comme tout ce qui se clique sur le site.

   POURQUOI CE N'EST PLUS « RIEN NE BOUGE »
   L'agrandissement de 5 % du bouton principal avait été neutralisé ici : sur
   une ligne large, il déplaçait le taux de réussite de plusieurs pixels et
   l'ensemble de la liste paraissait s'agiter. L'élévation qui l'a remplacé, elle,
   ne déplace rien horizontalement — la ligne monte d'un bloc. Il n'y a donc plus
   de raison de faire exception, et une exception de moins, c'est une règle de
   plus qui vaut partout.

   Le composant hérite ainsi du survol, du focus et du clic de .btn. */

/* Le dessin de l'entrée, logé dans un CREUX.

   Un trou du plateau, creusé dans le bois, à l'échelle d'un bouton : ombre
   portée à l'intérieur, liseré clair au bas. C'est le même vocabulaire que le
   jeu lui-même, et c'est ce qui fait qu'un menu ressemble ici à un plateau
   plutôt qu'à une barre d'outils.

   Il occupe la même colonne que le portrait d'un niveau : une liste porte l'un
   ou l'autre, jamais les deux. */
.picker-button__icon {
  display: grid;
  place-items: center;

  width: 2.1em;
  height: 2.1em;

  background-color: rgba(60, 39, 35, 0.08);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hollow);
}

.picker-button__icon svg {
  display: block;
  width: 58%;
  height: 58%;
}

/* Le chevron dit qu'il y a un « après ». Il avance à l'approche du curseur, et
   ne paraît que sur une entrée ouverte : rien ne s'ouvrirait sur une autre, et
   c'est la mention « bientôt » qui y prend sa place. */
.picker-button__chevron {
  width: 1em;
  height: 1em;
  opacity: 0.4;

  transition:
    transform var(--duration-base) ease,
    opacity var(--duration-base) ease;
}

.picker-button:hover .picker-button__chevron,
.picker-button:focus-visible .picker-button__chevron {
  opacity: 0.75;
  transform: translateX(3px);
}

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

  .picker-button__chevron {
    transition: none;
  }

  .picker-button:hover .picker-button__chevron,
  .picker-button:focus-visible .picker-button__chevron {
    transform: none;
  }
}

/* Une entrée fermée garde la matière du site, en retrait : la règle vaut pour
   TOUS les boutons du site et vit dans components/button.css, sur l'attribut
   « aria-disabled ». Il ne reste ici que la mention qui l'accompagne. */


/* Ce que l'entrée propose, en une ligne, sous son nom : la façon de jouer sur
   l'écran des modes, la façon d'ouvrir un salon en réseau, ce qu'une clé de
   sage donne.

   Police de texte et non d'affichage : une phrase se lit mieux ainsi qu'un
   libellé. Elle est DANS le nom plutôt qu'à côté, pour que les deux restent
   ensemble quand la grille se resserre — et « block » est ce qui la met sous le
   nom au lieu de la coller à sa suite. */
.mode-note {
  display: block;
  margin-top: var(--space-2xs);

  font-family: var(--font-body);
  font-size: 0.55em;
  font-weight: normal;
  line-height: var(--line-height-tight);

  /* Le gris du texte secondaire perdrait son contraste sur un bouton en
     retrait : la couleur est héritée du bouton, simplement adoucie. */
  opacity: 0.75;
}

/* Taux de réussite : information secondaire, volontairement discrète. Elle
   occupe la troisième colonne, celle du chevron d'une entrée ouverte. */
.picker-button__note {
  font-family: var(--font-body);
  font-size: 0.7em;
  font-weight: normal;
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* La mention elle-même : discrète mais nette, elle se lit du premier coup
   d'œil sans concurrencer le nom. Elle occupe la place qu'un niveau donne à son
   taux de réussite, et une entrée ouverte à son chevron. */
.mode-soon {
  padding: 0.32em 0.9em;

  font-family: var(--font-body);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  opacity: 0.72;
}


/* =============================================================================
   LA MASCOTTE PRÉSENTE LES NIVEAUX
   -----------------------------------------------------------------------------
   Une case de bande dessinée : la bulle et le lion. Elle explique ce que
   signifie le pourcentage affiché sur chaque bouton — une information qui
   alourdirait les boutons eux-mêmes.

   Deux dispositions, décrites du plus petit écran au plus grand :

     · téléphone      la bulle au-dessus, la mascotte en dessous, pointe vers le
                      bas ;
     · tablette et +  la bulle à GAUCHE, la mascotte à droite, pointe vers la
                      droite.

   L'ordre du balisage place l'image en premier, ce qui est le bon ordre pour un
   lecteur d'écran : il annonce qui parle avant ce qui est dit. La bulle passe
   devant à l'écran par « order », sans que le balisage change.
   ============================================================================= */

.mascot-intro {
  /* Côté de la mascotte. Le plancher la garde lisible sur un téléphone, le
     plafond l'empêche d'écraser la liste des niveaux sur un grand écran. */
  --mascot-size: clamp(88px, 34vw, 128px);

  display: grid;
  justify-items: center;
  gap: var(--space-sm);

  /* Une figure porte des marges par défaut. */
  margin: 0 0 var(--space-lg);
  text-align: center;
}

.mascot-intro__figure {
  display: block;
  width: var(--mascot-size);

  /* L'image est carrée : la hauteur suit, sans déformation. */
  height: auto;
}

/* L'aspect de la bulle — fond, trait, coins, ombre — vient du composant
   commun components/speech-bubble.css. Il ne reste ici que sa place dans la
   grille et la direction de sa pointe.

   POURQUOI LA POINTE N'EST PAS UN MODIFICATEUR ICI
   Elle change de côté selon la largeur de l'écran, et une classe posée dans le
   balisage ne peut pas suivre une media query. Le composant fournit donc la
   boîte, et cet usage décrit sa pointe. */
.mascot-intro__bubble {
  order: -1;
}

/* Sur téléphone, la pointe part du bas de la bulle et vise la tête du lion. */
.mascot-intro__bubble::before {
  bottom: -14px;
  left: 50%;
  margin-left: -12px;
  border-width: 14px 12px 0 12px;
  border-color: var(--color-brand-dark) transparent transparent transparent;
}

.mascot-intro__bubble::after {
  bottom: -11px;
  left: 50%;
  margin-left: -10px;
  border-width: 12px 10px 0 10px;
  border-color: var(--color-surface) transparent transparent transparent;
}

/* Première phrase : elle situe la liste. */
.mascot-intro__lead {
  margin: 0 0 var(--space-2xs);

  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.4vw, 1.1rem);
  line-height: 1.25;
}

/* Seconde phrase : l'explication du pourcentage, volontairement plus discrète. */
.mascot-intro__text {
  margin: 0;

  font-size: clamp(0.78rem, 2.1vw, 0.92rem);
  line-height: 1.4;
  color: var(--color-text-muted);
}


/* -----------------------------------------------------------------------------
   Tablette et au-delà : la bulle passe à gauche, la mascotte à droite.
   -------------------------------------------------------------------------- */
@media (min-width: 30.0625rem) {

  .mascot-intro {
    --mascot-size: clamp(120px, 20vw, 190px);

    grid-template-columns: 1fr var(--mascot-size);
    align-items: center;
    gap: var(--space-md);
    text-align: left;
  }

  /* La pointe bascule sur le flanc droit de la bulle et vise le lion. */
  .mascot-intro__bubble::before {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -14px;
    margin: -12px 0 0;
    border-width: 12px 0 12px 14px;
    border-color: transparent transparent transparent var(--color-brand-dark);
  }

  .mascot-intro__bubble::after {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -11px;
    margin: -10px 0 0;
    border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent var(--color-surface);
  }
}


/* -----------------------------------------------------------------------------
   Grand écran : la page doit tenir sans défilement.

   Six niveaux empilés font près de six cents pixels, auxquels s'ajoute la
   mascotte : sur un écran d'ordinateur, où la hauteur utile dépasse rarement
   huit cents pixels, la liste débordait. La largeur, elle, était largement
   inemployée. Les niveaux passent donc sur deux colonnes, ce qui ramène la
   liste à trois rangées.

   La case de bande dessinée, elle, ne suit pas cet élargissement : une bulle de
   huit cents pixels de large pour deux phrases serait ridicule. Elle garde sa
   largeur et se centre.
   -------------------------------------------------------------------------- */
@media (min-width: 56.25rem) {

  .picker {
    /* Assez large pour que les noms de niveau tiennent sur une seule ligne.
       Mesuré : un bouton de 492 px ne laisse que 224 px au nom, où
       « Voyageur des Sillons » en demande 245. À 1 120 px, chaque bouton en
       fait 552 et le nom dispose de 284 px. */
    max-width: min(92vw, 1120px);
  }

  .picker__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mascot-intro {
    max-width: 620px;
    margin-inline: auto;
  }
}


/* -----------------------------------------------------------------------------
   Téléphone : des vignettes, sur deux ou trois colonnes.
   -----------------------------------------------------------------------------
   Sur une seule colonne, les huit niveaux demandaient de faire défiler la page
   pour voir le dernier — et le premier réflexe, sur un écran de choix, est de
   vouloir tout comparer d'un coup d'œil.

   LA CONDITION COUVRE LES DEUX ORIENTATIONS
   Un téléphone couché est large sans être un ordinateur : il ne relevait ni du
   « petit écran » ni du « grand », et retombait sur la liste en une seule
   colonne. Les deux cas partagent donc la même règle de vignette, et seul le
   nombre de colonnes les distingue — deux debout, quatre couché.

   POURQUOI UNE VIGNETTE PLUTÔT QU'UNE LIGNE RÉTRÉCIE
   Une ligne « portrait, nom, taux » réduite à cent soixante-dix pixels ne
   laisse qu'une centaine de pixels au nom : « Voyageur des Sillons » s'y
   casserait en trois morceaux. Retourné à la verticale — le portrait au-dessus,
   le nom en dessous, le taux sous le nom — le même nom dispose de toute la
   largeur de la vignette et tient sur deux lignes.

   Les vignettes d'une même rangée gardent la même hauteur : la grille les
   étire, et le contenu se centre. Un niveau sans taux affiché ne creuse donc
   pas de trou dans la rangée.
   -------------------------------------------------------------------------- */
@media (max-width: 46rem), (orientation: landscape) and (max-height: 34rem) {

  .picker__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .picker-button {
    /* Une seule colonne : tout s'empile. */
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: var(--space-2xs);

    padding: var(--space-sm) var(--space-xs);
    text-align: center;

    /* Le corps du bouton principal — 24 px — est fait pour un bouton qui barre
       la page. Dans une vignette de 174 px, il forçait chaque nom sur deux ou
       trois lignes et portait les vignettes à 190 px de haut : les huit
       niveaux occupaient alors PLUS de place qu'en une seule colonne, ce qui
       manquait le but. À 16 px, la plupart des noms tiennent sur une ligne et
       la liste entière fait 530 px. */
    font-size: 1rem;
  }

  /* Le portrait grandit : c'est lui qu'on reconnaît en premier, et la vignette
     lui laisse la place que la ligne ne lui donnait pas. */
  .picker-button__figure {
    width: 3.6em;
    height: 3.6em;
    margin-bottom: var(--space-2xs);
  }

  /* Empilé sous le nom, le chevron ne désignerait plus rien : la vignette
     entière est la cible, et on le voit bien. */
  .picker-button__chevron {
    display: none;
  }

  .picker-button__name {
    /* Deux lignes serrées valent mieux qu'une ligne coupée au milieu d'un mot.
       « balance » répartit les mots également entre elles ; les navigateurs qui
       l'ignorent coupent simplement au dernier mot, ce qui reste correct. */
    line-height: 1.2;
    text-wrap: balance;
  }

  /* Dans la vignette, le corps du bouton descend à 16 px : la phrase remonte à
     douze pixels pour rester lisible, et ses lignes s'équilibrent comme celles
     du nom. */
  .picker-button__tagline {
    margin-top: 0.3em;
    font-size: 0.78em;
    text-wrap: balance;
  }
}


/* -----------------------------------------------------------------------------
   Téléphone couché : quatre colonnes.
   -----------------------------------------------------------------------------
   La largeur ne manque plus, la hauteur si : quatre colonnes ramènent les huit
   niveaux de quatre rangées à DEUX, et le choix tient d'un seul regard.

   Le choix s'élargit pour l'occasion — 520 px suffisaient à deux colonnes, pas
   à quatre — sans aller jusqu'au bord de l'écran. Sur un téléphone de 844 px,
   chaque vignette en fait alors 193, de quoi porter « Voyageur des Sillons »
   sur une seule ligne.
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 34rem) {

  .picker {
    max-width: min(96vw, 900px);
  }

  .picker__list {
    grid-template-columns: repeat(4, 1fr);
  }

  /* La case de bande dessinée se fait plus discrète.

     Elle explique ce que signifie le pourcentage : utile, mais une fois lue.
     À sa taille de tablette elle occupait la moitié d'un écran couché et
     repoussait la première rangée de niveaux hors de vue — or c'est elle qu'on
     vient chercher. Réduite, elle laisse voir une rangée entière et le haut de
     la suivante, ce qui indique du même coup qu'il y en a une. */
  .mascot-intro {
    --mascot-size: clamp(96px, 28vh, 128px);

    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
  }
}