/* =========================================================================
   MirX -- folha de estilo unica do site.
   Escura, oriental, jade e ouro sobre preto.

   Autossuficiente: nenhuma @import de origem externa, nenhuma imagem de CDN.
   As fontes vem do Google Fonts, carregadas por <link> no HTML (a CSP libera
   fonts.googleapis.com e fonts.gstatic.com), e toda font-family declara um
   plano B de sistema -- se o Google nao responder, a pagina continua legivel.

   Nenhum logotipo entra por CSS. Eles sao <img src="/static/marca/...">, para
   que trocar o arquivo troque a marca sem tocar em codigo.

   Organizacao:
     1. Tokens          6. Botoes          11. Tabela
     2. Base            7. Formularios     12. Rankings/personagens
     3. Layout          8. Alertas         13. Rodape
     4. Cabecalho       9. Cartoes         14. Utilitarios
     5. Heroi          10. Paginacao       15. Preferencias e impressao
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Fundos, do mais fundo para o mais proximo */
  --preto:      #07080a;
  --carvao:     #0c0e13;
  --grafite:    #12151d;
  --elevado:    #171b25;
  --linha:      #222836;
  --linha-forte:#2f3747;

  /* Jade: a cor da acao. Escolhida clara o bastante para passar em contraste
     AA sobre o preto (medido: #4ee0b0 sobre #07080a da' ~11:1). */
  --jade:       #4ee0b0;
  --jade-claro: #8af5d3;
  --jade-fundo: rgba(78, 224, 176, .10);
  --jade-borda: rgba(78, 224, 176, .34);
  --jade-tinta: #04231b;   /* texto sobre botao jade */

  /* Ouro: a cor do destaque e da hierarquia. Nunca usada para texto pequeno
     sobre fundo claro. */
  --ouro:       #e2c184;
  --ouro-claro: #f6e2b6;
  --ouro-fundo: rgba(226, 193, 132, .10);
  --ouro-borda: rgba(226, 193, 132, .32);
  --ouro-tinta: #21180a;

  --texto:      #e9ecf3;
  --suave:      #9aa4b6;
  /* --tenue carrega texto pequeno (dicas, legendas, cabecalho de tabela), que
     precisa de 4,5:1. O valor original (#6d7688) dava 3,77:1 sobre o fundo
     mais claro do sistema (--elevado) -- reprovava em AA justamente onde a
     letra e' menor. Medido: este aqui da' 4,58:1 sobre --elevado e 5,33:1
     sobre --preto, entao passa em TODOS os fundos usados. */
  --tenue:      #7b8496;

  --erro:       #ff7a7a;
  --erro-fundo: rgba(255, 122, 122, .10);
  --erro-borda: rgba(255, 122, 122, .34);
  --ok:         #6ee7a8;
  --ok-fundo:   rgba(110, 231, 168, .10);
  --ok-borda:   rgba(110, 231, 168, .32);

  --raio:    14px;
  --raio-sm: 10px;
  --raio-lg: 20px;

  --sombra:    0 18px 44px -18px rgba(0, 0, 0, .85);
  --sombra-lg: 0 34px 80px -26px rgba(0, 0, 0, .92);

  --largura: 76rem;
  --barra-h: 4.5rem;

  --serif: "Cinzel", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --transicao: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Brilho ambiente: jade em cima a esquerda, ouro embaixo a direita.
   E' gradiente puro -- nao ha' arquivo de imagem para faltar. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(64rem 42rem at 12% -12%, rgba(78, 224, 176, .13), transparent 62%),
    radial-gradient(54rem 38rem at 92% 108%, rgba(226, 193, 132, .10), transparent 60%);
}

