/* ======================================================================
   JOUEURS EN LIGNE, AMIS, DÉFIS (public/extra/amis.js).

   Le bouton vit dans la ligne du pseudo, en haut à droite (.compteur .qui) :
   il ne crée aucune rangée de plus dans le bandeau. Le panneau se déroule
   sous lui (top et max-height posés en JS, au-dessus du comptoir). La carte
   d'un défi reçu surgit en haut au milieu de l'écran.
   ====================================================================== */

.qui .amisBouton{
  position:relative;display:inline-flex;align-items:center;gap:4px;flex:none;align-self:center;
  font:inherit;font-size:11px;font-weight:600;text-decoration:none;opacity:1;cursor:pointer;
  color:var(--creme);background:rgba(95,191,138,.14);border:1px solid rgba(95,191,138,.45);border-radius:999px;padding:3px 9px 3px 7px;
}
.qui .amisBouton:hover{background:rgba(95,191,138,.26);opacity:1}
.qui .amisBouton .amisIcone{font-size:12px;line-height:1}
.qui .amisBouton b{font-size:11px;color:#9BE3B8;max-width:none}
.qui .amisBouton .amisBadge{
  position:absolute;top:-6px;right:-6px;min-width:15px;height:15px;border-radius:8px;padding:0 4px;
  background:#C9524A;color:#fff;font-style:normal;font-size:9.5px;font-weight:700;line-height:15px;text-align:center;
}
.qui .amisBouton .amisBadge[hidden]{display:none}
.qui .amisBouton.attention{animation:amis-pouls 1.6s ease-in-out infinite}
@keyframes amis-pouls{50%{box-shadow:0 0 0 4px rgba(201,82,74,.25)}}

#amisPanneau{
  position:fixed;right:16px;top:120px;z-index:45;width:min(360px,calc(100vw - 16px));
  display:flex;flex-direction:column;gap:8px;overflow:hidden;
  background:rgba(10,18,14,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(95,191,138,.4);border-radius:16px;padding:10px 10px 8px;color:var(--creme);font-size:13px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
#amisPanneau[hidden]{display:none}
#amisPanneau .am-tete{display:flex;align-items:center;justify-content:space-between}
#amisPanneau .am-tete b{font-family:"Fraunces",serif;font-size:18px;color:var(--laiton-clair)}
#amisPanneau button{font:inherit;font-size:12px;font-weight:600;cursor:pointer;border-radius:999px;border:1px solid transparent;padding:6px 11px;background:var(--laiton);color:#1A1305}
#amisPanneau button.sec{background:transparent;color:var(--creme);border-color:rgba(241,233,214,.28)}
#amisPanneau button:disabled{opacity:.38;cursor:default}
#amisPanneau .am-fermer{background:transparent;color:var(--creme);border-color:rgba(241,233,214,.25);width:28px;height:28px;padding:0;font-size:16px;line-height:1}
.am-onglets{display:flex;gap:3px;padding:3px;border-radius:12px;background:rgba(0,0,0,.3)}
#amisPanneau .am-onglets button{flex:1;background:transparent;color:var(--creme);opacity:.7;border-radius:9px;padding:6px 4px;font-size:11.5px}
#amisPanneau .am-onglets button[aria-selected="true"]{background:#2E7D67;color:#fff;opacity:1}
#amisPanneau .am-onglets button.attention{color:#FF9A8F;opacity:1}
.am-defi{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.35);font-size:12px}
.am-defi[hidden]{display:none}
.am-defi .am-defiTexte{flex:1;min-width:0}
.am-liste{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.am-liste ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.am-joueur{padding:7px 8px;border-radius:11px;background:rgba(241,233,214,.05);border:1px solid rgba(241,233,214,.1);display:flex;flex-direction:column;gap:6px}
.am-ligne{display:flex;align-items:center;gap:7px;min-width:0}
.am-point{flex:none;width:8px;height:8px;border-radius:50%;background:rgba(241,233,214,.3)}
.am-joueur.en .am-point{background:#5FBF8A;box-shadow:0 0 6px #5FBF8A}
.am-nom{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-statut{flex:none;font-style:normal;font-size:10.5px;opacity:.6}
.am-actions{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:flex-end}
#amisPanneau .am-defier{background:#B3261E;color:#fff}
.am-note{font-size:11px;opacity:.6}
.am-vide{font-size:12px;opacity:.55;text-align:center;padding:14px 6px;list-style:none}
.am-formDefi{display:flex;flex-direction:column;gap:7px;padding-top:6px;border-top:1px solid rgba(241,233,214,.1)}
.am-aide{margin:0;font-size:11.5px;opacity:.7}
.am-jeux{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#amisPanneau .am-jeux button{background:rgba(241,233,214,.07);color:var(--creme);border-color:rgba(241,233,214,.18);border-radius:10px;padding:8px 5px}
#amisPanneau .am-jeux button[aria-pressed="true"]{background:var(--laiton);color:#1A1305}
.am-mise{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.am-mise input,.am-ajout input{font:inherit;font-size:13px;min-width:0;background:rgba(0,0,0,.35);color:var(--creme);border:1px solid rgba(241,233,214,.2);border-radius:10px;padding:6px 9px}
.am-mise input{width:130px}
.am-ajout{display:flex;gap:6px}
.am-ajout input{flex:1}
#amisPanneau .am-envoyer{background:#B3261E;color:#fff;padding:9px 12px}

/* la carte d'un défi reçu */
#defiCarte{
  position:fixed;left:50%;top:max(12vh,90px);transform:translateX(-50%);z-index:60;width:min(340px,calc(100vw - 24px));
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  background:linear-gradient(180deg,rgba(40,14,12,.97),rgba(14,10,10,.97));border:2px solid #E8C04A;border-radius:20px;padding:16px 16px 14px;
  color:var(--creme);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 6px rgba(232,192,74,.15);
}
#defiCarte[hidden]{display:none}
#defiCarte.vu{animation:defi-arrive .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes defi-arrive{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#defiCarte .dc-epees{font-size:34px;line-height:1;animation:defi-epees 1s ease-in-out infinite}
@keyframes defi-epees{50%{transform:rotate(-10deg) scale(1.12)}}
#defiCarte .dc-titre{font-family:"Fraunces",serif;font-weight:900;font-size:28px;color:#F2D06B;letter-spacing:-.01em}
#defiCarte p{margin:0}
#defiCarte .dc-qui{font-size:15px;font-weight:600}
#defiCarte .dc-jeu{font-size:13px;opacity:.85}
#defiCarte .dc-jauge{width:100%;height:5px;border-radius:3px;background:rgba(241,233,214,.14);overflow:hidden;margin-top:4px}
#defiCarte .dc-jauge i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#C9524A,#E8C04A);border-radius:3px}
#defiCarte .dc-boutons{display:flex;gap:8px;margin-top:6px;width:100%}
#defiCarte button{flex:1;font:inherit;font-size:14px;font-weight:700;cursor:pointer;border-radius:999px;padding:11px 12px;border:1px solid transparent;background:#E8C04A;color:#1A1305}
#defiCarte button.sec{background:transparent;color:var(--creme);border-color:rgba(241,233,214,.35)}
#defiCarte button:disabled{opacity:.5}

@media (max-width:900px){
  #amisPanneau{right:8px;left:8px;width:auto}
  .qui .amisBouton{font-size:10px;padding:2px 7px 2px 6px}
}
/* bureau étroit et bas : la ligne du pseudo est masquée par extra.css, on n'y garde que le bouton */
@media (min-width:901px) and (max-width:1100px) and (max-height:560px){
  html body .compteur .qui{display:flex}
  html body .compteur .qui > :not(#amisBouton){display:none}
}