/* ============================================================
   (Frontend)   Common/CSS/joueur-mini.css
   Z7-JOUEUR-MINI  —  UNE IDENTITE DE JOUEUR, EN UNE LIGNE
   ============================================================

   CE QU'IL EST. Un petit cadre qui dit QUI est quelqu'un : une image
   de profil, un pseudo, et rien d'autre. Il tient sur une ligne et ne
   grandit pas quand on le remplit.

   SES DEUX ETATS, ET LA SEULE CHOSE QUI COMPTE ENTRE EUX. Masque, il
   montre une silhouette neutre et une BARRE a la place du pseudo.
   Revele, il montre la vraie image et le vrai pseudo. Les deux etats
   ont EXACTEMENT la meme geometrie : meme hauteur, meme largeur de
   cadre, meme ligne de base. Payer un Snipe ne doit pas faire sauter
   la carte.

   ⚠️  CE QUI EST MASQUE N'EST PAS UN PSEUDO FLOUTE.
   `.z7-joueur-mini-nom--masque` est un element VIDE : ce qu'on voit est
   un degrade dessine en CSS. Il ne contient aucune donnee, et sa
   largeur est FIXE — elle ne dit donc rien de la longueur du vrai
   pseudo. Mettre le vrai nom ici pour le flouter reviendrait a le
   livrer : un `filter: blur()` se retire en un clic dans l'inspecteur.

   D'OU VIENT LA PROTECTION. Elle n'est pas dans cette feuille. Le
   serveur (`z7-backend/utils/snipes.js`, `masquerLigne`) n'envoie PAS
   le pseudo d'un adversaire masque : il met un libelle a sa place et
   annule l'avatar. Cette feuille ne fait que dessiner l'absence.
   ============================================================ */

.z7-joueur-mini {
    /*  L'UNITE. Tout ce qui suit en est un multiple, pour qu'un
        appelant puisse reduire le cadre entier d'une seule valeur. */
    --z7-jm-u: 1px;

    display: inline-flex;
    align-items: center;
    gap: calc(7 * var(--z7-jm-u));
    min-width: 0;
    max-width: 100%;
    padding: calc(3 * var(--z7-jm-u)) calc(8 * var(--z7-jm-u)) calc(3 * var(--z7-jm-u)) calc(3 * var(--z7-jm-u));
    border-radius: calc(20 * var(--z7-jm-u));
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/*  L'IMAGE DE PROFIL. Un rond, toujours de la meme taille — c'est lui
    qui fixe la hauteur du cadre, dans les deux etats. */
.z7-joueur-mini-pfp {
    flex: 0 0 auto;
    width: calc(20 * var(--z7-jm-u));
    height: calc(20 * var(--z7-jm-u));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: calc(9 * var(--z7-jm-u));
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
}
.z7-joueur-mini-pfp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.z7-joueur-mini-pfp svg { width: calc(12 * var(--z7-jm-u)); height: calc(12 * var(--z7-jm-u)); color: rgba(255, 255, 255, 0.4); }

/*  LE PSEUDO. `min-width: 0` pour qu'il puisse se reduire, et une
    hauteur de ligne EXPLICITE : c'est elle qui garantit que la barre
    du masque occupe exactement la place du texte. */
.z7-joueur-mini-nom {
    min-width: 0;
    font-family: Arial, sans-serif;
    font-size: calc(11 * var(--z7-jm-u));
    font-weight: 900;
    line-height: calc(13 * var(--z7-jm-u));
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   L'ETAT MASQUE
   ------------------------------------------------------------ */

/*  L'image de profil masquee garde l'or de cet etat — c'est deja la
    couleur du masque ailleurs dans la page, on n'en invente pas une. */
.z7-joueur-mini--masque .z7-joueur-mini-pfp {
    background: rgba(255, 183, 0, 0.1);
    border-color: rgba(255, 183, 0, 0.3);
}
.z7-joueur-mini--masque .z7-joueur-mini-pfp svg { color: rgba(255, 183, 0, 0.75); }

/*  ============================================================
    LA BARRE QUI REMPLACE LE PSEUDO
    ============================================================
    UNE SEULE BARRE, ET NON UNE SUITE DE BLOCS. La version
    precedente dessinait quatre segments separes de blancs : cela
    ressemblait a un numero de telephone caviarde, pas a un pseudo.

    Ici, un seul trait continu, d'une opacite legerement irreguliere
    pour qu'il evoque des lettres sans en dessiner aucune. Le flou
    acheve de le rendre illisible — et il n'y a rien a lire.

    LARGEUR FIXE, et c'est une regle de securite, pas un choix de
    dessin : une barre proportionnelle au vrai pseudo en trahirait la
    longueur. 86 px, quel que soit le joueur. */
.z7-joueur-mini-nom--masque {
    display: block;
    width: calc(86 * var(--z7-jm-u));
    max-width: 100%;
    /*  La meme hauteur que la ligne de texte qu'elle remplace : c'est
        ce qui fait que reveler ne deplace rien. */
    height: calc(13 * var(--z7-jm-u));
    border-radius: calc(3 * var(--z7-jm-u));
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.46) 0%,
        rgba(255, 255, 255, 0.52) 18%,
        rgba(255, 255, 255, 0.44) 34%,
        rgba(255, 255, 255, 0.54) 52%,
        rgba(255, 255, 255, 0.45) 70%,
        rgba(255, 255, 255, 0.5) 86%,
        rgba(255, 255, 255, 0.43) 100%);
    filter: blur(calc(2.2 * var(--z7-jm-u)));
    opacity: 0.8;
}