/* =====================================================================
   PLAYER-CARD.CSS — Cadre profil du joueur (en haut à gauche)
   Style RPG / gacha : avatar hexagonal, pastille de niveau, barre d'XP
   segmentée, pastille de rang (Docteur, Modaque, VIP, Modo, Abonné).
   ➜ Pas de cadre ni de fond : les éléments flottent directement sur le décor.

   Structure HTML attendue (dans index.html) :
     <div class="player-card">
       <div class="avatar">                              -> avatar hexagonal
         <div class="avatar-hex"><div class="avatar-face">Y</div></div>
       </div>
       <div class="player-info">
         <div class="player-line">  nom + pastille de niveau  </div>
         <div class="xp-row">       barre d'XP + texte "372 / 600 XP"  </div>
         <div class="player-rank" data-rank="docteur"> icône + nom du rang </div>
       </div>
     </div>

   Les couleurs viennent de la charte (variables du :root de main.css).
   Les données (nom, niveau, XP, rang) se changent en JS avec
   setPlayerProfile({...}) — voir js/player-card.js.
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. SPRITE SVG DES ICÔNES DE RANG (caché, sert de "bibliothèque")
   --------------------------------------------------------------------- */
.pc-defs {
  position: absolute;      /* sort du flux pour ne pas décaler la mise en page */
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ---------------------------------------------------------------------
   1. CONTENEUR DE LA CARTE
   --------------------------------------------------------------------- */
.player-card {
  /* Forme hexagonale réutilisée par l'avatar (hexagone "pointe en haut") */
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /* Taille de l'avatar (le rapport largeur/hauteur d'un hexagone régulier est 0.866) */
  --avatar-h: 88px;
  --avatar-w: 76px;

  position: relative;
  width: 310px;
  height: 92px;
  flex: none;              /* ne se réduit pas dans le header flex */
}


/* ---------------------------------------------------------------------
   2. L'AVATAR HEXAGONAL
   Trois hexagones emboîtés : cadre or/violet, anneau sombre, visage.
   --------------------------------------------------------------------- */
.avatar {
  /* .avatar est un <button> (il ouvre la fenêtre de profil au clic) :
     on retire tous les styles par défaut d'un bouton */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  position: absolute;
  left: 0;
  top: 2px;
  width: var(--avatar-w);
  height: var(--avatar-h);
  z-index: 2;              /* au-dessus du panneau */
  /* Halo doré (le filtre est sur le parent car clip-path couperait un box-shadow) */
  filter: drop-shadow(0 0 8px rgba(216, 168, 62, 0.4));
  transition: filter 0.2s ease;
}

.avatar:hover {
  filter: drop-shadow(0 0 14px rgba(255, 225, 138, 0.75));
}

/* 1) Cadre extérieur : hexagone en dégradé or -> violet */
.avatar-hex {
  position: absolute;
  inset: 0;
  clip-path: var(--hex);
  /* Le cadre (bordure de l'hexagone) vient de la variable --frame-bg, posée par
     js/profile-modal.js quand le joueur choisit un cadre. Sans choix, on garde
     le dégradé or -> violet d'origine. */
  background: var(--frame-bg, linear-gradient(160deg,
    #fff1b8 0%,
    var(--gold, #d8a83e) 40%,
    var(--purple-bright, #9c5ac5) 100%));
}

/* 2) Anneau sombre entre le cadre et le visage */
.avatar-hex::before {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: var(--hex);
  background: var(--void, #090811);
}

/* 3) Le visage : initiale du joueur ou image (voir .avatar-face img) */
.avatar-face {
  position: absolute;
  inset: 6px;
  clip-path: var(--hex);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: "Cinzel", serif;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  /* Fond de l'avatar : variable --avatar-bg (posée quand le joueur choisit un
     avatar), sinon le violet d'origine. Quand tu auras de vraies images
     d'avatar, remplace ça par une <img> dans .avatar-face (voir .avatar-face img). */
  background: var(--avatar-bg, radial-gradient(circle at 35% 25%, #b9b4ff, #44345d 45%, #15101e 70%));
}

/* Si on donne une image d'avatar, elle remplit tout l'hexagone */
.avatar-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Petits losanges dorés sur les pointes haute et basse (même langage que la barre de nav) */
.avatar::before,
.avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff1b8, var(--gold, #d8a83e));
  border: 1px solid var(--void, #090811);
  z-index: 3;
}

.avatar::before { top: -4px; }
.avatar::after  { bottom: -4px; }


/* ---------------------------------------------------------------------
   3. LES INFOS (nom, niveau, XP, rang)
   --------------------------------------------------------------------- */
.player-info {
  position: absolute;
  left: 90px;              /* juste à droite de l'avatar */
  right: 0;
  top: 11px;
  bottom: 11px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* Ligne 1 : nom + pastille de niveau */
.player-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;               /* annule l'ancienne marge du style précédent */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));   /* ombre sous la pastille de niveau */
}

.player-name-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}

.player-name-btn:hover strong {
  color: var(--gold-light, #ffe18a);
}

.player-line strong {
  min-width: 0;            /* permet de tronquer un long pseudo avec "…" */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Cinzel", serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--cream, #f5ead5);
  /* Double ombre : le texte reste lisible même sur un décor clair (pas de fond) */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Pastille de niveau : jaune banane, extrémités en pointe (comme la plaque "Lobby") */
.player-level {
  flex: none;
  padding: 1px 10px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  color: #2a1a00;
  background: linear-gradient(180deg, #fff3a8 0%, var(--banana, #f5cf4c) 50%, #d99a1e 100%);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}

/* Ligne 2 : barre d'XP + texte */
.xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* La barre d'XP : rail sombre, contour or, segments façon jauge RPG */
.xp-bar {
  position: relative;
  flex: 1;
  height: 10px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(216, 168, 62, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Le remplissage : violet -> or clair (couleurs de la charte) */
.xp-bar span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #8e4eb3, var(--purple-bright, #9c5ac5) 40%, var(--gold-light, #ffe18a));
  box-shadow: 0 0 10px rgba(216, 168, 62, 0.45);
  transition: width 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);   /* la barre glisse quand l'XP change */
}

/* Petit éclat blanc au bout du remplissage */
.xp-bar span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: radial-gradient(ellipse at right center, rgba(255, 255, 255, 0.95), transparent 70%);
}

/* Graduations : 4 segments, dessinées par-dessus la barre */
.xp-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(5, 3, 15, 0.6) calc(25% - 1px),
    rgba(5, 3, 15, 0.6) 25%);
  pointer-events: none;
}

/* Texte "372 / 600 XP" */
.xp-text {
  flex: none;
  font-family: "Montserrat", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted, #b8aabf);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
}

/* L'XP actuelle est mise en avant en or clair */
.xp-cur {
  color: var(--gold-light, #ffe18a);
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   4. LA PASTILLE DE RANG
   La couleur change selon data-rank (variables --rank-color / --rank-glow)
   --------------------------------------------------------------------- */
.player-rank {
  /* Valeurs par défaut = rang Docteur (or) */
  --rank-color: var(--gold-light, #ffe18a);
  --rank-glow: rgba(216, 168, 62, 0.4);

  align-self: flex-start;  /* la pastille garde la largeur de son texte */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 12px 0 7px;
  border-radius: 11px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--rank-color);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--rank-color);
  /* Lueur externe + interne dans la couleur du rang */
  box-shadow: 0 0 8px var(--rank-glow), inset 0 0 8px var(--rank-glow);
}

/* Icône du rang (SVG monochrome qui prend la couleur du rang) */
.rank-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  filter: drop-shadow(0 0 3px var(--rank-glow));
}

/* --- Une couleur par rang (toutes dans l'univers or / violet / bleu nuit) --- */
.player-rank[data-rank="docteur"] {   /* or */
  --rank-color: var(--gold-light, #ffe18a);
  --rank-glow: rgba(216, 168, 62, 0.4);
}

.player-rank[data-rank="modaque"] {   /* violet magique : le "roi" */
  --rank-color: #e0a3ff;
  --rank-glow: rgba(156, 90, 197, 0.55);
}

.player-rank[data-rank="vip"] {       /* rose/rouge de la charte (--red) */
  --rank-color: #ff8fa3;
  --rank-glow: rgba(194, 60, 80, 0.5);
}

.player-rank[data-rank="modo"] {      /* bleu glacé (même que la barre de nav) */
  --rank-color: #a9bcff;
  --rank-glow: rgba(120, 140, 255, 0.45);
}

.player-rank[data-rank="abonne"] {    /* lavande discrète : rang de base */
  --rank-color: #d4cbe8;
  --rank-glow: rgba(180, 165, 215, 0.3);
}