/* =========================================================
   L2 Chase — Painel do Jogador
   Tokens herdados de site/index.html, sem alteracao. A regra da
   direcao de arte vale aqui: o ouro e a cor da marca; as outras
   entram so quando significam alguma coisa.
   ========================================================= */
:root{
  --bg:#15100B; --bg2:#1E1710; --bg3:#241C13;
  --line:rgba(201,154,60,.20); --line2:rgba(201,154,60,.10);
  --tx:#D9CDB3; --tx2:#8C7A5A;
  --gold:#C99A3C; --gold-lt:#F3E2B9;
  --dis:"Cinzel",Georgia,"Times New Roman",serif;
  --bod:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Cada cor vem da nossa arte e carrega um significado fixo.
     Cor sem significado vira enfeite e polui a leitura. */
  --rubi:#B23A3A; --rubi-lt:#E08A82;    /* escudo do brasao · erro, gasto  */
  --aco:#7A8794;                        /* laminas do brasao · neutro      */
  --arcano:#5B9BD9; --arcano-lt:#9BC8F0;/* raio do mago · magia, nivel     */
  --cobre:#C2723A;                      /* escudo do heroi · aviso         */
  --erva:#6E8264;                       /* capa do heroi · sucesso, online */

  --r:14px; --r2:9px; --r3:7px; --r4:999px;
  --sp:clamp(1rem,4vw,2rem);
  --maxw:1340px; --nav-h:54px; --rail:236px;

  /* Tokens do refino de 08/09/2026 (mockup aprovado). Os antigos acima
     continuam existindo para as telas que ainda nao foram reescritas; os
     novos sao os que o desenho aprovado usa. Mesma familia de cor. */
  --sf:#1F1811; --sf2:#261E15;
  --ln:rgba(201,154,60,.20); --ln2:rgba(201,154,60,.10); --ln3:rgba(201,154,60,.34);
  --tx3:#5E5140;
  --gold2:#E4BC63; --gold3:#F3E2B9;
  --erva2:#A9C49B; --rubi2:#E48C86; --arcano2:#A8CCF3;
  --gS:#E8C56A; --gA:#E06B5E; --gB:#6B9BE0; --gC:#7DB37A;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--bod);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--dis);color:var(--gold-lt);margin:0;line-height:1.14;
  letter-spacing:.01em;text-wrap:balance}
p{text-wrap:pretty}

.olho{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx2);font-weight:600}
/* Dado que o jogador vai digitar no cliente do jogo. NUNCA em Cinzel:
   a fonte transforma minuscula em versalete, e "chase01" vira "CHASE01". */
.dado{font-family:var(--bod);font-weight:700;color:var(--gold-lt)}

.pular{position:absolute;left:-9999px;top:0;background:var(--gold);
  color:#15100B;padding:.6rem 1rem;z-index:100}
.pular:focus{left:0}

/* ══ a cena de L2 fica atras de tudo: o painel vive dentro do mundo ══ */
.cena{position:fixed;inset:0;z-index:-2;
  background:var(--cena-url) center/cover no-repeat;
  filter:brightness(.30) saturate(.55)}
.cena::after{content:"";position:absolute;inset:0;background:
  radial-gradient(1100px 620px at 22% 0%,rgba(194,114,58,.20),transparent 62%),
  linear-gradient(180deg,rgba(21,16,11,.72) 0%,rgba(21,16,11,.93) 46%,#15100B 88%)}

/* ══ TOPO ══ */
.topo{position:sticky;top:0;z-index:50;background:rgba(18,13,9,.82);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line2)}
.topo-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--sp);
  display:flex;align-items:center;gap:1rem;min-height:var(--nav-h)}
.marca{display:flex;align-items:center;gap:.85rem;margin-inline-end:auto}
.marca img{height:32px;width:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(201,154,60,.30))}
.marca .div{width:1px;height:20px;background:var(--line)}
.marca .ctx{font-family:var(--dis);font-size:.82rem;color:var(--gold);
  letter-spacing:.12em;text-transform:uppercase}

.saldo-topo{display:flex;align-items:center;gap:.5rem;padding:.28rem .8rem;
  border:1px solid rgba(201,154,60,.42);border-radius:var(--r4);
  background:linear-gradient(180deg,rgba(201,154,60,.16),rgba(201,154,60,.05))}
.saldo-topo .cm{width:16px;height:16px;flex:none;margin:0}
.saldo-topo b{font-family:var(--dis);font-size:.95rem;color:var(--gold-lt);font-weight:600}
.saldo-topo span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx2);font-weight:600}

.eu{display:flex;align-items:center;gap:.7rem;font-size:.78rem;color:var(--tx2)}
.eu form{display:inline}
.eu .sair{background:none;border:0;cursor:pointer;padding:0;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--tx2)}
.eu .sair:hover{color:var(--gold-lt)}
@media (max-width:820px){.saldo-topo span,.eu .email{display:none}.marca img{height:26px}}

/* ══ ESTRUTURA ══ */
.painel{max-width:var(--maxw);margin:0 auto;padding-inline:var(--sp);
  display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:980px){.painel{grid-template-columns:var(--rail) 1fr;gap:2rem}}

/* `min-width:0` NAO e detalhe: item de grade nasce com min-width:auto e se
   recusa a encolher abaixo do conteudo. Como o menu tem itens `nowrap`, ele
   empurrava a pagina inteira para 629px num celular de 390px, e tudo rolava
   de lado. O `.conteudo` ja tinha; o trilho nao. */
.rail{padding-top:1.6rem;min-width:0}
@media (min-width:980px){.rail{position:sticky;top:calc(var(--nav-h) + 1.2rem);align-self:start}}
.rail nav{display:flex;flex-wrap:wrap;gap:.3rem;padding-bottom:.3rem}
@media (min-width:980px){.rail nav{flex-direction:column;overflow:visible}}
.rail a{display:flex;align-items:center;gap:.75rem;white-space:nowrap;
  padding:.7rem .9rem;border-radius:var(--r2);font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--tx2);
  border:1px solid transparent;transition:color .18s,background .18s,border-color .18s}
.rail a svg{width:17px;height:17px;flex:none;opacity:.85}
.rail a:hover{color:var(--gold-lt);background:rgba(201,154,60,.07)}
.rail a[aria-current="page"]{color:var(--gold-lt);border-color:rgba(201,154,60,.34);
  background:linear-gradient(100deg,rgba(201,154,60,.20),rgba(201,154,60,.04))}
.rail a[aria-current="page"] svg{color:var(--gold);opacity:1}
.rail .grupo{padding:1.4rem .9rem .5rem}
@media (max-width:979px){.rail .grupo{display:none}.rail{padding-top:1rem}}

.selo-rail{margin-top:1.6rem;padding:1.1rem;border-radius:var(--r);
  border:1px solid var(--line2);background:rgba(30,23,16,.5);text-align:center}
/* o PNG do brasao tem fundo preto chapado, nao alfa: `screen` apaga o preto */
.selo-rail img{width:80px;height:80px;display:block;margin:0 auto .6rem;
  mix-blend-mode:screen;filter:saturate(1.3) contrast(1.12) brightness(1.15)}
.selo-rail .t{font-family:var(--dis);font-size:.82rem;color:var(--gold)}
.selo-rail .s{font-size:.68rem;color:var(--tx2);margin-top:.15rem}
@media (max-width:979px){.selo-rail{display:none}}

.conteudo{padding-block:1.6rem 4rem;min-width:0}

/* ══ FAIXA DE ARTE ══ */
.faixa-arte{position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);height:238px;display:flex;align-items:center;
  margin-bottom:1.6rem}
/* `cover` numa faixa larga e baixa amplia demais e vira detalhe irreconhecivel */
.faixa-arte .art{position:absolute;inset:0;
  background:var(--cena-faixa) center 22%/auto 260% no-repeat;
  filter:brightness(.48) saturate(.8)}
.faixa-arte .veu{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(21,16,11,.97) 0%,rgba(21,16,11,.90) 38%,rgba(21,16,11,.34) 66%,rgba(21,16,11,.06) 100%)}
/* Ancorado pela CABECA: pelo pe, o corte caia na altura do busto. */
.faixa-arte .pj{position:absolute;right:3.5%;top:-10%;height:170%;width:auto;
  object-fit:contain;object-position:top;pointer-events:none;z-index:1;
  filter:drop-shadow(-16px 6px 30px rgba(0,0,0,.75)) brightness(1.04);
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 92%)}
@media (max-width:760px){.faixa-arte{height:200px}.faixa-arte .pj{opacity:.28;right:-10%}}
.faixa-arte .in{position:relative;z-index:2;padding:1.7rem clamp(1.2rem,3vw,2rem)}
.faixa-arte h1{font-size:clamp(1.6rem,3.6vw,2.35rem);font-weight:600;margin-top:.5rem}
.faixa-arte p{margin:.6rem 0 0;color:var(--tx);font-size:.94rem;max-width:56ch;
  text-shadow:0 1px 12px rgba(21,16,11,.9)}

/* ══ CARTOES ══ */
.card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(36,28,19,.86),rgba(21,16,11,.86));
  backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.32)}
.card-cab{display:flex;align-items:center;gap:.85rem;padding:1.05rem 1.25rem;
  border-bottom:1px solid var(--line2)}
.card-cab h2{font-size:1.02rem;font-weight:600}
.card-cab p{margin:.12rem 0 0;font-size:.8rem;color:var(--tx2)}
.card-cab .fim{margin-inline-start:auto}
.card-corpo{padding:1.25rem}

.ico{width:36px;height:36px;border-radius:var(--r3);flex:none;display:grid;
  place-items:center;border:1px solid currentColor;
  background:color-mix(in srgb,currentColor 14%,transparent)}
.ico svg{width:18px;height:18px}
.c-ouro{color:var(--gold)} .c-rubi{color:var(--rubi-lt)} .c-arcano{color:var(--arcano)}
.c-erva{color:var(--erva)} .c-cobre{color:var(--cobre)} .c-aco{color:var(--aco)}

.grade2{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:900px){.grade2{grid-template-columns:1fr 1fr}}
.pilha{display:flex;flex-direction:column;gap:1.25rem}

/* ══ NUMEROS ══ */
.numeros{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  margin-bottom:1.4rem}
.numeros .num{border:1px solid var(--line2);border-radius:var(--r);padding:1.1rem 1.2rem 1.25rem;
  background:linear-gradient(160deg,rgba(36,28,19,.9),rgba(21,16,11,.9));
  position:relative;overflow:hidden}
.numeros .num::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor}
.numeros .num b{display:block;font-family:var(--dis);font-size:1.95rem;font-weight:600;
  line-height:1.1;margin-top:.5rem;color:currentColor}
.numeros .num .pe{font-size:.77rem;color:var(--tx2);margin-top:.25rem}
.numeros .num .pe a{color:currentColor;font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.numeros .num .pe a:hover{filter:brightness(1.25)}

/* ══ BOTOES ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border-radius:var(--r2);padding:.72rem 1.4rem;cursor:pointer;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  background:linear-gradient(180deg,#E0B45A,var(--gold));color:#1B1206;
  border:1px solid #E0B45A;box-shadow:0 6px 18px rgba(201,154,60,.22);
  transition:filter .18s,transform .12s,box-shadow .18s}
.btn:hover{filter:brightness(1.09);box-shadow:0 8px 24px rgba(201,154,60,.34)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px}
.btn-vazio{background:none;color:var(--gold);border-color:var(--line);box-shadow:none}
.btn-vazio:hover{background:rgba(201,154,60,.12);border-color:var(--gold);
  color:var(--gold-lt);box-shadow:none}
.btn-pequeno{padding:.42rem .85rem;font-size:.68rem}
.btn-bloco{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;
  filter:none;box-shadow:none}
.btn .seta{transition:transform .2s ease}
.btn[aria-expanded="true"] .seta{transform:rotate(180deg)}

/* ══ FORMULARIO ══ */
.campo{margin-bottom:1.15rem}
.campo label{display:block;margin-bottom:.42rem;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx2);font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;border-radius:var(--r3);
  background:rgba(12,9,6,.65);border:1px solid var(--line);padding:.72rem .9rem;
  color:var(--tx);font-size:.95rem;transition:border-color .18s,box-shadow .18s}
.campo input::placeholder{color:var(--tx2);opacity:.7}
.campo input:hover,.campo select:hover{border-color:rgba(201,154,60,.42)}
.campo input:focus,.campo select:focus{border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(201,154,60,.16)}
.campo input[aria-invalid="true"]{border-color:var(--rubi)}
.campo .dica,.campo .helptext{margin-top:.38rem;font-size:.77rem;color:var(--tx2);
  text-wrap:pretty;display:block}
.campo .dica.ok{color:var(--erva)} .campo .dica.erro{color:var(--rubi-lt)}
.campo ul.errorlist{margin:.38rem 0 0;padding:0;list-style:none;
  font-size:.8rem;color:var(--rubi-lt)}

/* ══ LISTAS ══ */
.lista{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:1rem;padding:.85rem 1.25rem;
  border-bottom:1px solid var(--line2);transition:background .18s}
.item:last-child{border-bottom:0}
.item:hover{background:rgba(201,154,60,.05)}
.item .nome{font-family:var(--dis);color:var(--gold-lt);font-size:1.02rem}
.item .meta{font-size:.79rem;color:var(--tx2)}
.item .fim{margin-inline-start:auto;display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end}