/* Trama fina, tipo papel de arroz. Feita com dois gradientes cruzados de 1px:
   sem imagem, sem requisicao, e some' no modo de menos movimento. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(70rem 50rem at 50% 0%, #000 25%, transparent 78%);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .005em;
  margin: 0 0 .6rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--jade); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--jade-claro); text-decoration: underline; text-underline-offset: .18em; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5rem 0; }

code, kbd, pre {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}
code {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: .1em .4em;
  color: var(--ouro-claro);
}
pre {
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  line-height: 1.55;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

/* Foco visivel SEMPRE. `:focus-visible` mostra o anel para quem navega por
   teclado e nao para quem clica com o mouse -- o anel some' no clique, o que
   e' o que se espera, sem sacrificar a acessibilidade. */
:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--jade); color: var(--jade-tinta); }

.ic { width: 1.15em; height: 1.15em; flex: none; }

/* Texto so' para leitor de tela. */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Atalho de teclado: primeiro Tab da pagina pula a navegacao. */
.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--jade);
  color: var(--jade-tinta);
  font-weight: 600;
  padding: .7rem 1.1rem;
  border-radius: var(--raio-sm);
  transition: top var(--transicao);
}
.pular:focus { top: 1rem; text-decoration: none; }

/* -------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------- */
.conteudo { flex: 1 0 auto; padding-bottom: 5rem; }

.envelope {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.envelope--estreito { max-width: 40rem; }
.envelope--medio    { max-width: 58rem; }
.envelope--largo    { max-width: 90rem; }

.secao { padding-block: clamp(2.75rem, 6vw, 5rem); }
.secao--fina { padding-block: clamp(1.75rem, 4vw, 3rem); }

/* Cabecalho de secao: filete de ouro + titulo + linha de apoio. */
.titulo-secao { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.titulo-secao__olho {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: .5rem;
}
.titulo-secao__olho::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro));
}
.titulo-secao p { color: var(--suave); max-width: 46rem; margin-top: .35rem; }

.grade { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* -------------------------------------------------------------------------
   4. Cabecalho
   ------------------------------------------------------------------------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 8, 10, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--linha);
}
/* Fio de jade sob a barra: um detalhe, mas e' o que amarra o tema. */
.barra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--jade-borda) 25%, var(--ouro-borda) 75%, transparent);
}

.barra__in {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  min-height: var(--barra-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marca { display: flex; align-items: center; flex: none; }
.marca:hover { text-decoration: none; }
.marca__img { width: 130px; height: 41px; object-fit: contain; }

.nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__lista {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .75rem;
  border-radius: var(--raio-sm);
  color: var(--suave);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transicao), background var(--transicao);
}
.nav__link:hover { color: var(--texto); background: rgba(255, 255, 255, .045); text-decoration: none; }
.nav__link .ic { color: var(--tenue); transition: color var(--transicao); }
.nav__link:hover .ic { color: var(--jade); }
.nav__link.e-ativo { color: var(--texto); background: var(--jade-fundo); }
.nav__link.e-ativo .ic { color: var(--jade); }

.nav__conta { display: flex; align-items: center; gap: .5rem; flex: none; }
.sair-form { margin: 0; }

.menu-botao {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  color: var(--texto);
  cursor: pointer;
}
.menu-botao .ic { width: 1.4rem; height: 1.4rem; }
.menu-botao__fechar { display: none; }
.menu-botao[aria-expanded="true"] .menu-botao__abrir { display: none; }
.menu-botao[aria-expanded="true"] .menu-botao__fechar { display: block; }

@media (max-width: 60rem) {
  .menu-botao { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--barra-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 1.25rem clamp(1rem, 4vw, 2rem) 2rem;
    background: var(--carvao);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra-lg);
    max-height: calc(100dvh - var(--barra-h));
    overflow-y: auto;
    /* Escondido de verdade: `display:none` tira do fluxo E da ordem de Tab.
       Esconder so' com opacity deixaria links focaveis fora da tela. */
    display: none;
  }
  .nav.e-aberto { display: flex; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__link { padding: .8rem .9rem; font-size: 1rem; }
  .nav__conta { flex-direction: column; align-items: stretch; gap: .5rem; }
  .nav__conta .btn, .sair-form, .sair-form .btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   5. Heroi
   ------------------------------------------------------------------------- */
.heroi {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
  text-align: center;
  overflow: hidden;
}
/* O h1 do heroi e' so' o involucro do logotipo -- sem margem nem tamanho de
   fonte proprios, porque nao ha' texto dentro dele. */
.heroi__titulo { margin: 0; }
.heroi__logo {
  width: min(30rem, 78vw);
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  filter: drop-shadow(0 12px 40px rgba(78, 224, 176, .18));
}
.heroi__lede {
  max-width: 42rem;
  margin: 0 auto 2rem;
  color: var(--suave);
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
}
.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.heroi__selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding: .35rem .85rem .35rem .55rem;
  border: 1px solid var(--jade-borda);
  border-radius: 999px;
  background: var(--jade-fundo);
  color: var(--jade-claro);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.heroi__pulso {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 0 0 rgba(78, 224, 176, .6);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(78, 224, 176, .55); }
  70%  { box-shadow: 0 0 0 .55rem rgba(78, 224, 176, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 224, 176, 0); }
}

/* Faixa de numeros sob o heroi. */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.numeros__item { background: var(--carvao); padding: 1.4rem 1rem; text-align: center; }
.numeros__valor {
  display: block;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ouro-claro);
  line-height: 1.1;
}
.numeros__rotulo {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* -------------------------------------------------------------------------
   6. Botoes
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), transform 60ms ease, box-shadow var(--transicao);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
/* `display:inline-flex` acima ganha do `[hidden]{display:none}` do navegador
   (classe vence selector de atributo do UA), entao um <button class="btn"
   hidden> ficava A' VISTA -- era assim que o "Remover tudo" do painel de GM
   aparecia na caixa de "Adicionar". Devolver o hidden a quem manda. */
