/* ============================================================
   estandarte.css — O Estandarte do Hunter

   Prefixo `est-` em TUDO, de propósito: existe outra proposta de banner
   sendo trabalhada em paralelo (`bannerPremium`, em arquiteto-console.js),
   e as duas precisam poder conviver no mesmo app sem que um seletor de uma
   alcance a outra. Nada aqui toca `#hunter-card`.

   A linguagem é heráldica, não HUD: tecido, trilho de metal, cera, fio de
   ouro, bainha rasgada. A referência mostrada era ciano-circuito; ir para o
   lado oposto é o que torna as duas comparáveis de relance.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   V2 · O PORTAL — a proposta fiel à referência

   Prefixo `pt-`. Linguagem de HUD: campo petróleo, arcos de circuito no
   canto direito, hexágono com anel de luz, feixe ciano de XP e gemas de
   estatística. É o oposto do V1 (tecido, cera, heráldica) de propósito —
   as duas precisam ser distinguíveis de relance para serem comparáveis.
   ══════════════════════════════════════════════════════════ */
/* CANTOS NO FORMATO DO PROJETO. A janela do Sistema
   (`.sys-plate` em css/status-window.css) não tem os quatro cantos
   redondos: dois são arredondados e dois, CHANFRADOS em diagonal. Copiei o
   mesmo clip-path para o banner pertencer à mesma família.

   `border-radius` continua declarado porque o clip-path recorta a caixa,
   mas quem desenha as duas curvas que sobram é o raio. */
.pt-banner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem 1.8rem;
  border-radius: 14px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px,
                     100% 100%, 22px 100%, 0 calc(100% - 22px));
  overflow: hidden;
  background:
    radial-gradient(120% 180% at 78% 30%, color-mix(in srgb, var(--pt-feixe) 9%, transparent), transparent 60%),
    linear-gradient(112deg, color-mix(in srgb, var(--pt-fundo) 85%, transparent) 0%, color-mix(in srgb, var(--pt-fundo2) 85%, transparent) 62%, color-mix(in srgb, var(--pt-fundo) 85%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--pt-circuito) 65%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 44px rgba(0,0,0,.6);
}

/* Arcos de circuito — atmosfera, não desenho para olhar. Ficam presos à
   direita porque é de lá que a "energia" chega na referência. */
.pt-circuito {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 62%; height: 100%; max-width: none;
  color: var(--pt-circuito);
  opacity: .5;
  pointer-events: none;
}

/* AS QUATRO COLUNAS. O núcleo (emblema + barra) é a única que ESTICA —
   `minmax(340px, 1fr)`. Antes a identidade também podia crescer e roubava
   espaço, deixando a barra curta e o emblema aparentemente distante dela.
   O gap caiu de 1.6 para 1.15rem pelo mesmo motivo: a barra pedia fôlego. */
.pt-conteudo {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: auto max-content minmax(340px, 1fr) max-content;
  align-items: center;
  gap: 1.15rem;
}

/* ── Retrato hexagonal ───────────────────────────────────── */
.pt-retrato { flex: none; }
/* O hexágono é feito por clip-path em dois níveis: o de fora é o anel de
   luz, o de dentro é a foto. Uma borda comum não acompanha o recorte. */
.pt-hex, .pt-hex-foto {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.pt-hex {
  position: relative; z-index: 2;
  width: 96px; height: 108px;
  padding: 3px;
  background: linear-gradient(160deg, #f5d488, #b8892f 45%, #f7e6b0);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pt-feixe) 45%, transparent));
}
.pt-hex-luz {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  background-size: 100% 260%;
  animation: pt-lustro 5.5s linear infinite;
  pointer-events: none;
}
@keyframes pt-lustro {
  from { background-position: 0 200%; }
  to   { background-position: 0 -60%; }
}
.pt-hex-foto {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 40% 28%, #123840, #050d10);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pt-hex-foto img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.pt-inicial {
  font-family: var(--font-title);
  font-size: 2.3rem;
  color: var(--pt-feixe2);
  text-shadow: 0 0 14px var(--pt-feixe);
}
/* SELO HEXAGONAL DO RANK.
   Encostado no vértice inferior-direito do hexágono da foto: as duas
   formas conversam e viram um conjunto só, em vez de "uma foto com um
   distintivo pendurado". A posição em % acompanha o tamanho do retrato. */
.pt-selo-hex {
  position: absolute;
  right: 20%; bottom: 12%;
  z-index: 4;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.8));
}
.pt-selo-hex svg { position: absolute; inset: 0; max-width: none; }
.pt-selo-letra {
  position: relative; z-index: 2;
  font-family: var(--font-title);
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.9), 1px -1px 0 rgba(0,0,0,.9),
    -1px  1px 0 rgba(0,0,0,.9), 1px  1px 0 rgba(0,0,0,.9),
    0 0 10px currentColor;
}

/* ── Identidade ──────────────────────────────────────────── */
.pt-identidade { min-width: 0; }
.pt-nome {
  font-family: var(--font-title);
  font-size: 1.9rem; letter-spacing: .045em; line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-titulo {
  margin-top: .12rem;
  font-size: .82rem; font-style: italic;
  color: color-mix(in srgb, var(--pt-feixe2) 70%, transparent);
}
.pt-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.pt-chip {
  padding: .22rem .7rem;
  border-radius: 100px;
  font-family: var(--font-section);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  white-space: nowrap;
}
.pt-chip-rank {
  color: var(--pt-feixe2);
  border: 1px solid color-mix(in srgb, var(--pt-feixe) 55%, transparent);
  background: color-mix(in srgb, var(--pt-feixe) 10%, transparent);
}
.pt-chip-cargo {
  color: #fde68a;
  border: 1px solid rgba(251,191,36,.5);
  background: rgba(251,191,36,.1);
}

/* ── Núcleo: sigilo + feixe de XP + relíquias ────────────── */
.pt-nucleo { 
  min-width: 0; 
  position: relative;
}
/* ALINHAMENTO. O emblema e a barra precisam da MESMA linha de centro.
   O que desalinhava: o bloco da direita tem o número do XP em cima, o que
   empurra a barra para baixo enquanto o emblema fica centrado no conjunto.
   Agora o número flutua sobre a barra (posição absoluta), então os dois
   itens do flex têm a mesma altura útil e o `center` funciona. */
.pt-linha-xp {
  display: flex;
  align-items: center;
  gap: .3rem;          /* colada: a insígnia guarda a barra, não a observa */
}
/* O escudo é SVG puro, sem moldura: a peça já traz corpo, bisel, louros e
   coroa. A sombra vai no `drop-shadow` (e não num pseudo-elemento) porque
   precisa seguir a silhueta dos louros e das asas, que escapam do escudo. */
.pt-sigilo {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.75));
}
.pt-sigilo svg { max-width: none; display: block; }
.pt-rank-fallback {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-title); font-size: 1.1rem;
  color: var(--pt-feixe2);
  border: 2px solid color-mix(in srgb, var(--pt-feixe) 50%, transparent);
}

