/* ============================================================================
   SOULS IDLE — SITE OFICIAL · DESIGN SYSTEM
   ----------------------------------------------------------------------------
   As cores NÃO foram escolhidas: foram EXTRAÍDAS do `:root` do próprio jogo
   (template.html e index.html). Se o jogo mudar de tom, este arquivo muda junto
   e o site continua parecendo o mesmo produto — que é o ponto inteiro.

   A fonte é a mesma pilha de sistema que o jogo usa. Nenhuma webfont, de
   propósito: o jogo não carrega nenhuma, e um @import aqui custaria requisição,
   FOUT e um salto de layout logo no hero — o oposto do que se quer no LCP.
   ========================================================================== */

:root{
  /* --- tirado do jogo, byte a byte --- */
  --bg:#0b0816;        --panel:#120e24;     --panel2:#0d0a1c;   --head:#1a1436;
  --line:rgba(140,105,225,.20);             --line2:rgba(140,105,225,.45);
  --violet:#8b5cf6;    --vsoft:#b79bff;     --vbtn:#6d5ce0;
  --green:#25d6a2;     --gold:#f0a63c;      --hp:#e2405a;
  --txt:#e9e4f7;       --dim:#9a90b8;       --dim2:#6f6690;

  /* --- derivados só do site: profundidade e ritmo --- */
  --preto:#050309;                          /* mais fundo que o --bg, pro empilhamento */
  --raio:12px;         --raio-s:8px;        /* 12 e 8 são os dois raios mais usados no jogo */
  --max:1200px;                             /* largura do conteúdo */
  --gut:24px;
  --som:0 18px 48px rgba(0,0,0,.55);
  --som-s:0 6px 20px rgba(0,0,0,.4);
  --anel:0 0 0 1px var(--line);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}

*,*::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(--txt); font-family:var(--font);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                        /* trava rolagem lateral: nenhuma seção pode vazar */
}
img{max-width:100%; display:block}
a{color:var(--vsoft); text-decoration:none}
a:hover{color:#d4c4ff}

/* FOCO VISÍVEL. Nunca `outline:none` sem substituto: quem navega por teclado
   perde a noção de onde está, e isso reprova acessibilidade sozinho. */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--vsoft); outline-offset:3px; border-radius:4px;
}

/* pular pro conteúdo — primeiro tab da página, invisível até receber foco */
.pular{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--violet);color:#fff;border-radius:0 0 var(--raio-s) 0}
.pular:focus{left:0}

.env{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ===== TIPOGRAFIA =========================================================
   Sem fonte "medieval" e sem futurista. A personalidade vem do LOGO e do
   espaçamento — caixa alta com tracking largo lê como inscrição em pedra sem
   custar uma requisição de fonte. */
h1,h2,h3{margin:0; line-height:1.15; font-weight:700; letter-spacing:-.01em}
.olho{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--dim2);
  font-weight:600;margin:0 0 12px}
.tit{font-size:clamp(26px,3.6vw,40px);letter-spacing:.5px}
.sub{color:var(--dim);font-size:clamp(15px,1.5vw,17px);max-width:62ch;margin:14px 0 0}
.frase{font-size:clamp(17px,2vw,21px);color:var(--vsoft);font-weight:600;letter-spacing:.3px}

/* ===== BOTÕES ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--raio-s);border:1px solid transparent;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
/* o ÚNICO glow do site inteiro fica no CTA principal. Brilho em tudo é neon;
   brilho num lugar só é hierarquia. */