.btn[hidden] { display: none; }
/* `btn--mini` era usado em admin.php e NUNCA existiu aqui: os "mini" saiam do
   tamanho de um botao normal, e por isso o atalho "Moedas" e os Salvar do
   painel ficavam enormes. Isto e' o tamanho que o nome sempre prometeu. */
.btn--mini {
  padding: .38rem .7rem;
  font-size: .8rem;
  gap: .3rem;
}

.btn--jade {
  background: linear-gradient(180deg, var(--jade-claro), var(--jade));
  color: var(--jade-tinta);
  box-shadow: 0 8px 24px -12px rgba(78, 224, 176, .8);
}
.btn--jade:hover { filter: brightness(1.07); color: var(--jade-tinta); }

.btn--ouro {
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  color: var(--ouro-tinta);
  box-shadow: 0 8px 24px -12px rgba(226, 193, 132, .75);
}
.btn--ouro:hover { filter: brightness(1.06); color: var(--ouro-tinta); }

.btn--contorno {
  background: transparent;
  border-color: var(--linha-forte);
  color: var(--texto);
}
.btn--contorno:hover { border-color: var(--jade-borda); background: var(--jade-fundo); color: var(--texto); }

.btn--fantasma {
  background: transparent;
  color: var(--suave);
  padding: .6rem .85rem;
  font-weight: 500;
}
.btn--fantasma:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }

.btn--bloco { width: 100%; }
.btn--grande { padding: .95rem 1.7rem; font-size: 1.02rem; }

/* -------------------------------------------------------------------------
   7. Formularios
   ------------------------------------------------------------------------- */
.form { display: block; }
.campo { margin-bottom: 1.15rem; }

.campo > label,
.rotulo {
  display: block;
  margin-bottom: .4rem;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--suave);
}

.entrada, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  padding: .82rem 1rem;
  background: var(--grafite);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
  /* 16px de fonte impede o zoom automatico do Safari no iPhone ao focar. */
}
select {
  appearance: none;
  padding-right: 2.4rem;
  /* Seta desenhada em SVG inline (data:), nao um arquivo de icone externo. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1.05rem;
}
textarea { min-height: 8rem; resize: vertical; }

.entrada::placeholder, input::placeholder, textarea::placeholder { color: var(--tenue); }

.entrada:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px var(--jade-fundo);
  background: var(--elevado);
}
/* Teclado tambem ganha o anel externo, por cima do brilho interno. */
.entrada:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}
[aria-invalid="true"] { border-color: var(--erro); }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--erro-fundo); }

