/* backgammon-multi.css — lobby, matchmaking, HUD multi et countdown.
   Réutilise les variables et .btn de backgammon-solo.css (chargé avant). */

#vue-lobby { max-width: 460px; margin: 0 auto; text-align: center; }
.lobby-msg { font-size: 1.05rem; margin: 8px 0 18px; min-height: 1.4em; }
.lobby-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.lobby-actions .btn { flex: 1 1 160px; }

.choix-couleur { margin-bottom: 18px; }
.choix-couleur-label { display: block; font-size: 0.85rem; color: var(--bg-texte-doux); margin-bottom: 8px; }
.choix-couleur-btns { display: flex; gap: 8px; justify-content: center; }
.couleur-btn {
  flex: 1 1 0;
  background: rgba(232, 192, 125, 0.08);
  border: 2px solid var(--bg-bord);
  border-radius: 10px;
  padding: 9px 6px;
  color: var(--bg-texte);
  cursor: pointer;
  font-size: 0.88rem;
  transition: border-color 0.15s, background 0.15s;
}
.couleur-btn:hover { border-color: var(--bg-ambre); }
.couleur-btn.actif { border-color: var(--bg-ambre); background: rgba(217, 143, 58, 0.22); }

.lobby-sep { font-size: 0.72rem; letter-spacing: 1px; color: var(--bg-texte-doux); margin: 16px 0; }
.lobby-join { display: flex; gap: 8px; justify-content: center; }
#input-code {
  width: 120px; text-transform: uppercase; letter-spacing: 3px; text-align: center;
  font-size: 1.1rem; padding: 9px; border-radius: 10px;
  border: 2px solid var(--bg-bord); background: rgba(0,0,0,0.25); color: var(--bg-texte);
}

#private-room { text-align: center; }
.code-display {
  font-size: 2.6rem; letter-spacing: 8px; font-weight: 700; color: var(--bg-ambre-clair);
  background: rgba(0,0,0,0.3); border-radius: 14px; padding: 14px; margin: 10px 0;
}
.private-share { color: var(--bg-texte-doux); font-size: 0.9rem; }
.private-couleur { color: var(--bg-ambre-clair); font-size: 0.9rem; }
.private-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

.match-info { margin: 8px 0 4px; font-weight: 600; }
.match-couleur { color: var(--bg-ambre-clair); font-size: 0.92rem; }
.btn-cancel {
  margin-top: 10px; background: rgba(232,192,125,0.12); border: 1px solid var(--bg-bord);
  color: var(--bg-texte); border-radius: 8px; padding: 6px 16px; cursor: pointer; font-size: 0.85rem;
}
.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(232,192,125,0.3);
  border-top-color: var(--bg-ambre-clair); border-radius: 50%; animation: bg-spin 0.8s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes bg-spin { to { transform: rotate(360deg); } }

.mj-players { display: flex; gap: 12px; justify-content: center; margin-bottom: 6px; flex-wrap: wrap; }
.player-tag {
  padding: 6px 14px; border-radius: 999px; font-size: 0.9rem;
  background: rgba(232,192,125,0.08); border: 1px solid var(--bg-bord); opacity: 0.6;
}
.player-tag.actif { opacity: 1; border-color: var(--bg-ambre); background: rgba(217,143,58,0.2); }
.mj-statut { text-align: center; font-size: 0.85rem; color: var(--bg-texte-doux); margin-bottom: 6px; }
.mj-elo-bar { text-align: center; font-size: 0.9rem; margin-bottom: 10px; }
.mj-elo-bar strong { color: var(--bg-ambre-clair); }

.countdown-overlay {
  position: fixed; inset: 0; background: rgba(15,9,5,0.75);
  display: none; align-items: center; justify-content: center; z-index: 250;
}
.countdown-overlay.visible { display: flex; }
.countdown-number {
  font-size: 6rem; font-weight: 800; color: var(--bg-ambre-clair);
  animation: bg-cd 1s ease-out;
}
@keyframes bg-cd { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hidden { display: none !important; }