/* * JANELA — Ranking (26/08) * * `#ranking-modal` é o próprio `` do jogo (`www/ranking/index.js`) — * o kit o marca como conteúdo e o encaixa no vão. Duas abas: "Ranking Global" * (lista até 100 jogadores, top 3 com medalha) e "Minha Última Jornada" (o * pico da corrida atual + grade de estatísticas + histórico da anterior). * * A ÚNICA rolagem é a de `.rk-corpo` — cabeçalho da lista fica grudado no * topo dela (`position:sticky`) enquanto as linhas passam por baixo. Não há * rolagem aninhada: duas barras de rolagem uma dentro da outra é a marca * registrada de UI malfeita. * * ── COMO ESCREVER AQUI ──────────────────────────────────────────────── * · prefixo obrigatório `html[data-rpgw='ranking']`; * · toda medida em `calc(Npx * var(--rpg-un, 1))`; * · cor só dos tokens (`--rpg-tinta`, `--rpg-ouro`, …) — ver CONTRATO.md; * · o kit já remapeou os tokens do jogo dentro do painel. * * Validar com: * node ferramentas/foto.mjs ranking * node ferramentas/inspetor-janela.mjs ranking */ /* O `

` "Ranking" do jogo duplica o título que o cabeçalho do kit já desenha (ícone + "Ranking"). Duas legendas para a mesma coisa é ruído. */ html[data-rpgw='ranking'] #ranking-modal .dialog__title { display: none; } /* 🚨 `showModal()` promove o `` (e o `::backdrop` dele) para o TOP LAYER: acima de QUALQUER z-index do documento normal, inclusive o cabeçalho do kit. O véu escuro padrão do navegador pintava por cima da `.rpgw__cabeca` inteira (medido: rgb(6,15,29) em vez de rgb(15,49,90)) — quem escurece o cenário já é o `.rpgw__veu` do kit; o backdrop nativo só duplicava o escurecimento em cima do próprio chrome. */ html[data-rpgw='ranking'] #ranking-modal::backdrop { background: transparent; } /* ═══════════════════════════════════════════════════════════════════════ * 1. A MOLDURA — conteúdo em coluna, do tamanho exato do vão * ═══════════════════════════════════════════════════════════════════════ */ html[data-rpgw='ranking'] #ranking-modal .dialog__content { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: calc(10px * var(--rpg-un, 1)); padding: calc(14px * var(--rpg-un, 1)); overflow: hidden; } /* ── abas ──────────────────────────────────────────────────────────── */ html[data-rpgw='ranking'] #ranking-modal .rk-abas { flex: 0 0 auto; margin: 0; gap: calc(6px * var(--rpg-un, 1)); } /* A INATIVA fica quieta (o mesmo cinza-azulado do `.rpg-btn--fantasma`) — se ela brigar em azul vivo com a ativa, quem "parece escolhida" é ela. */ html[data-rpgw='ranking'] #ranking-modal .rk-aba { min-height: max(24px, calc(34px * var(--rpg-un, 1))); padding: 0 calc(10px * var(--rpg-un, 1)); border-radius: var(--rpg-raio-p); border-color: var(--rpg-aro); background: linear-gradient(180deg, var(--rpg-cabeca-a) 0%, var(--rpg-cabeca-b) 100%); box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffffff1f; color: var(--rpg-tinta-3); font-size: max(10px, calc(13px * var(--rpg-un, 1))); font-weight: 700; -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205; paint-order: stroke fill; } /* A aba ativa vira ouro — o único jeito de "escolhida" ler antes de ler o texto, à distância de celular. */ html[data-rpgw='ranking'] #ranking-modal .rk-aba[aria-selected='true'] { border-color: var(--rpg-aro-ouro); background: linear-gradient(180deg, #1b1205 0%, #0c0e12 100%); box-shadow: inset 0 0 0 calc(1px * var(--rpg-un, 1)) #9c7c4e88, inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a833; color: var(--rpg-ouro); -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205; } /* ── o corpo: ÚNICA rolagem da janela ─────────────────────────────── */ html[data-rpgw='ranking'] #ranking-modal .rk-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #8a7255 #100a05; /* 🚨 O `scrollIntoView({block:'center'})` da própria linha (`rk-linha--eu`) rola `.rk-corpo` sem saber que o cabeçalho fica GRUDADO por cima (`sticky`) — sem isto a janela nasce com o 1º lugar preso atrás do rótulo das colunas. `scroll-padding-top` reserva essa faixa para o cálculo de centralização: cada px a mais aqui empurra o "centro" da rolagem meio px para baixo, então o valor precisa ser generoso (bem maior que a altura do cabeçalho) para o 1º lugar sobrar visível quando a própria linha do jogador está perto do topo — medido linha a linha com `.rk-linha:first-child` até o degrau parar de invadir o cabeçalho. */ scroll-padding-top: max(170px, calc(150px * var(--rpg-un, 1))); } /* A aba "Jornada" é curta (pico + 9 estatísticas): sem isto ela nasce colada no topo e sobra um vão morto embaixo até o "Fechar" — a mesma lição da categoria curta da Loja. Centrando, o cartão respira nas duas pontas em vez de encostar só numa. Não afeta a aba "Global": aquela tem cabeçalho `sticky`, que precisa ficar no topo, e não tem `.rk-pico`. */ html[data-rpgw='ranking'] #ranking-modal .rk-corpo:has(> .rk-pico) { display: flex; flex-direction: column; /* `safe`: centra enquanto cabe; no instante em que abrir o histórico empurra o conteúdo além da altura do vão, volta a ancorar no topo — sem isso o centro "puro" rola para dentro de espaço negativo e o topo do cartão vira inalcançável. */ justify-content: safe center; /* 🚨 A medalha do `.rk-pico::before` sobra 16 px PARA CIMA da própria caixa (é o "broche" preso na borda). Quando o histórico some com o "safe center" e o cartão encosta no topo puro de `.rk-corpo`, essa sobra cai em scrollTop negativo — que não existe — e o `overflow-y:auto` corta a medalha ao meio. Esta folga reserva o espaço antes que isso aconteça. */ padding-top: calc(20px * var(--rpg-un, 1)); } html[data-rpgw='ranking'] #ranking-modal .rk-corpo::-webkit-scrollbar { width: calc(8px * var(--rpg-un, 1)); } html[data-rpgw='ranking'] #ranking-modal .rk-corpo::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a9782c, #6b4f1f); border-radius: 999px; } /* O corte da rolagem caía rente ao botão Fechar: sobrava uma fatia de ~4px de cartão colada nele, que lia como glitch, não como "tem mais embaixo". `sticky` mantém este véu grudado no fundo VISÍVEL da rolagem o tempo todo — inclusive no fim de verdade, onde ele vira só uma borda macia em vez de um corte duro. */ html[data-rpgw='ranking'] #ranking-modal .rk-corpo::after { content: ''; display: block; position: sticky; bottom: 0; height: calc(20px * var(--rpg-un, 1)); background: linear-gradient(180deg, transparent, var(--rpg-painel-b) 85%); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════ * 2. ABA "RANKING GLOBAL" — cabeçalho fixo + lista * ═══════════════════════════════════════════════════════════════════════ */ /* As mesmas seis colunas no cabeçalho e em cada linha — é isso que faz os números caírem alinhados por baixo do rótulo certo. */ html[data-rpgw='ranking'] #ranking-modal .rk-cabecalho, html[data-rpgw='ranking'] #ranking-modal .rk-linha { grid-template-columns: calc(32px * var(--rpg-un, 1)) calc(42px * var(--rpg-un, 1)) minmax(0, 1fr) calc(44px * var(--rpg-un, 1)) calc(56px * var(--rpg-un, 1)) calc(78px * var(--rpg-un, 1)); gap: calc(8px * var(--rpg-un, 1)); /* A grade tinha 1fr de nome esticando até a borda da janela — nome grudado à esquerda, Era/Fase/Poder grudados à direita, um vão morto enorme no meio em telas largas. Uma ficha de RPG tem largura própria; não é uma tabela HTML que estica com o container. */ max-width: calc(560px * var(--rpg-un, 1)); margin-inline: auto; } /* Grudado no topo da rolagem, com fundo opaco — sem isto as linhas passam POR BAIXO do rótulo das colunas em vez de por baixo dele. */ html[data-rpgw='ranking'] #ranking-modal .rk-cabecalho { position: sticky; top: 0; z-index: 2; padding: 0 calc(10px * var(--rpg-un, 1)) calc(7px * var(--rpg-un, 1)); margin-bottom: calc(4px * var(--rpg-un, 1)); background: var(--rpg-painel-a); color: var(--rpg-tinta-3); /* 🚨 Piso de legibilidade: em 844×390 (`--rpg-un` ~0.41) a escala linear sozinha derrubava o rótulo das colunas a ~4 px — a mesma faixa que a lição 7 do contrato já reprovou. `max()` só age abaixo do piso; em telas maiores continua escalando normal (mesmo padrão de `forja.css`). */ font-size: max(9px, calc(10px * var(--rpg-un, 1))); font-weight: 700; letter-spacing: 0.08em; } html[data-rpgw='ranking'] #ranking-modal .rk-cabecalho::after { content: ''; position: absolute; inset: auto 0 0; height: calc(1px * var(--rpg-un, 1)); background: linear-gradient(90deg, #9c7c4e00, #9c7c4e66 20%, #9c7c4e66 80%, #9c7c4e00); } /* 🚨 O jogo trava a própria lista em `max-height:min(52vh,420px)` com `overflow-y:auto` — uma SEGUNDA rolagem, aninhada dentro de `.rk-corpo`. Zerando os dois, `.rk-corpo` vira a única caixa que rola, e é ali que o cabeçalho `sticky` tem efeito. */ html[data-rpgw='ranking'] #ranking-modal .rk-lista { gap: calc(5px * var(--rpg-un, 1)); max-height: none; overflow: visible; } /* Cada linha é uma fichinha própria (moldura + fundo), não um filete de tabela — é o que evita a parede de texto numa lista de até 100 nomes. */ html[data-rpgw='ranking'] #ranking-modal .rk-linha { padding: calc(6px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1)); border-color: #ffffff12; border-radius: var(--rpg-raio-p); background: #ffffff05; } /* Zebra por cima da ficha: sutil, só para o olho não perder a linha ao voltar do "Poder" lá na ponta direita para o próximo nome. */ html[data-rpgw='ranking'] #ranking-modal .rk-linha:nth-child(even) { background: #ffffff0c; } /* O próprio jogador precisa saltar aos olhos numa lista de 100 — fio e fundo dourados, do mesmo jeito que a `.rk-linha--eu` do jogo já pedia, só que com os tons do contrato em vez do `--gold-900` cru. */ html[data-rpgw='ranking'] #ranking-modal .rk-linha--eu { border-color: var(--rpg-aro-ouro); background: linear-gradient(90deg, #ffc94a26, #ffc94a08 70%); } html[data-rpgw='ranking'] #ranking-modal .rk-linha--eu .rk-quem strong::after { content: ' · você'; color: var(--rpg-ouro); font-weight: 700; } /* ── posição: número liso da 4ª casa em diante, medalha nas três primeiras */ html[data-rpgw='ranking'] #ranking-modal .rk-pos { font-size: max(10px, calc(13px * var(--rpg-un, 1))); font-weight: 800; color: var(--rpg-tinta-3); } /* A arte (`Ranking_Top3_0N`) já traz o número desenhado — o texto original fica só para leitor de tela, encolhido a zero em vez de escondido, que é o que mantém o `data-medalha` acessível sem duplicar o algarismo. */ html[data-rpgw='ranking'] #ranking-modal .rk-pos[data-medalha]:not([data-medalha='']) { width: max(22px, calc(30px * var(--rpg-un, 1))); height: max(22px, calc(30px * var(--rpg-un, 1))); font-size: 0; background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 calc(1px * var(--rpg-un, 1)) calc(2px * var(--rpg-un, 1)) #000a); } html[data-rpgw='ranking'] #ranking-modal .rk-pos[data-medalha='1'] { background-image: url('/potato/rpg/pecas/Ranking_Top3_01.png'); } html[data-rpgw='ranking'] #ranking-modal .rk-pos[data-medalha='2'] { background-image: url('/potato/rpg/pecas/Ranking_Top3_02.png'); } html[data-rpgw='ranking'] #ranking-modal .rk-pos[data-medalha='3'] { background-image: url('/potato/rpg/pecas/Ranking_Top3_03.png'); } /* ── avatar: anel de vidro por padrão, cor de pódio nas três primeiras */ html[data-rpgw='ranking'] #ranking-modal .rk-avatar { width: max(26px, calc(42px * var(--rpg-un, 1))); height: max(26px, calc(42px * var(--rpg-un, 1))); background: radial-gradient(circle at 50% 30%, var(--rpg-cabeca-a), var(--rpg-poço)); box-shadow: inset 0 0 0 calc(1.5px * var(--rpg-un, 1)) #ffffff1f; } html[data-rpgw='ranking'] #ranking-modal .rk-linha:has(.rk-pos[data-medalha='1']) .rk-avatar { box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) var(--rpg-ouro); } /* 🚨 Prata precisa ser mais chamativa que bronze — o `--rpg-ambar` (laranja saturado) no 3º lugar competia com o ouro do 1º e vencia o `--rpg-tinta-2` (azul pálido) do 2º. `--rpg-tinta` (o creme mais claro da paleta) é o metal mais brilhante depois do ouro; `--rpg-tinta-2` desce um degrau para o bronze — a mesma escala de "brilho" que o resto da janela já usa. */ html[data-rpgw='ranking'] #ranking-modal .rk-linha:has(.rk-pos[data-medalha='2']) .rk-avatar { box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) var(--rpg-tinta); } html[data-rpgw='ranking'] #ranking-modal .rk-linha:has(.rk-pos[data-medalha='3']) .rk-avatar { box-shadow: inset 0 0 0 calc(2px * var(--rpg-un, 1)) var(--rpg-tinta-2); } /* ── nome, classe, colunas numéricas ──────────────────────────────── */ html[data-rpgw='ranking'] #ranking-modal .rk-quem { gap: calc(1px * var(--rpg-un, 1)); } /* 🚨 Piso de legibilidade nos quatro textos da linha: em 844×390 a escala linear (`--rpg-un` ~0.41) derrubava o nome a ~5 px e a classe a ~4 px — media, não achismo (`node ferramentas/inspetor-janela.mjs` mostrou os mesmos números do relatório antes desta correção). `max()` trava um piso sem tirar o escalonamento normal em telas maiores — mesmo padrão de `forja.css`. */ html[data-rpgw='ranking'] #ranking-modal .rk-quem strong { font-size: max(10px, calc(13px * var(--rpg-un, 1))); color: var(--rpg-tinta); -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205; paint-order: stroke fill; } html[data-rpgw='ranking'] #ranking-modal .rk-quem em { font-size: max(9px, calc(10px * var(--rpg-un, 1))); color: var(--rpg-tinta-3); } html[data-rpgw='ranking'] #ranking-modal .rk-col b { font-size: max(10px, calc(13px * var(--rpg-un, 1))); color: var(--rpg-tinta-2); } /* Poder é o número que decide a fila — o único que grita dourado, os outros dois (Era, Fase) ficam em tom de apoio para não competir com ele. */ html[data-rpgw='ranking'] #ranking-modal .rk-col--poder b { font-size: max(11px, calc(14px * var(--rpg-un, 1))); color: var(--rpg-ouro); -webkit-text-stroke: calc(1.4px * var(--rpg-un, 1)) #1b1205; paint-order: stroke fill; } html[data-rpgw='ranking'] #ranking-modal .rk-minha { margin-top: calc(8px * var(--rpg-un, 1)); margin-inline: auto; max-width: calc(560px * var(--rpg-un, 1)); padding: calc(8px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1)); border-color: var(--rpg-aro-ouro); border-radius: var(--rpg-raio-p); background: #ffc94a12; font-size: max(9px, calc(12px * var(--rpg-un, 1))); color: var(--rpg-tinta-2); } html[data-rpgw='ranking'] #ranking-modal .rk-minha strong { color: var(--rpg-ouro); } /* ═══════════════════════════════════════════════════════════════════════ * 3. ABA "MINHA ÚLTIMA JORNADA" — pico, grade, histórico * ═══════════════════════════════════════════════════════════════════════ */ /* O pico é o motivo da aba existir: domina a tela, o resto é contexto. Um troféu decorativo liga esta aba à outra — "aqui está o seu melhor resultado" — sem afirmar posição nenhuma no placar. */ html[data-rpgw='ranking'] #ranking-modal .rk-pico { position: relative; margin-bottom: 0; margin-inline: auto; max-width: calc(560px * var(--rpg-un, 1)); padding: calc(30px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1)) calc(12px * var(--rpg-un, 1)); border-color: var(--rpg-aro-ouro); border-radius: var(--rpg-raio-p); background: radial-gradient(120% 140% at 50% 0%, #ffc94a29, transparent 70%), var(--rpg-painel-b); } /* 🚨 NÃO É `Ranking_Top3_01` (medalha de OURO com o algarismo "1" gravado): este cartão mostra a maior fase da JORNADA, não a posição no placar — um jogador em 5º lugar, ou nível 22 na fase 3-14, via a arte do 1º colada no próprio recorde. É rótulo inventado. `Icon_80_Top_Ranking.png` (o mesmo troféu do cabeçalho da janela) diz "seu recorde" sem afirmar posição. */ html[data-rpgw='ranking'] #ranking-modal .rk-pico::before { content: ''; position: absolute; top: calc(-16px * var(--rpg-un, 1)); left: 50%; translate: -50% 0; width: calc(38px * var(--rpg-un, 1)); height: calc(38px * var(--rpg-un, 1)); background: url('/potato/rpg/pecas/Icon_80_Top_Ranking.png') center / contain no-repeat; filter: drop-shadow(0 calc(2px * var(--rpg-un, 1)) calc(4px * var(--rpg-un, 1)) #000a); } html[data-rpgw='ranking'] #ranking-modal .rk-pico__rotulo { font-size: max(9px, calc(10px * var(--rpg-un, 1))); letter-spacing: 0.08em; color: var(--rpg-tinta-3); } /* Nada de `vmin`: o resto da janela escala pelo palco (`--rpg-un`), e um número que ignora essa régua sai grande demais no celular e pequeno demais no monitor — a mesma razão do item 1 do contrato. */ html[data-rpgw='ranking'] #ranking-modal .rk-pico__valor { font-size: clamp(18.5px, calc(34px * var(--rpg-un, 1)), 44px); font-weight: 800; color: var(--rpg-ouro); -webkit-text-stroke: calc(2px * var(--rpg-un, 1)) #2a1200; paint-order: stroke fill; } html[data-rpgw='ranking'] #ranking-modal .rk-pico__detalhe { font-size: max(9px, calc(12px * var(--rpg-un, 1))); color: var(--rpg-tinta-2); } html[data-rpgw='ranking'] #ranking-modal .rk-jornada { /* 9 estatísticas em grade de 2 colunas (herdada crua do CSS antigo do jogo) deixava "Reis derrotados" órfã, sozinha numa linha. 9 é 3×3: fecha certo. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6px * var(--rpg-un, 1)); margin-top: calc(8px * var(--rpg-un, 1)); max-width: calc(560px * var(--rpg-un, 1)); margin-inline: auto; } html[data-rpgw='ranking'] #ranking-modal .rk-jornada > div { /* Cada célula tinha `justify-content:space-between` puxando o rótulo para a esquerda e o valor para a direita de uma coluna larga — o mesmo "vão morto" da lista, só que dentro da casinha. Em coluna, os dois moram perto. */ display: flex; flex-direction: column; gap: calc(2px * var(--rpg-un, 1)); padding: calc(7px * var(--rpg-un, 1)) calc(10px * var(--rpg-un, 1)); border-color: #ffffff10; border-radius: var(--rpg-raio-p); background: #ffffff06; } html[data-rpgw='ranking'] #ranking-modal .rk-jornada dt { font-size: max(9px, calc(11px * var(--rpg-un, 1))); color: var(--rpg-tinta-3); } /* Todo valor de estatística é ouro, do jeito que a ficha de atributos do Herói já trata número que importa — consistência entre janelas. */ html[data-rpgw='ranking'] #ranking-modal .rk-jornada dd { font-size: max(10px, calc(13px * var(--rpg-un, 1))); color: var(--rpg-ouro); -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #1b1205; paint-order: stroke fill; } html[data-rpgw='ranking'] #ranking-modal .rk-historico { margin-top: calc(8px * var(--rpg-un, 1)); margin-inline: auto; max-width: calc(560px * var(--rpg-un, 1)); border-color: #ffffff12; border-radius: var(--rpg-raio-p); background: #ffffff05; } html[data-rpgw='ranking'] #ranking-modal .rk-historico > summary { position: relative; list-style: none; padding: calc(9px * var(--rpg-un, 1)) calc(11px * var(--rpg-un, 1)) calc(9px * var(--rpg-un, 1)) calc(24px * var(--rpg-un, 1)); font-size: max(9px, calc(12px * var(--rpg-un, 1))); color: var(--rpg-tinta-3); } html[data-rpgw='ranking'] #ranking-modal .rk-historico > summary::-webkit-details-marker { display: none; } /* Marcador próprio: a seta padrão do navegador é a mesma lição do `