/* ===================================================================== Portal do jogador — a casca da pagina. Mesma paleta da landing (Site/index.html) e da wiki (Ghost Protocol); os COMPONENTES (cartoes, celulas, grades, abas, w-*) vem do wiki.css, que e o porte ja provado no Painel. Este ficheiro so cuida do que o wiki.css nao tem: o layout da pagina, o topo, os formularios de entrada e a vitrine da loja. ===================================================================== */ :root{ --bg-0:#05070c; --bg-1:#090c13; --surface-0:#0c1018; --surface-1:#10151f; --surface-2:#151b27; --line:rgba(148,163,184,.10); --line-strong:rgba(148,163,184,.20); --accent:#38e0ff; --accent-2:#1f8fff; --accent-hi:#9ff0ff; --accent-dim:rgba(56,224,255,.12); --gold:#f5c34d; --ok:#3ddc97; --danger:#ff5d6c; --text:#e9eefb; --text-2:#b9c4da; --muted:#8b97b0; --glow:0 0 18px rgba(56,224,255,.22); --radius:10px; --font-display:'Chakra Petch','Saira',system-ui,sans-serif; --font-body:'Saira',system-ui,sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background: radial-gradient(1100px 620px at 50% -10%, rgba(31,143,255,.16), transparent 60%), radial-gradient(900px 520px at 88% 8%, rgba(56,224,255,.10), transparent 62%), var(--bg-0); color:var(--text); font-family:var(--font-body); line-height:1.55; min-height:100vh; display:flex; flex-direction:column; } a{color:var(--accent); text-decoration:none} a:hover{color:var(--accent-hi)} .wrap{width:min(1180px,94vw); margin-inline:auto} main.wrap{flex:1; padding:22px 0 48px} /* ---------- topo ---------- */ header.topo{border-bottom:1px solid var(--line); background:rgba(9,12,19,.72); backdrop-filter:blur(8px); position:sticky; top:0; z-index:30} .topo .bar{display:flex; align-items:center; gap:14px; padding:10px 0; flex-wrap:wrap} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; letter-spacing:.04em; color:var(--text); font-size:1.02rem} .brand img{width:30px;height:30px;object-fit:contain} .brand small{color:var(--muted); font-weight:400; letter-spacing:.08em} nav.principal{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap} .nav-btn{ font-family:var(--font-display); font-size:.88rem; letter-spacing:.03em; padding:7px 13px; border-radius:var(--radius); border:1px solid transparent; color:var(--text-2); background:transparent; } .nav-btn:hover{border-color:var(--line-strong); color:var(--accent-hi); background:var(--surface-1)} .nav-btn.activo{border-color:rgba(56,224,255,.35); color:var(--accent-hi); background:var(--accent-dim)} .nav-btn.primary{border-color:rgba(56,224,255,.45); color:#04121a; background:linear-gradient(180deg,var(--accent),var(--accent-2)); font-weight:700} .nav-btn.primary:hover{color:#04121a; filter:brightness(1.08)} /* O destino principal de quem entrou. Fica marcado SEMPRE — nao so na pagina dele —, e o `.activo` continua a poder somar-se por cima. */ .nav-btn.destaque{border-color:rgba(56,224,255,.35); color:var(--accent-hi); background:var(--accent-dim); font-weight:700} .nav-btn.destaque:hover{border-color:var(--accent); background:rgba(56,224,255,.18)} /* Estar em destaque e estar ABERTO sao coisas diferentes: sem esta linha as duas classes desenhavam a mesma pilula e o «voce esta aqui» sumia. */ .nav-btn.destaque.activo{border-color:var(--accent); box-shadow:var(--glow)} /* ---------- o seletor de idioma (PT|EN) ---------- Discreto de propósito: é a última coisa da barra e nunca compete com o «Criar conta». Dois estados — o idioma aberto é texto, o outro é link. */ .idiomas{display:inline-flex; align-items:center; gap:2px; margin-left:6px; padding:3px; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-display); font-size:.78rem; letter-spacing:.06em} .idiomas__eu{padding:3px 7px; border-radius:6px; color:var(--accent-hi); background:var(--accent-dim); font-weight:700} .idiomas__outro{padding:3px 7px; border-radius:6px; color:var(--muted)} .idiomas__outro:hover{color:var(--accent-hi); background:var(--surface-1)} /* A faixa que aparece só quando o navegador pede a OUTRA língua. Não redireciona nada: é um convite de uma linha, e some quando já se está do lado certo. */ .faixa-idioma{border-bottom:1px solid var(--line); background:var(--accent-dim)} .faixa-idioma .wrap{padding:7px 0} .faixa-idioma a{color:var(--accent-hi); font-size:.86rem; letter-spacing:.02em} .faixa-idioma a:hover{text-decoration:underline} form.sair{display:inline; margin:0} form.sair button{all:unset; cursor:pointer; color:var(--muted); font-size:.85rem; padding:6px 10px; border-radius:8px} form.sair button:hover{color:var(--danger); background:var(--surface-1)} /* ===================================================================== A HOME (/) --------------------------------------------------------------------- Linguagem: editorial e cinematografica. O que a separa do resto do site: texto grande com pouca entrelinha, rotulos MAIUSCULOS finos («sobrancelha»), fios de 1 px em vez de caixas, muito ar entre seccoes, e a ARTE DO JOGO a fazer o trabalho pesado — nada de gradiente a fingir imagem. ⚠️ O heroi sangra de ponta a ponta SEM `100vw`. A receita habitual (`margin-inline: calc(50% - 50vw)` a partir de um container estreito) conta a barra de rolagem na conta: sobram 8 px de cada lado e a pagina passa a rolar na horizontal — MEDIDO, e o `overflow-x: clip` no `html` nao o impediu (a pagina ainda rolava 8 px). Em vez disso, na home o `
` e que deixa de ser estreito, e cada seccao poe o seu proprio `.wrap` por dentro. Assim a largura de fora e sempre 100% do corpo — a janela MENOS a barra — e nao ha nada a transbordar. ===================================================================== */ .main--home{width:100%; padding-top:0} .main--home > .seccao > .wrap, .main--home > .numeros > .wrap{width:min(1180px,94vw); margin-inline:auto} /* ---------- o rotulo de cima de cada seccao ---------- */ .sobrancelha{ font-family:var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; display:flex; align-items:center; gap:10px} .sobrancelha::before{content:""; width:22px; height:1px; background:var(--accent); flex:none; opacity:.8} /* ---------- heroi ---------- */ .heroi{position:relative; isolation:isolate; overflow:hidden; min-height:clamp(460px,72vh,780px); display:flex; align-items:flex-end; padding:clamp(72px,12vh,124px) 0 clamp(48px,7vh,86px); background: radial-gradient(900px 520px at 18% 20%, rgba(31,143,255,.16), transparent 62%), var(--bg-0)} /* ⚠️ A arte e mais LARGA do que o heroi e comeca fora dele, de proposito: o banner do Project Metal tem o logotipo desenhado no canto de cima a esquerda, que e exactamente onde o titulo desta pagina vive — e os dois fantasmavam um no outro. `object-position` nao resolvia: num heroi mais largo do que alto o `cover` corta na VERTICAL, entao mexer no eixo horizontal nao faz nada. Empurrar a imagem 20% para a esquerda tira o logotipo do enquadramento e traz a acao para o meio. A marca continua a dizer-se: esta no topo da pagina, em texto. */ .heroi__arte{position:absolute; top:0; bottom:0; left:-20%; right:auto; width:120%; max-width:none; height:100%; object-fit:cover; object-position:50% 40%; z-index:-2} /* Duas camadas: a diagonal segura o texto (esquerda) e a de baixo dissolve a arte no fundo da pagina, para o heroi nao acabar num corte reto. */ .heroi--arte::after{content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(100deg,rgba(5,7,12,.90) 0%,rgba(5,7,12,.66) 34%, rgba(5,7,12,.06) 62%,rgba(5,7,12,.28) 100%), linear-gradient(to top,var(--bg-0) 0%,rgba(5,7,12,.72) 22%,transparent 62%)} .heroi__dentro{position:relative; max-width:min(1180px,94vw)} .heroi h1{font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,7vw,4.6rem); line-height:.94; letter-spacing:.01em; margin:0 0 18px; text-wrap:balance} .heroi p.lead{color:var(--text-2); font-size:clamp(1rem,1.4vw,1.15rem); max-width:56ch; margin:0} .heroi__pe{color:var(--muted); font-size:.85rem; margin:18px 0 0; max-width:60ch} .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px} .cta{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; letter-spacing:.04em; font-size:.98rem; padding:14px 30px; border-radius:10px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#04121a; border:1px solid rgba(56,224,255,.5); box-shadow:var(--glow)} .cta:hover{color:#04121a; filter:brightness(1.08)} .cta.ghost{background:rgba(9,12,19,.55); color:var(--text); box-shadow:none; border-color:var(--line-strong); backdrop-filter:blur(6px)} .cta.ghost:hover{color:var(--accent-hi); border-color:var(--accent); filter:none} /* ---------- a faixa de numeros ---------- */ .numeros{border-block:1px solid var(--line); margin:0} .numeros .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .numero{padding:22px 8px 20px; text-align:center; border-left:1px solid var(--line)} .numero:first-child{border-left:0} .numero b{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--text)} .numero span{display:block; margin-top:2px; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} /* ---------- o esqueleto de cada seccao ---------- */ .seccao{padding:clamp(52px,7vw,84px) 0 0} .seccao__cabeca{display:grid; gap:14px 40px; align-items:end; margin:0 0 26px; grid-template-columns:minmax(0,1fr)} .seccao__cabeca h2{font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:.02em; margin:0; line-height:1.1} .seccao__nota{color:var(--muted); font-size:.93rem; margin:0; max-width:52ch} .seccao__pe{color:var(--muted); font-size:.9rem; margin:18px 0 0; max-width:78ch} @media (min-width:860px){ .seccao__cabeca{grid-template-columns:minmax(0,1fr) minmax(0,26rem)} .seccao__nota{justify-self:end; text-align:right} } /* ---------- os quatro arquetipos ---------- */ .classes{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .classe{margin:0; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); overflow:hidden; transition:border-color .2s ease} .classe:hover{border-color:var(--line-strong)} .classe__poco{position:relative; aspect-ratio:11/15; display:grid; place-items:center; background: radial-gradient(130px 70px at 50% 88%, rgba(56,224,255,.14), transparent 70%), linear-gradient(180deg,rgba(5,7,12,.30),rgba(5,7,12,.75))} .classe__tela{display:block; width:100%; height:100%; opacity:0; transition:opacity .35s ease} .classe--pronta .classe__tela{opacity:1} .classe figcaption{padding:14px 16px 16px; border-top:1px solid var(--line)} .classe figcaption b{display:block; font-family:var(--font-display); letter-spacing:.05em; font-size:1rem} .classe figcaption span{display:block; margin-top:4px; color:var(--muted); font-size:.86rem; line-height:1.45} /* O conjunto sorteado. Vazio ate o `home.js` o preencher — `:empty` tira-lhe a margem para o cartao nao abrir um buraco quando os visuais nao carregam. */ .classe figcaption .classe__visual{margin-top:6px; color:var(--accent); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase} .classe figcaption .classe__visual:empty{display:none} /* ---------- modos de jogo ---------- */ .modos{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .modo{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface-0); display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease} .modo:hover{border-color:var(--line-strong); transform:translateY(-2px)} /* A arte e uma FAIXA no topo do cartao, com o texto por baixo: sobrepor o texto a estas imagens (cenas escuras cheias de detalhe) obrigava a um veu tao forte que a arte deixava de se ver. */ .modo__arte{display:block; width:100%; aspect-ratio:16/7; object-fit:cover; object-position:center; border-bottom:1px solid var(--line)} .modo--grande .modo__arte{aspect-ratio:16/6} .modo__texto{padding:20px 20px 22px} .modo__texto h3{font-family:var(--font-display); letter-spacing:.03em; font-size:1.14rem; margin:0 0 8px} .modo__texto p{margin:0; color:var(--text-2); font-size:.94rem} @media (min-width:900px){ .modos{grid-template-columns:repeat(2,minmax(0,1fr))} .modo--grande{grid-column:1 / -1} } /* ---------- mapas ---------- */ .mapas{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .mapa{margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-0)} .mapa:hover{border-color:var(--line-strong)} /* Os minimapas sao pequenos (250 px) e de proporcao variavel — `contain` sobre fundo escuro mostra-os inteiros em vez de os cortar. */ .mapa img{display:block; width:100%; aspect-ratio:2/1; object-fit:contain; background:#05070c; padding:6px} .mapa figcaption{padding:10px 12px 12px; border-top:1px solid var(--line)} .mapa figcaption b{display:block; font-size:.9rem; font-weight:600} .mapa figcaption span{display:block; margin-top:3px; color:var(--muted); font-size:.74rem; letter-spacing:.04em} /* ---------- arsenal ---------- */ .arsenal{display:grid; gap:18px; align-items:start} .arsenal__tira{display:flex; flex-wrap:wrap; gap:8px; padding:16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))} .arsenal__tira img{width:40px; height:40px; image-rendering:pixelated; background:rgba(5,7,12,.55); border:1px solid var(--line); border-radius:8px; padding:2px} /* O poço é o berço do tooltip: ele posiciona-se em coordenadas DELE, e não da página, para não fugir quando a secção rola. */ .arsenal__poco{position:relative} .arsenal__tira img{cursor:default} .arsenal__tira .arsenal__arma{cursor:help; transition:border-color .15s ease, transform .15s ease} .arsenal__tira .arsenal__arma:hover, .arsenal__tira .arsenal__arma:focus{border-color:var(--accent); outline:none; transform:translateY(-2px)} /* ---------- tooltip da arma ---------- */ .arma-cartao{position:absolute; z-index:20; width:min(480px,90vw); display:flex; gap:14px; padding:14px; pointer-events:none; border:1px solid var(--line-strong); border-radius:14px; background:rgba(8,11,17,.96); box-shadow:0 18px 40px rgba(0,0,0,.55)} .arma-cartao[hidden]{display:none} /* ⚠️ 190x183 e não uma tela alta: perto do quadrado, a ALTURA é que limita o enquadramento em todas as classes, e um sniper de 256 px deixa de encolher o boneco (medido: 1,24 contra 1,70 de escala numa tela 190x250). */ .arma-cartao__tela{flex:0 0 auto; width:190px; height:183px; display:block; align-self:flex-end; image-rendering:pixelated} .arma-cartao__tela[hidden]{display:none} .arma-cartao__texto{min-width:0; flex:1 1 auto} .arma-cartao__nome{display:block; font-family:var(--font-display); letter-spacing:.03em; font-size:.98rem} .arma-cartao__classe{display:block; margin-top:2px; color:var(--accent); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase} .arma-cartao__desc{margin:8px 0 10px; color:var(--text-2); font-size:.8rem; line-height:1.45} .arma-cartao__stats{margin:0; display:grid; gap:3px 8px; grid-template-columns:auto minmax(0,1fr); align-items:center} .arma-cartao__stats dt{color:var(--muted); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap} .arma-cartao__stats dd{margin:0; display:flex; align-items:center; gap:6px} .arma-cartao__stats dd i{display:block; height:5px; border-radius:3px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); min-width:2px} .arma-cartao__stats dd span{color:var(--text-2); font-size:.7rem; font-variant-numeric:tabular-nums; width:3ch; text-align:right} @media (max-width:620px){ .arma-cartao{flex-direction:column} .arma-cartao__tela{align-self:center} } .arsenal__classes{list-style:none; margin:0; padding:0; display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .arsenal__classes li{padding:12px 4px; border-top:1px solid var(--line)} .arsenal__classes b{font-family:var(--font-display); font-size:1.05rem; font-variant-numeric:tabular-nums} .arsenal__classes span{display:block; color:var(--muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase} @media (min-width:900px){ .arsenal{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px} } /* ---------- os tres passos ---------- */ .passos{list-style:none; margin:0; padding:0; display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .passos li{padding:22px 22px 24px; border-top:1px solid var(--line-strong)} .passos__n{font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.16em; color:var(--accent)} .passos h3{font-family:var(--font-display); letter-spacing:.03em; font-size:1.05rem; margin:10px 0 8px} .passos p{margin:0; color:var(--text-2); font-size:.93rem} /* ---------- requisitos ---------- */ /* ⚠️ A folga entre colunas nao e estetica: cada linha e `label ... valor` com `space-between`, e sem folga o VALOR de uma coluna encostava no ROTULO da coluna seguinte — lia-se tudo como uma frase corrida. */ .requisitos{display:grid; gap:0 36px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .requisitos div{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 4px; border-top:1px solid var(--line)} .requisitos span{color:var(--muted); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase} .requisitos b{font-family:var(--font-display); font-size:.95rem; text-align:right} /* ---------- fecho ---------- */ .fecho{text-align:center; padding:clamp(56px,8vw,96px) 20px 8px; margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--line)} .main--home > .fecho > .wrap{width:min(1180px,94vw); margin-inline:auto} .fecho h2{font-family:var(--font-display); letter-spacing:.03em; font-size:clamp(1.4rem,3vw,2rem); margin:0 0 8px} .fecho p{color:var(--text-2); margin:0} .fecho .cta-row{justify-content:center} .fecho__aviso{color:var(--gold) !important; font-size:.9rem; margin-top:18px !important} /* ---------- formularios ---------- */ .f-cartao{max-width:430px; margin:40px auto; padding:26px 26px 22px; background:linear-gradient(180deg,var(--surface-1),var(--surface-0)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 14px 40px rgba(0,0,0,.55)} .f-cartao h1{font-family:var(--font-display); font-size:1.25rem; letter-spacing:.04em; margin:0 0 14px} .f-cartao--larga{max-width:640px} .campo{display:block; margin:0 0 14px} .campo span{display:block; color:var(--muted); font-size:.85rem; margin-bottom:4px; font-family:var(--font-display); letter-spacing:.05em; text-transform:uppercase} .campo input,.campo select,.campo textarea{ width:100%; padding:10px 12px; border-radius:8px; color:var(--text); background:var(--bg-1); border:1px solid var(--line-strong); font:inherit} .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim)} .campo textarea{min-height:140px; resize:vertical} .botao{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border-radius:10px; cursor:pointer; font-family:var(--font-display); font-weight:700; letter-spacing:.04em; font-size:1rem; background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#04121a; border:1px solid rgba(56,224,255,.5)} .botao:hover{filter:brightness(1.08)} .botao--calmo{background:var(--surface-2); color:var(--text-2); border-color:var(--line-strong)} .botao--calmo:hover{color:var(--accent-hi); border-color:var(--accent); filter:none} .f-aviso{margin:0 0 14px; padding:10px 12px; border-radius:8px; font-size:.93rem; background:rgba(255,93,108,.10); border:1px solid rgba(255,93,108,.35); color:#ffb9c0} .f-ok{background:rgba(61,220,151,.10); border-color:rgba(61,220,151,.35); color:#a9f0d2} .f-nota{color:var(--muted); font-size:.87rem; margin:10px 0 0} .f-links{margin-top:16px; display:flex; gap:14px; justify-content:center; font-size:.9rem; flex-wrap:wrap} /* ---------- titulos de pagina ---------- */ .pagina-cabeca{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:8px 0 18px} .pagina-cabeca h1{font-family:var(--font-display); font-size:1.45rem; letter-spacing:.05em; margin:0} .pagina-cabeca .direita{margin-left:auto; display:flex; gap:10px; align-items:center} /* ---------- cartoes de personagem (dashboard) ---------- */ /* O cartao tem duas colunas: o BONECO a esquerda (desenhado pelo conta.js, parado a respirar) e os numeros a direita. O poco do boneco tem tamanho fixo para os cartoes ficarem todos alinhados mesmo enquanto os desenhos ainda nao chegaram — e para um personagem sem nada equipado nao encolher o cartao dele. */ .chars{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))} .char-cartao{position:relative; display:flex; gap:16px; align-items:flex-start; padding:18px; background:linear-gradient(180deg,var(--surface-1),var(--surface-0)); border:1px solid var(--line); border-radius:var(--radius); color:var(--text)} .char-cartao:hover{border-color:var(--accent); box-shadow:var(--glow); color:var(--text)} .char-boneco{flex:0 0 auto; width:118px; height:150px; border-radius:8px; background:radial-gradient(90px 60px at 50% 88%, rgba(56,224,255,.10), transparent 70%), rgba(8,11,17,.55); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden} .char-boneco__tela{display:block; width:100%; height:100%; object-fit:contain} .char-corpo{min-width:0; flex:1 1 auto} .char-cartao h3{margin:0 0 2px; font-family:var(--font-display); letter-spacing:.03em; font-size:1.1rem} .char-cartao .sub{color:var(--muted); font-size:.85rem} .char-cartao .linhas{margin-top:10px; display:grid; gap:4px; font-size:.92rem} .char-cartao .linhas span{color:var(--muted)} .char-cartao .linhas b{color:var(--text-2); font-weight:600} .char-cartao .ouro{color:var(--gold)} .char-online{position:absolute; top:14px; right:14px; font-size:.75rem; font-family:var(--font-display); letter-spacing:.06em; color:#06231a; background:var(--ok); border-radius:999px; padding:2px 9px} @media (max-width:420px){ .char-cartao{flex-direction:column; align-items:center; text-align:center} .char-corpo{width:100%} } /* ---------- o menu de paginas (mochila, armazem) ---------- */ /* Os paineis ja vem TODOS no HTML; quem escolhe qual se ve e esta classe. `display:none` por omissao e `--pronto` a mostrar: assim nao ha o piscar de quatro grades a aparecerem antes de o JS as esconder, e sem JS fica a primeira pagina (que o template ja marca) em vez de nada. */ .w-pag-painel{display:none} .w-pag-painel--pronto{display:block} .w-paginas{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px} .w-pag{display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit; font-size:.85rem; padding:5px 12px; border-radius:999px; color:var(--text-2); background:var(--surface-1); border:1px solid var(--line-strong)} .w-pag:hover{color:var(--accent-hi); border-color:var(--accent)} .w-pag i{font-style:normal; font-size:.72rem; font-variant-numeric:tabular-nums; color:var(--muted); background:rgba(8,11,17,.6); border-radius:999px; padding:0 6px; border:1px solid var(--line)} .w-pag--activa{color:#04121a; font-weight:700; border-color:rgba(56,224,255,.55); background:linear-gradient(180deg,var(--accent),var(--accent-2))} .w-pag--activa i{color:#04121a; background:rgba(255,255,255,.35); border-color:transparent} .w-pag--trancada{opacity:.55} .w-pag--trancada.w-pag--activa{opacity:1} /* ---------- loja ---------- */ .loja-abas{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0} .loja-grade{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr))} .loja-item{display:flex; gap:10px; align-items:center; padding:10px; background:linear-gradient(180deg,var(--surface-1),var(--surface-0)); border:1px solid var(--line); border-radius:var(--radius)} .loja-item:hover{border-color:var(--line-strong)} .loja-item img{width:40px; height:40px; image-rendering:auto; flex:none; background:#080b11; border-radius:6px; padding:2px} .loja-item .semicone{width:40px;height:40px;flex:none;display:grid;place-items:center; color:var(--muted); background:#080b11; border-radius:6px} .loja-item .info{min-width:0} .loja-item .nome{display:block; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-2)} .loja-item .preco{font-size:.9rem; color:var(--gold); font-weight:600} .loja-item .tipo{font-size:.76rem; color:var(--muted)} .loja-item .compra{display:flex; gap:6px; margin-top:6px; align-items:center} .loja-item .compra select{flex:1; min-width:0; padding:4px 6px; border-radius:6px; background:var(--bg-1); color:var(--text-2); border:1px solid var(--line-strong); font-size:.82rem} .loja-item .compra button[disabled]{opacity:.45; cursor:not-allowed} /* ---------- tabelas simples (extrato, reportes) ---------- */ .rolavel{overflow-x:auto} .tabela{width:100%; border-collapse:collapse; font-size:.93rem} .tabela th{font-family:var(--font-display); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-strong)} .tabela td{padding:8px 10px; border-bottom:1px solid var(--line)} .tabela .num{text-align:right; font-variant-numeric:tabular-nums} .mais{color:var(--ok)} .menos{color:var(--danger)} .ouro{color:var(--gold)} .etq{display:inline-block; padding:1px 8px; border-radius:999px; font-size:.76rem; font-family:var(--font-display); letter-spacing:.05em; border:1px solid var(--line-strong); color:var(--text-2)} .etq--aberto{border-color:rgba(56,224,255,.4); color:var(--accent-hi)} .etq--resolvido{border-color:rgba(61,220,151,.4); color:var(--ok)} .etq--fechado{color:var(--muted)} /* ---------- rodape ---------- */ footer.pe{border-top:1px solid var(--line); padding:20px 0; color:var(--muted); font-size:.85rem} footer.pe .foot{display:flex; gap:16px; flex-wrap:wrap; align-items:center} /* No telemovel o heroi fica mais alto do que largo e a arte passa a ser cortada na horizontal: ai o enquadramento vai para o personagem principal, que e o que se ve num ecra estreito. ⚠️ E o veu deixa de ser diagonal e passa a cobrir tudo. Num ecra largo o texto vive na metade escura e a acao fica a direita, livre; num ecra estreito o texto cai EM CIMA do personagem — que e a parte mais clara da arte — e a diagonal ja nao o alcanca. MEDIDO a 375 px: com o veu de desktop, o rotulo de cima e metade do paragrafo ficavam ilegiveis. */ @media (max-width:640px){ .heroi__arte{object-position:62% center} .heroi--arte::after{background: linear-gradient(to top,var(--bg-0) 0%,rgba(5,7,12,.93) 26%, rgba(5,7,12,.78) 58%,rgba(5,7,12,.50) 100%)} } @media (max-width:640px){ .topo .bar{gap:8px} nav.principal{width:100%; justify-content:flex-end} /* No telemóvel a barra já dá duas linhas; o seletor não pode empurrar uma terceira só para ele. */ .idiomas{margin-left:auto} } /* ---------- ajudas sem inline (a CSP e style-src 'self') ---------- */ .pe .spacer{margin-left:auto} .pe .disclaimer{font-size:.8em} .cartao-espaco{margin-top:16px} .nota-espaco{margin-top:18px} .campos-lado-a-lado{display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .botao--curto{width:auto; padding:12px 34px} /* ---------- escolher a conta ("esqueci a senha") ---------- */ /* Uma lista de radios que se le como cartoes: o alvo de clique e a LINHA inteira (o `label` embrulha o input), porque num telemovel acertar no circulo de 14 px e o que faz a pessoa desistir. O `escolha__meta` existe para distinguir duas contas do mesmo dono — sem ele, quem esqueceu a senha e tambem meio do nome fica sem criterio nenhum. */ .escolha{display:grid; gap:8px; margin:0 0 18px} .escolha__l{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; padding:10px 12px; border-radius:10px; cursor:pointer; background:var(--bg-1); border:1px solid var(--line-strong)} .escolha__l:hover{border-color:var(--accent)} .escolha__l input{grid-row:1 / span 2; accent-color:var(--accent)} .escolha__l:has(input:checked){border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim)} .escolha__nome{font-family:var(--font-display); letter-spacing:.03em; display:flex; align-items:center; gap:8px} .escolha__meta{color:var(--muted); font-size:.82rem} /* ===================================================================== RANKING (/ranking) — 31-08-2026 O destaque do Desafio do Hunter e o unico bloco do site que se pinta com o acento: o dono pediu-o "com destaque", e a maneira de o dar sem inventar uma cor nova e usar a que a casca ja reserva para o que e accionavel. ===================================================================== */ .rk-sub{margin:0; max-width:38ch; text-align:right} /* Em ecra estreito a frase ja ocupa duas linhas: encostada a direita pelo `margin-left:auto` do `.direita`, ficava com uma sangria que parecia erro. */ @media (max-width:640px){ .rk-sub{text-align:left; max-width:none} .pagina-cabeca .direita:has(.rk-sub){margin-left:0; width:100%} } .rk-desafio{position:relative; margin:0 0 18px; padding:18px 18px 16px; border:1px solid rgba(56,224,255,.32); border-radius:14px; background:linear-gradient(180deg, rgba(56,224,255,.10), rgba(9,12,19,.55) 60%); box-shadow:var(--glow)} .rk-desafio--vazio{border-color:var(--line-strong); box-shadow:none; background:var(--surface-0)} .rk-desafio__cabeca{display:grid; gap:16px 24px; align-items:start; grid-template-columns:minmax(0,1fr)} @media (min-width:760px){ .rk-desafio__cabeca{grid-template-columns:minmax(0,1fr) minmax(0,15rem)} } .rk-desafio h2{margin:6px 0 6px; font-family:var(--font-display); font-size:1.35rem; letter-spacing:.03em} .rk-desafio__nota{margin:0; color:var(--text-2); font-size:.92rem; max-width:60ch} .rk-selo{display:inline-block; padding:2px 10px; border-radius:999px; font-family:var(--font-display); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#04121a; background:linear-gradient(180deg,var(--accent),var(--accent-2))} .rk-desafio__mapa{border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; background:var(--bg-1)} /* ⚠️ `cover` e nao `contain`: os minimapas do jogo nao tem todos a mesma forma — o do mapa 183 vem 254x284 (retrato) e dentro de uma moldura 2:1 com `contain` fica uma tira fina no meio de um retangulo preto. Aqui a arte e decoracao com o nome por baixo; a imagem INTEIRA mostra-se na pagina do mapa (`.rk-cabecalho-arte`), que e onde ela importa. */ .rk-desafio__mapa img{display:block; width:100%; aspect-ratio:2/1; object-fit:cover; object-position:center; background:#05070c} .rk-desafio__mapa b{display:block; padding:8px 12px 0; font-family:var(--font-display); letter-spacing:.02em; font-size:.95rem} .rk-desafio__mapa .w-sub{display:block; padding:0 12px 10px} .rk-aviso{margin:14px 0 0; padding:8px 12px; border-radius:10px; background:var(--surface-1); border:1px solid var(--line-strong); color:var(--text-2); font-size:.88rem} .rk-desafio .rolavel, .rk-desafio .w-vazio{margin-top:14px} .rk-edicoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)} .rk-edicoes .etq b{color:var(--accent-hi); margin-left:6px; font-variant-numeric:tabular-nums} .rk-edicoes a.etq:hover{border-color:var(--accent)} /* ---------- as tabelas de quadro ---------- */ .rk-tabela .rk-pos{width:3.2rem; text-align:right; color:var(--muted); font-family:var(--font-display); font-variant-numeric:tabular-nums} .rk-tabela .rk-nome{font-family:var(--font-display); letter-spacing:.02em; color:var(--text)} .rk-tabela .rk-tempo{font-family:var(--font-display); color:var(--accent-hi)} .rk-tabela .rk-kd{font-family:var(--font-display); color:var(--gold)} .rk-tabela tr.rk-primeiro td{background:rgba(56,224,255,.07)} .rk-tabela tr.rk-primeiro .rk-pos{color:var(--gold)} .rk-tabela tr.rk-podio .rk-pos{color:var(--gold)} /* ---------- o seletor de ordem do PVP ---------- */ /* Ligacoes e nao um