/* ============================================================
   CrazyViki — AMIS et duel contre un ami (préfixe am-) — voir amis.js et le script SQL 16
   ============================================================ */

.am-pastille{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--danger);color:#fff;font-size:.78rem;font-weight:800;line-height:1;vertical-align:middle;box-shadow:0 0 0 2px var(--bg2)}
.nav-jeu button[aria-selected="true"] .am-pastille{box-shadow:0 0 0 2px var(--accent)}
.am-bloc{border-color:rgba(61,155,255,.5);background:linear-gradient(90deg,rgba(61,155,255,.12),rgba(61,155,255,.03));gap:12px;padding:14px 18px}
.am-deck{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:700}
.am-deck .ok{color:var(--ok)}
.am-sous{max-width:760px}
.am-sous button{white-space:nowrap}
.am-sous button[aria-selected="true"]{background:var(--accent);color:var(--accent-fg);box-shadow:none}
.am-sous button[aria-selected="true"] .am-pastille{box-shadow:0 0 0 2px var(--accent)}
.am-corps{display:flex;flex-direction:column;gap:10px}
.am-resume{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-weight:800}
.am-liste{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow-y:auto;padding:2px 8px 2px 2px;scrollbar-width:thin}
.am-ligne{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:8px 14px}
.am-ligne.e-hors .am-av,.am-ligne.e-duel .am-av{filter:saturate(.7)}
.am-ligne.e-hors .am-nom{color:var(--muted)}
.am-av{display:inline-grid;place-items:center;border-radius:50%;flex:none;line-height:1;box-shadow:inset 0 0 0 2px rgba(0,0,0,.07)}
.am-av .av-img{width:1.15em;height:1.15em;vertical-align:0}
.am-nom{font-family:var(--display);font-weight:700;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-etat{display:flex;align-items:center;gap:7px;font-size:.92rem;color:var(--muted);font-weight:700}
.am-pt{width:11px;height:11px;border-radius:50%;background:var(--muted);display:inline-block;flex:none}
.am-pt.vert{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.am-pt.orange{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.am-act{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.am-act .btn{min-height:42px;padding:8px 18px}
.am-act .indispo{font-size:.85rem;color:var(--muted);font-weight:700;text-align:right;max-width:210px;line-height:1.2}
.btn.am-danger{background:var(--bg2);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.am-envoye{background:color-mix(in srgb,var(--ok) 14%,var(--bg2));color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.am-astuce{font-size:.92rem;color:var(--muted)}
.am-vide{display:flex;gap:14px;align-items:center;padding:14px 4px;color:var(--muted)}
/* page Profil > Mes amis */
.am-page{display:flex;flex-direction:column;gap:20px}
html.scene-pc .am-page{display:grid;grid-template-columns:560px 1fr;align-items:start}
.am-col{display:flex;flex-direction:column;gap:20px}
.am-code{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,7vw,2.5rem);letter-spacing:.14em;background:var(--bg);border:3px dashed var(--accent);border-radius:18px;padding:12px 18px;color:var(--accent);user-select:none}
.am-actions{display:flex;gap:10px;flex-wrap:wrap}
.am-champ{display:flex;gap:10px}
.am-champ input{flex:1;font:inherit;font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--fg);min-width:0}
.am-retour{font-weight:800;color:var(--ok)}
.am-mini{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;background:var(--bg);border-radius:12px;padding:6px 12px}
.am-mini .am-nom{font-size:1.05rem}
.am-sep{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-top:2px}
.am-menu{position:relative}
.am-menu-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:6;background:var(--bg2);border:2px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;min-width:230px}
.am-menu-liste button{white-space:nowrap;border:0;background:none;text-align:left;font-weight:800;padding:10px 14px;border-radius:10px;color:var(--fg)}
.am-menu-liste button:hover{background:var(--bg)}
.am-menu-liste button.rouge{color:var(--danger)}
.am-liste-profil{max-height:520px}
.am-modale-ico{font-size:3rem;text-align:center;line-height:1}
.am-modale h2{text-align:center}
.am-modale p{text-align:center}
.am-modale .am-actions{justify-content:center}
.am-choix{display:flex;flex-direction:column;gap:10px}
.am-choix>div{display:flex;flex-direction:column;gap:2px;background:var(--bg);border-radius:14px;padding:10px 14px}
.am-choix .btn{align-self:flex-start;margin-top:6px}
.am-prets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.am-pret{background:var(--bg);border:2px solid var(--line);border-radius:16px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.am-pret .am-nom{font-size:1.05rem;max-width:100%}
.am-pret.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--bg))}
.am-pret .st{font-weight:800;color:var(--muted)}
.am-pret.ok .st{color:var(--ok)}
.am-compte{font-family:var(--display);font-weight:700;color:var(--accent);font-size:1.4rem}
/* fenêtre de confirmation : par-dessus tous les écrans, on ne la ferme pas en cliquant à côté */
.voile.am-voile-conf{z-index:40}
.am-modale .am-actions{margin-top:2px}
.am-modale .erreur{text-align:center}
.am-pret.moi .am-nom small{color:var(--muted);font-weight:700}
.am-liste:empty{display:none}
.am-lien-copie{font-weight:800;color:var(--ok)}
.am-invisible{display:none!important}
/* petits écrans (profil > Mes amis sur téléphone) */
@media (max-width:720px){
  .am-ligne{grid-template-columns:48px 1fr;row-gap:8px}
  .am-ligne .am-act{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap}
  .am-mini{grid-template-columns:44px 1fr;row-gap:6px}
  .am-mini .am-act{grid-column:1 / -1;justify-content:flex-start}
  .am-champ{flex-direction:column}
}