/* perfil.css — modais "Meu Perfil", "Alterar Informações" e "Meu Histórico".
   Reaproveitam .modal-auth / .auth-card / .modal-auth-fechar / .auth-logo-titulo
   / .auth-divisor / .auth-label / .auth-input (de auth.css). */

.perfil-card    { max-width: 560px; text-align: left; padding: 32px 38px 30px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.editar-card    { max-width: 600px; text-align: left; padding: 30px 36px 26px; max-height: 90vh; overflow-y: auto; }
.historico-card { max-width: 620px; text-align: left; padding: 30px 38px 28px; max-height: 90vh; display: flex; flex-direction: column; }

/* ── Topo: avatar + identidade + lápis ── */
.perfil-topo { display: flex; align-items: center; gap: var(--sp-6); margin: 0.3rem 0 0.4rem; }
.perfil-avatar {
  width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent, #2BD46A); color: #06210f;
  font-family: 'Archivo Black', sans-serif; font-size: var(--fs-xl);
}
.perfil-id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.perfil-nome-topo { display: flex; align-items: center; gap: var(--sp-3); }
.perfil-username { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-lg); color: var(--txt); }
.perfil-editar-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  display: inline-flex; color: var(--txt-soft, #9aa6b2); transition: color 0.15s ease;
}
.perfil-editar-btn svg { width: 16px; height: 16px; }
.perfil-editar-btn:hover { color: var(--accent, #2BD46A); }
.perfil-email { font-size: var(--fs-sm); color: var(--txt-soft, #9aa6b2); word-break: break-all; }
.perfil-nome-time-txt { font-size: var(--fs-sm); color: var(--txt-soft); }

/* Botão de sair (logout) ao lado das infos do usuário, empurrado para a direita. */
.perfil-logout-btn {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: transparent; cursor: pointer;
  color: var(--txt-soft, #9aa6b2);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-md);
  padding: 0.5rem 0.9rem;
  font-family: 'Archivo', sans-serif; font-weight: var(--peso-forte); font-size: var(--fs-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.perfil-logout-btn svg { width: 17px; height: 17px; }
.perfil-logout-btn:hover { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 55%, transparent); background: color-mix(in srgb, var(--perigo) 8%, transparent); }

/* ── Divisor "Estatísticas" (linha com rótulo centralizado) ── */
.perfil-sep {
  display: flex; align-items: center; gap: var(--sp-5);
  margin: 1.1rem 0 0.75rem; color: var(--txt-soft, #9aa6b2);
}
.perfil-sep::before, .perfil-sep::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.perfil-sep span { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-sm); letter-spacing: 0.05em; }

/* ── Estatísticas por tópico (sem caixa) ── */
.perfil-acordeoes {
  display: flex; flex-direction: column; gap: var(--sp-3);
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.35rem;
  scrollbar-width: thin; scrollbar-color: var(--txt-fraco) transparent;
}
/* Scrollbar discreto e semi-transparente (padrão do app) */
.perfil-acordeoes::-webkit-scrollbar,
.historico-lista::-webkit-scrollbar { width: 8px; }
.perfil-acordeoes::-webkit-scrollbar-track,
.historico-lista::-webkit-scrollbar-track { background: transparent; }
.perfil-acordeoes::-webkit-scrollbar-thumb,
.historico-lista::-webkit-scrollbar-thumb {
  background: var(--txt-fraco);
  border-radius: var(--raio-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.perfil-acordeoes::-webkit-scrollbar-thumb:hover,
.historico-lista::-webkit-scrollbar-thumb:hover { background: var(--txt-soft); background-clip: padding-box; }

/* Cada categoria é uma seção expansível: cabeçalho clicável + corpo que abre/fecha. */
.perfil-acord { border-bottom: 1px solid var(--linha); }
.acord-head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-4);
  background: none; border: none; cursor: pointer;
  padding: 0.7rem 0.1rem; text-align: left; color: var(--txt);
}
.acord-nome { flex: 1; font-family: 'Archivo Black', sans-serif; font-size: var(--fs-lg); color: var(--txt); }
.acord-tag { font-family: 'Archivo', sans-serif; font-weight: var(--peso-normal); font-size: var(--fs-mini); color: var(--txt-soft, #9aa6b2); }
.acord-seta { width: 18px; height: 18px; color: var(--txt-soft, #9aa6b2); flex: 0 0 auto; transition: transform 0.2s ease; }
.acord-aberta .acord-seta { transform: rotate(180deg); }
.acord-head:hover .acord-nome { color: var(--accent, #2BD46A); }
.acord-head:hover .acord-seta { color: var(--accent, #2BD46A); }
/* Corpo: escondido por padrão; aparece só quando a seção tem .acord-aberta.
   (display none/grid é à prova de navegador — a animação por grid-template-rows:0fr
   vazava em alguns browsers, deixando os stats visíveis com a seção fechada.) */
.acord-corpo { display: none; }
.acord-aberta .acord-corpo { display: block; }
.acord-vazio { color: var(--txt-soft, #9aa6b2); font-size: var(--fs-sm); padding: 0.1rem 0 0.7rem; }
.acord-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); padding-bottom: 0.9rem; }

.perfil-stat {
  position: relative;
  background: var(--elev-1); border: 1px solid var(--linha);
  border-radius: var(--raio-md); padding: 0.55rem 0.3rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
/* Cursor padrão: os blocos não são clicáveis nem interativos — o `cursor: help` (a setinha com "?")
   só confundia. O tooltip aparece no hover de qualquer jeito. */
.perfil-stat[data-tip] { cursor: default; }
/* Tooltip explicativo instantâneo, acima do bloco (padrão do mapa de escalados). */
.perfil-stat[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 220px; white-space: normal; text-align: center;
  padding: 6px 10px; border-radius: var(--raio-sm, 6px);
  background: rgba(10, 12, 16, 0.98); border: 1px solid var(--accent, #2BD46A);
  color: #fff; font-family: 'Archivo', sans-serif; font-size: var(--fs-mini); font-weight: 500; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5); pointer-events: none; z-index: 30;
}
.perfil-stat-num { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-md); color: var(--txt); }
.perfil-stat-lbl { font-size: var(--fs-legenda); color: var(--txt-soft, #9aa6b2); text-align: center; }

.perfil-carregando, .perfil-vazio { color: var(--txt-soft, #9aa6b2); font-size: var(--fs-sm); text-align: center; padding: 0.9rem 0; }
.perfil-msg { font-size: var(--fs-sm); margin: 0.6rem 0 0; color: var(--accent, #2BD46A); }
.perfil-msg-erro { color: var(--perigo); }

/* ── Modal Alterar Informações ── */
.editar-topo { display: flex; justify-content: center; margin: 0.2rem 0 0.9rem; }
.editar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) 0.9rem; }
.editar-full { grid-column: 1 / -1; }
/* gap --sp-2 (0.4rem = 6.4px) entre label e input. Antes era --sp-1 e o label trazia
   `margin-bottom: -6px` do auth.css: 4.8 - 6 = -1.2px, ou seja, encostava. Com a margem
   negativa fora do label, o gap sozinho manda — e o valor é legível. */
.editar-campo { display: flex; flex-direction: column; gap: var(--sp-2); }
.editar-campo .auth-input { margin: 0; }
.editar-sep-senha {
  display: flex; align-items: center; gap: var(--sp-5);
  color: var(--txt-soft, #9aa6b2); font-size: var(--fs-mini); margin-top: 0.35rem;
}
.editar-sep-senha::before, .editar-sep-senha::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.editar-acoes { display: flex; gap: var(--sp-6); margin-top: 1.3rem; }
/* Anula o width:100%/display:block do .btn-rolar para os dois dividirem o espaço. */
.editar-acoes .btn-rolar,
.editar-acoes .btn-secundario {
  flex: 1 1 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.2rem;
  font-size: var(--fs-base);
  white-space: nowrap;
}

/* ── Histórico ── */
.historico-lista {
  display: flex; flex-direction: column; gap: var(--sp-3);
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.35rem; margin-top: 0.3rem;
  scrollbar-width: thin; scrollbar-color: var(--txt-fraco) transparent;
}
.historico-vazio { color: var(--txt-soft, #9aa6b2); font-size: var(--fs-base); text-align: center; padding: 1.5rem 0.5rem; }
.hist-item {
  background: var(--elev-1); border: 1px solid var(--linha);
  border-radius: var(--raio-md); padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: var(--sp-2);
}
.hist-item-campeao { border-color: rgba(217, 178, 90, 0.55); background: rgba(217, 178, 90, 0.08); }
.hist-topo { display: flex; align-items: center; gap: var(--sp-3); }
.hist-comp { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-base); color: var(--txt); flex: 1; }
.hist-modo {
  font-size: var(--fs-legenda); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--txt-soft, #9aa6b2); border: 1px solid var(--linha);
  border-radius: var(--raio-pill); padding: 0.12rem 0.55rem;
}
.hist-data { font-size: var(--fs-mini); color: var(--txt-soft, #9aa6b2); }
.hist-linha { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-sm); flex-wrap: wrap; }
.hist-record b { font-family: 'Archivo Black', sans-serif; }
.hist-v { color: var(--accent); }
.hist-e { color: var(--ouro); }
.hist-d { color: var(--perigo); }
.hist-gols { color: var(--txt); }
.hist-gols i { color: var(--txt-soft, #9aa6b2); font-style: normal; }
.hist-campeao { color: var(--ouro); font-family: 'Archivo Black', sans-serif; font-size: var(--fs-sm); margin-left: auto; }
.hist-pos { color: var(--txt-soft, #c2ccd6); font-size: var(--fs-sm); margin-left: auto; }

/* Botão "Ver resumo" da campanha (dentro de cada item do histórico) */
.hist-resumo-btn {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-mini);
  font-weight: var(--peso-medio);
  padding: 0.32rem 0.8rem;
  border-radius: var(--raio-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.hist-resumo-btn svg { width: 13px; height: 13px; }

/* ── Responsivo ── */
@media (max-width: 600px) {
  .perfil-card, .editar-card, .historico-card { padding: 28px 20px 24px; }
  .acord-stats   { grid-template-columns: repeat(2, 1fr); }
  .editar-grid   { grid-template-columns: 1fr; }
  .perfil-logout-txt { display: none; }
  .perfil-logout-btn { padding: 0.5rem 0.6rem; }
}

/* ── Zona de perigo: excluir conta (LGPD) ── */
.editar-zona-perigo { margin-top: 1.6rem; }
.zona-perigo-titulo {
  font-family: 'Archivo', sans-serif; font-weight: var(--peso-forte);
  font-size: var(--fs-mini); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--perigo); margin: 0.4rem 0 0.4rem;
}
.zona-perigo-texto { font-size: var(--fs-mini); color: var(--txt-soft, #9aa6b2); margin: 0 0 0.8rem; line-height: 1.45; }
.btn-excluir-conta {
  font-family: 'Archivo', sans-serif; font-weight: var(--peso-forte); font-size: var(--fs-sm);
  padding: 0.6rem 1.1rem; border-radius: var(--raio-md); cursor: pointer;
  color: var(--perigo); background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--perigo) 55%, transparent);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-excluir-conta:hover { background: var(--perigo); color: #1a0606; border-color: var(--perigo); }
.btn-excluir-conta:disabled { opacity: 0.6; cursor: default; }
.excluir-aviso { font-size: var(--fs-sm); color: var(--txt-soft); line-height: 1.5; margin: 0 0 1rem; }
.excluir-card .editar-acoes { margin-top: 1.2rem; }

/* ═══════════════════════════════════════════════════════════════════
   TELA DE PERFIL (tela cheia com abas) — Fase 1 das conquistas
   Reaproveita .perfil-topo/.perfil-avatar/.perfil-acordeoes/.historico-lista existentes.
   ═══════════════════════════════════════════════════════════════════ */
.perfil-tela-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.4rem 1.6rem 2.5rem;
}
/* A .tela base centraliza vertical/horizontalmente (splash). A tela de Perfil é uma página de
   conteúdo: começa do topo e ocupa a largura, como as telas de jogo/simulação. Sem isto, o
   conteúdo fica espremido no centro com aparência de "modal compacto". */
#tela-perfil {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
}

/* Estatísticas: as seções expansíveis empilham; ao abrir, os stats se distribuem em 4 colunas
   (a coluna esquerda das 2 colunas comporta 4 confortavelmente). */
.perfil-tela-wrap #perfil-acordeoes {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.perfil-tela-wrap .acord-stats {
  grid-template-columns: repeat(4, 1fr);
}
/* Em telas estreitas, cai para 2. */
@media (max-width: 600px) {
  .perfil-tela-wrap .acord-stats { grid-template-columns: repeat(2, 1fr); }
}
.perfil-tela-topo { margin-bottom: 1.2rem; }

/* Escudo do perfil — só na TELA (não no modal): maior, na altura do bloco
   nome+email+time ao lado. O SVG do escudo preenche 100%, então acompanha. */
#tela-perfil .perfil-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.7rem;   /* a inicial (quando não há escudo) acompanha o tamanho maior */
}
/* O lápis "editar escudo" acompanha o avatar maior. */
#tela-perfil .perfil-avatar-editavel::after {
  width: 24px; height: 24px;
  font-size: 13px; line-height: 22px;
  right: -3px; bottom: -3px;
}

/* ── Estatísticas em 2 colunas: acordeão (esq) + time mais escalado (dir) ── */
.perfil-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 2rem;
  align-items: start;
}
/* Dentro da coluna esquerda (mais estreita que a tela toda), os stats cabem em 4 colunas. */
.perfil-cols .perfil-tela-wrap .acord-stats,
.perfil-cols .acord-stats { grid-template-columns: repeat(4, 1fr); }

/* Coluna do time mais escalado */
.perfil-col-escalados { position: sticky; top: 1rem; }
.perfil-escalados-titulo {
  font-family: 'Archivo Black', sans-serif; font-size: var(--fs-sm);
  letter-spacing: 1.5px; color: var(--txt); text-align: center; margin: 0 0 0.8rem;
}
.perfil-campo-escalados {
  position: relative; width: 100%; aspect-ratio: 3 / 4; margin: 0 auto;
  border-radius: var(--raio-md); overflow: hidden;
  border: 1px solid rgba(0,0,0,0.4);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 8%, rgba(0,0,0,0.05) 8% 16%),
    linear-gradient(165deg, #2f7a37, #1e5224);
  box-shadow: inset 0 0 34px rgba(0,0,0,0.3);
}
.pce-linha-meio { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255,255,255,0.3); }
.pce-circulo {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px;
  transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;
}
.pce-area { position: absolute; left: 50%; transform: translateX(-50%); width: 54%; height: 13%; border: 2px solid rgba(255,255,255,0.26); }
.pce-area-cima  { top: 0;    border-top: none; }
.pce-area-baixo { bottom: 0; border-bottom: none; }
.pce-jogador {
  position: absolute; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 2; cursor: default;
}
/* Os filhos não capturam o hover — assim o container (com o tooltip) sempre recebe. */
.pce-jogador > * { pointer-events: none; }
/* Tooltip instantâneo com a contagem de escalações (data-tip), acima do jogador. */
.pce-jogador:hover { z-index: 20; }
.pce-jogador[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 5px 9px; border-radius: var(--raio-sm, 6px);
  background: rgba(10, 12, 16, 0.97); border: 1px solid var(--accent, #2BD46A);
  color: #fff; font-family: 'Archivo', sans-serif; font-size: var(--fs-mini); font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5); pointer-events: none; z-index: 21;
}
/* Nas bordas, o tooltip alinha pelo lado do jogador (evita estourar o campo e cortar). */
.pce-jogador.tip-esq[data-tip]:hover::after { left: 0; transform: none; }
.pce-jogador.tip-dir[data-tip]:hover::after { left: auto; right: 0; transform: none; }
/* Jogadores do topo: tooltip abre para BAIXO (o campo tem overflow:hidden e cortaria em cima). */
.pce-jogador.tip-baixo[data-tip]:hover::after { bottom: auto; top: calc(100% + 6px); }
.pce-marca {
  /* 30px→36px e a fonte sai de --fs-micro (0.56rem ≈ 9px, o menor token da escala) para
     --fs-legenda. O micro foi feito para mini-label em card compacto; aqui o mapa ocupa
     meia tela e o nome ficava ilegível sem aproximar. */
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); border: 1.5px solid var(--accent, #2BD46A); color: #fff;
  font-family: 'Archivo Black', sans-serif; font-size: var(--fs-legenda); letter-spacing: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4); transition: transform 0.12s ease;
}
.pce-jogador:hover .pce-marca { transform: scale(1.12); }
.pce-vazio .pce-marca { border-color: rgba(255,255,255,0.35); color: var(--txt-soft, #9aa6b2); background: rgba(0,0,0,0.4); }
.pce-nome {
  font-size: var(--fs-mini); font-weight: 600; color: #fff; line-height: 1.15; white-space: nowrap;
  padding: 2px 6px; border-radius: var(--raio-xs, 4px);
  background: rgba(0,0,0,0.55); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  max-width: 104px; overflow: hidden; text-overflow: ellipsis;
}
.perfil-escalados-sel { justify-content: center; margin-top: 0.9rem; }
.perfil-escalados-vazio {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.4rem; color: rgba(255,255,255,0.85); font-size: var(--fs-sm); line-height: 1.5;
}

/* Empilha as 2 colunas em telas médias/estreitas */
@media (max-width: 900px) {
  .perfil-cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .perfil-col-escalados { position: static; max-width: 380px; margin: 0 auto; width: 100%; }
}

/* Barra de abas — mesmo idioma visual das abas do online (.rodada-tab) */
.perfil-abas {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.perfil-aba {
  background: var(--elev-1);
  border: 1px solid var(--linha);
  color: var(--txt-soft);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.5px;
  padding: 0.5rem 1.3rem;
  border-radius: var(--raio-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.perfil-aba:hover { background: var(--elev-2); }
.perfil-aba-ativa { background: var(--accent, #2BD46A); border-color: var(--accent, #2BD46A); color: var(--bg, #0E0F13); }

/* Painéis de aba */
.perfil-painel { animation: perfilFade 0.2s ease; }
@keyframes perfilFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Na tela cheia, a lista de estatísticas/histórico pode usar mais altura que no modal antigo */
.perfil-tela-wrap .perfil-acordeoes,
.perfil-tela-wrap .historico-lista { max-height: none; overflow: visible; }

/* ═══════════════════════════════════════════════════════════════════
   ABA DE CONQUISTAS — Fase 2 (cards por categoria)
   ═══════════════════════════════════════════════════════════════════ */
.conq-cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.conq-cab-titulo { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-lg); color: var(--txt); }
.conq-cab-total  { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-lg); color: var(--accent, #2BD46A); }

.conq-categoria { margin-bottom: 1.6rem; }
.conq-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.7rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linha);
}
.conq-cat-nome { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.5px; color: var(--txt-soft); text-transform: uppercase; }
.conq-cat-prog { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: var(--fs-sm); color: var(--txt-soft, #9aa6b2); }

.conq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}

.conq-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.9rem 0.85rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  background: var(--elev-1);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.conq-icone { width: 26px; height: 26px; margin-bottom: 0.2rem; }
.conq-icone svg { width: 100%; height: 100%; }
.conq-nome { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-sm); line-height: 1.15; }
.conq-desc { font-size: var(--fs-mini); color: var(--txt-soft, #9aa6b2); line-height: 1.25; }

/* Etiqueta de raridade no canto superior direito do card */
.conq-rar-tag {
  position: absolute; top: 0.55rem; right: 0.6rem;
  font-family: 'Archivo', sans-serif; font-weight: var(--peso-forte); font-size: 0.56rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--raio-pill, 999px);
  color: var(--rar-cor); border: 1px solid var(--rar-cor);
  background: color-mix(in srgb, var(--rar-cor) 12%, transparent);
}
/* Cor por nível de raridade (a var alimenta borda, tag e ícone quando desbloqueada) */
.conq-rar-comum    { --rar-cor: var(--rar-comum); }
.conq-rar-raro     { --rar-cor: var(--rar-raro); }
.conq-rar-epico    { --rar-cor: var(--rar-epico); }
.conq-rar-lendario { --rar-cor: var(--rar-lendario); }

/* Desbloqueada: a raridade domina a cor (borda/ícone/nome). */
.conq-desbloqueada { border-color: var(--rar-cor); background: color-mix(in srgb, var(--rar-cor) 8%, transparent); }
.conq-desbloqueada .conq-icone { color: var(--rar-cor); }
.conq-desbloqueada .conq-nome  { color: var(--txt); }
.conq-desbloqueada:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--rar-cor) 22%, transparent); }
/* Lendária desbloqueada: leve brilho para se destacar das demais. */
.conq-rar-lendario.conq-desbloqueada { box-shadow: 0 0 14px color-mix(in srgb, var(--rar-lendario) 30%, transparent); }

/* Bloqueada: esmaecida; a raridade fica discreta (só a tag mantém a cor). */
.conq-bloqueada { opacity: 0.5; }
.conq-bloqueada .conq-icone { color: var(--txt-soft, #9aa6b2); }
.conq-bloqueada .conq-nome  { color: var(--txt-soft); }

/* ═══════════════════════════════════════════════════════════════════
   TOAST DE CONQUISTA (estilo Steam) — Fase 4
   Canto inferior direito, com fila. Fixo na viewport, acima de tudo.
   ═══════════════════════════════════════════════════════════════════ */
.conq-toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.conq-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 340px;
  padding: 14px 16px;
  background: #141414;
  border: 1px solid rgba(43,212,106,0.5);
  border-left: 4px solid var(--accent, #2BD46A);
  border-radius: var(--raio-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), opacity 0.35s ease;
}
.conq-toast-visivel { transform: translateX(0); opacity: 1; }
.conq-toast-icone {
  flex: none;
  width: 34px; height: 34px;
  color: var(--accent, #2BD46A);
}
.conq-toast-icone svg { width: 100%; height: 100%; }
.conq-toast-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.conq-toast-titulo {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: var(--fs-mini);
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent, #2BD46A);
}
.conq-toast-nome  { font-family: 'Archivo Black', sans-serif; font-size: var(--fs-sm); color: #fff; }
.conq-toast-desc  { font-size: var(--fs-mini); color: var(--txt-soft, #9aa6b2); line-height: 1.25; }

/* ═══════════ EDITOR DE ESCUDO ═══════════
   O avatar vira botão SÓ para quem tem conta: convidado não tem onde salvar.
   Quem nunca editou continua com o círculo verde da inicial — opt-in. */
.perfil-avatar-editavel { cursor: pointer; position: relative; }
.perfil-avatar-editavel::after {
  content: '✎';
  position: absolute; right: -2px; bottom: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); color: var(--ouro);
  border: 1px solid var(--ouro);
  font-size: 10px; line-height: 16px; text-align: center;
  opacity: 0; transition: opacity .15s;
}
.perfil-avatar-editavel:hover::after,
.perfil-avatar-editavel:focus-visible::after { opacity: 1; }
.perfil-avatar-editavel:hover { filter: brightness(1.12); }

/* Com escudo o avatar deixa de ser círculo: o SVG traz a própria silhueta. */
.perfil-avatar-escudo { background: none !important; border: none !important; padding: 0; }
.perfil-avatar-escudo svg { width: 100%; height: 100%; display: block; }

.escudo-box { max-width: 500px; width: min(94vw, 500px); }
/* Preview do escudo no TOPO, centralizado — fica FORA da área que rola (via JS o
   #escudo-preview é irmão de .escudo-corpo), então permanece visível enquanto se
   escolhe formato e cores. */
.escudo-preview { width: 116px; flex: 0 0 auto; margin: 0.2rem auto 0.9rem; }
.escudo-preview svg { width: 100%; height: auto; display: block; }
.escudo-corpo { text-align: left; }
/* O modal agora é estreito (~500px) e abraça o conteúdo, então os controles
   preenchem a largura — sem faixas vazias nas laterais. */
.escudo-controles { width: 100%; min-width: 0; text-align: left; }
.escudo-pads { margin-bottom: 1rem; gap: 6px; }
.escudo-controles .jogo-rotulo { margin: 0 0 .45rem; }
#escudo-bloco-tri { margin: 0; }

/* GRADE, não flex-wrap: com 16 (e 17 na 3ª cor) os itens quebravam em fileiras de
   tamanhos diferentes e as três seções ficavam desalinhadas entre si. */
.escudo-paleta {
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: 6px; margin: 0 0 1rem;
}
.escudo-cor {
  width: 100%; aspect-ratio: 1; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  box-shadow: inset 0 0 0 1px var(--linha);
  transition: transform .1s ease;
}
.escudo-cor-ativa { border-color: var(--ouro); transform: scale(1.1); }
.escudo-cor-nenhuma { background: transparent; color: var(--txt-soft); font-size: 12px; }

/* O modal precisa CABER e ROLAR. Sem max-height ele estoura a tela do celular: o rodapé
   com Cancelar/Salvar fica fora da área visível e não há como sair — só recarregando. */
.escudo-box { max-height: 90vh; display: flex; flex-direction: column; }
.escudo-corpo { flex: 1; min-height: 0; overflow-y: auto; }
.escudo-box .modal-confirm-acoes { flex-shrink: 0; }   /* os botões nunca somem */
/* Ações: "Sem escudo" (link discreto, terciário/destrutivo) à esquerda;
   Cancelar + Salvar (as ações de verdade) agrupados à direita. */
.escudo-box .escudo-acoes { justify-content: space-between; align-items: center; gap: 1rem; }
.escudo-acoes-btns { display: flex; gap: var(--sp-4, 12px); }
.escudo-acoes-btns .btn-rolar {
  flex: 0 0 auto; width: auto; max-width: none; padding: 0.5rem 1.2rem; font-size: 0.9rem;
}

@media (max-width: 620px) {
  .escudo-box { max-height: 92vh; width: 96vw; padding: 0.9rem; }
  .escudo-preview { width: 96px; }
  .escudo-paleta { grid-template-columns: repeat(8, 1fr); }
  /* Empilha: Cancelar/Salvar um sobre o outro (largura cheia); "Sem escudo" discreto embaixo. */
  .escudo-box .escudo-acoes { flex-direction: column-reverse; align-items: stretch; gap: 0.7rem; }
  .escudo-acoes-btns { flex-direction: column; width: 100%; }
  .escudo-acoes-btns .btn-rolar { width: 100%; }
  .escudo-acoes .acao-link { width: 100%; text-align: center; }
}