.pt-feixe-caixa { flex: 1; min-width: 0; position: relative; }
.pt-xp-num {
  position: absolute; right: 2px; bottom: 100%;
  margin-bottom: -2px;
  font-family: 'Orbitron', monospace;
  font-size: .66rem;
  color: color-mix(in srgb, var(--pt-feixe2) 78%, transparent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   A BARRA DE XP — como o brilho circular é feito

   O pedido era "aquele efeito circular em volta da barra". Ele vem de
   TRÊS camadas empilhadas, e nenhuma delas sozinha resolve:

   1. CALHA (`.pt-calha`) — um envelope maior que a barra, com
      `overflow: visible`. Sem ele o halo seria recortado na altura de
      9px da barra e viraria um retângulo aceso. O halo precisa de espaço
      para escapar, e o espaço é este.

   2. HALO (`.pt-feixe-halo`) — um `radial-gradient` de 90px CENTRADO NA
      PONTA do preenchimento, desenhado fora dos limites da barra. É ele o
      "círculo" — a luz que a energia joga no ambiente ao redor. Como fica
      preso ao fim do `.pt-feixe-fill`, ele ANDA junto com o XP.

   3. LUSTRO (`.pt-feixe-lustro`) — um brilho que atravessa o interior do
      feixe, da esquerda para a direita, em laço. É o que dá a sensação de
      corrente passando dentro do tubo em vez de tinta parada.

   A ordem importa: halo por baixo (z-index 0), lustro dentro (1), ponta
   por cima (2). Invertida, a ponta some no meio do borrão.
   ══════════════════════════════════════════════════════════ */
/* A barra é SVG (ver `_barraXP` em estandarte.js). O CSS só a posiciona e
   anima — o brilho vive dentro do SVG, onde nenhum `overflow` alcança. */
.pt-barra {
  display: block;
  width: 100%;
  max-width: none;
  /* Margem vertical negativa recolhe o excesso do viewBox alto.
     A margem horizontal foi zerada porque o escudo foi removido. */
  margin: -23px 0;
  overflow: visible;
}

/* A faísca que corria o CONTORNO da barra foi removida: ao lado da fita
   orbitando, as duas disputavam a mesma leitura e o conjunto virava
   ruído. Efeito bom fica pior encostado em outro parecido. */

/* ══════════════════════════════════════════════════════════
   A FITA QUE ORBITA A BARRA

   O desenho é uma onda senoidal ao longo do trecho aceso, desenhada DUAS
   vezes com meia fase de diferença: uma antes do trilho, outra depois.
   A de trás fica encoberta pela barra; a da frente passa por cima.

   Não há 3D nisso — é oclusão pura. Duas cópias e uma ordem de desenho.
   Animar as duas em sentidos opostos completa a ilusão: onde uma sobe, a
   outra desce, e o olho lê como uma única fita dando a volta.
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   A LINHA DA BARRA — contínua, entrelaçada, respirando

   TRÊS MUDANÇAS, e cada uma resolve um defeito que se via na tela:

   1. NÃO É MAIS TRACEJADO. Era `stroke-dashoffset`, que produz uma linha
      PICOTADA andando. O pedido é uma linha contínua — então o grupo
      inteiro DESLIZA no eixo X, exatamente um comprimento de onda
      (`--lam`, calculado no JS). Como a onda é periódica, o fim do ciclo
      coincide com o começo e a emenda não aparece.

   2. ELA PASSA POR TRÁS DE VERDADE. Antes o mesmo caminho inteiro era
      desenhado duas vezes, e a cópia de trás nunca ficava escondida. Agora
      a onda é cortada em segmentos de meio período: pares atrás da barra,
      ímpares na frente. A cada meia volta ela some e reaparece — que é o
      que uma fita enrolada num cilindro faz.

   3. A OPACIDADE VAI E VEM. O gradiente do traço é FIXO no lugar e a onda
      desliza por baixo dele, atravessando zonas mais claras e mais
      apagadas. O brilho pulsa sem que nada pisque.

   As duas camadas usam a MESMA animação e a mesma duração: se
   divergissem, a linha se partiria em duas na primeira meia volta.
   ══════════════════════════════════════════════════════════ */
/* A hélice desliza. As duas camadas usam a MESMA animação e duração: se
   divergissem, a linha se partiria em duas na primeira meia volta. */
.pt-onda {
  animation: pt-deslizar 9s linear infinite;
}

/* OS TRÊS FEIXES QUE NASCEM DO ESCUDO.
   Pulsam em tempos diferentes — feixes idênticos e sincronizados parecem
   um desenho estático de três linhas; defasados, parecem energia
   chegando em ondas. O de cima e o de baixo são mais tênues que o do
   meio, que é o que continua na hélice. */
.pt-feixe-nasce {
  animation: pt-alimentar 3.2s ease-in-out infinite;
}
.pt-feixe-n0 { animation-delay: -.9s; opacity: .55; }
.pt-feixe-n1 { animation-delay: 0s;   opacity: .95; }
.pt-feixe-n2 { animation-delay: -1.8s; opacity: .55; }
@keyframes pt-alimentar {
  0%, 100% { opacity: .3; }
  45%      { opacity: .95; }
}
@keyframes pt-deslizar {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--lam, 200px)); }
}

/* ══════════════════════════════════════════════════════════
   O ANEL QUE GIRA EM TORNO DO HEXÁGONO — o do PROJETO

   Eu havia inventado um contorno com `stroke-dasharray` correndo. Estava
   errado: o projeto já tem esse efeito em `.hunter-hex-ring`
   (css/status-window.css), e a técnica é outra —

     conic-gradient com dois arcos claros
     + clip-path hexagonal (levemente MAIOR que a foto, para o anel
       aparecer nas bordas)
     + rotação contínua + blur(1px)

   Traço percorrendo contorno é uma linha viajando. Cone girando é LUZ
   VARRENDO a superfície. A segunda é a linguagem do app, e a diferença
   entre as duas se vê de imediato.

   As medidas em % (e não px) fazem o anel acompanhar o tamanho do
   hexágono sem recalibrar nada.
   ══════════════════════════════════════════════════════════ */
