/* Fontes novas (só CSS, nenhum HTML/JS tocado) — "Rajdhani" pros títulos
   (condensada, técnica, cara de HUD de jogo) e "Inter" pro corpo do texto
   (mais legível que a fonte de sistema padrão). */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@400;600;700&display=swap');
* { box-sizing: border-box; }
/* Dificulta selecionar/copiar texto da tela casualmente — campos de digitar
   (input, textarea, contenteditable) continuam selecionáveis normal, senão
   ninguém conseguiria copiar/colar o que a própria pessoa está escrevendo. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
/* Micro-interação global: qualquer botão "afunda" um pouquinho ao clicar,
   reforçando o som de clique com um feedback visual. */
button { transition: transform 0.08s ease, filter 0.08s ease; }
button:active { transform: scale(0.94); }

/* Ícones de linha (substituem os emojis de interface) — herdam a cor do
   texto ao redor, então funcionam em qualquer contexto sem precisar de
   classe extra na maioria dos casos. */
.ng-icon {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em;
  flex-shrink: 0;
}
.ng-icon-lg { width: 1.3em; height: 1.3em; }
.ng-icon-sm { width: 0.85em; height: 0.85em; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
:root {
  --accent: #00ff9d;
  /* Repaginado (a pedido — "troca o roxo pelo azul da logo") — era roxo
     puro (var(--accent)), agora é o azul de verdade extraído da logo nova
     (#0284ED), pra combinar com a marca em vez de destoar dela. O degradê
     da marca inteiro foi recalculado em torno desse azul, pra tudo ficar
     na mesma família de cor (azul → azul da logo → verde-água) em vez de
     pular pro roxo no meio do caminho. */
  --accent-2: #00e5ff;
  --accent-3: #00e5ff;
  --gradient-brand: linear-gradient(135deg, #00ff9d 0%, #00e5ff 55%, #00e5ff 100%);
  --bg-app: #14151a;
  --bg-rail: #0e0f13;
  --bg-sidebar: #1a1b20;
  --bg-panel: #202127;
  --bg-modal: #2b2d31;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-app);
  color: #e6e6e6;
  cursor: url('/assets/cursor-default.png') 4 2, auto;
}
.hidden { display: none !important; }

/* Cursor customizado do NEXT GAME — a setinha degradê troca por uma versão
   com o "brilho" verde-água em cima de qualquer coisa clicável. */
a, button, [role="button"], .clickable, select,
.server-icon, .navbar-icon-btn, .navbar-profile, .manage-tab, .settings-sidebar-item,
.tournament-filter-tab, .search-result-item, .explore-card-btn, .channel-item,
.member-item, .home-quick-action, .wizard-tag-chip, .wizard-choice-btn, label.checkbox-row,
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="submit"] {
  cursor: url('/assets/cursor-pointer.png') 4 2, pointer;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], input[type="file"], textarea, [contenteditable="true"] {
  cursor: text;
}

/* AUTH */
/* Tela de carregamento inicial — some assim que decide se auto-conecta ou
   mostra o login, evita piscar uma tela pra depois trocar pela outra. */
.boot-loading {
  position: fixed; inset: 0; z-index: 9999; background: #0b0c10; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.boot-loading-logo { width: 64px; height: auto; opacity: 0.9; }
.boot-loading-spinner {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--accent); animation: bootSpin 0.8s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }

.auth-remember-row { margin: 4px 0 2px; font-size: 12.5px; color: #9aa0ab; }

.auth-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 24px;
  background:
    radial-gradient(circle at 12% 15%, rgba(var(--accent-rgb), 0.12), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(145, 70, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0.4) 45%, rgba(6,7,10,0.85) 100%),
    url('/assets/auth-banner.png');
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center 30%;
}
.auth-bg-video {
  position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.auth-bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.auth-bg-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 40%, rgba(20,21,26,0.15), rgba(10,11,15,0.55));
}

