/* O site do Naruto Super. Uma folha só, sem pré-processador.
*
* **O estilo do portal clássico** (2026-09-25, pedido do dono com o site antigo do jogo como referência: "queria o estilo
* dele no nosso projeto", "moderno e responsivo"): o fundo vermelho e preto com a textura de espirais, o banner grande com a
* marca no meio, a **moldura escura central** que invade o banner, o menu dentro dela com o **trapézio vermelho "Jogar
* agora"** pendurado no meio, as **faixas de título douradas** e o rodapé em colunas com a aba "Topo". As cores saem da marca
* nova: o vermelho e o laranja do NARUTO, o azul do SUPER, o dourado dos títulos.
*
* **Compatível com o launcher (Electron 11 = Chromium 87)**: sem `aspect-ratio`, `inset`, `:is()`/`:where()`, `dvh`,
* aninhamento nem `color-mix`. **E com os navegadores de Flash antigos** (UC Browser e parecidos, Chromium 49 a 69 —
* relato de 2026-09-22): a fonte vai escrita por extenso (a variável dentro de `font` caía na fonte padrão, serifada),
* `clamp()` sempre com valor de reserva antes e nunca em variável, `grid-gap` antes de todo `gap` de grade, nada de
* `:focus-visible` numa lista de seletores, e o `gap` do flexbox ganha margens de reserva no bloco `sem-gap` do fim
* (gerado por `node tools/site-compat.mjs`; `test/site-compat.test.mjs` confere tudo isso, ver `src/css-compat.mjs`).
* Nada de animação infinita nem `backdrop-filter`: os dois pesam no PC fraco e disputam a GPU com o Flash do launcher.
*/
/* As fontes são nossas (ver `fontes/LEIAME.txt`): o `` do Google segurava a primeira tela por ~450 ms a cada
* abertura, em dois domínios de fora. `swap` mantém o texto visível enquanto o arquivo chega. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fontes/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/fontes/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/fontes/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url(/site/fontes/barlow-400-italico.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/fontes/chakra-petch-500.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/fontes/chakra-petch-600.woff2) format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/fontes/chakra-petch-700.woff2) format("woff2"); }
:root {
--breu: #0a0809;
--painel: #131113;
--painel-2: #1a171a;
--painel-3: #221e22;
--linha: #2c2629;
--linha-forte: #3d3438;
--texto: #f3ede4;
--texto-2: #cfc6bd;
--nevoa: #a3988f;
--sangue: #d7191f;
--sangue-claro: #ff4a3d;
--sangue-escuro: #7e0a0e;
--brasa: #ff7a1a;
--ouro: #f4b544;
--ouro-claro: #ffd688;
--chakra: #3ea2ff;
--chakra-claro: #8fd0ff;
--verde: #4ade80;
--topo: 60px;
--gutter: 16px;
--dentro: 16px;
color-scheme: dark;
}
/* A margem lateral e o respiro dentro da moldura crescem em faixas: `clamp()` numa variável deixava a margem inválida
* (zero) nos navegadores de Flash antigos. */
@media (min-width: 480px) { :root { --gutter: 20px; --dentro: 20px; } }
@media (min-width: 900px) { :root { --gutter: 28px; --dentro: 28px; } }
@media (min-width: 1300px) { :root { --dentro: 34px; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* O fundo do portal: preto avermelhado, um brilho vermelho no alto e a textura de espirais Uzumaki por cima de tudo.
* A textura é um SVG de 160 px embutido (sem pedido a mais), a 6% de opacidade. */
body {
margin: 0;
background-color: #0e0708;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23ff4436' stroke-opacity='.06' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M42 40L42.4 40.9L42.4 42L41.9 43.1L40.8 44.1L39.3 44.7L37.4 44.6L35.6 43.9L34 42.4L33.1 40.2L32.9 37.7L33.6 35.1L35.4 32.7L38 31.1L41.2 30.4L44.7 30.9L47.9 32.6L50.4 35.5L51.9 39.3L52 43.5L50.5 47.6L47.6 51.2L43.5 53.7L38.6 54.6L33.5 53.8L28.9 51.1L25.3 46.9L23.2 41.6L23.1 35.7L25.2 29.9L29.1 25L34.7 21.7L41.2 20.4L48 21.5L54.2 24.9L58.9 30.4L61.6 37.3L61.8 44.9L59.3 52.3L54.4 58.5L47.4 62.8'/%3E%3Ccircle cx='40' cy='40' r='29'/%3E%3Cpath d='M122 120L122.4 120.9L122.4 122L121.9 123.1L120.8 124.1L119.3 124.7L117.4 124.6L115.6 123.9L114 122.4L113.1 120.2L112.9 117.7L113.6 115.1L115.4 112.7L118 111.1L121.2 110.4L124.7 110.9L127.9 112.6L130.4 115.5L131.9 119.3L132 123.5L130.5 127.6L127.6 131.2L123.5 133.7L118.6 134.6L113.5 133.8L108.9 131.1L105.3 126.9L103.2 121.6L103.1 115.7L105.2 109.9L109.1 105L114.7 101.7L121.2 100.4L128 101.5L134.2 104.9L138.9 110.4L141.6 117.3L141.8 124.9L139.3 132.3L134.4 138.5L127.4 142.8'/%3E%3Ccircle cx='120' cy='120' r='29'/%3E%3C/g%3E%3C/svg%3E"),
radial-gradient(1500px 820px at 50% 0, rgba(120, 12, 18, .55), rgba(60, 8, 12, .25) 45%, rgba(14, 7, 8, 0) 75%),
linear-gradient(180deg, #1c0709 0%, #0e0708 700px);
background-repeat: repeat, no-repeat, no-repeat;
color: var(--texto);
font: 400 16px/1.6 "Barlow", "Segoe UI", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* A barra de rolagem escura: no launcher (Chromium 87) a padrão sai clara, uma faixa branca do lado do site. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--breu); }
::-webkit-scrollbar-thumb { background: #4a2a2e; border: 3px solid var(--breu); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #6b2f35; }
img { max-width: 100%; display: block; }
a { color: var(--ouro); text-decoration: none; }
a:hover { color: var(--ouro-claro); }
h1, h2, h3 { font-family: "Chakra Petch", "Segoe UI", Arial, sans-serif; font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
::selection { background: rgba(215, 25, 31, .45); color: #fff; }
.largura { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--sangue); color: #fff; font-weight: 600; }
.pular:focus { top: 12px; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 20px; height: 20px; flex: none; }
/* --- botões ----------------------------------------------------------------------------------------------------------- */
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 46px; padding: 0 24px; border: 0; cursor: pointer;
font: 700 14px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
-webkit-clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
transition: transform .18s ease, filter .18s ease, background-color .18s ease, color .18s ease;
}
.btn:focus-visible { outline: none; filter: brightness(1.25); }
.btn:active { transform: translateY(1px); }
.btn-foco { background: linear-gradient(180deg, #ff6040 0%, var(--sangue) 48%, #9c0d12 100%); color: #fff7ec; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.btn-foco:hover { color: #fff; filter: brightness(1.12); }
.btn-contorno { background: rgba(244, 181, 68, .08); color: var(--ouro-claro); box-shadow: inset 0 0 0 1px rgba(244, 181, 68, .45); }
.btn-contorno:hover { color: #fff3dc; background: rgba(244, 181, 68, .16); }
.btn-g { height: 54px; padding: 0 30px; font-size: 15px; }
.btn-p { height: 36px; padding: 0 18px; font-size: 12.5px; }
.btn-bloco { width: 100%; }
.link-seta { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.link-seta .ico { width: 16px; height: 16px; transition: transform .18s ease; }
a:hover .link-seta .ico, .link-seta:hover .ico { transform: translateX(3px); }
/* --- barra do topo ---------------------------------------------------------------------------------------------------- */
/* Fina e escura, como a barra do portal antigo. Começa transparente sobre o banner e fica sólida ao rolar; quando o menu
* da moldura sai da tela, o menu compacto aparece nela (`nav-fixa`, posto pelo `site.js`). */
.topo {
position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--topo);
background: linear-gradient(180deg, rgba(8, 5, 6, .9), rgba(8, 5, 6, 0));
transition: background-color .25s ease, box-shadow .25s ease;
}
.topo.rolado { background: rgba(12, 9, 11, .97); box-shadow: 0 1px 0 rgba(215, 25, 31, .35), 0 10px 30px rgba(0, 0, 0, .45); }
.topo-in { height: 100%; display: flex; align-items: center; gap: 24px; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.marca { display: flex; align-items: center; flex: none; transition: opacity .25s ease, transform .25s ease; }
.marca img { width: 96px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
/* Na inicial a marca grande está no banner: a pequena só entra quando ele sai de vista. */
body[data-pagina="inicio"] .topo:not(.rolado) .marca { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.menu { display: flex; align-items: center; gap: 2px; margin-right: auto; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.topo.nav-fixa .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.menu a {
position: relative; padding: 10px 11px; color: var(--texto-2);
font: 600 13px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.menu a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--sangue-claro); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.menu a:hover { color: var(--texto); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--texto); }
/* Entrar, Criar conta e o Centro do usuário: na barra eles já estão à direita; só a gaveta do celular os repete. */
.menu .menu-extra { display: none; }
.topo-acoes { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--nevoa); font: 500 13px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .04em; white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: pulso 2.4s ease-out 2; }
.status b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } }
/* O jogo fora do ar com o site no ar (o site separado, 2026-09-25): o selo da barra fica vermelho. */
.status-fora { color: var(--sangue-claro); }
.status-fora i { background: var(--sangue-claro); animation: none; }
.topo-links { display: flex; align-items: center; gap: 2px; }
.topo-link { padding: 8px 10px; color: var(--texto-2); font: 600 12.5px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.topo-link:hover { color: var(--ouro-claro); }
.topo-links .topo-link + .topo-link { border-left: 1px solid rgba(255, 255, 255, .16); }
.topo-conta { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; color: var(--texto); font: 600 13px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .03em; }
.topo-conta:hover { color: var(--ouro-claro); }
.topo-conta .ico { width: 16px; height: 16px; color: var(--ouro); }
.topo-conta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-botao { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--linha-forte); background: rgba(10, 8, 9, .6); cursor: pointer; }
.menu-botao .ico { width: 22px; height: 22px; }
/* --- a espiral (o selo Uzumaki desenhado atrás da marca e nos cabeçalhos) ---------------------------------------------- */
.espiral { fill: none; stroke-linecap: round; }
.espiral-anel { stroke: var(--sangue); stroke-width: 2.4; }
.espiral-traco { stroke: var(--sangue); stroke-width: 3.2; }
.espiral-brilho { stroke: #ff8a5c; stroke-width: .9; opacity: .7; }
/* --- o banner da inicial ---------------------------------------------------------------------------------------------- */
/* A arte da tela de carregamento (Sasuke no azul, Naruto no fogo) no meio, misturada em `screen` sobre o brilho vermelho:
* o preto dela some, e a marca entra no centro escuro entre os dois. Ela fica sempre inteira na altura do banner, então
* em tela larga os lados são o próprio fundo do site. */
.heroi { position: relative; height: 620px; overflow: hidden; }
.heroi-brilho {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background:
radial-gradient(46% 62% at 50% 56%, rgba(215, 25, 31, .42), rgba(140, 12, 18, .18) 55%, rgba(0, 0, 0, 0) 80%),
radial-gradient(30% 40% at 18% 60%, rgba(40, 110, 255, .14), rgba(0, 0, 0, 0) 70%),
radial-gradient(30% 40% at 82% 55%, rgba(255, 110, 30, .16), rgba(0, 0, 0, 0) 70%);
}
.heroi-arte { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.heroi-arte img {
position: absolute; top: 0; left: 50%; width: auto; height: 100%; max-width: none; transform: translateX(-50%); mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 5%, #000 95%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 5%, #000 95%, rgba(0, 0, 0, 0) 100%);
animation: esmaecer .5s ease both;
}
/* O pé do banner se desfaz no fundo do site, por baixo da moldura. */
.heroi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(0deg, #0e0708, rgba(14, 7, 8, 0)); pointer-events: none; }
.heroi-espiral { position: absolute; left: 50%; top: 47%; width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: .32; animation: girar-entrada 1s cubic-bezier(.2, .7, .2, 1) both; }
.heroi-in {
position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
padding-top: var(--topo); padding-bottom: 104px; text-align: center;
}
.heroi-marca { margin: 0; line-height: 0; }
.heroi-marca img { width: 470px; height: auto; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .7)); animation: surgir .6s cubic-bezier(.2, .8, .25, 1.1) .05s both; }
.heroi-lema {
display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px;
color: var(--ouro-claro); font: 600 13px/1.3 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .26em; text-transform: uppercase;
text-shadow: 0 1px 8px rgba(0, 0, 0, .9); animation: subir .45s ease .2s both;
}
.heroi-lema::before, .heroi-lema::after { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, rgba(244, 181, 68, 0), var(--ouro)); flex: none; }
.heroi-lema::after { background: linear-gradient(90deg, var(--ouro), rgba(244, 181, 68, 0)); }
@keyframes esmaecer { from { opacity: .2; } to { opacity: 1; } }
@keyframes surgir { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes girar-entrada { from { opacity: 0; transform: rotate(-70deg) scale(.85); } to { opacity: .32; transform: none; } }
/* Os atalhos redondos do banner — o "Recarregar" do portal antigo, agora quatro. */
.atalhos { display: flex; justify-content: center; gap: 26px; margin-top: 26px; animation: subir .45s ease .3s both; }
.atalho { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 92px; color: var(--texto); text-align: center; }
.atalho:hover { color: #fff; }
.atalho-icone {
width: 62px; height: 62px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;
color: #fff3e2; background: radial-gradient(circle at 50% 35%, #e3342b, #8c0c11 70%, #4b0508);
box-shadow: 0 0 0 3px rgba(12, 8, 9, .9), 0 0 0 5px rgba(244, 181, 68, .55), 0 8px 18px rgba(0, 0, 0, .6);
transition: transform .2s ease, box-shadow .2s ease;
}
.atalho:hover .atalho-icone { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(12, 8, 9, .9), 0 0 0 5px var(--ouro), 0 12px 26px rgba(215, 25, 31, .45); }
.atalho-icone .ico { width: 26px; height: 26px; }
.atalho b { display: block; font: 700 12px/1.2 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.atalho small { display: none; }
/* --- o cabeçalho das páginas internas --------------------------------------------------------------------------------- */
.cabeca { position: relative; overflow: hidden; height: 340px; display: flex; align-items: flex-end; }
.cabeca-arte { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cabeca-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 32%; }
.cabeca-veu {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background:
linear-gradient(90deg, rgba(18, 4, 6, .96) 0%, rgba(70, 6, 10, .78) 38%, rgba(90, 8, 12, .32) 70%, rgba(20, 4, 6, .5) 100%),
linear-gradient(0deg, #0e0708 0%, rgba(14, 7, 8, 0) 55%);
}
.cabeca-espiral { position: absolute; right: -80px; top: 40px; width: 420px; height: 420px; opacity: .22; }
.cabeca-in { position: relative; z-index: 1; padding-top: calc(var(--topo) + 30px); padding-bottom: 96px; }
.cabeca h1 { font-size: 52px; font-size: clamp(32px, 4.2vw, 52px); max-width: 24ch; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 3px 18px rgba(0, 0, 0, .7); }
.cabeca p { margin-top: 10px; max-width: 58ch; color: rgba(243, 237, 228, .85); font-size: 17px; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.trilha { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; color: var(--ouro); font: 600 12.5px/1.4 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.trilha a { color: var(--texto-2); }
.trilha a:hover { color: var(--texto); }
.trilha > * + *::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .3); }
/* --- a moldura central ------------------------------------------------------------------------------------------------ */
/* A caixa escura do portal antigo: entra por cima do pé do banner, com o menu no alto e o trapézio "Jogar agora" no meio. */
.moldura {
position: relative; z-index: 3; width: calc(100% - 2 * var(--gutter)); max-width: 1200px; margin: -72px auto 0;
background: linear-gradient(180deg, rgba(34, 28, 31, .55), rgba(19, 17, 19, 0) 260px), var(--painel);
border: 1px solid var(--linha-forte);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 40px 90px -20px rgba(0, 0, 0, .8);
}
.moldura::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: linear-gradient(90deg, rgba(215, 25, 31, 0), var(--sangue) 30%, var(--ouro) 50%, var(--sangue) 70%, rgba(215, 25, 31, 0)); }
.moldura-nav {
position: relative; display: flex; align-items: center; height: 62px; padding: 0 10px;
background: linear-gradient(180deg, #252024, #171417); border-bottom: 1px solid var(--linha-forte);
}
.moldura-nav-lado { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; }
.moldura-nav-direita { justify-content: flex-end; }
.moldura-nav-lado a {
position: relative; padding: 12px 14px; color: #c7beb5; white-space: nowrap;
font: 600 14px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
transition: color .18s ease;
}
.moldura-nav-lado a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--sangue-claro); transform: scaleX(0); transition: transform .22s ease; }
.moldura-nav-lado a:hover { color: #fff; }
.moldura-nav-lado a:hover::after, .moldura-nav-lado a[aria-current="page"]::after { transform: scaleX(1); }
.moldura-nav-lado a[aria-current="page"] { color: var(--ouro-claro); }
/* O trapézio: a borda dourada é o próprio fundo do link, e o vermelho é o `::before` recortado 3 px para dentro. */
.jogar-agora {
position: relative; z-index: 2; flex: none; align-self: flex-start; width: 290px; height: 94px; margin: -1px 16px -34px;
display: flex; align-items: center; justify-content: center; text-align: center; color: #fff6e6;
font: 700 27px/.95 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase;
background: linear-gradient(180deg, #ffd27a, #c9651f 70%, #7a2a0e);
-webkit-clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
transition: transform .18s ease;
}
.jogar-agora::before {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(70% 90% at 50% 0, rgba(255, 140, 100, .55), rgba(255, 140, 100, 0) 70%), linear-gradient(180deg, #f2382a 0%, #c3141b 50%, #7a080d 100%);
-webkit-clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(84% - 2px) calc(100% - 4px), calc(16% + 2px) calc(100% - 4px));
clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(84% - 2px) calc(100% - 4px), calc(16% + 2px) calc(100% - 4px));
transition: filter .18s ease;
}
.jogar-agora span { position: relative; max-width: 5.4em; margin-top: -8px; text-shadow: 0 2px 0 rgba(90, 0, 4, .75), 0 0 18px rgba(255, 190, 120, .35); }
.jogar-agora:hover { color: #fff; }
.jogar-agora:hover::before { filter: brightness(1.15) saturate(1.1); }
.jogar-agora:active { transform: translateY(2px); }
.jogar-agora:focus-visible { outline: none; }
.jogar-agora:focus-visible::before { filter: brightness(1.3); }
.moldura-corpo { padding: 56px var(--dentro) var(--dentro); }
/* --- blocos, faixas e cartões dentro da moldura ----------------------------------------------------------------------- */
.bloco + .bloco { margin-top: 48px; }
/* A faixa de título do portal: a barra escura com o brilho à esquerda e o nome em dourado. */
.faixa {
display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 8px 18px; margin-bottom: 22px;
background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, 0) 80%), var(--painel-2);
border: 1px solid var(--linha); border-left: 3px solid var(--sangue);
}
.faixa h2 { display: flex; align-items: center; gap: 12px; color: var(--ouro); font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.faixa h2::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--sangue-claro); transform: rotate(45deg); box-shadow: 0 0 10px rgba(255, 74, 61, .7); }
.faixa .link-seta { color: var(--nevoa); }
.faixa .link-seta:hover { color: var(--ouro-claro); }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-gap: 28px; gap: 28px; align-items: start; }
.cartao { background: var(--painel-2); border: 1px solid var(--linha); }
.vazio { color: var(--nevoa); padding: 18px 0; }
/* O aviso do alto da moldura com o jogo fora do ar, e o da página de manutenção do "Jogar". */
.aviso-manutencao {
display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; padding: 14px 18px;
color: var(--texto-2); background: linear-gradient(90deg, rgba(215, 25, 31, .2), rgba(215, 25, 31, .05));
border: 1px solid rgba(255, 74, 61, .45); border-left: 3px solid var(--sangue-claro);
}
.aviso-manutencao .ico { color: var(--sangue-claro); margin-top: 2px; }
.aviso-manutencao b { color: var(--texto); }
.manutencao .guia-acoes form { margin: 0; }
.sobretitulo {
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
color: var(--ouro); font: 600 12.5px/1.2 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase;
}
.sobretitulo::before { content: ""; width: 7px; height: 7px; background: var(--sangue-claro); transform: rotate(45deg); flex: none; }
.destaque { background: linear-gradient(95deg, #ffe066, var(--brasa) 45%, var(--sangue-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip {
display: inline-block; padding: 4px 8px; font: 600 11px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
color: var(--chakra-claro); background: rgba(62, 162, 255, .1); border: 1px solid rgba(62, 162, 255, .3); white-space: nowrap;
}
.chip-evento { color: #ffb38a; background: rgba(255, 122, 26, .1); border-color: rgba(255, 122, 26, .38); }
.chip-aviso { color: var(--ouro-claro); background: rgba(244, 181, 68, .1); border-color: rgba(244, 181, 68, .38); }
.etiqueta { display: inline-block; padding: 5px 9px; font: 600 11px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); border: 1px solid rgba(244, 181, 68, .38); }
.etiqueta-suave { color: var(--texto-2); border-color: var(--linha-forte); background: rgba(255, 255, 255, .02); letter-spacing: .04em; text-transform: none; font-size: 12.5px; font-weight: 500; }
/* --- boas-vindas (a primeira coluna da inicial) ----------------------------------------------------------------------- */
.duas-colunas.bloco-abertura { align-items: stretch; }
.boas-vindas {
position: relative; overflow: hidden; padding: 30px 30px 28px; display: flex; flex-direction: column; align-items: flex-start;
background: radial-gradient(120% 90% at 100% 0, rgba(215, 25, 31, .22), rgba(215, 25, 31, 0) 60%), linear-gradient(160deg, #221c20, #161316);
border: 1px solid var(--linha-forte);
}
.boas-vindas > * { position: relative; }
.boas-vindas > .boas-vindas-espiral { position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; opacity: .2; pointer-events: none; }
.boas-vindas h2 { font-size: 38px; font-size: clamp(28px, 3vw, 38px); max-width: 15ch; line-height: 1.05; text-transform: uppercase; }
.boas-vindas-texto { margin-top: 14px; max-width: 48ch; color: var(--texto-2); font-size: 16.5px; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.heroi-fatos { display: flex; flex-wrap: wrap; gap: 12px 28px; align-self: stretch; margin: auto 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--linha); }
.heroi-fatos li { display: flex; flex-direction: column; gap: 2px; }
.heroi-fatos b { color: var(--ouro-claro); font: 700 26px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.heroi-fatos span { color: var(--nevoa); font-size: 13.5px; }
.boas-vindas .heroi-acoes { margin-bottom: 26px; }
.boas-vindas .painel-usuario { margin: 18px 0 26px; align-self: stretch; }
/* No cartão de boas-vindas a coluna é estreita: o painel largo fica em pé, com os servidores embaixo. */
.boas-vindas .painel-deitado { flex-direction: column; gap: 14px; }
.boas-vindas .painel-deitado .painel-conta { width: auto; }
.boas-vindas .painel-deitado .painel-meus { padding-left: 0; border-left: 0; }
/* --- novidades (as notícias com miniatura, como a coluna de eventos do portal) ---------------------------------------- */
/* Downloads na abertura; as novidades passam a ocupar a linha seguinte. */
.downloads-home { padding: 26px; background: linear-gradient(150deg, #221b1e, #121013); border: 1px solid var(--linha-forte); display: flex; flex-direction: column; }
.downloads-home .faixa { margin-bottom: 16px; }
.downloads-home-intro { color: var(--texto-2); margin-bottom: 22px; }
.downloads-home-lista { display: grid; grid-template-columns: minmax(0, 1fr); grid-gap: 16px; gap: 16px; }
.download-home { padding: 20px; background: rgba(255, 255, 255, .025); border: 1px solid var(--linha); }
.download-home-topo { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-gap: 14px; gap: 14px; align-items: center; }
.download-home-icone { display: block; width: 46px; height: 46px; padding: 9px; color: #a6d760; background: rgba(166, 215, 96, .09); border: 1px solid rgba(166, 215, 96, .25); }
.download-home-icone svg { width: 100%; height: 100%; }
.download-home-windows .download-home-icone { color: var(--chakra-claro); background: rgba(62, 162, 255, .09); border-color: rgba(62, 162, 255, .25); }
.download-home h3 { color: var(--ouro-claro); font-size: 22px; line-height: 1.2; }
.download-home-topo p { color: var(--nevoa); font-size: 13px; margin-top: 4px; }
.download-home-versao { color: var(--texto-2); font-size: 14px; margin: 16px 0 14px; }
.download-home-versao span { padding: 0 6px; color: var(--nevoa); }
.downloads-home-ajuda { color: var(--nevoa); font-size: 14px; margin-top: auto; padding-top: 22px; }
.downloads-home-ajuda a { display: inline-block; color: var(--ouro); margin-left: 5px; }
.downloads-home-ajuda .ico { width: 15px; height: 15px; margin-left: 5px; vertical-align: middle; }
.novidades-home .novidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 20px; gap: 20px; margin-top: 20px; }
.novidades-home .novidade { display: block; height: 100%; padding: 0; border: 1px solid var(--linha); background: var(--painel-2); }
.novidades-home .miniatura { display: block; width: 100%; height: 136px; border: 0; }
.novidades-home .novidade .novidade-texto { margin: 0; padding: 18px; }
/* Atalhos da comunidade ficam fora do conteúdo e abaixo das janelas de entrada/Donate. */
.comunidade-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 30; }
.comunidade-link { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--rede); color: #fff; box-shadow: 0 5px 20px rgba(0, 0, 0, .45); transition: transform .18s ease; }
.comunidade-link + .comunidade-link { margin-top: 12px; }
.comunidade-link svg { width: 28px; height: 28px; }
.comunidade-link span { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 6px 12px; color: #fff; background: #21191d; border: 1px solid var(--linha-forte); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.comunidade-link:hover, .comunidade-link:focus { color: #fff; transform: translateY(-2px); }
.comunidade-link:focus { outline: 2px solid var(--ouro-claro); outline-offset: 4px; }
.comunidade-link:hover span, .comunidade-link:focus span { opacity: 1; }
@media (max-width: 960px) {
.novidades-home .novidades { grid-template-columns: minmax(0, 1fr); }
.novidades-home .miniatura { height: 180px; }
}
@media (max-width: 700px) {
.downloads-home { padding: 20px; }
.download-home { padding: 16px; }
.comunidade-flutuante { right: 12px; bottom: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
.comunidade-link { width: 46px; height: 46px; }
.comunidade-link + .comunidade-link { margin-top: 10px; }
.comunidade-link svg { width: 24px; height: 24px; }
}
.abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: 8px; }
.abas button, .abas a {
position: relative; padding: 11px 12px; background: none; border: 0; cursor: pointer; color: var(--nevoa);
font: 600 12.5px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.abas button::after, .abas a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sangue-claro); transform: scaleX(0); transition: transform .2s ease; }
.abas button:hover, .abas a:hover { color: var(--texto); }
.abas button[aria-selected="true"], .abas a[aria-current="true"] { color: var(--ouro-claro); }
.abas button[aria-selected="true"]::after, .abas a[aria-current="true"]::after { transform: scaleX(1); }
.aba-painel { animation: aparecer .3s ease both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.novidades { list-style: none; margin: 0; padding: 0; }
.novidade { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); color: var(--texto); }
.novidades li:last-child .novidade { border-bottom: 0; }
.novidade:hover { color: var(--texto); }
.novidade:hover .novidade-titulo { color: var(--ouro-claro); }
.miniatura { position: relative; width: 132px; height: 76px; flex: none; overflow: hidden; background: #0c0a0b; border: 1px solid var(--linha-forte); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.9); transform-origin: 66% 26%; transition: transform .35s ease; }
/* O ponto da arte que a miniatura mostra: um por categoria e, dentro dela, um por posição na lista, para quatro notícias
* seguidas não terem a mesma imagem. */
.miniatura-2 img { transform-origin: 92% 34%; }
.miniatura-3 img { transform-origin: 52% 14%; }
.miniatura-4 img { transform-origin: 24% 62%; }
.miniatura-evento img { transform-origin: 88% 44%; }
.miniatura-aviso img { transform-origin: 12% 48%; }
.novidade:hover .miniatura img { transform: scale(2.05); }
.miniatura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--chakra); }
.miniatura-evento::after { background: var(--brasa); }
.miniatura-aviso::after { background: var(--ouro); }
.novidade-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.novidade-titulo { color: var(--ouro); font: 600 17px/1.2 "Chakra Petch", "Segoe UI", Arial, sans-serif; transition: color .18s ease; }
.novidade-resumo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--texto-2); font-size: 14.5px; line-height: 1.45; }
.noticia-meta { display: flex; align-items: center; gap: 10px; color: var(--nevoa); font-size: 13px; }
.noticia-meta time { font-variant-numeric: tabular-nums; }
.novidades-mais { display: flex; justify-content: flex-end; margin-top: 10px; }
/* --- introdução (o quadro com a legenda por cima, do portal antigo) --------------------------------------------------- */
.intro { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--linha-forte); background: #07080c; }
.intro img { width: 100%; height: auto; transition: transform .6s ease; }
.intro:hover img { transform: scale(1.03); }
.intro figcaption {
position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 22px 18px;
background: linear-gradient(0deg, rgba(8, 5, 6, .95) 0%, rgba(8, 5, 6, .82) 55%, rgba(8, 5, 6, 0));
color: var(--texto); font-size: 15.5px; line-height: 1.5;
}
.intro figcaption b { color: var(--ouro-claro); }
.intro figcaption .link-seta { margin-top: 10px; }
/* --- rankings --------------------------------------------------------------------------------------------------------- */
.ranking-mini { padding: 6px 20px 18px; }
.ranking-mini .link-seta { margin-top: 14px; }
.ranking-mini-cab { display: flex; align-items: center; gap: 10px; color: var(--ouro); }
.ranking-mini-cab h2, .ranking-mini-cab h3 { color: var(--texto); font-size: 19px; text-transform: uppercase; letter-spacing: .06em; }
.ranking-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.ranking-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.ranking-lista li:last-child { border-bottom: 0; }
.posicao { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; font: 700 13px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; color: var(--nevoa); border: 1px solid var(--linha-forte); transform: rotate(45deg) scale(.82); font-variant-numeric: tabular-nums; }
.posicao > * { transform: rotate(-45deg); }
.posicao-1 { color: #2a1702; background: linear-gradient(180deg, #ffe39a, var(--ouro)); border-color: transparent; }
.posicao-2 { color: #11151c; background: linear-gradient(180deg, #eef1f5, #aab4c3); border-color: transparent; }
.posicao-3 { color: #2a1206; background: linear-gradient(180deg, #f0b07e, #b8703f); border-color: transparent; }
.ranking-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-valor { color: var(--texto-2); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rankings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 20px; gap: 20px; align-items: start; }
.ranking-coluna { padding: 22px 22px 16px; scroll-margin-top: calc(var(--topo) + 20px); border-top: 3px solid var(--sangue); }
.ranking-texto { margin-top: 8px; color: var(--nevoa); font-size: 14.5px; }
/* --- sistemas --------------------------------------------------------------------------------------------------------- */
.sistemas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 16px; gap: 16px; }
.sistema {
position: relative; padding: 24px 24px 26px; background: linear-gradient(180deg, var(--painel-3), var(--painel-2)); border: 1px solid var(--linha);
transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.sistema::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--sangue), rgba(215, 25, 31, 0)); }
.sistema:hover { border-color: rgba(215, 25, 31, .6); transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(215, 25, 31, .6); }
.sistema-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sistema-icone { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--ouro-claro); border: 1px solid rgba(244, 181, 68, .4); background: radial-gradient(circle, rgba(215, 25, 31, .35), rgba(215, 25, 31, 0) 72%); transform: rotate(45deg) scale(.86); }
.sistema-icone .ico { width: 24px; height: 24px; transform: rotate(-45deg); }
.sistema h3 { font-size: 21px; text-transform: uppercase; letter-spacing: .03em; }
.sistema p { margin-top: 10px; color: var(--texto-2); font-size: 15px; }
.mais-sistemas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; color: var(--nevoa); }
.mais-sistemas > span:first-child { margin-right: 6px; font: 600 12.5px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
/* --- caminhos --------------------------------------------------------------------------------------------------------- */
.caminhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 16px; gap: 16px; }
.caminho { --tom: var(--brasa); position: relative; padding: 32px 26px 28px; text-align: center; background: var(--painel-2); border: 1px solid var(--linha); overflow: hidden; transition: border-color .22s ease, transform .22s ease; }
.caminho::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tom); }
.caminho::before { content: ""; position: absolute; left: 50%; top: -120px; width: 320px; height: 240px; margin-left: -160px; background: radial-gradient(closest-side, var(--tom), rgba(0, 0, 0, 0)); opacity: .12; }
.caminho-ninjutsu { --tom: var(--chakra); }
.caminho-genjutsu { --tom: #b48cff; }
.caminho:hover { border-color: var(--tom); transform: translateY(-3px); }
.caminho-selo { width: 100px; height: 100px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--tom); background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 65%); box-shadow: inset 0 0 0 1px var(--linha-forte), 0 0 0 8px rgba(255, 255, 255, .02); position: relative; }
.caminho-selo::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 50%; border: 1px dashed var(--tom); opacity: .5; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.caminho:hover .caminho-selo::before { transform: rotate(120deg); }
.caminho-selo .ico { width: 44px; height: 44px; stroke-width: 1.5; }
.caminho h3 { font-size: 25px; text-transform: uppercase; letter-spacing: .04em; }
.caminho-lema { margin-top: 6px; color: var(--tom); font: 500 15px/1.3 "Chakra Petch", "Segoe UI", Arial, sans-serif; }
.caminho p:last-child { margin-top: 14px; color: var(--texto-2); font-size: 15px; }
/* --- passos ----------------------------------------------------------------------------------------------------------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 16px; gap: 16px; }
.passo { position: relative; padding: 20px 22px 24px; background: var(--painel-2); border: 1px solid var(--linha); }
.passo-numero { display: block; font: 700 60px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; color: transparent; -webkit-text-stroke: 1px var(--ouro); margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
.passo h3 { font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.passo p { margin-top: 8px; color: var(--texto-2); }
.passos-compactos .passo-numero { font-size: 44px; margin-bottom: 10px; }
/* --- a chamada do fim da inicial -------------------------------------------------------------------------------------- */
.chamada { position: relative; overflow: hidden; min-height: 320px; display: flex; align-items: center; margin: 52px calc(-1 * var(--dentro)) calc(-1 * var(--dentro)); border-top: 1px solid var(--linha-forte); }
.chamada-arte { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.chamada-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.chamada-veu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(14, 5, 7, .96) 18%, rgba(80, 7, 11, .62) 58%, rgba(40, 5, 8, .3)); }
.chamada-in { position: relative; z-index: 1; padding: 56px var(--dentro); }
.chamada h2 { font-size: 48px; font-size: clamp(30px, 3.8vw, 48px); text-transform: uppercase; }
.chamada p { margin-top: 12px; color: rgba(243, 237, 228, .86); max-width: 44ch; font-size: 18px; }
.chamada .heroi-acoes { margin-top: 26px; }
/* --- notícias --------------------------------------------------------------------------------------------------------- */
.abas-links { margin-bottom: 24px; }
.noticias-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 16px; gap: 16px; }
.noticia-cartao { display: flex; flex-direction: column; color: var(--texto); background: var(--painel-2); border: 1px solid var(--linha); transition: border-color .2s ease, transform .2s ease; }
.noticia-cartao:hover { color: var(--texto); border-color: rgba(215, 25, 31, .6); transform: translateY(-3px); }
.noticia-cartao .miniatura { width: 100%; height: 150px; border: 0; border-bottom: 1px solid var(--linha-forte); }
.noticia-cartao .miniatura img { transform: scale(1.45); }
.noticia-cartao:hover .miniatura img { transform: scale(1.55); }
.noticia-cartao-texto { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px; }
.noticia-cartao h2 { margin-top: 12px; color: var(--ouro); font-size: 20px; line-height: 1.2; }
.noticia-cartao:hover h2 { color: var(--ouro-claro); }
.noticia-cartao p { margin-top: 10px; color: var(--texto-2); font-size: 15px; flex: 1; }
.noticia-cartao .link-seta { margin-top: 16px; color: var(--sangue-claro); }
.artigo-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-gap: 40px; gap: 40px; align-items: start; }
.artigo { max-width: 72ch; }
.artigo > p { margin-top: 18px; font-size: 18px; line-height: 1.75; color: rgba(243, 237, 228, .9); }
.artigo > .noticia-meta { margin-top: 0; font-size: 14px; }
.artigo .artigo-resumo { font-size: 21px; line-height: 1.5; color: var(--texto); font-weight: 500; padding-left: 16px; border-left: 3px solid var(--sangue); }
.link-voltar { margin-top: 36px; }
.link-voltar .ico { transform: rotate(180deg); }
.link-voltar:hover .ico { transform: rotate(180deg) translateX(3px); }
.artigo-lado { padding: 20px 22px; position: -webkit-sticky; position: sticky; top: calc(var(--topo) + 20px); border-top: 3px solid var(--sangue); }
.artigo-lado h2 { font-size: 16px; color: var(--ouro); letter-spacing: .12em; text-transform: uppercase; }
.noticias-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.noticias-lista li { border-bottom: 1px solid var(--linha); }
.noticias-lista li:last-child { border-bottom: 0; }
.noticias-lista a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 2px; color: var(--texto); }
.noticias-lista a:hover { color: var(--ouro-claro); }
.noticia-titulo { font-weight: 500; }
.noticias-lista time { color: var(--nevoa); font-size: 13px; font-variant-numeric: tabular-nums; }
/* --- guia ------------------------------------------------------------------------------------------------------------- */
.guia-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-gap: 40px; gap: 40px; align-items: start; }
.guia-indice { padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; position: -webkit-sticky; position: sticky; top: calc(var(--topo) + 20px); border-top: 3px solid var(--sangue); }
.guia-indice h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin-bottom: 10px; }
.guia-indice a { padding: 7px 0; color: var(--texto); font-weight: 500; }
.guia-indice a:hover { color: var(--ouro-claro); }
.guia-conteudo { max-width: 820px; }
.guia-titulo { font-size: 26px; margin: 44px 0 18px; text-transform: uppercase; letter-spacing: .03em; scroll-margin-top: calc(var(--topo) + 20px); }
.guia-conteudo > .guia-titulo:first-child { margin-top: 0; }
.guia-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.perguntas { border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary { position: relative; padding: 18px 44px 18px 0; cursor: pointer; list-style: none; font: 600 17px/1.35 "Barlow", "Segoe UI", Arial, sans-serif; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--ouro); border: 1px solid var(--linha-forte); font: 500 18px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; }
.pergunta[open] summary::after { content: "−"; color: var(--sangue-claro); }
.pergunta summary:hover { color: var(--ouro-claro); }
.pergunta p { padding: 0 44px 20px 0; color: var(--texto-2); max-width: 68ch; }
/* --- termos de uso e de compra (2026-09-29) ------------------------------------------------------------------------ */
.termos-pagina { max-width: 900px; margin-left: auto; margin-right: auto; }
.termos { padding: 26px 30px 18px; color: var(--texto-2); line-height: 1.6; }
.termos .termos-versao { color: var(--nevoa); font-size: 14px; margin-bottom: 14px; }
.termos-resumo { margin: 0 0 22px; padding: 14px 18px; border: 1px solid rgba(244, 181, 68, .5); background: rgba(244, 181, 68, .08); color: var(--texto); }
.termos-resumo strong { color: var(--ouro-claro); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.termos-resumo ul { margin: 8px 0 0; padding-left: 20px; }
.termos-resumo li { margin-bottom: 4px; }
.termos-secao { scroll-margin-top: calc(var(--topo) + 20px); }
.termos-secao h3 { margin: 22px 0 8px; font: 700 18px/1.3 "Chakra Petch", "Segoe UI", Arial, sans-serif; color: var(--ouro); letter-spacing: .02em; }
.termos-secao p { margin: 0 0 10px; }
.termos-secao strong { color: var(--texto); }
.termos-destaque { padding-left: 14px; border-left: 3px solid var(--sangue); }
.termos .a-informar { color: var(--ouro-claro); }
.termos-aceite { margin-top: 20px; padding: 22px 30px; border-top: 3px solid var(--sangue); }
.termos-aceite h2 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; color: var(--ouro); margin-bottom: 10px; }
.termos-marcar { display: block; margin: 0 0 16px; color: var(--texto); cursor: pointer; }
.termos-marcar input { width: 18px; height: 18px; margin: 0 10px 0 0; vertical-align: -3px; cursor: pointer; }
.termos-aceito { color: var(--texto); }
.termos-aceito svg { color: #4ade80; margin-right: 8px; vertical-align: -3px; }
/* --- download --------------------------------------------------------------------------------------------------------- */
.baixar-grade { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-gap: 40px; gap: 40px; align-items: start; }
.baixar-cartao { padding: 30px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(215, 25, 31, .22), rgba(215, 25, 31, 0) 60%), var(--painel-2); border-top: 3px solid var(--sangue); }
.baixar-cartao img { width: 280px; height: auto; margin: 0 auto 16px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .6)); }
.baixar-cartao h2 { font-size: 22px; text-transform: uppercase; letter-spacing: .04em; }
.baixar-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 8px; gap: 8px; margin: 22px 0 24px; }
.baixar-dados div { padding: 10px 6px; border: 1px solid var(--linha); background: rgba(0, 0, 0, .2); }
.baixar-dados dt { color: var(--nevoa); font: 600 11px/1.2 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.baixar-dados dd { margin: 6px 0 0; font-weight: 600; font-size: 14.5px; }
.baixar-hash { margin-top: 18px; text-align: left; font-size: 12px; color: var(--nevoa); }
.baixar-cartoes { display: flex; flex-direction: column; gap: 24px; }
.baixar-dica { margin-top: 14px; text-align: left; font-size: 13px; color: var(--nevoa); }
.baixar-hash span { display: block; font: 600 11px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; margin-bottom: 6px; }
.baixar-hash code { display: block; word-break: break-all; font-family: Consolas, "Courier New", monospace; color: rgba(243, 237, 228, .7); }
.baixar-passos > .guia-titulo:first-child, .aviso + .guia-titulo { margin-top: 0; }
.lista-numerada { margin: 0; padding-left: 22px; }
.lista-numerada li { margin-bottom: 14px; padding-left: 6px; color: var(--texto-2); }
.lista-numerada li::marker { color: var(--ouro); font-family: "Chakra Petch", "Segoe UI", Arial, sans-serif; font-weight: 700; }
.lista-numerada b { color: var(--texto); }
.aviso { margin-bottom: 24px; padding: 14px 16px; border: 1px solid rgba(244, 181, 68, .4); background: rgba(244, 181, 68, .08); color: var(--texto); }
/* --- entrada ---------------------------------------------------------------------------------------------------------- */
.entrada-in { display: flex; flex-direction: column; align-items: center; padding: 8px 0 12px; }
.entrada-cartao {
position: relative; width: 100%; max-width: 410px; padding: 28px 30px 24px;
background: linear-gradient(180deg, #211b1f, #151215 180px); border: 1px solid var(--linha-forte); border-top: 3px solid var(--sangue);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}
.entrada-logo { width: 190px; height: auto; margin: -6px auto 14px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); }
.entrada-abas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.entrada-abas a { position: relative; padding: 12px 0; text-align: center; color: var(--nevoa); font: 700 14px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.entrada-abas a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sangue-claro); transform: scaleX(0); transition: transform .2s ease; }
.entrada-abas a[aria-selected="true"] { color: var(--ouro-claro); }
.entrada-abas a[aria-selected="true"]::after { transform: scaleX(1); }
.entrada-sub { color: var(--nevoa); font-size: 15px; margin-bottom: 16px; }
.entrada-erro { margin-bottom: 16px; padding: 10px 12px; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .45); color: #ffc4c4; font-size: 14.5px; }
.entrada-cartao form { display: flex; flex-direction: column; }
.entrada-cartao label { margin: 0 0 6px; font: 600 12.5px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.entrada-cartao input {
height: 46px; padding: 0 14px; margin-bottom: 16px; background: #0c0a0b; color: var(--texto);
border: 1px solid var(--linha-forte); font: 500 16px/1 "Barlow", "Segoe UI", Arial, sans-serif; border-radius: 0; transition: border-color .2s ease, box-shadow .2s ease;
}
.entrada-cartao input:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(244, 181, 68, .18); }
.entrada-regra { margin: -6px 0 16px; color: var(--nevoa); font-size: 13px; line-height: 1.45; }
/* "Lembrar senha": o que fica guardado é a sessão, não a senha — por isso a explicação embaixo. Com o nome do cartão
* na frente, para vencer a regra dos rótulos (`.entrada-cartao label`, em maiúsculas). */
.entrada-cartao .entrada-lembrar { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 4px; cursor: pointer; font: 500 14px/1.3 "Barlow", "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--texto); }
.entrada-lembrar input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--sangue); cursor: pointer; }
.entrada-lembrar small { display: block; margin-top: 3px; color: var(--nevoa); font-size: 12.5px; line-height: 1.35; }
.entrada-cartao .btn { margin-top: 6px; }
.entrada-nota { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--nevoa); font-size: 13px; }
.entrada-nota .ico { width: 16px; height: 16px; color: var(--verde); }
.entrada-aviso { margin-top: 18px; max-width: 410px; color: var(--nevoa); font-size: 14.5px; text-align: center; }
.dialogo .servidores-cartao { width: 480px; max-width: 100%; padding-top: 26px; }
.servidores-titulo { font-size: 22px; margin-bottom: 6px; color: var(--ouro); text-transform: uppercase; letter-spacing: .06em; }
.servidores { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.servidores form { margin: 0; }
.servidor {
width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 16px; cursor: pointer; text-align: left;
background: linear-gradient(135deg, rgba(215, 25, 31, .18), rgba(26, 23, 26, .95) 55%); border: 1px solid var(--linha-forte); color: var(--texto);
font: 600 16px/1.2 "Chakra Petch", "Segoe UI", Arial, sans-serif; transition: border-color .18s ease, transform .18s ease;
}
.servidor:hover { border-color: var(--sangue-claro); transform: translateY(-2px); outline: none; }
.servidor:focus-visible { border-color: var(--ouro); transform: translateY(-2px); outline: none; }
.servidor:disabled { opacity: .6; cursor: progress; transform: none; }
.servidor-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.servidor-nome { font-size: 17px; }
.servidor-sub { display: flex; align-items: center; gap: 10px; }
.servidor-status { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px rgba(74, 222, 128, .6); }
.servidor-status.servidor-fora { background: var(--sangue-claro); box-shadow: 0 0 8px rgba(255, 74, 61, .6); }
.servidor-manutencao { color: var(--sangue-claro); font: 600 12.5px/1 "Chakra Petch", "Segoe UI", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.servidor-online { color: var(--nevoa); font: 500 13px/1 "Barlow", "Segoe UI", Arial, sans-serif; white-space: nowrap; }
.servidor-online b { color: var(--texto); font-weight: 600; }
.servidor-jogar { display: inline-flex; align-items: center; gap: 6px; color: var(--sangue-claro); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.servidor-jogar .ico { width: 16px; height: 16px; }
.dialogo { padding: 0; border: 0; background: transparent; color: var(--texto); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: visible; }
.dialogo::backdrop { background: rgba(8, 3, 4, .84); }
.dialogo[open] .entrada-cartao { animation: subir .28s cubic-bezier(.2, .7, .2, 1) both; }
.entrada-janela { width: 410px; max-height: calc(100vh - 32px); overflow-y: auto; padding-top: 22px; }
.entrada-janela .entrada-logo { width: 170px; margin-bottom: 10px; }
.dialogo-fechar { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--nevoa); cursor: pointer; }
.dialogo-fechar:hover { color: var(--texto); }
/* --- o aviso da abertura oficial (`anuncioDeAbertura` em src/site-page.mjs) -------------------------------------------- */
/* A janela que abre junto com o site: a data, a contagem regressiva e as redes da comunidade. Cabe nos 684 px da janela do
* launcher sem rolar; mais baixo que isso, o cartão rola por dentro. */
.anuncio:not([open]) { display: none; }
.anuncio-cartao {
position: relative; width: 560px; max-width: 100%; max-height: calc(100vh - 32px); overflow-x: hidden; overflow-y: auto;
padding: 24px 30px 20px; text-align: center;
background: linear-gradient(180deg, #241c20, #151215 220px); border: 1px solid var(--linha-forte); border-top: 3px solid var(--sangue);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}
.dialogo[open] .anuncio-cartao { animation: subir .28s cubic-bezier(.2, .7, .2, 1) both; }
/* Sem