/* As páginas do SITE (Home, Sobre, Ranking, Suporte). Separado do style.css de
propósito: o do jogo é uma tela cheia de canvas e painéis; este é um
documento que se lê e se rola. Misturar os dois faria cada mexida numa aba
arriscar o layout do outro.
A paleta é a mesma do jogo — verde de mato, madeira e o dourado do ouro —
para o site e o mundo parecerem o mesmo lugar.
E ela é a MESMA DUAS VEZES: as variáveis são redeclaradas dentro de
`.zona-submundo`, então a seção da campanha atravessa para o roxo sem que uma
única regra abaixo precise saber que existe um segundo mundo. Foi por isso que
as cores viraram variáveis em vez de ficarem escritas nos blocos — ver a
seção do submundo lá embaixo. */
:root {
--fundo: #10160f;
--fundo-alto: #182016;
--carta: #1e2a1c;
--carta-alta: #26331f;
--borda: #33452f;
/* O bronze da moldura dos botões do jogo. É ele que tira o cartão do "caixa
lisa com filete" e o põe na mesma família da janela de edifício. */
--metal: #7b6234;
--texto: #dfe6d8;
--apagado: #93a48c;
--dourado: #c9a227;
--verde: #6ba14a;
--brilho: rgba(255, 255, 255, 0.07);
/* A malha do FUNDO é bem mais fraca que o brilho dos cartões, e a diferença
não é gosto: a parede tem a tela inteira para somar, então o mesmo valor que
dá matéria num cartão de 300px vira listra diagonal atravessando a página.
Este é o número da janela de edifício do jogo. */
--malha: rgba(255, 255, 255, 0.022);
--sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
--releve: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.4);
}
* { box-sizing: border-box; }
/* A MALHA DE PEDRA é a mesma da janela de edifício: dois
`repeating-linear-gradient` cruzados a 1px. Sozinha ela quase não se vê — e é
isso que se quer. O verde chapado lia como cor de fundo de formulário; com a
malha, ele lê como parede.
A vinheta radial em cima fecha as beiradas e faz a coluna de texto do meio
parecer iluminada, que é o truque mais barato para uma página não parecer
plana. `background-attachment: fixed` na luz: rolando, o fundo fica parado e
o conteúdo desliza por cima dele. */
body.site {
margin: 0;
background:
repeating-linear-gradient(115deg, var(--malha) 0 1px, transparent 1px 8px),
repeating-linear-gradient(-115deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 10px),
radial-gradient(1100px 620px at 50% -8%, #24361f 0%, transparent 62%),
radial-gradient(900px 900px at 100% 100%, #16200f 0%, transparent 70%),
var(--fundo);
background-attachment: fixed;
color: var(--texto);
font-family: 'Segoe UI', system-ui, sans-serif;
line-height: 1.6;
min-height: 100vh;
}
/* --- A barra de navegação --------------------------------------------------- */
/* Três colunas, e as duas das pontas com o MESMO peso (1fr): é o que põe as
abas no meio da tela de verdade, e não no meio do espaço que sobrou depois
da marca. Com flex e `flex: 1` nas abas elas começavam colada nela, à
esquerda — e a diferença aparecia mais no /jogar, que não tem o botão da
direita para equilibrar. Com a coluna vazia valendo 1fr igual, a barra do
jogo e a do site centram no mesmo lugar. */
.topo-site {
position: sticky;
top: 0;
z-index: 10;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
padding: 12px 24px;
background: rgba(12, 18, 11, 0.92);
border-bottom: 1px solid var(--borda);
backdrop-filter: blur(6px);
}
.marca {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.5px;
color: var(--texto);
text-decoration: none;
white-space: nowrap;
}
.marca .brasao { font-size: 22px; }
/* O brasão virou arte (iconeCastelo.png). Alinhado pelo meio do texto, e não
pela linha de base: um solto assenta no rodapé da linha e o castelo
ficava pendurado abaixo do "WAR HUTS". */
.marca img.brasao {
width: 26px;
height: 26px;
vertical-align: middle;
margin-top: -3px;
}
.abas { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.abas a {
padding: 7px 14px;
border-radius: 8px;
color: var(--apagado);
text-decoration: none;
font-size: 15px;
}
.abas a:hover { background: rgba(255, 255, 255, 0.06); color: var(--texto); }
.abas a.ativa { background: rgba(107, 161, 74, 0.18); color: #cfe6bd; }
.btn-jogar-topo {
justify-self: end; /* encosta na direita; a coluna dele é larga por simetria */
padding: 8px 18px;
border-radius: 8px;
background: linear-gradient(180deg, #7cb85c, #55893c);
color: #0f1a0c;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 2px 0 #3c6229;
}
.btn-jogar-topo:hover { filter: brightness(1.08); }
/* --- Conteúdo ---------------------------------------------------------------- */
.pagina { max-width: 980px; margin: 0 auto; padding: 36px 24px 80px; }
.heroi { text-align: center; padding: 60px 24px 40px; }
.heroi h1 {
margin: 0 0 8px;
font-size: clamp(38px, 7vw, 68px);
letter-spacing: 1px;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.heroi .subtitulo {
margin: 0 auto 28px;
max-width: 620px;
font-size: clamp(16px, 2.4vw, 21px);
color: #c2d1b8;
}
.btn-grande {
display: inline-block;
padding: 15px 44px;
border-radius: 12px;
background: linear-gradient(180deg, #7cb85c, #4f8237);
color: #0d1509;
font-size: 20px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 4px 0 #37581f, var(--sombra);
}
.btn-grande:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-grande:active { transform: translateY(2px); box-shadow: 0 1px 0 #37581f; }
.aviso-conta {
margin-top: 14px;
color: var(--apagado);
font-size: 14px;
}
/* A fileira de sprites da home: a arte do próprio jogo servindo de vitrine. */
.vitrine {
display: flex;
justify-content: center;
align-items: flex-end;
gap: clamp(6px, 3vw, 34px);
flex-wrap: wrap;
margin: 34px 0 10px;
}
.vitrine img {
width: clamp(56px, 11vw, 104px);
image-rendering: pixelated;
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
}
.cartoes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-top: 34px;
}
/* QUATRO cartões viram 2x2, e não 3+1. A coluna do site tem largura fixa
(980px), então o `auto-fit` sempre escolhe três e o quarto fica órfão numa
fileira sozinha — com os cartões em relevo isso lê como sobra, não como
grade. Com três, o `auto-fit` já acerta sozinho e esta regra não pega.
O `:has(> :nth-child(4))` é o que evita marcar cada bloco à mão: cartão novo
entra e o arranjo se resolve. Ele NÃO pega um quinto cartão de propósito — aí
3+2 é melhor que 2+2+1, e o auto-fit volta a mandar. */
.cartoes:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
/* O cartão em RELEVO, com a moldura de metal — a mesma linguagem da janela de
edifício do jogo. O que ele tinha antes era fundo chapado e um filete de 1px,
e num fundo também chapado isso não separava nada.
A malha de pedra volta aqui em cima do gradiente, e não só no `body`: sem
ela, o cartão fica liso sobre uma parede texturizada, que é o contrário do
que se quer — o que está na frente é que tem de ter matéria. */
.cartao {
position: relative;
background:
repeating-linear-gradient(115deg, var(--brilho) 0 1px, transparent 1px 7px),
linear-gradient(160deg, var(--carta-alta), var(--carta));
border: 1px solid var(--metal);
border-radius: 14px;
padding: 20px 22px;
box-shadow: var(--releve);
}
/* O anel interno é o que faz a borda ler como METAL em vez de traço: uma linha
clara por dentro dela, como o brilho na quina de uma peça fundida. */
.cartao::after {
content: '';
position: absolute;
inset: 1px;
border-radius: 13px;
border: 1px solid rgba(201, 162, 39, 0.14);
pointer-events: none;
}
.cartao h3 { margin: 0 0 8px; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.cartao p { margin: 0; color: #c2d1b8; font-size: 15px; }
.cartao img.icone-cartao { width: 34px; image-rendering: pixelated; vertical-align: middle; }
/* Um cartão pode virar DESTAQUE sem virar outro componente: só a moldura sobe
para o dourado. Usado no que é novidade grande (a Campanha, as conquistas). */
.cartao.novo { border-color: var(--dourado); }
.cartao.novo::after { border-color: rgba(201, 162, 39, 0.3); }
/* O selo "novo" fica pendurado no canto, fora do fluxo do título — dentro dele
empurrava o texto e o cartão da fileira ficava com uma altura diferente dos
irmãos. */
.selo-novo {
position: absolute;
top: -9px;
right: 14px;
padding: 1px 9px;
border-radius: 999px;
background: linear-gradient(180deg, #d9b23c, #9c7a17);
color: #1b1405;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.pagina h2 {
margin: 40px 0 12px;
font-size: 26px;
border-bottom: 1px solid var(--borda);
padding-bottom: 8px;
}
.pagina h3 { margin: 26px 0 6px; font-size: 19px; color: #d7e6cc; }
.pagina p, .pagina li { color: #c6d4bd; }
/* A pagina /redefinir: uma coluna estreita com dois campos. Ela e do SITE e nao
do jogo (chega-se nela por um link de e-mail, sem passar pelo mapa), entao os
estilos moram aqui e nao no style.css. */
.pagina-estreita { max-width: 460px; }
.pagina-estreita input {
width: 100%;
padding: 12px 14px;
margin-bottom: 10px;
border-radius: 10px;
border: 1px solid #3a4f35;
background: #101a0e;
color: #e6efdd;
font-size: 15px;
box-sizing: border-box;
}
.pagina-estreita input:focus {
outline: none;
border-color: #7cb85c;
box-shadow: 0 0 0 3px rgba(124, 184, 92, 0.2);
}
.pagina-estreita button {
width: 100%;
padding: 12px;
border: 0;
border-radius: 10px;
background: linear-gradient(180deg, #7cb85c, #4f8237);
color: #0d1509;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.pagina-estreita button:disabled { opacity: 0.55; cursor: default; }
/* A linha de recado tem altura reservada para duas linhas, senao a pagina pula
quando a frase troca de tamanho — a mesma licao do cartao de entrada. */
.pagina-estreita .recado {
min-height: 3em;
margin: 10px 0 0;
font-size: 14px;
color: #8b9d82;
}
.pagina-estreita .recado.ruim { color: #e58b7b; }
.pagina-estreita .recado.bom { color: #9fd47a; }
/* A identificação legal do vendedor (Decreto 7.962/2013) no fim dos Termos:
obrigatória quando há venda direta no site, e por isso está lá — mas é nota
de rodapé, não manchete. */
.pagina .nota-legal { font-size: 0.82em; opacity: 0.72; }
.pagina ul { padding-left: 22px; }
.pagina li { margin: 6px 0; }
/* A cor de link do texto corrido, e o `:where` NÃO é enfeite: ele zera a
especificidade do `.pagina`, então esta regra pesa o mesmo que um `a` solto
e QUALQUER botão dentro da página continua com a cor dele.
Sem isso, `.pagina a` (0,2,0) ganhava de `.btn-grande` (0,1,0) e pintava o
texto do botão de verde — verde escuro sobre verde claro, ilegível. O
sintoma enganava porque dependia de ONDE o botão estava: o "Jogar agora" do
topo da Home fica no `` e lia normal, enquanto o
"Começar minha vila" lá embaixo e o da página Sobre, dentro do `.pagina`,
sumiam. Daí "em alguns pontos mal dá pra ler". */
:where(.pagina) a { color: var(--verde); }
.destaque {
background:
repeating-linear-gradient(115deg, var(--brilho) 0 1px, transparent 1px 7px),
linear-gradient(160deg, rgba(107, 161, 74, 0.16), rgba(107, 161, 74, 0.06));
border: 1px solid var(--borda);
border-left: 3px solid var(--verde);
padding: 12px 18px;
border-radius: 0 10px 10px 0;
margin: 18px 0;
}
/* Uma fila de figuras com legenda — usada em Sobre para mostrar tropas. */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 14px;
margin: 16px 0 26px;
}
.galeria figure {
margin: 0;
text-align: center;
background:
radial-gradient(circle at 50% 30%, rgba(201, 162, 39, 0.07), transparent 68%),
linear-gradient(160deg, var(--carta-alta), var(--fundo-alto));
border: 1px solid var(--borda);
border-radius: 12px;
padding: 12px 6px 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.galeria img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.galeria figcaption { font-size: 13px; color: var(--apagado); margin-top: 6px; }
/* As tropas são TIRAS de animação, e aqui só interessa a pose parada: o quadro
1. É o mesmo arquivo que o jogo já baixa — nenhuma imagem nova para o site.
`background-size: auto 100%` é o truque, e ele importa: a primeira versão
escalava em 1600% supondo 16 quadros, e as tiras NÃO têm todas 16 — o
Arqueiro tem 4, o Colosso e o Mago 14, o Bombardeiro 15. Com a conta fixa, o
Arqueiro aparecia em branco. Deixando a ALTURA preencher a caixa quadrada, a
largura acompanha na proporção e o primeiro quadro cai exatamente no lugar,
tenha a tira o número de quadros que tiver. */
.figura-tropa {
width: clamp(64px, 12vw, 96px);
aspect-ratio: 1;
background-size: auto 100%;
background-position: left center;
background-repeat: no-repeat;
image-rendering: pixelated;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
.galeria .figura-tropa { margin: 0 auto; }
/* --- O carrossel de telas -----------------------------------------------------
Quem rola é o NAVEGADOR, com `scroll-snap`: assim o dedo, o trackpad e a barra
de rolagem funcionam de graça e com a inércia do sistema, que nenhuma
implementação em JS iguala. O script só desenha as bolinhas e move o trilho
com `scrollTo` — se ele não carregar, o carrossel continua rolável.
É a mesma decisão da lista da telinha do jogo pelo lado oposto: lá o gesto foi
roubado do navegador e virou a armadilha 17; aqui ele fica com quem já sabe
fazê-lo. */
.carrossel {
position: relative;
max-width: 1120px;
margin: 26px auto 0;
padding: 0 24px;
}
.carrossel-trilho {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* a barra some, mas a rolagem fica: a navegação são as setas e as bolinhas */
scrollbar-width: none;
border-radius: 16px;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-quadro {
flex: 0 0 100%;
scroll-snap-align: center;
margin: 0;
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--metal);
box-shadow: var(--sombra);
background: #0b0f0a;
}
/* `aspect-ratio` fixa a caixa ANTES de a imagem chegar: sem ele o carrossel
nasce com 0 de altura e pula para o tamanho certo a cada foto que carrega,
empurrando a página inteira enquanto se lê.
E ele vale para as SEIS, que não têm todas a mesma proporção — o mapa do
submundo é 1000x720 contra 1050x596 da vila. Sem uma altura comum, o
`scroll-snap` passaria de um quadro alto para um baixo e a página pularia a
cada troca; com ela, o `object-fit: cover` corta a sobra de quem é mais alto.
O `height: auto` NÃO É ENFEITE, e custou uma medição: as `` têm os
atributos `width`/`height` (que o navegador usa para reservar espaço antes da
foto chegar), e o atributo `height="596"` vira `height: 596px` usado — o
`aspect-ratio` só entra quando uma das duas dimensões é `auto`. Sem esta
linha, os quadros saíam com 596px de altura em QUALQUER largura: medido,
360x596 num celular de 390px. */
.carrossel-quadro img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}
/* A legenda flutua SOBRE a foto, com véu em gradiente — o mesmo tratamento da
faixa de recursos do jogo. Embaixo, fora da imagem, ela obrigaria os seis
quadros a terem a altura do texto mais comprido. */
.carrossel-quadro figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 42px 20px 16px;
background: linear-gradient(180deg, transparent, rgba(6, 10, 6, 0.72) 45%, rgba(6, 10, 6, 0.93));
font-size: 15px;
color: #d7e3cf;
}
.carrossel-quadro figcaption strong {
display: block;
font-size: 18px;
color: var(--dourado);
letter-spacing: 0.3px;
}
.carrossel-seta {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 42px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #3c6a48, #26472f);
color: #f4f8f4;
border: 1px solid var(--metal);
border-radius: 10px;
font-size: 24px;
line-height: 1;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.carrossel-seta:hover { background: linear-gradient(180deg, #488059, #2c5438); }
.carrossel-seta:disabled { opacity: 0.3; cursor: default; }
/* As setas ficam POR CIMA da moldura, e não na margem: encostadas na borda da
janela elas parecem controles da página, e não do carrossel. */
.carrossel-seta.anterior { left: 34px; }
.carrossel-seta.proxima { right: 34px; }
.carrossel-bolinhas {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 14px;
}
.carrossel-bolinhas button {
width: 9px;
height: 9px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--metal);
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
}
.carrossel-bolinhas button.ativa {
background: var(--dourado);
border-color: var(--dourado);
}
/* Sem JS não há bolinha nenhuma, e aí a fileira vazia não pode ocupar altura. */
.carrossel-bolinhas:empty { display: none; }
/* Uma tela do jogo SOLTA no meio do texto (a página Sobre usa três). É o quadro
do carrossel sem o carrossel: mesma moldura de metal, mesmo raio — mas a
legenda fica EMBAIXO, fora da imagem, e não flutuando sobre ela.
A diferença tem motivo: aqui a legenda é uma frase que explica o que se está
vendo no meio de um texto que se lê, e por cima da foto ela competiria com o
desenho. No carrossel o quadro tem de ter a MESMA altura dos outros cinco, e
por isso lá a legenda não pode ocupar espaço próprio. */
.figura-tela {
margin: 22px 0 26px;
}
.figura-tela img {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
border: 1px solid var(--metal);
box-shadow: var(--sombra);
}
.figura-tela figcaption {
margin-top: 8px;
font-size: 14px;
color: var(--apagado);
font-style: italic;
}
/* --- A zona do SUBMUNDO --------------------------------------------------------
A seção da campanha REDECLARA as variáveis da paleta, e é só isso: nenhuma
regra acima sabe que existe um segundo mundo, e mesmo assim cartão, destaque,
galeria e carrossel atravessam o véu junto. Foi por isso que a paleta virou
variável — a alternativa era um `.submundo` em cada bloco, que é a armadilha
33 esperando a vez (uma classe servindo dois lugares, e o outro não está na
tela quando você olha).
O fundo dela SANGRA até as bordas da janela, porque a troca de mundo precisa
ser da página inteira — uma caixa roxa dentro da coluna de texto lia como um
aviso, não como um lugar. Ela é IRMÃ do ``, e não filha, então já nasce
com a largura do corpo: o `.pagina` de dentro é que centra o texto.
NÃO use `calc(50% - 50vw)` para conseguir isso a partir de dentro, que foi a
primeira versão: `vw` conta a barra de rolagem e `%` não, então a seção fica
uns 8px mais larga que a janela e a PÁGINA INTEIRA ganha rolagem horizontal —
medido, scrollWidth 1010 numa janela de 1002. */
.zona-submundo {
--fundo-alto: #211d2a;
--carta: #221d2e;
--carta-alta: #2f2841;
--borda: #423a55;
--metal: #6a5b86;
--texto: #e8e4ee;
--apagado: #9a91ab;
--dourado: #c08cff;
--verde: #b9a3dd;
--brilho: rgba(255, 255, 255, 0.03);
position: relative;
margin: 56px 0 46px;
padding-bottom: 26px;
color: var(--texto);
/* o recorte é o que segura os dois halos das emendas dentro da faixa */
overflow: hidden;
background:
repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7px),
repeating-linear-gradient(-115deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 9px),
radial-gradient(900px 420px at 50% 0%, #322a48 0%, transparent 66%),
linear-gradient(180deg, #171420, #120f19 60%, #171420);
border-top: 1px solid #4b4266;
border-bottom: 1px solid #4b4266;
}
/* O halo violeta na emenda: é a luz do outro lado vazando para cá, e é ela que
faz a troca ler como passagem em vez de corte. */
.zona-submundo::before,
.zona-submundo::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 90px;
pointer-events: none;
}
.zona-submundo::before {
top: 0;
background: linear-gradient(180deg, rgba(160, 96, 255, 0.16), transparent);
}
.zona-submundo::after {
bottom: 0;
background: linear-gradient(0deg, rgba(160, 96, 255, 0.12), transparent);
}
.zona-submundo h2 {
border-bottom-color: var(--borda);
text-shadow: 0 0 22px rgba(160, 96, 255, 0.5);
}
.zona-submundo h3 { color: #cfbdf0; }
.zona-submundo p, .zona-submundo li { color: #c3bad6; }
.zona-submundo .cartao p { color: #c3bad6; }
.zona-submundo .cartao::after { border-color: rgba(192, 140, 255, 0.16); }
.zona-submundo .cartao.novo { border-color: var(--dourado); }
.zona-submundo .cartao.novo::after { border-color: rgba(192, 140, 255, 0.34); }
.zona-submundo .selo-novo {
background: linear-gradient(180deg, #a877ee, #6a4aa8);
color: #14101d;
}
.zona-submundo .carrossel-quadro figcaption strong { color: #d3aaff; }
.zona-submundo .carrossel-bolinhas button.ativa { background: #c08cff; border-color: #c08cff; }
.zona-submundo .carrossel-seta,
.zona-submundo .btn-grande {
background: linear-gradient(180deg, #4a4266, #322c46);
border-color: #c08cff;
color: #f0e6ff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 0 16px rgba(160, 96, 255, 0.35),
0 2px 8px rgba(0, 0, 0, 0.5);
}
.zona-submundo .carrossel-seta:hover,
.zona-submundo .btn-grande:hover {
background: linear-gradient(180deg, #59507a, #3c3554);
}
/* O `.destaque` de lá: a barra da esquerda é o neon. */
.zona-submundo .destaque {
background:
repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px),
linear-gradient(160deg, rgba(160, 96, 255, 0.14), rgba(160, 96, 255, 0.05));
border-color: var(--borda);
border-left-color: #c08cff;
}
/* A fileira de números que abre a seção da campanha. Grande e sem caixa: são
três fatos, e uma caixa em volta de cada um os transformaria em três cartões
iguais aos de cima — o que se quer aqui é o contrário, que eles não pareçam
mais do mesmo. */
.numerada {
display: flex;
flex-wrap: wrap;
gap: clamp(18px, 5vw, 54px);
justify-content: center;
margin: 26px 0 6px;
text-align: center;
}
.numerada b {
display: block;
font-size: clamp(30px, 5vw, 44px);
line-height: 1.1;
color: #d3aaff;
text-shadow: 0 0 24px rgba(160, 96, 255, 0.45);
}
.numerada span { font-size: 14px; color: var(--apagado); }
/* --- Ranking ------------------------------------------------------------------ */
.quadros {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
margin-top: 22px;
}
.quadro {
background: var(--carta);
border: 1px solid var(--borda);
border-radius: 14px;
overflow: hidden;
}
.quadro header {
padding: 14px 18px 10px;
background: rgba(0, 0, 0, 0.22);
border-bottom: 1px solid var(--borda);
}
.quadro header h3 { margin: 0; font-size: 18px; }
.quadro header small { color: var(--apagado); }
.quadro ol { margin: 0; padding: 8px 0; list-style: none; }
.quadro li {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 18px;
font-size: 15px;
}
.quadro li + li { border-top: 1px solid rgba(255, 255, 255, 0.04); }
/* A LISTA É UMA JANELINHA DE DEZ, e rola (27/08/2026, pedido). O quadro entrega
cem linhas, e cem de uma vez faziam a página inteira ser um placar — o que se
quer ver de relance é o topo, e quem procura mais desce.
A ALTURA É MEDIDA: a linha fecha em **38px** (15 de texto, 7+7 de recheio e o
filete de 1), então dez são 380 e os 25em daqui são 400 — dez linhas e MEIA. A
meia é de propósito: uma linha cortada na borda de baixo é o que diz "tem mais
aqui embaixo" sem precisar de seta nenhuma.
O `em` NÃO acompanha o recheio da linha (ele resolve contra o corpo da PÁGINA,
não contra o do `li`): ao mexer em `.quadro li`, meça a linha de novo. */
.quadro ol {
max-height: 25em;
overflow-y: auto;
/* A goteira reservada: nascendo depois, ela come 15px de uma largura que as
colunas já dividiram, e o valor da direita pula ao passar de dez linhas. */
scrollbar-gutter: stable;
}
.quadro .pos { width: 26px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.quadro .nome { flex: 1; }
.quadro .valor { color: var(--dourado); font-variant-numeric: tabular-nums; }
/* A PATENTE e o TÍTULO ao lado do apelido, só no quadro de Glória. Menores e
apagados: eles são a legenda do nome, e em corpo cheio disputariam a leitura
com ele. O título vem PRIMEIRO — ele é do jogador, e a patente é do placar. */
.quadro .patente,
.quadro .titulo {
font-style: normal;
font-size: 0.82em;
color: var(--dourado);
opacity: 0.8;
}
/* O TÍTULO em caixa NORMAL: ele é um nome ("Imperador Supremo"), e maiúsculas o
fazem ler como rótulo de campo. O que o separa do apelido ao lado é o peso e a
cor, não a caixa. */
.quadro .titulo {
font-size: 0.86em;
font-weight: 700;
opacity: 0.85;
}
/* Os três primeiros de cada quadro ganham cor — o pódio se lê de relance. */
.quadro li:nth-child(1) .pos { color: #ffd34d; font-weight: 700; }
.quadro li:nth-child(2) .pos { color: #d7d7d7; font-weight: 700; }
.quadro li:nth-child(3) .pos { color: #cd9b62; font-weight: 700; }
.vazio { padding: 18px; color: var(--apagado); font-size: 14px; }
/* QUANDO O PLACAR FOI TIRADO. Ele é RÉGUA da linha de cima ("N jogadores no
mundo"), e não uma segunda informação do mesmo peso: menor, e sem o respiro
de cima, para os dois lerem como um bloco só. */
.quando-placar {
padding-top: 0;
margin-top: -12px;
font-size: 12.5px;
}
.rodape-site {
border-top: 1px solid var(--borda);
padding: 26px 24px 40px;
text-align: center;
color: var(--apagado);
font-size: 14px;
}
/* O rodapé fica FORA do `.pagina`, então os links dele não pegavam cor nenhuma
e saíam no azul padrão do navegador — azul de 1996 sobre verde escuro, em
todas as quatro páginas. A cor de link é do site, não de um pedaço dele. */
.rodape-site a { color: var(--verde); }
/* O SELETOR DAS TRÊS LÍNGUAS, no fim do rodapé. Ele é INJETADO pelo servidor
(`seletorDeIdioma`), e não escrito nas sete páginas — assim página nova nasce
com ele e não há sete cópias para divergirem.
A linha própria e o respiro existem para ele não se confundir com a fileira
de links legais logo acima: são coisas diferentes, e uma lista só de sete
itens não diria qual é qual. */
.idiomas-do-site {
margin-top: 14px;
font-size: 13px;
color: var(--apagado);
}
.idiomas-do-site a { color: var(--apagado); text-decoration: none; }
.idiomas-do-site a:hover { color: var(--verde); text-decoration: underline; }
/* O idioma de agora não é um link para lugar nenhum: ele é onde se está. */
.idiomas-do-site a.ativo { color: var(--texto); font-weight: 600; cursor: default; }
@media (max-width: 620px) {
/* Na tela estreita as três colunas não cabem: as quatro abas sozinhas passam
de 290px. A barra vira DUAS linhas — marca e botão dividindo a de cima, as
abas ocupando a de baixo inteira e centradas nela.
O `order` é o que faz caber em duas e não em três: as abas vêm no meio do
HTML, então sem ele o botão da direita seria empurrado para uma terceira
linha. Medido em 375px de largura: 148px de barra empilhada em três contra
103px assim. */
.topo-site {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 6px 12px;
padding: 10px 14px;
}
.abas { order: 3; flex-basis: 100%; }
.marca { font-size: 16px; }
.abas a { padding: 6px 10px; font-size: 14px; }
.pagina { padding: 24px 16px 60px; }
/* As SETAS SOMEM no celular, e isso não é economia de espaço: no toque quem
passa o quadro é o dedo, e dois botões de 42px por cima da foto tapariam
justamente o meio dela — que é onde a mão começa o arrasto. As bolinhas
ficam, porque elas dizem QUANTAS telas existem, que o gesto não diz. */
.carrossel-seta { display: none; }
.carrossel { padding: 0 14px; }
.carrossel-trilho { gap: 10px; }
/* O QUADRO FICA MAIS ALTO no celular (3/2 em vez de 16/9), e é por causa da
legenda: ela tem altura de texto, que não encolhe junto com a largura. Num
quadro de 16/9 numa tela de 390px são 205px de altura para uma legenda de
três linhas — medido, 40% da foto tapada. Em 3/2 são 241px e a legenda cai
para menos de um terço.
O preço é o corte: as telas são 1,78 e entram numa caixa de 1,5, então o
`cover` come 16% da largura. Numa tela de celular isso é melhor negócio que
perder a foto para o texto. */
.carrossel-quadro img { aspect-ratio: 3 / 2; }
.carrossel-quadro figcaption {
padding: 26px 14px 11px;
font-size: 13px;
line-height: 1.35;
}
.carrossel-quadro figcaption strong { font-size: 15px; }
/* A zona do submundo sangra até a borda em qualquer largura; aqui só o
recheio de dentro encolhe junto com o da página. */
.zona-submundo { padding-left: 16px; padding-right: 16px; }
}
/* --- A WIKI ------------------------------------------------------------------
Duas colunas: o índice grudado à esquerda e o texto à direita. O índice é
MONTADO dos próprios títulos da página (wiki.html), então seção nova entra
sozinha — não há uma segunda lista para envelhecer.
A wiki é mais larga que as outras páginas porque ela é para LER e procurar,
não para folhear: com 980 e duas colunas, o texto ficaria numa tira estreita. */
.pagina.wiki {
max-width: 1180px;
}
.wiki-abre {
font-size: 17px;
max-width: 62ch;
}
.wiki-busca {
display: flex;
align-items: center;
gap: 12px;
margin: 22px 0 8px;
}
.wiki-busca input {
flex: 1 1 auto;
max-width: 460px;
padding: 10px 14px;
font: inherit;
font-size: 15px;
color: var(--texto);
background: var(--fundo-alto);
border: 1px solid var(--borda);
border-radius: 10px;
}
.wiki-busca input:focus {
outline: none;
border-color: var(--verde);
box-shadow: 0 0 0 3px rgba(107, 161, 74, 0.15);
}
.wiki-conta {
font-size: 14px;
color: var(--apagado);
}
.wiki-conta.vazio {
color: #d98a6a;
}
.wiki-corpo {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 34px;
align-items: start;
}
/* GRUDADO, e o "top" conta a barra de navegação: ela é fixa no topo, e sem o
respiro o primeiro item do índice nasceria por baixo dela. */
.wiki-indice {
position: sticky;
top: 78px;
max-height: calc(100vh - 100px);
overflow: auto;
padding: 14px 16px;
background: var(--carta);
border: 1px solid var(--borda);
border-radius: 12px;
box-shadow: var(--releve);
}
.wiki-indice-titulo {
margin: 0 0 8px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--apagado);
}
.wiki-indice ul {
list-style: none;
margin: 0;
padding: 0;
}
.wiki-indice li {
margin: 0;
}
.wiki-indice a {
display: block;
padding: 5px 8px;
border-radius: 7px;
font-size: 14px;
color: #c6d4bd;
text-decoration: none;
border-left: 2px solid transparent;
}
.wiki-indice a:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--texto);
}
/* O item da seção que está passando pelo topo. Quem acende é o script, por
IntersectionObserver — a rolagem é do navegador e ninguém escuta "scroll". */
.wiki-indice a.ativa {
background: rgba(107, 161, 74, 0.16);
border-left-color: var(--verde);
color: #cfe6bd;
}
/* O primeiro h2 de cada seção não leva a margem de 40px que os outros levam:
dentro de uma seção, ele JÁ é o começo. */
.wiki-texto section > h2:first-child {
margin-top: 0;
}
.wiki-texto section + section h2 {
margin-top: 44px;
}
.wiki-texto p,
.wiki-texto li {
max-width: 74ch;
}
/* A ÂNCORA PARA DEBAIXO DA BARRA: o link do índice rola até o título, e sem
isto ele para exatamente atrás da navegação fixa. */
.wiki-texto section {
scroll-margin-top: 84px;
}
@media (max-width: 860px) {
.wiki-corpo {
grid-template-columns: 1fr;
gap: 18px;
}
/* No celular o índice deixa de ser coluna e vira um bloco no topo — grudado
ele comeria metade da tela numa altura de 375px. */
.wiki-indice {
position: static;
max-height: none;
}
.wiki-indice ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.wiki-indice a {
border: 1px solid var(--borda);
border-left-width: 1px;
padding: 5px 10px;
}
.wiki-indice a.ativa {
border-color: var(--verde);
}
}
/* --- O DISCORD E A COMUNIDADE (06/09/2026) ------------------------------------
O botão do Discord é o PADRÃO que todo mundo reconhece — o azul da marca
(#5865F2) com o logo branco — e não o bronze do resto do site, de propósito:
ele não é um botão do jogo, é a porta para fora, e quem o vê sabe na hora o
que ele abre. Aparece três vezes: pequeno no topo (ao lado de Jogar, em todas
as páginas), grande na faixa da comunidade da Home, e como link no rodapé.
O logo é um (assets/site/discord.svg) e não um