.dica { margin-top: .4rem; font-size: .8rem; color: var(--tenue); }
.dica.e-ruim { color: var(--erro); }
.dica.e-bom  { color: var(--ok); }

/* Campo de senha com botao de revelar. */
.senha { position: relative; }
.senha input { padding-right: 3rem; }
.senha__olho {
  position: absolute;
  right: .4rem;
  top: .4rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--tenue);
  cursor: pointer;
  transition: color var(--transicao), background var(--transicao);
}
.senha__olho:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.senha__olho .ic { width: 1.2rem; height: 1.2rem; }
.senha__olho .senha__off { display: none; }
.senha__olho[aria-pressed="true"] .senha__on  { display: none; }
.senha__olho[aria-pressed="true"] .senha__off { display: block; }

/* Medidor de forca: quatro tracos. */
.forca { display: flex; gap: .3rem; margin-top: .55rem; }
.forca i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--linha);
  transition: background var(--transicao);
}
.forca[data-n="1"] i:nth-child(-n+1),
.forca[data-n="2"] i:nth-child(-n+2) { background: var(--erro); }
.forca[data-n="3"] i:nth-child(-n+3) { background: var(--ouro); }
.forca[data-n="4"] i { background: var(--jade); }

/* A isca anti-robo. Fora da tela para o humano, no DOM para o robo.
   `left:-9999px` e nao `display:none` de proposito: muitos robos ignoram
   campos com display none, e o objetivo aqui e' que eles PREENCHAM. */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Barra de filtros das paginas de dados. */
/* GRELHA, nao flex (04/09/2026, pedido do dono: "deixa 4 e 4 pra ficar
   certinho"). Em flex cada campo tinha a sua largura (campo--largo pesava o
   dobro) e cada linha acabava com um numero diferente de campos: a barra
   lia-se esfarrapada. Quatro colunas iguais poem tudo alinhado em coluna, e
   os botoes vivem numa celula so' (.filtros__acoes) para nao gastarem duas.
   Contas: /admin tem 7 campos + accoes = 8 celulas = 4+4 exactas. */
.filtros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: .75rem;
  padding: 1rem;
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  margin-bottom: 1.75rem;
}
/* `min-width: 0` e' o que impede um <select> de opcoes compridas (a
   Categoria tem nomes do Mercado inteiro) de esticar a coluna e desalinhar
   as outras: sem ele, o minimo automatico do grid e' o conteudo. */
.filtros .campo { margin: 0; min-width: 0; }
.filtros .campo select,
.filtros .campo input { width: 100%; }
/* campo--largo ja' nao pesa o dobro: em grelha, colunas iguais e' o pedido. */
.filtros .campo--largo { grid-column: auto; }
.filtros__acoes { display: flex; align-items: end; gap: .5rem; }
.filtros__acoes .btn { flex: 1 1 auto; }
@media (max-width: 1100px) { .filtros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .filtros { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   8. Alertas
   ------------------------------------------------------------------------- */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--grafite);
  margin-block: 1.5rem;
  font-size: .93rem;
}
.alerta p { margin: 0; }
.alerta .ic { margin-top: .12rem; }
.alerta--erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: #ffd4d4; }
.alerta--erro .ic { color: var(--erro); }
.alerta--ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: #cdf6e2; }
.alerta--ok .ic { color: var(--ok); }
.alerta--info .ic { color: var(--jade); }

/* -------------------------------------------------------------------------
   9. Cartoes
   ------------------------------------------------------------------------- */
.cartao {
  background: linear-gradient(180deg, var(--carvao), #090b0f);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--sombra);
}
.cartao > :last-child { margin-bottom: 0; }
.cartao--painel { padding: clamp(1.75rem, 4vw, 2.5rem); }

/* Cartao clicavel: o link cobre o cartao inteiro (::after), entao a area de
   toque e' o bloco todo e nao so' o texto -- importante no celular. */
.cartao--acao { position: relative; transition: border-color var(--transicao), transform var(--transicao); }
.cartao--acao:hover { border-color: var(--jade-borda); transform: translateY(-2px); }
.cartao--acao a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); }
.cartao--acao a:hover { text-decoration: none; }