.pt-anel {
  position: absolute;
  top: 50%; left: 50%;
  width: 108px; height: 122px;      /* ~6% maior que o hexágono da foto */
  transform: translate(-50%, -50%);
  z-index: 1;                       /* atrás da foto (2), na frente da aura (0) */
  pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0%, var(--pt-rank, #a855f7) 12%, transparent 30%,
    transparent 50%, var(--pt-rank, #a855f7) 62%, transparent 80%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: blur(1px);
  animation: pt-anel-girar 6s linear infinite;
}
@keyframes pt-anel-girar { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* A centelha na cabeça do feixe respira — é o único ponto que pulsa. */
.pt-centelha { animation: pt-respirar 1.9s ease-in-out infinite; transform-origin: center; }
@keyframes pt-respirar {
  0%, 100% { opacity: 1;  r: 4.5; }
  50%      { opacity: .55; r: 3.2; }
}

/* AS RELÍQUIAS — as badges do altar. Elas é que precisavam crescer (li
   errado da primeira vez e aumentei os cristais). São o acervo do hunter:
   merecem tamanho e o mesmo assentamento das pedras. */
/* ALINHAMENTO DAS RELÍQUIAS COM A BARRA.
   Antes era um `padding-left` chutado, que só acertava por acaso e
   desalinhava assim que o brasão mudava de tamanho. Agora a fileira repete
   a MESMA estrutura da linha do XP — um vão do tamanho do brasão, o mesmo
   gap, e a fila ocupando o resto. Quando o brasão cresce, o vão cresce
   junto e o alinhamento se mantém sozinho. */
.pt-reliquias {
  display: flex; align-items: center; justify-content: center;
  gap: .3rem;
  
  /* Retiramos as relíquias do fluxo normal para que a Barra de XP
     seja o único elemento que o CSS Grid leva em conta ao centralizar 
     verticalmente. Assim a barra fica no centro exato do Estandarte. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -0.5rem; /* Ajuste fino para aproximá-las da barra */
}
.pt-reliquias-vao {
  flex: none;
  width: 72px;             /* = tamanho do brasão em .pt-sigilo */
}
.pt-reliquias-fila {
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  flex-wrap: wrap;
}
.pt-reliquias .est-reliquia {
  position: relative;
  display: inline-flex;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.7));
}
/* A mesma elipse borrada no chão que assenta as pedras. Sem ela a
   relíquia flutua; com ela, pousa. */
.pt-reliquias .est-reliquia::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  width: 60%; height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}
.pt-vazio {
  font-size: .64rem; font-style: italic;
  color: color-mix(in srgb, var(--pt-feixe2) 45%, transparent);
}

/* ── Pedras de estatística (js/gemas.js) ───────────────────
   ALINHADAS À BARRA: o rótulo sai do fluxo (absoluto), então a altura útil
   da coluna passa a ser só a da pedra — e o `align-items: center` da grade
   coloca as três na mesma linha de centro do feixe de XP. Com o rótulo no
   fluxo, ele empurrava as pedras para cima. */
.pt-gemas { display: flex; gap: .55rem; align-items: center; }
.pt-gema {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 0;
}
/* SOMBRA PROJETADA embaixo: uma elipse borrada no chão. É ela que tira a
   pedra da sensação de adesivo colado e a assenta sobre a superfície. */
.pt-gema::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -7px;
  width: 62%; height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}
.pt-gema-rot {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  font-family: var(--font-section);
  font-size: .47rem; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pt-feixe2) 60%, transparent);
  white-space: nowrap;
  pointer-events: none;
}
.pt-gema-fallback {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.pt-gema-val {
  font-family: 'Orbitron', monospace;
  font-size: .96rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── A pedra em si ───────────────────────────────────────────
   O valor fica SOBRE a gema, centrado. `pointer-events:none` para o número
   não roubar o tooltip da pedra. E `max-width:none` no SVG, sempre: a
   regra global do projeto colapsa desenho sem tamanho próprio. */
.gema-slot {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.gema-slot svg { max-width: none; display: block; }
.gema-valor {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* O EMBLEMA NÃO GIRA. Pedido do Arquiteto, e ele tem razão: peça que gira
   é indicador de carregando, não insígnia. Insígnia fica parada e é
   olhada. O que ela ganha é lustro e profundidade, desenhados no SVG. */
.gema-rank { display: block; }

@media (max-width: 900px) {
  .pt-conteudo { grid-template-columns: auto 1fr; gap: 1.1rem; }
  .pt-nucleo   { grid-column: 1 / -1; }
  .pt-gemas    { grid-column: 1 / -1; justify-content: space-around; width: 100%; }
  .pt-nome     { font-size: 1.4rem; }
  .pt-reliquias{ padding-left: 0; }
}

/* ══════════════════════════════════════════════════════════
   V3 · RESPONSIVIDADE

   O V3 usava inline styles com grid-template-columns hardcoded
   (minmax(340px,1fr)) que estouravam o container em telas < 600px.
   Agora vive em classes CSS com breakpoints adaptativos.

   WIDE (>720px): 3 colunas — avatar+id | barra XP | gemas
   MEDIUM (480–720px): avatar+id empilha, barra abaixo, gemas em linha
   NARROW (<480px): tudo empilhado e centralizado
   ══════════════════════════════════════════════════════════ */
.pt-v3-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: 1.2rem;
}
.pt-v3-avatar-grupo {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

@media (max-width: 720px) {
  .pt-v3-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    justify-items: center;
    text-align: center;
  }
  .pt-v3-avatar-grupo {
    flex-direction: column;
    align-items: center;
    gap: .6rem;
  }
  .pt-v3-avatar-grupo .pt-identidade { text-align: center; }
  .pt-v3-avatar-grupo .pt-chips      { justify-content: center; }
  .pt-v3-grid .pt-nucleo {
    width: 100%;
    max-width: 500px;
  }
  .pt-v3-grid .pt-gemas {
    justify-content: center;
    width: 100%;
  }
  .pt-v3-grid .pt-nome { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .pt-banner { padding: 1rem .8rem; }
  .pt-v3-grid { gap: .7rem; }
  .pt-hex { width: 78px; height: 88px; }
  .pt-anel { width: 88px; height: 100px; }
  .pt-v3-grid .pt-nome { font-size: 1.25rem; }
  .pt-v3-grid .pt-gemas { gap: .3rem; }
}

/* ── Vitrine ─────────────────────────────────────────────── */
.est-overlay {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(3, 3, 8, .86);
  backdrop-filter: blur(7px);
  animation: est-entrar .2s ease;
}
@keyframes est-entrar { from { opacity: 0 } to { opacity: 1 } }

.est-painel {
  width: min(1080px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, #0c0a15, #06060c 65%);
  border: 1px solid rgba(212, 169, 74, .3);
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.est-topo {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.3rem .85rem;
  border-bottom: 1px solid rgba(212, 169, 74, .16);
}
.est-topo > div { flex: 1; min-width: 0; }
.est-topo h2 {
  margin: 0; font-family: var(--font-title);
  font-size: 1rem; color: #e8c877; font-weight: 600; letter-spacing: .04em;
}
.est-topo p {
  margin: .2rem 0 0;
  font-family: var(--font-section);
  font-size: .53rem; letter-spacing: .16em; color: var(--text-muted);
}
.est-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: .3rem .5rem;
  border-radius: 6px; transition: all .16s;
}
.est-x:hover { color: #f87171; background: rgba(239, 68, 68, .1); }

.est-palco {
  flex: 1; overflow: auto;
  padding: 2.2rem 1.6rem 1.4rem;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(212, 169, 74, .06), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 8px);
}

/* ══════════════════════════════════════════════════════════
   O ESTANDARTE
   ══════════════════════════════════════════════════════════ */
.est-conjunto {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  transform-origin: top center;
}

/* ── Trilho de metal ─────────────────────────────────────
   Os dois anéis nas pontas são o que faz o estandarte parecer PENDURADO
   em vez de colado na tela. Sem eles, é um retângulo com uma barra em cima. */
.est-trilho {
  position: relative; z-index: 3;
  display: flex; align-items: center;
  margin: 0 -10px -3px;
}
.est-barra {
  flex: 1; height: 9px;
  border-radius: 5px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--est-trilho) 55%, #cbb98a),
    var(--est-trilho) 45%,
    color-mix(in srgb, var(--est-trilho) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 8px rgba(0,0,0,.6);
  position: relative; overflow: hidden;
}
/* Um brilho lento atravessa o metal — a única luz que se move na peça. */
.est-barra::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  background-size: 260% 100%;
  animation: est-brilho 6s linear infinite;
}
@keyframes est-brilho {
  from { background-position: 200% 0; }
  to   { background-position: -60% 0; }
}
.est-anel {
  width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  border: 3px solid var(--est-trilho);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.6);
}
.est-anel.esq { margin-right: -4px; }
.est-anel.dir { margin-left: -4px; }

/* ── A flâmula (o pano) ──────────────────────────────────── */
.est-flamula {
  position: relative;
  padding: 1.4rem 1.6rem 1.5rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--est-pano-alto) 85%, transparent), color-mix(in srgb, var(--est-pano) 85%, transparent) 45%, color-mix(in srgb, var(--est-pano2) 85%, transparent));
  border-left: 1px solid rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 14px 26px rgba(0,0,0,.55),      /* sombra sob o trilho */
    inset 22px 0 34px -22px rgba(0,0,0,.7), /* dobra à esquerda */
    inset -22px 0 34px -22px rgba(0,0,0,.7),/* dobra à direita */
    0 22px 44px rgba(0,0,0,.6);
  color: var(--est-fio);
}
/* Balanço: o pano oscila devagar a partir do trilho. Uma animação só, no
   elemento inteiro — duas no mesmo elemento se cancelam nesta base. */