/* medalhao do personagem, colorido pelo arquetipo da classe */
.pj-med{width:44px;height:44px;border-radius:var(--r4);flex:none;display:grid;
  place-items:center;font-family:var(--dis);font-size:1.02rem;font-weight:600;
  color:#15100B;border:2px solid rgba(21,16,11,.55)}
.k-guerreiro{background:linear-gradient(140deg,#E2A05A,var(--cobre))}
.k-mago{background:linear-gradient(140deg,var(--arcano-lt),var(--arcano))}
.k-arqueiro{background:linear-gradient(140deg,#B9D3A5,var(--erva))}
.k-suporte{background:linear-gradient(140deg,#F0DFB8,var(--gold))}
.k-anao{background:linear-gradient(140deg,#D08F87,var(--rubi))}
.k-outro{background:linear-gradient(140deg,#B9C2CC,var(--aco))}

.selo{font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  padding:.24rem .65rem;border-radius:var(--r4);border:1px solid currentColor;
  background:color-mix(in srgb,currentColor 13%,transparent);color:var(--aco)}
.selo.on{color:var(--erva)} .selo.fila{color:var(--cobre)} .selo.mal{color:var(--rubi-lt)}

/* gaveta com os personagens de uma conta */
.gaveta-pj{background:rgba(12,9,6,.5);border-bottom:1px solid var(--line2);
  padding:.3rem 1.25rem .3rem 2rem;border-left:2px solid var(--gold)}
.gaveta-pj .item{padding-inline:0}
[hidden]{display:none !important}

/* ══ AVISO ══ */
.faixa{display:flex;gap:.8rem;padding:.9rem 1.1rem;border-radius:var(--r3);
  border:1px solid color-mix(in srgb,currentColor 34%,transparent);
  background:color-mix(in srgb,currentColor 10%,transparent);
  font-size:.87rem;color:var(--tx2);text-wrap:pretty}
.faixa svg{width:17px;height:17px;flex:none;margin-top:.15rem;color:currentColor}
.faixa b{color:var(--tx);font-weight:700}
.a-cobre{color:var(--cobre)} .a-erva{color:var(--erva)}
.a-rubi{color:var(--rubi-lt)} .a-arcano{color:var(--arcano)}

/* estado vazio escrito, nunca lista em branco */
.vazio-bloco{padding:3rem 1.5rem;text-align:center}
.vazio-bloco svg{width:34px;height:34px;color:var(--line);display:block;margin:0 auto 1rem}
.vazio-bloco .t{font-family:var(--dis);color:var(--gold-lt);font-size:1.1rem}
.vazio-bloco .s{color:var(--tx2);font-size:.87rem;margin-top:.4rem;max-width:46ch;
  margin-inline:auto;text-wrap:pretty}

/* ══ TABELA / RANKING ══ */
.abas{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.9rem}
.abas a{border-radius:var(--r4);border:1px solid var(--line2);background:rgba(30,23,16,.6);
  padding:.5rem 1.05rem;white-space:nowrap;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--tx2);transition:all .18s}
.abas a:hover{color:var(--gold-lt);border-color:var(--line)}
.abas a[aria-current="true"]{color:#1B1206;border-color:var(--gold);
  background:linear-gradient(180deg,#E0B45A,var(--gold))}

.rolagem{overflow-x:auto}
/* min() em vez de 520px fixo: no desktop segura a largura confortavel,
   no celular vira 100% e a tabela para de esconder coluna (07/09/2026). */
.rank{width:100%;border-collapse:collapse;font-size:.92rem;min-width:min(520px,100%)}
.rank th{text-align:left;padding:.75rem 1.25rem;border-bottom:1px solid var(--line);
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);font-weight:700}
.rank td{padding:.7rem 1.25rem;border-bottom:1px solid var(--line2)}
.rank tr:last-child td{border-bottom:0}
.rank tbody tr:hover{background:rgba(201,154,60,.05)}
.rank .pos{width:3.4rem}
.rank .pos i{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r4);
  font-style:normal;font-family:var(--dis);font-size:.85rem;font-weight:600;
  border:1px solid var(--line2);color:var(--tx2)}
.rank tbody tr:nth-child(1) .pos i{background:linear-gradient(140deg,#F0DFB8,var(--gold));
  color:#1B1206;border-color:var(--gold)}
.rank tbody tr:nth-child(2) .pos i{background:linear-gradient(140deg,#D9D9D9,var(--aco));
  color:#1B1206;border-color:var(--aco)}
.rank tbody tr:nth-child(3) .pos i{background:linear-gradient(140deg,#E2A05A,var(--cobre));
  color:#1B1206;border-color:var(--cobre)}
.rank .pj{font-family:var(--dis);color:var(--gold-lt)}
.rank .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.rank .cl{color:var(--tx2)}

/* ══ ENTRAR / CADASTRO ══ */
.porta{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:2rem var(--sp) 4rem}
@media (min-width:1000px){.porta{grid-template-columns:1.05fr .95fr}}
/* Altura fixa: sem ela a arte de 1150px estica o cartao e estoura a tela.
   O recorte do mago e estreito e nunca preenche a largura — antes sobrava
   cinza chapado dos dois lados. Agora a cena do L2 preenche o fundo e o
   brilho arcano puxa o olho para o centro. */
/* O quadro tem a PROPORCAO da arte (700x1150 do arquivo), nao uma altura
   arbitraria. Assim a imagem preenche de borda a borda e nao sobra fundo em
   volta — era o que fazia a arte parecer pequena dentro de uma caixa.
   `aspect-ratio` + `height:auto` deixam o cartao encolher junto com a tela. */
.porta-arte{position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line2);
  /* Com aspect-ratio, UMA dimensao precisa ser concreta. `height` e `width`
     ambos em auto davam caixa de tamanho zero e a arte sumia da tela. */
  aspect-ratio:700/1010;height:min(74vh,640px);width:auto;
  margin-inline:auto;background:#0F1219}
/* Com a arte cobrindo tudo, nao ha mais o que mascarar: a moldura do PNG
   morre na propria borda do cartao. */
.porta-arte .pj{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;transform:none}
.porta-arte .logao{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:min(78%,340px);
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.9));z-index:2}
@media (max-width:999px){.porta-arte{display:none}}

.caixa{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(36,28,19,.9),rgba(21,16,11,.92));
  backdrop-filter:blur(8px);box-shadow:0 18px 46px rgba(0,0,0,.45)}
.caixa .topo-caixa{display:flex;border-bottom:1px solid var(--line)}
.caixa .topo-caixa a{flex:1;padding:1.05rem;border-bottom:2px solid transparent}
.caixa .topo-caixa a[aria-current="page"]{border-bottom-color:var(--gold);
  background:rgba(201,154,60,.08)}
.caixa .topo-caixa .t{font-family:var(--dis);font-size:1rem;color:var(--tx2)}
.caixa .topo-caixa a[aria-current="page"] .t{color:var(--gold-lt)}
.caixa .topo-caixa .s{font-size:.73rem;color:var(--tx2);margin-top:.12rem}
.caixa .corpo{padding:1.6rem}
.ou{display:flex;align-items:center;gap:.8rem;margin:1.3rem 0;color:var(--tx2);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line2)}
.google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  border:1px solid var(--line);border-radius:var(--r2);background:rgba(12,9,6,.5);
  padding:.7rem;cursor:pointer;font-size:.88rem;transition:border-color .18s}
.google:hover{border-color:var(--gold)}
.google svg{width:17px;height:17px}
.pe-caixa{text-align:center;margin-top:1.2rem;font-size:.79rem;color:var(--tx2)}
.pe-caixa a{color:var(--gold)}

/* ══ MENSAGENS DO DJANGO ══ */
.recados{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.4rem}

/* ══ RODAPE ══ */
.rodape{border-top:1px solid var(--line2);background:rgba(18,13,9,.6);
  padding:2rem 0;margin-top:2rem}
.rodape-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--sp);
  display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;
  font-size:.76rem;color:var(--tx2)}
.rodape-in nav{display:flex;gap:1.1rem;flex-wrap:wrap;margin-inline-start:auto}
.rodape-in a:hover{color:var(--gold-lt)}
.rodape .legal{width:100%;font-size:.7rem;line-height:1.5;max-width:100ch}

/* ══ CAMPO COM MARCA (checkbox e radio) ══
   Nasce do formulario da allauth: "lembrar de mim" no login e a escolha de
   e-mail principal. Sem isto o checkbox herda `width:100%` do .campo input
   e vira uma barra atravessando a tela. */
.campo-marca{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.campo-marca input{width:auto;flex:none;accent-color:var(--gold);
  width:16px;height:16px;margin:0;padding:0}
.campo-marca label{margin:0;text-transform:none;letter-spacing:0;
  font-size:.88rem;color:var(--tx);font-weight:400;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* A allauth manda o "esqueci a senha" como help_text do campo. Sem isto ele
   fica cinza e some no meio do formulario. */
.campo .helptext a{color:var(--gold);font-weight:600}
.campo .helptext a:hover{color:var(--gold-lt)}

/* ══ DOCUMENTOS LEGAIS ══════════════════════════════════════
   Termos, Privacidade, Regras, Cookies, Reembolso. Sao paginas de
   LEITURA, nao de painel: sem menu lateral, coluna estreita, e o texto
   com respiro. Ninguem le clausula em linha de 120 caracteres.
   ═══════════════════════════════════════════════════════════ */
.doc-area{max-width:var(--maxw);margin:0 auto;padding:2rem var(--sp) 4rem;
  display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:900px){.doc-area{grid-template-columns:232px 1fr}}

.doc-menu{min-width:0}
@media (min-width:900px){.doc-menu{position:sticky;top:calc(var(--nav-h) + 1.2rem);align-self:start}}
.doc-menu .grupo{padding:0 .9rem .5rem}
.doc-menu nav{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.3rem}
@media (min-width:900px){.doc-menu nav{flex-direction:column;overflow:visible}}
.doc-menu a{display:block;white-space:nowrap;padding:.6rem .9rem;border-radius:var(--r2);
  font-size:.8rem;color:var(--tx2);border:1px solid transparent;transition:all .18s}
.doc-menu a:hover{color:var(--gold-lt);background:rgba(201,154,60,.07)}
.doc-menu a[aria-current="page"]{color:var(--gold-lt);border-color:rgba(201,154,60,.34);
  background:linear-gradient(100deg,rgba(201,154,60,.20),rgba(201,154,60,.04))}

.doc{min-width:0;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(36,28,19,.86),rgba(21,16,11,.86));
  padding:clamp(1.4rem,4vw,2.6rem)}
.doc-cab{padding-bottom:1.2rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line2)}
.doc-cab h1{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:600;margin-top:.45rem}
.doc-cab .quando{margin-top:.6rem;font-size:.8rem;color:var(--tx2)}

/* Coluna de leitura. 68ch e o limite pratico: acima disso o olho perde a
   linha ao voltar para a esquerda. */
.doc-texto{max-width:68ch}
.doc-texto h2{font-size:1.18rem;font-weight:600;margin:2.2rem 0 .7rem}
.doc-texto h2:first-child{margin-top:0}
.doc-texto h3{font-size:1rem;font-weight:600;color:var(--tx);font-family:var(--bod);
  margin:1.5rem 0 .5rem;letter-spacing:.02em}
.doc-texto p{margin:0 0 .9rem;color:var(--tx);font-size:.95rem;line-height:1.72}
.doc-texto ul,.doc-texto ol{margin:0 0 1rem;padding-left:1.3rem;color:var(--tx);font-size:.95rem}
.doc-texto li{margin-bottom:.5rem;line-height:1.65}
.doc-texto b,.doc-texto strong{color:var(--gold-lt);font-weight:700}
.doc-texto a{color:var(--gold);border-bottom:1px solid var(--line)}
.doc-texto a:hover{color:var(--gold-lt)}
.doc-texto code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;
  background:rgba(12,9,6,.7);border:1px solid var(--line2);border-radius:4px;
  padding:.1em .4em;color:var(--gold-lt)}
.doc-texto hr{border:0;border-top:1px solid var(--line2);margin:2rem 0}

/* destaque de clausula: o paragrafo que o jogador PRECISA ler */
.doc-texto .chave{border-left:2px solid var(--gold);padding:.9rem 0 .9rem 1.1rem;
  margin:1.3rem 0;background:linear-gradient(90deg,rgba(201,154,60,.07),transparent 70%)}
.doc-texto .chave p:last-child{margin-bottom:0}

.doc-tabela{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1.2rem}
.doc-tabela th{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:700}
.doc-tabela td{padding:.6rem .8rem;border-bottom:1px solid var(--line2);vertical-align:top}
.doc-tabela tr:last-child td{border-bottom:0}

/* campo por preencher: fica GRITANDO ate alguem completar */
.pendente{background:rgba(178,58,58,.18);border:1px dashed var(--rubi);
  border-radius:4px;padding:.05em .4em;color:var(--rubi-lt);font-weight:700;
  font-size:.9em;white-space:nowrap}


/* (bloco antigo da loja removido em 08/09/2026: .qtd/.pix/.chips do refino) */
.cupom-linha{display:flex;gap:.5rem}
.cupom-linha input{flex:1}
.cupom-ok{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:var(--r3);
  border:1px solid var(--erva);background:color-mix(in srgb,var(--erva) 12%,transparent)}
.cupom-ok .cod{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--gold-lt);
  letter-spacing:.06em}
.cupom-ok .desc{font-size:.8rem;color:var(--erva);font-weight:700}
.cupom-ok .tirar{margin-inline-start:auto;background:none;border:0;color:var(--tx2);
  cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .4rem}
.cupom-ok .tirar:hover{color:var(--rubi-lt)}


/* ══ FICHA DO LEILAO ══ 03/09/2026 ═════════════════════════════════════ */
/* Barra do leilao em UMA linha. Antes eram tres cartoes empilhados com
   cabecalho e subtitulo cada, e a informacao comecava depois de uma tela
   inteira de titulo. */
.ficha-topo{display:flex;align-items:center;gap:clamp(.8rem,3vw,2rem);flex-wrap:wrap;
  margin-bottom:1rem;padding:.9rem 1.1rem;border-radius:var(--r);
  border:1px solid rgba(201,154,60,.42);
  background:linear-gradient(100deg,rgba(194,114,58,.14),rgba(201,154,60,.06))}
.ficha-topo .bl{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ficha-topo .bl b{font-family:var(--dis);font-size:1.05rem;color:var(--gold-lt);font-weight:600}
.ficha-topo .btn{margin-inline-start:auto}
.abas .conta{opacity:.6;font-weight:600}

/* O personagem vestido, na disposicao da janela do jogo: tres colunas. */
.paperdoll{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:1.1rem}
.pd{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem;
  border-radius:var(--r3);border:1px solid var(--line2);
  background:rgba(12,9,6,.5);min-width:0}
.pd-slot{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.pd-item{font-size:.84rem;color:var(--gold-lt);overflow-wrap:anywhere}
.pd-ench{font-size:.78rem;color:var(--erva);font-weight:700}
.pd-aug{font-size:.66rem;color:var(--arcano-lt)}
/* Slot vazio continua ocupando lugar: e o buraco que interessa a quem compra. */
.pd.vazio{border-style:dashed;background:none}
.pd.vazio .pd-item{color:var(--apagado,#63605A);opacity:.5}
@media (max-width:520px){.paperdoll{grid-template-columns:repeat(2,1fr)}}

/* Icone do item ao lado do slot, como na janela do jogo (03/09/2026). */
.pd{flex-direction:row;align-items:center;gap:.65rem}
.pd-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pd-ico{width:34px;height:34px;flex:none;border-radius:5px;display:block;
  background:rgba(0,0,0,.5);border:1px solid var(--line2);box-sizing:border-box}
.pd.vazio .pd-ico{border-style:dashed;background:none;opacity:.35}
.ico-inv{width:24px;height:24px;vertical-align:middle;margin-inline-end:.5rem;border-radius:3px}
/* Full Armor: o slot das pernas repete a arte do peito, escurecida, como no jogo. */
.pd.coberto.sem-arte .pd-ico{filter:brightness(.45) saturate(.6)}
.pd.coberto .pd-item{color:var(--tx2);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}

/* Paperdoll como a janela do jogo (03/09/2026): so quadrados e icones, sem
   texto. Nome e enchant vao no title. Linha de arma tem 2 celulas e centraliza. */
.doll{display:flex;flex-direction:column;align-items:center;gap:6px;padding:1.1rem}
.doll-r{display:flex;justify-content:center;gap:6px}
.doll-c{position:relative;width:46px;height:46px;border-radius:5px;box-sizing:border-box;
  border:1px solid var(--line2);background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center}
.doll-c img{width:32px;height:32px;display:block}
.doll-c b{position:absolute;right:3px;bottom:1px;font-size:.62rem;font-weight:700;
  color:var(--erva);text-shadow:0 0 3px #000,0 0 3px #000}
.doll-c.vazio{border-style:dashed;background:rgba(0,0,0,.25);opacity:.5}
.doll-c.sem-arte img{filter:brightness(.45) saturate(.6)}
/* Item com augment: o jogo so avisa no tooltip; aqui a celula brilha arcano. */
.doll-c.aug{border-color:#b79cff;box-shadow:inset 0 0 0 1px rgba(183,156,255,.45),0 0 9px rgba(183,156,255,.35)}

/* ══ LEILAO: faixa fina ══ 03/09/2026 ═══════════════════════════════════
   A faixa padrao tem 238px e e usada por 6 paginas. Aqui a pagina e uma
   LISTA que pode ter 20 personagens: com a faixa cheia mais o cabecalho do
   cartao, 60% da tela ia embora antes da primeira linha. Modificador so
   para esta pagina — as outras cinco continuam iguais. */
.faixa-arte.fina{height:132px;margin-bottom:1rem}
.faixa-arte.fina .in{padding:1rem clamp(1.2rem,3vw,2rem)}
.faixa-arte.fina h1{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-top:0}
.faixa-arte.fina p{margin-top:.3rem;font-size:.86rem}
.faixa-arte.fina .pj{top:-26%;height:210%;opacity:.85}
@media (max-width:760px){.faixa-arte.fina{height:112px}}

.lista-topo{display:flex;justify-content:space-between;padding:.55rem 1.1rem;
  border-bottom:1px solid var(--line2);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tx2);font-weight:600}
.lista-leilao .item{padding-block:.62rem}

/* Submenu do rail: so aparece dentro da secao, entao nao rouba altura das
   outras paginas. Substituiu as abas horizontais do leilao. */
.rail .sub{display:flex;flex-direction:column;margin:.15rem 0 .35rem 1.62rem;
  padding-inline-start:.75rem;border-inline-start:1px solid var(--line2)}
.rail .sub a{padding:.36rem .5rem;font-size:.78rem;letter-spacing:.01em;
  text-transform:none;font-weight:500;border-radius:var(--r4)}
.rail .sub a[aria-current]{color:var(--gold-lt);background:rgba(201,154,60,.10)}

.passos{margin:0;padding:1rem 1.2rem 1.2rem 2.5rem;display:flex;
  flex-direction:column;gap:.7rem;color:var(--tx);font-size:.88rem;line-height:1.55}
.passos li::marker{color:var(--gold);font-weight:700}
.passos b{color:var(--gold-lt);font-weight:600}
.aviso-lista{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.aviso-lista p{margin:0;font-size:.86rem;line-height:1.55;color:var(--tx)}
.aviso-lista b{color:var(--cobre)}

/* SA (add_name do item) e augment (items_variation) na lista do inventario. */
.sa{color:var(--gold);font-size:.78rem;font-weight:600}
.aug-tag{color:#b79cff;font-size:.72rem}
.doll-c{cursor:help}

/* Filtros da vitrine (03/09/2026). Chips em linha, com a contagem: o numero
   evita o clique que leva a lista vazia. Grupo com uma opcao so nao aparece. */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;
  margin-bottom:.85rem;padding:.7rem .95rem;border-radius:var(--r);
  border:1px solid var(--line2);background:rgba(12,9,6,.42)}
.fgrupo{display:flex;align-items:center;gap:.6rem;min-width:0}
.fops{display:flex;flex-wrap:wrap;gap:.32rem}
.fchip{display:inline-flex;align-items:center;gap:.32rem;padding:.24rem .6rem;
  border-radius:var(--r4);border:1px solid var(--line2);font-size:.76rem;
  color:var(--tx);text-decoration:none;white-space:nowrap;transition:.14s}
.fchip:hover{border-color:rgba(201,154,60,.5);color:var(--gold-lt)}
.fchip .n{font-size:.66rem;color:var(--tx2);font-weight:600}
.fchip.on{border-color:rgba(201,154,60,.62);color:var(--gold-lt);
  background:linear-gradient(180deg,rgba(201,154,60,.17),rgba(201,154,60,.05))}
.fchip.on .n{color:var(--gold)}
.fchip.limpar{margin-inline-start:auto;color:var(--tx2)}
@media (max-width:760px){.filtros{gap:.5rem .8rem}.fgrupo{width:100%}}

/* Linha da vitrine: quem · lance · formulario · relogio (03/09/2026). */
.lista-topo .c-lance{margin-inline-start:auto}
.lista-topo .c-fim{margin-inline-start:auto}
.lista-leilao .item{gap:.9rem;flex-wrap:wrap}
.lista-leilao .quem{min-width:9rem}
.bloco-lance{display:flex;flex-direction:column;gap:.1rem;margin-inline-start:auto;
  padding-inline:.9rem;border-inline-start:1px solid var(--line2);min-width:7rem}
.bloco-lance b{font-family:var(--dis);font-size:1.12rem;color:var(--gold-lt);font-weight:600}
.lance-rapido{display:flex;align-items:center;gap:.35rem}
.lance-rapido input[type=number]{width:5.4rem;padding:.34rem .5rem;font-size:.84rem;
  border-radius:var(--r4);border:1px solid var(--line2);background:rgba(0,0,0,.42);
  color:var(--gold-lt);font-family:var(--dis)}
.lance-rapido input[type=number]:focus{outline:none;border-color:rgba(201,154,60,.6)}
.lance-rapido select{padding:.34rem .4rem;font-size:.78rem;border-radius:var(--r4);
  border:1px solid var(--line2);background:rgba(0,0,0,.42);color:var(--tx);max-width:8rem}
.lista-leilao .fim{margin-inline-start:0}
.selo.urgente{animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.45}}
@media (max-width:900px){
  .bloco-lance{margin-inline-start:0;border-inline-start:0;padding-inline:0}
  .lance-rapido,.lista-leilao .fim{margin-inline-start:auto}
}

/* Linha de equipamento da vitrine (03/09/2026): ocupa a largura toda, embaixo
   dos dados. Icone menor que o do paperdoll — aqui e leitura rapida. */
.bloco-quando{display:flex;flex-direction:column;gap:.05rem;padding-inline:.9rem;
  border-inline-start:1px solid var(--line2);min-width:8rem}
.bloco-quando b{font-family:var(--dis);font-size:.92rem;color:var(--tx);font-weight:600}
.bloco-quando .meta{font-size:.68rem;color:var(--tx2)}
.vitrine{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px;
  margin-top:.15rem;padding-top:.6rem;border-top:1px solid var(--line2)}
.vc{position:relative;width:32px;height:32px;border-radius:4px;flex:none;cursor:help;
  border:1px solid var(--line2);background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center}
.vc img{width:26px;height:26px;display:block}
.vc b{position:absolute;right:1px;bottom:-1px;font-size:.58rem;font-weight:700;
  color:var(--erva);text-shadow:0 0 3px #000,0 0 3px #000}
.vc.aug{border-color:rgba(183,156,255,.55)}
@media (max-width:900px){.bloco-quando{border-inline-start:0;padding-inline:0}}

/* Filtros em select (03/09/2026): a taxonomia inteira fica disponivel, nao so
   o que ja esta na vitrine — procurar por mago num dia sem mago e legitimo. */
.fsel{display:flex;align-items:center;gap:.5rem}
.fsel select{padding:.32rem .55rem;font-size:.82rem;border-radius:var(--r4);
  border:1px solid var(--line2);background:rgba(0,0,0,.45);color:var(--gold-lt);
  max-width:13rem}
.fsel select:focus{outline:none;border-color:rgba(201,154,60,.6)}
.filtros button[type=submit]{margin-inline-start:.2rem}
@media (max-width:760px){.fsel{width:100%}.fsel select{flex:1}}

/* Relogio colado na hora de fechar, nao no canto oposto da linha. */
.quando-l{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.bloco-quando{min-width:12.5rem}

/* Fora as setinhas do input de numero: mexer no lance de 1 em 1 nao serve
   para nada e a seta ocupa metade do campo. */
.lance-rapido input[type=number]{-moz-appearance:textfield;appearance:textfield}
.lance-rapido input[type=number]::-webkit-outer-spin-button,
.lance-rapido input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Lance + campo juntos, na direita da linha (03/09/2026). */
.lado-lance{margin-inline-start:auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:.4rem}
.lado-lance .bloco-lance{margin-inline-start:0;padding-inline:0;border-inline-start:0;
  align-items:flex-end;min-width:0}
.linha-acao{display:flex;align-items:center;gap:.45rem}
.lista-leilao .bloco-quando{margin-inline-start:1.6rem}
@media (max-width:900px){
  .lado-lance{margin-inline-start:0;align-items:stretch;width:100%}
  .lado-lance .bloco-lance{align-items:flex-start}
  .lista-leilao .bloco-quando{margin-inline-start:0}
}

/* Hora do servidor (BR) e GMT 0 lado a lado: sem prorrogacao, errar o fuso
   custa o personagem. */
.fuso{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);
  font-weight:600}
.gmt{font-size:.78rem;color:var(--tx2);white-space:nowrap}

/* "Ver mais" separado do bloco do lance: o rotulo do lance so cobre o campo
   e o botao de dar lance. */
.lista-leilao .lado-lance{margin-inline-start:auto}
.lista-leilao .fim{margin-inline-start:0;padding-inline-start:.85rem;
  border-inline-start:1px solid var(--line2);align-self:stretch;
  display:flex;align-items:flex-end}
@media (max-width:900px){
  .lista-leilao .fim{border-inline-start:0;padding-inline-start:0;
    margin-inline-start:auto;align-self:auto}
}

/* "Ver mais" sob a classe: e informacao do personagem, nao acao do lance. */
.ver-mais{display:inline-block;margin-top:.2rem;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.ver-mais:hover{color:var(--gold-lt);text-decoration:underline}
.lista-leilao .fim{display:none}

/* LEILAO: telas enxutas (04/09/2026). A de lance cabia em uma tela e mesmo
   assim rolava; "meus lances" era tabela com rolagem HORIZONTAL. */
.card-estreito{max-width:460px;margin-inline:auto}
.lance-topo{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line2)}
.lance-topo .voltar{color:var(--tx2);text-decoration:none;font-size:1.15rem;line-height:1}
.lance-topo .voltar:hover{color:var(--gold-lt)}
.lance-topo .dado{display:block;font-family:var(--dis);font-size:1.05rem;color:var(--gold-lt)}
.lance-topo .meta{font-size:.75rem;color:var(--tx2)}
.lance-num{margin-inline-start:auto;text-align:end}
.lance-num b{display:block;font-family:var(--dis);font-size:1.3rem;color:var(--gold-lt)}
.lance-form{padding:1.1rem 1.1rem .5rem}
.lance-form .campo label .meta{font-weight:400;color:var(--tx2);margin-inline-start:.4rem;
  font-size:.74rem;text-transform:none;letter-spacing:0}
.lance-nota{margin:0;padding:.4rem 1.1rem 1.15rem;font-size:.78rem;line-height:1.55;
  color:var(--tx2)}
.lance-nota b{color:var(--gold)}

/* Cabecalho fino: titulo numa linha so, sem icone. */
.card-cab-fino{display:flex;align-items:baseline;gap:.6rem;padding:.8rem 1.1rem;
  border-bottom:1px solid var(--line2)}
.card-cab-fino h2{font-size:1rem;margin:0}
.card-cab-fino .meta{font-size:.72rem;color:var(--tx2)}

/* Linha inteira clicavel e valor com peso proprio: sem isso a tela era um
   bloco de texto de uma cor so. */
.item-link{text-decoration:none;color:inherit;transition:background .14s}
.item-link:hover{background:rgba(201,154,60,.055)}
.valor-col{margin-inline-start:auto;text-align:end;display:flex;
  flex-direction:column;gap:.02rem;min-width:3.6rem}
.valor-col b{font-family:var(--dis);font-size:1.1rem;color:var(--gold-lt);font-weight:600}
.valor-col b.bom{color:#9DBA8E}
.valor-col b.apagado{color:var(--tx2);font-weight:500}
.valor-col .olho{font-size:.56rem}
.lista .item .selo{margin-inline-start:.7rem;flex:none}

/* ══ RESPONSIVIDADE ══ 07/09/2026 ═══════════════════════════════════════
   Medido em navegador a 375px. Cada regra abaixo corrige algo que a medicao
   apontou, nao algo que pareceu feio num print. */
@media (max-width:979px){
  /* O menu ocupava uma tira rolavel de ate 903px com 375 visiveis. Agora
     quebra em linhas: tudo na tela, sem arrastar. */
  .rail nav{flex-wrap:wrap}
  .rail a{flex:1 1 calc(50% - .3rem);justify-content:flex-start;min-height:40px}
  .rail nav .sub a{flex-basis:100%}

  /* Abas escondiam 373px nos rankings. */
  .abas{flex-wrap:wrap;overflow:visible}
  .abas a{min-height:36px;display:inline-flex;align-items:center}

  /* Alvo de toque: a WCAG 2.2 pede 24x24; 40 e o confortavel com o polegar. */
  .eu .sair{min-height:40px;padding-inline:.5rem;display:inline-flex;
    align-items:center}
  .rodape a{display:inline-flex;align-items:center;min-height:40px;
    padding-inline:.15rem}
  .filtros .fsel select,.lance-rapido input,.lance-rapido button{min-height:40px}

  /* Texto que estava em 9,9px. Abaixo de 11 ninguem le no celular. */
  .saldo-topo span,.olho,.valor-col .olho,.pd-slot{font-size:.68rem}
}

/* Celular estreito: a linha do leilao empilha em vez de espremer. */
@media (max-width:600px){
  /* Duas colunas, nao uma: em coluna unica os 7 itens comiam ~400px, metade
     da tela, antes de qualquer conteudo (medido em 07/09/2026). */
  .rail a{flex-basis:calc(50% - .3rem);padding-inline:.55rem;gap:.5rem}
  .rail a svg{width:15px;height:15px}
  .lista-leilao .item{gap:.6rem}
  .lista-leilao .bloco-quando,.lista-leilao .lado-lance{width:100%}
  .lance-rapido{width:100%}
  .lance-rapido input[type=number]{flex:1}
  .ficha-topo{gap:.7rem}
  .ficha-topo .btn{margin-inline-start:0}
}

@media (max-width:700px){
  /* As tres tabelas de 4 colunas (extrato, historico, rankings) ainda
     escondiam de 26 a 147px. Em vez de cortar coluna -- que apaga dado sem
     avisar --, o texto encolhe e a celula perde folga: cabe inteiro
     (medido em 07/09/2026). */
  .rank{font-size:.76rem}
  .rank th,.rank td{padding:.5rem .35rem;white-space:normal;overflow-wrap:anywhere}
  .rank .pos{width:1.6rem}
  .ico-inv{width:18px;height:18px;margin-inline-end:.3rem}
  /* A marca no topo era um alvo de 26px de altura. */
  .marca{min-height:40px}
}

/* ══ BARRA DO RODAPE (celular) ══ 07/09/2026 ════════════════════════════
   O menu lateral, aberto como lista, custava de 246 a 418px no topo de toda
   pagina -- o conteudo comecava em 931px no leilao e 1092px no inicio, mais
   de uma tela inteira. Medido a 375x844.

   No celular ele desce para o fim da pagina (continua la, alcancavel pelo
   "Mais") e a navegacao do dia a dia vira esta barra fixa. */
.barra-inf{display:none}

@media (max-width:979px){
  .barra-inf{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;inset:auto 0 0 0;z-index:60;
    background:rgba(18,13,9,.94);backdrop-filter:blur(14px) saturate(1.2);
    border-top:1px solid var(--line);
    /* respeita a faixa do gesto no iPhone */
    padding-bottom:env(safe-area-inset-bottom,0)}
  .barra-inf a,.barra-inf button{
    display:grid;justify-items:center;gap:.15rem;text-decoration:none;
    padding:.5rem .2rem .45rem;min-height:52px;
    font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;color:var(--tx2)}
  .barra-inf a svg,.barra-inf button svg{width:19px;height:19px;opacity:.8}
  .barra-inf a[aria-current="page"],
  .barra-inf button[aria-expanded="true"]{color:var(--gold-lt)}
  .barra-inf a[aria-current="page"] svg,
  .barra-inf button[aria-expanded="true"] svg{color:var(--gold);opacity:1}

  /* o conteudo nao pode terminar embaixo da barra */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}

  /* O menu lateral vai para o FIM da pagina: continua acessivel pelo "Mais",
     mas para de comer a primeira tela. */
  .painel{display:flex;flex-direction:column}
  .conteudo{order:1}
  .rail{order:2;padding-top:2.4rem;border-top:1px solid var(--line2);
    margin-top:2rem;scroll-margin-top:calc(var(--nav-h) + 1rem)}
  .rail .grupo{display:block;padding:0 0 .6rem}

  /* O submenu do leilao sai: as abas dentro da pagina ja fazem esse trabalho
     e o submenu sozinho custava 172px. */
  .rail nav .sub{display:none}

  /* A faixa de arte encolhe nas telas onde ela ainda faz sentido. */
  .faixa-arte{height:118px}
  .faixa-arte h1{font-size:1.28rem}
  .faixa-arte p{font-size:.82rem;margin-top:.3rem}
  .faixa-arte .in{padding:.9rem 1rem}

  /* ...e some de vez nas telas de operacao: quem chega aqui ja sabe onde
     esta, e a arte so empurra o saldo para baixo. */
  .faixa-arte.sem-faixa-no-celular{display:none}
}

/* ══ ITEM: REVELAR NO TOQUE ══ 07/09/2026 ═══════════════════════════════
   O `title` e balao de mouse: no telefone nunca aparece, e o leitor de tela
   tambem nao o alcanca. Icone de item virou <button> com uma area de ficha
   logo abaixo do grupo. */
.doll-c,.vc{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.doll-c,button.vc{appearance:none}
.doll-c[aria-expanded="true"],.vc[aria-expanded="true"]{
  border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,154,60,.4)}

/* A marca de augment: sem ela, so o toque revelava que ha algo ali. */
.marca-aug{position:absolute;right:-3px;top:-3px;width:13px;height:13px;
  border-radius:50%;background:var(--arcano);color:#0d1520;font-size:.52rem;
  font-style:normal;font-weight:700;display:grid;place-items:center;
  border:1px solid var(--bg2);line-height:1}

.item-aberto{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.2rem .7rem;margin-top:.55rem;padding:.5rem .65rem;border-radius:7px;
  border:1px solid rgba(91,155,217,.32);background:rgba(91,155,217,.07)}
.ia-nome{font-family:var(--dis);color:var(--gold-lt);font-size:.9rem}
.ia-nome b{color:#9DBA8E}
.ia-slot{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tx2)}
.ia-sa{font-size:.8rem;color:var(--gold);font-weight:600}
.ia-aug{font-size:.78rem;color:var(--arcano-lt)}
.doll .item-aberto{width:100%}

/* ══ AJUSTES DA AUDITORIA AUTOMATIZADA ══ 07/09/2026 ════════════════════
   O que o auditoria_celular.py apontou depois das frentes 1 e 2. */
@media (max-width:979px){
  /* A altura vinha de min-height, que o contexto flex do rodape ignorava em
     alguma pagina. Vindo de padding, vale sempre. */
  .rodape-in nav a{padding-block:.62rem;display:inline-flex;align-items:center}

  /* Rotulos da barra estavam a 9,28px. 10,4 e o piso do legivel. */
  .barra-inf a,.barra-inf button{font-size:.65rem}

  /* Os quatro filtros empilhados custavam ~200px antes do primeiro leilao.
     Ficam fechados, e abrem no toque. No desktop continuam sempre abertos. */
  .filtros-caixa > summary{cursor:pointer;list-style:none;
    display:flex;align-items:center;gap:.5rem;min-height:40px;
    font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
    font-weight:700;color:var(--gold)}
  .filtros-caixa > summary::-webkit-details-marker{display:none}
  .filtros-caixa > summary::after{content:"▾";margin-inline-start:auto;
    transition:transform .16s;opacity:.7}
  .filtros-caixa[open] > summary::after{transform:rotate(180deg)}
  .filtros-caixa{border:1px solid var(--line2);border-radius:var(--r);
    padding:.55rem .9rem;margin-bottom:.85rem;background:rgba(12,9,6,.42)}
  .filtros-caixa .filtros{border:0;background:none;padding:0;margin:0}
  .filtros .fsel,.filtros button[type=submit],.filtros .limpar{margin-top:.55rem}
}
@media (min-width:980px){
  /* No desktop nao existe recolher: o espaco sobra e o filtro tem de estar
     a um clique. `<details>` sempre aberto, sem o triangulo. */
  .filtros-caixa > summary{display:none}
  .filtros-caixa{display:contents}
}

@media (max-width:979px){
  /* Seis abas de ranking quebravam em tres linhas e empurravam a tabela para
     362px. Mais compactas, cabem em duas. */
  .abas{gap:.35rem;padding-bottom:.6rem}
  .abas a{padding:.42rem .7rem;font-size:.67rem;letter-spacing:.07em}
  /* A faixa de arte ja encolheu; nas telas com abas ela encolhe mais um
     pouco, porque as abas tambem sao navegacao. */
  .abas ~ * .faixa-arte,.faixa-arte:has(~ .abas){height:100px}
}

/* A contagem colava no rotulo da aba ("EQUIPADO9") -- visto no print de
   07/09/2026. O espaco do HTML some no `text-transform:uppercase` com
   `letter-spacing`, entao vem do CSS. */
.abas .conta{margin-inline-start:.4rem}

/* ══ FICHA EM UMA TELA ══ 07/09/2026 ════════════════════════════════════
   Antes eram quatro abas, cada uma gastando a largura inteira para um item
   por linha: 20 itens de inventario = 960px de rolagem, 52 skills = 2500px.
   Agora paperdoll e numeros na coluna estreita, listas densas na larga. */
.ficha-grade{display:grid;gap:1.1rem;align-items:start}
@media (min-width:900px){.ficha-grade{grid-template-columns:300px 1fr}}
.col-estreita,.col-larga{display:grid;gap:1.1rem;min-width:0}

.bloco-tit{display:flex;align-items:baseline;gap:.5rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line2);font-family:var(--dis);font-size:.94rem;
  color:var(--gold-lt)}
.bloco-tit span{font-family:var(--bod);font-size:.72rem;color:var(--tx2);font-weight:700}

/* Status: pares em grade, nao uma linha inteira por par. */
.ficha-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:1px;margin:0;padding:1px;background:var(--line2)}
.ficha-status > div{background:var(--bg2);padding:.5rem .7rem;min-width:0}
.ficha-status > div.largo{grid-column:1/-1}
.ficha-status dt{font-size:.61rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx2);font-weight:700;margin:0}
.ficha-status dd{margin:.1rem 0 0;font-family:var(--dis);font-size:.95rem;
  color:var(--gold-lt);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Inventario: grade densa, quantidade colada no nome. */
.lista-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:2px;padding:.6rem}
.li{display:flex;align-items:center;gap:.5rem;padding:.3rem .45rem;min-width:0;
  border:1px solid transparent;border-radius:var(--r3);background:none;
  font:inherit;text-align:left;color:var(--tx);position:relative;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.li:hover{background:rgba(201,154,60,.06);border-color:var(--line2)}
.li[aria-expanded="true"]{border-color:var(--gold);background:rgba(201,154,60,.09)}
.li img{width:26px;height:26px;flex:none;border-radius:4px}
.li-txt{font-size:.83rem;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.li-txt b{color:var(--gold-lt);font-variant-numeric:tabular-nums;font-weight:700}
.li-txt b.ench{color:#9DBA8E}
.li.apagado{color:var(--tx2);cursor:default}
.li.apagado:hover{background:none;border-color:transparent}
.li.aug{border-color:rgba(155,200,240,.28)}

/* Skills: fichas curtas, muitas por linha. */
.lista-skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:2px;padding:.6rem}
.sk{display:flex;align-items:baseline;gap:.4rem;padding:.28rem .45rem;
  font-size:.79rem;color:var(--tx);min-width:0}
.sk b{margin-inline-start:auto;font-size:.7rem;color:var(--tx2);font-weight:700;
  font-variant-numeric:tabular-nums;flex:none}

/* O paperdoll ganha o espaco da coluna estreita. */
.col-estreita .doll{padding:.9rem .6rem .6rem}
.col-estreita .doll-c{width:50px;height:50px}
.col-estreita .doll-c img{width:36px;height:36px}

/* O botao de voltar dizia so "←" e ninguem entendia. */
.voltar-leilao{white-space:nowrap}

/* Fora as setinhas de qualquer campo numerico do painel: mexer de 1 em 1 nao
   serve para nada e a seta come metade do campo. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* A faixa de arte tinha 238px fixos: um quarto de uma tela de 900px, gasto
   antes de qualquer dado. */
.faixa-arte{height:168px}
.faixa-arte h1{font-size:clamp(1.4rem,2.8vw,1.9rem)}

/* ══ DENSIDADE NO CELULAR ══ 07/09/2026 ═════════════════════════════════
   Os cartoes de numero ocupavam a largura inteira, um por linha: tres
   numeros de um digito gastavam ~330px de tela. Agora cabem lado a lado. */
@media (max-width:979px){
  .numeros{grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:.5rem;
    margin-bottom:.9rem}
  .numeros .num{padding:.6rem .7rem .65rem}
  .numeros .num b{font-size:1.35rem}
  .numeros .num .olho{font-size:.56rem;letter-spacing:.12em}
  .numeros .num .pe{font-size:.62rem;line-height:1.3}

  /* O saldo da carteira e o unico que fica largo: leva os botoes dentro. */
  .saldo-linha{grid-template-columns:1fr}
  .saldo-linha .num b{font-size:1.9rem}
  .num-acoes{display:flex;gap:.4rem;margin-top:.7rem;flex-wrap:wrap}
  .num-acoes .btn{flex:1;min-height:38px;justify-content:center}

  /* Cabecalho de cartao: icone + titulo + subtitulo em duas linhas gastava
     altura em toda tela. O subtitulo sai; o titulo basta. */
  .card-cab p{display:none}
  .card-cab{padding-block:.7rem}
  .card-cab .ico{width:30px;height:30px}

  /* A faixa de arte no celular ja e menor; o texto acompanha. */
  .faixa-arte{height:104px}
  .faixa-arte h1{font-size:1.16rem}
  .faixa-arte p{font-size:.76rem;margin-top:.2rem}
  .faixa-arte .in{padding:.7rem .9rem}
}

/* No desktop o subtitulo do cartao volta -- la sobra espaco. */
@media (min-width:980px){.card-cab p{display:block}}

/* ══ CORRECOES DOS PRINTS DE 07/09/2026 ═════════════════════════════════ */

/* Os fusos saiam sem CSS nenhum: "BR08/09 15:00" colado. Rotulo em coluna
   fixa, valor alinhado: as tres linhas batem entre si. */
.bloco-quando{display:grid;gap:.16rem}
.fuso-l{display:grid;grid-template-columns:3.7rem 1fr;align-items:baseline;
  gap:.5rem;font-size:.8rem;color:var(--tx);font-variant-numeric:tabular-nums}
.fuso-l i{font-style:normal;font-size:.57rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx2);font-weight:700}
.fuso-l.apagado{color:var(--tx2)}
.relogio{font-family:var(--dis);font-size:1.15rem;color:var(--gold-lt);
  font-variant-numeric:tabular-nums;line-height:1.25;margin-bottom:.15rem}
.relogio.mal{color:var(--cobre)}
.relogio.urgente{animation:pulsa 1s ease-in-out infinite}

/* `anywhere` quebrava palavra no meio: "VAL OR", "CONCLUI DO". */
@media (max-width:700px){.rank th,.rank td{overflow-wrap:break-word;word-break:normal}}

/* Tabela de 4 colunas nao cabe em 375px sem virar sopa de letras. Vira
   bloco: data e descricao a esquerda, valor e situacao a direita. */
@media (max-width:620px){
  .rank thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .rank tr{display:grid;grid-template-columns:1fr auto;gap:.1rem .7rem;
    padding:.6rem .1rem;border-bottom:1px solid var(--line2)}
  .rank td{border:0;padding:0;font-size:.82rem}
  .rank td:nth-child(1){grid-column:1;grid-row:1;font-size:.7rem;color:var(--tx2)}
  .rank td:nth-child(2){grid-column:1;grid-row:2}
  .rank td:nth-child(3){grid-column:2;grid-row:1;text-align:end;font-weight:700}
  .rank td:nth-child(4){grid-column:2;grid-row:2;text-align:end}
  .rank td .selo{font-size:.62rem;padding:.12rem .45rem}
}

@media (max-width:979px){
  /* Os rotulos dos cartoes cairam para 8,96px. 10 e o piso do legivel. */
  .numeros .num .olho{font-size:.64rem}
  .numeros .num .pe{font-size:.66rem}

  /* O rodape legal ocupava meia tela para um aviso que ninguem le duas
     vezes: fica menor e mais apagado, sem sumir. */
  .rodape .legal{font-size:.66rem;line-height:1.45;color:var(--tx2);opacity:.72}
  .rodape-in{gap:.5rem}
  .rodape-in nav{gap:.2rem .9rem;margin-inline-start:0}
  .rodape-in nav a{font-size:.72rem}

  /* "Mais" abre um painel ACIMA da barra, nao manda para o fim da pagina. */
  .rail{display:none}
  body.mais-aberto .rail{
    display:block;position:fixed;inset:auto 0 calc(58px + env(safe-area-inset-bottom,0)) 0;
    z-index:59;max-height:62vh;overflow-y:auto;margin:0;padding:.9rem var(--sp) 1.1rem;
    background:rgba(18,13,9,.985);backdrop-filter:blur(16px) saturate(1.2);
    border-top:1px solid var(--line);
    box-shadow:0 -18px 40px rgba(0,0,0,.55);
    animation:sobe .16s ease-out}
  @keyframes sobe{from{transform:translateY(14px);opacity:0}}
  body.mais-aberto::after{content:"";position:fixed;inset:0;z-index:58;
    background:rgba(0,0,0,.5)}
  .abre-mais{background:none;border:0;font:inherit}
  .barra-inf .abre-mais[aria-expanded="true"]{color:var(--gold-lt)}
  .barra-inf .abre-mais[aria-expanded="true"] svg{color:var(--gold);opacity:1}
}

@media (max-width:979px){
  /* "Vendido", "Concluido", "Anunciado": texto de leitura a 9,1-9,9px. */
  .selo{font-size:.65rem}
  .fuso-l i{font-size:.63rem}
  .fuso-l{grid-template-columns:4.1rem 1fr}
}

@media (max-width:979px){
  /* O `.selo` dentro de tabela e mais especifico e vencia a regra anterior:
     "Vendido" e "Concluido" continuavam a 9,92px. */
  .rank td .selo,.lista .item .selo,.selo{font-size:.66rem}
}

/* O "Mais" e <button>, nao <a>: sem isso ele nascia com o estilo padrao do
   navegador e estourava a barra (visto no print de 07/09/2026). */
.barra-inf button{background:none;border:0;cursor:pointer;font-family:inherit;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--tx2);
  -webkit-tap-highlight-color:transparent}
.barra-inf button span{display:block}

/* ══ CARD DO LEILAO NO CELULAR ══ 07/09/2026 ═══════════════════════════
   A versao anterior era uma pilha de rotulos soltos, tudo alinhado a
   esquerda, sem grupo nem separacao: lia-se como despejo de formulario, nao
   como um card. Agora tem tres zonas com papel claro --
   quem / quanto falta em cima, o que ele tem no meio, quanto e a acao
   embaixo -- e uma linha divisoria entre elas. */
.quando-pe{font-size:.7rem;color:var(--tx2);font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .lista-leilao .item{
    display:grid;gap:.5rem .7rem;padding:.85rem .9rem;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "lv   quem   tempo"
      "itens itens itens"
      "lance lance acao"}
  .lista-leilao .pj-med{grid-area:lv;align-self:start}
  .lista-leilao .quem{grid-area:quem;min-width:0}
  .lista-leilao .bloco-quando{grid-area:tempo;text-align:end;gap:.05rem}
  .lista-leilao .vitrine{grid-area:itens;margin:0;padding-top:.65rem}
  .lista-leilao .bloco-lance{grid-area:lance;flex-direction:row;
    align-items:baseline;gap:.5rem;padding:0;border:0;margin:0;min-width:0;
    border-top:1px solid var(--line2);padding-top:.7rem}
  .lista-leilao .lado-lance{display:contents}
  .lista-leilao .lance-rapido{grid-area:acao;margin:0;
    border-top:1px solid var(--line2);padding-top:.6rem}

  /* O contador e a informacao que decide; a hora exata e nota. */
  .lista-leilao .relogio{font-size:1.22rem}
  .lista-leilao .bloco-quando .olho{font-size:.58rem}
  .lista-leilao .quando-pe{font-size:.66rem;line-height:1.35}

  /* "Lance minimo 55" numa linha, com o numero mandando. */
  .lista-leilao .bloco-lance .olho{font-size:.6rem;order:1}
  .lista-leilao .bloco-lance b{font-size:1.3rem;order:2}

  .lista-leilao .lance-rapido input[type=number]{width:4.6rem}
  .lista-leilao .quem .nome{font-size:1.05rem;line-height:1.2}
  .lista-leilao .ver-mais{margin-top:.1rem}
}

@media (max-width:420px){
  /* Em tela estreita a acao ganha a linha inteira. */
  .lista-leilao .item{grid-template-areas:
      "lv   quem   tempo"
      "itens itens itens"
      "lance lance lance"
      "acao  acao  acao"}
  .lista-leilao .lance-rapido{border-top:0;padding-top:0}
  .lista-leilao .lance-rapido .btn{flex:1;justify-content:center}
  .lista-leilao .lance-rapido input[type=number]{flex:1;width:auto}
}

/* Linhas separando as tres zonas do card: quem/tempo, o que ele tem, e o
   preco com a acao. Sem elas tudo virava uma pilha so (Mateus, 07/09/2026). */
.lista-leilao .bloco-quando{position:relative}
@media (max-width:900px){
  .lista-leilao .item{gap:.65rem .7rem}
  /* A faixa de itens ganha regua em cima e embaixo: separa "quem e" de
     "o que tem" e "o que tem" de "quanto custa". */
  .lista-leilao .vitrine{border-top:1px solid var(--line2);
    border-bottom:1px solid var(--line2);padding-block:.7rem;margin:0}
  .lista-leilao .bloco-lance{border-top:0;padding-top:0}
  .lista-leilao .lance-rapido{border-top:0;padding-top:0}
  /* A hora exata fica sob o contador, nao ao lado dele. */
  .lista-leilao .quando-pe{display:block;font-size:.66rem;line-height:1.4;
    color:var(--tx2);font-variant-numeric:tabular-nums}
  .lista-leilao .bloco-quando{gap:.02rem}
}
@media (min-width:901px){
  /* No desktop a regua separa o tempo do preco na horizontal. */
  .lista-leilao .bloco-quando{padding-inline-end:1.4rem;
    border-inline-end:1px solid var(--line2)}
  .lista-leilao .quando-pe{display:block;font-size:.7rem;color:var(--tx2);
    font-variant-numeric:tabular-nums;line-height:1.45}
}

/* "Ver mais" quebrava em duas linhas na coluna estreita do celular. */
.ver-mais{white-space:nowrap}

/* ══ UMA FONTE POR CARTAO ══ 07/09/2026 ═════════════════════════════════
   O cartao do leilao tinha Cinzel em tres lugares (nome, contador, valor)
   misturado com Manrope em quatro tamanhos. Num bloco de 200px de altura
   isso vira ruido, nao hierarquia.

   Regra: Cinzel SO no nome do personagem, que e a identidade. Todo o resto
   em Manrope, e quem separa e o peso, o tamanho e a cor. */
.lista-leilao .relogio,
.lista-leilao .bloco-lance b,
.lista-leilao .valor-col b,
.lista-leilao .quando-pe,
.ficha-topo .bl b,
.ficha-status dd,
.lance-topo .lance-num b,
.li-txt b{
  font-family:var(--bod);font-weight:700;letter-spacing:-.01em}

/* O contador e o numero maior do cartao: tamanho e cor bastam. */
.lista-leilao .relogio{font-size:1.24rem;font-weight:700;letter-spacing:0}
.lista-leilao .bloco-lance b{font-size:1.32rem}

/* Os rotulos ja sao caixa alta e apagados; nao precisam de outro tamanho. */
.lista-leilao .olho,.lista-leilao .quando-pe{letter-spacing:.1em}
.lista-leilao .quando-pe{letter-spacing:0}

/* "Ver mais" cabe numa linha. */
.ver-mais{white-space:nowrap}

/* =========================================================
   REFINO 08/09/2026 — componentes do mockup aprovado
   (https://claude.ai/code/artifact/8b17dceb-e7b6-49ef-81d6-3cf51a4b9195)
   Portado do protótipo com quatro renomes para nao colidir com o que ja
   existia: .lista->.vitrine-lista, .filtros->.chips, .campo->.fld,
   .vazio->.vazio-box, .veu->.veu-modal. As regras `.mb` do protótipo
   viraram a media query de celular no fim do bloco.
   ========================================================= */
/* ── peças comuns ───────────────────────────────────────────────── */
.olho{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:700}
.num{font-weight:800;color:var(--gold3);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card{border:1px solid var(--ln);border-radius:var(--r);background:
  linear-gradient(180deg,var(--sf2),var(--sf));position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(240,223,184,.07),0 12px 30px -18px rgba(0,0,0,.8)}
.card-t{display:flex;align-items:baseline;gap:.6rem;padding:.6rem .95rem;
  border-bottom:1px solid var(--ln2);font-family:var(--dis);font-size:.86rem;color:var(--gold3);
  font-weight:600;letter-spacing:.02em}
.card-t em{font-style:normal;font-family:var(--bod);font-size:.66rem;color:var(--tx2);font-weight:700}
.card-t .dir{margin-left:auto}
.card-t .dir.rel{font-family:var(--bod);font-size:1rem;text-transform:none}

.bt{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1rem;
  border-radius:var(--r2);border:1px solid rgba(228,188,99,.5);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:800;color:#1A1309;white-space:nowrap;transition:.15s;
  background:linear-gradient(180deg,#EACB78,var(--gold));
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(201,154,60,.7)}
.bt:hover{filter:brightness(1.07);transform:translateY(-1px)}
.bt.v{background:none;border-color:var(--ln3);color:var(--gold2);box-shadow:none}
.bt.v:hover{border-color:var(--gold2);color:var(--gold3);background:rgba(201,154,60,.06);transform:none;filter:none}
.bt.bloco{width:100%;padding:.68rem;font-size:.72rem}
.bt:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.bt.peq{padding:.38rem .75rem;font-size:.68rem}

/* medalhão de level */
.lv{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;flex:none;
  font-weight:800;font-size:.88rem;color:var(--erva2);font-variant-numeric:tabular-nums;
  background:radial-gradient(circle at 40% 35%,rgba(126,154,112,.28),rgba(126,154,112,.06) 70%);
  border:1px solid rgba(126,154,112,.55);box-shadow:0 0 0 3px rgba(126,154,112,.08),inset 0 0 12px rgba(0,0,0,.5)}
.lv.mago{color:var(--arcano2);border-color:rgba(106,166,232,.55);
  background:radial-gradient(circle at 40% 35%,rgba(106,166,232,.28),rgba(106,166,232,.06) 70%);
  box-shadow:0 0 0 3px rgba(106,166,232,.08),inset 0 0 12px rgba(0,0,0,.5)}
.lv.dagger{color:var(--rubi2);border-color:rgba(185,65,65,.55);
  background:radial-gradient(circle at 40% 35%,rgba(185,65,65,.28),rgba(185,65,65,.06) 70%);
  box-shadow:0 0 0 3px rgba(185,65,65,.08),inset 0 0 12px rgba(0,0,0,.5)}

/* slot de item, como no jogo */
.slot{width:2.35rem;height:2.35rem;border-radius:var(--r3);border:1px solid rgba(201,154,60,.22);
  background:radial-gradient(circle at 50% 40%,#2A2118,#120E0A 85%);position:relative;padding:0;
  display:grid;place-items:center;transition:.15s;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),inset 0 -1px 0 rgba(240,223,184,.05)}
.slot img{width:32px;height:32px;image-rendering:auto;transition:.15s}
.slot:hover{border-color:var(--gold2);transform:translateY(-1px)}
.slot:hover img{transform:scale(1.06)}
.slot[aria-expanded="true"]{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(228,188,99,.35),0 0 14px rgba(228,188,99,.35),inset 0 2px 6px rgba(0,0,0,.7)}
.slot.gS{border-color:rgba(232,197,106,.45)}
.slot.gS::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 10px rgba(232,197,106,.22)}
.slot.gA{border-color:rgba(224,107,94,.45)}
.slot.gA::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 10px rgba(224,107,94,.22)}
.slot b{position:absolute;right:2px;bottom:0;font-size:.6rem;font-weight:800;color:var(--erva2);
  text-shadow:0 0 3px #000,0 0 3px #000,0 1px 0 #000;font-variant-numeric:tabular-nums}
.slot i{position:absolute;right:-4px;top:-4px;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle,#CFE3FA,var(--arcano) 70%);border:1px solid var(--bg);
  box-shadow:0 0 8px rgba(106,166,232,.9)}
.slot i::after{content:"";position:absolute;inset:3px;background:#0B1420;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.slot.vazio{border-style:dashed;border-color:rgba(201,154,60,.16);background:rgba(0,0,0,.25);
  box-shadow:none;cursor:default;opacity:.7}
.slot.vazio:hover{transform:none;border-color:rgba(201,154,60,.16)}
.slot.coberto img{opacity:.4;filter:saturate(.5)}

/* painel de item revelado */
.rev{margin:.35rem .95rem .8rem;padding:.55rem .75rem;border-radius:var(--r2);
  border:1px solid rgba(106,166,232,.35);background:linear-gradient(180deg,rgba(106,166,232,.1),rgba(106,166,232,.04));
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .9rem;font-size:.78rem;
  animation:aparece .16s ease-out}
@keyframes aparece{from{opacity:0;transform:translateY(-4px)}}
.rev .rn{font-family:var(--dis);color:var(--gold3);font-size:.94rem}
.rev .rn b{color:var(--erva2);font-family:var(--bod);font-weight:800}
.rev .rg{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:.1rem .4rem;border-radius:3px}
.rev .rg.S{color:#1A1309;background:var(--gS)}.rev .rg.A{color:#fff;background:var(--gA)}
.rev .rs{color:var(--gold2);font-weight:700}
.rev .ra{color:var(--arcano2)}
.rev .rx{color:var(--tx2)}

/* ── VITRINE ────────────────────────────────────────────────────── */
/* 176px, e nao 96px (Mateus, 09/09/2026). A arte de personagem e vertical
   (430x641); numa faixa de 96px so a CABECA cabia, e a figura aparecia
   cortada no pescoco. Em todas as telas ao mesmo tempo, porque todas usam
   este mesmo bloco. */
.hero{display:flex;align-items:center;gap:1rem;border:1px solid var(--ln);border-radius:var(--r);
  /* O respiro depois do cabecalho e dele, nao de quem vem depois: cada tela
     traz um bloco diferente embaixo (filtros, cartoes, listas) e cada um
     tinha a sua margem. Colados, o cabecalho parecia parte do primeiro card
     (Mateus, 10/09/2026). */
  margin-bottom:1.5rem;
  padding:.9rem 1.1rem;position:relative;overflow:hidden;min-height:176px;
  background:linear-gradient(90deg,rgba(26,20,14,.96) 40%,rgba(26,20,14,.55) 75%,rgba(26,20,14,.2))}
/* 128% e nao 170%: com a faixa mais alta, ampliar a arte voltaria a cortar. */
.hero img.pj{position:absolute;right:3%;top:-4%;height:128%;width:auto;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent);mask-image:linear-gradient(to left,#000 55%,transparent);
  filter:drop-shadow(-10px 6px 24px rgba(0,0,0,.7))}
.hero h2{font-family:var(--dis);font-size:1.45rem;color:var(--gold3);margin:0;font-weight:600;line-height:1.15}
.hero p{margin:.2rem 0 0;font-size:.8rem;color:var(--tx);max-width:40ch}
.hero p code{font-family:var(--bod);font-weight:800;color:var(--gold2)}

.chips{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.chips > .olho{margin-right:.3rem}
.chip{padding:.3rem .7rem;border-radius:999px;border:1px solid var(--ln2);background:rgba(0,0,0,.2);
  color:var(--tx2);font-size:.7rem;font-weight:600;transition:.14s}
.chip:hover{border-color:var(--ln3);color:var(--tx)}
.chip[aria-pressed="true"]{border-color:var(--gold2);color:var(--gold3);background:rgba(201,154,60,.14)}
.chip em{font-style:normal;opacity:.55;margin-left:.3rem;font-variant-numeric:tabular-nums}

.vitrine-lista{display:grid;gap:.7rem}
.lei{position:relative;overflow:hidden;transition:.18s;cursor:pointer;text-align:left;width:100%;
  border:1px solid var(--ln);border-radius:var(--r);padding:0;color:inherit;
  background:linear-gradient(180deg,var(--sf2),var(--sf));
  box-shadow:inset 0 1px 0 rgba(240,223,184,.07),0 12px 30px -18px rgba(0,0,0,.8)}
.lei:hover{border-color:var(--ln3);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(240,223,184,.1),0 18px 40px -18px rgba(0,0,0,.9),0 0 0 1px rgba(201,154,60,.12)}
.lei img.pj{position:absolute;right:-2%;top:-12%;height:150%;width:auto;pointer-events:none;opacity:.42;
  -webkit-mask-image:linear-gradient(to left,#000 30%,transparent 78%);mask-image:linear-gradient(to left,#000 30%,transparent 78%);
  filter:saturate(.85)}
.lei:hover img.pj{opacity:.55}
/* tres zonas, com regua entre elas: quem+itens | tempo | lance+campo */
.lei{display:grid;grid-template-columns:1fr 200px 196px;align-items:stretch}
.z1,.z2,.z3{position:relative;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.z2,.z3{border-left:1px solid var(--ln2)}
.z1 .quem{display:flex;align-items:center;gap:.75rem}
.z1 .nm{font-family:var(--dis);font-size:1.12rem;color:var(--gold3);line-height:1.15;display:block}
.z1 .cl{font-size:.74rem;color:var(--tx2);display:block;margin-top:.1rem}
.z2{justify-content:center;gap:.15rem}
.z2 .rel{font-size:1.22rem;line-height:1.1}
.z2 .rel.mal{color:var(--cobre)}
.z2 .rel.urg{animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.5}}
.z2 .pe{font-size:.64rem;color:var(--tx2);font-variant-numeric:tabular-nums;line-height:1.35}
.z2 .trilho{width:100%;height:3px;border-radius:2px;background:rgba(0,0,0,.4);margin-top:.35rem;overflow:hidden}
.z2 .trilho i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:2px}
.z3{justify-content:center;gap:.15rem}
.z3 .num{font-size:1.5rem;line-height:1.1}
.z3 .num small{font-size:.6rem;color:var(--tx2);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-left:.3rem}
.lance-ja{display:flex;gap:.35rem;margin-top:.45rem}
.lance-ja input{width:100%;min-width:0;border:1px solid var(--ln);border-radius:var(--r2);padding:.42rem .55rem;
  background:rgba(0,0,0,.36);color:var(--gold3);font-weight:800;font-size:.9rem;font-family:var(--bod);
  font-variant-numeric:tabular-nums;appearance:none;-moz-appearance:textfield}
.lance-ja input::placeholder{color:var(--tx3);font-weight:600}
.lance-ja input:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(228,188,99,.15)}
.lance-ja input::-webkit-outer-spin-button,.lance-ja input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lance-ja .bt{flex:none}
.z3 > .bt.v{margin-top:.45rem}
.strip{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.strip .slot{width:2.15rem;height:2.15rem}
.strip .slot img{width:28px;height:28px}
.lei .rev{grid-column:1/-1;margin:0 1rem .8rem}

.retrato .rev{position:relative;z-index:2;background:rgba(22,17,12,.94);border:1px solid var(--ln);border-radius:var(--r2);margin:.2rem .8rem .8rem;padding:.6rem .8rem}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:0 .95rem .3rem}
.cx{border:1px solid var(--ln2);border-radius:var(--r2);padding:.55rem .65rem;background:rgba(0,0,0,.22)}
.cx.ja{border-color:var(--ln3);background:rgba(201,154,60,.08)}
.cx .olho{display:block}
.cx .n{display:block;font-size:1.45rem;font-weight:800;line-height:1.1;color:var(--gold3);
  font-variant-numeric:tabular-nums;margin-top:.1rem}
.cx.dep .n{color:var(--tx)}
.cx .q{display:block;font-size:.7rem;color:var(--tx2);margin-top:.15rem}
.cx .n{display:flex;align-items:center;gap:.3rem}
.cx .n i{font-style:normal;font-size:.72rem;font-weight:700;color:var(--tx2);align-self:flex-end;
  margin-bottom:.18rem}
.cm{width:.82em;height:.82em;flex:none;vertical-align:-.06em;margin-left:.24em}
.slot .cm,.moedaslot .cm{width:24px;height:24px;margin:0}
.moedaslot{display:flex;align-items:center;justify-content:center}
.saldo-topo .cm{width:16px;height:16px}
.nums .num .cm,.cx .n .cm{width:.7em;height:.7em}
.regras{margin:0;padding:.1rem .95rem .9rem 1.75rem;list-style:none}
.regras li{position:relative;font-size:.76rem;color:var(--tx2);line-height:1.45;margin:.22rem 0}
.regras li::before{content:"—";position:absolute;left:-.85rem;color:var(--tx3)}
.regras b{color:var(--tx)}
.regras b.ruim{color:var(--rubi2)}
.dica b.ruim{color:var(--rubi2)}
.card.devendo{border-color:var(--ln3);margin-bottom:.85rem}
.card.devendo .card-t{background:rgba(207,122,59,.10)}
.card.devendo .rel{color:var(--cobre)}
.pjl.moeda .num{color:var(--gold3)}
.pjl.moeda.presa{opacity:.72}
.pjl.moeda.presa .num{color:var(--tx2)}
.pjl .nm.login{font-family:var(--bod);font-size:.95rem;font-weight:700;color:var(--tx);letter-spacing:.01em}
.peqnum.apagado{color:var(--tx2)}
.card-t .dir b.num{font-family:var(--bod);font-size:1rem}
span.slot{cursor:default}
span.slot:hover{transform:none;border-color:var(--ln)}
.ii .ver{font-style:normal;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);margin-left:.35rem;font-weight:800}
span.ii{cursor:default}
.retrato .txt .cl b{color:var(--gold3)}
.retrato .txt .subs{font-size:.72rem;color:var(--tx2);margin-top:.15rem}
/* ── telas novas: inicio, contas, protecao, rankings, cfg ── */
.selo{display:inline-flex;align-items:center;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  padding:.22rem .55rem;border-radius:999px;border:1px solid var(--ln2);color:var(--tx2);background:none;font-family:var(--bod);white-space:nowrap}
.selo.on{border-color:rgba(126,154,112,.5);color:var(--erva2)}
.selo.mal{border-color:rgba(185,65,65,.5);color:var(--rubi2)}
button.selo{cursor:pointer}
.selo.prot{border-color:rgba(126,154,112,.5);color:var(--erva2)}
button.selo.prot:hover,button.selo.sem:hover{border-color:var(--gold2);color:var(--gold3)}
.pjl{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;padding:.6rem .95rem;border-top:1px solid var(--ln2)}
.pjl:first-of-type,.card-t + .pjl{border-top:0}
.pjl .nm{font-family:var(--dis);color:var(--gold3);font-size:.95rem;display:block;line-height:1.15}
.pjl .cl{font-size:.7rem;color:var(--tx2);display:block}
.pjl .cl b{color:var(--tx)}
.pjl[role=button]{cursor:pointer}.pjl[role=button]:hover{background:rgba(201,154,60,.05)}
.pjl.mais-pj{grid-template-columns:1fr;justify-items:start}
.peqnum{font-size:1rem}.peqnum small{font-size:.55rem;color:var(--tx2);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-left:.25rem}
.card-t .bt.dir{margin-left:auto}
.hero{position:relative}.hero .hero-bt{margin-left:auto;position:relative;z-index:1;flex:none}
.card.conta .login{font-family:var(--dis);color:var(--gold3);font-size:1.05rem}
.acoes-conta{display:flex;gap:.35rem}
.lk{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.55rem .95rem;border-top:1px solid var(--ln2)}
.lk b{display:block;font-size:.88rem;font-weight:700}.lk span{font-size:.72rem;color:var(--tx2)}
.lk .mec{font-size:.58rem;font-weight:700;letter-spacing:.04em;padding:.18rem .45rem;border-radius:var(--r3);border:1px solid var(--ln2);color:var(--arcano);white-space:nowrap}
.chave{position:relative;width:40px;height:22px;border-radius:999px;border:1px solid var(--ln);background:rgba(0,0,0,.4);cursor:pointer;padding:0;transition:.18s}
.chave::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--tx3);transition:.18s}
.chave[aria-checked="true"]{background:rgba(126,154,112,.3);border-color:rgba(126,154,112,.6)}
.chave[aria-checked="true"]::after{left:20px;background:var(--erva2)}
.inl{display:flex;gap:.4rem}.inl input{flex:1;min-width:0}.inl .bt{flex:none}
.pode{padding:.5rem .95rem .9rem}.pode ul{margin:.25rem 0 .6rem;padding-left:1.1rem}.pode li{font-size:.8rem;color:var(--tx2);margin:.15rem 0}
.ficha.prot{grid-template-columns:1fr 1fr}
.rk > div{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.6rem;align-items:center;padding:.55rem .95rem;border-top:1px solid var(--ln2)}
.rk > div:first-child{border-top:0}
.rk .pos{font-family:var(--dis);color:var(--tx2);font-size:.9rem;text-align:center;font-variant-numeric:tabular-nums}
.rk .pos.top{color:var(--gold2)}
.rk .nm{font-family:var(--dis);color:var(--gold3);font-size:.95rem;display:block;line-height:1.15}.rk .cl{font-size:.7rem;color:var(--tx2)}
.modal{position:fixed;left:50%;top:12%;transform:translateX(-50%);z-index:60;width:min(440px,92%);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.modal .mbt{display:flex;gap:.5rem;justify-content:flex-end;padding:.5rem .95rem .95rem}
.veu-modal{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.6);border:0;cursor:default;width:100%}
.nums .num,.nums .pe{display:block}

/* ── FICHA ──────────────────────────────────────────────────────── */
.ftopo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;border:1px solid var(--ln);
  border-radius:var(--r);padding:.7rem 1rem;position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(207,122,59,.16),rgba(26,20,14,.5) 60%)}
.ftopo .bl{display:grid;gap:.05rem}
.ftopo .bl .num{font-size:1.1rem}
.ftopo .bl .nmg{font-family:var(--dis);font-size:1.3rem;color:var(--gold3);line-height:1.1}
.ftopo .acao{margin-left:auto}

.ficha{display:grid;gap:.85rem;grid-template-columns:318px 1fr;align-items:start}
.retrato{position:relative;overflow:hidden;min-height:150px}
.retrato img.pj{position:absolute;right:-6%;top:-10%;height:130%;width:auto;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);
  filter:drop-shadow(-10px 8px 24px rgba(0,0,0,.8))}
.retrato .veud{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,24,17,.95) 30%,rgba(31,24,17,.25) 70%,transparent)}
.retrato .txt{position:relative;padding:1rem 1rem .5rem;display:grid;gap:.15rem}
.retrato .txt .nmg{font-family:var(--dis);font-size:1.5rem;color:var(--gold3);line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.retrato .txt .cl{font-size:.78rem;color:var(--tx);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.doll{position:relative;display:grid;grid-template-columns:repeat(3,auto);gap:5px;justify-content:center;
  padding:.5rem 1rem 1rem}
.doll .slot{width:2.7rem;height:2.7rem}
.doll .slot img{width:36px;height:36px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ln2);
  border-top:1px solid var(--ln2)}
.stats > div{background:var(--sf);padding:.5rem .8rem;min-width:0}
.stats > div.largo{grid-column:1/-1}
.stats.vida,.stats.n3{grid-template-columns:repeat(3,1fr)}
.stats.n2{grid-template-columns:repeat(2,1fr)}
.stats.n1{grid-template-columns:1fr}
.stats + .stats{border-top:0}
.stats .num b{color:var(--gold3);font-weight:800}
.stats > div.apagado .num{color:var(--tx2);font-weight:600}
.stats .olho{display:block}
.stats .num{font-size:.92rem;font-weight:700;overflow-wrap:anywhere}
.inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:2px;padding:.55rem}
.ii{display:flex;align-items:center;gap:.45rem;padding:.28rem .4rem;border-radius:var(--r3);
  border:1px solid transparent;background:none;text-align:left;min-width:0;transition:.14s}
.ii:hover{background:rgba(201,154,60,.07);border-color:var(--ln2)}
.ii[aria-expanded="true"]{border-color:var(--gold2)}
.ii .slot{width:1.85rem;height:1.85rem;border-radius:4px;pointer-events:none}
.ii .slot img{width:24px;height:24px}
.ii .t{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ii .t .num{font-size:.78rem}
.sks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;padding:.55rem}
.sk{display:flex;align-items:baseline;gap:.4rem;padding:.26rem .45rem;font-size:.76rem;min-width:0}
.sk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk b{margin-left:auto;font-size:.66rem;color:var(--tx2);font-weight:800;font-variant-numeric:tabular-nums;flex:none}

/* ── FORMULÁRIO DE LANCE ────────────────────────────────────────── */
.form{max-width:560px;width:100%;margin:0 auto}
.fld{display:grid;gap:.3rem;padding:.6rem .95rem}
.fld label{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);font-weight:700}
.fld label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;margin-left:.45rem;color:var(--tx2)}
.fld input,.fld select{border:1px solid var(--ln);border-radius:var(--r2);padding:.6rem .7rem;
  background:rgba(0,0,0,.36);color:var(--gold3);font-weight:800;font-size:1.05rem;
  font-variant-numeric:tabular-nums;appearance:none;-moz-appearance:textfield;font-family:var(--bod)}
.fld select{font-weight:600;font-size:.9rem;color:var(--tx);
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(228,188,99,.15)}
.fld input::-webkit-outer-spin-button,.fld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dica{font-size:.7rem;color:var(--tx2)}
.dica b{color:var(--gold2)}
.aviso{margin:.4rem .95rem 0;padding:.55rem .75rem;border-radius:var(--r2);font-size:.78rem;line-height:1.4;
  border:1px solid rgba(185,65,65,.45);background:rgba(185,65,65,.1);color:var(--rubi2)}
.aviso.ok{border-color:rgba(126,154,112,.5);background:rgba(126,154,112,.1);color:var(--erva2)}
.aviso.ok b{color:#fff}

/* ── CARTEIRA / COMPRAR ─────────────────────────────────────────── */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.nums > .card{padding:.75rem .9rem .8rem}
.nums .olho{display:block}
.nums .num{font-size:1.7rem;line-height:1.1;margin-top:.1rem}
.nums .pe{font-size:.66rem;color:var(--tx2)}
.nums .acoes{display:flex;gap:.35rem;margin-top:.6rem;flex-wrap:wrap}
.nums .destaque::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold2),var(--gold))}
.tab > div{display:grid;grid-template-columns:auto 1fr auto auto;gap:.7rem;align-items:center;
  padding:.55rem .95rem;border-top:1px solid var(--ln2);font-size:.8rem}