.cartao__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .9rem;
  border-radius: var(--raio-sm);
  background: var(--jade-fundo);
  border: 1px solid var(--jade-borda);
  color: var(--jade);
}
.cartao__ic .ic { width: 1.35rem; height: 1.35rem; }
.cartao__ic--ouro { background: var(--ouro-fundo); border-color: var(--ouro-borda); color: var(--ouro); }
/* Dentro de um cartao, h2 e h3 tem o MESMO tamanho. O nivel do titulo existe
   para o leitor de tela entender a hierarquia da pagina; o tamanho existe
   para o olho entender a hierarquia visual. Sao decisoes separadas, e
   confundi-las e' o que leva gente a escolher <h3> "porque fica menor". */
.cartao h2, .cartao h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.cartao p { color: var(--suave); font-size: .93rem; }

/* Cartao de formulario, centralizado na tela (login/cadastro). */
.entrada-tela {
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}
.entrada-tela .cartao { width: 100%; max-width: 30rem; }
.entrada-tela--largo .cartao { max-width: 34rem; }
.entrada-tela__topo { text-align: center; margin-bottom: 1.75rem; }
.entrada-tela__topo h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.25rem); margin-bottom: .35rem; }
.entrada-tela__topo p { color: var(--suave); font-size: .94rem; margin: 0; }
.entrada-tela__logo { width: 9rem; margin: 0 auto 1.25rem; }
.entrada-tela__rodape {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: .9rem;
  color: var(--suave);
}

/* Etiquetas. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--grafite);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--suave);
  white-space: nowrap;
}
.etiqueta--jade { border-color: var(--jade-borda); background: var(--jade-fundo); color: var(--jade-claro); }
.etiqueta--ouro { border-color: var(--ouro-borda); background: var(--ouro-fundo); color: var(--ouro-claro); }

/* Lista de pares rotulo/valor. */
.pares { display: grid; gap: .05rem; margin: 0; }
.pares > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--linha);
  font-size: .92rem;
}
.pares > div:last-child { border-bottom: 0; }
.pares dt { color: var(--tenue); }
.pares dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   10. Paginacao
   ------------------------------------------------------------------------- */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}
.paginacao a, .paginacao span {
  min-width: 2.5rem;
  padding: .5rem .7rem;
  text-align: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--grafite);
  color: var(--suave);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.paginacao a:hover { border-color: var(--jade-borda); color: var(--texto); text-decoration: none; }
.paginacao .e-ativo {
  background: var(--jade-fundo);
  border-color: var(--jade-borda);
  color: var(--jade-claro);
  font-weight: 700;
}
.paginacao .e-vazio { border: 0; background: none; min-width: auto; }

/* -------------------------------------------------------------------------
   11. Tabela
   ------------------------------------------------------------------------- */
/* Tabela larga rola DENTRO da propria caixa. O corpo da pagina nunca rola
   na horizontal -- e' a regra que mantem o layout inteiro sao no celular. */
.tabela-caixa {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--carvao);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--elevado);
  text-align: left;
  padding: .8rem 1rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tenue);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--transicao); }
tbody tr:hover { background: rgba(255, 255, 255, .028); }
.num-col { text-align: right; font-variant-numeric: tabular-nums; }
caption { caption-side: bottom; padding: .8rem 1rem; color: var(--tenue); font-size: .84rem; text-align: left; }

/* -------------------------------------------------------------------------
   12. Rankings e personagens
   ------------------------------------------------------------------------- */
