/**
 * PlayAwale — L'espace du joueur
 * -----------------------------------------------------------------------------
 * Le jeton en haut à droite de l'écran, son sous-menu, et la place qu'il demande
 * à la page sur un téléphone.
 *
 * COMPOSANT, ET NON PAGE
 * Il était écrit dans pages/home.css, sous le nom « home-top ». Le choix du niveau
 * et « Revoir des parties » le portent aussi : il en est sorti, et il n'est plus
 * écrit qu'ici. Son balisage est dans inc/partials/player-space.php.
 *
 * UN JETON, PAS UN BOUTON DE JEU
 * La matière des petits jetons du site — sable translucide, arête claire, ombre —
 * et le corps du texte courant : c'est une destination, pas une invitation à
 * jouer. Ni grand bouton ni ambre, qui restent à ce qu'on vient faire sur chaque
 * page.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   LA PLACE
   -----------------------------------------------------------------------------
   Contre le bord droit de la FENÊTRE : le jeton est posé avant la page, en absolu
   contre le corps du document — dont la largeur est celle de la fenêtre, barre de
   défilement déduite. Il passe au-dessus de la page, qui forme sa propre couche.
   ============================================================================= */

.player-space {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  z-index: var(--z-overlay);
}

/* LA RÉSERVE
   Sur un grand écran, le haut des pages occupe le centre et laisse le coin libre.
   Sur un téléphone, il remplit la largeur : la page descend de la hauteur du
   jeton — sa marge haute et son corps —, pas davantage, et ses propres marges
   s'ajoutent ensuite.

   Une VARIABLE, et non une marge écrite en dur : une page qui retire le jeton à
   un moment — le choix du niveau, pendant une partie — remet la réserve à zéro
   sans avoir à connaître la mesure. Voir pages/solo.css. */
.has-player-space {
  --player-space-reserve: 0px;
}

.has-player-space > .page {
  margin-top: var(--player-space-reserve);
}

@media (max-width: 46rem) {

  .has-player-space {
    --player-space-reserve: calc(var(--space-sm) + 1.75rem);
  }
}

/* FLOTTANT, SUR UN ORDINATEUR SEULEMENT
   Sur un ordinateur, le jeton reste en haut à droite pendant qu'on fait défiler
   la page : on retrouve son compte sans remonter. Un seul changement de place —
   « fixed » au lieu de « absolute » —, les mêmes distances au bord, rapportées à
   la fenêtre.

   QU'EST-CE QU'UN ORDINATEUR, POUR LA FEUILLE
   Un pointeur précis qui sait survoler — une souris, un pavé tactile —, et une
   fenêtre plus large que la réserve : les trois ensemble. La largeur seule ne
   suffit pas, une tablette couchée la dépasse ; le pointeur seul non plus, une
   fenêtre étroite d'ordinateur a le haut de page d'un téléphone, et la réserve
   n'y vaut que pour un jeton qui ne bouge pas. Sur un téléphone ou une tablette,
   il reste posé en haut de la page et s'en va avec elle : sur un petit écran, un
   jeton qui ne part jamais recouvrirait ce qu'on lit.

   UN VERRE DÉPOLI
   Immobile, il passe au-dessus du contenu qui défile. Le flou des cartes du site
   — cinq pixels — adoucit ce qu'on voit au travers, sans changer sa couleur. */
@media (min-width: 46.0625rem) and (hover: hover) and (pointer: fine) {

  .player-space {
    position: fixed;
  }

  .player-space__toggle {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}


/* =============================================================================
   LE JETON
   -----------------------------------------------------------------------------
   C'est le « summary » du menu : son triangle natif s'efface, un chevron du site
   le remplace — tourné vers le bas, puis vers le haut une fois ouvert.
   ============================================================================= */

.player-space__menu {
  position: relative;
}

.player-space__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;

  padding: 0.4em 0.85em;

  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  white-space: nowrap;

  background-color: rgba(240, 225, 209, 0.72);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-raised);

  list-style: none;
  cursor: pointer;
  user-select: none;

  transition:
    transform var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    background-color var(--duration-base) ease;
}

.player-space__toggle::-webkit-details-marker {
  display: none;
}

.player-space__toggle::marker {
  content: '';
}

.player-space__toggle:hover,
.player-space__toggle:focus-visible {
  background-color: var(--color-brand-amber-light);
  box-shadow: var(--shadow-raised-hover);
  transform: translateY(-2px);
}

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

/* La silhouette, pour qui n'a pas de visage. */
.player-space__icon {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  opacity: 0.65;
}

.player-space__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Le visage d'une clé de sage, à la place du dessin : un médaillon rond, cerclé
   du fond du jeton, un peu plus grand que l'icône — on se reconnaît. */
.player-space__face {
  flex: none;
  width: 1.7em;
  height: 1.7em;
  margin: -0.3em 0 -0.3em -0.4em;

  object-fit: contain;
  background-color: var(--color-sand-100);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-surface);
}

.player-space__chevron {
  flex: none;
  width: 0.8em;
  height: 0.8em;
  opacity: 0.6;

  transform: rotate(90deg);
  transition: transform var(--duration-base) ease;
}

.player-space__menu[open] .player-space__chevron {
  transform: rotate(-90deg);
}


/* =============================================================================
   LE SOUS-MENU
   -----------------------------------------------------------------------------
   Une petite carte calée sous le bord droit du jeton, de la matière des cartes du
   site, avec le survol à l'ambre clair des jetons.
   ============================================================================= */

.player-space__list {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  z-index: var(--z-overlay);

  min-width: 12rem;
  margin: 0;
  padding: var(--space-2xs);
  list-style: none;
  text-align: left;

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

.player-space__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);

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

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-decoration: none;

  border-radius: var(--radius-sm);
  transition: background-color var(--duration-base) ease;
}

.player-space__item:hover,
.player-space__item:focus-visible {
  background-color: var(--color-brand-amber-light);
}

.player-space__item-icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  opacity: 0.65;
}

.player-space__item-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* =============================================================================
   SANS ANIMATION
   ============================================================================= */

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

  .player-space__toggle {
    transition: background-color var(--duration-base) ease;
  }

  .player-space__toggle:hover,
  .player-space__toggle:focus-visible {
    transform: none;
  }

  .player-space__chevron,
  .player-space__item {
    transition: none;
  }
}