.tab > div:first-child{border-top:0}
.tab .q{font-size:.66rem;color:var(--tx2);font-variant-numeric:tabular-nums}
.tab .v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--erva2)}
.tab .v.neg{color:var(--rubi2)}
.tab .st{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:.18rem .5rem;
  border-radius:999px;border:1px solid rgba(126,154,112,.45);color:var(--erva2)}
.qtd{display:flex;align-items:center;justify-content:center;gap:1.2rem;padding:1rem}
.qtd button{width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--ln3);background:rgba(0,0,0,.25);
  color:var(--gold2);font-size:1.2rem;line-height:1;transition:.14s}
.qtd button:hover{border-color:var(--gold2);color:var(--gold3)}
.qtd .num{font-size:2.3rem;min-width:5.2rem;text-align:center}
.qtd .u{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);font-weight:800;text-align:center}
.pix{display:flex;align-items:center;gap:.7rem;padding:.75rem .95rem;border:1px solid rgba(126,154,112,.4);
  border-radius:var(--r);background:linear-gradient(180deg,rgba(126,154,112,.12),rgba(126,154,112,.04))}
.pix .ico{width:2rem;height:2rem;border-radius:var(--r3);display:grid;place-items:center;
  border:1px solid rgba(126,154,112,.5);color:var(--erva2);font-weight:800;font-size:.6rem}