.btn-p{background:linear-gradient(180deg,#7c5ce8,#5b46c4);color:#fff;
  box-shadow:0 8px 26px rgba(124,92,232,.32), inset 0 1px 0 rgba(255,255,255,.14)}
.btn-p:hover{color:#fff;box-shadow:0 12px 34px rgba(124,92,232,.46), inset 0 1px 0 rgba(255,255,255,.2)}
.btn-s{background:rgba(255,255,255,.04);border-color:var(--line2);color:var(--txt)}
.btn-s:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.btn-g{background:transparent;border-color:var(--line);color:var(--dim)}
.btn-g:hover{border-color:var(--line2);color:var(--txt)}
.btn-sm{padding:9px 16px;font-size:12px;letter-spacing:1.1px}

/* ===== CABEÇALHO ========================================================= */
.topo{position:sticky;top:0;z-index:50;
  background:rgba(8,5,16,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.topo-in{display:flex;align-items:center;gap:18px;height:66px}
.marca{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* 42px, não 34. O logo tem castelo, espada, coroa e fumaça: abaixo disso ele deixa
   de ser lido como marca e vira uma mancha roxa. Foi a captura que mostrou. */
.marca img{height:42px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1 1 auto}
.nav a,.nav .disp{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;
  border-radius:var(--raio-s);color:var(--dim);font-size:14px;font-weight:600;
  background:none;border:0;font-family:inherit;cursor:pointer;transition:color .15s,background .15s}
.nav a:hover,.nav .disp:hover,.nav a[aria-current="page"]{color:var(--txt);background:rgba(255,255,255,.05)}
.nav a[aria-current="page"]{color:var(--vsoft)}
.topo-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* menu suspenso — abre por foco E por hover, então funciona no teclado */
.drop{position:relative}
.drop-m{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;padding:8px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--raio);
  box-shadow:var(--som);display:none;flex-direction:column;gap:2px}
.drop:hover .drop-m,.drop:focus-within .drop-m{display:flex}
.drop-m a{padding:10px 12px;font-size:14px}

/* botão de menu do celular */
.burg{display:none;margin-left:auto;padding:9px;border-radius:var(--raio-s);
  background:rgba(255,255,255,.05);border:1px solid var(--line);cursor:pointer}
.burg span{display:block;width:20px;height:2px;background:var(--txt);border-radius:2px}
.burg span+span{margin-top:5px}

/* ===== HERO ===============================================================
   Profundidade em camadas, tudo em CSS: nenhuma imagem extra, nenhum canvas.
   A arte real do jogo entra como uma camada só, bem escurecida — ela dá o
   clima; quem carrega a leitura é o logo. */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,84px);
  border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0;
  background-position:center 38%;background-size:cover;
  opacity:.30;filter:saturate(.72) contrast(1.04)}
.hero-veu{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(139,92,246,.20), transparent 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(11,8,22,.98), transparent 60%),
    linear-gradient(180deg, rgba(5,3,9,.62) 0%, rgba(5,3,9,.42) 42%, var(--bg) 100%)}
.hero-in{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:6px}
.hero-logo{width:min(430px,74vw);height:auto;filter:drop-shadow(0 14px 42px rgba(0,0,0,.7))}
.hero h1{font-size:clamp(28px,4.4vw,50px);letter-spacing:1.2px;text-transform:uppercase;
  margin:16px 0 0;
  background:linear-gradient(180deg,#fff 6%,#cbbdf0 58%,#8e7ec2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--dim);font-size:clamp(15px,1.7vw,18px);max-width:56ch;margin:16px 0 0}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.selo{display:inline-flex;align-items:center;gap:10px;padding:7px 15px;border-radius:999px;
  background:rgba(139,92,246,.10);border:1px solid var(--line2);
  font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--vsoft);font-weight:700}
.selo b{color:var(--txt);font-weight:700}
.selo .pt{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto}

/* ===== BARRA DE NÚMEROS ================================================== */
.nums{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),transparent)}
.nums-g{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.num{background:var(--bg);padding:22px 14px;text-align:center}
.num b{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:var(--txt);
  letter-spacing:.5px;line-height:1.1}
.num small{display:block;margin-top:5px;font-size:11px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--dim2);font-weight:600}

/* ===== SEÇÕES ============================================================ */
.sec{padding:clamp(56px,8vw,96px) 0;position:relative}
.sec+.sec{border-top:1px solid var(--line)}
.sec-cab{max-width:70ch;margin-bottom:clamp(28px,4vw,44px)}
.sec-cab.mid{margin-left:auto;margin-right:auto;text-align:center}
.escura{background:
  radial-gradient(80% 55% at 50% 0%, rgba(139,92,246,.07), transparent 70%), var(--panel2)}

/* ===== CARDS ============================================================= */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  padding:22px;position:relative;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.card:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--som-s)}
.card h3{font-size:17px;letter-spacing:.2px;margin-bottom:8px}
.card p{color:var(--dim);font-size:14.5px;margin:0}
.card .ic{width:34px;height:34px;margin-bottom:14px;opacity:.9}

/* ===== CLASSES =========================================================== */
.cls{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.clsc{position:relative;border:1px solid var(--line);border-radius:var(--raio);
  overflow:hidden;background:var(--panel);transition:border-color .18s,transform .18s}
.clsc:hover{border-color:var(--line2);transform:translateY(-3px)}
/* O FUNDO É TEXTURA, O PERSONAGEM NÃO.
   O fundo de chefe existe pra dar profundidade atrás do boneco, não pra o jogador ler
   qual chefe está ali — então ele vai dessaturado e escuro. O PERSONAGEM tem de sair
   com a cor dele, e é aí que a primeira versão errava de duas maneiras ao mesmo tempo:

     1. o `filter` estava no `.clsc-art`, e filtro vale para a SUBÁRVORE inteira — o
        boneco ia junto;
     2. a compensação (`saturate(2.9)` na imagem) estava na MESMA regra que o
        `drop-shadow`, e a segunda declaração de `filter` apaga a primeira em silêncio.
        Ou seja: a correção nunca existiu, e os quatro bonecos saíam cinzas.

   Agora o ::before carrega a arte e leva o filtro; o ::after é só o véu; a imagem fica
   fora dos dois e recebe UM `filter` só, o da sombra. */
.clsc-art{position:relative;isolation:isolate;height:190px;display:grid;place-items:center;
  background-size:cover;background-position:center 42%}
.clsc-art::before{content:'';position:absolute;inset:0;z-index:0;
  background-image:inherit;background-size:cover;background-position:center 42%;
  filter:saturate(.3) brightness(.8)}
.clsc-art::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,5,16,.55),rgba(8,5,16,.9))}
/* PIXEL ART: as artes de classe são 128×128 de verdade. Ampliar com suavização
   as deixa borradas; `pixelated` mantém a aresta e fica NÍTIDO no dobro. */
