/* ===== 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; /* Largura da barra lateral da tela inicial (#menuSidebar). É variável e não valor fixo porque duas regras diferentes precisam do *mesmo* número: a largura da própria barra e o `padding-left` de #menu, que é o que impede qualquer painel do menu de passar por baixo dela. Em tela pequena a barra vira só-ícone e o valor encolhe junto (ver body.touch-mode/ body.tela-estreita mais abaixo) — as duas regras acompanham sozinhas. */ --largura-sidebar: 188px; /* 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); --cor-veu-endgame: rgba(0, 0, 0, 0.2); /* 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-forte-hover: #222; --cor-superficie-elevada: #3a3a3a; --cor-superficie-hover: #3f3f3f; --cor-superficie-hover-alta: #4a4a4a; --cor-modal-fundo: #100f0e; /* Barra lateral da tela inicial: fundo quase preto e botões um degrau acima dele. São tons próprios, e não os `--cor-botao-flutuante-*` dos controles do canto direito, porque aqui a peça não flutua sobre a cena — é uma coluna sólida, e os botões precisam se destacar *dentro* dela em vez de sobre o fundo do jogo. */ --cor-sidebar-fundo: #050505; --cor-sidebar-botao: #121010; --cor-sidebar-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; /* Mesma pedra puxada para o quente: fundo do cartão do jogador local no HUD da Defesa da base, para ele se separar dos companheiros. */ --cor-painel-pedra-veu-local: #1d1710; --cor-pedra-borda: #100f0e; /* 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; --cor-ouro-suave: #f4c542; --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; --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); /* Texto por cima de uma cor de tier: as quatro 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); /* 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; --cor-hud-escudo-texto: #2885c7; /* 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; /* 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). */ --cor-botao-flutuante-fundo: rgba(58, 58, 58, 0.85); --cor-botao-flutuante-fundo-hover: rgba(78, 78, 78, 0.92); /* ===== 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 ); /* 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); /* 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); /* 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); /* 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; } } /* ===== 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); } /* ===== 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 a conversão de coordenada em dropdownPosition.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; } /* Assinatura de abertura (public/js/splash.js): cobre a tela por 2s antes de qualquer outra coisa, sobre um fundo liso mais escuro que o do menu (--cor-sidebar-fundo, o mais escuro da paleta) — sem textura/paralaxe, a assinatura vem antes até do menu carregar. `position: fixed` porque nasce como primeiro filho do body, antes do `display: flex` dele centralizar qualquer coisa. */ #splashScreen { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: var(--cor-sidebar-fundo); } #splashLogo { max-width: min(60vw, 420px); max-height: min(60vh, 420px); image-rendering: pixelated; animation: splash-entra 0.3s steps(3, end) 1; } /* 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; } } /* Enquanto a assinatura está na tela, os botões flutuantes de som e de música não aparecem: 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 ~ #soundSettings, #splashScreen ~ #musicPlayer { 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; } /* Hover "levanta" o botão com leve escala/brilho/sombra — exceto os que já têm semântica própria de hover (link de texto sublinhado, item de lista de classe/ranking/sala/inimigo/item, cujo destaque é a borda/fundo da linha inteira). A lista de exceções não é preferência estética: um `scale` num elemento largo o faz **transbordar** o contêiner (1,03 de 794px são 23px a mais, 11 para cada lado). Se esse contêiner rola — como a lista da tela de escolha de item —, nasce uma barra de rolagem, ela consome altura e o painel inteiro muda de tamanho a cada vez que o cursor cruza uma linha. Toda linha larga dentro de área rolável precisa entrar aqui. O *movimento* do hover continua interpolado mesmo nos botões de ação, que têm moldura em pixel art (ver o fim do arquivo): a versão em "bloco de pedra", com o estado inteiro em degrau e sombra sólida em cada elemento clicável, carregava demais a tela. A sombra desfocada daqui não aparece nesses botões — o clip-path da moldura recorta o que é pintado fora da silhueta —, mas segue valendo para os botões de ícone e flutuantes. */ button:not(:disabled):not(.link-button):not(.class-card):not(.ranking-nome):not(.password-toggle-btn):not(.horde-level-item):not(.horde-room-row):not(.monstruario-row):not(.item-choice-botao):hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); box-shadow: var(--sombra-flutuante); } button:not(:disabled):not(.link-button):not(.class-card):not(.ranking-nome):not(.password-toggle-btn):not(.horde-level-item):not(.horde-room-row):not(.monstruario-row):not(.item-choice-botao):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 é exclusiva do nome do jogo (#menuTitle), 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; } #botClassOverlay.closing, .class-picker-overlay.closing, #authOverlay.visible.closing, #profileOverlay.visible.closing, #pauseOverlay.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 (mesmo `position: fixed` de #soundSettings/#musicPlayer, espelhado no canto esquerdo). Abre a modal de pausa, ver pauseMenu.js. */ #pauseMenuBtn { position: fixed; top: 16px; left: 16px; z-index: 5; } /* ----- Controle de volume ----- Fixo no canto da tela porque vale tanto para o menu quanto para uma partida em andamento — o jogador não deveria ter que voltar ao menu para mudar o volume no meio de um jogo. z-index alto (acima de HUD, overlays de fim de jogo/espera e modais, todos ≤20) porque esses dois botões precisam continuar clicáveis por cima de qualquer tela do jogo; abaixo só de #fullscreenGate (900), que bloqueia a tela de propósito. */ #soundSettings { position: fixed; top: 16px; right: 16px; z-index: 800; } /* Fica por cima do player de música (abaixo dele na pilha) enquanto o painel está aberto, senão o botão de música apareceria por cima do painel de efeitos, que abre para baixo bem onde ele está. */ #soundSettings.open { z-index: 801; } /* Botões quadrados de canto arredondados (não circulares) e 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 (não um botão dentro de um wrapper como #soundSettings/#musicPlayer), mas tem exatamente o mesmo formato. Os botões de navegação da tela inicial (#menuNav, ver menuViews.js) também: são a mesma peça no mesmo canto da janela, e é de propósito que se pareçam — só a largura fixa é sobrescrita lá embaixo, porque eles levam rótulo ao lado do ícone. */ #soundSettings button, #musicPlayer button, #menuNav button, #pauseMenuBtn, #pauseBody .volume-control button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--cor-borda); background: var(--cor-botao-flutuante-fundo); color: var(--cor-texto); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); } #soundSettings button:hover, #musicPlayer button:hover, #menuNav button:hover, #pauseMenuBtn:hover, #pauseBody .volume-control button:hover { background: var(--cor-botao-flutuante-fundo-hover); } /* 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; } /* O contrário dele: os dois controles de áudio só existem **fora** de partida. Dentro dela eles ficavam por cima da arena, e o que eles fazem mudou de lugar — os mesmos dois volumes estão na modal de pausa, que é onde o jogador já vai parar para mexer em qualquer coisa (ver pauseMenu.js). */ body.game-active #soundSettings, body.game-active #musicPlayer { display: none; } #soundSettingsMute { display: none; } #soundSettings.muted #soundSettingsWave1, #soundSettings.muted #soundSettingsWave2 { display: none; } #soundSettings.muted #soundSettingsMute { display: block; } #soundSettingsPanel { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; padding: 14px 16px; box-sizing: border-box; background: rgba(29, 29, 29, 0.92); border: 1px solid var(--cor-borda); border-radius: 0; box-shadow: var(--sombra-flutuante); backdrop-filter: blur(6px); } #soundSettings.open #soundSettingsPanel { display: block; animation: entrada-pop 0.15s ease; transform-origin: top right; } /* Precisa ser tão específico quanto ".open ... " acima (2 ids), senão a animação de entrada continua ganhando da de saída na cascata. */ #soundSettings.open #soundSettingsPanel.closing { animation: saida-pop 0.15s ease forwards; } .sound-settings-row { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .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; } /* Precisa ser tão específico quanto "#soundSettings button"/"#musicPlayer button" acima (1 id), senão o tamanho de 40px continua ganhando na cascata mesmo com este seletor vindo depois. O da modal de pausa aparece nas duas listas de propósito: é lá em cima que ele ganha borda, fundo e centralização (é a mesma peça), e aqui que encolhe. */ #soundSettingsPanel .volume-control button, #musicPanel .volume-control button, #pauseBody .volume-control button { flex: none; width: 28px; height: 28px; border-radius: 8px; } /* 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; } /* ----- Player de música ----- Empilhado embaixo de #soundSettings, no canto da tela: os dois controlam áudio e fazem sentido agrupados na mesma coluna. */ #musicPlayer { position: fixed; top: 64px; right: 16px; z-index: 800; } #btnMusicToggle.playing { color: var(--cor-vermelho-destaque); border-color: var(--cor-vermelho-destaque); } #musicPanel { display: none; position: absolute; /* âncora para #musicCopiedMsg, que é posicionado relativo ao painel */ top: calc(100% + 8px); right: 0; min-width: 240px; padding: 14px 16px; box-sizing: border-box; background: rgba(29, 29, 29, 0.92); border: 1px solid var(--cor-borda); border-radius: 0; box-shadow: var(--sombra-flutuante); backdrop-filter: blur(6px); } #musicPlayer.open #musicPanel { display: block; animation: entrada-pop 0.15s ease; transform-origin: top right; } #musicPlayer.open #musicPanel.closing { animation: saida-pop 0.15s ease forwards; } #musicTrackName { font-size: 13px; color: var(--cor-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; border-radius: 0; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } #musicTrackName:hover { background: var(--cor-superficie-hover); color: var(--cor-texto); } #musicCopiedMsg { position: absolute; top: -28px; left: 50%; transform: translateX(-50%) translateY(4px); font-size: 12px; color: var(--cor-sucesso); background: rgba(29, 29, 29, 0.92); border: 1px solid var(--cor-borda); border-radius: 0; padding: 4px 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } #musicCopiedMsg.visible { opacity: 1; transform: translateX(-50%) translateY(0); } #musicControls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; } #musicControls button { width: 34px; height: 34px; } #btnMusicPlayPause { width: 40px; height: 40px; } #musicPlayIcon { display: none; } #btnMusicPlayPause.is-paused #musicPauseIcon { display: none; } #btnMusicPlayPause.is-paused #musicPlayIcon { display: block; } /* Tela inicial: seis visões que ocupam a tela inteira, uma por vez (início = logo + índice dos modos; Arena PVP = opções do 1x1; Defesa da base = salas + talentos; Monstruário = ficha dos inimigos da horda; Relicário = catálogo dos itens dela; ranking = Top 10 + partidas ao vivo), trocadas pelos botões de #menuNav — 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 lateral é `position: fixed` e não empurraria nada sozinha: é este `padding-left` que reserva a faixa dela e mantém todas as visões do menu inteiras à direita da barra, em vez de passarem por baixo. */ padding-left: var(--largura-sidebar); } /* A visão inativa sai do fluxo com `display: none`, e não com opacidade ou posição fora da tela: é isso que faz os polls do ranking e das partidas ao vivo pararem sozinhos (IntersectionObserver nos próprios painéis, ver ranking.js/liveMatches.js) sem nenhuma checagem a mais aqui. */ .menu-view { display: none; width: 100%; height: 100%; box-sizing: border-box; padding: 16px 64px 16px 12px; 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; } /* Nas duas visões o conteúdo fica lado a lado, como quando cada metade da tela era um item do carrossel: logo à esquerda e opções de jogo à direita no início; Top 10 e partidas ao vivo na de ranking. Cada um centralizado na vertical (o `align-items: center` de .menu-view). Em tela estreita não há largura para dois, e aí os dois empilham — ver a faixa `tela-estreita` abaixo. */ #menuViewHome { gap: clamp(12vw, calc(0.035 * var(--largura-tela)), 110px); } .menu-view > * { max-width: 100%; } /* Barra lateral da tela inicial: coluna fixa na borda esquerda com o botão de conta no topo e, embaixo dele, os botões que trocam a visão de #menu. Ao contrário dos controles flutuantes do canto direito (som/música), esta barra **não** fica por cima do conteúdo: #menu reserva `--largura-sidebar` em `padding-left`, então nenhum painel do menu entra embaixo dela. Só existe fora de partida — a visibilidade depende só do modo (menu × partida), nunca de estado assíncrono. */ #menuSidebar { position: fixed; top: 0; left: 0; z-index: 15; width: var(--largura-sidebar); height: var(--altura-tela); box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--cor-sidebar-fundo); border-right: 1px solid var(--cor-borda); /* Rede de segurança das telas baixas (paisagem de celular): com sete botões de 40px a coluna pode não caber em pé, e aí ela rola por dentro de si mesma em vez de cortar o último botão. */ overflow-y: auto; } body.game-active #menuSidebar { display: none; } /* Os botões ficam empilhados dentro da barra, do mesmo material dos botões de som/música (ver a regra compartilhada de #soundSettings/#musicPlayer); quem posiciona a coluna é #menuSidebar. */ #menuNav { display: flex; flex-direction: column; gap: 8px; } /* Ícone + nome da visão, em vez do quadrado só-ícone da regra compartilhada acima: três escudos/barras no canto não dizem para onde levam. A altura continua a mesma (40px) — a largura é a da barra inteira, para os botões lerem como uma lista alinhada e não como sete pílulas de tamanhos diferentes. */ #menuNav button.menu-view-btn { background: var(--cor-sidebar-botao); width: 100%; justify-content: flex-start; gap: 8px; padding: 0 12px; box-sizing: border-box; flex-shrink: 0; } #menuNav button.menu-view-btn:hover { background: var(--cor-sidebar-botao-hover); } /* "Monstruário" e "Relicário" não são modos: são as duas leituras *sobre* a Defesa da base (os inimigos dela e os itens dela). Aparecem como sub-itens do botão daquele modo — recuados e ligados a ele por um fio vertical, o mesmo desenho de uma árvore de pastas. Sem isso a barra lê como seis destinos irmãos, e "Relicário" fica tão no mesmo nível de "Arena PVP" quanto do modo a que ele de fato pertence. */ .menu-nav-sub { display: flex; flex-direction: column; /* O mesmo vão de #menuNav: o recuo é o que separa o grupo, não um respiro diferente, que faria os dois lerem como outra seção em vez de filhos do botão acima. */ gap: 8px; position: relative; margin-left: 8px; padding-left: 14px; /* O fio sobe pelo vão que separa o grupo do botão do modo (o `padding` de cima é anulado pela margem negativa, então nada se move: o que muda é só até onde o fio desenha), senão ele começaria solto no ar em vez de sair de "Defesa da base". */ margin-top: -8px; padding-top: 8px; } /* O tronco vertical é um pseudo-elemento, e não o `border-left` do grupo: borda vai obrigatoriamente até a última linha do elemento, e sobrava um toco descendo abaixo do ramo do último sub-item — um fio apontando para um item que não existe. Aqui ele para exatamente onde o último ramo sai (`bottom`: os 19px que vão do fim do botão até a base do ramo dele). */ .menu-nav-sub::before { content: ''; position: absolute; left: 0; top: 0; bottom: 19px; width: 2px; background: var(--cor-borda); } /* O ramo horizontal que sai do fio vertical e encosta em cada sub-item. É o que fecha o desenho de árvore: só a linha vertical ao lado já bastava com rótulo e recuo, mas na barra só-ícone (onde os dois somem) ela sozinha lia como uma borda decorativa da barra. Valores inteiros e fundo sólido — nada de `transform` para centralizar: 2px no meio de 40px é 19px exatos. */ .menu-view-btn-sub { position: relative; } .menu-view-btn-sub::before { content: ''; position: absolute; left: -12px; width: 12px; top: 19px; height: 2px; background: var(--cor-borda); } /* Um degrau abaixo do rótulo do pai (13px), pelo mesmo motivo do recuo. */ .menu-view-btn-sub .menu-view-btn-label { font-size: 12px; color: var(--cor-texto-fraco); } /* O ativo continua vermelho como qualquer outra visão: a cor diz "você está aqui" e não pode ser comida pelo cinza de sub-item. */ #menuNav button.menu-view-btn-sub.menu-view-btn-ativo .menu-view-btn-label { color: inherit; } #menuNav button.menu-view-btn svg { flex-shrink: 0; } .menu-view-btn-label { font-size: 13px; white-space: nowrap; } /* Selo de pontos de talento por gastar, no botão que leva à árvore (ver public/js/talentPointsAviso.js). Só existe com `data-pontos-livres`: o seletor é o próprio atributo, então zero ponto não tem regra a desligar — o selo simplesmente não é desenhado. O número vem de `attr()` num `::after` absoluto, e não de um elemento dentro do botão: assim ele não entra no fluxo e o rótulo "Defesa da base" não anda um pixel quando o selo aparece — inclusive no modo só-ícone, em que o botão vira um quadrado de 40px e o selo continua no mesmo canto. Quadrado de canto reto e sombra sólida deslocada, como o resto da interface (ver public/css/CLAUDE.md), mesmo dentro de um botão que é exceção de canto arredondado. */ #menuNav button.menu-view-btn[data-pontos-livres] { position: relative; overflow: visible; } #menuNav button.menu-view-btn[data-pontos-livres]::after { content: attr(data-pontos-livres); position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; line-height: 16px; box-sizing: border-box; padding: 0 3px; font-size: 11px; text-align: center; color: var(--cor-texto-sobre-tier); background: var(--cor-ouro); box-shadow: 2px 2px 0 var(--cor-pedra-borda); /* Pisca entre duas cores, nunca entre a cor e o nada — mesma regra do selo de nível da escolha de item: sumir metade do tempo faria o lembrete parecer um defeito de desenho. */ animation: talento-selo-pisca 0.9s steps(1, end) infinite alternate; } @keyframes talento-selo-pisca { 0% { background: var(--cor-ouro); } 100% { background: var(--cor-branco); } } /* Só-ícone em aparelho touch (qualquer um, de celular a tablet), em janela de desktop estreita e em tela deitada e curta: nesses tamanhos a coluna de rótulos come a largura do conteúdo do menu, que aí já ocupa a tela toda — e numa tela baixa os sete botões com rótulo ainda ocupariam a altura inteira da barra. `body.touch-mode` sozinho, sem faixa de tamanho junto, porque o critério é o aparelho e não a viewport — girado por CSS um celular reporta largura folgada (ver orientation.js) e nenhuma faixa de "tela pequena" o pegaria. Os dois botões voltam ao quadrado de 40px da regra compartilhada de #soundSettings/#musicPlayer — a mesma peça do canto direito, aqui num #menuSidebar que encolhe junto. O nome não se perde: cada botão já leva `aria-label` e `title`. */ body.touch-mode .menu-view-btn-label, body.touch-mode #accountFabLabel, body.tela-estreita .menu-view-btn-label, body.tela-estreita #accountFabLabel, body.tela-baixa-deitada .menu-view-btn-label, body.tela-baixa-deitada #accountFabLabel { display: none; } body.touch-mode, body.tela-estreita, body.tela-baixa-deitada { /* 40px de botão + os 12px de `padding` de cada lado da barra: a coluna encolhe para caber exatamente o quadrado do ícone, e o `padding-left` de #menu devolve ao conteúdo a largura que os rótulos ocupavam. */ --largura-sidebar: 64px; } body.touch-mode #menuNav button.menu-view-btn, body.tela-estreita #menuNav button.menu-view-btn, body.tela-baixa-deitada #menuNav button.menu-view-btn { width: 100%; justify-content: center; gap: 0; padding: 0; } /* Só-ícone: recuar os dois sub-itens deixaria eles mais estreitos que os botões de cima, e uma coluna de quadrados com dois retângulos no meio lê como defeito, não como hierarquia. O fio vertical continua — o que muda é que ele corre pela beirada esquerda da *coluna dos botões* (e não fora dela): sem o recuo, o tronco cai exatamente sob a borda esquerda do botão do modo acima, que é o que faz a árvore ler como descendo dele. Os 8px de `padding` são o degrau que o quadrado menor (32px dentro de 40px) já deixava à esquerda, então nada muda de tamanho. */ body.touch-mode .menu-nav-sub, body.tela-estreita .menu-nav-sub, body.tela-baixa-deitada .menu-nav-sub { margin-left: 0; padding-left: 8px; } body.touch-mode .menu-nav-sub::before, body.tela-estreita .menu-nav-sub::before, body.tela-baixa-deitada .menu-nav-sub::before { /* O último sub-item é 32px em vez de 40px, então o fio para 15px acima do fim do grupo — de novo, na base do último ramo. */ bottom: 15px; /* Sem rótulo nem recuo, o fio é boa parte do que diz "estes dois são do modo acima" — e um cinza de 2px encostado na beirada da barra quase não aparece sobre o fundo quase preto dela. */ background: var(--cor-borda-clara); } /* O que sobrou de hierarquia sem rótulo e sem recuo era um fio de 2px na beirada — perto de nada. Aqui os dois sub-itens viram um quadrado *menor* (32px), encostado na borda direita da barra: as bordas direitas alinham com as do pai e sobra um degrau à esquerda, que é o recuo do modo com rótulo traduzido para uma coluna estreita. Continuam quadrados, então a coluna não ganha retângulo torto no meio. */ body.touch-mode #menuNav button.menu-view-btn-sub, body.tela-estreita #menuNav button.menu-view-btn-sub, body.tela-baixa-deitada #menuNav button.menu-view-btn-sub { width: 32px; height: 32px; margin-left: auto; } body.touch-mode .menu-view-btn-sub::before, body.tela-estreita .menu-view-btn-sub::before, body.tela-baixa-deitada .menu-view-btn-sub::before { /* Os 8px que o quadrado menor (32px) deixou à esquerda dentro da coluna de 40px; e o meio de 32px são 15px exatos. */ left: -8px; width: 8px; top: 15px; background: var(--cor-borda-clara); } body.touch-mode #menuNav button.menu-view-btn-sub svg, body.tela-estreita #menuNav button.menu-view-btn-sub svg, body.tela-baixa-deitada #menuNav button.menu-view-btn-sub svg { width: 16px; height: 16px; } body.touch-mode #accountFabBtn, body.tela-estreita #accountFabBtn, body.tela-baixa-deitada #accountFabBtn { width: 100%; height: 40px; justify-content: center; gap: 0; padding: 0; } /* A visão em que o jogador está é marcada pela cor da identidade, não por um fundo diferente: são dois ícones no canto, e um bloco preenchido ali competiria com o logo. */ #menuNav button.menu-view-btn-ativo { border-color: var(--cor-vermelho-destaque); color: var(--cor-vermelho-destaque); } #menuTitle { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; /* Cresce com a viewport até o teto de 116px — o item do título tem só 50% da largura da tela (100% no mobile, que sobrescreve isso mais abaixo), então um valor fixo ou estoura em telas estreitas ou fica pequeno demais nas largas. */ font-size: clamp(44px, calc(0.08 * var(--largura-tela)), 168px); line-height: 0.92; text-align: center; color: var(--cor-vermelho); -webkit-text-stroke: 1px #000; text-stroke: 1px #000; animation: logoBrilhoPulsante 4s ease-in-out infinite; perspective: 400px; } .title-line { display: flex; justify-content: center; } .title-letter { display: inline-block; animation: tituloFlutuar 3s ease-in-out infinite; } .flip-letter { animation-name: tituloFlutuarInvertido; } #menuTitle .title-letter[data-i="1"] { animation-duration: 4.6s; animation-delay: -0.1s; } #menuTitle .title-letter[data-i="2"] { animation-duration: 5.4s; animation-delay: -2.4s; } #menuTitle .title-letter[data-i="3"] { animation-duration: 4.9s; animation-delay: -1.1s; } #menuTitle .title-letter[data-i="4"] { animation-duration: 5.8s; animation-delay: -3.5s; } #menuTitle .title-letter[data-i="5"] { animation-duration: 5.1s; animation-delay: -1.9s; } #menuTitle .title-letter[data-i="6"] { animation-duration: 5.6s; animation-delay: -0.7s; } #menuTitle .title-letter[data-i="7"] { animation-duration: 4.7s; animation-delay: -3s; } #menuTitle .title-letter[data-i="8"] { animation-duration: 6s; animation-delay: -1.6s; } #menuTitle .title-letter[data-i="9"] { animation-duration: 5.1s; animation-delay: -4.1s; } #menuTitle .title-letter[data-i="10"] { animation-duration: 5.4s; animation-delay: -0.4s; } @keyframes tituloFlutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } #menuTitle .title-letter.title-letter-hover { animation: tituloGirar 1s linear; } @keyframes tituloGirar { 0% { transform: rotateY(0deg); } 70% { transform: rotateY(420deg); } 90% { transform: rotateY(340deg); } 100% { transform: rotateY(360deg); } } #menuTitle .title-letter.flip-letter.title-letter-hover { animation-name: tituloGirarInvertido; } @keyframes tituloGirarInvertido { 0% { transform: scaleX(-1) rotateY(0deg); } 70% { transform: scaleX(-1) rotateY(420deg); } 90% { transform: scaleX(-1) rotateY(340deg); } 100% { transform: scaleX(-1) rotateY(360deg); } } @keyframes tituloFlutuarInvertido { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-4px); } } @keyframes logoBrilhoPulsante { 0%, 100% { color: var(--cor-vermelho); text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 8px var(--cor-vermelho); } 50% { color: var(--cor-vermelho-destaque); text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 22px var(--cor-vermelho-destaque); } } #rankingPanel { display: flex; flex-direction: column; gap: 10px; width: 300px; height: 100%; max-width: 100%; max-height: min(500px, calc(var(--altura-tela) - 96px)); box-sizing: border-box; padding: 16px 24px 24px 16px; background: var(--cor-painel-pedra-veu); border-radius: 0; border: 1px solid var(--cor-pedra-borda); box-shadow: var(--sombra-pedra); /* Entra um instante depois de #menuBody, pra guiar o olho da esquerda pra direita em vez de tudo aparecer junto. */ animation: entrada-fade 0.5s ease 0.12s both; } #rankingPanel h2 { margin: 0; font-size: 26px; text-align: center; } #rankingHeader { display: flex; justify-content: space-between; /* Alinha "Jogador" com o nome (e não com a posição) na linha de baixo. */ padding-left: 26px; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-fraco); } #rankingList { margin: 0; padding: 0; list-style: none; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; } #rankingList li { display: grid; grid-template-columns: 18px 1fr auto; /* Centro, não baseline: o nome é um