.est-balanco { animation: est-balancar 7s ease-in-out infinite; transform-origin: top center; }
@keyframes est-balancar {
  0%, 100% { transform: rotate(-.22deg); }
  50%      { transform: rotate(.22deg); }
}

/* Trama do tecido — linhas finíssimas cruzadas. É o que impede o pano de
   parecer um degradê liso. */
.est-trama {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px);
}

.est-brasao {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  color: var(--est-fio);
  opacity: .16;
  pointer-events: none;
}

/* Bainha rasgada — recorta a base do pano. É a maior diferença de
   silhueta em relação a um cartão retangular, e silhueta é o que se
   reconhece primeiro, antes de qualquer cor. */
.est-bainha {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 14px; max-width: none;
  display: block;
  fill: var(--bg-card, #0a0a12);
  filter: drop-shadow(0 -2px 3px rgba(0,0,0,.5));
}
.est-flamula:not(.est-rasgado) { border-bottom: 2px solid color-mix(in srgb, var(--est-fio) 35%, transparent); }

/* ── Conteúdo ────────────────────────────────────────────── */
.est-conteudo {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.6rem;
}

/* ── Retrato + selo de cera ──────────────────────────────── */
.est-retrato { position: relative; flex: none; }
.est-moldura {
  width: 92px; height: 92px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 140deg,
    var(--est-fio), color-mix(in srgb, var(--est-fio) 25%, #000),
    var(--est-fio-alto), color-mix(in srgb, var(--est-fio) 25%, #000), var(--est-fio));
  box-shadow: 0 0 18px var(--est-luz), inset 0 0 8px rgba(0,0,0,.6);
}
.est-foto {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 30%, #2a2440, #0b0812);
  display: flex; align-items: center; justify-content: center;
}
.est-foto img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.est-inicial {
  font-family: var(--font-title);
  font-size: 2.1rem;
  color: var(--est-fio-alto);
  text-shadow: 0 0 12px var(--est-luz);
}
/* O selo de cera: pressionado no canto do retrato, com a letra em relevo.
   É a peça que carrega a cor do RANK — a única coisa do hunter que não
   pertence ao tecido. */
/* O SELO DE CERA — a letra do rank estava sumindo.

   Duas causas somadas: ele tinha 40px (a letra de 1rem mal cabia) e
   ficava na mesma camada da aura, que agora é grande e passava por cima.
   Cresceu para 52px, ganhou `z-index: 5` — acima da aura (0), da moldura
   (2) e de qualquer coisa que venha depois — e a letra ganhou contorno
   escuro para se destacar de qualquer cor de cera. */
.est-selo {
  position: absolute; right: 12px; bottom: 14px;
  z-index: 5;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.85));
}
.est-selo svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.est-cera-borda {
  fill: var(--est-cera);
  stroke: var(--est-cera-alto);
  stroke-width: 1.4;
}
.est-letra {
  position: relative; z-index: 2;
  font-family: var(--font-title);
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--est-rank);
  /* Contorno escuro por fora + glow por dentro: legível sobre cera
     vermelha, azul ou preta, sem depender da cor de baixo. */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.9), 1px -1px 0 rgba(0,0,0,.9),
    -1px  1px 0 rgba(0,0,0,.9), 1px  1px 0 rgba(0,0,0,.9),
    0 0 12px var(--est-rank);
}