.pix .t b{display:block;color:var(--tx);font-size:.88rem}
.pix .t span{font-size:.68rem;color:var(--tx2)}
.pix .vl{margin-left:auto;text-align:end}
.pix .vl .num{font-size:1.25rem;color:var(--erva2)}
.pix .vl .olho{display:block}
.vazio-box{padding:1.8rem 1rem;text-align:center;color:var(--tx2);font-size:.82rem}
.vazio-box b{display:block;font-family:var(--dis);color:var(--gold3);font-size:1rem;margin-bottom:.25rem}

.g2{display:grid;gap:.85rem;grid-template-columns:1fr 1fr;align-items:start}
.mlin{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;padding:.65rem .95rem;
  border-top:1px solid var(--ln2)}
.mlin:first-of-type{border-top:0}
.mlin .nm{font-family:var(--dis);color:var(--gold3);font-size:.95rem;display:block;line-height:1.15}
.mlin .cl{font-size:.7rem;color:var(--tx2)}
.mlin .num{font-size:1.05rem}
.mlin .st{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:.2rem .55rem;
  border-radius:999px;border:1px solid var(--ln3);color:var(--gold2)}
.mlin .st.ok{border-color:rgba(126,154,112,.5);color:var(--erva2)}
.mlin .st.fila{border-color:rgba(207,122,59,.5);color:var(--cobre)}


