/* ── Invite Channels card (Friends screen) ─────────────────────
   Flag: invite_channels. Rendered by src/client/modules/invite-channels.js.
   Grid pattern kin: .play-mode-actions (style.css) / .theme-grid. */

.invite-channels-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: var(--glow);
}

.invite-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.invite-channel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 13px 6px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.invite-channel-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 229, 160, 0.18);
}
.invite-channel-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.invite-channel-icon {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--invite-icon) center / contain no-repeat;
  mask: var(--invite-icon) center / contain no-repeat;
}

/* Brand tints stay ≥4.5:1 irrelevant (icons are decorative, aria-hidden);
   the label below each icon is --text on --surface2 which passes. */
.icon-copy     { color: var(--text); --invite-icon: url('/icons/invite/link.svg'); }
.icon-whatsapp { color: #25d366; --invite-icon: url('/icons/invite/whatsapp.svg'); }
.icon-sms      { color: #34c759; --invite-icon: url('/icons/invite/sms.svg'); }
.icon-telegram { color: #2aabee; --invite-icon: url('/icons/invite/telegram.svg'); }
.icon-discord  { color: #5865f2; --invite-icon: url('/icons/invite/discord.svg'); }
.icon-x        { color: var(--text); --invite-icon: url('/icons/invite/x.svg'); }
.icon-facebook { color: #4a90ff; --invite-icon: url('/icons/invite/facebook.svg'); }
.icon-qr       { color: var(--accent); --invite-icon: url('/icons/invite/qr.svg'); }
.icon-native   { color: var(--text); --invite-icon: url('/icons/invite/share.svg'); }

.invite-channels-status {
  min-height: 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
}

.invite-qr-box { display: flex; justify-content: center; padding: 8px 0 4px; }
.invite-qr-box svg { width: min(240px, 70vw); height: auto; background: #fff; border-radius: 8px; padding: 8px; }

@media (max-width: 480px) {
  .invite-channels-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}