.posto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--grafite);
  border: 1px solid var(--linha);
  font-family: var(--serif);
  font-weight: 700;
  font-size: .9rem;
  color: var(--suave);
}
.posto--1 { background: var(--ouro-fundo); border-color: var(--ouro-borda); color: var(--ouro-claro); }
.posto--2 { background: rgba(203, 213, 225, .10); border-color: rgba(203, 213, 225, .28); color: #dbe2ec; }
.posto--3 { background: rgba(205, 127, 50, .12); border-color: rgba(205, 127, 50, .32); color: #e6b183; }

/* Cartao de personagem do painel. */
.personagem {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.1rem;
  align-items: start;
  background: linear-gradient(180deg, var(--carvao), #090b0f);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.1rem;
  transition: border-color var(--transicao);
}
.personagem:hover { border-color: var(--jade-borda); }
.personagem__retrato {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--raio-sm);
  object-fit: cover;
  background: var(--grafite);
  border: 1px solid var(--linha);
}
.personagem__nome { font-size: 1.1rem; margin-bottom: .3rem; }
.personagem__linha { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.personagem .pares > div { padding: .38rem 0; font-size: .87rem; }

@media (max-width: 26rem) {
  .personagem { grid-template-columns: 1fr; }
  .personagem__retrato { width: 100%; height: 9rem; }
}

/* Barra de experiencia. A largura vem de um <style nonce> gerado em PHP;
   nao ha' atributo style inline (a CSP nao permite). */
.barra-exp {
  height: 5px;
  border-radius: 3px;
  background: var(--linha);
  overflow: hidden;
  margin-top: .5rem;
}
.barra-exp > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--jade), var(--jade-claro));
}

