/* ===== Fontes ===== Self-hosted (sem dependência de CDN externo): Chakra Petch é a fonte-base da interface (legível em tamanho pequeno pro HUD), Cinzel é a fonte dos títulos (h1/h2 de painéis, modais e fim de jogo) e Metal Mania é exclusiva do nome do jogo (#menuTitle) — ela só é legível em texto grande, então não deve aparecer em mais nenhum lugar. Arquivos em public/assets/fonts/, dois subsets cada (latin + latin-ext, pro acento do português) via unicode-range. */ @font-face { font-family: 'Metal Mania'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/metal-mania-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Metal Mania'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/metal-mania-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+2113; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/cinzel-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/cinzel-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+2113; } @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/chakra-petch-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/chakra-petch-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+2113; } @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/chakra-petch-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/chakra-petch-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+2113; } /* ===== Paleta ===== Fonte única das cores da interface: nenhuma regra abaixo deve escrever um hex literal — use uma variável daqui (ou crie uma, se a cor for realmente nova). Cores iguais ou quase iguais foram unificadas na mesma variável de propósito: antes existiam vários cinzas levemente diferentes (#2b2b3d, #2e2e2e, #2f2f40…) que apareciam misturados na mesma tela. Toda a interface é escala de cinza + o vermelho da identidade. Os cinzas eram azulados/arroxeados (#2b2b3d, #9a9ab0, #52527a…) e foram neutralizados; azul só sobrou onde a cor é *informação* e não decoração (`--cor-azul-*`, `--class-color` de cada classe em shared/classes.js). */ :root { /* ----- Eixos da tela ----- Largura e altura *do conteúdo*, que não são necessariamente as da tela física: em modo touch com o aparelho em retrato o app inteiro é girado 90° por CSS (`body.tela-girada` mais abaixo, ver public/js/orientation.js e public/js/screenRotation.js) e os dois eixos trocam de papel. Nenhuma regra deste arquivo deve usar `100vh`/`100dvh`/`100vw` direto por causa disso — use estas duas variáveis, que já sabem se a tela está girada. `dvh` (e não `vh`) porque a barra de endereço do navegador móvel entra e sai da viewport; a declaração dupla é o fallback pra quem não suporta `dvh`, mesmo padrão que as regras usavam antes. */ --largura-tela: 100vw; --altura-tela: 100vh; /* Altura da barra superior da tela inicial (#menuTopbar). É variável e não valor fixo porque duas regras diferentes precisam do *mesmo* número: a altura da própria barra e o `padding-top` de #menu, que é o que impede qualquer painel do menu de passar por baixo dela. São 40px de botão mais os 8px de `padding` de cima e de baixo. É uma fileira só: Talentos, Monstruário e Relicário já foram uma segunda faixa com altura própria (--altura-subnav), que sumiu quando eles viraram abas irmãs das outras, e as abas saíram depois com o acampamento. */ --altura-topbar: 56px; /* Medidas do container padrão das telas do menu (.menu-painel). São variáveis, e não números escritos em cada painel, porque o ponto delas é serem *as mesmas* nas cinco telas: mudar aqui move todas juntas, que é o que impede a moldura de mudar de tamanho quando o jogador troca de aba. A largura é a da tela mais exigente (o Relicário, que abre a lista em três colunas de 280px + os vãos + o padding); as outras sobram nela de propósito. A altura é só um teto: o padrão é o painel ocupar a altura inteira da visão (ver `height: 100%` em .menu-painel), e o teto é o que impede a moldura de virar uma faixa esticada numa tela muito alta. */ --largura-painel-menu: 1040px; --altura-painel-menu: 620px; /* Largura em px da arena já redimensionada, escrita por gameScale.js no `#game-wrap`. Os textos desenhados *dentro* da arena (overlays de espera/contagem regressiva/fim de jogo) escalam por ela, não por `--largura-tela`: a arena mantém 1000x600 de proporção e quase nunca ocupa a tela inteira — num celular deitado a tela é bem mais larga que ela, e o texto saía enorme dentro de uma arena pequena. O valor aqui é só o fallback de antes de a primeira partida abrir. */ --largura-arena: var(--largura-tela); /* Véu do portão de tela cheia (modo touch): escuro o bastante para o texto e o botão lerem por cima de qualquer tela, translúcido o bastante para o jogo continuar visível atrás. */ --cor-veu-tela-cheia: rgba(0, 0, 0, 0.80); /* Véu por cima da textura de arena usada como fundo de botão (quadrado de nível e linha de sala, ver "Textura de arena" no fim do arquivo): a textura é o que identifica o nível, mas o texto por cima dela é branco miúdo — sem escurecer, "Fenda de Gelo" some no chão de gelo. O tom fraco é o do hover, onde a textura ganha um pouco mais de presença. */ --cor-veu-textura-arena: rgba(0, 0, 0, 0.74); --cor-veu-textura-arena-fraco: rgba(0, 0, 0, 0.58); /* Véu da tela de fim de partida, por cima do tijolo de masmorra (`#gameOverOverlay`). É bem mais escuro que o mesmo tijolo no fundo do menu (0.6): aqui a parede é só clima atrás do resultado — o que precisa ser lido é "Você ganhou"/"Você perdeu" e o relatório, e um tijolo claro demais disputava com os dois. Como o tijolo agora fica parado (ver `#gameOverOverlay`), ele é só textura de fundo: escurecer mais ainda (0.88) tira o pouco de disputa que sobrava com o título. */ --cor-veu-endgame: rgba(0, 0, 0, 0.88); /* Véu do fim de partida **na vitória** (`#gameOverOverlay.vitoria-sobre-arena`): sem o tijolo, direto sobre a última cena da arena, que o render continua desenhando por baixo. Mais leve que o do tijolo (0.88) porque o que está atrás é a arena da partida que acabou de ser vencida — ela tem de continuar reconhecível —, e escuro o bastante para o relatório, a barra e a medalha seguirem legíveis por cima dos fogos. O tom puxa um fio de azul, o mesmo do fundo do mural (`#12121a`), para não ler como cinza apagado. */ --cor-veu-vitoria: rgba(10, 10, 16, 0.72); /* Sala de espera da Defesa da base: o chão do nível a 50% de brilho (ver `#waitingOverlay.horde`). */ --cor-veu-sala-espera: rgba(0, 0, 0, 0.5); /* Neutros: superfícies, da mais funda para a mais alta */ --cor-fundo: #1d1d1d; --cor-fundo-arena: #202020; /* Véu translúcido da contagem regressiva sobre a arena (deixa os jogadores visíveis atrás do número) — mesmo tom de --cor-fundo-arena. */ --cor-fundo-arena-veu: rgba(32, 32, 32, 0.85); --cor-superficie-baixa: #1c1c1c; --cor-superficie-icone: #242424; --cor-superficie: #2a2a2a; --cor-superficie-alta: #2e2e2e; --cor-superficie-forte: #333; --cor-superficie-elevada: #3a3a3a; --cor-superficie-hover: #3f3f3f; --cor-superficie-hover-alta: #4a4a4a; /* Botões secundários sobre painel de pedra ("Patch"/"Créditos" na tela inicial, os atalhos de leitura da Defesa da base). Um cinza claro o bastante para a silhueta do botão se separar do painel escuro atrás: nos tons de superfície (#2a2a2a–#333) o botão sumia no fundo e só o rótulo aparecia. */ --cor-botao-secundario: #565656; --cor-botao-secundario-hover: #676767; --cor-modal-fundo: #100f0e; /* Barra de navegação da tela inicial (#menuTopbar): fundo quase preto e botões um degrau acima dele. São tons próprios, e não os `--cor-botao-flutuante-*` de um botão solto sobre a cena, porque aqui a peça não flutua — é uma faixa sólida, e os botões precisam se destacar *dentro* dela em vez de sobre o fundo do jogo. */ --cor-barra-fundo: #050505; --cor-barra-botao: #121010; /* Fundo do palco do acampamento, na sobra de menos de uma escala que o canvas ampliado por fator inteiro deixa nas bordas. */ --cor-acampamento-fundo: #0c0b0a; --cor-barra-botao-hover: #1e1b1b; --cor-painel-fundo: rgba(38, 35, 34, 0.78); /* Painéis "de pedra" (menu principal e ranking): cinza bem escuro e opaco, sem textura, pra lerem como um bloco de pedra sólido. */ --cor-painel-pedra-veu: #100f0e; /* Contorno da laje do container do menu (.menu-painel). A pedra do painel é quase preta, então o contorno tem de ser mais **claro** que ela, e não mais escuro como nos botões coloridos: escurecer o quase-preto não desenha borda nenhuma sobre a parede de pedra, que também é escura. */ --cor-painel-pedra-contorno: #35302c; --cor-pedra-borda: #100f0e; /* Prata dos pregos dos cantos do container padrão do menu (.menu-painel). Três tons e não um: o prego é um pixel de luz, um corpo e um pixel de sombra — é o degrau de cor que faz uma peça de 8px ler como cabeça de prego redonda em vez de quadradinho cinza. */ --cor-prego: #8b8d94; --cor-prego-luz: #dfe2e8; --cor-prego-sombra: #4a4c52; /* Neutros: bordas e cinzas médios */ --cor-borda: #444; --cor-borda-media: #555; --cor-borda-clara: #666; --cor-borda-hover: #777; --cor-cinza-medio: #6b6b6b; --cor-cinza-claro: #8a8a8a; /* Texto */ --cor-branco: #fff; --cor-texto: #eee; --cor-texto-suave: #ccc; --cor-texto-medio: #bbb; --cor-texto-fraco: #9a9a9a; /* Identidade vermelha (botões, bordas de modal, seleção, foco) */ --cor-vermelho: #8b0000; --cor-vermelho-hover: #6e0000; --cor-vermelho-selecao: #6e2020; --cor-vermelho-destaque: #ff4d4d; /* Feedback: erro, sucesso, tempo/ouro, empate */ --cor-erro: #e63946; --cor-erro-forte: #c0392b; --cor-erro-forte-hover: #a5322a; --cor-erro-fundo: #a12a35; --cor-erro-claro: #ff8b93; --cor-erro-texto: #ff6b6b; --cor-sucesso: #4ade80; --cor-sucesso-claro: #1cff7a; --cor-ouro: #facc15; /* A silhueta do bicho ainda não encontrado no Monstruário: um cinza de pedra do painel, e **não** a cor do bicho com menos brilho — a cor é metade da identidade dele na arena (ver drawInimigos em hordeRender.js), e escurecê-la entregaria o que a silhueta existe para esconder. É o mesmo valor que `OCULTO_COR` em monstruario.js usa no canvas do que não tem sprite. */ --cor-silhueta-monstruario: #3a3a46; --cor-ouro-suave: #f4c542; /* O logo da tela inicial (#menuTitle) e a cena atrás dele (#cenaInicial): o contorno marrom-escuro e o brilho quente vêm da ilustração, onde o logo dourado fica sobre um céu vermelho. */ --cor-logo-contorno: #2a0d04; --cor-logo-brilho: rgba(255, 140, 20, 0.35); --cor-logo-brilho-forte: rgba(255, 160, 30, 0.7); --cor-cena-inicial-fundo: #3a1208; --cor-cena-inicial-veu: rgba(0, 0, 0, 0.6); --cor-cena-inicial-veu-meio: rgba(0, 0, 0, 0.35); /* Os botões da capa (ver #menuViewHome, perto de #menuTitleExtras). */ --cor-capa-jogar: #b3120f; --cor-capa-jogar-hover: #cc1d18; --cor-capa-jogar-subtitulo: #f3c9b8; --cor-capa-secundario: #2e2723; --cor-capa-secundario-hover: #40362f; --cor-cena-brilho-cajado: rgba(170, 255, 60, 0.8); --cor-cena-brilho-olhos: rgba(255, 220, 60, 0.95); --cor-empate: #d0c07f; /* Tiers de conquista (aba "Conquistas" do perfil): cada tier é um identificador visual próprio, igual --class-color já é o identificador de classe — por isso fogem da regra de "cinza + vermelho" do resto da interface. */ --cor-tier-bronze: #b0763f; --cor-tier-prata: #d5dbe1; --cor-tier-ouro: #d9b544; --cor-tier-diamante: #7fd8e8; /* Lendário: o teto da escala, e o único tier fora da família de metais — roxo, porque nenhuma variação de dourado/prateado se distingue do ouro e do diamante a 40px de distância na grade. Ver a tabela de bandas em shared/achievements.js. */ --cor-tier-lendario: #c46bff; --gradiente-tier-ouro: linear-gradient(135deg, #f5da7a, var(--cor-tier-ouro) 55%, #a9791f); --gradiente-tier-diamante: linear-gradient(135deg, #d6f6fb, var(--cor-tier-diamante) 55%, #2f9cb5); --gradiente-tier-lendario: linear-gradient(135deg, #eab6ff, var(--cor-tier-lendario) 55%, #6a1fa9); /* Texto por cima de uma cor de tier: as cinco são claras, então aqui o texto inverte e fica escuro (ver .achievement-badge.desbloqueada). */ --cor-texto-sobre-tier: #1a1a1a; /* Raridade dos itens da Defesa da base (Relicário, tela de escolha e inventário do HUD). Foge da regra de "cinza + vermelho" pelo mesmo motivo dos tiers acima: a cor é o único jeito de dizer "isto é raro" sem escrever a palavra em três telas. Comum é cinza de propósito — é o que faz as outras três lerem como exceção. Os mesmos hexes estão em `CORES_RARIDADE` (public/js/raridades.js), que é o lado do canvas: CSS não alcança o canvas (ver "Paleta de cores" em public/css/CLAUDE.md). Mudar um lado sem o outro deixa o o HUD e o Relicário discordando sobre o mesmo item. O `-veu` é a versão translúcida que vira **fundo** do item. É translúcido e não um cinza tingido pronto porque o mesmo tom entra sobre duas superfícies diferentes — o painel do Relicário e o pedra do HUD sobre a arena — e um hex fixo só funcionaria numa delas. */ --cor-raridade-comum: #c8c8c8; --cor-raridade-raro: #6cb6ff; --cor-raridade-quebra-jogo: #facc15; --cor-raridade-maldito: #dc2626; --cor-raridade-comum-veu: rgba(200, 200, 200, 0.10); --cor-raridade-raro-veu: rgba(108, 182, 255, 0.18); --cor-raridade-quebra-jogo-veu: rgba(250, 204, 21, 0.18); --cor-raridade-maldito-veu: rgba(220, 38, 38, 0.20); /* A moeda da Loja do Relicário. É o **mesmo** dourado de `--cor-raridade-quebra-jogo`, e a repetição tem nome próprio de propósito: as duas nunca aparecem juntas (o saldo mora na barra da Loja, a raridade mora na carta), e uma variável própria é o que permite mexer numa sem a outra. Ver "Paleta de cores" em public/css/CLAUDE.md. */ --cor-moeda: #facc15; /* Tom de hover da moeda, para o botão de compra preenchido. */ --cor-moeda-hover: #fde047; /* Cor do selo de família exclusiva (o aviso "só um por partida" no cartão da tela de escolha e na entrada do Relicário — ver avisoDeFamilia em raridades.js). **Uma por família**, e não uma cor de "aviso": as três usavam o mesmo `--cor-hud-tiro-pronto`, que é o mesmo hex de `--cor-raridade-quebra-jogo` — então a mesma cor dizia duas coisas diferentes no mesmo cartão (raridade duas linhas acima, família na última) e as três famílias diziam a mesma. Os três hues são escolhidos por **separação**, e não por semântica: eles ficam fora das quatro cores de raridade (cinza, azul, amarelo, vermelho), que é o que eles precisam não parecer, e a ~90° um do outro, que é o que eles precisam não parecer entre si. O par mais próximo de tudo isso é cano (verde-ciano) contra raro (azul) — e é aceitável porque o selo **escreve** o nome da família: a cor é pista redundante, não a informação. Verde-ciano para o `cano` (o mecanismo, metal), verde-limão para a `municao` (o que queima, congela e envenena), violeta para o `bocal` (a direção) e rosa para o `leque` (a trajetória). Família nova precisa de uma variável aqui e de uma classe `.familia-*` abaixo — o teste do catálogo confere as duas. O rosa do `leque` é o quarto hue e o mais apertado dos quatro: ele fica a ~75° do violeta do bocal (a família vizinha, e a que mais aparece no mesmo cartão) e a ~30° do vermelho de `maldito`. A separação contra o maldito não é de hue e sim de **luminosidade e saturação** — `#dc2626` é vermelho escuro e cheio, `#f472b6` é rosa claro —, e é aceitável pelo mesmo motivo que o par cano/raro já era: o selo **escreve** o nome da família, então a cor é pista redundante e não a informação. */ --cor-familia-cano: #2dd4bf; --cor-familia-municao: #a3e635; --cor-familia-bocal: #a78bfa; --cor-familia-leque: #f472b6; /* Família que este cliente não conhece (servidor mais novo que o front): o selo continua aparecendo, em neutro. O aviso é a informação; a cor é o acabamento dela. */ --cor-familia-outra: #bbb; /* Azuis: só onde a cor carrega informação (classe no HUD, escudo, links) */ --cor-azul-classe: #7dd3fc; --cor-azul-escudo: #4aa8ff; --cor-azul-link: #7fb2d0; --cor-azul-ranking: #9ecbff; /* Cores do HUD (vida, escudo e barra de tiro). Ficam separadas das variáveis genéricas (--cor-erro, --cor-azul-escudo, --cor-sucesso) porque o HUD é lido de relance no meio da partida e precisa de tons vivos, enquanto as mesmas cores na interface (erro de formulário, vitória no ranking) não seguem esse ajuste. */ --cor-hud-vida-texto: #d4212c; --cor-hud-escudo: #196fb5; /* Mesmas cores da prévia de mira (AIM_PREVIEW_COLOR/_COOLDOWN em render.js): vermelho carregando, amarelo pronto — a barra de cooldown e a mira precisam concordar sobre o que "pronto para atirar" parece. */ --cor-hud-tiro: #ef4444; --cor-hud-tiro-pronto: #facc15; /* Barra do cano de cadência (.horde-cano-fill). Não reusa o par vermelho/amarelo acima de propósito: as duas barras ficam coladas no mesmo cartão, e com a mesma paleta o jogador não distinguia de relance qual estava lendo. Verde/vermelho é o par mais separável do amarelo da recarga, e mantém a leitura "verde = pode atirar". */ --cor-hud-cano-pronto: #22c55e; --cor-hud-cano-vazio: #ef4444; /* Barra do rolamento (.horde-rolamento-fill) pronta. O trilho enchendo usa o azul do escudo (--cor-hud-escudo); pronto ele acende no ciano, que é o terceiro par do cartão — os outros dois já são vermelho/amarelo (recarga) e verde/vermelho (cano). */ --cor-hud-rolamento-pronto: #38bdf8; /* Selo da "Lança do vazio" pronta (.horde-lanca-selo). É o violeta do ícone e do FX do item (public/js/itemIcones.js) — a mesma cor que o jogador acabou de ver acender no personagem —, e é o quarto hue do cartão local: os três trilhos já ocupam vermelho/amarelo, azul/ciano e verde/vermelho. */ --cor-lanca-pronta: #a78bfa; --cor-lanca-pronta-brilho: #f5f3ff; /* Casca do talento "Alicerce" sobre a barra da base (.horde-base-casca). É o azul do Bastião (ARVORES em shared/talentTree.js), a árvore que a concede: a barra nasce de um talento, e a cor é o que a liga a ele. */ --cor-casca-base: #4a9be8; /* A muralha da barra de vida da base (.horde-base-track/-fill). A barra era um retângulo de cor chapada — a leitura era de barra de carregamento, e o que ela mede é uma muralha de pedra sendo derrubada. Três tons e não um, porque uma fiada de blocos é feita de três coisas: a junta entre um bloco e outro, o topo iluminado de cada bloco e a face quebrada na ponta de onde a muralha já caiu. São `rgba` e não hex: os três entram por cima de **duas** cores diferentes (o verde da vida e o vermelho do estado crítico) e por cima do trilho vazio, e um tom fixo só serviria para uma delas. Pelo mesmo motivo eles não têm par claro/escuro por estado — é a mesma pedra em toda a barra, só muda o que está por baixo. */ --cor-muralha-junta: rgba(0, 0, 0, 0.38); --cor-muralha-luz: rgba(255, 255, 255, 0.16); --cor-muralha-quebra: rgba(0, 0, 0, 0.55); /* Contorno dos ícones das fileiras de vida/escudo (ver .resource-icon-outline) — separa visualmente ícones concatenados/ sobrepostos (empilhamento por largura máxima). Desenhado como pixels extras por baixo do preenchimento (hud.js), não `filter`, então é preto puro, sem tom. */ --cor-contorno-icone-hud: #000; /* Fundo dos botões flutuantes de canto (volume, música): mais claro que as superfícies normais, de propósito, pra ter contraste sobre qualquer fundo (arena escura ou parede clara do menu). Opaco: era translúcido para o `backdrop-filter: blur()` que esses botões carregavam, e o desfoque saiu junto com o canto arredondado (ver a moldura dos botões de ícone, mais abaixo) — sem ele a transparência só deixava o fundo do jogo vazar por dentro da peça. */ --cor-botao-flutuante-fundo: var(--cor-superficie-elevada); --cor-botao-flutuante-fundo-hover: var(--cor-superficie-hover-alta); /* ===== Pixel art ===== A arte do jogo é pixel art (sprites das classes, arenas e tudo o que public/js/pixel.js desenha no canvas), então painéis e modais não usam canto arredondado nem sombra borrada: sombra aqui é um bloco sólido deslocado, no mesmo múltiplo de 4px do "pixel de arte" do canvas. Botões, campos e modais também são pixel art (moldura em escadinha, no fim do arquivo) e por isso não têm mais sombra externa nenhuma — a silhueta recortada deixaria a sombra aparecendo como um dente sólido nos cantos. Quem continua usando sombra desfocada são os painéis flutuantes e os botões de ícone, por isso --sombra-flutuante segue existindo. */ --sombra-flutuante: 0 8px 20px rgba(0, 0, 0, 0.35); /* Espessura da moldura dos botões. O degrau do canto continua sendo o "pixel de arte" cheio (4px, PX em public/js/pixel.js) — é ele que dá a escadinha; o contorno é metade disso, senão a moldura pesa mais que o próprio botão nos botões menores (confirmar das modais, overlays). */ --espessura-borda-botao: 2px; /* Quanto a moldura escurece o fundo do próprio botão. É um fator de brilho, não uma cor: a moldura tem que ser o tom escuro *daquele* botão, e o vermelho, o cinza e o desabilitado saem todos daqui sem precisar de uma variável por cor. */ --escurecimento-borda-botao: 0.5; /* Silhueta do botão: retângulo com os quatro cantos em escadinha de dois degraus de 4px. Usada nas duas camadas da moldura — a de dentro é a mesma escadinha, só nasce recuada pela espessura da borda (ver o `inset` do ::after). */ --recorte-botao-pixel: polygon( 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px ); /* Silhueta dos botões **de ícone** (abas da barra, configurações, mudo, fechar): a mesma escadinha, com **um** degrau de 4px em cada canto em vez de dois. Num quadrado de 40px — e mais ainda nos de 26 a 30 — a escadinha de dois degraus come o botão inteiro, e era por isso que esses botões ficaram de fora da moldura de fliperama e mantiveram `border-radius` (ver docs/pixel-art.md). Um degrau resolve as duas coisas: dá a silhueta em pixel na escala certa sem a moldura pesada. */ --recorte-icone-pixel: polygon( 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px ); /* Foco/seleção: anel sólido de 4px em vez de brilho difuso. */ --sombra-foco-vermelho: 0 0 0 4px rgba(255, 77, 77, 0.55); /* ----- Realce de foco (navegação sem ponteiro) ----- As três medidas do realce que marca o elemento em foco enquanto o jogador navega por controle ou por seta (ver "Realce de foco" no fim deste arquivo). São variáveis porque nenhuma das três é gosto — as duas primeiras foram **medidas em pixel** depois de o realce ter nascido vermelho e a 4px de recuo, e ter passado despercebido: - **A cor não pode ser o vermelho da identidade.** Vermelho é a cor que as peças já vestem: o fundo de `#btnHorde` é `--cor-vermelho` (#8b0000) e a moldura dele é esse mesmo vermelho escurecido, então o anel entrava vermelho sobre vermelho — medido, 3,0:1 de contraste, e a olho nu ele lia como a borda do botão ter engordado. No `#lojaComprarBtn` sem saldo é pior: a peça leva `filter: grayscale(1)` + `opacity: .45`, e o filtro come o **anel junto**, porque ele é pintado dentro do elemento filtrado — o vermelho saía como rgb(60,60,59) sobre rgb(21,21,20), 1,7:1, invisível. Branco atravessa os dois: 10:1 sobre o botão vermelho e 4,9:1 mesmo depois do grayscale e da opacidade, porque o que sobrevive a um filtro que apaga matiz é **luminância**. O anel é de duas cores, e a segunda não é inventada: é a **moldura da própria peça**, sempre um tom mais escuro que o miolo dela e já desenhada para separá-la do que está atrás. Claro por dentro, escuro por fora — é por isso que ele não depende de contraste com um fundo só. - **O recuo é -6px, e não -4px.** `outline-offset` empurra a *borda* do anel, e o anel é pintado para **fora** dela: a -4px ele ocupava de 2 a 4px para dentro, encostado na moldura de 2px da peça (as duas viravam um traço só de 4px) e, pior, dentro do que o `clip-path` come nos cantos — medido, o anel do `#btnHorde` sumia em três linhas de cada quina, o mesmo "quatro riscos soltos com um vão em cada canto" de uma `border`. A -6px ele ocupa de 4 a 6px: passa por dentro dos dois recortes (`--recorte-icone-pixel` come o quadrado de 4x4 de cada canto e `--recorte-botao-pixel` a escadinha de 4x8/8x4) e deixa 2px do material da peça entre a moldura dela e ele, que é o vão que faz os dois se lerem como duas linhas. - **A espessura é a mesma da moldura dos botões**: o realce é uma **segunda moldura** dentro da que a peça já tem, e não um traço de outro peso. O recuo continua negativo (o anel é desenhado **para dentro** da caixa) porque é a única posição que sobrevive ao `clip-path`: quase toda peça deste jogo é recortada em escadinha, e o recorte apaga tudo o que é pintado fora da silhueta — `outline`, `box-shadow` e até `filter: drop-shadow` (medido no navegador: o recorte é aplicado *depois* do filtro, então nem ele escapa). */ --cor-realce-foco: var(--cor-branco); --espessura-realce-foco: var(--espessura-borda-botao); --recuo-realce-foco: -6px; /* A quarta medida, e ela existe porque as três de cima foram calibradas numa peça só de material: `#btnHorde` e `#lojaComprarBtn` são **pedra chapada** a 4–6px de dentro, e ali a segunda cor do anel vem de graça (a moldura da própria peça, um degrau para fora). Onde o material daquela faixa não é chapado, o par de duas cores some junto com ela e o anel branco fica sozinho sobre o que houver: - o **quadrado de nível** tem a textura da arena repetida no miolo (`.horde-level-item::before`) — medido a 1440x900, a faixa vizinha do anel e o próprio anel deram rgb(14,13,12) contra rgb(13,12,11), **1,01:1**, porque a textura não só disputa com o anel: ela é um `::before` posicionado e o Chromium a pinta **por cima** do `outline`, que sobrevive só nas quinas que a escadinha do recorte dela abre; - a **carta** (escolha de item e mesa da Loja) tem o mesmo problema por outro caminho: ela é `position: relative` dentro do botão que recebe o foco, e descendente posicionado também é pintado por cima do `outline` — sobravam 17% do anel, nos pedaços em que a arte da carta é transparente; - a **medalha desbloqueada** tem fundo cheio na cor do tier, e nos tiers claros o branco encosta no branco: rgb(255,255,255) sobre rgb(213,219,225) na prata é **1,40:1**, 1,57:1 no diamante e 1,91:1 no ouro — o mesmo modo de falha do anel vermelho sobre o botão vermelho, com a cor trocada. A resposta é dar o par de duas cores **explicitamente**: uma faixa escura de 6px atrás do anel (2..8px da borda), com os 2px brancos no meio dela. Escuro/claro/escuro, e aí o realce para de depender do que a peça tem por baixo. A cor é a pedra quase preta que o jogo já usa como contorno de peça (`--cor-pedra-borda`), e não um preto novo. Ela é desenhada por `box-shadow: inset` (ou por camadas de `background-image` num `::after`), nunca por `box-shadow` externo: inset é pintado **dentro** da caixa e por isso sobrevive ao `clip-path`, que é a mesma razão de o recuo do anel ser negativo. */ --cor-realce-foco-fundo: var(--cor-pedra-borda); /* Painel "de pedra" (menu principal e ranking): bisel interno de 4px (luz em cima/à esquerda, sombra embaixo/à direita) + sombra dura deslocada. */ --sombra-pedra: 8px 8px 0 rgba(0, 0, 0, 0.4), inset 4px 4px 0 rgba(255, 255, 255, 0.05), inset -4px -4px 0 rgba(0, 0, 0, 0.55); /* Só o bisel de dentro, sem a sombra deslocada. Existe para quem recorta a silhueta com `clip-path` (ver .menu-painel): recortada, a sombra externa seria pintada fora da forma e sumiria inteira — lá ela volta como `filter: drop-shadow`, que acompanha o recorte. */ --sombra-pedra-interna: inset 4px 4px 0 rgba(255, 255, 255, 0.05), inset -4px -4px 0 rgba(0, 0, 0, 0.55); /* Mesma pedra em peça pequena (cronômetro, ícone de classe): bisel de 2px e sombra dura de 4px — o de 4px/8px pesaria mais que o próprio elemento. */ --sombra-pedra-pequena: 4px 4px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 0 rgba(0, 0, 0, 0.55); /* Só o bisel da peça pequena, sem a sombra deslocada — o irmão de --sombra-pedra-interna para quem recorta a silhueta com `clip-path` na escala de 2px (a linha da lista do Monstruário). */ --sombra-pedra-pequena-interna: inset 2px 2px 0 rgba(255, 255, 255, 0.05), inset -2px -2px 0 rgba(0, 0, 0, 0.55); /* Bisel invertido (sombra em cima/à esquerda): o que usa isso é buraco cavado na pedra, não bloco em relevo — trilho da barra de cooldown. */ --sombra-pedra-afundada: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.04); } @supports (height: 100dvh) { :root { --altura-tela: 100dvh; } } /* ===== Linha de lista com contorno (material de apoio) ===== As linhas de lista que se **marcam** com uma cor: a selecionada do Monstruário (`.monstruario-row`, vermelho de seleção) e a do próprio jogador no placar do Sem fim (`#hordeEndlessList li`, ouro de "você"). O contorno não é `border` nem anel `box-shadow: inset`: recortadas por `--recorte-icone-pixel`, as duas somem na diagonal dos cantos e a marcação sai como quatro riscos soltos com um vão em cada quina (o mesmo motivo de `.campo-pixel` e de `.tecla`). Ele é `background-image`, três camadas: o miolo em duas faixas cruzadas e, no fundo, a cor do contorno na caixa inteira. O contorno é o que **sobra** depois do miolo — 2px em volta, mais o degrau de 4px de cada canto, acompanhando o recorte. Estas duas linhas são as únicas peças do menu **sem** o bisel de pedra (`--sombra-pedra-pequena-interna`), que elas tiveram: `box-shadow` é pintado por cima de todo o `background`, então o bisel atravessava o contorno e escurecia justamente os 2px da direita e de baixo — a borda saía de duas cores. Empurrado para dentro do contorno ele ficava irregular em volta do degrau dos cantos, que é o que uma faixa reta não sabe acompanhar. Numa linha que já tem contorno de identidade, o relevo estava cobrando mais do que entregava. Quem usa isso declara duas variáveis e nada mais: `--cor-fundo-linha` (o miolo, que o hover mexe) e `--cor-contorno-linha` (o contorno, que é a cor do miolo quando a linha não está marcada). Assim "marcada" é uma troca de cor só, sem nada mudar de lugar. Peça de 12px para cima nas duas medidas; abaixo disso as faixas se cruzam. A receita é uma regra e não um token de `:root` porque um `var()` aninhado dentro de um token é resolvido **no elemento que declara o token** — em `:root` as duas cores da linha não existem, e a lista inteira sairia inválida. */ .monstruario-row, #hordeEndlessList li:not(.skeleton-row), #hordeCampanhaList li:not(.skeleton-row), #nivelRankingList li:not(.skeleton-row) { background-image: linear-gradient(var(--cor-fundo-linha), var(--cor-fundo-linha)), linear-gradient(var(--cor-fundo-linha), var(--cor-fundo-linha)), linear-gradient(var(--cor-contorno-linha), var(--cor-contorno-linha)); background-size: calc(100% - 4px) calc(100% - 12px), calc(100% - 12px) calc(100% - 4px), 100% 100%; background-position: 2px 6px, 6px 2px, 0 0; background-repeat: no-repeat; } /* ===== Raridade de item (classe de apoio) ===== Uma classe por raridade, aplicada pelo JS (`classeDeRaridade` em public/js/raridades.js) nos três lugares que mostram um item: o cartão da tela de escolha do fim da onda, a linha do Relicário e o `
  • ` do inventário do HUD. Ela não pinta nada sozinha — só traz as duas variáveis daquela raridade para o elemento, e quem decide como usá-las é cada componente (o Relicário e o cartão da escolha têm espaço para um fundo cheio, o HUD é uma caixa do tamanho do ícone sobre a arena). É classe e não `style="--cor-raridade: ..."` inline pelo mesmo motivo de `--class-color` ser o contrário: a cor de classe vem de shared/classes.js e só o JS a conhece, enquanto a raridade é um conjunto fechado de quatro valores que o CSS pode declarar de uma vez. */ .raridade-comum { --cor-raridade: var(--cor-raridade-comum); --cor-raridade-veu: var(--cor-raridade-comum-veu); } .raridade-raro { --cor-raridade: var(--cor-raridade-raro); --cor-raridade-veu: var(--cor-raridade-raro-veu); } .raridade-quebra-jogo { --cor-raridade: var(--cor-raridade-quebra-jogo); --cor-raridade-veu: var(--cor-raridade-quebra-jogo-veu); } .raridade-maldito { --cor-raridade: var(--cor-raridade-maldito); --cor-raridade-veu: var(--cor-raridade-maldito-veu); } /* A classe que leva a cor da família ao selo, no mesmo molde de `.raridade-*` acima (ver `classeDeFamilia` em raridades.js). Vale nas duas telas que mostram o selo, e é por isso que ela não é aninhada em nenhuma das duas. */ .familia-cano { --cor-familia: var(--cor-familia-cano); } .familia-municao { --cor-familia: var(--cor-familia-municao); } .familia-bocal { --cor-familia: var(--cor-familia-bocal); } .familia-leque { --cor-familia: var(--cor-familia-leque); } /* ===== Tela girada (modo touch em retrato) ===== Gira o app inteiro 90° no sentido do relógio em vez de pedir para o jogador girar o aparelho: com a tela física em retrato, o conteúdo é desenhado deitado, ocupando a tela toda. A classe é aplicada por public/js/orientation.js, que também é quem decide quando isso vale (só em modo touch, e só enquanto a viewport estiver em retrato — se a trava de orientação do sistema funcionar, a viewport já vem deitada e nada disto entra). Os eixos do conteúdo trocam junto com a rotação, então as duas variáveis de tela trocam de valor aqui — é isso que faz todo o resto do arquivo (alturas de painel, `max-height` de modal, tamanhos de fonte relativos) continuar valendo sem uma segunda cópia de cada regra. `translateY(-100%)` depois do `rotate` é o que traz o conteúdo de volta pra dentro da tela: girando em volta do canto superior esquerdo, o conteúdo sairia todo para a esquerda da viewport. A ordem importa (a lista é aplicada da direita para a esquerda). E o `transform` no `` faz dele o bloco contentor dos descendentes `position: fixed` — o que é justamente o desejado, porque assim overlays, modais e botões flutuantes giram junto com o resto (ver o posicionamento em coordenada de viewport de talentTreeUi.js e dicaDeMedalha.js, que depende disso). */ body.tela-girada { --largura-tela: 100vh; --altura-tela: 100vw; position: fixed; top: 0; left: 0; width: var(--largura-tela); height: var(--altura-tela); transform-origin: 0 0; transform: rotate(90deg) translateY(-100%); /* Desliga o gesto de rolagem/zoom nativo enquanto girado, porque ele não funciona aqui: testado em Chrome (com janela real, não só headless), um contêiner rolável dentro de um elemento girado 90° por `transform` não rola por toque em nenhuma direção física, embora role normalmente sem a rotação. Quem move o scroll nesse modo é public/js/touchScroll.js — e desligar o nativo aqui garante que o comportamento seja o mesmo em qualquer navegador, sem rolar duas vezes onde o nativo funcionar. */ touch-action: none; } @supports (height: 100dvh) { body.tela-girada { --largura-tela: 100dvh; } } /* O flex centralizado é só do body. O html fica um bloco comum de altura 100% — é o overflow dele que a viewport usa para rolar, então ele não pode centralizar nem prender o conteúdo (era o que impedia o menu mais alto que a tela de ser rolado). */ html { height: 100%; background: var(--cor-fundo); } body { margin: 0; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--cor-fundo) url('../assets/backgrounds/dungeon_brick_wall_grey.png') repeat; /* Paralaxe da tela inicial (public/js/parallax.js): desloca só a camada da textura (segunda posição) pelo mouse via variáveis CSS; a camada do gradiente escuro (primeira posição) fica parada em 0 0. Sem transição de background-position durante a partida, porque `body.game-active` nunca tem essas variáveis atualizadas — o fundo já fica parado. */ background-position: 0 0, var(--parallax-x, 0px) var(--parallax-y, 0px); display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: 'Chakra Petch', sans-serif; color: var(--cor-texto); overflow: hidden; user-select: none; -webkit-user-select: none; } input, textarea { user-select: text; -webkit-user-select: text; } /* A porta de entrada (public/js/splash.js): a tela que cobre tudo enquanto o jogo carrega, sobre um fundo liso mais escuro que o do menu (--cor-barra-fundo, o mais escuro da paleta e praticamente preto) — sem textura/paralaxe, ela vem antes até do menu carregar. `position: fixed` porque nasce como primeiro filho do body, antes do `display: flex` dele centralizar qualquer coisa. **Tudo o que ela desenha é CSS**, e nenhum pedaço depende de JS para aparecer: sob rede lenta o módulo que decide a saída só é avaliado lá pelo décimo segundo, e um herói montado por JS ficaria ausente justamente durante a espera que ele existe para cobrir. O JS só acende as casas da barra e manda a tela sair. */ #splashScreen { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; /* A escala do herói mora aqui, no pai, porque ela é a **composição** da tela e não propriedade de uma peça só — e o respiro sai dela (`2px * escala`), em vez de ser um terceiro número a manter em dia: herói maior, respiro maior, na mesma proporção. */ --splash-escala: 6; gap: calc(2px * var(--splash-escala)); overflow: hidden; background: var(--cor-barra-fundo); } /* Os degraus da escala dependem da **altura** tanto quanto da largura: numa faixa curta e larga o herói na escala grande empurraria a barra para fora do quadro. Cada degrau só entra quando herói + barra + respiro cabem na janela. Celular **em pé** fica no degrau de baixo de propósito, mesmo sobrando altura: em modo touch o jogo inteiro é girado 90 graus por CSS (`body.tela-girada`, ver orientation.js), e quando essa classe entra — o que pode acontecer com a porta ainda na tela, porque quem a põe é o boot — a altura útil passa a ser a **largura** da janela. Um degrau escolhido pela altura em pé estouraria o quadro deitado. */ @media (min-width: 900px) and (min-height: 400px) { #splashScreen { --splash-escala: 8; } } @media (min-width: 1200px) and (min-height: 700px) { #splashScreen { --splash-escala: 12; } } /* Os **dois atos**. Enquanto carrega (a classe já nasce no HTML, porque o JS que a governa só é avaliado segundos depois numa rede lenta) só existem o herói e a barra; quando o jogo fica pronto, splash.js tira a classe e o que fica na tela é a assinatura do estúdio, sozinha. `display: none` e não opacidade: o que sai do ato não pode ocupar espaço, senão a peça que ficou deixa de estar centralizada. */ #splashScreen.carregando #splashLogo, #splashScreen:not(.carregando) #splashCorredor, #splashScreen:not(.carregando) #splashBarra { display: none; } #splashLogo { max-width: min(46vw, 320px); max-height: min(30vh, 200px); image-rendering: pixelated; animation: splash-entra 0.3s steps(3, end) 1; } /* O atirador correndo: a tira `walk.png` de 6 quadros de 100x100 andando por `background-position` em `steps(6)` — os mesmos 90ms por quadro que characterSprites.js usa na arena (6 x 90 = 540ms de ciclo), para o herói da abertura correr na cadência do herói do jogo. **A janela é o corpo, não o quadro.** O desenho do Little Mage ocupa só x 44..56 / y 44..59 dentro do quadro de 100x100 — 13 por 16 pixels, medidos no PNG, com o resto transparente. Dimensionar pela caixa do quadro é o erro que deixou o herói lendo como detalhe numa tela de 1080p: a caixa era grande e o corpo dentro dela, pequeno. A janela abaixo é o corpo com 2px de folga de cada lado (x 42..58, y 42..61 — 16 por 20), então a escala multiplica **o que se vê**. Mexer nas medidas do corpo é mexer nos quatro números de uma vez: o recorte, a caixa e os dois extremos do keyframe. A escala é **inteira** (regra de pixel art), em três degraus — 6, 8 e 12 —. O degrau de baixo não desce a 4 porque numa tela pequena o herói **é** a tela: metade do tamanho num celular deitado de 390px de altura vira um detalhe, e não o assunto. A conta é a proporção da janela, não o número absoluto — e tudo é `calc()` sobre ela, então trocar o tamanho é trocar um número. */ #splashCorredor { width: calc(16px * var(--splash-escala)); height: calc(20px * var(--splash-escala)); background-image: url('../assets/sprites/atirador/walk.png'); background-repeat: no-repeat; background-size: calc(600px * var(--splash-escala)) calc(100px * var(--splash-escala)); background-position: calc(-42px * var(--splash-escala)) calc(-42px * var(--splash-escala)); image-rendering: pixelated; animation: splash-corre 0.54s steps(6) infinite; } @keyframes splash-corre { from { background-position-x: calc(-42px * var(--splash-escala)); } to { background-position-x: calc(-642px * var(--splash-escala)); } } /* A barra de progresso: uma casa por frente de carregamento (a capa, o jogo, as tiras — ver public/js/carregamentoDoBoot.js), acesa quando aquela frente fecha. São casas discretas, e não uma barra que enche: as frentes são três coisas que acontecem ou não, e uma barra contínua teria de inventar um progresso que ninguém mede. Sem texto de propósito — a tela aparece antes de o dicionário do idioma carregar, e três casas dizem o mesmo nos dois idiomas. As casas são criadas por splash.js. */ #splashBarra { display: flex; gap: 8px; min-height: 16px; } .splash-casa { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--cor-borda); background: transparent; } .splash-casa.acesa { border-color: var(--cor-ouro-suave); background: var(--cor-ouro-suave); } /* Entrada em três tamanhos inteiros, mesma receita de gameover-impacto/ conquista-surge: nada de escala interpolada. */ @keyframes splash-entra { 0% { opacity: 0; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } /* Saída seca em degrau (splash.js poe .saindo e remove o elemento ao fim da animação) — sem esmaecer contínuo, mesma regra do resto da interface. */ #splashScreen.saindo { animation: splash-sai 0.26s steps(2, end) 1 forwards; } @keyframes splash-sai { 0% { opacity: 1; } 100% { opacity: 0; } } /* Movimento reduzido: sai a entrada da assinatura, que é **deslocamento** (ela cresce de 0,7 a 1). O herói correndo fica: ele não sai do lugar — é um ciclo de pose no mesmo ponto —, e é a única coisa na tela que diz que o jogo está vindo e não travado. É a mesma régua do brilho do botão da Loja mais abaixo neste arquivo: fica o que é informação, sai o que é deslocamento. */ @media (prefers-reduced-motion: reduce) { #splashLogo { animation: none; } } /* Enquanto a assinatura está na tela, a barra superior não aparece (e com ela os controles de som e de música, que moram lá dentro): a abertura é uma tela só, sem interface por cima. Seletor de irmão em vez de classe no body porque splash.js remove o elemento ao fim da saída — a regra para de valer sozinha, sem estado novo pra sincronizar. */ #splashScreen ~ #menuTopbar { display: none; } /* Botões não herdam a fonte do body por padrão (fonte de UI do navegador) — precisa declarar explicitamente. */ button { font-family: 'Chakra Petch', sans-serif; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } /* `[aria-disabled="true"]` sai junto de `:disabled`: o jogo usa de propósito o botão *apagado mas clicável* onde o clique é o que explica a recusa (o nó de talento bloqueado, que precisa continuar alcançável pelo controle), e um botão que não faz nada não pode se levantar da mesa ao passar o cursor. **Esta é a SÉTIMA lista de `:not()` do arquivo**, e a única que não começa em `#menu` — as outras seis são as de `#menu button:not(...)`. Uma classe nova que precise ficar fora do "levantar" tem de entrar aqui **também**, e é fácil não perceber: `.config-aba` e `.config-opcao` entraram nas seis e faltavam nesta, então as abas da tela de configurações levantavam 2px e escalavam 1,03 dentro de uma modal com `overflow: hidden` — saíam cortadas em cima e embaixo a cada passagem do cursor. É o mesmo defeito de `.menu-voltar`, que está aqui pelo mesmo motivo. Aba, opção e interruptor fazem hover de **cor**, nunca de geometria. */ button:not(:disabled):not([aria-disabled="true"]):not(.link-button):not(.ranking-nome):not(.resumo-item-atalho):not(.password-toggle-btn):not(.horde-level-item):not(.monstruario-row):not(.item-choice-botao):not(.menu-voltar):not(.sem-moedas):not(.config-aba):not(.config-opcao):hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); box-shadow: var(--sombra-flutuante); } button:not(:disabled):not([aria-disabled="true"]):not(.link-button):not(.ranking-nome):not(.resumo-item-atalho):not(.password-toggle-btn):not(.horde-level-item):not(.monstruario-row):not(.item-choice-botao):not(.menu-voltar):not(.sem-moedas):not(.config-aba):not(.config-opcao):active { transform: translateY(0) scale(0.98); filter: brightness(0.97); box-shadow: none; } /* .password-toggle-btn fica de fora da regra genérica acima de propósito: ela sobrescreve `transform` inteiro, e ele já usa `transform: translateY(-50%)` só para ficar centralizado verticalmente na posição absoluta — combinar os dois fazia o botão "pular" da posição toda vez que o mouse passava por cima ou clicava. Hover/active nele só mudam brilho/sombra/cor, sem mexer em posição. */ /* Cinzel é a fonte dos títulos (painéis, modais, fim de jogo) — Metal Mania é do nome do jogo (#menuTitle) e do resultado da partida (#gameOverMessage, ver o comentário lá), e de mais nada: ela vira ilegível em texto corrido ou números pequenos (HUD, cronômetro). */ h1, h2 { font-family: 'Cinzel', serif; letter-spacing: 0.5px; } #menuTitle { font-family: 'Metal Mania', cursive; } /* Canvas do rastro de fogo do cursor (public/js/fireCursor.js): fixo por cima de tudo e sem capturar clique/hover, porque é puramente decorativo e fica em cima de botões e modais da tela inicial. Some sozinho durante a partida (o próprio módulo checa `body.game-active` a cada frame). */ #fireCursorCanvas { position: fixed; inset: 0; width: 100%; height: 100%; background: transparent; /* sobrescreve a regra genérica `canvas { background: var(--cor-superficie-elevada) }` mais abaixo */ pointer-events: none; z-index: 999; } * { scrollbar-width: thin; scrollbar-color: var(--cor-cinza-medio) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--cor-cinza-medio); border-radius: 0; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--cor-cinza-claro); } *::-webkit-scrollbar-corner { background: transparent; } /* A tela inicial nunca rola verticalmente (ver .menu-view): #menu ocupa a altura inteira da viewport e cada painel interno (ranking, partidas ao vivo) tem seu próprio scroll quando o conteúdo não cabe. A partida também não precisa de nada aqui: gameScale.js já ajusta o #game-wrap para caber na tela. */ body.game-active { overflow: hidden; } /* ----- Skeleton de loading (tela inicial) ----- Padrão: elemento carrega dado assíncrono (sessão, contagem online, ranking) e mostra esse esqueleto animado no lugar do conteúdo real até a primeira resposta chegar, sem alterar a estrutura da página — o JS só alterna a classe/conteúdo, os elementos e o layout continuam os mesmos. */ /* Exceção deliberada à regra de `steps()` do resto da interface (ver "Pixel art no CSS"): aqui o brilho varre a linha de forma contínua, com gradiente suave e timing `linear`. Em passos, o skeleton parecia um fliperama travado — a impressão era de jogo congelado, não de conteúdo carregando. Movimento fluido é o que comunica "está vindo". */ @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .skeleton-loading { position: relative; color: transparent !important; pointer-events: none; } .skeleton-loading::after { content: ""; position: absolute; inset: 0; border-radius: 0; background: linear-gradient(90deg, var(--cor-superficie-alta) 0%, var(--cor-superficie-hover) 50%, var(--cor-superficie-alta) 100%); background-size: 300% 100%; animation: skeleton-shimmer 1.4s linear infinite; } .skeleton-row { height: 14px; border-radius: 0; background: linear-gradient(90deg, var(--cor-superficie-alta) 0%, var(--cor-superficie-hover) 50%, var(--cor-superficie-alta) 100%); background-size: 300% 100%; animation: skeleton-shimmer 1.4s linear infinite; } /* ----- Animações de entrada ----- Padrão para qualquer elemento que "aparece" na tela (menu, modais, overlays de partida, HUD, listas): fade leve + pequeno movimento/escala em vez de surgir seco. Curto o bastante (150–400ms) pra não atrasar a resposta ao clique. Como são `animation` (não `transition`), reaparecem sozinhos toda vez que o elemento volta de `display: none` pra visível — não precisa de nenhum gatilho extra em JS. */ @keyframes entrada-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes entrada-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } } /* Reverso de entrada-pop/overlay-fade, para o fechar da modal não ser um corte seco (display: none na hora do clique). Quem fecha (JS) adiciona `.closing`, espera o `animationend` do overlay e só então esconde o elemento — ver closeBotClassSelect/closeOnlineClassSelect/fechar() em authScreens.js e profile.js. */ @keyframes saida-pop { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.92); } } @keyframes overlay-fade-out { from { opacity: 1; } to { opacity: 0; } } .modal.closing { animation: saida-pop 0.15s ease forwards; } #authOverlay.visible.closing, #profileOverlay.visible.closing, #pauseOverlay.visible.closing, #configuracoesOverlay.visible.closing, #creditsOverlay.visible.closing, #changelogOverlay.visible.closing { animation: overlay-fade-out 0.15s ease forwards; } /* Botão de menu da partida (engrenagem): flutua sobre a página inteira, não sobre a arena (`position: fixed`, espelhado no canto esquerdo do botão de configurações da barra). Abre a modal de pausa, ver pauseMenu.js. */ #pauseMenuBtn { position: fixed; top: 16px; left: 16px; z-index: 5; } /* ----- Botão de configurações ----- Um botão só, no canto direito da barra superior (#menuTopbarDir), junto do botão de conta: ele abre a **tela de configurações** (#configuracoesOverlay, ver telaDeConfiguracoes.js), que é a porta única de toda preferência do jogador. No lugar dele já houve um widget de som (#soundSettings, só para os efeitos) e depois um player de música com os dois volumes dentro (#musicPlayer/#musicPanel); os dois saíram pelo mesmo motivo, um degrau acima do outro — eram portas a mais para uma ideia que hoje tem tela própria, e cobriam só áudio. Ele não existe com a partida na tela, porque a barra superior inteira some ali (`body.game-active #menuTopbar`); durante a partida a mesma tela é montada dentro do menu da partida. */ /* ----- A moldura dos botões de ícone ----- Botões quadrados com fundo mais claro que as superfícies normais, pra destacar sobre qualquer fundo. #pauseMenuBtn entra na mesma regra: é o próprio botão flutuante, e não um botão dentro de um wrapper, mas tem exatamente o mesmo formato. O botão de voltar da tela inicial (#btnMenuViewHome, ver menuViews.js) e o de modo debug também: são a mesma peça, na mesma barra, e é de propósito que se pareçam — só a largura fixa é sobrescrita lá embaixo, porque eles levam rótulo ao lado do ícone. Eram a última peça da interface com `border-radius` e `backdrop-filter: blur()`, que é exatamente o que o resto da tela deixou de fazer. Ficarem de fora da moldura de fliperama de dois degraus (ver o bloco "Botões em pixel art" no fim do arquivo) nunca implicou canto redondo: implicava só que dois degraus de 4px num quadrado de 40px comem o botão inteiro. Um degrau (--recorte-icone-pixel) dá a mesma silhueta em escadinha na escala certa. O contorno é `background-image`, e não `border`: recortada pelo `clip-path`, uma borda some justamente na diagonal dos cantos — é o mesmo motivo pelo qual os campos de texto desenham a moldura assim (ver `.campo-pixel`). São três camadas: a de baixo pinta a cor do contorno na caixa inteira, e as duas de cima repintam o miolo recuado por 2px — a faixa larga e a faixa alta, que juntas deixam o degrau de 4px em cada canto de dentro também. Assim "aceso" continua sendo uma troca de cor só (--cor-borda-campo), como era com `border-color`. O nó da árvore de talentos (.talent-no) é esta mesma peça na mesma escala, mas **não** entra nesta regra: lá a silhueta é desenhada por duas camadas a mais em vez de recortada por `clip-path`, porque o tracejado do fecho e o anel da seleção são pintados fora dela e o recorte os apagaria (ver ".talent-no"). As alternativas de desenho de cada ícone destes botões, e o porquê de cada escolha, estão em docs/sugestoes-icones-botoes.html. */ #btnIdioma, #btnConfiguracoes, #menuTopbarLinha .menu-voltar, #pauseMenuBtn, .tela-config .volume-control button, #accountFabBtn, .modal-close, .modal-close-flutuante { --cor-borda-campo: var(--cor-borda); --cor-fundo-campo: var(--cor-botao-flutuante-fundo); border: none; border-radius: 0; clip-path: var(--recorte-icone-pixel); background-color: transparent; background-image: linear-gradient(var(--cor-fundo-campo), var(--cor-fundo-campo)), linear-gradient(var(--cor-fundo-campo), var(--cor-fundo-campo)), linear-gradient(var(--cor-borda-campo), var(--cor-borda-campo)); background-size: calc(100% - 4px) calc(100% - 12px), calc(100% - 12px) calc(100% - 4px), 100% 100%; background-position: 2px 6px, 6px 2px, 0 0; background-repeat: no-repeat; color: var(--cor-texto); display: flex; align-items: center; justify-content: center; cursor: pointer; } #btnIdioma, #btnConfiguracoes, #menuTopbarLinha .menu-voltar, #pauseMenuBtn, .tela-config .volume-control button { width: 40px; height: 40px; } #btnIdioma:hover, #btnConfiguracoes:hover, #menuTopbarLinha .menu-voltar:hover, #pauseMenuBtn:hover, .tela-config .volume-control button:hover { --cor-fundo-campo: var(--cor-botao-flutuante-fundo-hover); } /* O botão que mora **na barra** usa os tons da barra, e não os do botão flutuante: os `--cor-botao-flutuante-*` da regra compartilhada valem para peça solta sobre a cena, e aqui ele está lado a lado com a conta. */ #btnConfiguracoes, #btnIdioma { --cor-fundo-campo: var(--cor-barra-botao); } #btnConfiguracoes:hover, #btnIdioma:hover { --cor-fundo-campo: var(--cor-barra-botao-hover); } /* A sigla do atalho de idioma (ver public/js/atalhoDeIdioma.js). Ela é **texto de interface**, e não desenho no canvas: são duas letras, e um glifo de bandeira (ou um SVG por idioma) seria arte nova para dizer o que "PT"/"EN" já diz. A fonte é a dos títulos, como a do botão de voltar ao lado: os dois são a mesma peça de barra com texto dentro. Canto reto e sombra sólida deslocada vêm da moldura compartilhada — nenhuma curva nova entrou. `letter-spacing` de 1px porque em 13px as duas maiúsculas coladas lêem como uma sílaba só. */ #btnIdiomaSigla { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 1; text-shadow: 1px 1px 0 var(--cor-pedra-borda); } /* `display: flex` da moldura compartilhada ganha do `display: none` que o navegador dá ao atributo `hidden`: sem esta linha o atalho ficaria na barra durante a partida e na sala de espera, onde a recarga que ele pede derrubaria a conexão. É a mesma armadilha do `[hidden]` do botão de voltar. */ #btnIdioma[hidden] { display: none; } /* Só existe durante uma partida — `body.game-active` é a mesma classe que showGame()/showMenu() (menu.js) já alternam para esconder o menu, não precisa de estado novo. Depois do `display: flex` da regra compartilhada acima (mesma especificidade, decidido pela ordem no arquivo). */ #pauseMenuBtn { display: none; } body.game-active #pauseMenuBtn { display: flex; } .sound-settings-row { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } /* A linha tem `display: flex` próprio, então o `hidden` sozinho não bastaria para escondê-la. Hoje quem decide se ela existe é a montagem da tela (configuracoesVisiveis.js) e não este atributo, mas a regra fica: ela é o que faz `hidden` significar "some" em qualquer linha da família. */ .sound-settings-row[hidden] { display: none; } .sound-settings-row label { color: var(--cor-texto-suave); } .sound-settings-row input[type="range"] { width: 100%; accent-color: var(--cor-vermelho); } /* Botão de mudo sempre à esquerda do slider de volume — vale tanto para efeitos sonoros quanto para música. */ .volume-control { display: flex; align-items: center; gap: 8px; } /* Um seletor **por hospedeiro** seria o erro aqui: a tela de configurações é montada em dois (a modal do menu inicial e o menu da partida), e um terceiro id nesta lista viria junto com o quarto hospedeiro. O escopo é a classe da própria tela, e ela aparece nas duas listas de propósito: é lá em cima que este botão ganha borda, fundo e centralização (é a mesma peça dos botões de ícone), e aqui que ele encolhe para 28px. */ .tela-config .volume-control button { flex: none; width: 28px; height: 28px; } /* No dedo o botão de mudo é o **único** alvo da tela abaixo do mínimo de 44px: os 28px são a medida de sempre desta peça e servem ao ponteiro, mas no celular ela fica encostada no slider do mesmo volume e errar o toque é arrastar a barra sem querer. Mesmo desvio que `.modal-close` já faz em `touch-mode`. Ele continua com o desenho de 28px — o que cresce é a caixa de toque, e a moldura acompanha porque é `background-size` em porcentagem. */ body.touch-mode .tela-config .volume-control button { width: 44px; height: 44px; } /* O "x" de mudo é por classe, e não um id por botão: os mesmos dois controles aparecem também na modal de pausa (ver pauseMenu.js). */ .icone-mudo { display: none; } button.muted .icone-mudo { display: block; } /* A palavra ao lado do botão de vibração (soundSettings.js). Os dois mudos não precisam dela — o slider ao lado deles já diz o que o botão silencia —, e a vibração não tem slider nenhum: sozinho, o ícone seria um desenho pedindo para ser adivinhado. Ela é legenda, não controle: mesma cor do rótulo da linha, e nada de fundo, borda ou alvo de clique. */ .opcao-estado { color: var(--cor-texto-suave); font-size: 12px; } /* Tela inicial: sete visões que ocupam a tela inteira, uma por vez (início = logo + a porta do modo; Defesa da base = navegador de salas; Talentos = a árvore; Conquistas = as medalhas; Monstruário = ficha dos inimigos da horda; Relicário = catálogo dos itens dela; ranking = Sem fim), trocadas pelas estações do acampamento — nunca por scroll (ver public/js/menuViews.js e a nota em `body:not(.game-active)` acima). */ #menu { position: relative; z-index: 1; width: 100%; height: var(--altura-tela); overflow: hidden; box-sizing: border-box; /* A barra superior é `position: fixed` e não empurraria nada sozinha: é este `padding-top` que reserva a faixa dela e mantém todas as visões do menu inteiras abaixo da barra, em vez de passarem por baixo dela. */ padding-top: var(--altura-topbar); } /* A visão inativa sai do fluxo com `display: none`, e não com opacidade ou posição fora da tela: é isso que faz o poll do ranking parar sozinho (IntersectionObserver no próprio painel, ver ranking.js) sem nenhuma checagem a mais aqui. */ .menu-view { display: none; width: 100%; height: 100%; box-sizing: border-box; /* Simétrico: os 64px que sobravam à direita eram o corredor dos controles de áudio, que flutuavam naquele canto — hoje eles moram dentro da barra superior (ver #menuTopbarDir). */ padding: 16px 24px; align-items: center; justify-content: center; /* `safe` desliga a centralização quando o conteúdo é maior que a visão: centralizado, o excesso sai pelos *dois* lados e o pedaço de cima fica inalcançável mesmo com o `overflow` abaixo (o scroll não anda para trás do início). Navegador que não conhece a palavra descarta esta linha e fica com o `center` acima. */ justify-content: safe center; gap: 24px; /* Rede de segurança: numa janela baixa o suficiente para o conteúdo não caber em pé, a visão rola por dentro dela mesma em vez de cortar o conteúdo — a página nunca rola. Em qualquer tamanho normal de tela isso nunca ativa. */ overflow-y: auto; } .menu-view.menu-view-ativa { display: flex; } /* A tela inicial é uma coluna centrada: logo em cima, os dois modos lado a lado embaixo dele e as duas ações secundárias fechando. Lado a lado (logo à esquerda, botões à direita) o logo dividia a largura com o índice e ficava pequeno — sendo ele a primeira coisa que a tela tem a dizer, a largura inteira é dele. As outras visões seguem lado a lado, que é o padrão de .menu-view. */ #menuViewHome { flex-direction: column; gap: clamp(16px, calc(0.03 * var(--altura-tela)), 40px); /* **A régua da capa.** O logo e a linha de botões são *uma* peça, e por isso saem do mesmo número: `--capa-logo` é o tamanho do logo (cada faixa de tela o redefine logo abaixo, e é só isso que elas redefinem), e todo o resto — a largura das duas linhas de botão, a fonte e o respiro interno deles — é uma fração dele. Antes as duas linhas tinham **460px fixos** enquanto o logo escalava com a tela, e a proporção entre os dois virava qualquer coisa: num celular deitado (780x360) o logo dava 162px de largura e a linha continuava com 460 — o botão "Jogar" era quase três vezes o nome do jogo. Numa tela de 420px a mesma linha simplesmente **saía pelos dois lados** da tela. O teto de 460px e a fonte de 20px são os de sempre: numa tela grande o logo bate no teto de 200px, `2.6 * 200` passa de 460 e tudo fica onde estava. O piso de 200px é o menor em que "Patch beta 0.4.1" cabe numa linha só — ele era 300 enquanto "Patch" e "Créditos" dividiam a linha lado a lado, e caiu quando os três botões passaram a ser empilhados (ver #menuTitleExtras). */ --capa-logo: clamp(44px, min(calc(0.13 * var(--largura-tela)), calc(0.21 * var(--altura-tela))), 200px); --capa-linha: min( calc(var(--largura-tela) - 40px), clamp(200px, calc(2.6 * var(--capa-logo)), 460px)); } /* Fora da faixa estreita a tela inicial segue o enquadramento da ilustração (#cenaInicial): logo e botões numa coluna encostada à esquerda, por cima do céu, e o centro e a direita da tela ficam para o mago verde e o demônio. Centralizada, a coluna cairia bem em cima do rosto do mago. E encostada no topo, e não no meio da altura: a metade de baixo da esquerda é dos três magos, e no meio os botões caíam em cima deles. A coluna encosta à esquerda, mas logo e botões ficam centrados **entre si**: é uma grade de uma coluna só, da largura da peça mais larga (o logo numa tela grande, a linha de botões numa baixa), e cada peça centrada nela. Em flex, cada uma encostava à esquerda na própria largura, e o eixo dos botões ficava deslocado do eixo do logo. `#menuBody` encolhe até o conteúdo para não esticar a coluna com a largura de 640px dele. */ body:not(.tela-estreita) #menuViewHome.menu-view-ativa { display: grid; grid-template-columns: max-content; align-content: start; justify-content: start; justify-items: center; padding-top: clamp(16px, calc(0.05 * var(--altura-tela)), 56px); padding-left: clamp(24px, calc(0.05 * var(--largura-tela)), 110px); } body:not(.tela-estreita) #menuBody { width: auto; } /* ===== O acampamento (#menuViewAcampamento) ===== A visão entre a capa e as telas (ver public/js/acampamento.js). O palco é a cena em pixel art: um canvas **lógico** de 180 px de altura, ampliado por um fator inteiro (o maior que cabe) e centrado; as oito estações são `