/* celular: as regras que no protótipo eram `.mb` */
@media (max-width:640px){
  .hero{min-height:82px;padding:.75rem .9rem}
  .hero h2{font-size:1.15rem}.hero p{font-size:.74rem}
  .hero img.pj{right:-14%;opacity:.55}
  .lei{grid-template-columns:1fr}
  .z2,.z3{border-left:0;border-top:1px solid var(--ln2)}
  .z1{padding:.75rem .85rem .6rem}.z2,.z3{padding:.6rem .85rem}
  .z2{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem}
  .z2 .olho{width:100%}.z2 .trilho{order:9}
  .z3{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem .6rem}
  .z3 .olho{width:100%}
  .lance-ja{flex:1;margin-top:0}
  .z3 > .bt.v{margin:0 0 0 auto}
  .dois{grid-template-columns:1fr 1fr}
  .ficha.prot{grid-template-columns:1fr}
  .pjl{grid-template-columns:auto 1fr;gap:.35rem .6rem}
  .pjl > :nth-child(3),.pjl > :nth-child(4){grid-column:2;justify-self:start}
  .pjl[data-ficha]{grid-template-columns:auto 1fr auto auto}
  .hero .hero-bt{position:absolute;right:.8rem;bottom:.8rem}
  .lk{grid-template-columns:auto 1fr}.lk .mec{grid-column:2}
  .modal{top:8%}
  .hero{flex-wrap:wrap}
  .hero .hero-bt{position:static;margin:0;width:100%}
  .pjl{grid-template-columns:auto 1fr auto}
  .pjl > :nth-child(3){grid-column:3;grid-row:1;justify-self:end}
  .pjl > :nth-child(4){grid-column:2/4;grid-row:2;justify-self:start}
  .pjl.mais-pj{grid-template-columns:1fr}
  .card-t{flex-wrap:wrap;white-space:nowrap}
  .card-t:has(.bt.dir) em{flex-basis:100%;order:3;white-space:normal}
  .lk .mec{justify-self:start}
  .selo,.lk .mec,.peqnum small{font-size:.66rem}
  .olho,.fld label{font-size:.64rem}
  .pjl .cl,.lk span,.rk .cl{font-size:.74rem}
  .bt.peq{font-size:.68rem}
  .ftopo{gap:.5rem .9rem;padding:.65rem .8rem}
  .ftopo .acao{margin-left:0;width:100%}
  .ftopo .acao .bt{width:100%}
  .ficha{grid-template-columns:1fr}
  .stats.dye.n2,.stats.dye.n3{grid-template-columns:1fr}
  .stats.sub.n3{grid-template-columns:repeat(2,1fr)}
  .inv{grid-template-columns:1fr 1fr}
  .sks{grid-template-columns:1fr 1fr}
  .tab > div{grid-template-columns:1fr auto;gap:.1rem .6rem}
  .tab .q{grid-column:1;order:1}
  .tab .d{grid-column:1;order:2}
  .tab .v{grid-column:2;grid-row:1;text-align:end}
  .tab .st{grid-column:2;grid-row:2;justify-self:end}
  .g2{grid-template-columns:1fr}
}


