/* ─────────────────────────────────────────────────────────────────────────────────────────
   MURO DOS ALIADOS — o pódio grande e a lista, usados na página de Ranking e na de Apoio.

   Por que as classes são todas `m-`: este arquivo entra em páginas que já têm CSS próprio, e
   nomes como `.nome`, `.linha`, `.chip` e `.titulo` existem em mais de um lugar do site. Sem o
   prefixo, quem venceria a disputa dependeria da ordem dos <link> — que é exatamente o tipo de
   defeito que só aparece depois de publicado.

   As cores entram por variável para o muro seguir o tema da página onde estiver.
   ───────────────────────────────────────────────────────────────────────────────────────── */
.muro-raiz{
  --m-linha:rgba(255,255,255,.09);
  --m-fraco:#8b93a1;
  --m-tinta:#eef1f6;
  --m-ouro:#d9af52;
  --m-ouro2:#f0d089;
}

  /* ── 4. O MURAL ──────────────────────────────────────────────────────────────────────── */
  .m-muro{margin-top:16px;background:linear-gradient(180deg,rgba(217,175,82,.05),transparent 70%);
    border:1px solid var(--m-linha);border-radius:20px;padding:30px 24px 26px}
  .m-podio{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:18px;align-items:end}
  .m-lugar{position:relative;background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    border:1px solid var(--m-linha);border-radius:18px;padding:58px 62px 18px;
    display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;overflow:hidden}
  .m-lugar.m-p1{border-color:rgba(233,208,150,.5);padding-top:64px;
    background:linear-gradient(165deg,rgba(233,208,150,.14),rgba(217,175,82,.04) 60%,rgba(255,255,255,.02));
    box-shadow:0 0 0 1px rgba(233,208,150,.08),0 14px 44px -20px rgba(217,175,82,.8)}
  .m-lugar.m-p2{border-color:rgba(205,214,228,.34)}
  .m-lugar.m-p3{border-color:rgba(217,154,99,.34)}
  .m-manto{position:absolute;z-index:4;top:-8px;left:-12px;width:78px;height:74px;transform:rotate(-13deg);
    transform-origin:60% 0;filter:drop-shadow(3px 6px 8px rgba(0,0,0,.6));animation:balanca 6.5s ease-in-out infinite}
  .m-manto svg{width:100%;height:100%;display:block}
  @keyframes balanca{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(-9deg)}}
  .m-emblema{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:38px;height:38px;
    filter:drop-shadow(0 3px 9px rgba(0,0,0,.55));z-index:5}
  .m-lugar.m-p1 .m-emblema{width:46px;height:46px}
  .m-emblema svg{width:100%;height:100%;display:block}
  .m-lugar .m-redes-col{position:absolute;right:12px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:7px;align-items:center;z-index:6}
  .m-lugar .m-redes-col:empty{display:none}
  .m-rede{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;text-decoration:none;
    border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
    background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);transition:.15s}
  .m-rede:hover{background:color-mix(in srgb,var(--c) 32%,transparent);transform:translateY(-2px)}
  .m-rede svg{width:18px;height:18px}

  .m-moldura{position:relative;width:104px;height:104px;display:grid;place-items:center;flex:none}
  .m-lugar.m-p1 .m-moldura{width:126px;height:126px}
  .m-linha .m-moldura{width:56px;height:56px}
  .m-moldura .m-anel{position:absolute;inset:0;border-radius:50%;padding:4px;
    background:conic-gradient(from 0deg,var(--esc),var(--cla),var(--esc) 55%,var(--esc));
    animation:gira var(--vel,4s) linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
            mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px))}
  /* ── Por que o retrato é absoluto, e não `calc(100% - 12px)` ────────────────────────
     Com `height:calc(100% - 12px)` num filho de grid, a porcentagem depende da altura da linha
     — e a linha, sendo automática, se dimensiona pelo CONTEÚDO. Dá referência circular: o
     navegador desiste da porcentagem, mede a arte pela proporção natural dela e estica a linha
     até caber. Medido no ar: moldura de 104px com linha de 157px e a arte vazando 47px para
     fora do círculo, por cima do nome.

     O primeiro lugar parecia certo por acaso: a arte dele é quase quadrada, então a altura
     natural batia com a da moldura. Sorte, não acerto — e por isso só dois dos três quebravam.

     Posicionado, a porcentagem passa a medir contra a caixa da moldura, que é definida (104px
     ou 126px), e a imagem sai da conta da linha do grid. Fim da circularidade.

     `width:auto` aqui NÃO serve, e foi a primeira tentativa: numa imagem posicionada, `auto`
     devolve o tamanho NATURAL do arquivo em vez de esticar entre os lados. Medido: 371x635
     dentro de uma moldura de 104px. A porcentagem precisa ser dita. */
  .m-moldura .m-retrato{position:absolute;top:6px;left:6px;
    width:calc(100% - 12px);height:calc(100% - 12px);border-radius:50%;
    object-fit:cover;background:#0b0c0f;z-index:2}
  @keyframes gira{to{transform:rotate(360deg)}}
  .m-moldura::after{content:'';position:absolute;inset:-7px;border-radius:50%;z-index:0;
    background:radial-gradient(circle,var(--esc) 0%,transparent 68%);filter:blur(10px);opacity:.5;
    animation:pulsa 3.2s ease-in-out infinite}
  @keyframes pulsa{0%,100%{opacity:.38;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}
  /* Quando nao ha retrato (heroId ausente), a inicial ocupa o mesmo lugar da imagem — sem isso
     a moldura ficaria com um buraco redondo no meio. Mesmo recurso que ranking.js ja usava
     quando a imagem falha ao carregar. */
  .m-moldura .m-retrato-vazio{display:grid;place-items:center;background:#1b1f26;
    font-weight:900;font-size:1.4rem;color:var(--m-fraco)}
  .m-linha .m-moldura .m-retrato-vazio{font-size:.95rem}

  @media (prefers-reduced-motion:reduce){.m-anel,.m-moldura::after,.m-manto{animation:none!important}}

  .m-nome{font-size:1rem;font-weight:800}
  .m-lugar.m-p1 .m-nome{font-size:1.14rem}
  .m-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .m-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
    font-size:.65rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
    border:1px solid var(--c,rgba(255,255,255,.16));background:rgba(255,255,255,.05);color:var(--c,#c4cbd6)}
  .m-chip svg{width:13px;height:13px}
  .m-chip.m-solido{color:#17130a;border-color:transparent;background:linear-gradient(180deg,var(--c2),var(--c))}
  .m-titulo{font-family:Georgia,serif;font-style:italic;font-size:.85rem;color:var(--m-ouro2);line-height:1.4}
  .m-honras{display:flex;flex-wrap:wrap;gap:5px}
  .m-lugar .m-honras{justify-content:center}
  .m-honra{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
    font-size:.62rem;font-weight:800;white-space:nowrap;border:1px solid var(--c);
    background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c)}
  .m-honra svg{width:12px;height:12px}

  /* ── A caixa inteira abre o perfil ────────────────────────────────────────────────────
     Mesmo contrato da lista que ja esta no ar: o cartao carrega data-ranker-slug, e o
     ouvinte que community-profile.js prende no documento faz o resto -- clique e Enter/Espaco.
     Aqui so entra o que faz o alvo PARECER clicavel, que e o que faltava. */
  .m-lugar,.m-linha{cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s}
  .m-lugar:hover,.m-linha:hover{border-color:rgba(233,208,150,.55);transform:translateY(-2px)}
  .m-linha:hover{background:rgba(255,255,255,.045)}
  .m-lugar:focus-visible,.m-linha:focus-visible{outline:2px solid var(--m-ouro2);outline-offset:3px}
  /* Os botoes de rede sao alvos DENTRO do alvo: precisam continuar levando para fora. */
  .m-rede{position:relative;z-index:3}
  @media (prefers-reduced-motion:reduce){.m-lugar,.m-linha{transition:none}
    .m-lugar:hover,.m-linha:hover{transform:none}}

  .m-lista{display:flex;flex-direction:column;gap:10px;margin-top:22px}
  .m-linha{display:grid;grid-template-columns:40px 60px minmax(0,1fr) auto minmax(0,1fr) auto;
    gap:16px;align-items:center;padding:13px 18px;border:1px solid var(--m-linha);border-radius:14px;
    background:rgba(255,255,255,.025)}
  .m-linha .m-pos{grid-column:1;font-size:1.05rem;font-weight:900;color:var(--m-fraco);text-align:center;font-variant-numeric:tabular-nums}
  .m-linha .m-moldura{grid-column:2}
  .m-linha .m-id{grid-column:3;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left}
  .m-linha .m-redes-col{grid-column:4;display:flex;flex-direction:row;gap:7px;justify-content:center}
  .m-linha .m-patente{grid-column:6;display:flex;justify-content:center;min-width:116px}
  .m-linha .m-nome{font-size:.94rem}
  .m-linha .m-titulo{font-size:.8rem}

  /* Estados: os mesmos textos da página real. */

  .m-nota-podio{margin:0 0 14px;font-size:.8rem;color:var(--m-fraco);text-align:center}

  @media(max-width:900px){
    /* Empilhado, a ordem 2-1-3 do DOM colocaria o campeao no meio. No desktop essa ordem e o
       proprio desenho do podio; numa coluna so ela vira erro de leitura. A propriedade order corrige a
       apresentacao sem mexer no DOM, que continua sendo a ordem do podio. */
    .m-podio{grid-template-columns:1fr}
    .m-lugar.m-p1{order:1} .m-lugar.m-p2{order:2} .m-lugar.m-p3{order:3}
    .m-lugar{padding-left:20px;padding-right:20px;padding-bottom:60px}
    .m-lugar .m-redes-col{position:static;transform:none;flex-direction:row;justify-content:center;margin-top:4px}
    .m-linha{grid-template-columns:32px 1fr;gap:10px}
    .m-linha .m-moldura{display:none}
    .m-linha .m-id,.m-linha .m-redes-col,.m-linha .m-patente{grid-column:1/-1}
    .m-linha .m-redes-col,.m-linha .m-patente{justify-content:flex-start}
    .m-linha > div:empty{display:none}
  }

/* A nota fica FORA do muro (ela explica por que o pódio sumiu), por isso não leva o prefixo de
   dentro do muro nem depende da variável local. */
/* "+N": existe mais honra do que cabe na linha. Discreto de proposito — ele conta uma
   quantidade, nao e um selo. */
.m-honra.m-honra-mais{--c:#8b93a1;font-weight:900;letter-spacing:.02em}

.muro-nota{margin:14px 0 0;font-size:.8rem;color:#8b93a1;text-align:center}
.muro-nota.is-hidden{display:none}

/* Rodapé do Muro embutido numa página (hoje só a de Apoio): o caminho para a lista completa. */
.muro-rodape{margin:18px 0 0;text-align:center}

/* ── Navegacao entre paginas do Muro ───────────────────────────────────────────────────────
   Fora do muro, porque ela fala sobre a lista e nao faz parte dela. Alvo de 38px de altura para
   dar para acertar no celular sem ampliar. */
.muro-paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:20px 0 0}
.muro-paginacao.is-hidden{display:none}
.muro-pag-botao{min-width:38px;height:38px;padding:0 11px;border-radius:10px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eef1f6;
  transition:border-color .15s,background .15s}
.muro-pag-botao:hover{border-color:rgba(233,208,150,.5);background:rgba(233,208,150,.09)}
.muro-pag-botao:focus-visible{outline:2px solid #f0d089;outline-offset:2px}
.muro-pag-botao.e-atual{border-color:#d9af52;background:linear-gradient(180deg,#f0d089,#d9af52);color:#17130a}
.muro-pag-corte{padding:0 2px;color:#8b93a1;font-weight:800}
.muro-pag-conta{margin-left:8px;font-size:.76rem;color:#8b93a1;font-variant-numeric:tabular-nums}
@media(max-width:560px){.muro-pag-conta{width:100%;margin:6px 0 0;text-align:center}}
@media (prefers-reduced-motion:reduce){.muro-pag-botao{transition:none}}