.clsc-art img{position:relative;z-index:2;width:112px;height:112px;
  image-rendering:pixelated;filter:drop-shadow(0 10px 24px rgba(0,0,0,.65))}
.clsc-txt{padding:18px}
.clsc-txt h3{font-size:16.5px;letter-spacing:1.2px;text-transform:uppercase}
.clsc-papel{display:inline-block;margin:8px 0 10px;padding:3px 10px;border-radius:999px;
  background:rgba(139,92,246,.13);border:1px solid var(--line);
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--vsoft);font-weight:700}
.clsc-txt p{color:var(--dim);font-size:13.5px;margin:0}

/* ===== JORNADA DO MUNDO ==================================================
   Fila horizontal com rolagem no desktop e empilhada no celular. Sem carrossel
   com JavaScript: rolagem nativa é acessível, funciona com teclado e não custa
   um kilobyte. */
.jornada{display:grid;gap:14px}
.reg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  min-height:168px;border:1px solid var(--line);border-radius:var(--raio);overflow:hidden;
  background:var(--panel);transition:border-color .18s}
.reg:hover{border-color:var(--line2)}
/* a arte de fundo do jogo já é escura; sem um empurrão de brilho ela some atrás do
   véu e a jornada vira sete retângulos pretos — justamente a seção onde a arte é o
   argumento. */
.reg-art{position:relative;background-size:cover;background-position:center 60%;
  filter:brightness(1.22) saturate(1.06)}
.reg-art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,14,36,.05),var(--panel) 96%)}
.reg-txt{padding:22px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.reg-n{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.reg-n h3{font-size:19px;letter-spacing:.4px}
.reg-lv{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim2);font-weight:700}
.reg-meta{color:var(--dim);font-size:13.5px}
.reg-chefe{display:inline-flex;align-items:center;gap:9px;margin-top:4px;
  font-size:13.5px;color:var(--vsoft)}
.reg-chefe img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.reg-ord{position:absolute;top:14px;left:14px;z-index:2;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,5,16,.8);border:1px solid var(--line2);
  font-size:11.5px;font-weight:800;color:var(--vsoft)}

/* ===== CHEFES ============================================================ */
.chefes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chf{position:relative;min-height:250px;border-radius:var(--raio);overflow:hidden;
  border:1px solid var(--line);display:flex;align-items:flex-end;
  background-size:cover;background-position:center;transition:border-color .18s,transform .18s}
.chf:hover{border-color:var(--line2);transform:translateY(-3px)}
.chf::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,3,9,.24) 0%,rgba(5,3,9,.86) 68%,rgba(5,3,9,.96) 100%)}
.chf-in{position:relative;z-index:1;padding:20px;width:100%}
.chf-in img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated;
  margin-bottom:10px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.7))}
.chf-in h3{font-size:17px;letter-spacing:.3px}
.chf-in p{color:var(--dim);font-size:13px;margin:5px 0 0}

/* ===== LOOP DAS PROFISSÕES =============================================== */
.loop{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.loop-e{flex:1 1 190px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--raio);padding:20px;text-align:center}
.loop-e b{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--vsoft);margin-bottom:8px}
.loop-e span{color:var(--dim);font-size:13.5px}
.loop-seta{display:grid;place-items:center;color:var(--dim2);font-size:20px;flex:0 0 auto}
.profs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.profg{background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);padding:22px}
.profg h3{font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--dim2);margin-bottom:14px}
.profl{display:flex;flex-wrap:wrap;gap:8px}
.profl li{list-style:none;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:13.5px}
.profl li b{color:var(--txt);font-weight:600}
.profl li span{color:var(--dim2);font-size:12px;margin-left:6px}

/* ===== LIGAS DA ARENA ==================================================== */
.ligas{display:flex;gap:10px;flex-wrap:wrap}
.liga{flex:1 1 140px;text-align:center;padding:18px 12px;border-radius:var(--raio);
  background:var(--panel);border:1px solid var(--line)}
.liga b{display:block;font-size:14px;letter-spacing:1.6px;text-transform:uppercase}
.liga small{display:block;margin-top:5px;font-size:11.5px;color:var(--dim2);letter-spacing:1px}
.liga:nth-child(1) b{color:#c08457} .liga:nth-child(2) b{color:#c7ccd6}
.liga:nth-child(3) b{color:#e3b23c} .liga:nth-child(4) b{color:#8fd4d4}
.liga:nth-child(5) b{color:#a9c9ff} .liga:nth-child(6) b{color:#e0a3ff}

/* ===== FAIXA COM ARTE (masmorras, covil) ================================= */
.faixa{position:relative;overflow:hidden;border-radius:var(--raio);
  border:1px solid var(--line);min-height:330px;display:flex;align-items:center}
.faixa-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.42;filter:saturate(.8)}
.faixa::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,5,16,.96) 12%,rgba(8,5,16,.62) 58%,rgba(8,5,16,.30) 100%)}
.faixa-in{position:relative;z-index:2;padding:clamp(24px,4vw,44px);max-width:60ch}

