/* =============================================================================
   PlayAwale — La fenêtre qui prévient d'une invitation à jouer
   -----------------------------------------------------------------------------
   ELLE EST UN COMPOSANT, ET NON UNE PIÈCE DU TABLEAU DE BORD. Elle vivait dans
   pages/dashboard.css tant qu'elle ne paraissait que là ; elle paraît désormais
   sur TOUTE page ouverte par quelqu'un qui peut être invité — y compris pendant
   une partie contre la machine, qui est justement le moment où l'on est
   disponible. Voir inc/partials/invite.php.

   Le préfixe « dash- » lui reste, faute de mieux : le renommer obligerait à
   toucher au script, au balisage et à la documentation pour un gain de nom. Ce
   commentaire dit ce que le préfixe ne dit plus.

   @package   PlayAwale
   @version   2.0
   @author    Nicolas Lion — Développeur web — https://nlion.fr
   @copyright 2026 Nicolas Lion
   ========================================================================== */

/* =============================================================================
   OÙ ELLE SE POSE, ET POURQUOI ELLE TIENT SUR DEUX RANGÉES
   -----------------------------------------------------------------------------
   Posée en bas à DROITE ; les raccourcis du site vivent en bas à gauche — voir
   components/game-tools.css. Aucun des deux ne recouvre l'autre.

   CE N'EST PAS UNE FENÊTRE MODALE : elle ne recouvre rien, ne prend pas le
   foyer, n'empêche aucun clic. Une invitation est une proposition, pas une
   sommation.

   -----------------------------------------------------------------------------
   DEUX RANGÉES, ET C'EST UNE CORRECTION MESURÉE
   -----------------------------------------------------------------------------
   Signalé d'abord « trop gros bouton, fenêtre trop grosse », puis « mal formée ».
   Les deux venaient du même endroit : TOUT TENAIT SUR UNE LIGNE — visage, nom,
   deux boutons, croix.

       visage                       34 px
       bouton « Rejoindre »         95 px
       bouton « Pas maintenant »   131 px
       croix                        30 px
       marges et écarts             68 px
       ----------------------------------
       total                       358 px   dans une carte de 304

   Cinquante-quatre pixels de trop AVANT la première lettre du nom. Et le nom ne
   protestait pas : « min-width: 0 » le laissait s'écraser à rien, puis
   « overflow-wrap: anywhere » le brisait lettre à lettre. D'où « mal formée ».

   Une carte de coin d'écran ne peut pas porter cinq choses de front. Les gestes
   descendent donc d'une rangée — la forme ordinaire d'une notification : on lit
   QUI, puis on décide.
   ========================================================================== */

.dash-invite {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-overlay);

  /* UNE GRILLE PLUTÔT QU'UNE RANGÉE QUI SE REPLIE : les places sont NOMMÉES, et
     rien ne se décale le jour où un morceau manque. C'est pourquoi le visage est
     toujours posé, même sans portrait à dessiner. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "face words close"
    "acts acts  acts";
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;

  width: max-content;
  max-width: min(20rem, calc(100vw - 32px));
  padding: 10px 12px;

  background: var(--color-surface);
  border: 1px solid var(--color-brand-amber);
  border-radius: var(--radius-md);

  /* L'ombre la DÉTACHE de la page : sans elle, une carte claire posée sur un
     fond clair se lit comme un bloc du contenu, et l'œil ne la remarque pas. */
  box-shadow: 0 6px 24px rgba(61, 42, 23, 0.22);

  animation: dash-invite-entre 220ms ease-out;
}

/* ELLE ARRIVE, ELLE NE SURGIT PAS : un glissement court dit « ceci vient
   d'arriver » sans faire sursauter. */
@keyframes dash-invite-entre {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* On respecte le réglage du système : qui a demandé moins d'animation la voit
   paraître, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .dash-invite {
    animation: none;
  }
}

.dash-invite__face {
  grid-area: face;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.45);
}

.dash-invite__words {
  grid-area: words;

  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* Le nom se coupe par un trait plutôt que de forcer la carte à s'élargir. On ne
   le brise PLUS n'importe où : « anywhere » était ce qui donnait, une fois la
   place perdue, une colonne d'une lettre par ligne. */
.dash-invite__name {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow-wrap: break-word;
}

/* La phrase est plus petite que le nom : c'est le NOM qu'on cherche des yeux,
   la phrase ne fait que l'expliquer. */
.dash-invite__note {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--color-text-muted);
}

/* La croix garde 30 px de surface utile, même si le signe est petit. Elle est
   calée en HAUT de sa case : sur deux lignes de texte, la centrer la ferait
   flotter au milieu du nom. */
.dash-invite__close {
  grid-area: close;
  align-self: start;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;
  padding: 0;

  background: none;
  border: none;
  border-radius: var(--radius-full);

  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.dash-invite__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

/* LA RANGÉE DES GESTES, alignée à droite comme partout ailleurs sur le site :
   le geste qu'on fait le plus souvent est le dernier atteint par le pouce. */
.dash-invite__acts {
  grid-area: acts;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* LES DEUX BOUTONS REPRENNENT LEUR TAILLE : le bouton ordinaire du site porte
   « padding: 15px 75px », une mesure faite pour un appel à l'action au milieu
   d'une page. Ils gardent 32 px de hauteur utile, sous quoi on les rate au
   doigt. */
.dash-invite__go,
.dash-invite__no {
  padding: 7px 14px;
  font-size: 0.8rem;
  min-height: 32px;
  border-radius: var(--radius-full);
}

/* SUR UN TÉLÉPHONE, elle prend la largeur et se pose AU-DESSUS des raccourcis
   plutôt qu'à côté. Les deux boutons se partagent alors la rangée : les serrer
   à droite sur un écran étroit les rendrait difficiles à viser. */
@media (max-width: 30rem) {
  .dash-invite {
    right: 10px;
    left: 10px;
    bottom: 84px;
    width: auto;
    max-width: none;
  }

  .dash-invite__go,
  .dash-invite__no {
    flex: 1 1 8rem;
  }
}


/* =============================================================================
   « UN JOUEUR VOUS ATTEND » — la partie publique proposée (section 75)
   -----------------------------------------------------------------------------
   Le cadre est celui de l'invitation entre amis, tel quel. Ce qui lui est
   propre : le visage porte le drapeau du joueur qui attend, posé sur son coin —
   le nom, lui, n'est jamais montré.
   ============================================================================= */

.net-call__face {
  grid-area: face;
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
}

.net-call__flag {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--color-surface);
}