/* =====================================================
   PLAYGOSPEL UI — BADGES, TEAM BADGE, AVATAR, DIVIDER
   Pequenos elementos de rótulo/identidade — nenhum deles é um
   card, então ganham arquivo próprio em vez de inflar cards.css.
   ===================================================== */

/* ---- Badge ---- */
.pgui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pgui-space-4);
  padding: var(--pgui-space-4) var(--pgui-space-12);
  border-radius: var(--pgui-radius-pill);
  font-size: var(--pgui-fs-caption);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.pgui-badge-neutral  { background: rgba(255, 255, 255, .06); color: var(--pgui-text-secondary); border: 1px solid var(--pgui-border-strong); }
.pgui-badge-primary  { background: rgba(255, 193, 7, .16); color: var(--pgui-color-primary); }
.pgui-badge-info     { background: rgba(59, 130, 246, .16); color: var(--pgui-color-info-hover); }
.pgui-badge-success  { background: rgba(34, 197, 94, .16); color: var(--pgui-color-success-hover); }
.pgui-badge-warning  { background: rgba(245, 158, 11, .18); color: var(--pgui-color-warning-hover); }
.pgui-badge-danger   { background: rgba(239, 68, 68, .16); color: var(--pgui-color-danger-hover); }
.pgui-badge-purple   { background: rgba(139, 92, 246, .18); color: var(--pgui-color-purple-hover); }

.pgui-badge-premium {
  background: linear-gradient(135deg, rgba(139, 92, 246, .25), rgba(255, 193, 7, .25));
  color: var(--pgui-text-primary);
  border: 1px solid rgba(255, 193, 7, .35);
}

/* ---- Team badge (equipe atual em destaque, ex: "Respondendo agora") ---- */
.pgui-team-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pgui-space-8);
  padding: var(--pgui-space-8) var(--pgui-space-16);
  border-radius: var(--pgui-radius-pill);
  background: rgba(255, 255, 255, .04);
  border: 2px solid var(--team-color, var(--pgui-color-primary));
  font-weight: 800;
  color: var(--pgui-text-primary);
}

.pgui-team-badge__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--team-color, var(--pgui-color-primary));
  flex: 0 0 auto;
}

/* Nome da pessoa da vez (só quando a equipe tem participantes sorteados,
   ver Teams.currentPlayer em assets/js/teams.js). */
.pgui-team-badge__player {
  font-weight: 600;
  opacity: .8;
}

.pgui-team-badge__player::before {
  content: " · ";
  opacity: .6;
}

/* ---- Avatar ---- */
.pgui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pgui-bg-surface);
  color: var(--pgui-text-primary);
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}
.pgui-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pgui-avatar-sm { width: 28px; height: 28px; font-size: var(--pgui-fs-caption); }
.pgui-avatar-md { width: 40px; height: 40px; font-size: var(--pgui-fs-small); }
.pgui-avatar-lg { width: 56px; height: 56px; font-size: var(--pgui-fs-subtitle); }

/* ---- Divider ---- */
.pgui-divider {
  border: none;
  border-top: 1px solid var(--pgui-border);
  margin: var(--pgui-space-16) 0;
}

.pgui-divider--vertical {
  width: 1px;
  align-self: stretch;
  background: var(--pgui-border);
  margin: 0 var(--pgui-space-8);
}