/* ===== LISTA DE FATOS ==================================================== */
.fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:22px}
.fato{padding:14px 16px;border-radius:var(--raio-s);
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.fato b{display:block;font-size:20px;font-weight:800;color:var(--txt)}
.fato small{color:var(--dim2);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase}

/* ===== CTA FINAL ========================================================= */
.fim{position:relative;overflow:hidden;text-align:center;
  padding:clamp(60px,9vw,110px) 0;border-top:1px solid var(--line)}
.fim-veu{position:absolute;inset:0;
  background:radial-gradient(75% 100% at 50% 100%, rgba(139,92,246,.16), transparent 68%)}
.fim-in{position:relative;z-index:1;display:grid;justify-items:center;gap:8px}

/* ===== RODAPÉ ============================================================ */
.rod{border-top:1px solid var(--line);background:var(--panel2);padding:52px 0 30px;font-size:14px}
.rod-g{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.rod-marca img{height:32px;margin-bottom:14px}
.rod-marca p{color:var(--dim2);font-size:13.5px;max-width:34ch;margin:0}
/* h3, nao h4: <footer> nao cria escopo de outline no HTML5, entao o titulo do
   rodape continua a numeracao do documento. A ultima secao fecha num h2, e h2 -> h4
   pula um nivel — o leitor de tela anuncia um sumario com buraco. */
.rod h3{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--dim2);
  margin:0 0 12px;font-weight:700}
.rod ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rod ul a{color:var(--dim);font-size:14px}
.rod ul a:hover{color:var(--txt)}
.rod-fim{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--dim2);font-size:12.5px}

/* ===== ENTRADA SUAVE =====================================================
   Animação de entrada por IntersectionObserver.

   O PADRÃO É VISÍVEL, e isso não é detalhe. A primeira versão escrevia
   `.sobe{opacity:0}` direto e prometia, no comentário, ser "o que separa site
   com fade de site que some se o script falhar" — enquanto fazia exatamente o
   contrário: o conteúdo nascia invisível e só aparecia SE o observador
   funcionasse. Numa medição, três dos quatro cards de classe ficaram
   invisíveis na página inteira.

   Agora o esconde-esconde só liga quando `html.anim` existe, e essa classe é
   posta pelo próprio script UMA LINHA ANTES de ele começar a observar. Se
   qualquer coisa falhar antes disso — script bloqueado, erro de JS, navegador
   antigo, leitor de conteúdo —, a classe não entra e a página inteira aparece
   normalmente. O enfeite passou a depender do conteúdo; nunca o contrário. */
html.anim .sobe{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
html.anim .sobe.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.anim .sobe{opacity:1;transform:none;transition:none}
  .card:hover,.clsc:hover,.chf:hover{transform:none}
}

/* ===== RESPONSIVO ========================================================
   Cada quebra existe por um motivo medido, não por número redondo. */
@media (max-width:1080px){
  .cls{grid-template-columns:repeat(2,1fr)}
  .chefes{grid-template-columns:repeat(2,1fr)}
  .nums-g{grid-template-columns:repeat(3,1fr)}
  .rod-g{grid-template-columns:1fr 1fr}
}
/* 1100, NÃO 900. O ponto de virada não é gosto: é medição. O menu começou com cinco
   itens e cabia em 900px; quando Rankings e Novidades entraram, sete itens mais os dois
   botões passaram a somar 1075px numa janela de 1024 e a página INTEIRA rolava de lado —
   em todas as oito páginas de uma vez, porque o cabeçalho é o mesmo. Foi o
   `site-confere.js` que apontou `div.topo-cta` pelo nome. Item novo no menu obriga a
   remedir este número. */