/* Grade de itens/monstros. */
.itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .85rem;
}
.item-quadro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .85rem .6rem;
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  text-align: center;
  transition: border-color var(--transicao), transform var(--transicao);
}
.item-quadro:hover { border-color: var(--jade-borda); transform: translateY(-2px); }
.item-quadro img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.item-quadro__nome {
  font-size: .8rem;
  line-height: 1.35;
  color: var(--texto);
  overflow-wrap: anywhere;
}
.item-quadro__id { font-size: .7rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
/* Cor da borda por raridade: comum -> mitico.
   CORES OFICIAIS, medidas no atlas Atlas_Shop_GradeBg do cliente (02/09/2026):
   incomum verde #087011, raro azul #085ba9, EPICO VERMELHO #8c130e (nao roxo
   -- era o erro daqui), lendario dourado #b6870d, mitico roxo #5d0b89. Bate
   com as molduras do Mercado Unificado e dos Mercadores de Criacao no jogo. */
.g-1 { border-color: var(--linha-forte); }
.g-2 { border-color: rgba(8, 112, 17, .65); }
.g-3 { border-color: rgba(8, 91, 169, .7); }
.g-4 { border-color: rgba(140, 19, 14, .75); }
.g-5 { border-color: rgba(182, 135, 13, .75); box-shadow: inset 0 0 22px -12px rgba(182, 135, 13, .9); }
.g-6 { border-color: rgba(93, 11, 137, .8);  box-shadow: inset 0 0 22px -12px rgba(140, 60, 200, .9); }

/* Icone sobre o FUNDO DE GRAU, como no jogo: o PNG do icone e' transparente
   (90x90 RGBA), entao o quadrado colorido por tras diz a raridade sem ler o
   texto. O slot oficial e' um quadrado cinza com brilho radial e uma mancha
   da cor do grau por cima (Slot_Item_BG_01 + Atlas_Shop_GradeBg). O selo
   "T1..T4" e' o tier (o sprite oficial tem texto coreano, por isso e' nosso). */
.item-quadro__icone {
  position: relative;
  width: 3.9rem; height: 3.9rem;
  display: grid; place-items: center;
  border-radius: .6rem;
  border: 1px solid var(--linha-forte);
  background: radial-gradient(circle at 50% 42%, #3b404b 0%, #1a1d24 78%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.item-quadro__icone img { width: 3.3rem; height: 3.3rem; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.g-2 .item-quadro__icone { border-color: rgba(8, 112, 17, .85);   background: radial-gradient(circle at 50% 42%, #0f8a1c 0%, #087011 40%, #0a2a0d 82%); }
.g-3 .item-quadro__icone { border-color: rgba(8, 91, 169, .9);    background: radial-gradient(circle at 50% 42%, #1a74c8 0%, #085ba9 40%, #0a1f3c 82%); }
.g-4 .item-quadro__icone { border-color: rgba(140, 19, 14, .9);   background: radial-gradient(circle at 50% 42%, #b01a12 0%, #8c130e 40%, #2e0907 82%); }
.g-5 .item-quadro__icone { border-color: rgba(182, 135, 13, .9);  background: radial-gradient(circle at 50% 42%, #d9a416 0%, #b6870d 40%, #3a2b06 82%); }
.g-6 .item-quadro__icone { border-color: rgba(93, 11, 137, .9);   background: radial-gradient(circle at 50% 42%, #7a14b3 0%, #5d0b89 40%, #1f0530 82%); }
.item-quadro__tier {
  position: absolute; left: -.25rem; top: -.25rem;
  font-size: .58rem; font-weight: 700; line-height: 1; letter-spacing: .02em;
  padding: .2rem .3rem; border-radius: .3rem;
  color: #f3e8cc; background: rgba(8, 9, 12, .88);
  border: 1px solid rgba(255, 255, 255, .2);
  font-variant-numeric: tabular-nums;
}

/* Estado vazio. */
.vazio {
  text-align: center;
  padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  color: var(--suave);
}
.vazio .ic { width: 2.25rem; height: 2.25rem; color: var(--tenue); margin: 0 auto 1rem; }
.vazio h2, .vazio h3 { color: var(--texto); font-size: 1.35rem; }

/* Passos numerados (pagina de instalacao). */
.passos { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.passos > li {
  counter-increment: passo;
  position: relative;
  padding: 1.15rem 1.25rem 1.15rem 3.75rem;
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jade-fundo);
  border: 1px solid var(--jade-borda);
  color: var(--jade-claro);
  font-family: var(--serif);
  font-weight: 700;
  font-size: .9rem;
}
.passos h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.passos p { color: var(--suave); font-size: .93rem; }

/* Perguntas e respostas. */
.qa { display: grid; gap: .75rem; }
.qa details {
  background: var(--carvao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--transicao);
}
.qa details[open] { border-color: var(--jade-borda); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  color: var(--texto);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--jade);
  border-bottom: 2px solid var(--jade);
  transform: rotate(45deg);
  transition: transform var(--transicao);
}
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { background: rgba(255, 255, 255, .03); }
.qa__corpo { padding: 0 1.25rem 1.25rem; color: var(--suave); font-size: .95rem; }
.qa__corpo > :last-child { margin-bottom: 0; }

/* Bloco de texto longo (termos de uso). */
.prosa { max-width: 46rem; }
.prosa h2 { margin-top: 2.5rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa ul, .prosa ol { color: var(--suave); padding-left: 1.25rem; }
.prosa li { margin-bottom: .45rem; }
.prosa p { color: var(--suave); }

/* -------------------------------------------------------------------------
   13. Rodape
   ------------------------------------------------------------------------- */
.rodape {
  flex: none;
  margin-top: auto;
  border-top: 1px solid var(--linha);
  background: rgba(9, 10, 13, .7);
}
.rodape__in {
  max-width: var(--largura);
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1rem, 4vw, 2rem) 2rem;
  display: grid;
  grid-template-columns: minmax(14rem, 1.3fr) 2fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.rodape__marca img { width: 130px; height: 41px; object-fit: contain; margin-bottom: .85rem; }
.rodape__marca p { color: var(--tenue); font-size: .87rem; max-width: 22rem; }
.rodape__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.5rem; }
.rodape__cols h2 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: .75rem;
}
.rodape__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rodape__cols a { color: var(--suave); font-size: .9rem; }
.rodape__cols a:hover { color: var(--jade); }
.rodape__base {
  max-width: var(--largura);
  margin-inline: auto;
  padding: 1.25rem clamp(1rem, 4vw, 2rem) 2rem;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}
.rodape__base p { margin: 0; font-size: .82rem; color: var(--tenue); }
.rodape__nota { color: var(--tenue); }

@media (max-width: 46rem) {
  .rodape__in { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   14. Utilitarios
   ------------------------------------------------------------------------- */
.centro     { text-align: center; }
.suave      { color: var(--suave); }
.tenue      { color: var(--tenue); }
.miudo      { font-size: .85rem; }
.mono       { font-variant-numeric: tabular-nums; }
.linha-btn  { display: flex; flex-wrap: wrap; gap: .6rem; }
.linha-btn--centro { justify-content: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1.5rem; }

/* -------------------------------------------------------------------------
   15. Preferencias e impressao
   ------------------------------------------------------------------------- */

/* Quem pediu menos movimento recebe menos movimento. Nao e' enfeite: para
   parte das pessoas animacao causa enjoo de verdade. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body::after { display: none; }
  .cartao--acao:hover, .item-quadro:hover { transform: none; }
}

/* Modo de alto contraste: bordas mais firmes. */
@media (prefers-contrast: more) {
  :root { --linha: #4a5364; --linha-forte: #6a7488; --suave: #c4cbd8; --tenue: #97a1b2; }
}

@media print {
  body::before, body::after, .barra, .rodape, .pular, .paginacao, .filtros { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao, .tabela-caixa { border-color: #999; box-shadow: none; }
  a { color: #000; text-decoration: underline; }
}

/* -------------------------------------------------------------------------
   16. Painel "Onde obter" (enciclopedia de itens, pedido do dono 02/09)
   ------------------------------------------------------------------------- */
/* Resumo de uma linha no cartao -- so' aparece quando ha' busca por nome
   (site/database.php decide isso em PHP; aqui e' so' o estilo). */
.item-quadro__resumo-rota {
  font-size: .68rem;
  line-height: 1.3;
  color: var(--tenue);
  overflow-wrap: anywhere;
}

/* Botao "Onde obter": CRIADO POR JAVASCRIPT (mirx.js), igual ao botao de
   mostrar senha do login/cadastro -- sem JavaScript ele nao existe, entao nao
   ha' fallback de navegacao para escrever aqui (ver o comentario no topo de
   mirx.js sobre esse padrao). */
.item-quadro__rota {
  margin-top: .1rem;
  padding: .3rem .5rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--grafite);
  color: var(--jade-claro);
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao);
}
.item-quadro__rota:hover, .item-quadro__rota:focus-visible {
  border-color: var(--jade-borda);
  color: var(--jade);
}

/* <dialog> nativo: sem biblioteca nenhuma, centraliza sozinho no top layer,
   fecha com Esc e com clique no ::backdrop de graca. */
.painel-rota {
  position: relative;
  width: min(30rem, 92vw);
  max-height: min(80vh, 42rem);
  overflow-y: auto;
  margin: auto;
  padding: clamp(1.35rem, 4vw, 1.85rem);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--carvao), #090b0f);
  color: var(--texto);
  box-shadow: var(--sombra);
}
.painel-rota::backdrop { background: rgba(4, 5, 7, .72); }
.painel-rota h2 { font-size: 1.15rem; margin: 0 0 1rem; padding-right: 2.25rem; }
.painel-rota__fechar { position: absolute; top: 1rem; right: 1rem; margin: 0; }
.painel-rota .btn-fechar {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--grafite);
  color: var(--suave);
}
.painel-rota .btn-fechar:hover { border-color: var(--jade-borda); color: var(--texto); }
.painel-rota .btn-fechar .ic { width: 1.1rem; height: 1.1rem; }

.painel-rota__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.painel-rota__lista li {
  padding: .75rem .85rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--grafite);
  font-size: .88rem;
  color: var(--suave);
}
.painel-rota__tipo { display: block; margin-bottom: .3rem; font-weight: 700; color: var(--jade-claro); }
.painel-rota__materiais {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  color: var(--suave);
  font-size: .84rem;
}