/* ══ FASE 1b — 08/09/2026: carteira, loja, inicio, contas, rankings, cfg ══ */
.nums .destaque{position:relative;overflow:hidden}
.qtd > div{display:grid;justify-items:center}
.qtd input.num{width:6.5rem;background:none;border:0;text-align:center;font-size:2.3rem;
  font-weight:800;color:var(--gold3);font-variant-numeric:tabular-nums}
.qtd input.num:focus{outline:none;border-bottom:1px solid var(--gold2)}
.chip[aria-current="true"]{border-color:var(--gold2);color:var(--gold3);background:rgba(201,154,60,.14)}
a.chip{text-decoration:none}
/* modal sem JavaScript: <details> com o veu como <summary> */
details.modal-box > summary{list-style:none}
details.modal-box > summary::-webkit-details-marker{display:none}
details.modal-box:not([open]) > summary{display:none}
details.modal-box[open] > summary.veu-modal{display:block}
.modal .fld input{width:100%}
.card-t form.dir{margin-left:auto}
.tab .d b{color:var(--tx)}
/* rail alinhado ao mockup: mais compacto */
.rail a{padding:.5rem .65rem;font-size:.7rem;letter-spacing:.1em;gap:.6rem}
.rail a svg{width:16px;height:16px}
.rail a[aria-current="page"]{border-color:var(--ln);background:linear-gradient(90deg,rgba(201,154,60,.14),rgba(201,154,60,.03))}
@media (max-width:640px){
  /* o cartao com botoes ocupa a linha inteira: dois botoes nao cabem em meia tela */
  .nums .destaque{grid-column:1/-1}
}
/* auditoria de celular 08/09/2026: piso de 10px e alvo de toque de 32px */
.pix .ico{font-size:.66rem}
.bt.peq{min-height:34px}