@media (max-width:1100px){
  /* o menu inteiro vira gaveta: sete itens não cabem em linha sem virar sopa */
  .nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    padding:14px var(--gut) 22px;margin:0;
    background:rgba(8,5,16,.98);border-bottom:1px solid var(--line2);
    display:none;max-height:calc(100dvh - 66px);overflow-y:auto}
  .nav.aberto{display:flex}
  .nav a,.nav .disp{padding:13px 12px;font-size:15px}
  .drop-m{position:static;display:flex;border:0;background:none;box-shadow:none;
    padding:0 0 0 14px;min-width:0}
  .burg{display:block}
  .topo-cta .btn-s{display:none}          /* no celular sobra só o CTA principal */
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .profs{grid-template-columns:1fr}
  .reg{grid-template-columns:1fr}
  .reg-art{min-height:132px}
  .reg-art::after{background:linear-gradient(180deg,rgba(18,14,36,.10),var(--panel) 94%)}
}
@media (max-width:620px){
  :root{--gut:18px}
  .nums-g{grid-template-columns:repeat(2,1fr)}
  .g2,.g3,.g4,.cls,.chefes{grid-template-columns:1fr}
  .rod-g{grid-template-columns:1fr;gap:26px}
  .hero-btns .btn{width:100%}
  /* O loop das profissões vira COLUNA. Antes ele só ganhava `rotate(90deg)` na seta, e
     rotação não muda a caixa de layout: a seta continuava ocupando largura na linha e
     empurrava o conteúdo para fora da tela — 411px de conteúdo numa janela de 390.
     Foi o `site-confere.js` que apontou o culpado pelo nome. */
  .loop{flex-direction:column;gap:8px}
  .loop-e{flex:1 1 auto;width:100%}
  .loop-seta{width:100%;height:18px;transform:rotate(90deg)}
  .faixa{min-height:0}
}
/* 360px é a menor tela que este site promete atender, e nela o cabeçalho não fechava:
   logo + hambúrguer + "Jogar agora" davam 388px numa janela de 360. Encolher os três um
   pouco resolve sem esconder o CTA — que é a única coisa que o cabeçalho precisa fazer. */
@media (max-width:400px){
  :root{--gut:14px}
  .marca img{height:32px}
  .topo-in{gap:10px}
  .btn-sm{padding:8px 12px;font-size:11px;letter-spacing:.8px}
  .btn{padding:12px 18px;letter-spacing:1px}
  .num{padding:16px 8px}
  .num b{font-size:20px}
}

/* ============================================================================
   PÁGINAS INTERNAS
   ----------------------------------------------------------------------------
   Tudo aqui é montado com os mesmos tokens do bloco de cima. Nenhuma cor nova,
   nenhum raio novo, nenhuma sombra nova — se uma página interna precisasse de
   uma cor própria, ela deixaria de parecer o mesmo produto, que é justamente o
   que este arquivo existe para impedir.

   Este bloco vem DEPOIS das media queries de propósito: nenhuma delas mira
   estas classes, e as regras responsivas destes componentes estão no fim daqui.
   ========================================================================== */

/* ===== CAPA DE PÁGINA INTERNA =============================================
   Um hero menor que o da home: a home tem um trabalho (converter), a interna
   tem outro (situar). Mesma arte de batalha do jogo ao fundo, mesmo véu. */
.capa{position:relative;isolation:isolate;padding:76px 0 62px;overflow:hidden;
  border-bottom:1px solid var(--line)}
.capa-bg{position:absolute;inset:0;z-index:-2;background-size:cover;
  background-position:center;filter:brightness(.5) saturate(.85)}
.capa-veu{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,8,22,.72),rgba(11,8,22,.9) 60%,var(--bg))}
.capa h1{font-size:clamp(30px,4.4vw,48px);letter-spacing:.5px;margin:0 0 4px}
.capa .sub{max-width:64ch}
.capa .fatos{margin-top:30px}

/* migalha: dá a volta sem depender do botão "voltar" do navegador */
.migalha{font-size:13px;color:var(--dim2);margin:0 0 16px;letter-spacing:.4px}
.migalha a{color:var(--dim)}
.migalha a:hover{color:var(--vsoft)}
.migalha span{margin:0 8px;opacity:.5}

/* ===== SELINHO / PÍLULA =================================================== */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:12px;font-weight:600;letter-spacing:.6px;color:var(--dim);
  /* NAO usar `white-space:nowrap` aqui. Um chip com texto longo vira uma caixa
     larga demais que empurra a pagina inteira — foi o `site-confere.js` que
     apontou 532px de conteudo numa janela de 360. Quebrar linha e' feio;
     rolagem lateral e' defeito. */
  max-width:100%;white-space:normal;text-align:left}
.chip b{color:var(--txt);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ===== TABELA DE DADOS ====================================================
   Rola dentro de si mesma. Uma tabela larga é a causa nº 1 de rolagem lateral
   na página inteira, e rolagem lateral no corpo é defeito, não recurso. */
.tabw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--raio);
  background:var(--panel);-webkit-overflow-scrolling:touch}
.tab{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tab caption{text-align:left;padding:14px 18px 0;color:var(--dim2);font-size:12px;
  letter-spacing:2px;text-transform:uppercase;font-weight:600}
.tab th,.tab td{padding:11px 18px;text-align:left;border-bottom:1px solid var(--line)}
.tab thead th{color:var(--dim2);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:600;background:var(--head);position:sticky;top:0}
.tab tbody tr:last-child td{border-bottom:0}
.tab tbody tr:hover{background:rgba(140,105,225,.06)}
.tab .n{color:var(--txt);font-weight:600}
.tab .num-c{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}
.tab .em{font-size:15px;padding-right:0;width:1%}

/* ===== REGIÃO EM FAIXA INTEIRA (mundo.html) =============================== */
.rgf{position:relative;isolation:isolate;border:1px solid var(--line);
  border-radius:var(--raio);overflow:hidden;background:var(--panel);margin-bottom:34px}
.rgf-top{position:relative;min-height:230px;display:flex;align-items:flex-end;
  padding:26px var(--gut)}
.rgf-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  filter:brightness(1.15) saturate(1.04)}
.rgf-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,8,22,.28),rgba(18,14,36,.86) 82%,var(--panel))}
.rgf-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.rgf-cab h2{font-size:clamp(22px,2.8vw,30px)}
.rgf-ord{position:absolute;top:18px;left:var(--gut);width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(11,8,22,.82);border:1px solid var(--line2);
  color:var(--vsoft);font-size:13px;font-weight:700;z-index:1}
