/**
 * PlayAwale — Page « Jouer à deux »
 * -----------------------------------------------------------------------------
 * Deux joueurs, un seul appareil.
 *
 * ELLE NE REDESSINE RIEN
 * Le plateau, les panneaux, les scores, les chronomètres, la barre d'outils et
 * les fenêtres viennent tous des composants du jeu, et sont ceux du solo. Cette
 * feuille n'ajoute qu'une seule chose, qui n'existe qu'ici : la présentation
 * retournée du camp du haut, sur appareil tactile.
 *
 * La pendule du camp du haut y était aussi, jusqu'à ce que le jeu en réseau la
 * réclame à son tour. Elle a rejoint components/game-panel.css, avec le reste
 * du panneau : deux modes la voulaient, elle n'appartenait donc plus à l'un.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   MISE EN PAGE
   La même que le solo : une colonne centrée autour du plateau.
   ============================================================================= */

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


/* =============================================================================
   SUR UN APPAREIL TACTILE, LE CAMP DU HAUT EST PRÉSENTÉ À L'ENVERS
   -----------------------------------------------------------------------------
   POURQUOI « pointer: coarse » PLUTÔT QU'UNE DÉTECTION DU MODÈLE
   Ce qui compte n'est pas la marque de l'appareil mais la façon dont les deux
   joueurs se tiennent. Devant un ordinateur, ils sont côte à côte et regardent
   l'écran dans le même sens : rien ne doit tourner. Autour d'un téléphone ou
   d'une tablette posée à plat, ils se font face, et le second lit tout à
   l'envers.
   « pointer: coarse » dit exactement cela — on joue au doigt, donc l'appareil
   est posé entre les deux. Aucune liste de modèles à tenir à jour, aucune
   chaîne d'agent utilisateur à interpréter, et la règle reste vraie sur les
   appareils qui n'existent pas encore.

   CE QUI TOURNE, ET QUAND
   Ce qui appartient au joueur d'en face tourne en permanence : son portrait et
   son score sont à lui, quel que soit le tour.
   Ce qui appartient au PLATEAU ne tourne que pendant son tour : le décompte du
   semis et la pastille de comptage s'adressent à celui qui joue, et doivent se
   lire à l'endroit pour lui — d'où « data-turn », que l'affichage écrit sur le
   plateau à chaque changement de main.

   Le plateau lui-même ne tourne pas : il est symétrique, et le faire pivoter
   ne ferait qu'échanger les deux camps.
   ============================================================================= */

@media (pointer: coarse) {

  /* Le portrait et le score du camp du haut, en permanence. */
  .duo-page .ai-panel__avatar,
  .duo-page .ai-panel__score,
  .duo-page .ai-panel .panel-clock {
    transform: rotate(180deg);
  }

  /* -----------------------------------------------------------------------
     Le score du joueur 2 remonte en haut de l'écran
     -----------------------------------------------------------------------
     Le camp du bas porte son score au BAS de son portrait, du côté du bord de
     l'écran. Pour le joueur d'en face, qui lit tout à l'envers, l'équivalent
     est le HAUT de son portrait — donc le haut de l'écran.

     Posé en bas comme sur ordinateur, il se serait retrouvé côté plateau, là où
     son camarade a le bord : les deux camps n'auraient plus été en miroir.
     -------------------------------------------------------------------- */
  .duo-page .ai-panel__score {
    top: 0;
    bottom: auto;
  }

  /* Le décompte du semis et la pastille de comptage, pendant le tour du camp
     du haut seulement. */
  .duo-page .board[data-turn='2'] .seed-counter,
  .duo-page .board[data-turn='2'] .seed-count {
    transform: rotate(180deg);
  }

  /* Le décompte du semis est centré par une translation : la rotation doit s'y
     ajouter, sans quoi elle l'écraserait et la pastille sauterait dans le trou.
     Voir components/board.css. */
  .duo-page .board[data-turn='2'] .seed-counter {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}