/* Botão de ligar/desligar a música de fundo do login */
.auth-music-toggle {
  position: fixed; top: 20px; right: 20px; z-index: 20; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(20,21,26,0.6);
  backdrop-filter: blur(6px); color: rgba(255,255,255,0.55); display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.auth-music-toggle:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.auth-music-toggle.active { color: var(--accent-3); border-color: var(--accent-3); background: rgba(var(--accent-2-rgb),0.12); }

/* Layout dividido: branding + destaques à esquerda, formulário à direita —
   as duas colunas ficam sempre visíveis juntas, sem precisar rolar a página. */
.auth-split {
  position: relative; z-index: 2; width: 100%; max-width: 1080px;
  display: flex; align-items: stretch; gap: 0;
  background: rgba(16, 17, 22, 0.55);
  backdrop-filter: blur(18px);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
  animation: authCardIn 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-left {
  position: relative; flex: 1.25; min-width: 0; min-height: 640px;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
/* Foto de fundo (o "herói" da tela de login) + camada escura por cima pra
   o texto ficar legível em qualquer trecho da imagem. object-position
   puxado pra direita porque é onde o personagem/cidade ficam — a esquerda
   (onde o texto mora) sobra mais escura/vazia na própria foto. */
.auth-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 68% center; z-index: 0;
}
.auth-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,14,0.96) 0%, rgba(8,8,14,0.82) 32%, rgba(8,8,14,0.35) 62%, rgba(8,8,14,0.15) 100%),
    linear-gradient(180deg, rgba(6,6,10,0.75) 0%, rgba(6,6,10,0.05) 22%, rgba(6,6,10,0.1) 60%, rgba(6,6,10,0.92) 100%);
}
.auth-hero-topbar {
  position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 28px 32px 0;
}
.auth-hero-brand { display: flex; align-items: center; gap: 10px; }
.auth-hero-brand-logo { height: 34px; width: auto; filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb),0.5)); }
.auth-hero-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.auth-hero-brand-name { font-size: 16px; font-weight: 900; color: #f2f3f5; letter-spacing: 0.02em; }
.auth-hero-brand-name strong { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero-brand-tagline { font-size: 8.5px; font-weight: 700; color: #9aa0ab; letter-spacing: 0.18em; margin-top: 1px; }
.auth-hero-bluex-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px;
  background: rgba(59,165,92,0.14); border: 1px solid rgba(59,165,92,0.4); color: #7de3a0;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}
.auth-hero-bluex-badge strong { color: #a8f0bf; }
.auth-hero-bluex-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #3ba55c; box-shadow: 0 0 8px #3ba55c;
  animation: authDotPulse 1.8s ease-in-out infinite;
}
@keyframes authDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.auth-hero-body {
  position: relative; z-index: 2; margin-top: auto; padding: 24px 32px 28px;
  display: flex; flex-direction: column;
}
.auth-hero-kicker {
  font-size: 11px; font-weight: 800; color: var(--accent-3); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 10px;
}
.auth-hero-title {
  font-size: 40px; font-weight: 900; line-height: 1.08; color: #f5f6f8; margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.auth-hero-title-gradient {
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-hero-desc { font-size: 14px; line-height: 1.55; color: #b9bec7; max-width: 440px; margin: 0 0 22px; }
.auth-hero-desc strong { color: #f2f3f5; }
.auth-hero-ctas { display: flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.auth-hero-cta-primary, .auth-hero-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 9px;
  font-weight: 700; font-size: 13.5px; cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.auth-hero-cta-primary {
  border: none; background: var(--gradient-brand); color: white; box-shadow: 0 8px 22px rgba(var(--accent-rgb),0.4);
}
.auth-hero-cta-primary:hover { filter: brightness(1.1); }
.auth-hero-cta-secondary {
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); color: #e6e6e6;
}
.auth-hero-cta-secondary:hover { background: rgba(255,255,255,0.08); }
.auth-hero-cta-primary:active, .auth-hero-cta-secondary:active { transform: scale(0.98); }

/* Selos de confiança/segurança logo abaixo dos botões do hero — pequenos,
   discretos, mas visíveis antes mesmo de entrar no site. */
.auth-trust-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.auth-trust-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #a8f0bf;
  background: rgba(59,165,92,0.12); border: 1px solid rgba(59,165,92,0.3); padding: 5px 11px; border-radius: 20px;
}
.auth-trust-badge .ng-icon { width: 12px; height: 12px; }
.auth-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.auth-feature {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px;
  background: rgba(20,21,28,0.55); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(6px);
}
.auth-feature-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(var(--accent-rgb),0.18); border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--accent-3);
  display: flex; align-items: center; justify-content: center;
}
.auth-feature-icon .ng-icon { width: 18px; height: 18px; }
.auth-feature-text strong { display: block; font-size: 13px; color: #f2f3f5; margin-bottom: 2px; }
.auth-feature-text p { margin: 0; font-size: 11.5px; color: #9aa0ab; line-height: 1.4; }

.auth-stats { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.auth-stat {
  flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; border-radius: 12px; background: rgba(20,21,28,0.5); border: 1px solid rgba(255,255,255,0.07);
}
.auth-stat-icon {
  width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--accent-rgb),0.18); color: var(--accent-3);
  display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.auth-stat-icon .ng-icon { width: 15px; height: 15px; }
.auth-stat-num { font-size: 19px; font-weight: 900; color: white; line-height: 1; }
.auth-stat-label { font-size: 10.5px; color: #9aa0ab; }

/* Parceria com o Magic Tank, visível já na tela de login (a pedido). */
.auth-partner-row {
  display: inline-flex; align-items: center; gap: 10px; background: rgba(20,21,28,0.55);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 8px 14px; margin-bottom: 14px;
  backdrop-filter: blur(6px);
}
.auth-partner-logo { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.auth-partner-text { font-size: 12px; color: #b5bac1; }
.auth-partner-text strong { color: #f2f3f5; }

/* Download de ferramenta da comunidade na tela de login (a pedido —
   disponível antes mesmo de entrar na conta). Mesmo visual do card de
   parceria acima, só que clicável/com hover, já que baixa um arquivo. */
.auth-bot-download-row {
  display: inline-flex; align-items: center; gap: 10px; background: rgba(20,21,28,0.55);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 8px 14px; margin-bottom: 14px;
  backdrop-filter: blur(6px); text-decoration: none; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-bot-download-row:hover { border-color: var(--accent); background: rgba(20,21,28,0.75); }
.auth-bot-download-row .ng-icon-wrap { color: var(--accent-3); flex-shrink: 0; width: 18px; height: 18px; }
.auth-bot-download-text { display: flex; flex-direction: column; gap: 1px; }
.auth-bot-download-text strong { font-size: 12.5px; color: #f2f3f5; }
.auth-bot-download-text span { font-size: 11px; color: #b5bac1; }

/* Aviso da promoção Magic Tank na Loja NEXT Coins (recarga full -> código
   de NEXTGAME PLUS). */
.shop-partner-promo {
  display: flex; align-items: center; gap: 12px; background: rgba(250,166,26,0.08);
  border: 1px solid rgba(250,166,26,0.3); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.shop-partner-promo-logo { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.shop-partner-promo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-partner-promo-text strong { font-size: 13px; color: #f2f3f5; }
.shop-partner-promo-text span { font-size: 12px; color: #b5bac1; }
.shop-partner-promo-btn {
  flex-shrink: 0; background: #faa61a; color: #1a1400; border: none; border-radius: 8px; padding: 8px 14px;
  font-weight: 700; font-size: 12.5px; cursor: pointer; transition: filter 0.15s ease;
}
.shop-partner-promo-btn:hover { filter: brightness(1.08); }
.auth-left-footer { font-size: 11px; color: #8b909a; margin: 0; }
.auth-left-powered-by { font-size: 11px; color: #6d7178; margin: 4px 0 0; }
.auth-left-powered-by strong { color: #8b909a; }

.auth-card {
  position: relative; z-index: 2; flex: 1; min-width: 0;
  background: rgba(20, 21, 27, 0.7);
  padding: 44px 40px;
  text-align: center;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
}
/* Emblema circular com brilho ao redor da logo, igual selo/medalha —
   substitui a logo "achatada" que tinha antes só na tela de login. */
/* Repaginado ("melhora essa logo") — anel giratório com degradê da marca em
   volta do círculo (pseudo-elemento com mask, gira sozinho) + brilho mais
   encorpado em camadas (azul + roxo), em vez de só um círculo liso com
   sombra simples. O logo em si continua flutuando suave como antes. */
.auth-logo-badge {
  width: 116px; height: 116px; border-radius: 50%; margin: 0 auto 20px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.26) 0%, rgba(16,17,23,0.55) 72%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.2), 0 0 46px rgba(var(--accent-rgb),0.4), 0 0 84px rgba(var(--accent-rgb),0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: authLogoFloat 3.6s ease-in-out infinite;
}
.auth-logo-badge::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent-2), var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.8; animation: authLogoRingSpin 7s linear infinite;
}
.auth-logo-img { display: block; height: 108px; width: 108px; border-radius: 50%; position: relative; z-index: 1; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4)); }
@keyframes authLogoFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}
@keyframes authLogoRingSpin { to { transform: rotate(360deg); } }
.auth-card-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #f2f3f5;
}
.subtitle { color: #9aa0ab; margin-top: 0; font-size: 13px; margin-bottom: 22px; }
.subtitle strong { color: var(--accent-3); }

@media (max-width: 860px) {
  .auth-split { flex-direction: column; max-width: 460px; border-radius: 20px; }
  .auth-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); min-height: 360px; }
  .auth-hero-title { font-size: 30px; }
  .auth-features { display: none; }
  .auth-card { padding: 32px 28px; }
}
.auth-tabs { display: flex; margin: 18px 0 16px; border-radius: 10px; overflow: hidden; background: #101116; padding: 3px; }
.auth-tab {
  flex: 1; padding: 9px; background: transparent; color: #8b909a; border: none; cursor: pointer;
  font-weight: 700; font-size: 13px; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease;
}
.auth-tab.active { background: var(--gradient-brand); color: white; box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.4); }
.auth-form { display: flex; flex-direction: column; gap: 11px; }
/* Campo com ícone, estilo "pill" escura — mesma linguagem visual da busca
   grande do topo (.navbar-search), só menor. Usado em qualquer input com
   ícone fora da tela de login (login tem o próprio visual, ver .auth-form
   input mais abaixo, que continua valendo por causa da ordem no arquivo).
   BUG CORRIGIDO: sem isso, esses campos (busca de amigos/conversas,
   adicionar amigo etc) caíam no estilo padrão do navegador — quadrado
   branco destoando de todo o resto do site escuro. */
.input-icon-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--bg-sidebar); border: 1px solid #26272e; border-radius: 20px; transition: border-color 0.15s ease;
}
.input-icon-wrap:focus-within { border-color: var(--accent); }
.input-icon-wrap input {
  width: 100%; padding: 8px 12px 8px 34px; border-radius: 20px; border: none; outline: none;
  background: none; color: #e6e6e6; font-size: 13px;
}
.input-icon-wrap input::placeholder { color: #6d7178; }
.input-icon {
  position: absolute; left: 12px; font-size: 14px; opacity: 0.6; pointer-events: none;
  display: flex; align-items: center;
}
.input-icon-svg .ng-icon { width: 15px; height: 15px; }
.auth-form input {
  width: 100%; padding: 12px 12px 12px 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
  background: #101116; color: #e6e6e6; font-size: 14px; transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-form input:focus { outline: none; border-color: var(--accent); background: #14151c; }
/* Botão de mostrar/esconder senha ("olhinho"), dentro do próprio campo —
   agora em TODO campo de senha do site (login, cadastro, trocar senha,
   2FA, recuperação de conta, senha de servidor...), não só no login. */
.input-icon-toggle {
  position: absolute; right: 6px; background: none; border: none; color: #8b909a; opacity: 0.7;
  padding: 6px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; margin: 0;
  box-shadow: none; transition: opacity 0.15s ease, background 0.15s ease;
}
.input-icon-toggle:hover { opacity: 1; background: rgba(255,255,255,0.06); filter: none; box-shadow: none; }
.input-icon-toggle .ng-icon { width: 16px; height: 16px; }
.input-icon-wrap:has(.input-icon-toggle) input { padding-right: 38px; }
#login-password { padding-right: 38px; }
/* Wrapper leve pra campos de senha que não tinham ícone à esquerda (fora
   das telas de auth) — só precisa de position:relative pro olhinho encaixar. */
.password-toggle-wrap { position: relative; }
.password-toggle-wrap input { padding-right: 38px !important; width: 100%; }
.auth-remember-row-wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 2px; flex-wrap: wrap; }
.auth-remember-row-wrap .auth-remember-row { margin: 0; }
.auth-forgot-link { font-size: 12px; color: var(--accent-3); text-decoration: none; font-weight: 600; }
.auth-forgot-link:hover { text-decoration: underline; }
.auth-form button {
  padding: 12px; border-radius: 8px; border: none; background: var(--gradient-brand); color: white;
  font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 6px;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.35);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-form button .ng-icon { width: 16px; height: 16px; }
.auth-form button:hover { filter: brightness(1.12); box-shadow: 0 8px 22px rgba(var(--accent-rgb),0.5); }
.auth-form button:active { transform: scale(0.98); }
.auth-error { color: #f23f42; font-size: 13px; min-height: 18px; margin-top: 6px; }
.auth-promo-card {
  display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; text-align: left;
  border-radius: 12px; background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.25);
}
.auth-promo-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--accent-rgb),0.2);
  color: var(--accent-3); display: flex; align-items: center; justify-content: center;
}
.auth-promo-icon .ng-icon { width: 18px; height: 18px; }
.auth-promo-text strong { display: block; font-size: 13px; color: #f2f3f5; margin-bottom: 2px; }
.auth-promo-text p { margin: 0; font-size: 11.5px; color: #9aa0ab; line-height: 1.4; }
.link-btn {
  background: none; box-shadow: none; color: #949ba4; font-size: 12px; font-weight: 600;
  padding: 4px 2px; text-decoration: underline; margin-top: 0;
}
.link-btn:hover { color: #e6e6e6; filter: none; box-shadow: none; }
/* ASSISTENTE DE CADASTRO EM 3 PASSOS */
.register-wizard { text-align: left; }
.wizard-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 22px; }
.wizard-step { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.5; transition: opacity 0.2s ease; }
.wizard-step.active, .wizard-step.done { opacity: 1; }
.wizard-step-num {
  width: 26px; height: 26px; border-radius: 50%; background: #26272e; color: #9aa0ab;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  transition: background 0.2s ease, color 0.2s ease;
}
.wizard-step.active .wizard-step-num { background: var(--gradient-brand); color: white; }
.wizard-step.done .wizard-step-num { background: var(--accent-3); color: #0e0f13; }
.wizard-step-label { font-size: 10px; color: #9aa0ab; font-weight: 700; text-transform: uppercase; }
.wizard-step-line { width: 34px; height: 2px; background: #26272e; margin-bottom: 16px; }
.wizard-title { font-size: 19px; font-weight: 900; margin: 0 0 4px; text-align: center; color: #f2f3f5; }
.wizard-subtitle { font-size: 12.5px; color: #9aa0ab; text-align: center; margin: 0 0 20px; }
.wizard-panel { display: flex; flex-direction: column; }
.wizard-label { font-size: 11px; font-weight: 700; color: #9aa0ab; text-transform: uppercase; margin: 10px 0 4px; }
.wizard-panel input, .wizard-panel select, .wizard-panel textarea {
  width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
  background: #101116; color: #e6e6e6; font-size: 13px;
}
.wizard-panel input:focus, .wizard-panel select:focus { outline: none; border-color: var(--accent); }
.wizard-next-btn {
  width: 100%; padding: 12px; border-radius: 8px; border: none; background: var(--gradient-brand); color: white;
  font-weight: 800; font-size: 13px; cursor: pointer; margin-top: 18px; letter-spacing: 0.03em;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.35); transition: filter 0.15s ease;
}
.wizard-next-btn:hover { filter: brightness(1.1); }
.wizard-back-btn {
  flex: 1; padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: transparent;
  color: #dbdee1; font-weight: 700; font-size: 13px; cursor: pointer; margin-top: 18px;
}
.wizard-actions { display: flex; gap: 10px; }
.wizard-actions .wizard-next-btn { margin-top: 18px; }
.wizard-footer-link { text-align: center; font-size: 12px; color: #9aa0ab; margin-top: 16px; }
.wizard-footer-link a { color: var(--accent-3); cursor: pointer; font-weight: 700; }
.wizard-consent { font-size: 10.5px; color: #6d7178; text-align: center; margin-top: 12px; line-height: 1.4; }

.wizard-avatar-upload {
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  padding: 14px; border: 1px dashed rgba(255,255,255,0.15); border-radius: 12px; margin-bottom: 6px;
  transition: border-color 0.15s ease;
}
.wizard-avatar-upload:hover { border-color: var(--accent); }
.wizard-avatar-preview {
  width: 60px; height: 60px; border-radius: 50%; background: #26272e; display: flex; align-items: center;
  justify-content: center; font-size: 22px; overflow: hidden;
}
.wizard-avatar-upload span { font-size: 11px; color: #9aa0ab; text-align: center; }

.wizard-tag-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; position: relative; z-index: 1; }
/* Especificidade reforçada (.wizard-tag-picker .wizard-tag-chip, não só .wizard-tag-chip):
   ".auth-form button" tinha prioridade maior que ".wizard-tag-chip" sozinha e pintava
   TODOS os chips com o gradiente desde o início — parecia que tudo já estava selecionado
   e por isso o clique "não fazia nada" visualmente. Esse era o bug real dos passos 2/3. */
.wizard-tag-picker .wizard-tag-chip {
  padding: 7px 13px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); background: var(--bg-sidebar);
  color: #dbdee1; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s ease;
  position: relative; z-index: 1; pointer-events: auto;
}
.wizard-tag-picker .wizard-tag-chip:hover { border-color: var(--accent); }
.wizard-tag-picker .wizard-tag-chip.active { background: var(--gradient-brand); border-color: transparent; color: white; }

.wizard-choice-group { display: flex; gap: 8px; position: relative; z-index: 1; }
.wizard-choice-group .wizard-choice-btn {
  flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: var(--bg-sidebar);
  color: #dbdee1; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease;
  position: relative; z-index: 1; pointer-events: auto;
}
.wizard-choice-group .wizard-choice-btn:hover { border-color: var(--accent); }
.wizard-choice-group .wizard-choice-btn.active { background: var(--gradient-brand); border-color: transparent; color: white; }

/* BUG relatado: chips/selects dos passos 2 e 3 do cadastro "não clicáveis".
   Reforço defensivo — garante que esses controles fiquem sempre acima de
   qualquer elemento decorativo (que não deveria interceptar clique, mas
   por segurança) e que o próprio painel do wizard nunca herde
   pointer-events:none de nada acima dele. */
.wizard-panel { position: relative; z-index: 1; pointer-events: auto; }
.wizard-panel select, .wizard-panel input { position: relative; z-index: 1; pointer-events: auto; }
.wizard-avatar-upload { position: relative; z-index: 1; pointer-events: auto; }

.link-button {
  background: none; border: none; color: #949ba4; font-size: 12px; cursor: pointer;
  text-decoration: underline; padding: 4px 0;
}
.link-button:hover { color: #e6e6e6; }

/* APP LAYOUT */
/* Usa 100dvh (com 100vh de fallback pra navegador antigo) em vez de só
   100vh: no celular, 100vh conta a altura "cheia" da tela sem descontar a
   barra de endereço/teclado virtual, o que empurrava a barra de digitar
   pra fora da área visível. 100dvh acompanha a altura real visível. */
.app { display: flex; flex-direction: row; height: 100vh; height: 100dvh; }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* SIDEBAR ÚNICA À ESQUERDA — marca, navegação, servidores e rodapé */
.app-sidebar {
  width: 260px; flex-shrink: 0; background: var(--bg-rail); border-right: 1px solid #1c1d22;
  display: flex; flex-direction: column; min-height: 0; padding: 16px 12px 12px;
}
.app-sidebar-logo { padding: 4px 6px 16px; display: flex; align-items: center; gap: 8px; }
.app-sidebar-logo-img { height: 30px; width: auto; display: block; }
/* "+ Criar" da navbar + menu suspenso */
.navbar-create-wrap { position: relative; }
.navbar-create-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: none;
  background: var(--gradient-brand); color: white; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35); transition: filter 0.15s ease;
}
.navbar-create-btn:hover { filter: brightness(1.1); }
.navbar-create-btn .ng-icon { width: 15px; height: 15px; }
.navbar-create-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 180px;
  background: #1e1f22; border: 1px solid #3a3c42; border-radius: 10px; padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 2px;
}
.navbar-create-menu button {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; border: none;
  background: none; color: #dbdee1; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.navbar-create-menu button:hover { background: var(--bg-modal); }
.navbar-create-menu .ng-icon { width: 15px; height: 15px; color: var(--accent-3); }

/* Chip de perfil no topo — agora é o ÚNICO lugar visível com essas funções
   (editar perfil, Plus, sons, Admin, Sair); o rodapé antigo da sidebar
   ficou só escondido no DOM (.app-sidebar-footer-hidden), sem sumir de vez
   pra não arriscar quebrar nada que ainda referencia os ids dele. */
.navbar-profile-chip-wrap { position: relative; }
.navbar-profile-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 24px; border: none;
  background: var(--bg-sidebar); border: 1px solid #26272e; cursor: pointer; transition: background 0.15s ease;
}
.navbar-profile-chip:hover { background: var(--bg-panel); }
.navbar-profile-chip .member-avatar { width: 30px; height: 30px; }
.navbar-profile-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
#navbar-chip-username { font-size: 12.5px; font-weight: 700; color: #f2f3f5; }
.navbar-chip-level { font-size: 10px; color: var(--accent-3); font-weight: 700; }
.navbar-chip-chevron { width: 13px; height: 13px; color: #6d7178; transform: rotate(90deg); margin-left: 2px; }
@media (max-width: 900px) { .navbar-profile-chip-text { display: none; } }
/* Rodapé antigo — continua existindo no DOM (compatibilidade com o app.js),
   só não aparece mais na tela. */
.app-sidebar-footer-hidden { display: none !important; }

/* Eventos em Destaque (coluna lateral da Início) */
.home-events-list { display: flex; flex-direction: column; gap: 6px; }
.home-event-row {
  display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; cursor: pointer;
  background: var(--bg-sidebar); border: 1px solid #26272e; transition: transform 0.15s ease, border-color 0.15s ease;
}
.home-event-row:hover { transform: translateX(2px); border-color: var(--accent); }
.home-event-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: rgba(250,166,26,0.16); color: #ffd76b;
  display: flex; align-items: center; justify-content: center;
}
.home-event-icon .ng-icon { width: 14px; height: 14px; }
.home-event-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-event-info strong { font-size: 12.5px; color: #f2f3f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-event-info span { font-size: 10.5px; color: #9aa0ab; }
.home-event-status { flex-shrink: 0; font-size: 8.5px; font-weight: 800; padding: 3px 7px; border-radius: 10px; text-align: center; }
.home-event-status-open { background: rgba(59,165,92,0.16); color: #7de3a0; }
.home-event-status-live { background: rgba(250,166,26,0.16); color: #ffd76b; }
.home-event-status-full { background: rgba(242,63,66,0.16); color: #ff9296; }

/* Jogos Salvos (modal) */
.saved-game-add-row { display: flex; gap: 8px; margin: 4px 0 12px; }
.saved-game-add-row input {
  flex: 1; padding: 9px 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.08);
  background: #101116; color: #e6e6e6; font-size: 13px;
}
.saved-game-add-row button {
  padding: 9px 14px; border-radius: 7px; border: none; background: var(--gradient-brand); color: white;
  font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.saved-games-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.saved-game-row {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px;
  background: var(--bg-sidebar); border: 1px solid #26272e; font-size: 13px; color: #dbdee1;
}
.saved-game-row .ng-icon { width: 14px; height: 14px; color: var(--accent-3); margin-right: 6px; vertical-align: -2px; }
.saved-game-remove { background: none; border: none; color: #6d7178; cursor: pointer; padding: 3px; display: flex; }
.saved-game-remove:hover { color: #f23f42; }

/* Modal do vídeo de apresentação */
.watch-video-card { padding: 0; background: black; border-radius: 14px; overflow: hidden; position: relative; max-width: 720px; }
.watch-video-card video { width: 100%; display: block; max-height: 70vh; }
.watch-video-close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: none; color: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.beta-tag {
  background: rgba(var(--accent-rgb),0.18); color: #a7b0ff; border: 1px solid rgba(var(--accent-rgb),0.4);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px;
  cursor: default;
}

.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.app-sidebar-section-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6d7178; padding: 14px 10px 6px;
}
.sidebar-nav-item {
  display: flex; align-items: center; gap: 10px; background: none; border: none; color: #8b909a;
  font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 9px 10px; border-radius: 8px;
  text-align: left; width: 100%; transition: color 0.15s ease, background 0.15s ease; position: relative;
}
.sidebar-nav-item:hover { color: #e6e6e6; background: var(--bg-sidebar); }
.sidebar-nav-item.active {
  color: white; background: var(--gradient-brand); box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35);
}
.sidebar-nav-item-solo { margin-bottom: 4px; }

.app-sidebar-servers-header {
  display: flex; align-items: center; justify-content: space-between; padding: 0 2px; margin-top: 8px;
}
.app-sidebar-servers-header .app-sidebar-section-label { padding: 6px 8px; }
.app-sidebar-servers-actions { display: flex; gap: 4px; }
.app-sidebar-servers-toggle {
  display: flex; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 0;
}
.app-sidebar-servers-toggle:hover .app-sidebar-section-label { color: #dbdee1; }
/* CORRIGIDO: mesmo anel azul padrão do navegador que já tinha sido tirado
   do "⋯" da coluna de canais — aqui aparecia em volta de "SERVIDORES" (e das
   outras seções colapsáveis) ao clicar, criando um retângulo grande e feio
   sobrando espaço estranho. Troca por um contorno mais discreto, só via teclado. */
.app-sidebar-servers-toggle:focus,
.app-sidebar-icon-btn:focus { outline: none; }
.app-sidebar-servers-toggle:focus-visible,
.app-sidebar-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#servers-toggle-chevron { color: #6d7178; transition: transform 0.15s ease; }
#servers-toggle-chevron.open { transform: rotate(90deg); }
/* Botões de seção (Explorar/Competitivo/Sua Biblioteca) — mesmo visual do
   toggle de Servidores, só ocupando a largura toda (ali fica sozinho na
   linha, sem os ícones de ação ao lado). */
.app-sidebar-section-toggle { width: 100%; text-align: left; }
.app-sidebar-section-toggle .ng-icon-wrap { color: #6d7178; transition: transform 0.15s ease; }
.app-sidebar-section-toggle .ng-icon-wrap.open { transform: rotate(90deg); }
.app-sidebar-icon-btn {
  background: var(--bg-sidebar); border: none; color: #8b909a; width: 26px; height: 26px; border-radius: 7px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.app-sidebar-icon-btn:hover { background: #26272e; color: #e6e6e6; }
/* Espaço da lista de servidores (some/aparece ao clicar em "Servidores") —
   pedido explícito: estava baixo demais, cortando a lista rápido demais. */
.app-sidebar-servers { flex: 1; min-height: 220px; max-height: 340px; overflow-y: auto; padding: 2px 0 8px; }
.server-rail-list { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.server-row {
  display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
  color: #dbdee1; cursor: pointer; padding: 7px 8px; border-radius: 8px; position: relative;
  transition: background 0.15s ease;
}
.server-row:hover { background: var(--bg-sidebar); }
.server-row.active { background: var(--bg-sidebar); }
.server-row-icon {
  width: 30px; height: 30px; border-radius: 9px; background: var(--gradient-brand); color: white;
  font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
/* Servidores oficiais usam a logo de verdade em vez de emoji/inicial — a
   imagem preenche o quadradinho do ícone (trilho lateral, card de destaque
   e Explorar), object-fit:cover corta sobra sem distorcer. */
.server-icon-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.server-row-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600;
}
.server-row-dot { width: 7px; height: 7px; border-radius: 50%; background: #3a3c42; flex-shrink: 0; }
.server-row-dot-on { background: #23a55a; box-shadow: 0 0 6px rgba(35,165,90,0.7); }
.server-row-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #f23f42; color: white;
  font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.app-sidebar-footer {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 10px; border-top: 1px solid #1c1d22;
  position: relative;
}
.app-sidebar-footer .navbar-profile { flex: 1; min-width: 0; }
.app-sidebar-footer .navbar-icon-btn { width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }

/* Menu do chip de perfil (topo) — abre pra BAIXO, ancorado no chip. Já foi
   o menu "..." do rodapé antigo (abria pra cima); mudou de lugar junto com
   o chip pro topo da tela. */
.footer-more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 200px; background: var(--bg-sidebar);
  border: 1px solid #26272e; border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 2px; z-index: 40;
}
.footer-more-menu button, .footer-more-menu a {
  display: flex; align-items: center; gap: 10px; background: none; border: none; color: #dbdee1;
  text-decoration: none; font-size: 13px; font-weight: 600; padding: 9px 10px; border-radius: 7px;
  cursor: pointer; text-align: left; width: 100%;
}
.footer-more-menu button:hover, .footer-more-menu a:hover { background: #26272e; color: #fff; }

/* NAVBAR SUPERIOR (slim) */
.top-navbar {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: var(--bg-rail); border-bottom: 1px solid #1c1d22; gap: 20px;
}
.navbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.navbar-search {
  position: relative; display: flex; align-items: center; gap: 6px; background: var(--bg-sidebar); border-radius: 20px;
  padding: 7px 14px; font-size: 12px;
}
.navbar-search input {
  background: none; border: none; color: #e6e6e6; outline: none; font-size: 13px; width: 280px;
}
.navbar-search-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; width: 340px; max-height: 70vh; overflow-y: auto;
  background: var(--bg-sidebar); border: 1px solid #26272e; border-radius: 12px; padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); z-index: 60;
}
.search-group { margin-bottom: 6px; }
.search-group:last-child { margin-bottom: 0; }
.search-group-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; color: #6d7178; padding: 6px 8px 4px;
}
.search-result-item {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer;
  transition: background 0.12s ease;
}
.search-result-item:hover { background: rgba(255,255,255,0.05); }
.search-result-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 15px; background: rgba(var(--accent-rgb),0.15); overflow: hidden;
}
.search-result-icon img, .search-result-icon.round { border-radius: 50%; }
.search-result-text { min-width: 0; flex: 1; }
.search-result-title { display: block; font-size: 13px; color: #e6e6e6; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-meta { display: block; font-size: 11px; color: #8b909a; }
.search-empty { padding: 14px; text-align: center; font-size: 12px; color: #6d7178; }
.navbar-icon-btn {
  position: relative; background: var(--bg-sidebar); border: none; color: #e6e6e6; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; font-size: 15px;
}
.navbar-icon-btn:hover { background: #26272e; }
.navbar-badge {
  position: absolute; top: -2px; right: -2px; background: #f23f42; color: white; font-size: 9px;
  font-weight: 800; border-radius: 8px; padding: 1px 4px; min-width: 14px;
}
.navbar-profile {
  display: flex; align-items: center; gap: 8px; background: var(--bg-sidebar); border: none; border-radius: 20px;
  padding: 4px 12px 4px 4px; cursor: pointer;
}
.navbar-profile:hover { background: #26272e; }
.navbar-profile-text { display: flex; flex-direction: column; align-items: flex-start; }
#navbar-username { font-size: 12px; font-weight: 700; color: #e6e6e6; }
.navbar-level { font-size: 10px; color: var(--accent-3); font-weight: 600; }

/* Trilho de servidores, igual Discord */
.server-rail {
  width: 72px; background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb),0.15), transparent 60%),
    var(--bg-rail);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 12px 0; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid #1c1d22;
}
.server-rail-list { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.server-icon {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: #26272e; color: #dbdee1; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: border-radius 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.server-icon:hover { border-radius: 30%; background: var(--gradient-brand); transform: translateY(-1px); }
.server-icon.active {
  border-radius: 30%; background: var(--gradient-brand);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 16px rgba(var(--accent-rgb),0.55);
  animation: serverGlow 2.4s ease-in-out infinite;
}
@keyframes serverGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 16px rgba(var(--accent-rgb),0.5); }
  50% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 22px rgba(var(--accent-rgb),0.65); }
}
.server-icon.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 4px; background: white;
}
.server-icon-add {
  background: #26272e; color: var(--accent-3); font-size: 22px; font-weight: 400;
  border: 1px dashed #3a3c42;
}
.server-icon-add:hover { background: var(--accent-3); color: #0e0f13; border-style: solid; border-radius: 30%; }

/* Badge de mensagens não lidas no ícone do servidor, igual Discord. */
.server-icon-badge {
  position: absolute; bottom: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 10px; background: #f23f42; color: white; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--bg-rail);
}

.sidebar {
  width: 240px; background: var(--bg-sidebar); display: flex; flex-direction: column; padding: 0;
  min-height: 0; overflow-y: auto;
}
/* Repaginado (a pedido — "coluna do meio ficou tumultuada"): cabeçalho antes
   tinha 6 botõezinhos de 22px espremidos numa linha só, sem respiro nenhum.
   Agora só sobra o essencial visível (Criar sala + Fechar); o resto vira um
   menu "⋯" (ver .sidebar-more-*). Mesmos ids/onclick de sempre — só mudou o
   agrupamento visual, nenhuma função foi tirada. */
.sidebar-header {
  font-weight: 700; padding: 20px 16px 8px; color: #f2f3f5; display: flex;
  align-items: center; justify-content: space-between; letter-spacing: 0.01em; gap: 8px;
}
.sidebar-header-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Bolinha discreta em vez do quadrado com degradê forte — combina mais com
   um visual minimalista, sem competir com o resto da tela. */
.sidebar-header-icon {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
#active-server-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; }
.sidebar-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sidebar-header button {
  background: transparent; color: #6d7178; border: none; border-radius: 50%;
  width: 26px; height: 26px; cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-header button:hover { background: rgba(255,255,255,0.06); color: #dbdee1; }
/* CORRIGIDO: o anel azul padrão do navegador ao clicar/focar um botão
   redondo ficava "cortado" bem em cima do menu que abre logo abaixo (caso
   do "⋯"). Troca por um anel suave que respeita o formato circular do
   botão, só aparece navegando por teclado (não some feedback de acessibilidade). */
.sidebar-header button:focus { outline: none; }
.sidebar-header button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "⋯" fica destacado enquanto o menu dele está aberto — mesma cor do resto
   dos estados "ativo" do app, só que sem o anel de foco brigando com o menu. */
.sidebar-header button.active-state { background: rgba(var(--accent-rgb),0.16); color: var(--accent-3); }

/* "Criar sala" ainda se destaca (é a ação mais usada), mas com uma cor
   suave em vez do degradê chapado — mais elegante, menos "gritando". */
.sidebar-header-btn-primary {
  background: rgba(var(--accent-rgb),0.16) !important; color: var(--accent-3) !important;
}
.sidebar-header-btn-primary:hover { background: var(--accent) !important; color: white !important; }

/* Menu "⋯" — reúne loja/informações/gerenciar/sala rápida, que antes
   ficavam soltos no cabeçalho poluindo a linha inteira. */
.sidebar-more-wrap { position: relative; }
.sidebar-more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 248px; z-index: 60;
  background: var(--bg-modal); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.5); padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
/* CORRIGIDO: texto quebrando em 2 linhas deixava o menu com altura
   desigual entre itens e parecendo bagunçado — agora nunca quebra linha
   (menu já nasce largo o bastante pro item mais comprido). */
.sidebar-more-menu button {
  width: 100%; background: none; border: none; color: #cfd2d8; font-size: 13px; font-weight: 600;
  text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 11px; transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-more-menu button:hover { background: rgba(255,255,255,0.05); color: white; }
.sidebar-more-menu .ng-icon-wrap { width: 15px; height: 15px; color: #6d7178; flex-shrink: 0; }
.sidebar-more-menu button:hover .ng-icon-wrap { color: var(--accent-3); }

#categories-container { flex: 1; overflow-y: auto; min-height: 0; padding: 6px 10px 16px; }
.category { margin-top: 14px; }
.category-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #949ba4; padding: 4px 8px; }

/* Cabeçalho de grupo recolhível ("CANAIS DE TEXTO"/"CANAIS DE VOZ") —
   discreto de propósito, quase invisível até você prestar atenção. */
.channel-category-header {
  display: flex; align-items: center; gap: 5px; padding: 16px 4px 8px; margin: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5c6068; cursor: pointer; user-select: none; transition: color 0.12s ease;
}
.channel-category-header:hover { color: #9aa0ab; }
.channel-category-chevron {
  display: inline-block; font-size: 9px; transition: transform 0.15s ease; transform: rotate(0deg);
}
.channel-category-chevron.collapsed { transform: rotate(-90deg); }

.channel-list { display: flex; flex-direction: column; gap: 1px; }
/* Item de canal como uma "pílula" flat — sem barrinha lateral, sem sombra
   de destaque; só uma cor de fundo suave marca o que está ativo. */
.channel-item {
  padding: 9px 12px; border-radius: 10px; color: #8b909a; cursor: pointer; font-size: 13.5px; font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.channel-item:hover { background: rgba(255,255,255,0.045); color: #dbdee1; }
.channel-item.active { background: rgba(var(--accent-rgb),0.15); color: #b8ffe0; }
.channel-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ícones de ação que só aparecem passando o mouse por cima do canal — igual Discord. */
.channel-item-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  opacity: 0; transform: translateX(4px); transition: opacity 0.12s ease, transform 0.12s ease;
}
.channel-item:hover .channel-item-actions { opacity: 1; transform: translateX(0); }
.channel-action-icon {
  width: 22px; height: 22px; border: none; border-radius: 6px; background: transparent;
  color: #9aa0ab; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.channel-action-icon:hover { background: rgba(255,255,255,0.08); color: #f2f3f5; }
.sidebar-footer {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 8px;
  border-top: 1px solid #2c2e36; font-size: 13px;
}
.sidebar-footer #me-username { flex: 1; font-weight: 600; }
.sidebar-footer a, .sidebar-footer button {
  background: none; border: none; color: #949ba4; text-align: left; cursor: pointer; padding: 0;
}
.sidebar-footer button:hover, .sidebar-footer a:hover { color: var(--accent-3); }

.main { flex: 1; display: flex; flex-direction: column; background: var(--bg-panel); min-width: 0; min-height: 0; }
.main-header {
  padding: 14px 16px; border-bottom: 1px solid #2c2e36; font-weight: 700;
  display: flex; align-items: center; gap: 2px; position: relative;
}
#current-channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Repaginado (a pedido — "botões do lado do nome ficaram feios"): antes
   eram quadrados cinza sólidos de 30px, meio pesados visualmente. Agora
   ficam transparentes até passar o mouse, em círculo — mesmo espírito
   minimalista já usado na coluna de canais. */
.header-icon-btn {
  background: transparent; border: none; color: #7d828c; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.header-icon-btn:hover { background: rgba(255,255,255,0.07); color: #f2f3f5; }
.header-icon-btn.active-state { background: rgba(var(--accent-rgb),0.16); color: var(--accent-3); }

.text-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
/* Arrastar e soltar arquivo pra anexar — cobre a conversa inteira enquanto
   um arquivo está sendo arrastado por cima, com destaque visual claro de
   "solte aqui". Não intercepta clique nenhum quando escondido. */
.chat-dropzone-overlay {
  position: absolute; inset: 8px; z-index: 50; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; background: rgba(var(--accent-rgb),0.14); backdrop-filter: blur(2px);
  border: 2px dashed var(--accent); border-radius: 14px; color: #fff; font-size: 14px; font-weight: 700;
  pointer-events: none;
}
.chat-dropzone-overlay .ng-icon-wrap { width: 32px; height: 32px; color: var(--accent); }

/* PAINEL DE INÍCIO (home dashboard) — compacto: menos espaço vazio, mais
   coisa cabendo na tela sem precisar rolar tanto. */
.home-panel { flex: 1; overflow-y: auto; padding: 16px 22px 24px; }
.home-hero {
  border-radius: 16px; padding: 40px 32px; margin-bottom: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb),0.35), transparent 55%),
    radial-gradient(circle at 85% 60%, rgba(var(--accent-2-rgb),0.22), transparent 50%),
    linear-gradient(135deg, var(--bg-sidebar), #101116);
  position: relative; overflow: hidden;
}
.home-hero-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent-3); }
.home-hero-title { font-size: 44px; font-weight: 900; margin: 6px 0 10px; letter-spacing: 0.01em; }
.home-hero-sub { color: #9aa0ab; font-size: 14px; max-width: 480px; margin: 0 0 20px; }
.home-hero-actions { display: flex; gap: 10px; }
.home-btn-primary, .home-btn-secondary {
  padding: 11px 20px; border-radius: 8px; border: none; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.home-btn-primary { background: var(--gradient-brand); color: white; box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.4); }
.home-btn-secondary { background: rgba(255,255,255,0.06); color: #e6e6e6; border: 1px solid rgba(255,255,255,0.1); }
.home-btn-primary:hover, .home-btn-secondary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Banner em destaque — o cartão principal da tela de Início. Agora um hero
   grande com a imagem de fundo do NEXT GAME (mesma arte do login), em vez
   de uma faixa fina — dá o "cara de plataforma premium" pedido, sem
   precisar de nenhuma imagem nova. */
.home-tournament-banner {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 220px;
  background-image:
    linear-gradient(100deg, rgba(8,8,14,0.94) 0%, rgba(8,8,14,0.75) 40%, rgba(8,8,14,0.25) 75%, rgba(8,8,14,0.1) 100%),
    url('/assets/auth-hero.png');
  background-size: cover; background-position: 75% 30%;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; justify-content: center; padding: 26px 30px;
}
.home-tournament-banner-inner { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.home-tournament-banner-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 24px; background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.home-tournament-banner-text { flex: 1; min-width: 0; }
.home-tournament-banner-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent-3);
}
.home-tournament-banner-text h2 { font-size: 26px; font-weight: 900; margin: 4px 0 6px; line-height: 1.1; }
.home-tournament-banner-prize { font-size: 13px; color: #dbdee1; margin: 0 0 3px; }
.home-tournament-banner-prize strong { color: #ffd76b; }
.home-tournament-banner-slots { font-size: 12px; color: #9aa0ab; }
.home-tournament-banner-inner .home-btn-primary { flex-shrink: 0; padding: 11px 22px; font-size: 13px; letter-spacing: 0.03em; }
/* Ações secundárias fixas do hero (Explorar Comunidade / Assistir vídeo) —
   aparecem sempre, junto do que já era dinâmico (torneio ou convite pra
   criar um), igual ao mockup. */
.home-hero-secondary-actions { display: flex; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.home-hero-secondary-actions .home-btn-primary, .home-hero-secondary-actions .home-btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
}
.home-hero-secondary-actions .home-btn-secondary { background: rgba(255,255,255,0.05); backdrop-filter: blur(4px); }

/* EXPLORAR SERVIDORES */
.explore-grid { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.explore-card {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px;
  background: var(--bg-sidebar); border: 1px solid #26272e;
}
.explore-card-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: rgba(var(--accent-rgb),0.15);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;
}
.explore-card-info { flex: 1; min-width: 0; }
.explore-card-info strong { display: block; font-size: 14px; color: #f2f3f5; }
.explore-card-info p { margin: 2px 0; font-size: 12px; color: #9aa0ab; }
.explore-card-meta { font-size: 11px; color: #6d7178; }
.explore-card-btn { flex-shrink: 0; }

.home-quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.home-quick-action {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  background: var(--bg-sidebar); border: 1px solid #26272e; cursor: pointer; text-align: left;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.home-quick-action:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb),0.2); background: #1e1f26;
}
.home-quick-action:active { transform: translateY(-1px) scale(0.98); }
.home-quick-action-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--accent-rgb),0.14);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.home-quick-action-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.home-quick-action-text strong { font-size: 12.5px; color: #f2f3f5; }
.home-quick-action-text span { font-size: 10.5px; color: #9aa0ab; }

/* REPAGINADO (a pedido): as estatísticas da comunidade eram 4 cards grandes
   no meio da tela de Início — viraram uma fileira pequena e minimalista,
   centralizada no cabeçalho de cima, ao lado de "Início". position:absolute
   de propósito: fica sempre centralizada sem empurrar o resto do cabeçalho
   nem alargar a coluna, não importa o tamanho da tela. */
.home-header-stats {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 20px;
}
.home-header-stat { display: flex; align-items: center; gap: 7px; }
.home-header-stat-icon {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--accent-rgb),0.14); color: var(--accent-3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.home-header-stat-icon .ng-icon { width: 11px; height: 11px; }
.home-header-stat-text { display: flex; flex-direction: column; line-height: 1.1; }
.home-header-stat-num { font-size: 12.5px; font-weight: 800; color: #f2f3f5; }
.home-header-stat-label { font-size: 9px; color: #7d828c; text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 900px) { .home-header-stats { display: none; } }

.home-section-title {
  font-size: 12.5px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.03em; color: #dbdee1;
}
.home-section-title .ng-icon-wrap { color: var(--accent-3); }
.home-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
/* Card do jogo parceiro (Magic Tank) — banner com a arte do jogo + nome. */
.home-partner-game-card {
  display: flex; align-items: center; gap: 14px; background: var(--bg-sidebar); border: 1px solid #26272e;
  border-radius: 12px; padding: 10px; margin-bottom: 4px;
}
.home-partner-game-img { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.home-partner-game-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.home-partner-game-info strong { font-size: 14px; color: #f2f3f5; }
.home-partner-game-info span { font-size: 12px; color: #9aa0ab; }
.home-partner-game-btn {
  display: flex; align-items: center; gap: 6px; background: var(--gradient-brand); color: white;
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 20px; text-decoration: none;
  flex-shrink: 0; white-space: nowrap; transition: filter 0.15s ease, transform 0.15s ease;
}
.home-partner-game-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.home-partner-game-btn .ng-icon-wrap { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .home-partner-game-card { flex-wrap: wrap; }
  .home-partner-game-btn { width: 100%; justify-content: center; }
}
.home-servers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.home-server-card {
  background: var(--bg-sidebar); border: 1px solid #26272e; border-radius: 12px; overflow: hidden; text-align: center;
  cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; padding-bottom: 8px;
}
.home-server-card:hover {
  transform: translateY(-3px) scale(1.02); border-color: var(--accent);
  box-shadow: 0 10px 20px rgba(var(--accent-rgb),0.22);
}
.home-server-card:active { transform: translateY(-1px) scale(0.99); }
/* Servidor oficial que a pessoa ainda não é membro — aparece pra todo mundo
   (a pedido), com botão "Entrar" em vez de abrir direto, já que ela ainda
   não tem acesso. */
.home-server-card-joinable { cursor: default; }
.home-server-join-btn {
  margin-top: 6px; width: calc(100% - 16px); background: var(--gradient-brand); color: white; border: none;
  border-radius: 8px; padding: 6px 0; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: filter 0.15s ease;
}
.home-server-join-btn:hover { filter: brightness(1.1); }
/* Faixa colorida no topo do card (gradientForName no JS) — substitui a
   "capa" de jogo que não temos como gerar; dá o mesmo efeito visual de
   card mais rico, sem imagem nenhuma. */
.home-server-banner {
  height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.home-server-icon {
  width: 34px; height: 34px; border-radius: 10px; background: rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: white; font-size: 15px;
  backdrop-filter: blur(2px);
}
.home-server-name { font-size: 12px; font-weight: 700; color: #e6e6e6; margin-bottom: 2px; padding: 0 6px; }
.home-server-meta { font-size: 10px; color: #8b909a; padding: 0 6px; }

.home-playing-now { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.playing-now-card {
  display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--bg-sidebar), var(--bg-panel));
  border: 1px solid #26272e; border-radius: 10px; padding: 9px 11px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.playing-now-card:hover { transform: translateY(-2px); border-color: var(--accent-2); }

.home-conversations-list { display: flex; flex-direction: column; gap: 2px; }
.home-conversation-row {
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 7px; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.home-conversation-row:hover { background: rgba(var(--accent-rgb),0.1); transform: translateX(2px); }
.home-conversation-info { display: flex; flex-direction: column; min-width: 0; font-size: 11px; line-height: 1.3; }
.home-conversation-info strong { color: #e6e6e6; font-size: 12px; }
.home-conversation-info span { color: #9aa0ab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playing-now-info { display: flex; flex-direction: column; font-size: 11px; line-height: 1.3; }
.playing-now-info strong { color: #e6e6e6; }
.playing-now-info span { color: var(--accent-3); }
.home-streak-card .home-section-title { margin-bottom: 2px; }

.home-activity {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto; padding-right: 2px;
}
.activity-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; background: var(--bg-sidebar);
  margin-bottom: 4px;
}
.activity-text { flex: 1; min-width: 0; font-size: 11.5px; color: #dbdee1; }
.activity-channel { color: var(--accent-3); }
.activity-content { color: #9aa0ab; font-size: 11.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-time { font-size: 10.5px; color: #6d7178; flex-shrink: 0; }

.home-col-side { display: flex; flex-direction: column; gap: 10px; }
.home-side-card { background: var(--bg-sidebar); border: 1px solid #26272e; border-radius: 10px; padding: 11px 12px; }
.home-tournament-card h3 { margin: 0 0 6px; font-size: 13px; }

@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
}
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.message { display: flex; flex-direction: column; position: relative; padding: 4px 6px; border-radius: 6px; }
.message:hover { background: rgba(255,255,255,0.02); }
.message .meta { font-size: 12px; color: #949ba4; display: flex; align-items: center; gap: 6px; }
.message .meta strong { color: #e6e6e6; }
.message .meta .edited-tag { font-size: 10px; color: #6d7178; }
.message .meta .pinned-tag { font-size: 10px; color: #f0b232; font-weight: 700; }
.tournament-bracket {
  display: flex; gap: 16px; overflow-x: auto; padding: 12px 0; margin-top: 10px;
  border-top: 1px solid #2c2e36;
}
.bracket-round { display: flex; flex-direction: column; gap: 10px; min-width: 180px; justify-content: space-around; }
.bracket-round-label { font-size: 11px; font-weight: 800; color: #949ba4; text-transform: uppercase; }
.bracket-match { background: #1e1f22; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.bracket-side { font-size: 13px; color: #949ba4; padding: 2px 4px; }
.bracket-side.bracket-winner { color: #23a55a; font-weight: 700; }
.bracket-report-btn {
  margin-top: 4px; font-size: 11px; padding: 4px 8px; border-radius: 4px; border: none;
  background: var(--gradient-brand); color: white; cursor: pointer;
}
.bracket-evidence-link { font-size: 11px; color: var(--accent-3); text-decoration: none; }
.bracket-evidence-link:hover { text-decoration: underline; }
.bracket-report-form {
  display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px;
  background: #16171b; border-radius: 6px; border: 1px solid #26272e;
}
.bracket-report-radio { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #dbdee1; cursor: pointer; }
.bracket-report-scores { display: flex; gap: 6px; }
.bracket-report-scores input {
  flex: 1; min-width: 0; padding: 6px; border-radius: 4px; border: 1px solid #26272e; background: #1e1f22;
  color: #e6e6e6; font-size: 12px;
}
.bracket-report-evidence-label { font-size: 11px; color: #9aa0ab; display: flex; flex-direction: column; gap: 4px; }
.bracket-report-evidence-label input { font-size: 11px; color: #9aa0ab; }
.bracket-report-submit {
  padding: 6px; border-radius: 4px; border: none; background: #23a55a; color: white;
  font-weight: 700; font-size: 12px; cursor: pointer;
}
.bracket-report-submit:disabled { opacity: 0.6; cursor: default; }
.liga-standings { margin-bottom: 14px; background: var(--bg-sidebar); border-radius: 8px; overflow: hidden; border: 1px solid #26272e; }
.liga-standings-header, .liga-standings-row {
  display: grid; grid-template-columns: 28px 1fr 36px 36px 36px 44px; gap: 4px; padding: 7px 10px; font-size: 12px;
}
.liga-standings-header { background: #16171b; color: #6d7178; font-weight: 800; text-transform: uppercase; font-size: 10px; }
.liga-standings-row { color: #dbdee1; border-top: 1px solid #26272e; }
.liga-standings-row:first-child { border-top: none; }
.thread-reply-tag {
  font-size: 11px; color: #6d7178; margin-bottom: 2px; padding-left: 6px;
  border-left: 2px solid #3a3c42;
}
.reply-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: #26272e; padding: 8px 14px; font-size: 12px; color: #dbdee1;
  border-top: 1px solid #33353d;
}
.reply-banner button {
  background: none; border: none; color: #949ba4; cursor: pointer; font-size: 14px;
}
.reply-banner button:hover { color: #f2f3f5; }
.message.bot-message { background: rgba(0, 217, 192, 0.05); border-left: 2px solid var(--accent-3); padding-left: 8px; }
.message.bot-message .message-avatar { background: linear-gradient(135deg, var(--accent-2), #00a3ff); }
.bot-tag {
  background: var(--accent-3); color: #0e0f13; font-size: 9px; font-weight: 800;
  padding: 1px 5px; border-radius: 3px; letter-spacing: 0.03em;
}
.message .content { font-size: 14px; }
.message .content.deleted { color: #6d7178; font-style: italic; }
.msg-link { color: #00b8ff; text-decoration: underline; word-break: break-all; }
.msg-link:hover { color: var(--accent); }

/* Menção @usuário — pill roxo-claro, igual Discord. Fica mais forte quando
   é uma menção a você mesmo (mesma lógica de destaque de SFX.mention). */
.mention {
  background: rgba(var(--accent-rgb),0.15); color: #c9cdfb; border-radius: 4px;
  padding: 0 3px; font-weight: 600; cursor: default;
}
.mention-me { background: rgba(var(--accent-rgb),0.35); color: #e8e9fd; }

/* Divisor de data entre mensagens de dias diferentes — igual Discord. */
.message-date-divider {
  display: flex; align-items: center; gap: 12px; margin: 10px 4px 4px;
  color: #949ba4; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em;
}
.message-date-divider::before, .message-date-divider::after {
  content: ''; flex: 1; height: 1px; background: #35373c;
}
.game-invite-card {
  background: var(--bg-modal); border: 1px solid #3a3c42; border-radius: 8px; padding: 10px 12px; max-width: 320px;
}
.game-invite-header { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 6px; }
.game-invite-body { font-size: 13px; margin-bottom: 8px; }
.game-invite-actions { display: flex; gap: 8px; }
.game-invite-actions button {
  flex: 1; border: none; border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.game-invite-accept { background: #23a55a; color: white; }
.game-invite-decline { background: #404249; color: #dbdee1; }
.game-invite-waiting { font-size: 11px; color: #949ba4; font-style: italic; }
.message .report-link {
  font-size: 11px; color: #f23f42; cursor: pointer; margin-top: 2px; display: inline-block;
}
.message-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; margin-right: 8px;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: var(--gradient-brand); color: white; overflow: hidden;
}
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-row { display: flex; align-items: flex-start; }
.message-body { flex: 1; min-width: 0; }

.message-actions {
  position: absolute; top: -14px; right: 6px; display: none; gap: 2px;
  background: #26272e; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.4); padding: 2px;
}
.message:hover .message-actions { display: flex; }
.message-actions button {
  width: 26px; height: 26px; border-radius: 4px; border: none; background: transparent;
  color: #dbdee1; cursor: pointer; font-size: 13px;
}
.message-actions button:hover { background: #35373c; }

/* ---------- BALÕES DE DM (conversa 1:1) ---------- */
/* Só ativa quando .dm-message está presente (canal começa com "dm::") — em
   canal de servidor a mensagem continua no formato de lista normal. */
.message.dm-message { padding: 3px 4px; }
.dm-message .message-row { align-items: flex-end; gap: 8px; }
.dm-message-own .message-row { flex-direction: row-reverse; }
.dm-message .message-avatar { width: 28px; height: 28px; margin: 0; }
.dm-message-own .message-avatar { display: none; } /* seu avatar não precisa repetir do seu lado */
.dm-message .message-body { flex: 0 1 auto; max-width: 72%; min-width: 0; }
.dm-message-own .message-body { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.dm-message-their .message-body { display: flex; flex-direction: column; align-items: flex-start; }
.dm-message .meta {
  font-size: 10.5px; color: #6d7178; margin-bottom: 3px; gap: 4px;
}
.dm-message-own .meta strong { display: none; } /* seu próprio nome não precisa aparecer */
.dm-message .content {
  display: inline-block; padding: 9px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.4;
  max-width: 100%; overflow-wrap: break-word;
}
.dm-message-their .content { background: var(--bg-modal); color: #e6e6e6; border-bottom-left-radius: 4px; }
.dm-message-own .content { background: var(--gradient-brand); color: white; border-bottom-right-radius: 4px; }
.dm-message .message-reactions { justify-content: flex-start; }
.dm-message-own .message-reactions { justify-content: flex-end; }
.dm-message-own .message-actions { right: auto; left: 6px; }
/* Read receipt (✓✓) simples — mostra que a mensagem foi enviada. Não temos
   confirmação de "lido" ainda (exigiria rastrear leitura por mensagem, não
   só por canal), então é só um "enviado", igual um único check. */
.dm-message-own .content::after {
  content: '✓'; display: inline-block; margin-left: 6px; font-size: 10px; opacity: 0.7; vertical-align: middle;
}

.reaction-picker {
  position: absolute; top: -46px; right: 6px; background: #26272e; border-radius: 8px;
  padding: 4px; display: none; gap: 2px; box-shadow: 0 2px 10px rgba(0,0,0,0.4); z-index: 5;
}
.reaction-picker.open { display: flex; }
.reaction-picker button {
  width: 26px; height: 26px; border: none; background: transparent; cursor: pointer; font-size: 15px; border-radius: 4px;
}
.reaction-picker button:hover { background: #35373c; }

.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip {
  display: flex; align-items: center; gap: 4px; background: #26272e; border: 1px solid #35373c;
  border-radius: 10px; padding: 1px 7px; font-size: 12px; cursor: pointer; color: #dbdee1;
}
.reaction-chip:hover { border-color: var(--accent); }
.reaction-chip.reacted { background: rgba(var(--accent-rgb), 0.2); border-color: var(--accent); color: #b8ffe0; }

.typing-indicator { min-height: 18px; padding: 0 16px; font-size: 12px; color: #949ba4; font-style: italic; }

.dm-request-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-modal); border-top: 1px solid #3a3c42; border-bottom: 1px solid #3a3c42;
  padding: 10px 16px; font-size: 13px; color: #dbdee1;
}
.dm-request-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* Selo de verificado (conta oficial) — trocado do emoji ✔️ genérico pro
   mesmo ícone de "escudo com check" usado no resto do app, só que aqui em
   azul preenchido: visual mais parecido com o selo azul do Instagram/TikTok,
   fácil de reconhecer de longe como "conta oficial". */
.verified-badge {
  display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 2px;
}
.verified-badge .ng-icon { width: 15px; height: 15px; }
/* 1º path do ícone "badge-check" é o contorno do selo (fica azul sólido);
   o 2º é só a linha do check (fica branca por cima) — dá o efeito clássico
   de "disco azul com check branco" sem precisar de um SVG customizado. */
.verified-badge .ng-icon path:first-child { fill: #3897f0; stroke: none; }
.verified-badge .ng-icon path:last-child { fill: none; stroke: white; stroke-width: 3px; }
/* Selo DOURADO — mesma forma, cor diferente, pra conta de PARCEIRO oficial
   (ex: dono do jogo parceiro Magic Tank) se distinguir da conta oficial da
   própria NEXT GAME (azul). Ver verified_gold no admin de Usuários. */
.verified-badge-gold .ng-icon path:first-child { fill: #d4a017; }
.verified-badge-gold .ng-icon path:last-child { stroke: #1a1400; }
.dm-pending-tag {
  display: inline-block; margin-left: 6px; background: rgba(var(--accent-rgb),0.2); color: #b8ffe0;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 8px;
  vertical-align: middle;
}
.dm-request-accept, .dm-request-decline {
  padding: 6px 14px; border-radius: 6px; border: none; font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.dm-request-accept { background: #3ba55c; color: white; }
.dm-request-accept:hover { filter: brightness(1.1); }
.dm-request-decline { background: #404249; color: #dbdee1; }
.dm-request-decline:hover { background: #4a4d55; }

.message-form { display: flex; align-items: center; padding: 12px 16px; gap: 8px; border-top: 1px solid #2c2e36; }
.message-form input {
  flex: 1; padding: 11px 16px; border-radius: 22px; border: 1px solid transparent; background: #26272e; color: #e6e6e6;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.message-form input:focus { outline: none; border-color: var(--accent); background: #2b2d33; }
.message-form button {
  padding: 10px 18px; border-radius: 22px; border: none; background: var(--gradient-brand); color: white;
  font-weight: 700; cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease;
  display: flex; align-items: center; justify-content: center;
}
.message-form button:hover { filter: brightness(1.1); }
.message-form button:active { transform: scale(0.97); }
.message-form #btn-attach-file {
  background: #26272e; border-radius: 50%; width: 40px; height: 40px; padding: 0; flex-shrink: 0;
}
.message-form #btn-attach-file:hover { background: #2f3037; filter: none; }

/* CORRIGIDO ("chat e música bugados, sem espaço na lateral"): o botão de
   anexar da coluna de voz tem outro id (#btn-attach-file-voice) que não
   pegava o estilo circular compacto acima — caía no botão "pílula" padrão
   (padding 18px + texto), enorme pra uma coluna de só 300px de largura,
   sobrando quase nada pro campo de escrever e fazendo tudo colar na borda.
   Coluna de voz inteira (chat + NEXT Music) repaginada: botões de ícone
   sempre circulares e compactos, com respiro decente nas laterais. */
.voice-chat-col .message-form { padding: 12px 14px; gap: 8px; }
.voice-chat-col .message-form input { padding: 10px 14px; font-size: 13px; }
.voice-chat-col .message-form button {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; flex-shrink: 0;
}
.voice-chat-col .message-form #btn-attach-file-voice { background: #26272e; }
.voice-chat-col .message-form #btn-attach-file-voice:hover { background: #2f3037; filter: none; }

.ai-quick-suggestions {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px;
}
.ai-quick-suggestions.hidden { display: none; }
.ai-quick-suggestion {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 18px; border: 1px solid #35373c;
  background: #26272e; color: #dbdee1; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ai-quick-suggestion:hover { background: #2f3037; border-color: var(--accent); transform: translateY(-1px); }
.ai-quick-suggestion .ng-icon-wrap { width: 15px; height: 15px; display: flex; }

.voice-panel {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.voice-incall-wrap {
  flex: 1; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto;
  gap: 0; min-height: 0; transition: grid-template-columns 150ms ease;
}
.voice-incall-wrap.chat-open { grid-template-columns: 1fr 300px; }
.voice-main-col { grid-column: 1; grid-row: 1; overflow-y: auto; padding: 18px 20px; }

/* Tela de "Entrar na chamada" (igual Discord) — aparece antes de conectar. */
.voice-preview {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px; text-align: center;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(0,0,0,0.18), transparent 55%),
    linear-gradient(160deg, var(--accent) 0%, var(--accent) 45%, var(--accent-2) 100%);
}
.voice-preview-icon {
  width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 40px; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  color: white;
}
.voice-preview-name { font-size: 30px; font-weight: 800; color: white; margin: 0; letter-spacing: -0.01em; }
.voice-preview-participants {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 24px; max-width: 460px;
}
.voice-preview-participants .empty-hint { margin: 0; color: rgba(255,255,255,0.75); }
.voice-preview-participant {
  display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.22); color: white;
  padding: 6px 12px 6px 6px; border-radius: 20px; font-size: 13px; font-weight: 600;
}
.voice-preview-join-btn {
  margin-top: 6px; padding: 13px 26px; border: none; border-radius: 24px; cursor: pointer;
  background: white; color: #23272e; font-weight: 800; font-size: 15px;
  transition: filter 0.15s ease, transform 0.1s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.voice-preview-join-btn:hover { filter: brightness(0.96); transform: translateY(-1px); }
.voice-preview-join-btn:active { transform: scale(0.97); }
.voice-controls-bar {
  grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; padding: 14px;
  border-top: 1px solid #26272e; background: #16171b;
}
.voice-room-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
/* Cartão de destaque no topo da sala de voz conectada — mesma linguagem
   visual do hero da Início, só que menor e com o nome da sala. */
.voice-room-hero {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 14px; margin-bottom: 16px;
  position: relative; overflow: hidden;
  background:
    linear-gradient(100deg, rgba(8,8,14,0.9) 0%, rgba(8,8,14,0.55) 55%, rgba(8,8,14,0.2) 100%),
    radial-gradient(circle at 85% 30%, rgba(var(--accent-rgb),0.35), transparent 55%),
    linear-gradient(135deg, var(--bg-sidebar), #101116);
  border: 1px solid rgba(255,255,255,0.07);
}
.voice-room-hero-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(var(--accent-rgb),0.18);
  border: 1px solid rgba(var(--accent-rgb),0.4); color: var(--accent-3); display: flex; align-items: center; justify-content: center;
}
.voice-room-hero-icon .ng-icon { width: 26px; height: 26px; }
.voice-room-hero-text { min-width: 0; }
.voice-room-hero-text h2 { font-size: 20px; font-weight: 900; margin: 0 0 4px; color: #f5f6f8; }
.voice-room-hero-text p { margin: 0 0 10px; font-size: 12.5px; color: #b9bec7; max-width: 480px; }
.voice-room-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.voice-room-hero-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #dbdee1;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 20px;
}
.voice-room-hero-tag .ng-icon { width: 12px; height: 12px; color: var(--accent-3); }
.voice-participant-badge {
  background: var(--bg-sidebar); color: #9aa0ab; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 14px;
}
.voice-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #6d7178; margin: 16px 0 10px;
}
.voice-controls { display: flex; gap: 10px; align-items: center; background: var(--bg-sidebar); padding: 10px 16px; border-radius: 30px; }
.control-icon-btn {
  width: 46px; height: 46px; border-radius: 50%; border: none; background: #26272e; color: #e6e6e6; cursor: pointer;
  font-size: 17px; transition: background 0.15s ease, transform 0.1s ease; display: flex; align-items: center; justify-content: center;
}
.control-icon-btn:hover { background: #33353d; transform: translateY(-1px); }
.control-icon-btn.active-state { background: var(--gradient-brand); }
.control-icon-btn.control-icon-danger { background: #f23f42; }
.control-icon-btn.control-icon-danger:hover { background: #d3373a; }
.control-icon-btn.control-icon-lg { width: 56px; height: 56px; font-size: 20px; }
.control-arrow-btn {
  padding: 10px 8px; border: none; border-left: 1px solid rgba(0,0,0,0.3);
  background: #26272e; color: #949ba4; cursor: pointer; font-size: 11px;
}
.control-arrow-btn:hover { background: #33353d; color: white; }
.video-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
  grid-auto-rows: 180px;
}
/* Quem está compartilhando tela/câmera ganha destaque automático maior na
   grade, igual Discord foca em quem está transmitindo. */
.video-grid:has(.video-tile.has-video) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.video-tile.has-video {
  grid-column: span 2; grid-row: span 2;
}
@media (max-width: 700px) {
  .video-tile.has-video { grid-column: span 1; }
}
/* Tamanho manual escolhido pela pessoa (botão ⬜ na tile) — sobrepõe o
   destaque automático de quem está transmitindo. */
.video-tile.tile-size-lg { grid-column: span 3 !important; grid-row: span 2 !important; }
.video-tile.tile-size-sm { grid-column: span 1 !important; grid-row: span 1 !important; }
@media (max-width: 700px) {
  .video-tile.tile-size-lg { grid-column: span 2 !important; }
}
.video-tile {
  background: var(--bg-sidebar); border: 1px solid #26272e; border-radius: 12px; overflow: hidden; position: relative;
  height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  box-shadow: 0 0 0 2px transparent; transition: box-shadow 120ms ease;
}
.video-tile:has(video[src]), .video-tile.has-video { padding: 0; flex-direction: row; }
.video-tile video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-tile.audio-only video { display: none; }
.video-tile .label {
  position: absolute; bottom: 4px; left: 6px; font-size: 12px; background: rgba(0,0,0,0.6);
  padding: 2px 6px; border-radius: 4px; z-index: 2;
}
.video-tile.audio-only .label {
  position: static; background: none; padding: 0; font-size: 12px; font-weight: 700; color: #dbdee1;
}
.video-tile.has-video .tile-waveform { display: none; }

/* Botões de ampliar / tela cheia — só aparecem pra quem tem vídeo de verdade
   rolando (tela compartilhada), no hover da tile. */
.tile-controls {
  position: absolute; top: 6px; right: 6px; z-index: 3; display: none; gap: 4px;
  opacity: 0; transition: opacity 120ms ease;
}
.video-tile.has-video .tile-controls { display: flex; }
.video-tile.has-video:hover .tile-controls { opacity: 1; }
.tile-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: rgba(0,0,0,0.55); color: #e6e6e6; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.tile-btn:hover { background: rgba(0,0,0,0.8); }
.tile-volume {
  width: 60px; align-self: center; accent-color: var(--accent); cursor: pointer;
}

/* Indicador de qualidade de conexão (bolinha verde/amarela/vermelha) */
.quality-dot {
  position: absolute; top: 6px; left: 6px; width: 9px; height: 9px; border-radius: 50%;
  z-index: 3; box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}
.quality-dot.quality-good { background: #23a55a; }
.quality-dot.quality-medium { background: #f2c34f; }
.quality-dot.quality-poor { background: #f23f42; }

/* "Ampliar": a tile ocupa o espaço da grade inteira, as outras somem —
   feito só com CSS, então sempre funciona (sem depender de permissão do navegador). */
.video-grid.grid-has-expanded { display: block; }
.video-tile.tile-reconnecting { box-shadow: 0 0 0 2px #f0b232; animation: tileReconnectPulse 1.4s ease-in-out infinite; }
.video-tile.tile-reconnecting::after {
  content: 'Reconectando...'; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(240,178,50,0.92); color: #16171b; font-size: 10px; font-weight: 800; padding: 3px 8px;
  border-radius: 20px; z-index: 3; white-space: nowrap;
}
@keyframes tileReconnectPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(240,178,50,0.4); }
  50% { box-shadow: 0 0 0 2px rgba(240,178,50,1); }
}
.video-grid.grid-has-expanded .video-tile { display: none; }
.video-grid.grid-has-expanded .video-tile.tile-expanded {
  display: flex; width: 100%; height: calc(100vh - 220px); min-height: 360px;
}
.video-tile.tile-expanded .tile-controls { opacity: 1; }
.video-tile.tile-expanded .tile-expand-btn::before { content: ''; }
.video-tile.tile-expanded .tile-expand-btn { background: rgba(255,255,255,0.15); }

/* Tela cheia de verdade, controlada pelo próprio navegador no <video> */
video:fullscreen { background: #000; object-fit: contain; }

/* Entrada animada, igual Discord quando um quadradinho aparece na call */
@keyframes tilePopIn {
  from { transform: scale(0.82); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.video-tile.tile-enter { animation: tilePopIn 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Avatar (mostrado quando não tem vídeo rolando, só áudio) — card circular
   igual "na chamada" de apps de voz, com anel colorido de quem tá falando. */
.tile-avatar {
  width: 76px; height: 76px; border-radius: 50%; background: var(--gradient-brand); color: white;
  display: none; align-items: center; justify-content: center; font-size: 28px; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06); transition: box-shadow 150ms ease; overflow: hidden;
}
/* Foto de perfil de verdade (item 11 da especificação) — cobre o círculo
   inteiro; sem foto, cai pra inicial/emoji igual antes. */
.tile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.video-tile.audio-only .tile-avatar { display: flex; }
.tile-avatar-pulse { animation: avatarPulse 1.1s ease-in-out infinite; }
@keyframes avatarPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Ondinha de áudio embaixo do avatar, anima quando a pessoa fala */
.tile-waveform { display: flex; align-items: flex-end; gap: 2px; height: 12px; opacity: 0.35; transition: opacity 150ms ease; }
.tile-waveform span { width: 3px; background: var(--accent-3); border-radius: 2px; height: 4px; }
.video-tile.speaking .tile-waveform { opacity: 1; }
.video-tile.speaking .tile-waveform span { animation: waveBounce 0.9s ease-in-out infinite; }
.tile-waveform span:nth-child(2) { animation-delay: 0.15s; }
.tile-waveform span:nth-child(3) { animation-delay: 0.3s; }
.tile-waveform span:nth-child(4) { animation-delay: 0.45s; }
@keyframes waveBounce { 0%, 100% { height: 4px; } 50% { height: 12px; } }

.tile-role { font-size: 10px; color: #6d7178; }

/* Anel colorido pulsante quando a pessoa está falando, igual indicador do Discord */
.video-tile.speaking {
  box-shadow: 0 0 0 2px #23a55a;
}
.video-tile.speaking .tile-avatar {
  box-shadow: 0 0 0 3px #23a55a, 0 0 16px rgba(35, 165, 90, 0.5);
}

.flagged-banner {
  background: #3a2a2a; color: #f2a33f; font-size: 12px; padding: 4px 8px; border-radius: 4px; margin-bottom: 8px;
}

/* CHAT LATERAL DA SALA DE VOZ */
.voice-chat-col {
  grid-column: 2; grid-row: 1; border-left: 1px solid #26272e; background: #16171b;
  display: flex; flex-direction: column; min-height: 0; position: relative;
}
.voice-chat-col.hidden { display: none; }
.voice-incall-wrap:not(.chat-open) #voice-chat-col { display: none; }
.voice-incall-wrap.music-open { grid-template-columns: 1fr 300px; }
.voice-incall-wrap:not(.music-open) #voice-music-col { display: none; }
.voice-chat-header { padding: 14px 16px; font-weight: 800; font-size: 13px; border-bottom: 1px solid #26272e; display: flex; align-items: center; gap: 6px; }
.voice-chat-col .messages { flex: 1; padding: 12px; }
.voice-chat-col .message-form { border-top: 1px solid #26272e; padding: 10px; }

/* NEXT Music */
.music-now-playing { padding: 14px; border-bottom: 1px solid #26272e; }
#music-player-mount { width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; margin-bottom: 10px; }
#music-player-mount iframe { width: 100%; height: 100%; }
.music-now-playing-info { font-size: 12px; color: #dbdee1; margin-bottom: 10px; line-height: 1.4; }
/* CORRIGIDO: os botões de tocar/pular usavam o mesmo tamanho dos botões
   grandes da barra de chamada (46px, pensados pra ficarem sozinhos numa
   barra larga) — aqui, no painel estreito do NEXT Music, ficavam grandes
   demais junto do resto e pareciam "grudados"/sobrepostos. Reduzidos pro
   tamanho certo desse espaço, com respiro embaixo do player. */
.music-controls { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.music-controls .control-icon-btn { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; }
.music-queue-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.music-queue-item {
  display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: var(--bg-sidebar);
  font-size: 12px;
}
.music-queue-item.current { background: rgba(var(--accent-rgb),0.15); border: 1px solid var(--accent); }
.music-queue-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.music-queue-item-title { color: #dbdee1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-queue-item-by { color: #6d7178; font-size: 10px; }
.music-queue-item-remove { background: none; border: none; color: #6d7178; cursor: pointer; padding: 4px; }
.music-queue-item-remove:hover { color: #f23f42; }

/* CONVIDAR / ATIVIDADE / QUALIDADE */
.voice-invite-row { margin-top: 20px; }
.voice-invite-input-row { display: flex; gap: 8px; }
.voice-invite-input-row input {
  flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid #26272e; background: var(--bg-sidebar);
  color: #9aa0ab; font-size: 12px;
}
.voice-invite-input-row button {
  padding: 9px 16px; border-radius: 8px; border: none; background: var(--gradient-brand); color: white;
  font-weight: 700; font-size: 12px; cursor: pointer;
}
.voice-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.voice-info-card { background: var(--bg-sidebar); border: 1px solid #26272e; border-radius: 10px; padding: 14px; }
.voice-activity-log { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #9aa0ab; max-height: 130px; overflow-y: auto; }
.voice-activity-log .activity-line { display: flex; justify-content: space-between; gap: 8px; }
.voice-activity-log .activity-line-time { color: #6d7178; flex-shrink: 0; }
.voice-quality-summary { font-size: 13px; }
.voice-quality-badge { font-weight: 800; font-size: 13px; padding: 2px 0; }
.voice-quality-badge.q-good { color: #23a55a; }
.voice-quality-badge.q-medium { color: #f2c34f; }
.voice-quality-badge.q-poor { color: #f23f42; }
.voice-quality-ping { font-size: 11px; color: #6d7178; margin-top: 2px; }

/* MODAL */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); display: flex;
  align-items: center; justify-content: center; z-index: 100;
}
.modal-card {
  background: var(--bg-modal); padding: 24px; border-radius: 12px; width: 340px;
  max-height: 84vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  animation: modalPopIn 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-card-wide { width: 460px; }
.modal-card h2 {
  margin-top: 0; color: #e6e6e6; display: flex; align-items: center; gap: 10px;
  font-size: 18px;
}
.modal-card h2 .ng-icon-wrap {
  color: white; background: var(--gradient-brand); padding: 7px; border-radius: 9px; width: 30px; height: 30px;
  box-sizing: border-box;
}
.modal-card h2 .ng-icon-wrap .ng-icon { width: 100%; height: 100%; }

/* TORNEIOS */
.tournaments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tournament-card {
  background: #1e1f22; border: 1px solid #35373c; border-radius: 8px; padding: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.tournament-info h3 { margin: 0 0 4px; font-size: 14px; color: #e6e6e6; }
.tournament-meta { font-size: 12px; color: #949ba4; display: flex; gap: 10px; flex-wrap: wrap; }
.tournament-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tournament-actions button {
  padding: 6px 12px; border-radius: 6px; border: none; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.btn-register { background: var(--gradient-brand); color: white; font-weight: 700; }
.btn-unregister { background: #404249; color: #e6e6e6; }
.btn-delete-tournament { background: transparent; color: #f23f42; font-size: 11px; }
.tournament-create-form { border-top: 1px solid #35373c; margin-top: 8px; padding-top: 10px; }
.empty-hint { color: #6d7178; font-size: 13px; text-align: center; padding: 12px 0; }

/* RANKING */
.ranking-list { display: flex; flex-direction: column; gap: 6px; }
.ranking-row {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; background: #1e1f22;
}
.ranking-position {
  width: 22px; text-align: center; font-weight: 800; color: #949ba4; font-size: 13px; flex-shrink: 0;
}
.ranking-row:nth-child(1) .ranking-position { color: #ffd76b; }
.ranking-row:nth-child(2) .ranking-position { color: #d3d8e0; }
.ranking-row:nth-child(3) .ranking-position { color: #d68a4c; }
.ranking-name { flex: 1; font-size: 13px; color: #dbdee1; font-weight: 600; }
.ranking-points { font-size: 12px; color: var(--accent-3); font-weight: 700; }
.modal-card form { display: flex; flex-direction: column; gap: 6px; }
.modal-card label { font-size: 12px; color: #949ba4; margin-top: 8px; }
.modal-card input, .modal-card select, .modal-card textarea {
  padding: 8px; border-radius: 6px; border: none; background: #1e1f22; color: #e6e6e6;
  font-family: inherit; resize: vertical;
}
.modal-card .hint { font-size: 11px; color: #6d7178; margin: 2px 0 0; }
.server-info-text { font-size: 13px; color: #dbdee1; white-space: pre-wrap; margin: 0; }

/* LOJA DE RECOMPENSAS */
.rewards-streak-summary { margin-bottom: 14px; }
.streak-summary-row {
  background: #1e1f22; border: 1px solid #35373c; border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.streak-flame-box { display: flex; align-items: center; gap: 10px; }
.streak-flame { font-size: 26px; }
.streak-count { font-weight: 800; font-size: 15px; color: #e6e6e6; }
.streak-best { font-size: 12px; color: #949ba4; }
.streak-next-goal { display: flex; flex-direction: column; gap: 4px; }
.streak-next-label { font-size: 12px; color: #dbdee1; }
.streak-progress-bar { height: 6px; border-radius: 4px; background: #101116; overflow: hidden; }
.streak-progress-fill { height: 100%; background: var(--gradient-brand); border-radius: 4px; transition: width 0.3s ease; }

.rewards-catalog { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
/* Loja de recompensas pausada temporariamente (ver REWARDS_SHOP_DISABLED em
   app.js) — aviso simples no lugar do catálogo, sem quebrar o modal. */
.rewards-unavailable {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 32px 16px; color: #9aa0ab;
}
.rewards-unavailable .ng-icon-wrap { width: 32px; height: 32px; color: #6d7178; margin-bottom: 4px; }
.rewards-unavailable strong { color: #dbdee1; font-size: 14px; }
.rewards-unavailable span { font-size: 12.5px; }
.reward-card {
  position: relative; display: flex; gap: 12px; align-items: flex-start; background: #1e1f22;
  border: 1px solid #35373c; border-radius: 10px; padding: 12px; overflow: hidden;
}
.reward-card-locked { opacity: 0.55; }
.reward-card-rare {
  border-color: #ffd76b; background: linear-gradient(135deg, rgba(255,215,107,0.08), rgba(30,31,34,1));
}
.reward-rare-logo {
  position: absolute; top: -14px; right: -14px; width: 70px; height: auto; opacity: 0.18; pointer-events: none;
}
.reward-icon-wrap { flex-shrink: 0; }
.member-avatar-lg {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; background: var(--gradient-brand); color: white; overflow: hidden;
}
.member-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.reward-info { flex: 1; min-width: 0; }
.reward-info h3 { margin: 0 0 3px; font-size: 14px; color: #e6e6e6; }
.reward-info p { margin: 0 0 8px; font-size: 12px; color: #949ba4; }
.reward-actions { margin-bottom: 6px; }
.reward-equip-btn {
  padding: 6px 12px; border-radius: 6px; border: none; background: var(--gradient-brand); color: white;
  font-weight: 700; font-size: 12px; cursor: pointer;
}
.reward-equip-btn:disabled { background: #2b6b46; cursor: default; opacity: 0.9; }
.reward-locked-hint { font-size: 12px; color: #6d7178; }
.reward-verify { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reward-code {
  font-family: monospace; font-size: 11px; background: #101116; color: var(--accent-3); padding: 3px 6px; border-radius: 4px;
}
.reward-copy-btn, .reward-verify-btn {
  background: #26272e; border: none; color: #dbdee1; font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
.reward-copy-btn:hover, .reward-verify-btn:hover { background: #33353d; }

/* SELOS COM IMAGEM REAL (90/120 dias) */
.reward-card-seal { flex-direction: column; align-items: center; text-align: center; }
.reward-card-seal .reward-info { width: 100%; }
.reward-seal-wrap { position: relative; width: 100%; margin: 0 auto 8px; }
.reward-seal-square { max-width: 170px; aspect-ratio: 713 / 802; }
.reward-seal-wide { max-width: 230px; aspect-ratio: 1046 / 651; }
.reward-seal-founder { max-width: 280px; aspect-ratio: 1940 / 656; background: #0a0a0a; border-radius: 8px; }
.reward-seal-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}
.reward-card-locked .reward-seal-img { filter: grayscale(1) opacity(0.35); }
.reward-seal-name {
  position: absolute; left: 50.5%; top: 68.5%; transform: translate(-50%, -50%);
  font-weight: 800; font-size: 13px; letter-spacing: 0.03em; color: #ffe9a8;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85); white-space: nowrap; max-width: 68%;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.reward-seal-caption { font-size: 12px; color: #dbdee1; margin-bottom: 6px; }
.reward-slots-brag { font-size: 12px; color: #ffd76b; font-weight: 700; margin: 0 0 8px; text-align: center; }

/* SELO ULTRA RARO — FUNDADOR ETERNO (feito 100% em CSS, sem imagem externa) */
.founder-badge {
  position: relative; width: 150px; height: 150px; margin: 4px auto 10px; display: flex;
  align-items: center; justify-content: center;
}
.founder-badge-crown {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  animation: founderCrownBob 2.4s ease-in-out infinite;
}
@keyframes founderCrownBob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(3deg); }
}
.founder-badge-ring {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #ffd76b 35%, #b8860b 75%, #7a5c0a 100%);
  box-shadow: 0 0 0 3px #3a2c05, 0 0 22px rgba(255,215,107,0.7), inset 0 0 18px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  animation: founderRingGlow 2.6s ease-in-out infinite;
}
@keyframes founderRingGlow {
  0%, 100% { box-shadow: 0 0 0 3px #3a2c05, 0 0 18px rgba(255,215,107,0.6), inset 0 0 18px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 0 3px #3a2c05, 0 0 34px rgba(255,255,255,0.9), inset 0 0 18px rgba(0,0,0,0.35); }
}
.founder-badge-inner {
  width: 78%; height: 78%; border-radius: 50%; background: var(--bg-app);
  border: 2px solid rgba(255,215,107,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.founder-badge-diamond { font-size: 12px; }
.founder-badge-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #ffd76b; text-align: center; line-height: 1.25;
}
.founder-badge-name {
  font-size: 10px; font-weight: 700; color: #fff; margin-top: 1px; max-width: 90%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* MISSÕES E QUIZ */
.missions-points-summary { margin-bottom: 14px; }
.missions-points-box {
  background: #1e1f22; border: 1px solid #35373c; border-radius: 10px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.missions-points-icon { font-size: 26px; }
.missions-points-total { font-weight: 800; font-size: 15px; color: #e6e6e6; }
.missions-points-hint { font-size: 12px; color: #949ba4; }

.missions-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.mission-card {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #1e1f22;
  border: 1px solid #35373c; border-radius: 10px; padding: 12px;
}
.mission-card-locked { opacity: 0.5; }
.mission-card-done { border-color: #23a55a; }
.mission-info h3 { margin: 0 0 3px; font-size: 14px; color: #e6e6e6; }
.mission-info p { margin: 0 0 6px; font-size: 12px; color: #949ba4; }
.mission-points-tag {
  font-size: 11px; font-weight: 700; color: var(--accent-3); background: rgba(var(--accent-2-rgb),0.12);
  padding: 2px 8px; border-radius: 10px;
}
.mission-action { flex-shrink: 0; }
.mission-start-btn {
  padding: 7px 14px; border-radius: 6px; border: none; background: var(--gradient-brand); color: white;
  font-weight: 700; font-size: 12px; cursor: pointer;
}
.mission-done-tag { font-size: 12px; color: #23a55a; font-weight: 700; }
.mission-locked-tag { font-size: 11px; color: #6d7178; }

.quiz-question { margin-bottom: 16px; }
.quiz-question-text { font-size: 13px; color: #e6e6e6; font-weight: 700; margin: 0 0 8px; }
.quiz-options { display: flex; flex-direction: column; gap: 6px; }
.quiz-option {
  display: flex; align-items: center; gap: 8px; background: #1e1f22; border: 1px solid #35373c;
  border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; color: #dbdee1;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-option:hover { border-color: var(--accent); }
.quiz-option input { accent-color: var(--accent); }
#quiz-result { margin-top: 10px; }

/* VERIFICAÇÃO PÚBLICA DE SELO */
.verify-result { margin-top: 12px; }
.verify-valid {
  text-align: center; background: #1e1f22; border: 1px solid #ffd76b; border-radius: 10px; padding: 14px;
  color: #e6e6e6; font-size: 13px; line-height: 1.6;
}
.verify-logo { height: 28px; width: auto; display: block; margin: 0 auto 8px; }
.verify-invalid {
  text-align: center; background: #1e1f22; border: 1px solid #f23f42; border-radius: 10px; padding: 14px;
  color: #f23f42; font-size: 13px;
}

/* SONS E EFEITOS: confete, toast de recompensa */
.confetti-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999;
}
.reward-toast {
  position: fixed; top: -80px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; background: #1e1f22; border: 1px solid #ffd76b;
  border-radius: 12px; padding: 12px 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 10000; transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.reward-toast.reward-toast-show { top: 20px; }

/* Toastzinho simples de confirmação (link copiado etc). */
.copy-toast {
  position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%);
  background: #1e1f22; border: 1px solid #3a3c42; border-radius: 10px; padding: 10px 18px;
  color: #dbdee1; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 10000; transition: bottom 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.copy-toast.copy-toast-show { bottom: 24px; }

/* Aviso de nova versão do site — canto inferior direito, fica até a pessoa
   atualizar ou fechar (diferente do copy-toast, que some sozinho).
   Layout em COLUNA (não mais ícone+texto+botões espremidos lado a lado —
   isso deixava a área de texto estreita demais e forçava rolagem pro lado
   dentro da lista). Mais largo também, pra sobrar espaço de verdade. */
.update-banner {
  /* position:fixed é relativo à janela (não à página) — some ao rolar a
     página inteira, fica sempre visível/"grudada" no canto enquanto a
     pessoa lê o resto do site por baixo. */
  position: fixed; right: 20px; bottom: -400px; z-index: 10001;
  width: 400px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 48px);
  background: #1e1f22; border: 1px solid #3a3c42; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  overflow-x: hidden; overflow-y: auto; box-sizing: border-box;
  transition: bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.update-banner.update-banner-show { bottom: 24px; }
.update-banner-header { display: flex; gap: 12px; align-items: flex-start; padding-right: 22px; }
.update-banner-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient-brand); display: flex; align-items: center; justify-content: center;
}
.update-banner-icon .ng-icon { width: 18px; height: 18px; color: white; }
.update-banner-body { flex: 1; min-width: 0; font-size: 13px; color: #dbdee1; }
.update-banner-body strong { display: block; margin-bottom: 2px; color: #f2f3f5; font-size: 13.5px; }
.update-banner-hint { display: block; color: #6d7178; font-size: 11.5px; }
/* Se a atualização mudou muita coisa, a lista ganha rolagem própria (só
   vertical) em vez de esticar o aviso pra fora da tela. width:100% +
   box-sizing garante que ela nunca passa da largura do card, então não tem
   rolagem pro lado — só pra cima/baixo quando precisa. */
.update-banner-changes {
  margin: 0; padding-left: 18px; padding-right: 4px; display: flex; flex-direction: column; gap: 5px;
  max-height: 180px; overflow-y: auto; overflow-x: hidden;
  width: 100%; box-sizing: border-box;
}
.update-banner-changes li { color: #9aa0ab; font-size: 12.5px; line-height: 1.45; overflow-wrap: break-word; }
.update-banner-reload {
  width: 100%; background: var(--gradient-brand); color: white; border: none; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.update-banner-reload:hover { filter: brightness(1.1); }
.update-banner-dismiss {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: #6d7178; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center;
}
.update-banner-dismiss:hover { color: #dbdee1; }
.update-banner-dismiss .ng-icon { width: 16px; height: 16px; }
@media (max-width: 520px) {
  .update-banner { left: 16px; right: 16px; width: auto; }
}
.reward-toast-rare { border-color: #ffd76b; background: linear-gradient(135deg, rgba(255,215,107,0.15), #1e1f22); }
.reward-toast-icon { font-size: 24px; }
.reward-toast-text { display: flex; flex-direction: column; font-size: 12px; color: #dbdee1; }
.reward-toast-text strong { font-size: 13px; color: #ffd76b; }
.checkbox-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #dbdee1;
  margin-top: 10px; cursor: pointer;
}
.checkbox-row input { width: 15px; height: 15px; cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.modal-actions button {
  padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer;
}
.modal-actions button[type="submit"] { background: var(--gradient-brand); color: white; font-weight: 700; }
.modal-actions button[type="button"] { background: #404249; color: #e6e6e6; }
.modal-actions button.primary { background: var(--gradient-brand); color: white; font-weight: 700; }

.share-picker-audio-note {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: #dbdee1;
  background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.3); border-radius: 8px;
  padding: 10px; margin-top: 12px; line-height: 1.5;
}
.share-picker-audio-note .ng-icon-wrap { flex-shrink: 0; margin-top: 1px; }
.share-picker-status {
  font-size: 12px; color: #23a55a; background: rgba(35,165,90,0.12); border: 1px solid rgba(35,165,90,0.3);
  border-radius: 8px; padding: 8px 10px; margin-top: 10px;
}
.modal-actions button.danger-action { background: #f23f42; color: white; }
.modal-actions button.danger-action:hover { background: #d3373a; }

/* Banner de recomendação de 2FA — não bloqueia nada, só sugere. */
.twofa-recommend-banner {
  display: flex; align-items: flex-start; gap: 12px; background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.twofa-recommend-banner > .ng-icon-wrap { width: 20px; height: 20px; color: var(--accent-3); flex-shrink: 0; margin-top: 1px; }
.twofa-recommend-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.twofa-recommend-text strong { font-size: 13.5px; color: #f2f3f5; }
.twofa-recommend-text span { font-size: 12.5px; color: #9aa0ab; line-height: 1.4; }
.twofa-recommend-banner button {
  background: transparent; border: none; color: #7d828c; width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.twofa-recommend-banner button:hover { background: rgba(255,255,255,0.08); color: #f2f3f5; }

/* Configurações: sessões, bloqueados, notificações */
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #2c2e36;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-info { display: flex; flex-direction: column; gap: 2px; }
.settings-row-title { font-size: 13px; color: #e6e6e6; font-weight: 600; }
.settings-row-meta { font-size: 11px; color: #6d7178; }
.settings-row-badge {
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px;
  background: rgba(35,165,90,0.15); color: #23a55a;
}
.toggle-switch { position: relative; width: 38px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch-track {
  position: absolute; inset: 0; background: #404249; border-radius: 20px; cursor: pointer;
  transition: background 0.15s ease;
}
.toggle-switch-track::before {
  content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
  background: white; border-radius: 50%; transition: transform 0.15s ease;
}
.toggle-switch input:checked + .toggle-switch-track { background: var(--gradient-brand); }
.toggle-switch input:checked + .toggle-switch-track::before { transform: translateX(18px); }

/* CONFIGURAÇÕES DE VOZ */
.mic-status { font-size: 12px; color: #949ba4; padding: 0 0 8px; }
.camera-moderation-badge {
  font-size: 11px; line-height: 1.4; color: #d9c04a; background: rgba(217,192,74,0.1);
  border: 1px solid rgba(217,192,74,0.3); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px;
}
.mic-test-row { display: flex; gap: 8px; margin-top: 12px; }
.mic-test-row button {
  flex: 1; padding: 8px; border-radius: 6px; border: none; background: #404249;
  color: #e6e6e6; cursor: pointer; font-size: 13px;
}
.mic-test-row button:hover { background: #4a4d55; }
.mic-test-row button.active { background: #23a55a; color: white; }
.mic-meter {
  margin-top: 10px; height: 14px; background: #1e1f22; border-radius: 7px; overflow: hidden;
}
.mic-meter-bar {
  height: 100%; width: 0%; background: linear-gradient(90deg, #23a55a, #f2c34f, #f23f42);
  transition: width 60ms linear;
}
#btn-toggle-mic.muted { background: #f23f42; color: white; }

/* PARTICIPANTES CONECTADOS (embaixo do nome da sala de voz, no menu) */
.channel-item-row { display: flex; flex-direction: column; }
.voice-participants { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px 22px; }
.participant-chip {
  display: flex; align-items: center; gap: 4px; background: #35373c; border-radius: 12px;
  padding: 2px 8px 2px 2px; font-size: 11px; color: #cfd2d8;
}
.participant-avatar {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}
.channel-item.connected { color: #23a55a; }
.channel-item.connected::after { content: ' 🔊'; }

/* BARRA FIXA "CONECTADO POR VOZ" (estilo Discord) */
.voice-connected-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #232428; border-radius: 8px; padding: 8px 10px; margin: 6px 4px;
  cursor: pointer;
}
.voice-connected-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.voice-connected-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #23a55a; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.2);
}
.voice-connected-text { min-width: 0; }
.voice-connected-label { font-size: 10px; color: #23a55a; text-transform: uppercase; letter-spacing: 0.03em; }
.voice-connected-room {
  font-size: 13px; color: #e6e6e6; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}
.voice-connected-controls { display: flex; gap: 4px; flex-shrink: 0; }
.voice-connected-controls button {
  width: 26px; height: 26px; border-radius: 6px; border: none; background: #35373c;
  color: #e6e6e6; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.voice-connected-controls button:hover { background: #404249; }
.voice-connected-controls button.active-state { background: #f23f42; color: white; }
#bar-btn-disconnect:hover { background: #f23f42; color: white; }

/* "Voltar pra sala de voz" no rodapé da barra lateral esquerda — igual
   Discord: fica fixo lá embaixo (margin-top:auto empurra pro final da
   coluna) sempre que você está numa call, mesmo navegando por outras
   telas. Clicável, leva direto de volta pro canal. */
.sidebar-return-to-call {
  margin-top: auto; display: flex; align-items: center; gap: 6px;
  background: rgba(35,165,90,0.12); border: 1px solid rgba(35,165,90,0.3); border-radius: 10px;
  padding: 8px 10px; flex-shrink: 0;
}
.sidebar-return-to-call-info {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 0; text-align: left;
}
.sidebar-return-to-call-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #23a55a; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(35,165,90,0.2); animation: sidebarCallPulse 2s ease-in-out infinite;
}
@keyframes sidebarCallPulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.5; }
}
.sidebar-return-to-call-text { min-width: 0; display: flex; flex-direction: column; }
.sidebar-return-to-call-label { font-size: 9.5px; color: #23a55a; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; }
.sidebar-return-to-call-room {
  font-size: 12.5px; color: #e6e6e6; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-return-to-call-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sidebar-return-to-call-icon-btn {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: #7d828c;
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease; font-size: 11px;
}
.sidebar-return-to-call-icon-btn .ng-icon { width: 13px; height: 13px; }
.sidebar-return-to-call-icon-btn:hover { background: rgba(255,255,255,0.08); color: #e6e6e6; }
.sidebar-return-to-call-icon-btn.active-state { background: #f23f42; color: white; }
.sidebar-return-to-call-disconnect:hover { background: #f23f42; color: white; }

/* Volume geral da chamada — aumenta/diminui o que você ouve de todo mundo de
   uma vez (independente do volume individual de cada pessoa, que continua
   ajustável na própria tile de vídeo). Clicar no ícone muta/desmuta rápido. */
.voice-volume-wrap { display: flex; align-items: center; gap: 4px; padding: 0 2px; }
.voice-volume-wrap button {
  width: 26px; height: 26px; border-radius: 6px; border: none; background: #35373c;
  color: #e6e6e6; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.voice-volume-wrap button:hover { background: #404249; }
#bar-volume-slider { width: 64px; accent-color: var(--accent); cursor: pointer; }

/* PAINEL DE MEMBROS (online/offline), igual Discord */
.members-panel {
  width: 220px; background: var(--bg-sidebar); border-left: 1px solid #2c2e36;
  padding: 12px 8px; overflow-y: auto; flex-shrink: 0; height: 100%; min-height: 0;
}
.member-group-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: #949ba4; padding: 8px 8px 4px;
}
.member-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: default;
}
.member-row:hover { background: #26272e; }
.member-row.offline { opacity: 0.45; }
.member-avatar-wrap { position: relative; flex-shrink: 0; }
.member-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; background: var(--gradient-brand); color: white; overflow: hidden;
  flex-shrink: 0;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-status-dot {
  position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: #23a55a; border: 2px solid var(--bg-sidebar);
}
.member-row.offline .member-status-dot { background: #6d7178; }
/* Cores por status (item 1 da especificação: Online/Ausente/Ocupado/Offline
   — Invisível nunca chega até aqui, já vem filtrado como offline pros outros). */
.member-status-dot.member-status-online { background: #23a55a; }
.member-status-dot.member-status-ausente { background: #f0b232; }
.member-status-dot.member-status-ocupado { background: #f23f42; }
.member-status-dot.member-status-offline { background: #6d7178; }
.member-info { min-width: 0; }
.member-name { font-size: 13px; color: #dbdee1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-role-tag { font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; }
.member-game { font-size: 11px; color: var(--accent-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* BANNER DO SERVIDOR (capa larga, item 8 da especificação) */
.server-banner-preview-wrap {
  width: 100%; height: 140px; border-radius: 10px; overflow: hidden; position: relative;
  background: var(--gradient-brand); display: flex; align-items: center; justify-content: center;
}
.server-banner-preview { width: 100%; height: 100%; object-fit: cover; }
.server-banner-empty { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; }
.server-banner-topbar {
  width: 100%; height: 120px; border-radius: 0; background-size: cover; background-position: center;
  flex-shrink: 0;
}

/* EDITOR DE AVATAR (perfil) */
.avatar-editor { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.avatar-preview {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
  color: white; overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-editor-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.avatar-upload-btn {
  background: #26272e; color: #dbdee1; padding: 7px 10px; border-radius: 6px; font-size: 12px;
  cursor: pointer; text-align: center; transition: background 0.15s ease;
}
.avatar-upload-btn:hover { background: #33353d; }
.avatar-emoji-row { display: flex; flex-wrap: wrap; gap: 4px; }
.avatar-emoji-row button {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.avatar-emoji-row button:hover { outline: 2px solid var(--accent); }
.avatar-emoji-row button.avatar-emoji-selected { outline: 2px solid var(--accent-3); }

/* Botão "câmera" pra enviar foto de ícone de servidor — fica do lado do
   seletor de emoji, mesma altura, com anel destacado pra não passar batido. */
.server-icon-picker-row { display: flex; align-items: center; gap: 10px; }
.server-icon-upload-preview {
  width: 34px; height: 34px; border-radius: 10px; border: 1.5px dashed #4a4d57; background: var(--bg-sidebar);
  color: #9aa0ab; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; padding: 0; transition: border-color 0.15s ease, color 0.15s ease;
}
.server-icon-upload-preview:hover { border-color: var(--accent-2); color: var(--accent-2); }
.server-icon-upload-preview img { width: 100%; height: 100%; object-fit: cover; }

/* MOLDURAS DE AVATAR ANIMADAS (recompensas por streak de acesso) — usa
   box-shadow em vez de border, porque box-shadow não é cortado pelo
   overflow:hidden do próprio elemento (o "outline" do avatar circular). */
.avatar-frame-rainbow {
  animation: frameRainbow 3s linear infinite;
}
@keyframes frameRainbow {
  0%   { box-shadow: 0 0 0 3px #ff3b7a, 0 0 10px rgba(255,59,122,0.55); }
  20%  { box-shadow: 0 0 0 3px #ff9900, 0 0 10px rgba(255,153,0,0.55); }
  40%  { box-shadow: 0 0 0 3px #ffee00, 0 0 10px rgba(255,238,0,0.55); }
  60%  { box-shadow: 0 0 0 3px var(--accent-2), 0 0 10px rgba(var(--accent-2-rgb),0.55); }
  80%  { box-shadow: 0 0 0 3px #7c4dff, 0 0 10px rgba(124,77,255,0.55); }
  100% { box-shadow: 0 0 0 3px #ff3b7a, 0 0 10px rgba(255,59,122,0.55); }
}
.avatar-frame-sparkle {
  animation: frameSparkle 1.6s ease-in-out infinite;
}
@keyframes frameSparkle {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,0.55); }
  50%      { box-shadow: 0 0 0 2px var(--accent-2), 0 0 18px rgba(var(--accent-2-rgb),0.85); }
}
.avatar-frame-fire {
  animation: frameFire 1s ease-in-out infinite;
}
@keyframes frameFire {
  0%, 100% { box-shadow: 0 0 0 3px #ff6a00, 0 0 10px rgba(255,106,0,0.65); }
  50%      { box-shadow: 0 0 0 3px #ffd200, 0 0 18px rgba(255,80,0,0.9); }
}
.avatar-frame-legend {
  animation: frameLegend 2.2s ease-in-out infinite;
  position: relative;
}
@keyframes frameLegend {
  0%, 100% { box-shadow: 0 0 0 3px #ffd76b, 0 0 16px rgba(255,215,107,0.65); }
  50%      { box-shadow: 0 0 0 3px #ffffff, 0 0 26px rgba(255,215,107,0.95); }
}
/* Moldura do selo de 120 dias — tons de ciano/azul cristalizados. */
.avatar-frame-diamond {
  animation: frameDiamond 2.8s ease-in-out infinite;
}
@keyframes frameDiamond {
  0%, 100% { box-shadow: 0 0 0 3px #7ee8ff, 0 0 14px rgba(126,232,255,0.6); }
  50%      { box-shadow: 0 0 0 3px #ffffff, 0 0 24px rgba(126,232,255,0.9); }
}
/* Moldura do selo ultra raro (365 dias, só 2 vagas) — combina dourado com um
   giro de cores por baixo, pra ficar visualmente acima de todas as outras. */
.avatar-frame-eternal {
  animation: frameEternal 3.4s linear infinite;
  position: relative;
}
@keyframes frameEternal {
  0%   { box-shadow: 0 0 0 3px #ffd76b, 0 0 20px rgba(255,215,107,0.75); }
  33%  { box-shadow: 0 0 0 3px #fff6d8, 0 0 26px rgba(255,255,255,0.9); }
  66%  { box-shadow: 0 0 0 3px #ffb347, 0 0 22px rgba(255,179,71,0.8); }
  100% { box-shadow: 0 0 0 3px #ffd76b, 0 0 20px rgba(255,215,107,0.75); }
}

/* SERVIDOR: CONVITE, MEMBROS, CARGOS */
.server-icon-add + .server-icon-add { margin-top: 6px; }
.manage-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid #26272e; }
.manage-tab {
  background: none; border: none; color: #8b909a; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 12px; border-bottom: 2px solid transparent;
}
.manage-tab.active { color: #e6e6e6; border-bottom-color: var(--accent); }
.manage-tab-panel { min-height: 120px; }

/* Configurações agora ocupa quase a tela inteira em vez de um modalzinho
   apertado que obrigava rolar — sidebar fixa, só o conteúdo da aba rola. */
.settings-modal-card {
  width: min(980px, 94vw);
  max-width: none;
  height: min(820px, 90vh);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.settings-modal-card h2 { flex-shrink: 0; }
.settings-layout { display: flex; gap: 22px; align-items: stretch; flex: 1; min-height: 0; }
/* Barra de "Fechar"/"Salvar" fixa embaixo do modal inteiro — fora da área
   que rola, então continua visível não importa quão comprida seja a aba
   aberta ou até onde a pessoa rolou. */
.settings-fixed-actions {
  flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 16px; margin-top: 12px; border-top: 1px solid #26272e;
}
/* Repaginado ("deixa mais bonito e minimalista") — "Fechar" vira um botão
   fantasma discreto (sem fundo, só contorno leve) e "Salvar" é o único
   destaque de verdade, em pílula com o degradê da marca — só uma ação
   chamando atenção por vez, igual o resto do app já faz. */
.settings-fixed-actions button {
  border-radius: 20px; padding: 10px 22px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; border: none; transition: filter 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.settings-fixed-actions button:active { transform: scale(0.97); }
#btn-cancel-profile {
  background: transparent; color: #9aa0ab; border: 1px solid rgba(255,255,255,0.12) !important;
}
#btn-cancel-profile:hover { background: rgba(255,255,255,0.06); color: #dbdee1; }
#btn-save-profile { background: var(--gradient-brand); color: white; box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.35); }
#btn-save-profile:hover { filter: brightness(1.08); }
#btn-save-profile.hidden { display: none; }
.settings-sidebar {
  display: flex; flex-direction: column; gap: 2px; width: 190px; flex-shrink: 0;
  border-right: 1px solid #26272e; padding-right: 14px; overflow-y: auto;
}
.settings-sidebar-item {
  background: none; border: none; color: #9aa0ab; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 10px; border-radius: 6px; text-align: left; transition: all 0.15s ease;
}
.settings-sidebar-item:hover { background: rgba(255,255,255,0.04); color: #dbdee1; }
.settings-sidebar-item.active { background: var(--gradient-brand); color: white; }
.settings-content { flex: 1; min-width: 0; max-height: none; overflow-y: auto; padding-right: 8px; }
@media (max-width: 640px) {
  .settings-modal-card { height: 94vh; max-height: 94vh; }
  .settings-layout { flex-direction: column; }
  .settings-sidebar { flex-direction: row; width: 100%; overflow-x: auto; border-right: none; border-bottom: 1px solid #26272e; padding-right: 0; padding-bottom: 8px; }
}

.settings-sidebar-divider {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: #6c7078; text-transform: uppercase;
  padding: 14px 10px 4px;
}
@media (max-width: 640px) {
  .settings-sidebar-divider { padding: 0 8px; display: flex; align-items: center; }
}
.settings-sidebar-item-plus.active { background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-2) 100%); }

.plus-promo-banner {
  position: relative; overflow: hidden; border-radius: 14px; padding: 30px 24px; text-align: center;
  background: var(--gradient-brand); margin-bottom: 18px;
}
.plus-promo-banner h3 { font-size: 21px; font-weight: 800; margin: 0 0 8px; color: white; line-height: 1.3; }
.plus-promo-banner p { font-size: 13.5px; color: rgba(255,255,255,0.9); max-width: 420px; margin: 0 auto 16px; line-height: 1.5; }
.plus-promo-cta {
  border: none; background: white; color: #4a3aa8; font-weight: 800; font-size: 13.5px; padding: 11px 22px;
  border-radius: 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.plus-promo-cta:hover { filter: brightness(0.96); transform: translateY(-1px); }
.plus-promo-sparkle { position: absolute; color: rgba(255,255,255,0.35); opacity: 0.8; }
.plus-promo-sparkle-1 { top: 14px; left: 26px; width: 22px; height: 22px; }
.plus-promo-sparkle-2 { bottom: 18px; right: 40px; width: 16px; height: 16px; }
.plus-promo-sparkle-3 { top: 22px; right: 20%; width: 14px; height: 14px; }

.plus-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 640px) { .plus-benefits-grid { grid-template-columns: 1fr; } }
.plus-benefit-card {
  background: #26272e; border: 1px solid #35373c; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.plus-benefit-card .ng-icon-wrap { width: 20px; height: 20px; color: var(--accent-2); margin-bottom: 4px; }
.plus-benefit-card strong { font-size: 13px; color: #e6e6e6; }
.plus-benefit-card span { font-size: 12px; color: #9aa0ab; line-height: 1.45; }

.plus-active-banner {
  text-align: center; padding: 12px; border-radius: 10px; background: rgba(35,165,90,0.12);
  color: #3ba55c; font-weight: 700; margin-bottom: 12px;
}

/* Cláusula de doação — fica bem visível ANTES do botão de pagamento. */
.donation-clause-box {
  background: rgba(250,166,26,0.06); border: 1px solid rgba(250,166,26,0.25); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; font-size: 12px; color: #b5bac1; line-height: 1.6;
}
.donation-clause-title {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #faa61a; margin-bottom: 8px;
}
.donation-clause-title .ng-icon { width: 15px; height: 15px; }
.donation-clause-box p { margin: 0 0 8px; }
.donation-clause-box p:last-child { margin-bottom: 0; }
.donation-clause-box strong { color: #e6e6e6; }

/* Cupom de resgate (ex: recarga full no Magic Tank -> NEXTGAME PLUS). */
.redeem-code-box {
  display: flex; align-items: center; gap: 10px; background: rgba(250,166,26,0.08);
  border: 1px solid rgba(250,166,26,0.3); border-radius: 12px; padding: 12px 16px; margin-top: 16px;
}
.redeem-code-box > .ng-icon-wrap { width: 20px; height: 20px; color: #faa61a; flex-shrink: 0; }
.redeem-code-fields { flex: 1; display: flex; gap: 8px; }
.redeem-code-fields input {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: #101116; color: #e6e6e6; font-size: 13px; text-transform: uppercase;
}
.redeem-code-fields input::placeholder { text-transform: none; }
.redeem-code-fields button {
  background: #faa61a; color: #1a1400; border: none; border-radius: 8px; padding: 8px 16px;
  font-weight: 700; font-size: 13px; cursor: pointer; transition: filter 0.15s ease;
}
.redeem-code-fields button:hover { filter: brightness(1.08); }

.tournament-filter-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tournament-filter-tab {
  padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: var(--bg-sidebar);
  color: #9aa0ab; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease;
}
.tournament-filter-tab:hover { border-color: var(--accent); }
.tournament-filter-tab.active { background: var(--gradient-brand); border-color: transparent; color: white; }

.server-members-list, .server-roles-list { display: flex; flex-direction: column; gap: 8px; max-height: 45vh; overflow-y: auto; }
.server-member-row, .server-role-row {
  display: flex; align-items: center; gap: 10px; background: #1e1f22; border: 1px solid #35373c;
  border-radius: 8px; padding: 8px 10px;
}
.server-member-info { flex: 1; min-width: 0; }
.server-member-name { font-size: 13px; font-weight: 700; color: #e6e6e6; }
.server-member-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.server-member-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.role-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; border: 1px solid;
}
.role-pill-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 12px; padding: 0; line-height: 1; }
.role-assign-select {
  background: #101116; color: #dbdee1; border: 1px solid #35373c; border-radius: 6px; font-size: 11px; padding: 4px 6px;
}
.server-kick-btn, .server-role-delete-btn {
  background: #26272e; border: none; color: #f23f42; font-size: 13px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
}
.server-kick-btn:hover, .server-role-delete-btn:hover { background: #33353d; }
.server-role-perms { font-size: 11px; color: #949ba4; flex: 1; }
.role-permissions-checkboxes { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }

/* AMIGOS */
.friends-list { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; margin-bottom: 6px; }
.friend-row {
  display: flex; align-items: center; gap: 10px; background: #1e1f22; border-radius: 8px; padding: 8px 10px;
  border: 1px solid transparent; margin-bottom: 6px; cursor: default; position: relative;
  transition: background 0.15s ease, transform 0.1s ease;
}
.friend-row-active { border-color: var(--accent); background: #2b2d42; }
.friend-row-unread::before {
  content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: white; border-radius: 4px;
}
.dm-info-card { padding: 10px 4px; font-size: 13px; }
.dm-info-card .profile-preview-action-btn { width: 100%; justify-content: flex-start; }

.dm-friends-shortcut-btn {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); margin: 4px 6px 12px;
  background: var(--bg-sidebar); border: none; color: #dbdee1; font-size: 13.5px; font-weight: 600;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.dm-friends-shortcut-btn:hover { background: #26272e; }
.dm-friends-shortcut-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* BUG CORRIGIDO: o link/texto de mensagens compridas (ex: link de convite)
   forçava a linha inteira a esticar e criar barra de rolagem horizontal na
   lista de conversas. Trunca com "..." em vez de vazar pra fora da coluna. */
#dm-sidebar-list, #dm-conversations-list { overflow-x: hidden; }
#dm-conversations-list .friend-row { min-width: 0; }
#dm-conversations-list .friend-name { min-width: 0; overflow: hidden; }
#dm-conversations-list .friend-name strong,
#dm-conversations-list .friend-status,
#dm-conversations-list .hint {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Dentro do painel de Amigos (tela cheia, não modal), a lista não precisa
   mais de rolagem própria limitada — deixa a página inteira rolar, senão
   as seções (pedidos recebidos/enviados/amigos) ficam cortadas/empilhadas
   uma em cima da outra dentro de uma caixinha pequena. */
#friends-panel .friends-list { max-height: none; overflow-y: visible; }
#dm-conversations-list .friend-row:hover { background: #26272e; }
.friend-name { flex: 1; font-size: 13px; font-weight: 600; color: #dbdee1; min-width: 0; }
.friend-status { font-size: 11px; color: var(--accent-3); font-weight: 400; }
.friend-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.friend-accept-btn, .friend-decline-btn, .friend-remove-btn, .friend-cancel-btn, .friend-message-btn, .friend-call-btn {
  background: #26272e; border: none; font-size: 13px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
}
.friend-accept-btn:hover, .friend-decline-btn:hover, .friend-remove-btn:hover, .friend-cancel-btn:hover,
.friend-message-btn:hover, .friend-call-btn:hover { background: #33353d; }
.friend-message-btn, .friend-call-btn { color: var(--accent-3); }
.friend-pending-tag { font-size: 11px; color: #6d7178; }

/* Abas + busca do painel de Amigos — pílulas em vez de sublinhado, mais
   "profissional" e óbvio qual está ativa. */
.friends-tabs {
  display: flex; gap: 4px; margin-bottom: 16px; background: #17181c; border: 1px solid #26272e;
  border-radius: 14px; padding: 4px; width: fit-content;
}
.friends-tab {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: none; border: none;
  border-radius: 10px; color: #8b909a; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.friends-tab:hover { color: #dbdee1; background: rgba(255,255,255,0.04); }
.friends-tab.active { color: white; background: var(--gradient-brand); box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.35); }
.friends-tab-count {
  font-size: 10.5px; font-weight: 800; background: rgba(255,255,255,0.1); color: #cfd2d8; padding: 1px 7px; border-radius: 10px;
}
.friends-tab.active .friends-tab-count { background: rgba(255,255,255,0.25); color: white; }
.friends-search-row { margin-bottom: 16px; }
.friends-search-row .input-icon-wrap { border-radius: 14px; }

/* Amigos/Mensagens mais arredondado, "premium" e interativo — pedido
   explícito. Cards com cantos bem redondos, avatar maior com anel sutil,
   sobe/ganha sombra/brilho ao passar o mouse, botões de ação viram círculos
   que preenchem de cor ao interagir (feedback claro de "isso é clicável"). */
.friend-row {
  padding: 12px 14px; border-radius: 16px; gap: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.friend-row:hover {
  background: #24252b; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset;
  border-color: rgba(var(--accent-rgb),0.25);
}
.friend-row .member-avatar-wrap .member-avatar, .friend-row > .member-avatar {
  width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.friend-row .member-status-dot { width: 12px; height: 12px; border-width: 3px; }
.friend-name { font-size: 13.5px; }
.friend-status { font-weight: 600; }

/* Botões de ação (mensagem, ligar, aceitar, recusar, remover) — círculos
   maiores, com cor de fundo/brilho ao passar o mouse pra ficar óbvio que
   são interativos, não só texto cinza. */
.friend-actions { gap: 8px; }
.friend-accept-btn, .friend-decline-btn, .friend-remove-btn, .friend-cancel-btn, .friend-message-btn, .friend-call-btn {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; padding: 0; transition: background 0.15s ease, transform 0.12s ease, color 0.15s ease;
}
.friend-accept-btn:hover, .friend-decline-btn:hover, .friend-remove-btn:hover, .friend-cancel-btn:hover,
.friend-message-btn:hover, .friend-call-btn:hover { transform: scale(1.08); }
.friend-message-btn:hover, .friend-call-btn:hover { background: var(--gradient-brand); color: white; }
.friend-accept-btn:hover { background: #23a55a; color: white; }
.friend-decline-btn:hover, .friend-remove-btn:hover, .friend-cancel-btn:hover { background: #f23f42; color: white; }

.dm-friends-shortcut-btn { border-radius: 14px; transition: background 0.15s ease, transform 0.12s ease; }
.dm-friends-shortcut-btn:hover { transform: translateY(-1px); }

/* MENU DE CONTEXTO (botão direito, estilo Discord) */
.context-menu {
  position: fixed; z-index: 10001; background: #18191c; border: 1px solid #35373c; border-radius: 8px;
  padding: 6px; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 1px;
}
.context-menu-item {
  display: flex; align-items: center; gap: 8px; background: none; border: none; color: #dbdee1;
  font-size: 13px; padding: 8px 10px; border-radius: 5px; cursor: pointer; text-align: left; width: 100%;
}
.context-menu-item:hover { background: var(--accent); color: white; }
.context-menu-item-danger { color: #f23f42; }
.context-menu-item-danger:hover { background: #f23f42; color: white; }
.context-menu-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.context-menu-separator { height: 1px; background: #2b2c31; margin: 4px 2px; }

/* PREVIEW DE PERFIL */
.profile-preview-card { text-align: center; width: 460px; }
.profile-banner {
  height: 100px; border-radius: 14px; position: relative; margin: -8px -8px 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,0.14), transparent 45%),
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb),0.6), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(var(--accent-2-rgb),0.4), transparent 50%),
    linear-gradient(135deg, #2b2160 0%, var(--bg-sidebar) 70%);
}
.profile-preview-avatar {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: var(--gradient-brand); display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: white;
  position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%);
  box-shadow: 0 0 0 5px var(--bg-modal);
}
.profile-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-preview-status { color: var(--accent-3); font-size: 13px; margin: -8px 0 14px; }
.profile-preview-tag-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -6px 0 6px; }
.profile-preview-tag { color: #949ba4; font-size: 13px; font-family: monospace; }
.profile-preview-copy-btn {
  background: #35373c; border: none; color: #dbdee1; font-size: 11px; padding: 3px 8px;
  border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.profile-preview-copy-btn:hover { background: #40424a; }
.user-tag-inline { color: #949ba4; font-size: 11px; font-family: monospace; margin-left: 4px; }
.profile-stats-row { display: flex; gap: 10px; margin: 16px 0; }
.profile-stat {
  flex: 1; background: var(--bg-sidebar); border-radius: 10px; padding: 10px; border: 1px solid #26272e;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.profile-stat:hover { transform: translateY(-2px); border-color: #3a3c42; }
.profile-stat-num { display: block; font-size: 18px; font-weight: 900; color: white; }
.profile-stat-label { font-size: 10px; color: #9aa0ab; text-transform: uppercase; }
.profile-preview-message-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 10px; margin-bottom: 10px; border-radius: 8px; border: none; background: var(--accent);
  color: white; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: filter 0.15s ease;
}
.profile-preview-message-btn:hover { filter: brightness(1.1); }
.profile-preview-message-btn.profile-preview-message-pending { background: #35373c; color: #dbdee1; cursor: default; }
.profile-preview-actions { display: flex; flex-direction: column; gap: 8px; }
.profile-preview-action-btn {
  padding: 9px; border-radius: 6px; border: none; background: #26272e; color: #dbdee1;
  font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; padding-left: 14px;
}
.profile-preview-action-btn:hover { background: #33353d; }
.profile-preview-action-danger { color: #f23f42; }
.profile-preview-action-danger:hover { background: rgba(242,63,66,0.15); }

/* ============================================================
   POLIMENTO GERAL — pedido do usuário: "mais lindo, redondinho,
   profissional". Vem por cima do CSS acima (cascata), então só
   ajusta arredondamento/sombra/espaçamento — não mexe em nenhuma
   regra de layout (flex/grid/display), então não quebra nada que
   já funciona, só deixa mais acabado visualmente.
   ============================================================ */

/* Scrollbar e seleção de texto seguem a cor do tema escolhido (--accent),
   igual o resto da interface — antes ficavam sempre cinza neutro, mesmo
   trocando de tema. Mantido sutil (opacidade reduzida) pra não virar neon
   chapado, só um toque de cor combinando com o tema ativo. */
* { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent); opacity: 0.55; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { opacity: 0.85; }
::selection { background: var(--accent); color: #ffffff; }

/* Cards e paineizinhos em geral — mais arredondados, com uma sombra
   suave que dá profundidade sem exagerar. */
.home-tournament-banner, .home-quick-action, .home-server-card, .home-activity-item,
.home-side-card, .voice-info-card, .friend-row, .game-invite-card, .dm-info-card,
.profile-stat, .home-stat-card, .streak-progress-card, .liga-standings,
.settings-content-card, .tournament-card {
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-quick-action:hover, .home-server-card:hover, .friend-row:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* Botões — mais arredondados (pill-ish), sombra sutil no hover pra
   parecer clicável de um jeito mais "produzido". */
.home-btn-primary, .btn-register, button[type="submit"], .modal-actions button[type="submit"],
.game-invite-actions button, .bracket-report-submit, .profile-preview-action-btn {
  border-radius: 12px !important;
}
.home-btn-primary:hover, .btn-register:hover { box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.45); transform: translateY(-1px); }

.sidebar-nav-item, .header-icon-btn, .server-icon-wrap, .home-quick-action-icon,
.settings-sidebar-item, .dm-friends-shortcut-btn {
  border-radius: 12px !important;
}
.header-icon-btn { width: 32px !important; height: 32px !important; }

/* Avatares — anel sutil pra dar acabamento premium, sem mudar tamanho. */
.message-avatar, .profile-preview-avatar, .friend-row .avatar-circle, .home-server-card .server-icon {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}

/* Modais — cantos e sombra mais "app profissional". */
.modal-content { border-radius: 18px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.55) !important; }

/* ---- Chat: redesign estilo Discord premium ---- */
.messages { padding: 18px 20px; gap: 2px; }
.message {
  border-radius: 10px;
  padding: 6px 10px;
  transition: background 0.12s ease;
}
.message:hover { background: rgba(255,255,255,0.035) !important; }
.message-avatar {
  width: 38px; height: 38px;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.07);
}
.message .meta { gap: 8px; margin-bottom: 1px; }
.message .meta strong { font-size: 14.5px; font-weight: 700; }
.message .content { font-size: 14.5px; line-height: 1.5; color: #e6e6e6; }
.message.bot-message { border-radius: 10px; }

.game-invite-card { padding: 12px 14px; border: 1px solid #3a3c42; }
.game-invite-actions button { border-radius: 8px !important; font-weight: 700; }

/* Barra de mensagem: vira uma pílula flutuante, mais "gamer premium"
   (referência Discord novo), com o botão de enviar circular. */
.message-form {
  border-top: none;
  padding: 10px 16px 16px;
  gap: 10px;
  align-items: center;
}
.message-form input {
  border-radius: 24px !important;
  background: #26272e;
  padding: 12px 18px;
  font-size: 14.5px;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.message-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
}
.message-form button {
  border-radius: 50% !important;
  width: 44px; height: 44px;
  padding: 0;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.35);
}
.message-form button:hover { box-shadow: 0 5px 16px rgba(var(--accent-rgb),0.5); transform: translateY(-1px) scale(1.02); }

.reaction-chip { border-radius: 14px !important; }
.typing-indicator { padding: 2px 20px 4px; }

.auth-left-footer-link { color: #9aa0ab; text-decoration: underline; cursor: pointer; }
.auth-left-footer-link:hover { color: #dbdee1; }

.safety-info-list { display: flex; flex-direction: column; gap: 12px; }
.safety-info-item { display: flex; align-items: flex-start; gap: 10px; }
.safety-info-item .ng-icon-wrap { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.safety-info-item strong { display: block; font-size: 13.5px; color: #e6e6e6; margin-bottom: 2px; }
.safety-info-item span { display: block; font-size: 12.5px; color: #9aa0ab; line-height: 1.45; }

/* Modal de Downloads (app de desktop + ferramentas da comunidade). */
.downloads-list { display: flex; flex-direction: column; gap: 10px; }
.downloads-item {
  display: flex; align-items: center; gap: 12px; background: var(--bg-sidebar);
  border: 1px solid rgba(var(--accent-rgb),0.2); border-radius: 10px; padding: 12px;
}
.downloads-item-icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 20px; background: rgba(var(--accent-rgb),0.1); overflow: hidden;
}
.downloads-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.downloads-item-text { flex: 1; min-width: 0; }
.downloads-item-text strong { display: block; font-size: 13.5px; color: #e6e6e6; }
.downloads-item-text span { display: block; font-size: 11.5px; color: #9aa0ab; line-height: 1.4; margin-top: 2px; }
.downloads-item-btn {
  flex-shrink: 0; background: var(--gradient-brand); color: #05100a; font-weight: 700; font-size: 12.5px;
  padding: 8px 14px; border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.downloads-item-btn:hover { filter: brightness(1.1); }

.minor-safety-banner {
  display: flex; align-items: center; gap: 8px; background: rgba(var(--accent-rgb),0.12);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.3); padding: 8px 16px; font-size: 12.5px; color: #b8ffe0;
}
.minor-safety-banner a { color: #fff; text-decoration: underline; cursor: pointer; }
.minor-safety-banner button {
  margin-left: auto; background: none; border: none; color: #9aa0ab; cursor: pointer; padding: 2px;
}
.minor-safety-banner button:hover { color: #dbdee1; }

.reward-rare-star { width: 15px; height: auto; vertical-align: -2px; }

.age-camera-check { margin: 10px 0; }
.age-camera-wrap { margin-top: 10px; background: #101116; border-radius: 10px; padding: 10px; text-align: center; }
.age-camera-wrap video {
  width: 100%; max-width: 220px; border-radius: 8px; background: #000;
  transform: scaleX(-1);
}
.age-camera-wrap .modal-actions { justify-content: center !important; }
.link-btn-inline {
  display: block; background: none; border: none; color: var(--accent); font-size: 12px;
  font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 0 0; margin: 0;
}

.plus-badge {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 6px; margin-left: 5px; vertical-align: middle;
  background: linear-gradient(135deg, #ffd76b, #ff9f43); color: #402a00;
}

.attachment-preview {
  display: flex; align-items: center; gap: 8px; background: #26272e; margin: 0 16px 8px;
  padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: #dbdee1;
}
.attachment-preview #attachment-preview-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview button { background: none; border: none; color: #9aa0ab; cursor: pointer; }
.attachment-preview button:hover { color: #f23f42; }

#btn-attach-file {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; background: #26272e;
  color: #dbdee1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#btn-attach-file:hover { background: #33353d; }

.message-attachment-card {
  display: flex; align-items: center; gap: 10px; background: var(--bg-modal); border: 1px solid #3a3c42;
  border-radius: 10px; padding: 10px 12px; max-width: 320px; margin-top: 4px; text-decoration: none;
}
.message-attachment-card:hover { background: #33353d; }
.message-attachment-card .ng-icon-wrap { color: var(--accent); flex-shrink: 0; }
.message-attachment-card .attachment-name { font-size: 13px; color: #e6e6e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-attachment-card .attachment-size { font-size: 11px; color: #9aa0ab; }
.message-attachment-image { max-width: 320px; max-height: 260px; border-radius: 10px; margin-top: 4px; display: block; cursor: pointer; }
.message-attachment-image-wrap { position: relative; display: inline-block; margin-top: 4px; }
.message-attachment-image-wrap .message-attachment-image { margin-top: 0; }
.message-attachment-download-btn {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(0,0,0,0.55); color: white; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; text-decoration: none;
}
.message-attachment-image-wrap:hover .message-attachment-download-btn { opacity: 1; }
.message-attachment-download-btn:hover { background: rgba(0,0,0,0.8); }
/* No celular não tem "hover" — deixa sempre visível, senão ninguém acha o botão */
@media (hover: none) {
  .message-attachment-download-btn { opacity: 1; }
}

/* ==========================================================================
   POLIMENTO VISUAL (a pedido — "cria algo mais bonito no site") — refino
   final em cima do que já existe, sem mexer em nenhuma classe/ID usada pelo
   app.js (só ajusta cor/espaçamento/sombra/transição das mesmas coisas).
   Fica de propósito ANTES do bloco responsivo/celular abaixo, pra essas
   regras de tela pequena continuarem tendo a palavra final lá embaixo.
   ========================================================================== */

/* Cartões (torneios, ranking, voz) ganham uma leve "flutuada" no hover —
   hoje só trocavam de cor, sem nenhuma sensação de profundidade. */
.tournament-card, .ranking-row, .voice-info-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tournament-card:hover, .ranking-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  border-color: rgba(var(--accent-rgb),0.35);
}

/* Botões com o degradê da marca (torneios, modais, "criar/salvar") ganham o
   mesmo brilho ao passar o mouse que o botão de enviar mensagem já tinha —
   antes só ele tinha esse capricho, o resto ficava sem graça do lado. */
.modal-actions button[type="submit"],
.modal-actions button.primary,
.btn-register {
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.modal-actions button[type="submit"]:hover,
.modal-actions button.primary:hover,
.btn-register:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb),0.4);
  filter: brightness(1.08);
}
.modal-actions button[type="button"] { transition: background 0.12s ease; }

/* Barrinha fininha com o degradê da marca no topo do modal — um toque de
   identidade visual sem precisar mudar a estrutura do modal em si. */
.modal-card { position: relative; }
.modal-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-brand); border-radius: 12px 12px 0 0;
}

/* Anel sutil no avatar de quem está online — hoje só a bolinha de status
   avisava; um anel fininho na cor do acento reforça isso sem poluir. */
.member-row:not(.offline) .member-avatar {
  box-shadow: 0 0 0 2px rgba(var(--accent-2-rgb),0.35);
}

/* Cabeçalho de categoria de canal com uma transição mais suave ao
   recolher/expandir, e um pouco mais de espaço acima pra separar grupos. */
.channel-category-header { transition: color 0.12s ease; margin-top: 4px; }
.channel-item { transition: background 0.12s ease, color 0.12s ease; }

/* Foco por teclado consistente em todo formulário dentro de modal — hoje só
   alguns campos (mensagem, login) tinham o anel de foco do acento. */
.modal-card input:focus-visible, .modal-card select:focus-visible, .modal-card textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* Selo de servidor oficial e ícone de servidor ganham uma transição mais
   macia no hover (a mudança de forma quadrado→arredondado já existia, só
   faltava suavizar). */
.server-icon { transition: border-radius 0.18s ease, transform 0.15s ease, background 0.15s ease; }

/* ==========================================================================
   REMODELAMENTO VISUAL v2 — "mais bonito", estilo Discord/Steam premium
   (a pedido: "remodele toda a aplicação visual para ficar mais bonita").
   Evolução do que já existe (mesma paleta azul→verde-água da marca), não
   uma virada de mesa: profundidade sutil (gradientes/sombras em camadas),
   glow nos elementos de destaque, hover mais vivo, foco consistente.
   Fica DEPOIS de tudo de propósito, pra sobrepor sem precisar caçar/editar
   cada regra antiga uma por uma.
   ========================================================================== */
:root {
  --elev-1: 0 2px 8px rgba(0,0,0,0.28);
  --elev-2: 0 8px 24px rgba(0,0,0,0.38);
  --elev-3: 0 20px 50px rgba(0,0,0,0.5);
  --glow-accent: 0 0 0 1px rgba(var(--accent-rgb),0.4), 0 6px 20px rgba(var(--accent-rgb),0.3);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

/* Fundo geral com leve profundidade em vez de cor plana — quase imperceptível,
   só dá "textura" ao painel principal sem distrair da conversa. */
.app-main {
  background: radial-gradient(circle at 15% 0%, rgba(var(--accent-rgb),0.05), transparent 40%),
              radial-gradient(circle at 85% 100%, rgba(var(--accent-2-rgb),0.04), transparent 40%),
              var(--bg-app);
}

/* Sidebar de navegação com leve gradiente vertical + sombra própria,
   separando melhor das colunas ao lado (hoje só tinha uma borda de 1px). */
.app-sidebar {
  background: linear-gradient(180deg, var(--bg-rail) 0%, #101116 100%);
  box-shadow: var(--elev-1);
}
.app-sidebar-logo-img { filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb),0.35)); }

/* Barra de topo com leve blur + sombra pra "flutuar" sobre o conteúdo. */
.top-navbar {
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), var(--elev-1);
}

/* Ícones de servidor — glow mais vivo no selecionado, leve elevação no
   hover (além da mudança quadrado→arredondado que já existia). */
.server-icon:hover { box-shadow: var(--elev-2); }
.server-icon.active { box-shadow: 0 4px 14px rgba(var(--accent-rgb),0.45); }
.server-icon-add:hover { box-shadow: 0 4px 14px rgba(var(--accent-2-rgb),0.35); }

/* Itens de canal — barrinha de acento à esquerda no ativo, em vez de só
   trocar a cor de fundo, fica mais parecido com apps premium de verdade. */
.channel-item { position: relative; border-radius: var(--radius-sm); }
.channel-item.active {
  box-shadow: inset 3px 0 0 var(--accent);
}
.channel-item:hover { transform: translateX(1px); }

/* Cards de conteúdo (torneios, explorar, etc.) — elevação real no hover
   em vez de só trocar a cor de fundo, com leve zoom pra dar vida. */
.tournament-card, .explore-card, .message-attachment-card {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}
.tournament-card:hover, .explore-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
  border-color: rgba(var(--accent-rgb),0.4);
}

/* Linha de mensagem — destaque sutil ao passar o mouse, ajuda a ler qual
   mensagem está "em foco" numa conversa longa (comportamento do Discord). */
.message-row { border-radius: var(--radius-sm); transition: background 0.1s ease; }
.message-row:hover { background: rgba(255,255,255,0.028); }

/* Botões de destaque (registrar, criar, enviar, confirmar) ganham um glow
   consistente no hover — hoje só alguns tinham esse tratamento. */
.navbar-create-btn:hover,
.wizard-next-btn:hover,
.btn-register:hover,
.modal-actions button[type="submit"]:hover,
.modal-actions button.primary:hover {
  box-shadow: var(--glow-accent);
}

/* Campos de formulário — anel de foco consistente em QUALQUER input do
   site (antes só cobria os de dentro de modal), com transição suave. */
input, select, textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.22);
}

/* Avatares — anel mais nítido pra quem está online, sombra suave em todo
   avatar pra "descolar" um pouco do fundo. */
.member-avatar, .navbar-profile-chip .member-avatar {
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Spinner de carregamento inicial com anel gradiente em vez de cor sólida,
   combinando com o resto da identidade visual azul→verde-água. */
.boot-loading-spinner {
  border-top-color: var(--accent-2);
  box-shadow: 0 0 16px rgba(var(--accent-2-rgb),0.35);
}

/* Modal — sombra em camadas mais rica (hoje só tinha uma sombra simples
   por trás), reforçando a hierarquia por cima do resto da tela. */
.modal-card { box-shadow: var(--elev-3); }

/* ==========================================================================
   REMODELAMENTO VISUAL v3 — mudanças VISÍVEIS sem precisar passar o mouse
   (a v2 acima era em boa parte hover/foco, que não aparece num print parado
   — esta aqui muda o estado normal dos cards/menus pra ficar claramente
   diferente já na primeira olhada, sem mexer em layout/estrutura). */

/* Cards que hoje são um retângulo cinza chapado (fundo sólido + borda 1px)
   ganham um gradiente sutil + sombra permanente, não só no hover. */
.home-side-card, .home-partner-game-card, .home-server-card, .explore-card,
.home-quick-action, .tournament-card {
  background: linear-gradient(155deg, #232429 0%, #1a1b20 100%) !important;
  border-color: #2e2f38 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elev-1);
}
.home-tournament-banner { border-radius: var(--radius-lg) !important; box-shadow: var(--elev-2); }

/* Título de seção ganha uma barrinha vertical do gradiente da marca do
   lado, em vez de só o texto maiúsculo — reforça a identidade visual em
   toda tela de Início/Explorar sem mudar a hierarquia. */
.home-section-title {
  padding-left: 10px; border-left: 3px solid transparent;
  border-image: var(--gradient-brand) 1; border-image-slice: 1;
}

/* Ícones dentro dos cards (jogo parceiro, ações rápidas, destaque de
   servidor) ganham fundo em degradê em vez de rgba chapado. */
.home-quick-action-icon, .explore-card-icon, .home-tournament-banner-icon {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.28) 0%, rgba(var(--accent-2-rgb),0.2) 100%) !important;
}

/* Item de navegação da sidebar (Início/Amigos/Chat) — mesmo inativo, ganha
   um fundo bem sutil pra não ficar "invisível" ao lado dos ativos. */
.sidebar-nav-item { background: rgba(255,255,255,0.02); margin-bottom: 1px; }
.sidebar-nav-item:hover { background: rgba(255,255,255,0.06); }

/* Chip de perfil no topo (onde estava o bug de ícones bagunçados) — borda
   mais visível + fundo em degradê, reforça que é clicável/importante. */
.navbar-profile-chip {
  background: linear-gradient(135deg, #202127 0%, #1a1b20 100%) !important;
  border-color: #34353e !important;
}
.navbar-create-menu, .navbar-search-dropdown {
  border-radius: var(--radius-md) !important;
  background: linear-gradient(155deg, #232429 0%, #1c1d22 100%) !important;
}

/* Botão "+ Criar" com leve profundidade permanente (hoje só glow no hover). */
.navbar-create-btn { box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.3); }

/* Ícone de servidor na sidebar — cantos levemente arredondados mesmo
   parado (hoje só virava arredondado no hover), fica mais "app premium"
   e menos "quadrado cru" o tempo todo. */
.server-icon { border-radius: 34% !important; }
.server-icon:hover, .server-icon.active { border-radius: 30% !important; }

/* Barra lateral principal com borda direita mais nítida, separando melhor
   do conteúdo (a v2 só deu gradiente de fundo, que é sutil demais). */
.app-sidebar { border-right-color: #26272e !important; }

/* Contador de streak / número de destaque nos side cards com leve glow no
   texto, mais chamativo. */
#home-streak-card strong, .home-header-stat-num { text-shadow: 0 0 12px rgba(var(--accent-rgb),0.35); }

/* Correção: menu do chip de perfil (canto superior direito) abrindo por
   BAIXO de alguma imagem da tela em vez de por cima. Reforça o menu bem
   acima de tudo e garante que a barra de topo tem prioridade de camada. */
.footer-more-menu {
  z-index: 500 !important;
  background: #26272e !important;
  border: 1px solid #3a3c44 !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4) !important;
  backdrop-filter: none !important;
}
.top-navbar { position: relative; z-index: 30; }
.navbar-profile-chip-wrap { position: relative; z-index: 31; }

/* Coluna de canais (esquerda, dentro do servidor) e painel de membros
   (direita) — mesmo tratamento de profundidade do resto do app, hoje eram
   as únicas colunas ainda 100% chapadas. */
.sidebar {
  background: linear-gradient(180deg, var(--bg-sidebar) 0%, #16171c 100%);
  border-right: 1px solid #26272e;
}
.members-panel {
  background: linear-gradient(180deg, var(--bg-sidebar) 0%, #16171c 100%) !important;
  border-left: 1px solid #26272e;
}

/* Barra de escrever mensagem — hoje era só uma borda fina em cima; ganha
   fundo levemente diferente do resto do chat + input mais definido, pra
   ficar claro onde termina a conversa e começa a área de digitar. */
.message-form {
  background: linear-gradient(180deg, #1a1b20 0%, #17181d 100%);
  border-top-color: #2a2b33;
}
.message-form input[type="text"] {
  background: #232429 !important; border: 1px solid #2e2f38 !important; border-radius: 20px !important;
  padding: 9px 16px !important;
}
.message-form button[type="submit"] {
  background: var(--gradient-brand); border-radius: 50%; width: 36px; height: 36px; color: white;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.3);
}

/* ==========================================================================
   ESTILO DISCORD — a pedido ("quero algo igual o Discord"). O Discord de
   verdade é bem mais PLANO e sóbrio do que o v2/v3 acima (que tinham
   gradiente e glow em tudo) — cores exatas do tema escuro oficial deles,
   cantos moderados (8-12px, não 16-20px), sombra só onde faz sentido
   (menus flutuantes), sem degradê nos cards. Isso aqui pega prioridade
   por vir por último, sem apagar as regras de cima (só sobrepõe). */
:root {
  --bg-app: #313338;      /* área principal de chat (Discord: quase preto-azulado) */
  --bg-rail: #1e1f22;     /* trilho de servidores, o mais escuro de todos */
  --bg-sidebar: #2b2d31;  /* coluna de canais / painel de membros */
  --bg-panel: #2b2d31;
  --bg-modal: #313338;
}
body { background: var(--bg-app); }
.app-main { background: var(--bg-app); } /* remove o gradiente radial sutil do v3 */

/* Cards voltam a ser lisos (sem degradê), igual ao Discord — cantos menores. */
.home-side-card, .home-partner-game-card, .home-server-card, .explore-card,
.home-quick-action, .tournament-card {
  background: var(--bg-sidebar) !important;
  border-color: #1e1f22 !important;
  border-radius: 8px !important;
  box-shadow: none;
}
.tournament-card:hover, .explore-card:hover { box-shadow: none; transform: none; }
.home-quick-action-icon, .explore-card-icon, .home-tournament-banner-icon {
  background: rgba(var(--accent-rgb),0.15) !important;
}

/* Sidebar de navegação e coluna de canais — fundo liso, sem gradiente. */
.app-sidebar { background: var(--bg-rail) !important; box-shadow: none; }
.sidebar { background: var(--bg-sidebar) !important; box-shadow: none; }
.members-panel { background: var(--bg-sidebar) !important; box-shadow: none; }
.top-navbar { background: var(--bg-app); backdrop-filter: none; box-shadow: none; border-bottom: 1px solid #1f2023; }

/* Ícone de servidor — círculo que vira "squircle" arredondado só no hover/
   ativo, exatamente como no Discord (isso já existia, só reforça o visual
   sem glow colorido por baixo). */
.server-icon { border-radius: 50% !important; box-shadow: none !important; }
.server-icon:hover, .server-icon.active { border-radius: 34% !important; box-shadow: none !important; }
.server-icon.active::before { background: white; }

/* Item de canal — pílula lisa, sem barrinha lateral (Discord usa só cor de
   fundo + texto branco no ativo, nada de acento na borda). */
.channel-item { box-shadow: none !important; border-radius: 4px; }
.channel-item.active { background: #404249 !important; color: white !important; }
.channel-item:hover { background: rgba(255,255,255,0.04) !important; transform: none; }

/* Botões de destaque sem glow — Discord usa cor sólida (blurple) com leve
   escurecer/clarear no hover, não sombra colorida. */
.navbar-create-btn, .wizard-next-btn, .btn-register,
.modal-actions button[type="submit"], .modal-actions button.primary {
  box-shadow: none !important;
}
.navbar-create-btn:hover, .wizard-next-btn:hover, .btn-register:hover,
.modal-actions button[type="submit"]:hover, .modal-actions button.primary:hover {
  box-shadow: none !important; filter: brightness(1.1);
}

/* Mensagens — sem destaque de hover em bloco colorido, só um leve realce
   (Discord faz exatamente isso: quase imperceptível). */
.message-row:hover { background: rgba(255,255,255,0.02) !important; }

/* Menu de perfil / dropdowns — cinza sólido Discord (#111214 é o tom real
   deles pros menus flutuantes), sem gradiente. */
.footer-more-menu, .navbar-create-menu, .navbar-search-dropdown, .sidebar-more-menu {
  background: #111214 !important; border-color: #1e1f22 !important; border-radius: 8px !important;
}

/* Barra de escrever mensagem — cinza sólido igual o resto, sem degradê. */
.message-form { background: var(--bg-app) !important; border-top-color: #26272b; }
.message-form input[type="text"] {
  background: #383a40 !important; border: none !important; border-radius: 8px !important;
}
.message-form button[type="submit"] { box-shadow: none; }

/* Título de seção sem barrinha colorida — Discord usa só maiúsculas cinza. */
.home-section-title { border-left: none; padding-left: 0; }

/* Avatares/spinner sem glow. */
.member-avatar, .navbar-profile-chip .member-avatar { box-shadow: none; }
.boot-loading-spinner { box-shadow: none; }
#home-streak-card strong, .home-header-stat-num { text-shadow: none; }
.modal-card { box-shadow: 0 8px 16px rgba(0,0,0,0.24); }
.modal-card::before { display: none; } /* remove a barrinha degradê no topo do modal */

/* ==========================================================================
   ESTILO CYBERPUNK/NEON — a pedido ("escuro + verde neon", cards/botões
   redesenhados, tipografia com mais presença, espaçamento revisado). Esta
   é a direção final, pega prioridade sobre tudo que veio antes (Discord
   flat e gamer-gradiente ficam pra trás — só essa fica valendo). Fundo
   praticamente preto, acento verde-neon/ciano brilhante, bordas com glow
   fino em vez de sombra cinza, cantos mais retos (visual "painel de
   terminal"), texto maior e com mais espaço entre letras nos títulos. */
:root {
  --accent: #00ff9d;
  --accent-2: #00e5ff;
  --accent-3: #00ff9d;
  --accent-rgb: 0,255,157;
  --accent-2-rgb: 0,229,255;
  --gradient-brand: linear-gradient(135deg, #00ff9d 0%, #00e5ff 100%);
  --bg-app: #0a0b0d;
  --bg-rail: #060708;
  --bg-sidebar: #0e1012;
  --bg-panel: #101214;
  --bg-modal: #101416;
  --radius-lg: 8px; --radius-md: 6px; --radius-sm: 4px;
}
body { background: var(--bg-app); color: #d8fff0; }
.app-main { background: var(--bg-app); }
.app-sidebar, .sidebar, .members-panel, .top-navbar { background: var(--bg-rail) !important; }

/* Tipografia com mais presença — títulos maiores, mais espaçados, com leve
   brilho verde (efeito "tela de terminal"), texto de corpo levemente maior. */
h1, h2, .home-tournament-banner-text h2 { letter-spacing: 0.02em; text-shadow: 0 0 14px rgba(var(--accent-rgb),0.25); }
.home-section-title {
  font-size: 13.5px; letter-spacing: 0.08em; color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb),0.4);
}
.member-name, .navbar-chip-username, #navbar-chip-username { letter-spacing: 0.01em; }
body, input, textarea, button { font-size: 14px; }

/* Cards — fundo quase preto com BORDA NEON fina em vez de sombra cinza;
   cantos retos (6-8px), mais respiro interno (padding maior). */
.home-side-card, .home-partner-game-card, .home-server-card, .explore-card,
.home-quick-action, .tournament-card, .modal-card {
  background: #0d0f10 !important;
  border: 1px solid rgba(var(--accent-rgb),0.25) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.05), 0 4px 20px rgba(0,0,0,0.5) !important;
  padding: 14px !important;
}
.home-side-card { padding: 14px 16px !important; }
.tournament-card:hover, .explore-card:hover, .home-server-card:hover {
  border-color: rgba(var(--accent-rgb),0.6) !important;
  box-shadow: 0 0 20px rgba(var(--accent-rgb),0.25), 0 4px 20px rgba(0,0,0,0.5) !important;
  transform: translateY(-2px);
}
.home-quick-action-icon, .explore-card-icon, .home-tournament-banner-icon {
  background: rgba(var(--accent-rgb),0.1) !important; border: 1px solid rgba(var(--accent-rgb),0.3);
  color: var(--accent);
}

/* Botões de destaque — preenchimento sólido neon com glow real no hover
   (não só sombra cinza), texto preto pra contrastar com o verde vivo. */
.navbar-create-btn, .wizard-next-btn, .btn-register,
.modal-actions button[type="submit"], .modal-actions button.primary, .home-btn-primary {
  background: var(--gradient-brand) !important; color: #05100a !important; font-weight: 800 !important;
  border-radius: var(--radius-sm) !important; border: none !important;
  box-shadow: 0 0 16px rgba(var(--accent-rgb),0.35) !important;
}
.navbar-create-btn:hover, .wizard-next-btn:hover, .btn-register:hover,
.modal-actions button[type="submit"]:hover, .modal-actions button.primary:hover, .home-btn-primary:hover {
  box-shadow: 0 0 28px rgba(var(--accent-rgb),0.55) !important; filter: brightness(1.08);
}
.home-btn-secondary {
  background: transparent !important; border: 1px solid rgba(var(--accent-rgb),0.4) !important; color: var(--accent) !important;
}

/* Ícone de servidor — anel neon fino em vez de fundo colorido chapado. */
.server-icon { border: 1px solid rgba(var(--accent-rgb),0.2); border-radius: 50% !important; }
.server-icon:hover, .server-icon.active {
  border-radius: 30% !important; border-color: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb),0.5) !important;
}

/* Canal ativo — texto neon + fundo escuro, sem pílula cinza. */
.channel-item { border-radius: var(--radius-sm); padding: 8px 10px; }
.channel-item.active {
  background: rgba(var(--accent-rgb),0.08) !important; color: var(--accent) !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}
.channel-item:hover { background: rgba(var(--accent-rgb),0.04) !important; }

/* Menus flutuantes — mesma linguagem de borda neon fina. */
.footer-more-menu, .navbar-create-menu, .navbar-search-dropdown, .sidebar-more-menu {
  background: #0d0f10 !important; border: 1px solid rgba(var(--accent-rgb),0.25) !important;
  border-radius: var(--radius-md) !important; box-shadow: 0 0 24px rgba(var(--accent-rgb),0.15), 0 20px 50px rgba(0,0,0,0.6) !important;
}

/* Campo de mensagem — borda neon fina no foco em vez de azul. */
.message-form { background: var(--bg-app) !important; border-top: 1px solid rgba(var(--accent-rgb),0.15); }
.message-form input[type="text"] {
  background: #0d0f10 !important; border: 1px solid rgba(var(--accent-rgb),0.2) !important; border-radius: var(--radius-sm) !important;
}
.message-form input[type="text"]:focus { border-color: var(--accent) !important; box-shadow: 0 0 10px rgba(var(--accent-rgb),0.3); }
.message-form button[type="submit"] {
  background: var(--gradient-brand) !important; border-radius: var(--radius-sm) !important; color: #05100a;
  box-shadow: 0 0 14px rgba(var(--accent-rgb),0.4) !important;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18) !important;
}

/* Espaçamento — mais respiro entre seções da Início (estava denso demais),
   e menos espaço morto entre cards vizinhos (estava vazio demais). */
.home-grid { gap: 20px !important; }
.home-servers-grid { gap: 12px !important; }
.home-col-side > * + * { margin-top: 12px !important; }

/* Avatares e status com contorno neon fino. */
.member-avatar { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.25) !important; }
.member-status-dot.member-status-online { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),0.6); }

/* ==========================================================================
   REMODELAMENTO VISUAL — "GAMER VIBRANTE" (só CSS, nenhum HTML/JS tocado)
   ==========================================================================
   Pedido: trocar TODO o visual do site (não só cor) por algo bonito de
   verdade — saiu o verde-neon/cantos cortados (cyberpunk), entrou uma
   identidade rosa → roxo → azul vibrante, com painéis em vidro fosco
   (glass/blur), cantos arredondados suaves e mais profundidade/sombra.
   Vem DEPOIS de tudo no arquivo (vence por ordem de carga, sem precisar de
   !important em cada regra) e só mexe em aparência: cor, blur, sombra,
   fonte, raio de borda — nenhuma classe, id ou comportamento de JS muda. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --accent: #ff2d87;
  --accent-2: #2d7bff;
  --accent-3: #8b2dff;
  --accent-rgb: 255,45,135;
  --accent-2-rgb: 45,123,255;
  --gradient-brand: linear-gradient(135deg, #ff2d87 0%, #8b2dff 55%, #2d7bff 100%);
  --bg-app: #0d0818;
  --bg-rail: #120b20;
  --bg-sidebar: #150c22;
  --bg-panel: #170d25;
  --bg-modal: #1a0f29;
  --vibrant-glass: rgba(255,255,255,0.045);
  --vibrant-glass-strong: rgba(255,255,255,0.08);
  --vibrant-radius: 18px;
}

body {
  font-family: 'Poppins', 'Inter', sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,45,135,.22), transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(45,123,255,.2), transparent 42%),
    radial-gradient(circle at 50% 115%, rgba(139,45,255,.22), transparent 55%),
    var(--bg-app) !important;
}

/* Títulos, marca e botões ganham a fonte arredondada "gamer" — o corpo de
   texto normal (mensagens, parágrafos) continua em Poppins, bem legível. */
h1, h2, h3, .auth-card-title, .auth-hero-title, .auth-hero-brand-name,
.modal-card h2, .modal-card h3, button, .btn, .sidebar-nav-item,
.server-row-name, .auth-tab {
  font-family: 'Baloo 2', 'Rajdhani', sans-serif !important;
}

/* ---- Vidro fosco nos painéis principais (sidebar, topo, canais, membros,
   modais) — troca o preto chapado por uma camada translúcida com blur de
   verdade, mais a borda/sombra que dá a sensação de profundidade. ---- */
.top-navbar,
#channel-sidebar.sidebar,
.members-sidebar,
.modal-card,
.home-side-card,
.sidebar-return-to-call {
  background: var(--vibrant-glass) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: var(--vibrant-radius) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
  clip-path: none !important;
}

/* Rail dos servidores (ícones circulares à esquerda) — também em vidro,
   ícones viram círculos/cantos macios (sem corte "HUD" de antes). */
.server-rail, #server-rail-list {
  background: var(--vibrant-glass) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: var(--vibrant-radius) !important;
  clip-path: none !important;
}
.server-row, .server-row-icon {
  border-radius: 16px !important;
  clip-path: none !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.server-row.active, .server-row:hover {
  background: var(--gradient-brand) !important;
  box-shadow: 0 0 22px rgba(var(--accent-rgb),0.55) !important;
  transform: translateY(-1px);
}

/* Itens de navegação e canais — cantos arredondados, destaque em degradê
   suave em vez de bloco sólido duro. */
.sidebar-nav-item, .channel-item, .server-row-name {
  border-radius: 12px !important;
  clip-path: none !important;
}
.sidebar-nav-item.active, .sidebar-nav-item-solo.active,
.channel-item.active {
  background: linear-gradient(135deg, rgba(255,45,135,.32), rgba(139,45,255,.26)) !important;
  box-shadow: 0 6px 20px rgba(139,45,255,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* Botões — sempre com o degradê vibrante da marca, cantos macios, leve
   elevação no hover (em vez de corte reto nos cantos). */
button:not(.icon-btn):not(.ng-icon-wrap):not(.sidebar-nav-item):not(.channel-item),
.btn-primary, .auth-hero-cta-primary, .btn-send, #btn-send-message {
  border-radius: 12px !important;
  clip-path: none !important;
}
.btn-primary, .auth-hero-cta-primary, .auth-tab.active, .modal-actions button[type="submit"] {
  background: var(--gradient-brand) !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb),0.4) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover, .auth-hero-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb),0.5) !important;
}

/* Campos de texto/inputs — cantos macios e borda que acende com a cor do
   tema ao focar, em vez de retângulo reto cinza. */
input, textarea, select, .input-icon-wrap, #message-input {
  border-radius: 12px !important;
  clip-path: none !important;
}
input:focus, textarea:focus, select:focus, #message-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.2) !important;
}

/* Bolhas de mensagem — cantos arredondados assimétricos (estilo chat
   moderno) e leve brilho quando é uma mensagem destacada/menção. */
.message { border-radius: 0 14px 14px 14px !important; }
.message.mention-me, .message.pv2-mention-glow {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(139,45,255,.14)) !important;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),.22) !important;
}

/* Tela de login/cadastro — fundo com a mesma identidade vibrante, card em
   vidro fosco com cantos bem arredondados. */
.auth-screen { background: var(--bg-app) !important; }
.auth-bg-overlay {
  background:
    radial-gradient(circle at 15% 15%, rgba(255,45,135,.28), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(45,123,255,.26), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(139,45,255,.3), transparent 55%) !important;
}
.auth-card {
  /* CORRIGIDO ("ficou bugado"): estava usando --vibrant-glass-strong (8% de
     opacidade) — vidro fosco demais pro fundo com os blobs de cor atrás,
     deixava as bolhas rosa/azul "vazando" feio por cima dos campos. Volta a
     ser um painel escuro de verdade (só levemente translúcido) com blur,
     mantendo o visual "vidro" sem comprometer a leitura. */
  background: rgba(13, 8, 24, 0.86) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
  clip-path: none !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45) !important;
}
.auth-hero-title-gradient, .auth-card-title {
  background: var(--gradient-brand) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.auth-tabs { border-radius: 14px !important; overflow: hidden; }

/* Scrollbar com a mesma identidade de cor, mais fina e arredondada. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  border-radius: 10px;
}
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   LOGIN INTERATIVO — repaginada da tela de autenticação (só CSS/JS visual,
   nenhuma rota ou validação muda). Pedido: "bem interativo e bonito" — ideia
   aqui é dar vida de verdade: blobs de gradiente se movendo atrás do card,
   o card reagindo ao mouse (leve 3D), campos com glow ao focar, botão com
   brilho pulsante, e o logo "respirando". ========================== */

/* Blobs de gradiente grandes, desfocados, se movendo devagar atrás do card
   — dá profundidade e cor sem atrapalhar a leitura (ficam bem borrados). */
.auth-screen::before, .auth-screen::after {
  content: '';
  position: fixed;
  width: 640px; height: 640px;
  border-radius: 50%;
  filter: blur(130px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.32; /* CORRIGIDO: estava muito forte (.55), vazava demais por trás do card */
}
.auth-screen::before {
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  top: -220px; left: -160px;
  animation: authBlobFloat1 16s ease-in-out infinite;
}
.auth-screen::after {
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
  bottom: -260px; right: -180px;
  animation: authBlobFloat2 18s ease-in-out infinite;
}
@keyframes authBlobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
}
@keyframes authBlobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -35px) scale(1.1); }
}

/* Card com leve perspectiva 3D — o JS (initAuthInteractive) atualiza
   --tiltx/--tiltY conforme o mouse se move por cima do card. */
.auth-split {
  transform: perspective(1200px) rotateX(var(--tiltY, 0deg)) rotateY(var(--tiltX, 0deg));
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.auth-split:hover {
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px rgba(var(--accent-rgb), 0.22);
}

/* Logo "respirando" — pulso bem sutil, contínuo, chama atenção sem cansar. */
.auth-logo-badge, .auth-hero-brand-logo {
  animation: authLogoBreathe 3.2s ease-in-out infinite;
}
@keyframes authLogoBreathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--accent-rgb),0)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),0.55)); }
}

/* Campos de formulário — moldura acende e o ícone "pula" de leve ao focar,
   em vez de só trocar a cor da borda (feedback mais vivo). */
.input-icon-wrap {
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.input-icon-wrap:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3), 0 0 0 2px rgba(var(--accent-rgb), 0.45);
  border-color: var(--accent) !important;
}
.input-icon-wrap:focus-within svg, .input-icon-wrap:focus-within .ng-icon-wrap {
  transform: scale(1.15);
  color: var(--accent);
}
.input-icon-wrap svg, .input-icon-wrap .ng-icon-wrap { transition: transform 0.2s ease, color 0.2s ease; }

/* CORRIGIDO ("arruma as cores"): o Chrome força fundo branco/amarelo nos
   campos com preenchimento automático (usuário/senha salvos), ignorando
   qualquer CSS normal — ficava um retângulo branco berrando no meio do
   card escuro. Esse truque (sombra interna gigante + delay enorme na
   transição) é o único jeito de sobrescrever isso de verdade. */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(30, 18, 46, 0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(30, 18, 46, 0.95) inset !important;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}

/* Harmoniza a cor da foto do personagem (tons ciano/azul originais) com a
   nova identidade rosa/roxo — um tingimento leve por cima, sem perder a
   imagem, só deixando-a "da mesma família de cor" do resto da tela. */
.auth-hero-img { filter: saturate(0.9) hue-rotate(-8deg); }
.auth-hero-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,45,135,0.16), rgba(139,45,255,0.1) 50%, rgba(45,123,255,0.14));
  mix-blend-mode: color;
  pointer-events: none;
}

/* Abas Entrar/Criar conta — a ativa ganha sublinhado em degradê animado. */
.auth-tab { position: relative; overflow: visible; }
.auth-tab.active::after {
  content: '';
  position: absolute; left: 10%; right: 10%; bottom: -2px; height: 3px;
  border-radius: 4px;
  background: var(--gradient-brand);
  animation: authTabIn 0.3s ease;
}
@keyframes authTabIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Botão principal — brilho pulsante contínuo (bem sutil) + "zoom" de verdade
   no hover, pra parecer clicável de longe. */
.btn-register, #form-login button[type="submit"] {
  position: relative;
  animation: authBtnGlow 2.4s ease-in-out infinite;
}
@keyframes authBtnGlow {
  0%, 100% { box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.35); }
  50% { box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.6); }
}
.btn-register:hover, #form-login button[type="submit"]:hover {
  transform: translateY(-2px) scale(1.015);
}

/* Trust badges (BLUEX, etc.) — aparecem com leve "flutuação" individual,
   dessincronizada entre si, pra não parecer tudo travado no mesmo compasso. */
.auth-trust-badge:nth-child(1) { animation: authFloat 4s ease-in-out infinite; }
.auth-trust-badge:nth-child(2) { animation: authFloat 4s ease-in-out infinite 0.6s; }
.auth-trust-badge:nth-child(3) { animation: authFloat 4s ease-in-out infinite 1.2s; }
@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen::before, .auth-screen::after,
  .auth-logo-badge, .auth-hero-brand-logo,
  .btn-register, #form-login button[type="submit"],
  .auth-trust-badge:nth-child(1), .auth-trust-badge:nth-child(2), .auth-trust-badge:nth-child(3) {
    animation: none !important;
  }
  .auth-split { transform: none !important; }
}

/* ==========================================================================
   RESPONSIVO — CELULAR (sem precisar instalar nada, direto pelo navegador)
   ==========================================================================
   O app inteiro (fora a tela de login, que já tinha um breakpoint próprio)
   era desktop-only: sidebar de navegação (260px) + lista de canais (240px)
   + painel de membros (220px) lado a lado, sem sobrar quase nada pra tela
   principal numa tela de ~375-430px. Em vez de espremer as 3 colunas, elas
   viram "gavetas" que deslizam por cima do conteúdo (igual o app do
   Discord/Instagram no celular) — abre uma de cada vez, fecha tocando fora
   ou no X. Acima de 768px nada muda, continua exatamente como era. */
.mobile-only { display: none; }
.mobile-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 45; }

@media (max-width: 768px) {
  .mobile-only { display: flex; }

  /* Sidebar de navegação (logo, Início/Amigos/Chat, servidores, rodapé) —
     vira uma gaveta que desliza da esquerda, aberta pelo botão ☰ no topo. */
  .app-sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; z-index: 50; max-width: 82vw;
    transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 2px 0 24px rgba(0,0,0,0.4);
  }
  .app-sidebar.mobile-open { transform: translateX(0); }

  /* Lista de canais do servidor — já era um "popup" que aparece/some
     (classe .hidden), só precisa ficar por CIMA do conteúdo em vez de
     espremer o chat quando aberta. */
  #channel-sidebar:not(.hidden) {
    position: fixed; top: 0; left: 0; height: 100dvh; width: 82vw; max-width: 320px; z-index: 48;
    box-shadow: 2px 0 24px rgba(0,0,0,0.4);
  }

  /* Painel de membros — mesma ideia, vira gaveta da direita. */
  #members-panel:not(.hidden) {
    position: fixed; top: 0; right: 0; height: 100dvh; width: 78vw; max-width: 280px; z-index: 48;
    box-shadow: -2px 0 24px rgba(0,0,0,0.4);
  }

  /* Barra de topo mais enxuta — cabe o ☰, a busca e o sino sem espremer. */
  .top-navbar { padding: 0 10px; gap: 8px; height: 52px; }
  .navbar-search { flex: 1; min-width: 0; }
  .navbar-search input::placeholder { font-size: 11px; }

  /* Cabeçalho do canal — ícones de ação (buscar, fixados, membros...) numa
     fileira que pode quebrar linha em vez de cortar/empurrar pra fora. */
  .main-header { flex-wrap: wrap; height: auto; min-height: 52px; padding: 8px 10px; gap: 6px; }

  /* Grade de vídeo da chamada — tiles menores, senão 2-3 pessoas já force
     rolagem horizontal numa tela de celular. */
  .video-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: 120px; gap: 8px; }

  /* Cartões/formulários largos (modais) não devem ultrapassar a tela. */
  .modal-card, .modal-card-wide { width: 92vw; max-width: 420px; }

  /* Mensagens e anexos de imagem ocupam a largura disponível em vez de um
     tamanho fixo pensado pra tela grande. */
  .message-attachment-image { max-width: 78vw; }
  .message-attachment-card { max-width: 78vw; }
}

@media (max-width: 480px) {
  /* Telas bem pequenas: aperta mais um pouco a barra de topo e some com o
     texto do campo de busca (o ícone de lupa já dá o contexto). */
  .top-navbar { gap: 6px; }
  .navbar-search input { font-size: 12px; }
  .video-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: 100px; }
}

/* ==========================================================================
   MUDANÇA ESTRUTURAL DE VERDADE — não é só cor. Formato de card diferente
   (canto cortado, tipo HUD de jogo, não retângulo arredondado comum),
   fonte diferente de verdade nos títulos, botões com outro formato
   (também cantos cortados, maiúsculo, mais peso). Fica por último de
   propósito — é a versão que vale. Nenhum HTML/JS foi tocado, só isso aqui. */

h1, h2, h3, .home-tournament-banner-text h2, .home-section-title,
.sidebar-header-identity, #active-server-name, .modal-card h2,
.auth-brand h1, .navbar-chip-username, #navbar-chip-username {
  font-family: 'Rajdhani', -apple-system, sans-serif !important;
  font-weight: 700 !important;
}
body, input, textarea, button, .message-content, .home-partner-game-info span {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.home-tournament-banner-text h2 { font-size: 32px !important; letter-spacing: 0.01em; }
.home-section-title {
  font-family: 'Rajdhani', sans-serif !important; font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase;
}

/* Cards com canto cortado (clip-path) em vez de border-radius comum — dá
   uma "cara" de painel de jogo/HUD, bem diferente de um retângulo liso. */
.home-side-card, .home-partner-game-card, .home-server-card, .explore-card,
.home-quick-action, .tournament-card {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  border-radius: 0 !important;
  position: relative;
}
/* Cantos cortados ganham uma linha neon fina, reforçando o corte (sem isso
   o clip-path sozinho fica com uma quina "crua"). */
.home-side-card::after, .home-partner-game-card::after, .home-server-card::after,
.explore-card::after, .home-quick-action::after, .tournament-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.35);
}

/* Botões de destaque — mesmo corte de canto, maiúsculo, mais peso e
   espaçamento entre letras (em vez de pílula arredondada comum). */
.navbar-create-btn, .wizard-next-btn, .btn-register,
.modal-actions button[type="submit"], .modal-actions button.primary, .home-btn-primary {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
  border-radius: 0 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important; font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important; font-size: 13.5px !important;
}
.home-btn-secondary {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
  border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important;
  font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important;
}

/* Ícone de servidor — anel duplo (linha fina por fora, espaço, ícone
   dentro) em vez do círculo/squircle liso comum. */
.server-icon {
  box-shadow: 0 0 0 2px var(--bg-rail), 0 0 0 3px rgba(var(--accent-rgb),0.4) !important;
}
.server-icon.active, .server-icon:hover {
  box-shadow: 0 0 0 2px var(--bg-rail), 0 0 0 3px var(--accent), 0 0 16px rgba(var(--accent-rgb),0.5) !important;
}

/* Canal ativo — colchete nos dois lados do texto em vez de barra lateral
   ou fundo cheio (referência HUD: "[ geral ]"). */
.channel-item.active {
  background: transparent !important; box-shadow: none !important;
  position: relative; padding-left: 14px !important; padding-right: 14px !important;
}
.channel-item.active::before {
  content: '['; position: absolute; left: 2px; color: var(--accent); font-weight: 700; font-family: monospace;
}
.channel-item.active::after {
  content: ']'; position: absolute; right: 2px; color: var(--accent); font-weight: 700; font-family: monospace;
}

/* Barra de escrever mensagem — mesmo corte de canto no input, moldura fina. */
.message-form input[type="text"] {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
  border-radius: 0 !important;
}
.message-form button[type="submit"] {
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
  border-radius: 0 !important;
}

/* Correção: os botões circulares dos seletores de emoji (escolher ícone do
   servidor e escolher avatar de emoji) têm a cor de fundo aplicada direto
   por JavaScript (#5865f2, o azul antigo) — isso não é lido do CSS, por
   isso ficaram destoando do resto do tema mesmo depois de eu trocar tudo
   o mais. Como não vou mexer no .js, forço a cor aqui com !important, que
   tem prioridade sobre o style inline definido pelo JavaScript. */
#server-icon-row button, #server-info-icon-row button, #avatar-emoji-row button {
  background: var(--gradient-brand) !important;
}

/* Menus flutuantes — corte de canto também, consistência com o resto. */
.footer-more-menu, .navbar-create-menu, .navbar-search-dropdown, .sidebar-more-menu, .modal-card {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  border-radius: 0 !important;
}