.rgf-corpo{padding:22px var(--gut) 26px}
.rgf-chefe{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-top:20px;
  border:1px solid var(--line2);border-radius:var(--raio-s);
  background:linear-gradient(90deg,rgba(140,105,225,.10),transparent)}
.rgf-chefe img{width:52px;height:52px;flex:0 0 auto;image-rendering:pixelated}
.rgf-chefe h3{font-size:17px;margin-bottom:2px}
.rgf-chefe p{margin:0;color:var(--dim);font-size:13px}
.rgf-chefe .chips{margin-top:8px}

/* ===== CLASSE EM PAINEL GRANDE (classes.html) ============================= */
.clf{display:grid;grid-template-columns:270px 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--raio);overflow:hidden;background:var(--panel);margin-bottom:30px}
/* O FILTRO VAI NUM PSEUDO-ELEMENTO, não no `.clf-art`. Duas armadilhas aqui:
   `filter` num elemento vale para a subárvore inteira, então filtrar o quadro
   filtraria também o personagem (foi por isso que a primeira versão precisava
   de um `saturate(2.9)` na imagem só para desfazer o estrago); e pôr o filtro
   no véu — como eu tinha feito — filtra o gradiente, que já é quase cinza, e
   não encosta na arte. Resultado: nada acontecia, e os sete fundos de chefe
   entravam com brilhos diferentes demais um do outro.
   Aqui o ::before carrega a arte e leva o filtro; o ::after é só o véu; o
   personagem fica fora dos dois. */
.clf-art{position:relative;isolation:isolate;display:grid;place-items:center;
  min-height:250px;padding:26px;background-size:cover;background-position:center}
.clf-art::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:inherit;background-size:cover;background-position:center;
  filter:grayscale(.55) brightness(.62) saturate(.8)}
.clf-art::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,5,16,.5),rgba(8,5,16,.88))}
/* a arte de classe é 128×128 no projeto. Ampliar suavizando vira borrão; com
   `pixelated` ela sobe como pixel art, que é o que ela é. */
.clf-art img{width:150px;height:150px;image-rendering:pixelated}
.clf-txt{padding:26px var(--gut)}
.clf-txt h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:6px}
.clf-txt>p{color:var(--dim);margin:12px 0 0;max-width:60ch}

/* barras de atributo: comparam as quatro classes de relance, e a escala é a
   MESMA nas quatro (o máximo de cada atributo entre elas), senão a barra
   mentiria bonito. */
.attrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;margin-top:20px}
.attr{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:10px}
.attr small{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim2);font-weight:600}
.attr b{font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--txt)}
.barra{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.barra i{display:block;height:100%;border-radius:999px;background:var(--vbtn)}
.barra.hp i{background:var(--hp)}
.barra.mp i{background:#4f8ef7}
.barra.atk i{background:var(--gold)}
.barra.def i{background:var(--green)}

/* ===== PROFISSÃO (profissoes.html) ======================================== */
.pfc{border:1px solid var(--line);border-radius:var(--raio);background:var(--panel);
  padding:22px;margin-bottom:22px}
.pfc-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.pfc-cab h3{font-size:19px}
.escada{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--raio-s);overflow:hidden}
.escada li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;
  padding:10px 14px;background:var(--panel2);font-size:14px}
.escada li span:first-of-type{color:var(--txt);font-weight:600}
.escada .lv{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim2);
  font-weight:600;white-space:nowrap}
.escada .icone{font-size:17px;text-align:center;line-height:1}
.escada .sai{color:var(--dim);font-size:13px}

/* ===== MASMORRA (masmorras.html) ========================================== */
/* A descida é uma escada que APROFUNDA: cada degrau recua um pouco e escurece,
   então a página faz o mesmo movimento que a mecânica. */
.desc{list-style:none;margin:0;padding:0;counter-reset:d}
.desc li{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:15px 18px;border:1px solid var(--line);border-radius:var(--raio-s);
  background:var(--panel);margin-bottom:8px}
.desc li::before{counter-increment:d;content:counter(d);flex:0 0 auto;width:28px;height:28px;
  border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--head);border:1px solid var(--line2);color:var(--vsoft)}