/* protecao 08/09/2026: a chave e um checkbox de verdade (form sem JS); o
   visual continua o do mockup */
label.lk{cursor:pointer}
.lk .chave-cb{position:absolute;opacity:0;width:1px;height:1px}
.lk .chave{display:inline-block}
.lk .chave-cb:checked + .chave{background:rgba(126,154,112,.3);border-color:rgba(126,154,112,.6)}
.lk .chave-cb:checked + .chave::after{left:20px;background:var(--erva2)}
.lk .chave-cb:focus-visible + .chave{box-shadow:0 0 0 3px rgba(228,188,99,.25)}
.lk > div:first-child{position:relative}
.prot-topo .acao form{display:inline}

/* ── 08/09/2026, ajustes olhando a tela ─────────────────────────────────
   1. A arte era um recorte da FAIXA DO MEIO do retrato: cabeca cortada em
      cima e um filete no canto. Agora e uma moldura de largura fixa com
      `object-fit:cover` ancorado no alto -- o rosto sempre aparece, em
      qualquer largura de tela.
   2. O trilho tinha o vazio preto sobre fundo preto: so o pedaco dourado
      aparecia, e lia-se como um risco solto. O vazio ficou visivel. */
.hero img.pj{right:0;top:0;height:100%;width:min(30%,230px);object-fit:cover;object-position:50% 8%;
  -webkit-mask-image:linear-gradient(to left,#000 42%,transparent);
  mask-image:linear-gradient(to left,#000 42%,transparent)}
.lei img.pj{right:0;top:0;height:100%;width:min(34%,210px);object-fit:cover;object-position:50% 6%;opacity:.38;
  -webkit-mask-image:linear-gradient(to left,#000 40%,transparent);
  mask-image:linear-gradient(to left,#000 40%,transparent)}
.lei:hover img.pj{opacity:.5}
.z2 .trilho{height:4px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}

/* Tela do lance, revisada olhando a tela em 08/09/2026: o campo tinha a
   largura do cartao para caber quatro digitos, o teto aparecia como "55 a
   2530" sem dizer o que era, e os dois blocos ficavam colados na borda. */
.fld.oferta label{font-size:.72rem;letter-spacing:.12em;color:var(--gold3)}
.fld.oferta label em{font-size:.68rem;letter-spacing:0;text-transform:none;color:var(--tx2);margin-left:.5rem}
.fld.oferta input{width:9rem;font-size:1.5rem;font-weight:800;text-align:center;color:var(--gold3);
  font-variant-numeric:tabular-nums}
.cx{text-align:center}
.cx .n{justify-content:center}

/* TESTE 08/09/2026: a arte sai do canto do card e vai para a direita dos
   equipamentos, dentro da zona do personagem. Se nao agradar, apagar este
   bloco -- o `.lei img.pj` de cima volta a valer sozinho. */
  align-items:center;column-gap:.6rem}
  object-fit:cover;object-position:50% 8%;opacity:.9;align-self:stretch;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%);
  mask-image:linear-gradient(to right,transparent,#000 22%)}

/* Os quatro numeros do Inicio/Carteira liam mal encostados na borda
   esquerda, com alturas diferentes (Mateus, 08/09/2026). */
.nums > .card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.1rem}
.nums .acoes{justify-content:center;margin-top:.55rem}

/* Texto corrido justificado (Mateus, 08/09/2026): as listas de regras ficavam
   com a borda direita muito irregular. Com hifenizacao, senao a justificacao
   abre buracos entre as palavras. */
.passos li,.aviso-lista p,.regras li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* ── Card do leilao, revisao de 08/09/2026 ────────────────────────────────
   As colunas 2 e 3 eram FIXAS (200px/196px): a janela crescia, so a coluna
   do nome crescia junto, e a barra de tempo ficava sempre do mesmo tamanho.
   Agora as tres sao proporcionais, com um minimo que segura o conteudo. */
.lei{grid-template-columns:minmax(0,1.5fr) minmax(190px,.95fr) minmax(186px,.85fr)}
@media (max-width:640px){.lei{grid-template-columns:1fr}}

/* A arte passa a ficar AO LADO dos equipamentos, nao sangrando por baixo do
   preco -- ali ela disputava espaco com o numero do lance. `?arte=canto`
   volta ao anterior. Altura fixa: sem isso a arte esticava o card. */
.lei .arte-pj{grid-area:arte;width:84px;height:84px;border-radius:var(--r2);object-fit:cover;
  object-position:50% 6%;opacity:.92;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 30%);
  mask-image:linear-gradient(to right,transparent,#000 30%)}

/* Olho dentro do campo de senha (Mateus, 08/09/2026), como em qualquer tela
   de senha: o botao fica sobre o campo, e o texto recua para nao passar
   por baixo dele. */
.campo-senha{position:relative;flex:1;min-width:0;display:block}
.campo-senha input{width:100%;padding-right:2.5rem}
.olhinho{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);background:none;border:0;
  padding:0;cursor:pointer;color:var(--tx2);display:grid;place-items:center;
  width:34px;height:34px;border-radius:var(--r3)}
.olhinho:hover{color:var(--gold3)}
.olhinho:focus-visible{outline:none;color:var(--gold3);box-shadow:0 0 0 2px rgba(228,188,99,.35)}
.olhinho svg{width:18px;height:18px}
.olhinho[disabled]{opacity:.4;cursor:default}

/* A arte volta a sangrar no canto: ocupa melhor o espaco que o retrato
   pequeno ao lado dos equipamentos (Mateus, 08/09/2026). "?arte=lado" liga
   o pequeno. E a barra de progresso sob "Termina em" saiu de vez. */
.lei img.pj{display:block}
.lei .arte-pj{display:none}
.lei.arte-lado img.pj{display:none}
.lei.arte-lado .arte-pj{display:block}
.lei.arte-lado .z1{display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"quem arte" "strip arte";align-items:center;column-gap:.7rem}
.z2 .trilho{display:none}

/* ══ VISTA EM GRADE ══ 08/09/2026 ═══════════════════════════════════════
   Ate 3 colunas: mais de tres e o card fica estreito demais para o nome e
   os oito icones de equipamento. A arte ocupa o topo inteiro -- e o unico
   lugar onde ela nao disputa espaco com texto. */
.grade-lei{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
@media (min-width:1100px){.grade-lei{grid-template-columns:repeat(3,1fr)}}
.gcard{border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,rgba(36,28,19,.86),rgba(21,16,11,.9));transition:.18s;
  display:flex;flex-direction:column}
.gcard:hover{border-color:var(--ln3);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.gart{position:relative;height:150px;overflow:hidden;background:rgba(0,0,0,.35)}
.gart img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;opacity:.9}
.gart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(21,16,11,.92))}
.gart .lv{position:absolute;left:.7rem;top:.7rem;z-index:2}
.gart .grel{position:absolute;right:.7rem;top:.75rem;z-index:2;font-size:.95rem;
  background:rgba(12,9,6,.72);border-radius:999px;padding:.15rem .55rem}
.gcorpo{padding:.7rem .85rem .85rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.gcorpo .nm{font-family:var(--dis);font-size:1.12rem;color:var(--gold3);line-height:1.15}
.gcorpo .cl{font-size:.74rem;color:var(--tx2);margin-top:-.35rem}
.gpe{display:flex;align-items:end;justify-content:space-between;gap:.6rem;margin-top:auto}
.gpe .num{font-size:1.35rem;display:block}
.gpe .lance-ja{margin:0;max-width:172px}

/* Card quadrado na grade (Mateus, 08/09/2026): a arte ocupa a metade de
   cima, o resto e conteudo, e todos os cards tem a mesma altura -- e o que
   faz a grade parecer grade, e nao uma pilha de retangulos diferentes. */
.gart{height:auto;aspect-ratio:16/11}
.gcard{min-height:330px}
.gcorpo{gap:.42rem}
@media (max-width:640px){.gcard{min-height:0}.gart{aspect-ratio:16/9}}

/* CELULAR: a arte volta a ser FUNDO (Mateus, 08/09/2026) -- alta, sangrando
   pela direita, esmaecida e levemente desfocada, atras do conteudo. Com o
   recorte quadrado ela virava um retrato nitido competindo com o texto numa
   tela estreita. No desktop continua o recorte. */
@media (max-width:640px){
  .lei img.pj{width:auto;height:158%;top:-16%;right:-6%;object-fit:contain;opacity:.42;
    -webkit-mask-image:linear-gradient(to left,#000 52%,transparent);
    mask-image:linear-gradient(to left,#000 52%,transparent)}
  .lei:hover img.pj{opacity:.42}
  .z1,.z2,.z3{position:relative;z-index:1}
}

/* O +N do encantamento estava a 9,6px, abaixo do piso de 10 da auditoria. */
.slot b{font-size:.66rem}

/* Modal nosso, no lugar do confirm() do navegador (Mateus, 08/09/2026): o
   popup nativo abre colado no topo do Chrome, com "painel.l2chase.com diz" e
   a fonte do sistema. <dialog> nativo carrega foco preso, Esc e backdrop de
   graca — a folha so veste. */
.modal{border:1px solid var(--ln3);border-radius:var(--r);padding:0;color:var(--tx);
  background:linear-gradient(180deg,var(--sf2),var(--sf));max-width:min(26rem,calc(100vw - 2rem));
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(240,223,184,.08)}
.modal::backdrop{background:rgba(10,7,4,.66);backdrop-filter:blur(3px)}
.modal form{display:grid;gap:.85rem;padding:1.15rem 1.25rem 1.05rem}
.modal h3{margin:0;font-family:var(--dis);font-size:1.05rem;color:var(--gold3);letter-spacing:.02em}
.modal p{margin:0;font-size:.88rem;color:var(--tx2);line-height:1.5}
.modal p b{color:var(--tx)}
.modal dl{display:grid;gap:.4rem;margin:0;padding:.7rem .85rem;border:1px solid var(--ln2);
  border-radius:var(--r2);background:rgba(0,0,0,.22)}
.modal dl div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.modal dt{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3)}
.modal dd{margin:0;font-size:.95rem;color:var(--gold2)}
.modal menu{display:flex;gap:.6rem;margin:0;padding:0;list-style:none}
.modal menu .bt{flex:1;justify-content:center}
@media (max-width:420px){.modal menu{flex-direction:column-reverse}}

/* Cabecalho de secao DENTRO de um cartao: separa "em andamento" de
   "finalizados" sem virar um segundo cartao (Mateus, 08/09/2026). Mais
   discreto que o titulo do cartao, senao a tela ganha dois donos. */
.card-t.sub{border-top:1px solid var(--ln2);margin-top:.2rem;
  font-family:var(--bod);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx3);font-weight:600}
.card-t.sub em{letter-spacing:0;text-transform:none}

/* Seletor curto dentro de uma linha de lista (o idioma, em Configuracoes).
   O <select> padrao do formulario ocupa a largura toda e quebra a linha. */
.sel-peq{background:var(--sf2);color:var(--tx);border:1px solid var(--ln);
  border-radius:var(--r3);padding:.32rem .5rem;font:inherit;font-size:.85rem;max-width:11rem}




/* ======================================================================
   VITRINE: um modo so (Mateus, 09/09/2026)

   O card empilhado que o celular ja mostrava passa a valer em toda largura.
   O que muda com a tela e QUANTOS cabem por linha, nao o desenho do card.

   Antes eram duas vistas com dois cards diferentes: a lista com tres zonas
   lado a lado (quem | tempo | lance) e a grade com a arte em faixa no topo.
   Duas telas para a mesma coisa, e a faixa de arte deixava a repeticao de
   arte gritar — sao 6 artes de raca para 89 classes.
   ====================================================================== */
.vitrine-lista{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
@media (max-width:1180px){.vitrine-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.vitrine-lista{grid-template-columns:1fr}}

/* As tres zonas empilham SEMPRE: numa coluna de ~320px nao cabem lado a lado.
   A regua muda de lado junto — vertical entre colunas vira horizontal entre
   linhas. */
.vitrine-lista .lei{grid-template-columns:1fr}
.vitrine-lista .z2,.vitrine-lista .z3{border-left:none;border-top:1px solid var(--ln2)}
.vitrine-lista .z1,.vitrine-lista .z2,.vitrine-lista .z3{padding:.75rem .9rem}

/* A arte como fundo, esmaecida, sangrando pela direita — o mesmo tratamento
   que o celular ja usava. Alta o bastante para o rosto aparecer, que e o que
   identifica a raca de longe. */
/* Ancorada no TOPO e proporcional a ALTURA do card, igual ao celular. Duas
   tentativas erradas antes desta: `height:150%` deixava a arte mais larga que
   o card e ela passava por cima do texto; ancorar em `bottom` corrigiu a
   largura mas deixou o topo do card vazio e a figura comecando na metade.
   118% cobre o card inteiro com a cabeca na altura do medalhao de level. */
/* Recorte afrouxado em 11/09/2026: a 118% de altura puxada para cima e 6%
   para fora da direita, a arma ficava metade fora do card -- o escudo e a
   lamina do elfo guerreiro sumiam. A 100%, encostada no topo e trazida para
   dentro, cabe a figura inteira e ainda sobra fundo. */
.vitrine-lista .lei img.pj{width:auto;height:100%;top:0;bottom:auto;right:3%;
  object-fit:contain;opacity:.38;
  -webkit-mask-image:linear-gradient(to left,#000 52%,transparent);
  mask-image:linear-gradient(to left,#000 52%,transparent)}
.vitrine-lista .lei:hover img.pj{opacity:.5}
.vitrine-lista .z1,.vitrine-lista .z2,.vitrine-lista .z3{z-index:1}

/* O campo de lance e o botao lado a lado, sem espremer o numero. */
.vitrine-lista .z3 .lance-ja{display:flex;gap:.4rem}
.vitrine-lista .z3 .lance-ja input{min-width:0;flex:1}


/* Celula que so segura a coluna da grade de equipamento: sem borda, sem
   fundo, sem tracejado (Mateus, 09/09/2026). */
.doll .slot.fantasma{border:none;background:none;box-shadow:none;cursor:default}

/* A grade de equipamento ganha fundo proprio. Antes os icones ficavam
   direto sobre a arte do personagem, que do lado direito aparece quase sem
   veu — o resultado era icone competindo com o rosto do elfo. */
.retrato .doll{background:linear-gradient(180deg,rgba(18,14,10,.72),rgba(18,14,10,.86));
  border-top:1px solid var(--ln2);z-index:1}


/* ======================================================================
   Card do vendedor em 'vendido, aguardando pagamento' (Mateus, 09/09/2026)
   e o respiro dos textos explicativos.

   "Nao exprema tanto os textos": a `.dica` estava em 0.77rem com linha
   apertada, num paragrafo unico que emendava tres ideias. Agora ela e maior,
   respira entre linhas, e a frase de consequencia vira paragrafo proprio.
   Vale para os DOIS cards -- o do comprador tinha o mesmo defeito.
   ====================================================================== */
.card.vendendo{border-color:var(--ln3);margin-bottom:.85rem}
.card.vendendo .card-t{background:rgba(201,154,60,.08)}
.card.vendendo .card-t .dir{color:var(--gold2)}
.dica b.bom{color:var(--erva2)}

.dica{font-size:.83rem;line-height:1.65}
.dica.larga{padding:.2rem .95rem 1rem;margin:0;white-space:pre-line}
.card.devendo .dica,.card.vendendo .dica{padding-top:.35rem}


/* ======================================================================
   Cabecalho da vitrine com arte horizontal (Mateus, 09/09/2026)

   O `.hero` padrao poe um retrato VERTICAL a 170% de altura num quadro de
   96px. Sobra a cabeca: a figura aparece cortada no pescoco, e foi assim
   que a vitrine ficou.

   Aqui a arte e o fundo, nao um recorte. `cena-loja.webp` (1600x686) e uma
   fileira de personagens de racas diferentes -- larga de nascenca, entao
   numa faixa baixa ela continua legivel.

   O veu vem da esquerda e e o que garante que o titulo se leia por cima da
   arte, em vez de competir com ela.

   ⚠️ O nome da classe e `elenco`, e nao `cena`, porque `.cena` JA EXISTE
   neste arquivo (linha ~65): e a camada de fundo fixa da pagina inteira, com
   `z-index:-2` e `filter:brightness(.30)`. Um `.hero.cena` herdava os dois e
   o cabecalho ia parar ATRAS do proprio fundo -- faixa preta, sem erro no
   console, porque as duas regras sao validas. Aconteceu em 09/09/2026.
   ====================================================================== */
.hero.elenco{min-height:170px;background:var(--sf)}
.hero.elenco .art{position:absolute;inset:0;
  background:var(--cena-loja) center 18%/cover no-repeat;
  filter:saturate(.9)}
.hero.elenco .veu{position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(21,16,11,.97) 0%,rgba(21,16,11,.90) 26%,rgba(21,16,11,.42) 58%,rgba(21,16,11,.06) 92%)}
.hero.elenco > div{position:relative;z-index:1}

/* No celular a faixa e estreita: o veu precisa cobrir mais, senao o titulo
   cai em cima da figura do meio. */
@media (max-width:760px){
  .hero.elenco{min-height:128px}
  .hero.elenco .veu{background:linear-gradient(90deg,
    rgba(21,16,11,.96) 0%,rgba(21,16,11,.90) 52%,rgba(21,16,11,.58) 100%)}
}


/* ======================================================================
   Faixa de saldo da Carteira (Mateus, 09/09/2026, opcao A do mockup)

   Substitui os tres cartoes do topo. O problema nao era espacamento: os
   botoes so existiam no primeiro cartao e era ele que esticava a linha,
   deixando os outros dois com metade da altura vazia.

   A arte e proposital-mente quase invisivel -- o brasao grande de um lado e
   um calor vindo do canto. Aqui o assunto e dinheiro; personagem nenhum
   significa nada nesta tela, e uma arte forte competiria com o numero, que
   e a unica coisa que a pessoa veio ver.
   ====================================================================== */
.saldo{display:flex;align-items:center;gap:1.5rem;padding:1.05rem 1.2rem;flex-wrap:wrap;
  position:relative;overflow:hidden}
/* ⚠️ Rotulo, numero e legenda sao <span> -- inline. Quem os empilhava era
   `.nums .olho{display:block}` e companhia, escopadas ao bloco antigo. Sem
   repetir aqui, a faixa vira uma linha corrida: "CHASE COIN 2 saldo total".
   Aconteceu em producao em 09/09/2026. */
.saldo .olho,.saldo .pe{display:block}
.saldo .num{display:flex;align-items:center;gap:.3rem;line-height:1.1;margin-top:.1rem}
.saldo .num .cm{width:.7em;height:.7em}
.saldo .pe{font-size:.66rem;color:var(--tx2);margin-top:.1rem}
.saldo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));z-index:2}
.saldo .art{position:absolute;inset:0;pointer-events:none;
  background:
    var(--brasao) right -8% center/auto 210% no-repeat,
    radial-gradient(520px 240px at 92% 130%,rgba(194,114,58,.16),transparent 70%),
    radial-gradient(420px 200px at 6% -40%,rgba(201,154,60,.10),transparent 68%);
  opacity:.16;filter:saturate(.5)}
.saldo > *:not(.art){position:relative;z-index:1}

.saldo .total .num{font-size:2.6rem}
.saldo .reg{width:1px;align-self:stretch;background:var(--ln2);min-height:52px}
.saldo .par{display:flex;gap:1.9rem}
.saldo .par .num{font-size:1.25rem;margin-top:.05rem}
.saldo .num.livre{color:var(--erva2)}
.saldo .num.preso{color:var(--cobre)}
/* Congelado zerado e o caso normal: continua na tela para ensinar que existe,
   mas apagado, para nao disputar atencao com um numero que nao mudou. */
.saldo .par .zero{opacity:.45}
.saldo .par .zero .num{color:var(--tx2)}

/* Botoes maiores que os do resto do painel: sao as duas unicas acoes desta
   tela, e estavam no tamanho `peq`, de botao secundario. */
.saldo .acoes{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.saldo .acoes .bt{padding:.62rem 1.35rem;font-size:.88rem}

@media (max-width:860px){
  .saldo{gap:1rem 1.4rem}
  /* No celular a faixa e estreita e o brasao ocupa proporcionalmente muito
     mais: mesma opacidade ali vira desenho, nao textura. */
  .saldo .art{opacity:.09}
  .saldo .reg{display:none}
  .saldo .acoes{margin-left:0;width:100%}
  .saldo .acoes .bt{flex:1;text-align:center}
}


/* ======================================================================
   Barra de quantidade da loja (Mateus, 09/09/2026)

   Substitui os botoes de mais/menos. Com passo de 10 em 10 ate o teto da
   barra, parar num valor da faixa comum e um gesto -- antes eram dezenas de
   cliques, e por isso todo mundo caia nos atalhos redondos.

   A barra nao vai ate o teto do PEDIDO de proposito: numa faixa de 10 a
   10.000 cada pixel valeria dezenas de coins e escolher 300 seria sorte.
   ====================================================================== */
.qtd.solo{grid-template-columns:1fr;justify-items:center;padding-bottom:.2rem}
.barra-qtd{padding:.1rem 1.1rem .2rem}
.barra-qtd input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:none;cursor:pointer;display:block}
.barra-qtd input[type=range]:focus-visible{outline:2px solid var(--gold2);outline-offset:4px;
  border-radius:var(--r4)}

/* A trilha e o polegar precisam ser escritos duas vezes: os prefixos nao
   aceitam seletor combinado, entao regra unica nao vale para os dois. */
.barra-qtd input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(201,154,60,.45),rgba(201,154,60,.14));
  border:1px solid var(--ln2)}
.barra-qtd input[type=range]::-moz-range-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(201,154,60,.45),rgba(201,154,60,.14));
  border:1px solid var(--ln2)}
