/**
 * convite.css
 * Painel de convite na tela "Integrantes" (dono): código + botões de
 * compartilhar (copiar / WhatsApp) + aviso da limitação sem backend.
 */
.invite-card {
  background: linear-gradient(135deg, var(--campo), var(--campo-escuro));
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: var(--sombra);
}
.invite-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.invite-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--grama);
  margin-bottom: 4px;
}
.invite-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--branco);
}
.invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-note {
  margin: 10px 0 0;
  font-size: 0.75rem; line-height: 1.5;
  color: rgba(245, 242, 231, 0.6);
}
.invite-note b { color: var(--amarelo); }

/* link de convite de uso único + código, empilhados no card */
.invite-link-block { margin-bottom: 16px; }
.invite-code-block { border-top: 1px solid var(--linha); padding-top: 14px; }
.invite-code-block .invite-top { margin-top: 4px; }
.invite-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.invite-link-out { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 260px; }
.invite-link-out[hidden] { display: none; }
#inviteLinkInput {
  flex: 1 1 200px; min-width: 160px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--linha);
  color: var(--giz); border-radius: 8px; padding: 8px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
}

/* toggle: liberar a lista de integrantes para os jogadores */
.roster-vis-block { border-top: 1px solid var(--linha); padding-top: 14px; }
.roster-vis-toggle {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 0.85rem; line-height: 1.45; color: rgba(245, 242, 231, 0.85);
}
.roster-vis-toggle input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--grama); }
.roster-vis-toggle b { color: var(--branco); }

@media (max-width: 560px) {
  .invite-code { font-size: 1.25rem; }
}