/* css/qualites.css
   Les qualites du personnage a l'ecran de selection (js/ui/qualites.js) :
   quatre lignes d'etoiles et la pastille du temperament.

   Le bloc `.qualites` est partage par les deux ecrans (desktop et
   telephone) : c'est l'hote qui change (#p1-qualites/#p2-qualites en
   desktop, .st-qualites en telephone, positionnes chacun dans son propre
   fichier — voir plus bas et css/mobile.css). */

/* Hote desktop (index.html, sous .fighter-name). .fighter-side est une
   grille centree ou tous les autres enfants (badge, bulle, tag, nom) sont
   en position absolue, sortis du flux : sans regle ici, cet hote restait
   le seul enfant en flux normal et `place-items:center` le posait en plein
   milieu du personnage 3D. On le sort du flux et on le pose dans la zone
   vide, sous la bulle de repartie, sur le bord exterieur — memes unites
   (px) et meme bord (22px) que .dialogue-card et .fighter-tag. Cible par
   id (pas par .qualites-hote) pour ne pas toucher .st-qualites sur
   telephone, qui porte la meme classe. */
#p1-qualites,
#p2-qualites {
  position: absolute;
  top: 176px;
  z-index: 4;
  pointer-events: none;
}
#p1-qualites { left: 22px; }
#p2-qualites { right: 22px; }

/* Plaque sombre, meme habillage que les jauges de raquette : sur les deux
   ecrans, les etoiles se posaient "ton sur ton" (bleu clair sur le fond
   bleu de la scene) — illisibles. */
.qualites {
  display: grid;
  gap: 0.35vh;
  width: max-content;
  padding: 1vh 1vw 0.9vh;
  background: rgba(3, 10, 34, 0.82);
  border-radius: 1.4vh;
  box-shadow: 0 0 0 0.25vh rgba(255, 255, 255, 0.12), 0 1vh 2.4vh rgba(0, 0, 0, 0.45);
}
.ql-ligne { display: flex; align-items: center; gap: 0.6vw; }
.ql-nom {
  flex: 0 0 auto;
  min-width: 7.5em;
  font: 700 clamp(11px, 1.9vh, 16px) 'Montserrat', sans-serif;
  color: #fff;
  text-shadow: 0 0.2vh 0 #000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ql-notes { display: inline-flex; gap: 0.2vw; }
.ql-case { color: #ffd166; opacity: 0.3; line-height: 0; }
.ql-case.pleine { opacity: 1; }
.ql-case.pleine .ql-etoile { fill: currentColor; }
.ql-etoile { width: clamp(12px, 2.2vh, 18px); height: clamp(12px, 2.2vh, 18px); }
.ql-temperament {
  justify-self: start;
  margin-top: 0.3vh;
  padding: 0.2vh 0.7vw;
  border-radius: 999px;
  font: 800 clamp(9px, 1.5vh, 13px) 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #06122f;
  background: #ffd166;
}
.ql-temperament.calme { background: #7dd3fc; }
.ql-temperament.farceur { background: #a7f3d0; }
.ql-temperament.teigneux { background: #fca5a5; }