/* ── Nome e título, em fio de ouro ───────────────────────── */
.est-centro { min-width: 0; }
.est-nome {
  font-family: var(--font-title);
  font-size: 1.85rem;
  letter-spacing: .06em;
  line-height: 1.1;
  color: var(--est-fio-alto);
  /* Bordado: um alto e um baixo-relevo, sem brilho de neon. Fio refletindo
     luz é diferente de LED aceso — é o que separa herança de tecnologia. */
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 -1px 0 color-mix(in srgb, var(--est-fio) 40%, transparent),
    0 0 22px var(--est-luz);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.est-titulo {
  margin-top: .1rem;
  font-family: var(--font-section);
  font-size: .68rem; letter-spacing: .16em;
  color: color-mix(in srgb, var(--est-fio) 70%, transparent);
  font-style: italic;
}

/* ── Fita de XP ──────────────────────────────────────────── */
.est-fita {
  position: relative;
  margin-top: .8rem;
  display: flex; align-items: stretch;
}
.est-fita-corpo {
  position: relative;
  flex: 1;
  height: 21px;
  border-radius: 2px;
  background: rgba(0,0,0,.55);
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(0,0,0,.7);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.est-fita-preenche {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--est-fio) 40%, transparent),
    var(--est-fio));
  box-shadow: 0 0 14px var(--est-luz);
  transition: width .5s cubic-bezier(.22,.9,.3,1);
}
.est-fita-txt {
  position: relative; z-index: 2;
  font-family: 'Orbitron', monospace;
  font-size: .64rem; letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
  font-variant-numeric: tabular-nums;
}
/* As caudas em V — o que faz virar FITA e não barra de progresso. */
.est-fita-cauda {
  width: 15px; flex: none;
  background: color-mix(in srgb, var(--est-fio) 55%, #000);
}
.est-fita-cauda.esq { clip-path: polygon(100% 0, 100% 100%, 0 100%, 40% 50%, 0 0); }
.est-fita-cauda.dir { clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }

/* ── Medalhas penduradas ─────────────────────────────────── */
.est-medalhas { display: flex; gap: 1rem; align-items: flex-start; }
.est-medalha {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 10px;
  position: relative;
}
/* A corrente. É o detalhe que vende a ideia: sem ela são três caixinhas
   de estatística com borda. */
.est-corrente {
  position: absolute; top: -2px;
  width: 2px; height: 14px;
  background: repeating-linear-gradient(180deg,
    var(--est-fio) 0 3px, transparent 3px 5px);
  opacity: .7;
}
.est-disco {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%,
    color-mix(in srgb, var(--est-fio) 34%, #000), #08060e 70%);
  border: 2px solid color-mix(in srgb, var(--est-fio) 60%, transparent);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.7);
}
.est-valor {
  font-family: 'Orbitron', monospace;
  font-size: .92rem; font-weight: 700;
  color: var(--est-fio-alto);
  text-shadow: 0 0 9px var(--est-luz);
  font-variant-numeric: tabular-nums;
}
.est-med-rot {
  margin-top: .3rem;
  font-family: var(--font-section);
  font-size: .5rem; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--est-fio) 62%, transparent);
}
/* Cada medalha puxa um pouco para a própria cor — sem sair do tecido. */
.est-med-mana  .est-disco { border-color: rgba(56,189,248,.5); }
.est-med-mana  .est-valor { color: #7dd3fc; text-shadow: 0 0 9px rgba(56,189,248,.5); }
.est-med-chama .est-disco { border-color: rgba(249,115,22,.5); }
.est-med-chama .est-valor { color: #fdba74; text-shadow: 0 0 9px rgba(249,115,22,.5); }

/* ── Controles da vitrine ────────────────────────────────── */
.est-controles {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid rgba(212,169,74,.14);
  background: rgba(0,0,0,.3);
}
.est-grupo { display: flex; flex-direction: column; gap: .4rem; }
.est-rot {
  font-family: var(--font-section);
  font-size: .52rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.est-ops { display: flex; gap: .4rem; flex-wrap: wrap; }
.est-op {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem;
  font-family: var(--font-section);
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  color: var(--text-muted);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 8px;
  cursor: pointer;
  transition: all .16s;
}
.est-op:hover { color: var(--text-primary); border-color: rgba(212,169,74,.45); }
.est-op.on {
  color: #f4d98a;
  background: rgba(212,169,74,.12);
  border-color: rgba(212,169,74,.6);
  box-shadow: 0 0 10px rgba(212,169,74,.2);
}
.est-swatch {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  background: var(--amostra);
  border: 1px solid var(--amostra-fio);
}

/* Seletores de aura e rank — é o que faz a vitrine SERVIR para testar.
   Sem eles ela mostrava o banner e nada mais; não dava para ver a aura de
   outro cargo nem como o selo fica num S-Rank. */
.est-sel {
  padding: .4rem .6rem;
  font-family: var(--font-section);
  font-size: .64rem;
  color: var(--text-primary);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(148,163,184,.26);
  border-radius: 8px;
  cursor: pointer;
  min-width: 190px;
}
.est-sel:focus { outline: none; border-color: rgba(212,169,74,.6); }

/* Troca de versão, no cabeçalho */
.est-versoes { display: flex; gap: .35rem; }
.est-v {
  padding: .38rem .8rem;
  font-family: var(--font-section);
  font-size: .6rem; font-weight: 700; letter-spacing: .08em;
  color: var(--text-muted);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 8px; cursor: pointer; transition: all .16s; white-space: nowrap;
}
.est-v:hover { color: var(--text-primary); }
.est-v.on {
  color: #7dd3fc;
  background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 10px rgba(56,189,248,.2);
}

/* Relíquias reais dentro do V1. `max-width:none` pela armadilha global de
   sempre — `svg { max-width:100% }` colapsa medalha sem largura própria. */
.est-reliquias { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.est-reliquia, .pt-banner .est-reliquia { line-height: 0; }
.est-reliquia svg, .pt-reliquias svg { max-width: none; }

/* ══════════════════════════════════════════════════════════
   A AURA — estava pequena demais nos dois banners

   `Auras.bloco` posiciona em absoluto no centro do PAI. O pai era do
   tamanho da foto, então a aura nascia do tamanho da foto: em vez de
   envolver o retrato, ela ficava atrás dele, quase toda escondida.

   Correção em duas partes, e as duas são necessárias:
     • o retrato ganha caixa MAIOR que a foto, com a foto centrada — é o
       espaço em que a aura tem para existir;
     • `overflow: visible` em toda a cadeia, senão o banner recorta o
       excedente e volta ao mesmo problema.
   ══════════════════════════════════════════════════════════ */
.est-retrato, .pt-retrato {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.est-retrato { width: 150px; height: 150px; }
.pt-retrato  { width: 168px; height: 168px; }
.est-retrato .aura-wrap, .pt-retrato .aura-wrap { z-index: 0; }
.est-retrato .aura-wrap svg, .pt-retrato .aura-wrap svg { max-width: none; }
.est-moldura, .pt-hex { position: relative; z-index: 2; }
/* O conteúdo não pode recortar a aura que transborda do retrato. */
.pt-conteudo, .est-conteudo { overflow: visible; }

.est-rodape {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1.4rem;
  border-top: 1px solid rgba(148,163,184,.12);
}
.est-rodape span {
  flex: 1;
  font-size: .66rem; color: var(--text-dim);
}
.est-btn {
  padding: .45rem 1rem;
  font-family: var(--font-section);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #f4d98a;
  background: rgba(212,169,74,.1);
  border: 1px solid rgba(212,169,74,.42);
  border-radius: 8px; cursor: pointer; transition: all .17s;
}
.est-btn:hover { background: rgba(212,169,74,.22); }
.est-btn-destaque {
  color: #38bdf8;
  background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .45);
}
.est-btn-destaque:hover {
  background: rgba(56, 189, 248, .25);
  box-shadow: 0 0 12px rgba(56, 189, 248, .3);
}
.est-btn-perigo {
  color: #fca5a5;
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .45);
}
.est-btn-perigo:hover {
  background: rgba(239, 68, 68, .25);
}

/* ── Estreito ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .est-conteudo { grid-template-columns: auto 1fr; gap: 1rem; }
  .est-medalhas { grid-column: 1 / -1; justify-content: space-around; width: 100%; }
  .est-nome { font-size: 1.35rem; }
  .est-moldura { width: 68px; height: 68px; }
  .est-controles { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .est-balanco, .est-barra::after { animation: none !important; }
}

/* ── Vitrine em telas estreitas ──────────────────────────── */
@media (max-width: 600px) {
  .est-overlay   { padding: .5rem; }
  .est-palco     { padding: 1.2rem .8rem 1rem; }
  .est-controles { padding: .7rem .8rem; gap: .8rem; }
  .est-topo      { padding: .6rem .8rem; }
  .est-versoes   { gap: .2rem; }
  .est-v         { padding: .3rem .5rem; font-size: .5rem; }
  .pt-retrato    { width: 130px; height: 130px; }
}

/* ── O SLOT QUANDO A PEÇA É A V4 ────────────────────────────

   Vale para QUALQUER slot com a classe `.hunter-window` — o do
   Dashboard e o do Perfil. O seletor nunca foi por id, e é por isso
   que o Perfil não precisou de uma regra própria.

   `#hunter-card` é a moldura da Janela de Status: fundo, borda,
   padding, clip-path de canto cortado e uma vinheta no ::after.
   A V4 traz a moldura DELA. Montar uma dentro da outra dá duas
   molduras — e a de dentro com metade do espaço.

   As mesmas quatro linhas que o modo teste já usava, agora ligadas
   pelo `data-peca` que o registro escreve sozinho ao montar. Nada
   de JavaScript decidindo estilo: quem monta declara, o CSS reage.

   O clip-path FICA de propósito: é ele que dá os dois cantos
   cortados do banner, e é assim que a V4 vinha sendo vista no modo
   teste, que era dentro deste mesmo elemento. */
.hunter-window[data-peca="banner-v4"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.hunter-window[data-peca="banner-v4"]::before,
.hunter-window[data-peca="banner-v4"]::after {
  display: none !important;
}

/* A LARGURA. `.pt-banner` nasceu para o palco da Vitrine, que é uma
   bancada estreita: `max-width:1000px; margin:0 auto`. No Dashboard
   isso deixa o banner encolhido e boiando no meio de uma tela larga.

   O modo teste já sabia disso e forçava 100% — mas por um seletor
   preso ao `#est-teste-banner-wrap`, que só existe lá. Ao ligar a V4
   no slot eu esqueci de trazer estas três linhas junto, e o banner
   apareceu com metade do tamanho. */
.hunter-window[data-peca="banner-v4"] .pt-banner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ── Integração Modo Teste no Dashboard ────────────────────── */
#hunter-card.est-teste-ativo {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#hunter-card.est-teste-ativo::before,
#hunter-card.est-teste-ativo::after,
#hunter-card.est-teste-ativo .hunter-window-body {
  display: none !important;
}
#est-teste-banner-wrap .est-conjunto,
#est-teste-banner-wrap .pt-banner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ── Botão Trocar Aura no Estandarte ───────────────────────── */
.est-btn-aura {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  z-index: 20;
  cursor: pointer;
  padding: 0;

  /* O BOTÃO NÃO TEM MAIS CHROME PRÓPRIO.
     Antes ele era um círculo com fundo, borda e sombra em CSS. Agora
     quem desenha é o SVG — hexágono com bisel, igual ao selo do rank.
     Deixar fundo ou borda aqui criaria uma segunda moldura por baixo
     da primeira, e a transparência pedida iria embora. */
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.7));
  transition: transform .2s, filter .2s;
}
.est-btn-aura:hover { transform: translateX(-50%) scale(1.1); }
.est-btn-aura:active { transform: translateX(-50%) scale(1.02); }

.est-aura-hex {
  position: absolute;
  inset: 0;
  max-width: none;          /* a regra global svg{max-width:100%} colapsa isto */
  pointer-events: none;
}

/* O GLIFO fica em cima do SVG, não dentro: texto dentro de SVG não
   herda a fonte do projeto e vira outro desenho em cada navegador. */
.est-aura-glifo {
  position: relative;
  z-index: 2;
  font-size: .8rem;
  line-height: 1;
  color: var(--pt-feixe2, #c4ccff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--pt-feixe) 70%, transparent);
  pointer-events: none;
  transition: text-shadow .2s;
}
.est-btn-aura:hover .est-aura-glifo {
  text-shadow: 0 0 14px var(--pt-feixe), 0 0 4px #fff;
}

/* O halo por trás do hexágono respira no hover. */
.est-aura-halo { transition: opacity .25s; }
.est-btn-aura:hover .est-aura-halo { opacity: .55; }

/* ── AS FAÍSCAS ──────────────────────────────────────────────
   Apagadas por padrão. O grupo controla a VISIBILIDADE e cada
   centelha controla o próprio MOVIMENTO — são duas propriedades
   `animation` que não podem estar no mesmo elemento, porque a
   segunda declaração sobrescreve a primeira (lição já paga neste
   projeto).

   O desenho é o mesmo das brasas da Fênix: núcleo claro, halo
   colorido, os dois borrados. A diferença é a cor, que vem do campo
   do banner em vez de ser laranja fixa. */
.est-aura-faiscas {
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.est-btn-aura:hover .est-aura-faiscas,
.est-btn-aura:focus-visible .est-aura-faiscas { opacity: 1; }

.est-aura-faisca {
  opacity: 0;
  transform-origin: 24px 24px;
}
.est-btn-aura:hover .est-aura-faisca,
.est-btn-aura:focus-visible .est-aura-faisca {
  animation-name: est-aura-crepitar;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes est-aura-crepitar {
  0%   { opacity: 0;   transform: scale(.55) translateY(2px); }
  35%  { opacity: .95; transform: scale(1.1) translateY(-1px); }
  70%  { opacity: .6;  transform: scale(.85) translateY(-3px); }
  100% { opacity: 0;   transform: scale(.5)  translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .est-aura-faisca { animation: none !important; opacity: .7 !important; }
}
   V4 · S-RANK (Otimizada) - CSS Exclusivo
   ══════════════════════════════════════════════════════════ */
.pt-v4-epigrafe {
  font-size: 14px;
  font-style: italic;
  color: rgba(255,255,255,0.5);
  margin-top: 5px;
  text-align: center;
  position: relative;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.est-btn-editar-epigrafe {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  opacity: 0;
  transform: translateX(-5px);
}

.est-btn-editar-epigrafe svg {
  width: 12px;
  height: 12px;
}

.pt-v4-epigrafe:hover .est-btn-editar-epigrafe {
  opacity: 1;
  transform: translateX(0);
}

.est-btn-editar-epigrafe:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.pt-v4-quote-mark {
  color: var(--pt-feixe2);
  font-weight: bold;
  font-size: 1.1rem;
  opacity: 0.7;
  margin: 0 4px;
}

.pt-v4-banner {
  position: relative;
  overflow: hidden;
}
.pt-v4-hologrid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}
.pt-v4-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, max-content) 1fr max-content;
  align-items: center; 
  gap: 1.5rem;
  padding: 40px 0;
}
.pt-v4-nucleo {
  position: relative;
  width: 100%; 
}

/* Trilho Mestre da Barra de XP */
.pt-v4-trilho-mestre {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 0 15px var(--pt-fundo2);
  z-index: 10;
}
.pt-v4-trilho-mestre .pt-linha-xp {
  flex: 1;
  margin: 0;
  min-width: 0; 
}
.pt-v4-ancora {
  color: var(--pt-fundo);
  width: 10px;
  height: 20px;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px var(--pt-fundo2));
  flex-shrink: 0;
}
.pt-v4-ancora-esq { margin-right: 8px; }
.pt-v4-ancora-dir { margin-left: 8px; }

/* Ajuste do Texto XP Global para V4 
   Garante que o texto luminoso (Orbitron) da V3 flutue ACIMA do chassi escuro da V4 */
.pt-v4-trilho-mestre .pt-xp-num {
  bottom: 100%;
  margin-bottom: 6px; 
  right: 0;
}

/* Dock de Relíquias (Bandeja de Vidro) */
.pt-v4-reliquias-dock {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 8px 16px;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  white-space: nowrap; 
  z-index: 5;
}
.pt-v4-reliquias-dock .pt-reliquias {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
}
.pt-v4-reliquias-dock .pt-reliquias-fila {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

/* Epígrafe (Bio) */
.pt-v4-epigrafe {
  position: absolute;
  top: calc(100% + 85px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  font-family: var(--font-section), sans-serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-muted, #a1a1aa);
  letter-spacing: 0.5px;
  text-align: center;
  opacity: 0.8;
  white-space: nowrap; 
  z-index: 4;
}
.pt-v4-quote-mark {
  color: var(--pt-feixe2);
  font-weight: bold;
  font-size: 1.1rem;
  opacity: 0.7;
  margin: 0 4px;
}

/* Shimmer no Título */
.pt-v4-shimmer {
  background: linear-gradient(100deg, #fff7e0 20%, #fbbf24 40%, #fff7e0 60%, #fbbf24 80%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cq-shimmer 3s linear infinite;
  font-weight: 600;
  letter-spacing: 1px;
}
@keyframes cq-shimmer {
  to { background-position: 220% center; }
}

/* Fio condutor sutil pras gemas */
.pt-v4-gemas {
  position: relative;
}
.pt-v4-fio-conector {
  position: absolute;
  top: 50%;
  left: -40px;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pt-fundo) 80%);
  opacity: 0.3;
}

/* Efeito de Aglomeração no Smartphone */

/* Botão de Editar Epígrafe */
.est-btn-editar-epigrafe {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  opacity: 0;
  transform: translateX(-5px);
}
.est-btn-editar-epigrafe svg {
  width: 12px;
  height: 12px;
}
.pt-v4-epigrafe:hover .est-btn-editar-epigrafe {
  opacity: 1;
  transform: translateX(0);
}
.est-btn-editar-epigrafe:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
/* ── LAYOUT MOBILE (Até 900px) ── */
/* ══════════════════════════════════════════════════════════
   O BANNER MEDE A SI MESMO

   O DEFEITO, medido a partir do CSS:

     janela   banner   coluna do meio   altura da barra XP
      901px    593px          -98px               0px
     1024px    716px           25px               2px
     1200px    892px          201px              16px
     1363px   1055px          364px              29px     <- o print
     1500px   1192px          501px              40px
     1920px   1612px          921px              73px

   De 901 a ~1500 o banner estava quebrado, e o pior ponto era logo
   em 901: coluna NEGATIVA, conteúdo transbordando.

   POR QUE ISSO PASSAVA DESPERCEBIDO

   As media queries mediam a JANELA. Quem espreme o banner é a
   COLUNA dele — e entre os dois há a barra lateral, que ocupa 260px
   quando aparece e some abaixo de 768px. Os dois números nunca
   concordam, e o desencontro cria a faixa morta inteira.

   É o mesmo defeito dos cartões de missão, e a mesma correção:
   `@container`. O banner passa a ser a régua de si mesmo, e aí
   janela grande com barra lateral e janela pequena sem ela recebem
   o layout que a LARGURA REAL pede.

   E POR QUE A BARRA DE XP SOFRIA MAIS QUE O RESTO

   Ela é um SVG com viewBox 980×78 e `width:100%`. Largura e altura
   andam juntas: numa coluna de 364px ela renderiza com 29px de
   altura em vez de 78. A coluna estreita não apertava a barra —
   ACHATAVA. Daí o risco fino com o número espremido em cima.
   ══════════════════════════════════════════════════════════ */
.pt-v4-banner {
  container-type: inline-size;
  container-name: banner;
}

/* ── RESERVA para quem não tem container query ───────────────
   Navegador sem `container-type` ignora TODO `@container` — o
   banner ficaria preso no layout de três colunas, que é o defeito
   de hoje. Aqui a reserva não tenta reproduzir as faixas: só
   empilha, pela janela, num ponto folgado. Feio é melhor que
   transbordando.

   Container query é suportada desde 2022/2023 em todos os
   navegadores atuais, e este projeto já a usa nos cartões de
   missão. Isto é cinto de segurança, não plano principal. */
@supports not (container-type: inline-size) {
  @media (max-width: 1500px) {
    .pt-v4-grid {
      grid-template-columns: 1fr;
      grid-template-areas: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.2rem;
    }
    .pt-v4-nucleo { position: static !important; width: 100%; max-width: 620px; }
    .pt-v4-reliquias-dock,
    .pt-v4-epigrafe { position: static !important; transform: none; white-space: normal; }
    .pt-v4-reliquias-dock { margin: .6rem auto 0; }
  }
}

@keyframes cq-roda-to-back {
    0% { transform: translateY(0) scale(1); z-index: 30; opacity: 1; }
    50% { transform: translateY(20px) scale(0.9); z-index: 15; opacity: 0.7; }
    100% { transform: translateY(0) scale(0.8); z-index: 10; opacity: 0.4; }
  }
@keyframes cq-roda-to-front {
    0% { transform: translateY(0) scale(0.8); z-index: 10; opacity: 0.4; }
    50% { transform: translateY(-20px) scale(0.9); z-index: 20; opacity: 0.7; }
    100% { transform: translateY(0) scale(1); z-index: 30; opacity: 1; }
  }

/* ── DEGRAU DO MEIO: 621px a 1180px de BANNER ───────────────

   O layout desenhado pelo Arquiteto. Em vez de espremer três
   colunas, ele reorganiza em faixas — e resolve a barra de XP pela
   raiz, dando a ela a largura inteira:

       ┌───────────────────────────────────────┐
       │  [ B A R R A   D E   X P ]  larga     │
       │  "epígrafe"                            │
       │  [foto] NOME             [gemas]      │
       │         "título"                       │
       │            [ insígnias ]  centradas   │
       └───────────────────────────────────────┘

   A barra passa a ter ~890px em vez de 364 — ou seja, 71px de
   altura em vez de 29. Volta a ser a peça que ela foi desenhada
   para ser.

   `display: contents` no núcleo é o que torna isso possível SEM
   tocar no HTML: os três filhos dele (barra, relicário, epígrafe)
   viram itens da mesma grade e podem ser colocados em faixas
   diferentes. Sem isso seria preciso mexer no `htmlV4` — e aí a
   V4 da Vitrine e a peça deixariam de ser idênticas.

   O retrato encolhe de 168 para 140px porque o Arquiteto pediu
   para NÃO esticar o banner: as faixas novas custam altura, e ela
   volta daí. */
@container banner (min-width: 621px) and (max-width: 1180px) {
  .pt-v4-grid {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "xp      xp"
      "epi     epi"
      "hunter  gemas"
      "reliq   reliq";
    align-items: center;
    gap: .5rem 1.3rem;
    padding: 22px 0 16px;
  }

  /* O núcleo deixa de ser uma caixa: seus três filhos sobem para a
     grade e cada um vai para a sua faixa. */
  .pt-v4-nucleo        { display: contents; }
  .pt-v4-trilho-mestre { grid-area: xp; }
  .pt-v4-epigrafe      { grid-area: epi; }
  .pt-v4-avatar        { grid-area: hunter; }
  .pt-v4-gemas         { grid-area: gemas; }
  .pt-v4-reliquias-dock{ grid-area: reliq; }

  /* A epígrafe estava `position:absolute` ancorada no núcleo. Com o
     núcleo sem caixa, não há mais o que ancorar — e ela também não
     precisa: agora tem faixa própria, logo abaixo da barra. */
  .pt-v4-epigrafe {
    position: static;
    transform: none;
    width: auto;
    white-space: normal;
    text-align: center;
    margin: 0;
  }

  /* O relicário sai do posicionamento absoluto pelo mesmo motivo, e
     fica centrado na faixa dele — sem esticar o banner, porque a
     altura que ele ocupa foi devolvida pelo retrato menor. */
  .pt-v4-reliquias-dock {
    position: static;
    transform: none;
    justify-self: center;
    padding: 6px 14px;
    min-height: 0;
  }

  .pt-retrato { width: 140px; height: 140px; }
  .pt-nome    { font-size: 1.6rem; }

  /* O fio conector ligava as gemas ao núcleo, que agora está acima.
     Um fio que aponta para o lugar errado é pior que fio nenhum. */
  .pt-v4-fio-conector { display: none; }
}

@container banner (max-width: 620px) {
  .pt-v4-grid {
    grid-template-columns: 1fr;
    grid-template-areas: none; /* Desliga o grid anterior */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .pt-v4-nucleo {
    display: flex; /* Volta a ser container normal */
    position: static !important;
    width: 100%;
    max-width: 280px; 
    flex-direction: column;
    align-items: center;
  }
  
  .pt-v4-epigrafe { display: none; /* Oculta na versão super espremida (ou muda posição) */ }
  
  .pt-v4-avatar {
    flex-direction: column;
    gap: .6rem;
  }
  .pt-v4-avatar .pt-identidade { text-align: center; }
  .pt-v4-avatar .pt-chips      { justify-content: center; }
  
  /* Aglomeração Tripla */
  .pt-v4-trilho-mestre {
    order: 1; 
    z-index: 10;
  }
  
  .pt-v4-reliquias-dock {
    position: static !important;
    transform: translateY(0) scale(1);
    order: 2;
    margin-top: -18px; 
    padding: 0;        
    min-height: 0;     
    z-index: 30;       
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    white-space: normal; 
    opacity: 1;
  }
  
  .pt-v4-gemas {
    margin-top: -50px; 
    z-index: 10;       
    justify-content: center;
    width: 100%;
    transform: translateY(0) scale(0.8);
    opacity: 0.4;
  }
  
  /* CLASSE ATIVA: GEMAS NA FRENTE */
  .pt-v4-grid.cq-gemas-front .pt-v4-reliquias-dock {
    animation: cq-roda-to-back 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .pt-v4-grid.cq-gemas-front .pt-v4-gemas {
    animation: cq-roda-to-front 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  
  /* CLASSE ATIVA: BADGES NA FRENTE */
  .pt-v4-grid.cq-badges-front .pt-v4-reliquias-dock {
    animation: cq-roda-to-front 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .pt-v4-grid.cq-badges-front .pt-v4-gemas {
    animation: cq-roda-to-back 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

/* ── AÇÕES V4 (Global, Desktop e Mobile) ── */
.est-v4-acoes-mobile {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  display: flex !important;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 50;
  pointer-events: none;
}
.est-v4-acoes-mobile .est-btn-altar {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.est-v4-acoes-mobile .est-btn-altar svg {
  width: 18px;
  height: 18px;
}
.est-v4-acoes-mobile .est-btn-altar:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

/* Força o botão de editar badges a ir para a direita caso seja o único visível */
#dash-altar {
  margin-left: auto;
}

/* Oculta botão de swap (carrossel) no desktop globalmente */
#dash-altar-swap { 
  display: none !important; 
}
@media (max-width: 900px) {
  #dash-altar-swap { 
    display: inline-flex !important; 
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .pt-v4-banner { padding: 1rem .8rem; }
}


/* ── A CÂMERA DO RETRATO ────────────────────────────────────
   Só aparece onde o hospedeiro oferece a ação `trocar-foto` — hoje,
   o Perfil. No Dashboard o retrato não é clicável e o distintivo
   nem é desenhado, então não há promessa falsa de clique. */
.pt-retrato-trocavel { cursor: pointer; }
.pt-camera {
  position: absolute;
  right: 4%;
  top: 6%;
  z-index: 21;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--pt-feixe) 22%, transparent), rgba(8,10,20,.92) 72%);
  border: 1px solid color-mix(in srgb, var(--pt-feixe) 50%, transparent);
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.pt-retrato-trocavel:hover .pt-camera,
.pt-retrato-trocavel:focus-within .pt-camera { opacity: 1; transform: scale(1); }

/* No toque não existe hover: lá o distintivo fica sempre visível,
   senão o hunter não descobre que dá para trocar a foto. */
@media (hover: none) {
  .pt-camera { opacity: .9; transform: scale(1); }
}