/* ══════════════════════════════════════════════════════════════════════════════════════
   CARTE MEMBRE — feuille de style COMMUNE                          (3.0.30.343)

   Cette carte existe à DEUX endroits :
       le launcher, page QUI JOUE   (clic sur un joueur)
       le chat, la Taverne          (clic sur un pseudo)

   ══ D'OÙ VIENNENT CES RÈGLES ══
   Elles sont EXTRAITES du code existant, pas réécrites. Les valeurs viennent du CSS
   du chat, qui était le plus récent ; l'avatar vient de QUI JOUE, qui portait un
   correctif que le chat n'avait pas.

   Ma première version réécrivait tout « proprement » — et perdait au passage des
   valeurs réglées à l'œil et un bug déjà corrigé.

   ══ CE FICHIER EST UNE COPIE ══
   La vraie source est wwwroot-commun/carte-membre.css, côté launcher. Le launcher
   (page QUI JOUE) la charge directement de là via un hôte virtuel WebView2 — plus
   besoin de copie pour lui.

   lalanchat est un serveur web à part, déployé indépendamment du launcher : il ne
   peut pas lire un dossier sur le poste de l'utilisateur, donc CETTE copie-ci reste
   nécessaire.

   ⚠ NE MODIFIER QUE wwwroot-commun/carte-membre.css (launcher), puis reporter le
   changement ICI à la main.

   ══ CE QUI N'EST PAS ICI ══
   La mécanique d'OUVERTURE (voile et fenêtre côté launcher, ancrage et animation
   côté chat) reste dans le style de chaque page.
   ══════════════════════════════════════════════════════════════════════════════════════ */


/* ── Banniere et avatar ──────────────────────────────────────────────── */

/* ══ DEUX NOMS POUR LA COULEUR DU JOUEUR ══
   Le chat la pose dans --ucouleur, le launcher dans --infos-couleur. Plutôt que de
   changer un des deux JS, le dégradé accepte les DEUX : le premier défini gagne.

   La HAUTEUR n'est pas ici : 56px dans le chat, 64px dans QUI JOUE, parce que
   l'avatar ne remonte pas de la même façon dans les deux. Chaque page garde la
   sienne, avec son propre décalage. */
.up-banner {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg,
              var(--ucouleur, var(--infos-couleur, var(--accent, var(--cyan)))), transparent 145%);
  background-color: color-mix(in srgb,
              var(--ucouleur, var(--infos-couleur, var(--accent, var(--cyan)))) 32%,
              var(--bg-float, #0F172A));
}

/* L'avatar est un SPAN avec background-image, PAS une balise <img> : c'est ce que
   génèrent les deux pages. */
.up-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* font-size:0 masque les initiales quand une vraie image est posée. */
.up-avatar-img {
  font-size: 0;
}

/* ══ BUG DÉJÀ CORRIGÉ — NE PAS SIMPLIFIER ══
   (demande explicite, « le fond du cercle des initiales merde »)

   Le fond était posé côté JS avec un canal alpha. Comme l'avatar CHEVAUCHE la limite
   entre la bannière colorée et le corps sombre, on voyait cette limite À TRAVERS le
   cercle, qui apparaissait coupé en deux. Invisible avec une vraie image, très visible
   avec les initiales.

   Fond OPAQUE, calculé en mélangeant la couleur du joueur avec le fond de la carte. */
.up-avatar-init {
  background: color-mix(in srgb, var(--acouleur, var(--cyan)) 22%, #0F172A);
  color: var(--acouleur, var(--cyan));
}


/* ── Identite ────────────────────────────────────────────────────────── */

/* margin-top négatif : le corps remonte sous la bannière pour que l'avatar la
   chevauche. */
/* Le PADDING est commun. Le margin-top ne l'est PAS : il fait remonter le corps sous
   la bannière pour que l'avatar la chevauche, et sa valeur dépend de la hauteur de
   bannière propre à chaque page. Chacune le pose de son côté. */
.up-body {
  position: relative;
  z-index: 2;
}

.up-name {
  font-size:18px;
  font-weight:700;
  color:var(--text-strong);
  margin-top:6px;
}

.up-sub {
  font-size:14px;
  color:var(--text-muted);
  margin-top:2px;
}

.up-id {
  font-size:13px;
  color:var(--text-faint);
  margin-top:1px;
}


/* ── Croix ───────────────────────────────────────────────────────────── */

/* 40px avec line-height identique : c'est ce qui centre le glyphe. text-indent d'un
   demi-pixel compense le crénage du × , qui n'est pas centré dans sa chasse. Valeurs
   réglées à l'œil en 3.0.30.250, puis ENCORE agrandies (retour utilisateur : "trop
   petite, autant visuellement que sa zone cliquable" — la 1ère passe ne suffisait
   toujours pas). Ne pas les « arrondir » sans nouveau retour. */
.up-close {
  position:absolute;
  top:6px;
  right:6px;
  z-index:2;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  color:#fff;
  border:none;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  /* ══ TAILLES DE LA CARTE MEMBRE (3.0.30.251) ══════════════════════════════════════
   Les libelles de section etaient a 10px et le corps a 12-12.5px : lisible de pres sur
   un ecran de bureau, penible des qu'on s'eloigne ou sur un ecran haute resolution.
   Tout est remonte de 1 a 1,5px -- assez pour se lire confortablement, pas assez pour
   changer la mise en page ou faire deborder la carte.
   Si le rendu convient, on appliquera les memes valeurs a QUI JOUE. */

/* ══ CROIX DE FERMETURE (3.0.30.250, puis agrandie a nouveau ensuite) ═══════════════
     Trois corrections, comme sur QUI JOUE :

     1. padding-bottom : le caractere "×" a un centre OPTIQUE plus haut que son cadre
        typographique. align-items:center le centre correctement au sens du texte, mais
        il PARAIT 2 px trop haut dans le cercle.

     2. taille : 24 -> 28 -> 34px, et la police suit avec. La croix etait petite pour
        une cible qu'on vise a la souris, et l'est restee au premier passage.

     3. ::before etend la zone SENSIBLE de 10 px tout autour (avant : 6px), sans
        agrandir le cercle visible. Rater la croix de quelques pixels etait facile --
        c'est ce qui donnait l'impression que "la fermeture ne marche pas toujours". */
  width:40px;
  height:40px;
  font-size:28px;
  /* padding ABANDONNE : avec box-sizing:border-box il REDUIT la hauteur utile de la
     boite flex, donc il pousse le glyphe vers le HAUT -- l'inverse de l'effet voulu.
     line-height egale a la hauteur du bouton place la ligne de base correctement. */
  padding:0;
  box-sizing:border-box;
  line-height:40px;
  font-weight:400;
}

/* Zone cliquable élargie sans agrandir le bouton. */
.up-close::before {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
}

.up-close:hover {
  background:rgba(0,0,0,.6);
}


/* ── Actions ─────────────────────────────────────────────────────────── */

.up-actions {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:12px;
}

.up-actions button {
  background:var(--bg-input);
  color:var(--text);
  border:none;
  border-radius:6px;
  padding:8px 10px;
  font-size:14px;
  text-align:left;
  cursor:pointer;
}

.up-actions button:hover {
  background:var(--accent);
  color:#fff;
}


/* ── Statistiques ────────────────────────────────────────────────────── */

.up-stats {
  width:100%;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-subtle,rgba(255,255,255,.08));
  font-size:13.5px;
  color:var(--text-muted);
}

.up-stats-label {
  text-transform:uppercase;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-faint);
  margin-bottom:6px;
}