.barra-qtd input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-8px;border-radius:50%;border:1px solid #8A6520;
  background:radial-gradient(circle at 34% 30%,var(--gold3),var(--gold2) 55%,var(--gold));
  box-shadow:0 2px 8px rgba(0,0,0,.55)}
.barra-qtd input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  border:1px solid #8A6520;
  background:radial-gradient(circle at 34% 30%,var(--gold3),var(--gold2) 55%,var(--gold));
  box-shadow:0 2px 8px rgba(0,0,0,.55)}

.barra-qtd .pontas{display:flex;justify-content:space-between;font-size:.66rem;color:var(--tx3);
  font-variant-numeric:tabular-nums;margin-top:-.1rem}


/* A instrucao ao lado do titulo do cartao: passo a seguir, nao item da lista. */
.card-t .passo{margin-left:auto;font-family:var(--bod);font-size:.72rem;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--tx2)}
.card-t .passo b{color:var(--gold2);font-weight:800}
@media (max-width:640px){
  .card-t{flex-wrap:wrap}
  .card-t .passo{margin-left:0;width:100%}
}

/* ======================================================================
   Cabecalho da vitrine sem personagem (Mateus, 09/09/2026)

   Substitui a fileira de personagens. O pedido e cenario, sem ninguem, e
   nao ha arte assim no projeto -- entao aqui nao ha foto nenhuma: o
   gradiente da marca e o brasao, que nao competem com o titulo.

   Quando existir uma paisagem larga, e so trocar o `background` de
   `.hero.elenco .art` de volta para uma imagem.
   ====================================================================== */
.hero.elenco .art{
  background:
    var(--brasao) right 4% center/auto 240% no-repeat,
    radial-gradient(760px 340px at 88% 130%,rgba(194,114,58,.22),transparent 68%),
    radial-gradient(620px 300px at 10% -40%,rgba(201,154,60,.14),transparent 66%),
    linear-gradient(180deg,#241C13,#1A140E);
  filter:none;opacity:1}
/* O brasao sozinho ficaria forte demais; escurece so ele. */
.hero.elenco::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,16,11,.80) 0%,rgba(21,16,11,.42) 40%,
    rgba(21,16,11,.18) 100%)}
.hero.elenco > div{position:relative;z-index:2}


/* A linha de moeda tem DUAS colunas, nao quatro: nome de um lado, valor
   encostado do outro. Com o `auto 1fr auto auto` herdado do `.pjl` o valor
   caia na coluna elastica, colado no nome, e a linha nao se lia como lista. */
/* O valor fica AO LADO do nome, nao encostado na outra ponta (Mateus,
   09/09/2026): numa linha larga com um personagem so, o olho tinha que
   atravessar a tela inteira para ligar o nome ao numero. A terceira coluna
   e vazia e existe so para empurrar os dois para a esquerda. */
.pjl.moeda{grid-template-columns:auto auto 1fr;gap:.6rem 1.25rem}
.pjl.moeda .num{justify-self:start}

/* O brasao ganha camada propria, para poder ser apagado sem apagar o
   gradiente junto -- dentro do mesmo `background` nao da para dar opacidade
   a uma camada so, e ele saia forte demais. */
/* Cidade na neblina, sem figura. O corte em 62% pega a linha do horizonte
   com os telhados; mais alto sobrava ceu vazio, mais baixo virava terreno.

   O filtro quente nao e enfeite: a arte nasceu esverdeada e a marca e ouro
   sobre marrom -- sem ele a faixa puxava para o cinza. */
.hero.elenco .art{
  background:var(--cena-cidade) center 62%/cover no-repeat;
  filter:sepia(.6) saturate(1.3) hue-rotate(-8deg) brightness(1.35) contrast(1.05);
  opacity:1}


/* ======================================================================
   Arte espelhada (Mateus, 11/09/2026)

   O card mostra a metade DIREITA da arte: o texto cobre a esquerda. Arma que
   sobe para a esquerda fica escondida atras do nome e do relogio. Espelhar
   poe a arma do lado livre, sem refazer arte nenhuma.

   ⚠️ O `transform` e aplicado DEPOIS da pintura, entao ele espelha a mascara
   junto. Sem inverter o gradiente aqui, o esmaecimento iria parar do lado
   errado e a arte ganharia uma borda dura na esquerda.
   ====================================================================== */
.vitrine-lista .lei img.pj.espelho{transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(to right,#000 52%,transparent);
  mask-image:linear-gradient(to right,#000 52%,transparent)}


/* A arte da porta encosta no TOPO, nao no meio (Mateus, 11/09/2026). Com
   `align-items:center` ela acompanhava a altura do formulario: na aba de
   entrar ficava alinhada, na de criar conta -- que tem quatro campos e
   captcha -- afundava, abrindo um vao acima dela. */
@media (min-width:1000px){.porta{align-items:start}}


/* Linha de movimento no Inicio: duas colunas, valor encostado a direita. */
.pjl.mov{grid-template-columns:1fr auto}
.pjl.mov .nm{font-family:var(--bod);font-size:.9rem;font-weight:700;color:var(--tx)}
.pjl.mov .num.saida{color:var(--rubi2)}


/* ── Telas da allauth vestidas (2FA, reautenticar) ──────────────────────────
   Estas telas vem da biblioteca em HTML cru -- `<p><label><input></p>`,
   `<section><h2>`, `<button>` -- porque usam a DSL `{% element %}` dela. As
   telas de entrar e criar conta nao passam por aqui: foram reescritas com a
   marcacao do painel. Vestir por CSS em vez de reescrever seis templates dela
   significa que a proxima tela que ela adicionar ja nasce vestida.
   O gancho `.alw` esta nas duas cascas de `templates/allauth/layouts/`. */
.alw{padding:1.3rem 1.4rem 1.5rem}
.porta .alw{padding:0}
.alw h1{font-family:var(--dis);font-size:1.16rem;color:var(--gold3);font-weight:600;
  margin:0 0 .5rem;letter-spacing:.01em}
.alw h2{font-family:var(--dis);font-size:.92rem;color:var(--gold3);font-weight:600;margin:0 0 .5rem}
.alw p{color:var(--tx2);font-size:.86rem;line-height:1.6;margin:0 0 1rem}
/* Link dentro de texto (os aplicativos autenticadores sugeridos). Sem isto ele
   herda a cor do paragrafo e vira texto comum: a pessoa le tres nomes e nao
   descobre que da para clicar e baixar. */
.alw p a{color:var(--gold2);font-weight:600;text-decoration:underline;
  text-underline-offset:.18em;text-decoration-color:var(--ln3)}
.alw p a:hover{color:var(--gold3);text-decoration-color:var(--gold2)}
.alw section{border-top:1px solid var(--ln2);padding-top:1.1rem;margin-top:1.1rem}
.alw section:first-of-type{border-top:0;padding-top:0}
.alw section p{margin-bottom:.7rem}
/* A lista de acoes de um bloco vira linha de botoes. */
.alw section ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}

/* O `<p>` que embrulha um campo se comporta como .campo; o `<p>` de texto nao.
   A DSL usa a mesma tag para os dois -- e o que tem campo dentro que muda. */
.alw p:has(input,select,textarea){margin-bottom:1.05rem}
.alw label{display:block;margin-bottom:.42rem;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx2);font-weight:700}
.alw input:not([type=checkbox]):not([type=radio]),.alw select,.alw textarea{
  width:100%;border-radius:var(--r3);border:1px solid var(--ln);background:var(--sf2);
  color:var(--tx);font-family:var(--bod);font-size:.94rem;padding:.62rem .8rem}
.alw input:focus,.alw select:focus,.alw textarea:focus{border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(201,154,60,.16)}
.alw input[disabled],.alw textarea[readonly]{color:var(--tx2);background:var(--sf)}
.alw textarea{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;
  line-height:1.7;resize:vertical}
.alw p > span{display:block;margin-top:.38rem;font-size:.77rem;color:var(--tx2);line-height:1.5}
.alw ul.errorlist{margin:.3rem 0 .5rem;padding:0;list-style:none;font-size:.8rem;color:var(--rubi2)}

.alw button,.alw a.bt-alw,.alw section ul a,.alw form ~ a,.alw > a{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r3);border:1px solid transparent;cursor:pointer;
  font-family:var(--bod);font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.55rem 1.05rem;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1B1409}
.alw button:hover,.alw section ul a:hover,.alw > a:hover{filter:brightness(1.09)}
/* Acao secundaria: a partir da segunda de um bloco, vazada. Assim "Desativar"
   ou "Gerar novos" nao competem com a acao principal da tela. */
.alw section ul li:not(:first-child) a{background:none;color:var(--gold);border-color:var(--ln3)}
.alw > a + a{background:none;color:var(--gold);border-color:var(--ln3)}
/* Segunda acao do mesmo formulario (o "Cancelar" da tela que pede o codigo no
   login): vazada, para nao competir com a acao que a pessoa veio fazer. */
.alw form button + button{background:none;color:var(--gold);border-color:var(--ln3)}
.alw form button[type=submit]{width:100%;margin-top:.2rem;padding:.7rem 1.1rem;font-size:.78rem}

/* O QR vem como SVG preto sobre fundo transparente: num painel escuro ele
   simplesmente nao existe. A moldura branca e o que o torna lido pela camera. */
.alw img{display:block;width:172px;height:auto;margin:0 auto 1.1rem;
  background:#fff;padding:10px;border-radius:var(--r3)}