/* * Selo de "jogadores agora" nos cards de jogo. * * Arquivo à parte e escrito à mão porque o app.css é um build pré-compilado. * * O que mudou em relação à versão anterior, que foi tirada das homes por * peso: saiu o `backdrop-filter: blur(8px)`. Ele obriga o navegador a * recompor o que está atrás de CADA selo; numa grade de 40 cards são 40 * regiões de blur por quadro, e é o que travava a rolagem no celular. * Fundo sólido resolve visualmente do mesmo jeito e custa zero. */ .game-players-badge { position: absolute; bottom: 8px; left: 8px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 5px; background: #3a4142; color: #fff; font-size: 10px; font-weight: 600; line-height: 1; pointer-events: none; } .game-players-badge i { font-size: 9px; opacity: .75; } /* Sem ninguém jogando: o selo continua, só recua para não competir com os cards que têm movimento. */ .game-players-badge.is-vazio { background: rgba(58, 65, 66, .55); color: #9aa3a4; } .game-players-badge .count { font-weight: 700; font-variant-numeric: tabular-nums; } /* * Miniatura do card de jogo: placeholder até a imagem estar pronta. * * Sem isso o navegador pinta a imagem conforme os bytes chegam — JPEG e PNG * progressivos aparecem em faixas, de cima para baixo. Numa grade de dezenas * de cards isso vira um efeito de "chuva" enquanto a página carrega. * * A solução é o card já nascer com a cor de fundo e a imagem entrar só * quando o `load` dela dispara, ou seja, quando está completa. A transição * é de opacidade, que o compositor resolve na GPU sem refluxo. * * A regra de esconder vive sob `.thumbs-fade`, classe que o próprio script * põe no . Se o JS não rodar, nada fica invisível: as imagens * simplesmente aparecem como sempre. */ .game-card, .big-win-thumb { background-color: #323738; } .thumbs-fade .game-card > a > img, .thumbs-fade .game-card > div > img, .thumbs-fade .big-win-thumb > img { opacity: 0; transition: opacity .22s ease-out; } .thumbs-fade .game-card > a > img.thumb-pronta, .thumbs-fade .game-card > div > img.thumb-pronta, .thumbs-fade .big-win-thumb > img.thumb-pronta { opacity: 1; } /* A grade de provedora tem, atrás da imagem, um bloco com o nome do jogo para o caso de a capa quebrar. Enquanto a miniatura não resolve ele fica escondido, senão o card mostraria esse texto no lugar do placeholder. Ao resolver — carregada ou com erro — o card ganha `.thumb-ok` e o bloco volta ao papel dele. */ .thumbs-fade .game-card:not(.thumb-ok) > a > div { opacity: 0; } /* Quem pediu menos movimento recebe a imagem direto, sem transição. */ @media (prefers-reduced-motion: reduce) { .thumbs-fade .game-card > a > img, .thumbs-fade .game-card > div > img, .thumbs-fade .big-win-thumb > img { transition: none; } }