.up-stats-total {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  color:var(--text-strong);
  background:linear-gradient(135deg, rgba(88,101,242,.18), rgba(88,101,242,.05));
  border:1px solid rgba(88,101,242,.3);
  border-radius:8px;
  padding:8px 10px;
  margin-bottom:10px;
}

.up-stats-total-icon {
  font-size:16px;
}

.up-stats-game {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:6px;
  background:rgba(255,255,255,.03);
}

.up-stats-game:hover {
  background:rgba(255,255,255,.06);
}

/* Le nom peut être long, la durée ne doit jamais passer à la ligne. */
.up-stats-game-name {
  color:var(--text);
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.up-stats-game-time {
  color:var(--accent,#5865f2);
  font-weight:600;
  font-size:11px;
  flex-shrink:0;
}

.up-stats-empty {
  color:var(--text-faint);
  font-style:italic;
  text-align:center;
  padding:6px 0;
}


/* ── Anciens pseudos ─────────────────────────────────────────────────── */

.up-anciens-label {
  display:block;
  text-transform:uppercase;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-faint);
  margin-bottom:6px;
}

.up-anciens-pseudos {
  margin-bottom:10px;
}

.up-ancien-pill {
  display:inline-block;
  background:rgba(255,255,255,.05);
  color:var(--text-muted);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:3px 10px;
  font-size:13px;
  margin:0 5px 5px 0;
}


/* ── Note personnelle ────────────────────────────────────────────────── */

.up-note-label {
  display:block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--text-faint);
  margin-bottom:6px;
}

/* La zone de saisie est ciblee par la BALISE et non par une classe : c'est ce que
   generent les deux pages (<textarea id="up-note-txt"> dans un <div class="up-note">).

   resize vertical uniquement : l'horizontal ferait deborder la carte. */
.up-note textarea {
  width:100%;
  min-height:56px;
  resize:vertical;
  box-sizing:border-box;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:var(--text);
  font-size:13.5px;
  font-family:inherit;
  padding:8px 9px;
  line-height:1.45;
}
.up-note textarea:focus {
  outline:none;
  border-color:var(--accent,#5865f2);
  background:rgba(255,255,255,.06);
}
.up-note textarea::placeholder {
  color:var(--text-faint);
}