.desc li b{font-size:15px}
.desc li .dsub{color:var(--dim2);font-size:13px;font-style:italic}
.desc li .mult{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.6px;
  color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.desc .t-elite b{color:var(--vsoft)}
.desc .t-final{border-color:var(--line2);
  background:linear-gradient(90deg,rgba(226,64,90,.10),var(--panel) 60%)}
.desc .t-final b{color:#ff8fa1}

.frj{border:1px solid var(--line);border-radius:var(--raio);background:var(--panel);padding:18px}
.frj h3{font-size:16px;margin-bottom:4px}
.frj .alma{font-size:12px;color:var(--vsoft);font-weight:600;letter-spacing:.4px}
.frj ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.frj li{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--dim);
  border-bottom:1px dashed var(--line);padding-bottom:6px}
.frj li:last-child{border-bottom:0;padding-bottom:0}
.frj li b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.frj .custo{margin-top:14px;font-size:13px;color:var(--gold);font-weight:700}

/* ===== AVISO / NOTA ======================================================= */
.nota{border:1px solid var(--line);border-left:3px solid var(--violet);
  border-radius:0 var(--raio-s) var(--raio-s) 0;background:var(--panel2);
  padding:16px 20px;color:var(--dim);font-size:14px;margin-top:26px}
.nota b{color:var(--txt)}

/* ===== RESPONSIVO DAS INTERNAS =========================================== */
@media (max-width:900px){
  .clf{grid-template-columns:1fr}
  .clf-art{min-height:190px}
  .clf-art img{width:128px;height:128px}
}
@media (max-width:620px){
  .capa{padding:56px 0 46px}
  .rgf-top{min-height:170px}
  .attrs{grid-template-columns:1fr}
  .escada li{grid-template-columns:26px 1fr;row-gap:2px}
  .escada .lv{grid-column:2;justify-self:start}
  .desc li .dsub{display:none}
  .desc li .mult{margin-left:auto}
}

/* ===== NOVIDADES ==========================================================
   Coluna estreita de propósito: 68 caracteres é onde o olho para de saltar
   linha, e esta é a única página do site que é texto corrido de verdade. */
.novs{max-width:760px;margin:0 auto}
.nov{border-bottom:1px solid var(--line);padding:0 0 34px;margin-bottom:34px}
.nov:last-child{border-bottom:0}
.nov-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nov-v{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim2);font-weight:600}
.nov h2{font-size:clamp(19px,2.2vw,24px);line-height:1.25;margin-bottom:16px}
.nov-txt p{margin:0 0 14px;color:var(--dim);font-size:15.5px;line-height:1.7}
.nov-txt strong{color:var(--txt);font-weight:700}
.nov-txt em{color:var(--vsoft);font-style:italic}
.nov-txt code{font-family:ui-monospace,Consolas,monospace;font-size:13.5px;
  background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--vsoft)}
.nov-txt ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:7px}
.nov-txt li{color:var(--dim);font-size:15px;line-height:1.6;padding-left:18px;position:relative}
.nov-txt li::before{content:"·";position:absolute;left:4px;color:var(--violet);font-weight:700}
/* a cor do selo vem do MESMO canal do Discord: aviso é âmbar, correção é verde,
   novidade é violeta. Quem acompanha os dois lados reconhece na hora. */
.chip.cn-aviso{border-color:rgba(240,166,60,.45);color:var(--gold)}
.chip.cn-corr{border-color:rgba(37,214,162,.4);color:var(--green)}
.chip.cn-nova{border-color:var(--line2);color:var(--vsoft)}

/* filtro das novidades — botões de verdade, com estado visível e foco visível */
.filtro{display:flex;flex-wrap:wrap;gap:8px;max-width:760px;margin:0 auto 30px}
.fbtn{font:inherit;font-size:13px;font-weight:600;letter-spacing:.5px;cursor:pointer;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--dim);transition:border-color .16s,color .16s,background .16s}
.fbtn:hover{border-color:var(--line2);color:var(--txt)}
.fbtn.on{border-color:var(--line2);color:var(--txt);background:rgba(140,105,225,.14)}
.nov[hidden]{display:none}
.nov.ultimo{border-bottom:0}
/* o selo pode quebrar ENTRE as partes, nunca DENTRO de uma: a 390px ele partia
   "Temporada / I" no meio e virava duas linhas tortas embaixo do herói. */
.selo{flex-wrap:wrap;justify-content:center}
.selo .sp{white-space:nowrap}

/* ===== DADO VIVO (rankings, temporada) ====================================
   O conteúdo permanente destas páginas está no HTML e é indexável; isto aqui
   veste só a parte que chega do servidor. Estado de carregamento e de erro
   moram no mesmo lugar de propósito: são a mesma coisa para quem lê. */
.carregando{color:var(--dim2);text-align:center;padding:26px 18px;font-size:14px}
.temp-cx{border:1px solid var(--line2);border-radius:var(--raio);background:var(--panel);
  padding:32px var(--gut);text-align:center}
.temp-cx .sub{margin-left:auto;margin-right:auto}
.relogio{display:flex;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.rel{min-width:104px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--raio-s);
  background:var(--panel2)}
.rel b{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.rel small{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim2);font-weight:600;margin-top:8px}
.hall{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.hallc{border:1px solid var(--line);border-radius:var(--raio);background:var(--panel);padding:20px}
.hallc h3{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--dim2);margin-bottom:8px}
.hallc-n{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--txt)}

/* ===== VOTAÇÃO ============================================================
   Três cartões com a marca de cada site. O estado (disponível / aguardando /
   confirmado) é o mesmo que o jogo desenha, e vem do mesmo endpoint. */
.vt-eu{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
  border:1px solid var(--line2);border-radius:var(--raio);background:var(--panel);
  padding:20px var(--gut)}
.vts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.vt{border:1px solid var(--line);border-radius:var(--raio);background:var(--panel);
  overflow:hidden;transition:border-color .18s,transform .18s}
.vt:hover{border-color:var(--line2);transform:translateY(-3px)}
.vt.ok{border-color:rgba(37,214,162,.45)}
.vt.pend{border-color:rgba(240,166,60,.45)}
/* a marca do site: o arquivo pode não existir ainda, e aí o nome ocupa o lugar dele
   em vez de deixar um retângulo quebrado — mesma regra do placeholder do jogo. */
.vt-b{position:relative;aspect-ratio:16/7;background:var(--panel2);display:grid;place-items:center}
.vt-b img{width:100%;height:100%;object-fit:cover}
.vt-b span{display:none;font-size:15px;font-weight:700;letter-spacing:1px;color:var(--vsoft)}
.vt-b.semarte img{display:none}
.vt-b.semarte span{display:block}
/* O CARD INTEIRO E' UMA COLUNA, e o botao e' empurrado pro fim.
   Sem isto os tres botoes ficam em alturas diferentes assim que um card tiver uma
   linha a mais de texto — e isso ACONTECE: "aguardando o site confirmar" ocupa duas
   linhas onde "disponivel agora" ocupa uma. O desalinhamento so apareceria depois de
   alguem logar e votar, que e' a pior hora pra descobrir. */
.vt{display:flex;flex-direction:column}
.vt-c{padding:18px;display:flex;flex-direction:column;flex:1 1 auto}
.vt-c h3{font-size:17px}
.vt-int{margin:6px 0 0;font-size:12.5px;color:var(--dim2)}
.vt-st{margin:10px 0 16px;font-size:13px;color:var(--dim);min-height:18px}
.vt-c [data-ir]{margin-top:auto;align-self:flex-start}
.vt.ok .vt-st{color:var(--green)}
.vt.pend .vt-st{color:var(--gold)}
/* o selo de quem está logado, no cabeçalho */
.euchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(140,105,225,.12);color:var(--txt);
  font-size:12.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap;max-width:190px;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){
  .vt-eu{flex-direction:column;align-items:stretch}
  .euchip{display:none}   /* no celular o cabeçalho já está apertado: fica só o botão */
}

/* ===== RITMO VERTICAL DAS SECOES ==========================================
   Um `.sec-cab` que NAO abre a secao vem depois de outro conteudo, e ai o
   respiro da secao ja foi gasto la em cima: o titulo cola na caixa anterior.
   Apareceu na pagina de Votacao ("ONDE VOTAR" grudado na caixa de login) e
   apareceria em qualquer secao futura com a mesma forma. A regra e' geral de
   proposito — corrigir so aquela pagina deixaria a armadilha armada. */
.env > .sec-cab:not(:first-child){margin-top:54px}
@media (max-width:620px){ .env > .sec-cab:not(:first-child){margin-top:38px} }

/* e a caixa de sessao respira do que vem depois dela */
.vt-eu{margin-bottom:0}

/* ===== CHAMADA ============================================================
   Uma frase, grande, no meio. Aqui o brilho é permitido — é o único lugar da
   página que compete com o CTA principal, e por isso ele fica sozinho: se
   tudo chamasse atenção, nada chamaria. */
.chamada{margin-top:34px;padding:38px var(--gut);text-align:center;
  border:1px solid var(--line2);border-radius:var(--raio);
  background:
    radial-gradient(120% 140% at 50% 0%,rgba(139,92,246,.20),transparent 62%),
    linear-gradient(180deg,var(--panel),var(--panel2))}
.chamada .ch-1,.chamada .ch-2{margin:0;font-weight:800;line-height:1.12;
  letter-spacing:-.5px;font-size:clamp(24px,3.6vw,40px)}
.chamada .ch-1{color:var(--txt)}
/* a linha do saque é a que tem que puxar o olho — mesmo gradiente do herói,
   pra ser a mesma voz e não um enfeite avulso. */
.chamada .ch-2{margin-top:6px;
  background:linear-gradient(90deg,#c9b6ff 0%,#ffffff 45%,#b79bff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(139,92,246,.35)}
.chamada .ch-l{display:inline-block;margin-top:18px;font-size:12.5px;
  letter-spacing:1.6px;text-transform:uppercase;font-weight:600;color:var(--dim2);
  border-bottom:1px solid var(--line)}
.chamada .ch-l:hover{color:var(--vsoft);border-bottom-color:var(--line2)}
@media (max-width:620px){ .chamada{padding:30px var(--gut)} }